« get me outta code hell

hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src/static/site6.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/static/site6.css')
-rw-r--r--src/static/site6.css136
1 files changed, 118 insertions, 18 deletions
diff --git a/src/static/site6.css b/src/static/site6.css
index 4d6d79a..c23acff 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -32,7 +32,9 @@
 /* Layout - Common */
 
 body {
-  margin: 10px;
+  position: relative;
+  margin: 0;
+  padding: 10px;
   overflow-y: scroll;
 }
 
@@ -41,8 +43,8 @@ body::before {
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   z-index: -1;
 
   /* NB: these are 100 LVW, "largest view width", etc.
@@ -56,7 +58,7 @@ body::before {
 
 #page-container {
   max-width: 1100px;
-  margin: 10px auto 50px;
+  margin: 0 auto 40px;
   padding: 15px 0;
 }
 
@@ -468,6 +470,18 @@ a:not([href]):hover {
   text-decoration: none;
 }
 
+.external-link:not(.from-content) {
+  white-space: nowrap;
+}
+
+.external-link.indicate-external::after {
+  content: '\00a0➚';
+}
+
+.external-link.indicate-external:hover::after {
+  color: white;
+}
+
 .nav-main-links .nav-link.current > span.nav-link-content > a {
   font-weight: 800;
 }
@@ -476,13 +490,13 @@ a:not([href]):hover {
   display: inline-block;
 }
 
-.nav-links-index .nav-link.has-divider::before,
-.nav-links-groups .nav-link.has-divider::before {
+.nav-links-index .nav-link:not(:first-child)::before,
+.nav-links-groups .nav-link:not(:first-child)::before {
   content: "\0020\00b7\0020";
   font-weight: 800;
 }
 
-.nav-links-hierarchical .nav-link.has-divider::before {
+.nav-links-hierarchical .nav-link:not(:first-child)::before {
   content: "\0020/\0020";
 }
 
@@ -594,6 +608,48 @@ li:not(:first-child:last-child) .tooltip,
           user-select: none;
 
   cursor: default;
+
+  display: grid;
+
+  grid-template-columns:
+    [icon-start] auto [icon-end domain-start] auto [domain-end];
+}
+
+.icons-tooltip .icon {
+  grid-column-start: icon-start;
+  grid-column-end: icon-end;
+}
+
+.icons-tooltip .icon-platform {
+  display: none;
+
+  grid-column-start: domain-start;
+  grid-column-end: domain-end;
+
+  --icon-platform-opacity: 0.8;
+  padding-right: 4px;
+  opacity: 0.8;
+}
+
+.icons-tooltip.show-info .icon-platform {
+  display: inline;
+  animation: icon-platform 0.2s forwards linear;
+}
+
+@keyframes icon-platform {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: var(--icon-platform-opacity);
+  }
+}
+
+.icons-tooltip .icon:hover + .icon-platform {
+  --icon-platform-opacity: 1;
+  text-decoration: underline;
+  text-decoration-color: #ffffffaa;
 }
 
 .datetimestamp-tooltip .tooltip-content,
@@ -903,7 +959,6 @@ ul.quick-info li:not(:last-child)::after {
 }
 
 li .by {
-  display: inline-block;
   font-style: oblique;
   max-width: 600px;
 }
@@ -1020,6 +1075,38 @@ li > ul {
   margin-top: 5px;
 }
 
+.additional-files-list {
+  padding-left: 0;
+}
+
+.additional-files-list > li {
+  list-style-type: none;
+}
+
+.additional-files-list summary {
+  /* Sorry, Safari!
+   * https://bugs.webkit.org/show_bug.cgi?id=157323
+   */
+  list-style-position: outside;
+  margin-left: 40px;
+}
+
+.additional-files-list details ul {
+  margin-left: 40px;
+  margin-top: 2px;
+  margin-bottom: 10px;
+}
+
+.additional-files-list .entry-description {
+  list-style-type: none;
+  max-width: 540px;
+
+  /* This should be margin-bottom, but cascading rules
+   * cause some awkwardness - `#content li` takes precedence.
+   */
+  padding-bottom: 3px;
+}
+
 .group-contributions-table {
   display: inline-block;
 }
@@ -1894,7 +1981,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   position: absolute;
   width: 100%;
   box-sizing: border-box;
-  padding: 10px 40px 5px 20px;
+  padding: 10px 20px 5px 20px;
   margin-top: 0;
   z-index: -1;
 
@@ -1924,6 +2011,10 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   opacity: 0;
 }
 
+.content-sticky-subheading {
+  padding-right: 20px;
+}
+
 .content-sticky-heading-container h2.visible {
   margin-top: 0;
   opacity: 1;
@@ -2047,9 +2138,13 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   border-radius: 0 0 8px 8px;
   border: 2px solid var(--primary-color);
   background: var(--deep-ghost-color);
-  padding: 3px;
   overflow: hidden;
 
+  box-shadow:
+    0 0 90px 30px #00000060,
+    0 0 20px 10px #00000040,
+    0 0 10px 3px #00000080;
+
   -webkit-backdrop-filter: blur(3px);
           backdrop-filter: blur(3px);
 }
@@ -2060,6 +2155,8 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   overflow: hidden;
   width: 80vmin;
   height: 80vmin;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 #image-overlay-image,
@@ -2073,8 +2170,10 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
 
 #image-overlay-image {
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 3px;
+  left: 3px;
+  width: calc(100% - 6px);
+  height: calc(100% - 4px);
 }
 
 #image-overlay-image-thumb {
@@ -2202,12 +2301,12 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
     z-index: 2;
   }
 
-  html[data-url-key="localized.home"] #page-container.has-one-sidebar .grid-listing > .grid-item:not(:nth-child(n+10)) {
+  html[data-url-key="localized.home"] #page-container.has-one-sidebar .grid-listing > .grid-item:not(:nth-child(n+7)) {
     flex-basis: 23%;
     margin: 15px;
   }
 
-  html[data-url-key="localized.home"] #page-container.has-one-sidebar .grid-listing > .grid-item:nth-child(n+10) {
+  html[data-url-key="localized.home"] #page-container.has-one-sidebar .grid-listing > .grid-item:nth-child(n+7) {
     flex-basis: 18%;
     margin: 10px;
   }
@@ -2216,7 +2315,8 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
 /* Layout - Medium or Thin */
 
 @media (max-width: 899.98px) {
-  .sidebar-column:not(.no-hide) {
+  .sidebar.collapsible,
+  .sidebar-column.all-boxes-collapsible {
     display: none;
   }
 
@@ -2224,15 +2324,15 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
     display: block;
   }
 
-  .layout-columns.vertical-when-thin {
+  .layout-columns {
     flex-direction: column;
   }
 
-  .layout-columns.vertical-when-thin > *:not(:last-child) {
+  .layout-columns > *:not(:last-child) {
     margin-bottom: 10px;
   }
 
-  .sidebar-column.no-hide {
+  .sidebar-column {
     max-width: unset !important;
     flex-basis: unset !important;
     margin-right: 0 !important;