Template:PatchHighlights/styles.css: Difference between revisions
Template page
More actions
m Protected "Template:PatchHighlights/styles.css" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)) Tags: Mobile edit Mobile web edit |
No edit summary Tags: Mobile edit Mobile web edit |
||
| Line 1: | Line 1: | ||
/* Template:PatchHighlights/styles.css | /* SpiritVale Wiki — Template:PatchHighlights/styles.css */ | ||
/* Patch highlight cards and responsive grid styles. */ | |||
.sv-ph-wrap{width:100%;max-width:700px;margin:1em auto} | |||
.sv-ph-head{text-align:center;font-weight:800;padding:10px 12px;margin:10px} | /* -------------------------------------------------------------------------- */ | ||
.sv-ph-pad{padding:.75rem} | /* 1) Layout */ | ||
.sv-ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start;width:100%;direction:rtl} | /* -------------------------------------------------------------------------- */ | ||
.sv-ph-empty{grid-column:1/-1;opacity:.75;text-align:center;padding:1rem;direction:ltr} | |||
.sv-ph-item{text-align:left;direction:ltr;padding:1rem 1.1rem .85rem;min-width:0;word-break:break-word} | .sv-ph-wrap{ | ||
.sv-ph-item__title{font-size:1.25em;font-weight:800;line-height:1.2;margin:-.1em 0 .35em 0} | width:100%; | ||
.sv-ph-item__date{margin:.1em 0;font-size:.85em;font-style:italic;opacity:.9} | max-width:700px; | ||
.sv-ph-item__blurb{font-size:.92em;line-height:1.65em;margin:.35em 0 0 0;opacity:.95} | margin:1em auto; | ||
.sv-ph-item__divider{height:1px;margin:.35rem 0 .55rem 0;background:rgba(0,0,0,0.18)} | } | ||
.skin-theme-clientpref-night .sv-ph-item__divider{background:rgba(255,255,255,0.16)} | |||
@media (prefers-color-scheme:dark){.skin-theme-clientpref-os .sv-ph-item__divider{background:rgba(255,255,255,0.16)}} | .sv-ph-head{ | ||
@media (prefers-color-scheme:light){.skin-theme-clientpref-os .sv-ph-item__divider{background:rgba(0,0,0,0.18)}} | text-align:center; | ||
@media (max-width:1024px){.sv-ph-grid{grid-template-columns:repeat(2,1fr)}.sv-ph-grid>.sv-ph-item:nth-of-type(n+3){display:none}} | font-weight:800; | ||
@media (max-width:640px){.sv-ph-grid{grid-template-columns:1fr;direction:ltr}.sv-ph-grid>.sv-ph-item:nth-of-type(n+2){display:none}} | padding:10px 12px; | ||
margin:10px; | |||
} | |||
.sv-ph-pad{ | |||
padding:.75rem; | |||
} | |||
.sv-ph-grid{ | |||
display:grid; | |||
grid-template-columns:repeat(3,1fr); | |||
gap:1rem; | |||
align-items:start; | |||
width:100%; | |||
direction:rtl; | |||
} | |||
.sv-ph-empty{ | |||
grid-column:1/-1; | |||
opacity:.75; | |||
text-align:center; | |||
padding:1rem; | |||
direction:ltr; | |||
} | |||
/* -------------------------------------------------------------------------- */ | |||
/* 2) Card content */ | |||
/* -------------------------------------------------------------------------- */ | |||
.sv-ph-item{ | |||
text-align:left; | |||
direction:ltr; | |||
padding:1rem 1.1rem .85rem; | |||
min-width:0; | |||
word-break:break-word; | |||
} | |||
.sv-ph-item__title{ | |||
font-size:1.25em; | |||
font-weight:800; | |||
line-height:1.2; | |||
margin:-.1em 0 .35em 0; | |||
} | |||
.sv-ph-item__date{ | |||
margin:.1em 0; | |||
font-size:.85em; | |||
font-style:italic; | |||
opacity:.9; | |||
} | |||
.sv-ph-item__blurb{ | |||
font-size:.92em; | |||
line-height:1.65em; | |||
margin:.35em 0 0 0; | |||
opacity:.95; | |||
} | |||
.sv-ph-item__divider{ | |||
height:1px; | |||
margin:.35rem 0 .55rem 0; | |||
background:rgba(0,0,0,0.18); | |||
} | |||
/* -------------------------------------------------------------------------- */ | |||
/* 3) Theme */ | |||
/* -------------------------------------------------------------------------- */ | |||
.skin-theme-clientpref-night .sv-ph-item__divider{ | |||
background:rgba(255,255,255,0.16); | |||
} | |||
@media (prefers-color-scheme:dark){ | |||
.skin-theme-clientpref-os .sv-ph-item__divider{ | |||
background:rgba(255,255,255,0.16); | |||
} | |||
} | |||
@media (prefers-color-scheme:light){ | |||
.skin-theme-clientpref-os .sv-ph-item__divider{ | |||
background:rgba(0,0,0,0.18); | |||
} | |||
} | |||
/* -------------------------------------------------------------------------- */ | |||
/* 4) Responsive */ | |||
/* -------------------------------------------------------------------------- */ | |||
@media (max-width:1024px){ | |||
.sv-ph-grid{ | |||
grid-template-columns:repeat(2,1fr); | |||
} | |||
.sv-ph-grid > .sv-ph-item:nth-of-type(n+3){ | |||
display:none; | |||
} | |||
} | |||
@media (max-width:640px){ | |||
.sv-ph-grid{ | |||
grid-template-columns:1fr; | |||
direction:ltr; | |||
} | |||
.sv-ph-grid > .sv-ph-item:nth-of-type(n+2){ | |||
display:none; | |||
} | |||
} | |||