MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
notes |
css |
||
(2 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/* Note template styles - wiki-style info boxes */ | |||
/* Note template styles */ | |||
.note { | .note { | ||
border: 1px solid #ccc; | border:1px solid #ccc; | ||
background: #f9f9f9; | border-left-width:6px; | ||
padding: | background:#f9f9f9; | ||
margin: | padding:12px 16px; | ||
border-radius: 4px; | margin:1em 0; | ||
border-radius:4px; | |||
box-shadow:0 1px 2px rgb(0 0 0 / 0.1); | |||
font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif; | |||
font-size:14px; | |||
line-height:1.4 | |||
} | } | ||
.note-info { | .note-info { | ||
border-color: #5bc0de; | border-left-color:#5bc0de; | ||
background: #d9edf7; | background:#d9edf7; | ||
color: #31708f | color:#31708f | ||
} | } | ||
.note-error { | .note-error { | ||
border-color: #d9534f; | border-left-color:#d9534f; | ||
background: #f2dede; | background:#f2dede; | ||
color: #a94442 | color:#a94442 | ||
} | } | ||
.note-warn { | .note-warn { | ||
border-color: #f0ad4e; | border-left-color:#f0ad4e; | ||
background: #fcf8e3; | background:#fcf8e3; | ||
color: #8a6d3b | color:#8a6d3b | ||
} | } | ||
.note-reminder { | .note-reminder { | ||
border-color: #5cb85c; | border-left-color:#5cb85c; | ||
background: #dff0d8; | background:#dff0d8; | ||
color: #3c763d | color:#3c763d | ||
} | } | ||
.note-inline { | .note-inline { | ||
display: inline-block; | display:inline-block; | ||
padding: 2px 6px; | padding:2px 6px; | ||
font-size: 90%; | font-size:90%; | ||
vertical-align: middle; | vertical-align:middle; | ||
margin-left: 0. | margin:0 0.3em; | ||
margin- | border-radius:3px; | ||
border-radius: | border-left-width:3px; | ||
box-shadow:none | |||
} | |||
.note-inline.note-info { | |||
border-left-color:#5bc0de; | |||
background:#e1f0fa; | |||
color:#31708f | |||
} | |||
.note-inline.note-error { | |||
border-left-color:#d9534f; | |||
background:#f8d7da; | |||
color:#a94442 | |||
} | |||
.note-inline.note-warn { | |||
border-left-color:#f0ad4e; | |||
background:#faf1d6; | |||
color:#8a6d3b | |||
} | |||
.note-inline.note-reminder { | |||
border-left-color:#5cb85c; | |||
background:#d8e9d1; | |||
color:#3c763d | |||
} | |||
:root { | |||
--bg-main:#f2f9fc; | |||
--bg-surface:#ffffff; | |||
--bg-sidebar:#e0f2f9; | |||
--bg-footer:#cde7f2; | |||
--bg-tabs:#c0e3f2; | |||
--border-color:#99cfe5; | |||
--accent:#339dc3; | |||
--accent-hover:#247fa3; | |||
--text-main:#1a1a1a; | |||
--text-muted:#4d4d4d | |||
} | |||
body, | |||
html { | |||
margin:0; | |||
padding:0; | |||
font-family:"Segoe UI","Helvetica Neue",sans-serif; | |||
background:var(--bg-main); | |||
color:var(--text-main); | |||
line-height:1.6 | |||
} | |||
#mw-panel { | |||
background-color:none; | |||
border-right:none; | |||
padding-top:1em | |||
} | |||
#p-logo { | |||
background:none; | |||
margin-bottom:1em | |||
} | |||
.vector-menu h3 { | |||
color:var(--accent); | |||
font-weight:bold; | |||
padding:0.5em 1em | |||
} | |||
.vector-menu-portal ul { | |||
list-style:none; | |||
padding-left:1em | |||
} | |||
.vector-menu-portal li a { | |||
display:block; | |||
padding:0.3em 0.5em; | |||
color:var(--accent); | |||
border-radius:4px | |||
} | |||
.vector-menu-portal li a:hover { | |||
background:var(--bg-tabs); | |||
color:var(--accent-hover) | |||
} | |||
#footer { | |||
padding:2em; | |||
text-align:center; | |||
font-size:0.9em; | |||
color:var(--text-muted) | |||
} | |||
.wikitable, | |||
table.infobox { | |||
border:1px solid var(--border-color); | |||
background:var(--bg-surface); | |||
color:var(--text-main); | |||
margin:1em 0; | |||
width:100% | |||
} | |||
#firstHeading { | |||
color:var(--accent); | |||
font-size:1.8em; | |||
margin-bottom:0.5em | |||
} | |||
h1, | |||
h2, | |||
h3, | |||
h4, | |||
h5, | |||
h6 { | |||
color:var(--accent); | |||
margin-top:1.5em; | |||
margin-bottom:0.6em | |||
} | |||
a { | |||
color:var(--accent); | |||
text-decoration: underline dotted; | |||
} | |||
a:hover { | |||
color:var(--accent-hover); | |||
text-decoration:underline; | |||
} | |||
@media screen and (max-width:768px) { | |||
#mw-panel { | |||
padding:0.5em | |||
} | |||
#searchform { | |||
flex-direction:column | |||
} | |||
#content, | |||
.mw-body { | |||
padding:1em | |||
} | |||
} | } |
Latest revision as of 11:19, 8 July 2025
/* CSS placed here will be applied to all skins */ /* Note template styles - wiki-style info boxes */ .note { border:1px solid #ccc; border-left-width:6px; background:#f9f9f9; padding:12px 16px; margin:1em 0; border-radius:4px; box-shadow:0 1px 2px rgb(0 0 0 / 0.1); font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif; font-size:14px; line-height:1.4 } .note-info { border-left-color:#5bc0de; background:#d9edf7; color:#31708f } .note-error { border-left-color:#d9534f; background:#f2dede; color:#a94442 } .note-warn { border-left-color:#f0ad4e; background:#fcf8e3; color:#8a6d3b } .note-reminder { border-left-color:#5cb85c; background:#dff0d8; color:#3c763d } .note-inline { display:inline-block; padding:2px 6px; font-size:90%; vertical-align:middle; margin:0 0.3em; border-radius:3px; border-left-width:3px; box-shadow:none } .note-inline.note-info { border-left-color:#5bc0de; background:#e1f0fa; color:#31708f } .note-inline.note-error { border-left-color:#d9534f; background:#f8d7da; color:#a94442 } .note-inline.note-warn { border-left-color:#f0ad4e; background:#faf1d6; color:#8a6d3b } .note-inline.note-reminder { border-left-color:#5cb85c; background:#d8e9d1; color:#3c763d } :root { --bg-main:#f2f9fc; --bg-surface:#ffffff; --bg-sidebar:#e0f2f9; --bg-footer:#cde7f2; --bg-tabs:#c0e3f2; --border-color:#99cfe5; --accent:#339dc3; --accent-hover:#247fa3; --text-main:#1a1a1a; --text-muted:#4d4d4d } body, html { margin:0; padding:0; font-family:"Segoe UI","Helvetica Neue",sans-serif; background:var(--bg-main); color:var(--text-main); line-height:1.6 } #mw-panel { background-color:none; border-right:none; padding-top:1em } #p-logo { background:none; margin-bottom:1em } .vector-menu h3 { color:var(--accent); font-weight:bold; padding:0.5em 1em } .vector-menu-portal ul { list-style:none; padding-left:1em } .vector-menu-portal li a { display:block; padding:0.3em 0.5em; color:var(--accent); border-radius:4px } .vector-menu-portal li a:hover { background:var(--bg-tabs); color:var(--accent-hover) } #footer { padding:2em; text-align:center; font-size:0.9em; color:var(--text-muted) } .wikitable, table.infobox { border:1px solid var(--border-color); background:var(--bg-surface); color:var(--text-main); margin:1em 0; width:100% } #firstHeading { color:var(--accent); font-size:1.8em; margin-bottom:0.5em } h1, h2, h3, h4, h5, h6 { color:var(--accent); margin-top:1.5em; margin-bottom:0.6em } a { color:var(--accent); text-decoration: underline dotted; } a:hover { color:var(--accent-hover); text-decoration:underline; } @media screen and (max-width:768px) { #mw-panel { padding:0.5em } #searchform { flex-direction:column } #content, .mw-body { padding:1em } }