MediaWiki:Common.css: Difference between revisions
Appearance
test |
test |
||
Line 1: | Line 1: | ||
/* Windows XP | /* Windows XP MediaWiki Theme */ | ||
:root { | |||
--xp-blue: #0A246A; | |||
--xp-light-blue: #A6CAF0; | |||
--xp-gray: #F0F0F0; | |||
--xp-dark-gray: #808080; | |||
--xp-white: #FFFFFF; | |||
--xp-text-color: #000000; | |||
--xp-border-light: #FFFFFF; | |||
--xp-border-dark: #808080; | |||
} | |||
body { | body { | ||
font-family: 'Tahoma | font-family: 'Tahoma', sans-serif; | ||
background-color: | background-color: var(--xp-gray); | ||
color: | color: var(--xp-text-color); | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
} | } | ||
/* | /* Navigation Styling */ | ||
# | #p-navigation { | ||
background-color: | background-color: var(--xp-light-blue); | ||
border: 2px solid var(--xp-blue); | |||
border-radius: 4px; | |||
padding: 5px; | |||
padding: | |||
} | } | ||
# | #p-navigation h3 { | ||
background-color: var(--xp-blue); | |||
color: var(--xp-white); | |||
padding: 3px 6px; | |||
margin: 0; | |||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
# | #p-navigation ul { | ||
list-style-type: none; | |||
padding: 0; | |||
margin: 5px 0; | |||
} | } | ||
. | #p-navigation li a { | ||
color: var(--xp-text-color); | |||
text-decoration: none; | |||
background-color: | display: block; | ||
border: 1px solid | padding: 2px 6px; | ||
transition: background-color 0.2s; | |||
} | |||
#p-navigation li a:hover { | |||
background-color: var(--xp-blue); | |||
color: var(--xp-white); | |||
} | |||
/* Buttons */ | |||
.mw-submit-buttons button, | |||
input[type="submit"], | |||
input[type="button"] { | |||
background-color: var(--xp-gray); | |||
border: 1px solid var(--xp-border-dark); | |||
border-top-color: var(--xp-border-light); | |||
border-left-color: var(--xp-border-light); | |||
padding: 3px 10px; | |||
font-family: 'Tahoma', sans-serif; | |||
box-shadow: 1px 1px 2px rgba(0,0,0,0.2); | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
. | .mw-submit-buttons button:hover, | ||
background-color: | input[type="submit"]:hover, | ||
input[type="button"]:hover { | |||
background-color: var(--xp-light-blue); | |||
} | } | ||
/* | /* Input Fields */ | ||
input[type="text"], | |||
background-color: | input[type="password"], | ||
textarea { | |||
border: 1px solid var(--xp-border-dark); | |||
padding: | background-color: var(--xp-white); | ||
padding: 2px; | |||
font-family: 'Tahoma', sans-serif; | |||
} | |||
/* Tabs */ | |||
#p-views ul { | |||
background-color: var(--xp-light-blue); | |||
border-bottom: 2px solid var(--xp-blue); | |||
padding: 5px; | |||
} | } | ||
# | #p-views li { | ||
display: inline-block; | |||
margin-right: 5px; | |||
} | } | ||
#p-views li a { | |||
padding: | background-color: var(--xp-gray); | ||
border: 1px solid var(--xp-border-dark); | |||
padding: 3px 8px; | |||
text-decoration: none; | |||
color: var(--xp-text-color); | |||
} | } | ||
. | #p-views li.selected a { | ||
background-color: | background-color: var(--xp-blue); | ||
color: var(--xp-white); | |||
} | } | ||
/* Content Area */ | /* Content Area */ | ||
#content | #content { | ||
background-color: | background-color: var(--xp-white); | ||
border: | border: 2px solid var(--xp-blue); | ||
padding: 15px; | padding: 15px; | ||
margin: 10px; | margin: 10px; | ||
box-shadow: 2px 2px 5px rgba(0,0,0,0.1); | |||
} | } | ||
/* | /* Headings */ | ||
h1, h2, h3, h4, h5, h6 { | |||
color: var(--xp-blue); | |||
border: 1px solid | border-bottom: 1px solid var(--xp-light-blue); | ||
padding-bottom: 5px; | |||
padding: 5px | } | ||
/* Links */ | |||
a { | |||
color: var(--xp-blue); | |||
text-decoration: none; | |||
} | } | ||
a:hover { | |||
text-decoration: underline; | |||
} | } | ||
/* | /* Sidebar */ | ||
#sidebar { | |||
background-color: var(--xp-gray); | |||
border: 1px solid var(--xp-border-dark); | |||
padding: 10px; | |||
background-color: | |||
} | } | ||
/* | /* Scrollbars */ | ||
::-webkit-scrollbar { | ::-webkit-scrollbar { | ||
width: 16px; | width: 16px; | ||
background-color: | background-color: var(--xp-gray); | ||
} | } | ||
::-webkit-scrollbar-thumb { | ::-webkit-scrollbar-thumb { | ||
background-color: | background-color: var(--xp-blue); | ||
border: 2px solid | border: 2px solid var(--xp-gray); | ||
} | } | ||
/* | /* Tooltips */ | ||
. | .tooltiptext { | ||
background-color: | background-color: var(--xp-light-blue); | ||
border: 1px solid | border: 1px solid var(--xp-blue); | ||
padding: 5px; | padding: 5px; | ||
font-size: 0.8em; | |||
} | } | ||
/* Responsive Adjustments */ | /* Responsive Adjustments */ | ||
@media screen and (max-width: 768px) { | @media screen and (max-width: 768px) { | ||
# | #content { | ||
margin: 5px; | |||
padding: 10px; | |||
} | } | ||
} | } |
Revision as of 23:25, 17 January 2025
/* Windows XP MediaWiki Theme */
:root {
--xp-blue: #0A246A;
--xp-light-blue: #A6CAF0;
--xp-gray: #F0F0F0;
--xp-dark-gray: #808080;
--xp-white: #FFFFFF;
--xp-text-color: #000000;
--xp-border-light: #FFFFFF;
--xp-border-dark: #808080;
}
body {
font-family: 'Tahoma', sans-serif;
background-color: var(--xp-gray);
color: var(--xp-text-color);
margin: 0;
padding: 0;
}
/* Navigation Styling */
#p-navigation {
background-color: var(--xp-light-blue);
border: 2px solid var(--xp-blue);
border-radius: 4px;
padding: 5px;
}
#p-navigation h3 {
background-color: var(--xp-blue);
color: var(--xp-white);
padding: 3px 6px;
margin: 0;
font-weight: bold;
}
#p-navigation ul {
list-style-type: none;
padding: 0;
margin: 5px 0;
}
#p-navigation li a {
color: var(--xp-text-color);
text-decoration: none;
display: block;
padding: 2px 6px;
transition: background-color 0.2s;
}
#p-navigation li a:hover {
background-color: var(--xp-blue);
color: var(--xp-white);
}
/* Buttons */
.mw-submit-buttons button,
input[type="submit"],
input[type="button"] {
background-color: var(--xp-gray);
border: 1px solid var(--xp-border-dark);
border-top-color: var(--xp-border-light);
border-left-color: var(--xp-border-light);
padding: 3px 10px;
font-family: 'Tahoma', sans-serif;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
cursor: pointer;
}
.mw-submit-buttons button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
background-color: var(--xp-light-blue);
}
/* Input Fields */
input[type="text"],
input[type="password"],
textarea {
border: 1px solid var(--xp-border-dark);
background-color: var(--xp-white);
padding: 2px;
font-family: 'Tahoma', sans-serif;
}
/* Tabs */
#p-views ul {
background-color: var(--xp-light-blue);
border-bottom: 2px solid var(--xp-blue);
padding: 5px;
}
#p-views li {
display: inline-block;
margin-right: 5px;
}
#p-views li a {
background-color: var(--xp-gray);
border: 1px solid var(--xp-border-dark);
padding: 3px 8px;
text-decoration: none;
color: var(--xp-text-color);
}
#p-views li.selected a {
background-color: var(--xp-blue);
color: var(--xp-white);
}
/* Content Area */
#content {
background-color: var(--xp-white);
border: 2px solid var(--xp-blue);
padding: 15px;
margin: 10px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
color: var(--xp-blue);
border-bottom: 1px solid var(--xp-light-blue);
padding-bottom: 5px;
}
/* Links */
a {
color: var(--xp-blue);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Sidebar */
#sidebar {
background-color: var(--xp-gray);
border: 1px solid var(--xp-border-dark);
padding: 10px;
}
/* Scrollbars */
::-webkit-scrollbar {
width: 16px;
background-color: var(--xp-gray);
}
::-webkit-scrollbar-thumb {
background-color: var(--xp-blue);
border: 2px solid var(--xp-gray);
}
/* Tooltips */
.tooltiptext {
background-color: var(--xp-light-blue);
border: 1px solid var(--xp-blue);
padding: 5px;
font-size: 0.8em;
}
/* Responsive Adjustments */
@media screen and (max-width: 768px) {
#content {
margin: 5px;
padding: 10px;
}
}