Template:Def/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
 /* Template:def/styles.css
-Namespace: sv-def only
+   Namespace: sv-def only
 */
-.sv-def{
+/* Inline, flush with normal text */
-display:inline-flex;
+.sv-def {
-align-items:baseline;
+  display: inline;
-vertical-align:baseline;
+  line-height: inherit;
-line-height:inherit;
+  white-space: nowrap; /* keep icon + label together */
-white-space:nowrap;
+  cursor: help;
-gap:0.35em;
-cursor:help;
 }
+/* Icon wrappers only exist when an icon exists */
 .sv-def-icon,
-.sv-def-icon-img{
+.sv-def-icon-img {
-display:inline-flex;
+  display: inline-block;
-align-items:center;
+  margin-right: 0.35em; /* spacing between icon and text */
-justify-content:center;
+  vertical-align: -0.125em; /* nudge down to visually center with text */
-flex:0 0 auto;
 }
-.sv-def-icon-img img{
+  /* File icons rendered as images */
-height:1em;
+  .sv-def-icon-img img {
-width:auto;
+    height: 1em;
-display:block;
+    width: auto;
-}
+    vertical-align: middle;
+  }
-.sv-def-icon--missing{
+/* Missing file / missing record icon ("?") */
-width:1em;
+.sv-def-icon--missing {
-height:1em;
+  font-weight: 700;
-border-radius:999px;
-display:inline-flex;
-align-items:center;
-justify-content:center;
-font-weight:900;
-font-size:0.78em;
-line-height:1;
-border:1px solid currentColor;
-background:transparent;
-color:currentColor;
 }
-/* Default: normal prose (even if text is an <a>) */
+/* Link-like but not too loud */
-.sv-def-text,
+.sv-def-text {
-.sv-def a.sv-def-text,
+  color: #0b63c5;
-.sv-def .sv-def-text a{
+  border-bottom: 1px dotted currentColor;
-color:inherit;
+  text-decoration: none;
-text-decoration:none;
-border-bottom:none;
 }
-/* Hover: link-like (TemplateStyles-safe) */
+.sv-def:hover .sv-def-text {
-.sv-def:hover .sv-def-text,
+  border-bottom-style: solid;
-.sv-def:hover a.sv-def-text,
-.sv-def:hover .sv-def-text a{
-color:#0b63f0;
-border-bottom:1px dotted currentColor;
-text-decoration:none;
 }
 /* Missing/error states */
 .sv-def--missing,
-.sv-def--error{
+.sv-def--error {
-cursor:not-allowed;
+  cursor: not-allowed;
-opacity:0.90;
+  opacity: 0.85;
-}
-/* Don’t advertise missing/error as links on hover */
-.sv-def--missing:hover .sv-def-text,
-.sv-def--missing:hover a.sv-def-text,
-.sv-def--missing:hover .sv-def-text a,
-.sv-def--error:hover .sv-def-text,
-.sv-def--error:hover a.sv-def-text,
-.sv-def--error:hover .sv-def-text a{
-color:inherit;
-border-bottom:none;
-text-decoration:none;
 }