Template:Def/styles.css: Difference between revisions
Template page
More actions
No edit summary Tags: Manual revert Mobile edit Mobile web edit |
No edit summary Tags: Mobile edit Mobile web edit |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* Template:def/styles.css | /* SpiritVale Wiki — Template:def/styles.css */ | ||
/* Final minimal sv-def namespace styling. */ | |||
*/ | /* -------------------------------------------------------------------------- */ | ||
/* Canonical ownership map */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* This sheet owns only the Definitions / sv-def namespace. It is responsible */ | |||
/* for inline definition tokens, pill variants, icons, and definition-local */ | |||
/* emphasis states. */ | |||
/* */ | |||
/* It does NOT own sitewide tokens, Citizen theme logic, shared popup anatomy, */ | |||
/* or module/template layout outside the sv-def namespace. */ | |||
/* */ | |||
/* Responsive cleanup note: this stylesheet currently does not require its own */ | |||
/* breakpoint rules. If responsive behavior is ever added here, it should use */ | |||
/* the canonical six-viewpoint ladder from Common.css. */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* | |||
.sv-def { | /* -------------------------------------------------------------------------- */ | ||
display: inline; | /* 1) Wrapper */ | ||
line-height: inherit; | /* -------------------------------------------------------------------------- */ | ||
cursor: help; | .sv-def{ | ||
display:inline-flex; | |||
align-items:center; | |||
white-space:nowrap; | |||
line-height:inherit; | |||
vertical-align:middle; | |||
cursor:help; | |||
} | } | ||
/* | .sv-def[data-sv-def-link], | ||
.sv-def--pill{ | |||
cursor:pointer; | |||
} | |||
.sv-def:focus{ | |||
outline:2px solid currentColor; | |||
outline-offset:2px; | |||
border-radius:8px; | |||
} | |||
/* -------------------------------------------------------------------------- */ | |||
/* 2) Icons */ | |||
/* -------------------------------------------------------------------------- */ | |||
.sv-def-icon, | .sv-def-icon, | ||
.sv-def-icon-img { | .sv-def-icon-img{ | ||
display: inline- | display:inline-flex; | ||
margin-right: 0. | align-items:center; | ||
vertical-align: | justify-content:center; | ||
margin-right:0.25em; | |||
line-height:0; | |||
vertical-align:middle; | |||
} | } | ||
.sv-def-icon-img img{ | |||
display:block; | |||
width:14px; | |||
height:14px; | |||
} | |||
.sv-def-icon--missing{ | |||
.sv-def-icon--missing { | display:inline-flex; | ||
font-weight: | align-items:center; | ||
justify-content:center; | |||
width:14px; | |||
height:14px; | |||
border-radius:999px; | |||
border:1px solid rgba(255,255,255,0.28); | |||
background:rgba(0,0,0,0.18); | |||
font-weight:900; | |||
font-size:11px; | |||
line-height:1; | |||
} | } | ||
/* | /* -------------------------------------------------------------------------- */ | ||
.sv-def-text { | /* 3) Text */ | ||
color: | /* -------------------------------------------------------------------------- */ | ||
border-bottom: 1px dotted currentColor; | |||
text-decoration: none; | .sv-def-text{ | ||
color:var(--color-link); | |||
border-bottom:1px dotted currentColor; | |||
text-decoration:none; | |||
} | } | ||
.sv-def:hover .sv-def-text { | .sv-def:hover .sv-def-text{ | ||
border-bottom-style: solid; | color:var(--color-link--hover); | ||
border-bottom-style:solid; | |||
} | } | ||
/* | /* -------------------------------------------------------------------------- */ | ||
/* 4) States and modes */ | |||
/* -------------------------------------------------------------------------- */ | |||
.sv-def--missing, | .sv-def--missing, | ||
.sv-def--error { | .sv-def--error{ | ||
cursor: not-allowed; | cursor:not-allowed; | ||
opacity: 0.85; | opacity:0.85; | ||
} | |||
.sv-def--pill .sv-def-text, | |||
.sv-def--fill .sv-def-text{ | |||
border-bottom:none; | |||
} | |||
.sv-def--pill .sv-def-text{ | |||
color:inherit; | |||
} | |||
.sv-def--fill{ | |||
display:block; | |||
width:100%; | |||
height:100%; | |||
white-space:normal; | |||
} | |||
.sv-def--fill .sv-def-text{ | |||
display:block; | |||
width:100%; | |||
height:100%; | |||
} | } | ||