Added pills, but not for ZH

2025-10-30 01:35:32 +00:00 · 2022-05-22 06:40:55 +02:00
parent 8179ea6e68
commit 45b5999981
9 changed files with 328 additions and 21 deletions
--- a/HaWeb/wwwroot/css/output.css
+++ b/HaWeb/wwwroot/css/output.css
@@ -1068,13 +1068,84 @@ body {
  flex-direction: column;
 }

-.ha-letterhead .ha-metadata .ha-metadatarows .ha-metadatadate {
+.ha-letterhead .ha-metadata .ha-metadataupperrow {
  display: flex;
+  flex-direction: row;
  line-height: 1.375;
+}
+
+.ha-letterhead .ha-metadata .ha-metadatarows .ha-metadataupperrow .ha-metadatadate {
+  display: flex;
  font-variant-numeric: oldstyle-nums;
  font-variant-caps: petite-caps;
 }

+.ha-letterhead .ha-metadata .ha-tooltip {
+  position: relative;
+  display: inline-block;
+  cursor: default;
+  align-self: center;
+}
+
+.ha-letterhead .ha-metadata .ha-tooltiptext {
+  position: absolute;
+  z-index: 10;
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.ha-letterhead .ha-metadata .ha-tooltiptext::after {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+}
+
+.ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill {
+  margin-left: 0.5rem;
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.1rem;
+  padding-bottom: 0.1rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross {
+  position: relative;
+  display: inline-block;
+}
+
+.ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::before {
+  border-bottom-width: 2px;
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
+.ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::before, .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::after {
+  position: absolute;
+  right: 0px;
+  top: 50%;
+  height: 0px;
+  width: 100%;
+}
+
 .ha-letterhead .ha-metadata .ha-metadatarows .hametadatapersons {
  display: flex;
  line-height: 1.375;
@@ -1115,6 +1186,7 @@ body {
 .ha-letterheader .ha-lettertabs a {
  margin-right: 0.25rem;
  display: inline-block;
+  cursor: pointer;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  --tw-text-opacity: 1;
@@ -1133,6 +1205,7 @@ body {
 }

 .ha-letterheader .ha-lettertabs a.active {
+  pointer-events: none;
  border-bottom-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity));
@@ -1191,6 +1264,10 @@ body {
  line-height: 1.48;
 }

+.hide {
+  display: none;
+}
+
 .ha-lettertext div {
  display: inline;
 }
@@ -2081,6 +2158,32 @@ body {
  color:#000000;
 }

+.ha-tooltip .ha-tooltiptext {
+  visibility: hidden;
+  width: 160px;
+  bottom: 155%;
+  left: 50%;
+  margin-left: -80px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.ha-tooltip .ha-tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: rgb(226 232 240 / var(--tw-bg-opacity)) transparent transparent transparent;
+}
+
+.ha-tooltip:hover .ha-tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+
 .ha-open-btn-collapsed-box::before {
  content: '\200E+';
  font-weight: 900;
@@ -2664,6 +2767,15 @@ body {
  min-width: 8.333%;
 }

+.ha-cross::before, .ha-cross::after {
+  content: '';
+  top: 50%;
+}
+
+.ha-cross::before {
+  transform: skewY(-27deg);
+}
+
 /* Not possible otherwise, overwrites javascript set style values, which cant be defined before render */

 /* @media (max-width: 1190px) {
--- a/HaWeb/wwwroot/css/site.css
+++ b/HaWeb/wwwroot/css/site.css
@@ -327,14 +327,52 @@
        @apply flex flex-col
    }

-    .ha-letterhead .ha-metadata .ha-metadatarows .ha-metadatadate {
-        @apply flex caps-petite leading-snug numeric-mediaeval
+    .ha-letterhead .ha-metadata .ha-metadataupperrow {
+        @apply flex flex-row leading-snug
+    }
+
+    .strikethrough {
+        @apply line-through
+    }
+
+    .ha-letterhead .ha-metadata .ha-metadatarows .ha-metadataupperrow .ha-metadatadate {
+        @apply flex caps-petite numeric-mediaeval
+    }
+
+    .ha-letterhead .ha-metadata .ha-tooltip {
+        @apply self-center cursor-default inline-block relative
+    }
+
+    .ha-letterhead .ha-metadata .ha-tooltiptext {
+        @apply bg-slate-100 rounded text-sm px-1 py-0.5 absolute z-10 text-center shadow
+    }
+
+    .ha-letterhead .ha-metadata .ha-tooltiptext::after {
+        @apply absolute top-full left-1/2
+    }
+
+    .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill {
+        @apply text-xs bg-slate-100 rounded px-2 ml-2 py-[0.1rem] shadow
+    }
+    
+    .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross {
+        @apply relative inline-block
+    }
+
+    .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::before {
+        @apply border-b-2 border-gray-600
+    }
+
+    .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::before,
+    .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::after {
+        @apply w-full h-0 absolute right-0 top-1/2
    }

    .ha-letterhead .ha-metadata .ha-metadatarows .hametadatapersons {
        @apply flex leading-snug
    }

+
 /* Classes for Letter View */

    .ha-letterheader {
@@ -350,11 +388,11 @@
    }

    .ha-letterheader .ha-lettertabs a {
-        @apply inline-block px-1 mr-1 md:mr-3 text-slate-700 hover:text-slate-900
+        @apply inline-block px-1 mr-1 md:mr-3 text-slate-700 hover:text-slate-900 cursor-pointer
    }

    .ha-letterheader .ha-lettertabs a.active {
-        @apply border-b-2 border-slate-200 text-hamannHighlight
+        @apply pointer-events-none border-b-2 border-slate-200 text-hamannHighlight
    }

    .ha-letterheader .ha-lettertabs a:first {
@@ -381,6 +419,10 @@
        @apply shrink-0 border-l-2 ml-12 px-4 pt-4 relative font-serif leading-[1.48] pb-7 bg-slate-50
    }

+    .hide {
+        @apply hidden
+    }
+
    .ha-rightsidebar {
        @apply shrink-0 grow basis-1/3
    }
@@ -764,6 +806,33 @@ body {
    color:#000000;
 }

+.ha-tooltip .ha-tooltiptext {
+    visibility: hidden;
+    width: 160px;
+    bottom: 155%;
+    left: 50%;
+    margin-left: -80px;
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  
+  .ha-tooltip .ha-tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: rgb(226 232 240 / var(--tw-bg-opacity)) transparent transparent transparent;
+  }
+  
+  .ha-tooltip:hover .ha-tooltiptext {
+    visibility: visible;
+    opacity: 1;
+  }
+  
+

 .ha-open-btn-collapsed-box::before {
    content: '\200E+';
@@ -1348,6 +1417,15 @@ body {
 }


+.ha-cross::before, .ha-cross::after {
+    content: '';
+  }
+
+  .ha-cross::before {
+    -webkit-transform: skewY(-27deg);
+    transform: skewY(-27deg);
+  }
+

 /* Not possible otherwise, overwrites javascript set style values, which cant be defined before render */
 /* @media (max-width: 1190px) {