MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
theme |
css |
||
| Line 12: | Line 12: | ||
font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif; | font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif; | ||
font-size:14px; | font-size:14px; | ||
line-height:1.4 | line-height:1.4 | ||
} | } | ||
.note-info { | .note-info { | ||
border-left-color:#5bc0de; | border-left-color:#5bc0de; | ||
background:#d9edf7; | background:#d9edf7; | ||
color:#31708f | color:#31708f | ||
} | } | ||
.note-error { | .note-error { | ||
border-left-color:#d9534f; | border-left-color:#d9534f; | ||
background:#f2dede; | background:#f2dede; | ||
color:#a94442 | color:#a94442 | ||
} | } | ||
.note-warn { | .note-warn { | ||
border-left-color:#f0ad4e; | border-left-color:#f0ad4e; | ||
background:#fcf8e3; | background:#fcf8e3; | ||
color:#8a6d3b | color:#8a6d3b | ||
} | } | ||
.note-reminder { | .note-reminder { | ||
border-left-color:#5cb85c; | border-left-color:#5cb85c; | ||
background:#dff0d8; | background:#dff0d8; | ||
color:#3c763d | color:#3c763d | ||
} | } | ||
.note-inline { | .note-inline { | ||
| Line 42: | Line 42: | ||
border-radius:3px; | border-radius:3px; | ||
border-left-width:3px; | border-left-width:3px; | ||
box-shadow:none | box-shadow:none | ||
} | } | ||
.note-inline.note-info { | .note-inline.note-info { | ||
border-left-color:#5bc0de; | border-left-color:#5bc0de; | ||
background:#e1f0fa; | background:#e1f0fa; | ||
color:#31708f | color:#31708f | ||
} | } | ||
.note-inline.note-error { | .note-inline.note-error { | ||
border-left-color:#d9534f; | border-left-color:#d9534f; | ||
background:#f8d7da; | background:#f8d7da; | ||
color:#a94442 | color:#a94442 | ||
} | } | ||
.note-inline.note-warn { | .note-inline.note-warn { | ||
border-left-color:#f0ad4e; | border-left-color:#f0ad4e; | ||
background:#faf1d6; | background:#faf1d6; | ||
color:#8a6d3b | color:#8a6d3b | ||
} | } | ||
.note-inline.note-reminder { | .note-inline.note-reminder { | ||
border-left-color:#5cb85c; | border-left-color:#5cb85c; | ||
background:#d8e9d1; | background:#d8e9d1; | ||
color:#3c763d | color:#3c763d | ||
} | } | ||
:root { | :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 { | |||
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 { | #mw-panel { | ||
background-color:none; | |||
border-right:none; | |||
padding-top:1em | |||
} | } | ||
#p-logo { | #p-logo { | ||
background:none; | |||
margin-bottom:1em | |||
} | } | ||
.vector-menu h3 { | .vector-menu h3 { | ||
color:var(--accent); | |||
font-weight:bold; | |||
padding:0.5em 1em | |||
} | } | ||
.vector-menu-portal ul { | .vector-menu-portal ul { | ||
list-style:none; | |||
padding-left:1em | |||
} | } | ||
.vector-menu-portal li a { | .vector-menu-portal li a { | ||
display:block; | |||
padding:0.3em 0.5em; | |||
color:var(--accent); | |||
border-radius:4px | |||
} | } | ||
.vector-menu-portal li a:hover { | .vector-menu-portal li a:hover { | ||
background:var(--bg-tabs); | |||
color:var(--accent-hover) | |||
} | } | ||
#footer { | #footer { | ||
padding:2em; | |||
text-align:center; | |||
font-size:0.9em; | |||
color:var(--text-muted) | |||
} | } | ||
.wikitable, | |||
table.infobox { | |||
.wikitable, table.infobox { | border:1px solid var(--border-color); | ||
background:var(--bg-surface); | |||
color:var(--text-main); | |||
margin:1em 0; | |||
width:100% | |||
} | } | ||
#firstHeading { | #firstHeading { | ||
color:var(--accent); | |||
font-size:1.8em; | |||
margin-bottom:0.5em | |||
} | } | ||
h1, | |||
h2, | |||
h1, h2, h3, h4, h5, h6 { | h3, | ||
h4, | |||
h5, | |||
h6 { | |||
color:var(--accent); | |||
margin-top:1.5em; | |||
margin-bottom:0.6em | |||
} | } | ||
a { | a { | ||
color:var(--accent); | |||
text-decoration: underline dotted; | |||
} | } | ||
a:hover { | a:hover { | ||
color:var(--accent-hover); | |||
text-decoration:underline; | |||
} | } | ||
@media screen and (max-width:768px) { | |||
#mw-panel { | |||
@media screen and (max-width: 768px) { | 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
}
}