MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| (29 intermediate revisions by the same user not shown) | |||
| Line 424: | Line 424: | ||
rgba(255,196,0,0.3) | rgba(255,196,0,0.3) | ||
); | ); | ||
} | |||
/* ========================================================= | |||
OOO CARD MOBILE TEXT | |||
========================================================= */ | |||
@media (max-width: 700px) { | |||
.ooo-card { | |||
padding: 16px; | |||
} | |||
.ooo-card h2 { | |||
font-size: 1.35rem; | |||
line-height: 1.25; | |||
} | |||
.ooo-card h3 { | |||
font-size: 1.15rem; | |||
line-height: 1.25; | |||
} | |||
.ooo-card p, | |||
.ooo-card li { | |||
font-size: 0.95rem; | |||
line-height: 1.45; | |||
} | |||
/* prevent text overflow */ | |||
.ooo-card { | |||
word-break: break-word; | |||
overflow-wrap: anywhere; | |||
} | |||
} | } | ||
| Line 1,422: | Line 1,456: | ||
/* ========================================================= | /* ========================================================= | ||
OOO External Link | OOO External Link | ||
========================================================= */ | |||
.ooo-extlink a, | |||
.ooo-extlink a.external, | |||
.ooo-extlink a.extiw { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 6px; | |||
text-align: center; | |||
padding: 4px 8px; | |||
border-radius: 4px; | |||
border: 1px solid var(--ooo-border); | |||
background: rgba(245,196,0,0.05); | |||
color: var(--ooo-accent) !important; | |||
text-decoration: none !important; | |||
font-weight: 600; | |||
transition: background 0.15s ease, border-color 0.15s ease; | |||
background-image: none !important; | |||
} | |||
/* hover */ | |||
.ooo-extlink a:hover, | |||
.ooo-extlink a.external:hover, | |||
.ooo-extlink a.extiw:hover { | |||
background: rgba(245,196,0,0.15); | |||
border-color: rgba(245,196,0,0.6); | |||
} | |||
/* custom icon */ | |||
.ooo-extlink a::after, | |||
.ooo-extlink a.external::after, | |||
.ooo-extlink a.extiw::after { | |||
content: ""; | |||
display: inline-block; | |||
width: 12px; | |||
height: 12px; | |||
opacity: 0.8; | |||
flex-shrink: 0; | |||
background-color: currentColor; | |||
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M12 3h5v5h-2V6.4l-6.3 6.3-1.4-1.4L13.6 5H12V3zM5 5h4v2H7v6h6v-2h2v4H5V5z'/></svg>") no-repeat center / contain; | |||
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M12 3h5v5h-2V6.4l-6.3 6.3-1.4-1.4L13.6 5H12V3zM5 5h4v2H7v6h6v-2h2v4H5V5z'/></svg>") no-repeat center / contain; | |||
transition: transform 0.15s ease; | |||
} | |||
.ooo-extlink a:hover::after, | |||
.ooo-extlink a.external:hover::after, | |||
.ooo-extlink a.extiw:hover::after { | |||
transform: translate(1px,-1px); | |||
} | |||
/* ========================================================= | |||
OOO External Link Grid | |||
4 items per column | |||
========================================================= */ | |||
.ooo-extlinks-grid { | |||
display: grid; | |||
grid-auto-flow: column; | |||
grid-template-rows: repeat(4, auto); | |||
justify-content: start; | |||
align-content: start; | |||
column-gap: 10px; | |||
row-gap: 6px; | |||
margin: 8px 0; | |||
} | |||
/* remove MediaWiki paragraph wrappers */ | |||
.ooo-extlinks-grid p { | |||
display: contents; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
} | |||
/* remove random line breaks */ | |||
.ooo-extlinks-grid br { | |||
display: none; | |||
} | |||
/* normalize grid items */ | |||
.ooo-extlinks-grid .ooo-extlink { | |||
display: block; | |||
margin: 0; | |||
align-self: start; | |||
} | |||
/* tablet */ | |||
@media (max-width: 900px) { | |||
.ooo-extlinks-grid { | |||
grid-template-rows: repeat(3, auto); | |||
} | |||
} | |||
/* mobile */ | |||
@media (max-width: 600px) { | |||
.ooo-extlinks-grid { | |||
grid-auto-flow: row; | |||
grid-template-columns: 1fr; | |||
grid-template-rows: none; | |||
} | |||
} | |||
.skin-theme-clientpref-day .ooo-extlink a, | |||
.skin-theme-clientpref-day .ooo-extlink a.external, | |||
.skin-theme-clientpref-day .ooo-extlink a.extiw { | |||
background: rgba(245,196,0,0.12); | |||
border-color: rgba(245,196,0,0.55); | |||
color: #9a7a00 !important; | |||
} | |||
.skin-theme-clientpref-day .ooo-extlink a:hover { | |||
background: rgba(245,196,0,0.22); | |||
} | |||
/* ========================================================= | |||
OOO MENU LINK – navigation style | |||
========================================================= */ | |||
.mw-parser-output .ooo-menulink a { | |||
display: block; | |||
position: relative; | |||
padding: 4px 8px 4px 14px; | |||
text-decoration: none !important; | |||
color: inherit; | |||
transition: background 0.18s ease, color 0.18s ease; | |||
} | |||
/* left accent bar (always visible) */ | |||
.mw-parser-output .ooo-menulink a::before { | |||
content: ""; | |||
position: absolute; | |||
left: 0; | |||
top: 2px; | |||
bottom: 2px; | |||
width: 3px; | |||
background: var(--ooo-accent); | |||
opacity: 0.6; | |||
} | |||
/* arrow */ | |||
.mw-parser-output .ooo-menulink a::after { | |||
content: "➜"; | |||
position: absolute; | |||
right: 6px; | |||
opacity: 0; | |||
transform: translateX(-4px); | |||
color: var(--ooo-accent); | |||
font-weight: 700; | |||
transition: 0.18s ease; | |||
} | |||
/* hover */ | |||
.mw-parser-output .ooo-menulink a:hover { | |||
font-weight: 700; | |||
color: var(--ooo-accent) !important; | |||
background: linear-gradient( | |||
to right, | |||
rgba(245,196,0,0.10), | |||
rgba(245,196,0,0.02) | |||
); | |||
} | |||
/* show arrow */ | |||
.mw-parser-output .ooo-menulink a:hover::after { | |||
opacity: 1; | |||
transform: translateX(0); | |||
} | |||
/* ========================================================= | |||
OOO MENU LINK – COMING SOON | |||
========================================================= */ | ========================================================= */ | ||
.ooo- | .mw-parser-output .ooo-menulink-soon a { | ||
display: | |||
padding:4px 8px; | display: block; | ||
position: relative; | |||
background:rgba(245,196,0,0. | padding: 4px 8px 4px 14px; | ||
opacity: 0.55; | |||
font- | text-decoration: none !important; | ||
color: inherit; | |||
cursor: default; | |||
} | |||
/* dashed left indicator */ | |||
.mw-parser-output .ooo-menulink-soon a::before { | |||
content: ""; | |||
position: absolute; | |||
left: 0; | |||
top: 2px; | |||
bottom: 2px; | |||
width: 3px; | |||
background: repeating-linear-gradient( | |||
to bottom, | |||
rgba(245,196,0,0.5), | |||
rgba(245,196,0,0.5) 2px, | |||
transparent 2px, | |||
transparent 4px | |||
); | |||
} | |||
/* auto label */ | |||
.mw-parser-output .ooo-menulink-soon a::after { | |||
content: " (coming soon)"; | |||
font-size: 0.85em; | |||
font-style: italic; | |||
opacity: 0.7; | |||
} | |||
/* disable hover effects */ | |||
.mw-parser-output .ooo-menulink-soon a:hover { | |||
background: none; | |||
color: inherit !important; | |||
font-weight: normal; | |||
} | } | ||
.ooo- | /* ========================================================= | ||
OOO MENU SUB SECTION | |||
border- | ========================================================= */ | ||
.mw-parser-output .ooo-menusub { | |||
margin-top: 14px; | |||
margin-bottom: 6px; | |||
font-weight: 700; | |||
font-size: 0.95rem; | |||
color: var(--ooo-accent); | |||
border-bottom: 1px solid rgba(245,196,0,0.35); | |||
padding-bottom: 3px; | |||
letter-spacing: 0.02em; | |||
} | } | ||