MediaWiki:Common.css: Difference between revisions
Appearance
i changed to windows xp css |
i maked windows xp css better |
||
Line 1: | Line 1: | ||
/* Windows XP MediaWiki Theme */ | /* Windows XP MediaWiki Ultimate Theme */ | ||
:root { | |||
/* Windows XP Color Palette */ | |||
--xp-background: #ECE9D8; | |||
--xp-text: #000000; | |||
--xp-blue: #0046D5; | |||
--xp-light-blue: #1C57B8; | |||
--xp-button-face: #F1EFE2; | |||
--xp-border: #ACA899; | |||
--xp-highlight: #316AC5; | |||
--xp-shadow: rgba(0,0,0,0.2); | |||
} | |||
/* Global Styling */ | |||
body { | body { | ||
background-color: | background-color: var(--xp-background); | ||
font-family: "Tahoma", sans-serif; | font-family: "Tahoma", "Segoe UI", sans-serif; | ||
color: | color: var(--xp-text); | ||
margin: 0; | |||
padding: 0; | |||
} | } | ||
/* | /* Windows XP Desktop-like Layout */ | ||
# | #mw-page-base { | ||
background- | background: linear-gradient(to bottom, #4E84C4, #6BA5E7); | ||
position: fixed; | |||
box-shadow: | top: 0; | ||
left: 0; | |||
width: 100%; | |||
height: 40px; | |||
z-index: 1000; | |||
box-shadow: 0 1px 3px rgba(0,0,0,0.2); | |||
} | } | ||
/* | /* Navigation Styling */ | ||
# | #sidebar { | ||
background-color: | background-color: var(--xp-button-face); | ||
border: 1px solid var(--xp-border); | |||
box-shadow: 2px 2px 4px var(--xp-shadow); | |||
border- | padding: 10px; | ||
border-radius: 4px; | |||
} | } | ||
/* | /* Advanced Button Styling */ | ||
.mw-submit-buttons input, | .mw-submit-buttons input, | ||
.mw-submit-buttons button, | .mw-submit-buttons button, | ||
.btn { | .btn { | ||
background- | background: linear-gradient(to bottom, #FFFFFF, #F1EFE2); | ||
border: 1px solid | border: 1px solid var(--xp-border); | ||
border-top-color: #FFFFFF; | border-top-color: #FFFFFF; | ||
border-left-color: #FFFFFF; | border-left-color: #FFFFFF; | ||
color: | color: var(--xp-text); | ||
padding: | padding: 4px 12px; | ||
box-shadow: 1px 1px 2px | box-shadow: 1px 1px 2px var(--xp-shadow); | ||
transition: all 0.2s ease; | |||
} | } | ||
Line 37: | Line 59: | ||
.mw-submit-buttons button:hover, | .mw-submit-buttons button:hover, | ||
.btn:hover { | .btn:hover { | ||
background- | background: linear-gradient(to bottom, #F1EFE2, #FFFFFF); | ||
border-color: | border-color: var(--xp-highlight); | ||
box-shadow: 2px 2px 4px var(--xp-shadow); | |||
} | } | ||
/* | /* Enhanced Link Styling */ | ||
a { | a { | ||
color: | color: var(--xp-blue); | ||
text-decoration: none; | text-decoration: none; | ||
transition: color 0.3s ease; | |||
} | } | ||
a:hover { | a:hover { | ||
color: var(--xp-light-blue); | |||
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
Line 54: | Line 79: | ||
#content { | #content { | ||
background-color: #FFFFFF; | background-color: #FFFFFF; | ||
border: 1px solid | border: 1px solid var(--xp-border); | ||
box-shadow: | box-shadow: 3px 3px 6px var(--xp-shadow); | ||
padding: 15px; | |||
margin: 10px; | |||
border-radius: 4px; | |||
} | } | ||
/* | /* Advanced Tab Styling */ | ||
#p-namespaces ul, | #p-namespaces ul, | ||
#p-views ul { | #p-views ul { | ||
background-color: | background-color: var(--xp-button-face); | ||
border-bottom: 1px solid | border-bottom: 1px solid var(--xp-border); | ||
display: flex; | |||
} | } | ||
#p-namespaces li a, | #p-namespaces li a, | ||
#p-views li a { | #p-views li a { | ||
background-color: | background-color: var(--xp-button-face); | ||
border: 1px solid | border: 1px solid transparent; | ||
color: | color: var(--xp-text); | ||
padding: 3px | padding: 5px 12px; | ||
margin: 0 2px; | |||
border-radius: 3px; | |||
transition: all 0.2s ease; | |||
} | } | ||
Line 76: | Line 108: | ||
#p-views li.selected a { | #p-views li.selected a { | ||
background-color: #FFFFFF; | background-color: #FFFFFF; | ||
border- | border-color: var(--xp-border); | ||
box-shadow: inset 1px 1px 3px var(--xp-shadow); | |||
} | } | ||
/* Form | /* Form Input Styling */ | ||
input[type="text"], | input[type="text"], | ||
input[type="password"], | input[type="password"], | ||
Line 85: | Line 118: | ||
border: 1px solid #7F9DB9; | border: 1px solid #7F9DB9; | ||
background-color: #FFFFFF; | background-color: #FFFFFF; | ||
padding: | padding: 4px; | ||
border-radius: 3px; | |||
font-family: Tahoma, sans-serif; | |||
} | } | ||
/* | /* Advanced Scrollbar */ | ||
::-webkit-scrollbar { | ::-webkit-scrollbar { | ||
width: | width: 17px; | ||
background-color: | background-color: var(--xp-button-face); | ||
} | } | ||
::-webkit-scrollbar-thumb { | ::-webkit-scrollbar-thumb { | ||
background-color: | background-color: var(--xp-border); | ||
border: 2px solid | border: 2px solid var(--xp-button-face); | ||
border-radius: 8px; | |||
} | |||
::-webkit-scrollbar-corner { | |||
background-color: var(--xp-button-face); | |||
} | } | ||
/* Windows XP | /* Windows XP Dialog Boxes */ | ||
.mw-dialog { | .mw-dialog { | ||
background-color: | background-color: var(--xp-buttonl-face); | ||
border: | border: 2px solid var(--xp-border); | ||
box-shadow: | box-shadow: 4px 4px 8px var(--xp-shadow); | ||
font-family: | border-radius: 6px; | ||
font-family: Tahoma, sans-serif; | |||
} | } | ||
/* | /* Advanced Indicator Styling */ | ||
.mw-indicator { | .mw-indicator { | ||
background- | background: linear-gradient(to bottom, var(--xp-blue), var(--xp-light-blue)); | ||
color: white; | color: white; | ||
padding: | padding: 3px 8px; | ||
border-radius: 3px; | |||
box-shadow: 1px 1px 3px var(--xp-shadow); | |||
} | } | ||
Line 117: | Line 160: | ||
button:active, | button:active, | ||
input[type="submit"]:active { | input[type="submit"]:active { | ||
border-color: # | border-color: var(--xp-text); | ||
background-color: # | background: linear-gradient(to bottom, #E1DFD2, #F1EFE2); | ||
box-shadow: inset 2px 2px 4px var(--xp-shadow); | |||
} | |||
/* Notification and Message Styling */ | |||
.mw-notification { | |||
background-color: var(--xp-button-face); | |||
border: 1px solid var(--xp-border); | |||
box-shadow: 2px 2px 4px var(--xp-shadow); | |||
font-family: Tahoma, sans-serif; | |||
border-radius: 4px; | |||
} | |||
/* Responsive Design Considerations */ | |||
@media (max-width: 768px) { | |||
body { | |||
font-size: 14px; | |||
} | |||
#sidebar { | |||
width: 100%; | |||
max-width: none; | |||
} | |||
} | |||
/* Additional Windows XP Easter Eggs */ | |||
.mw-logo::before { | |||
content: "BonziPEDIA"; | |||
position: absolute; | |||
top: 10px; | |||
left: 10px; | |||
color: white; | |||
font-family: Tahoma, sans-serif; | |||
font-weight: bold; | |||
} | } |