Jump to content

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →
ItzRafaelScout (talk | contribs)
Bureaucrats, Interface administrators, Administrators
5 edits
i maked windows xp css better
ItzRafaelScout (talk | contribs)
Bureaucrats, Interface administrators, Administrators
5 edits
test
Line 1: Line 1:
/* Windows XP MediaWiki Ultimate Theme */
/* Windows XP-inspired MediaWiki Theme */
:root {
/* Purple Edition - Nostalgic UI Styling */
    /* 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: var(--xp-background);
     font-family: 'Tahoma', 'Arial', sans-serif;
     font-family: "Tahoma", "Segoe UI", sans-serif;
    background-color: #E1E4E6;
     color: var(--xp-text);
     color: #000000;
     margin: 0;
     margin: 0;
     padding: 0;
     padding: 0;
}
}


/* Windows XP Desktop-like Layout */
/* Title Bar Styling */
#mw-page-base {
#top-section {
     background: linear-gradient(to bottom, #4E84C4, #6BA5E7);
     background-color: #6A5ACD; /* Slate Purple */
     position: fixed;
     color: #FFFFFF;
     top: 0;
     height: 30px;
     left: 0;
     display: flex;
     width: 100%;
     align-items: center;
     height: 40px;
     justify-content: space-between;
     z-index: 1000;
     padding: 0 10px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.2);
     box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
 
#title-bar-text {
    font-weight: bold;
    font-size: 12px;
}
 
#title-bar-controls {
    display: flex;
    align-items: center;
}
 
.title-bar-button {
    width: 25px;
    height: 20px;
    background-color: #8470FF;
    border: 1px solid #5D3FD3;
    margin-left: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
 
.title-bar-button:hover {
    background-color: #A084E8;
}
}


/* Navigation Styling */
/* Navigation Styling */
#sidebar {
#sidebar {
     background-color: var(--xp-button-face);
     background-color: #F0F0F0;
     border: 1px solid var(--xp-border);
     border-right: 1px solid #A0A0A0;
     box-shadow: 2px 2px 4px var(--xp-shadow);
     width: 180px;
     padding: 10px;
     padding: 10px;
    border-radius: 4px;
}
}


/* Advanced Button Styling */
#navigation-menu {
.mw-submit-buttons input,
     background-color: #FFFFFF;
.mw-submit-buttons button,
     border: 1px solid #C0C0C0;
.btn {
     border-radius: 4px;
     background: linear-gradient(to bottom, #FFFFFF, #F1EFE2);
    border: 1px solid var(--xp-border);
    border-top-color: #FFFFFF;
     border-left-color: #FFFFFF;
    color: var(--xp-text);
    padding: 4px 12px;
    box-shadow: 1px 1px 2px var(--xp-shadow);
    transition: all 0.2s ease;
}
 
.mw-submit-buttons input:hover,
.mw-submit-buttons button:hover,
.btn:hover {
    background: linear-gradient(to bottom, #F1EFE2, #FFFFFF);
     border-color: var(--xp-highlight);
    box-shadow: 2px 2px 4px var(--xp-shadow);
}
}


/* Enhanced Link Styling */
.nav-item {
a {
     padding: 5px 10px;
     color: var(--xp-blue);
     transition: background-color 0.2s;
    text-decoration: none;
     transition: color 0.3s ease;
}
}


a:hover {
.nav-item:hover {
     color: var(--xp-light-blue);
     background-color: #E6F2FF;
     text-decoration: underline;
     cursor: pointer;
}
}


/* Content Area */
/* Content Area */
#content {
#content-wrapper {
     background-color: #FFFFFF;
     background-color: #FFFFFF;
     border: 1px solid var(--xp-border);
     border: 1px solid #A0A0A0;
     box-shadow: 3px 3px 6px var(--xp-shadow);
     border-radius: 4px;
     padding: 15px;
     padding: 15px;
     margin: 10px;
     margin: 10px;
    border-radius: 4px;
}
}


/* Advanced Tab Styling */
/* Button Styling */
#p-namespaces ul,
.xp-button {
#p-views ul {
     background-color: #E1E4E6;
    background-color: var(--xp-button-face);
     border: 1px solid #7F9DB9;
    border-bottom: 1px solid var(--xp-border);
     color: #000000;
    display: flex;
     padding: 5px 15px;
}
 
#p-namespaces li a,
#p-views li a {
     background-color: var(--xp-button-face);
     border: 1px solid transparent;
     color: var(--xp-text);
     padding: 5px 12px;
    margin: 0 2px;
     border-radius: 3px;
     border-radius: 3px;
     transition: all 0.2s ease;
     transition: background-color 0.2s;
}
}


#p-namespaces li.selected a,
.xp-button:hover {
#p-views li.selected a {
     background-color: #C0D9EF;
     background-color: #FFFFFF;
     cursor: pointer;
    border-color: var(--xp-border);
     box-shadow: inset 1px 1px 3px var(--xp-shadow);
}
}


/* Form Input Styling */
/* Input Fields */
input[type="text"],
input[type="text"],
input[type="password"],
input[type="password"],
textarea {
textarea {
     border: 1px solid #7F9DB9;
     border: 1px solid #A0A0A0;
     background-color: #FFFFFF;
     background-color: #FFFFFF;
     padding: 4px;
     padding: 4px;
    border-radius: 3px;
     font-family: 'Tahoma', sans-serif;
     font-family: Tahoma, sans-serif;
}
}


/* Advanced Scrollbar */
/* Scrollbar Styling */
::-webkit-scrollbar {
::-webkit-scrollbar {
     width: 17px;
     width: 16px;
     background-color: var(--xp-button-face);
     background-color: #F0F0F0;
}
}


::-webkit-scrollbar-thumb {
::-webkit-scrollbar-thumb {
     background-color: var(--xp-border);
     background-color: #A0A0A0;
     border: 2px solid var(--xp-button-face);
     border: 2px solid #F0F0F0;
     border-radius: 8px;
     border-radius: 8px;
}
}


::-webkit-scrollbar-corner {
/* Dropdown Menus */
     background-color: var(--xp-button-face);
select {
     background-color: #FFFFFF;
    border: 1px solid #A0A0A0;
    padding: 4px;
    font-family: 'Tahoma', sans-serif;
}
}


/* Windows XP Dialog Boxes */
/* Tooltip Styling */
.mw-dialog {
.tooltip {
     background-color: var(--xp-buttonl-face);
     background-color: #FFFFE1;
     border: 2px solid var(--xp-border);
     border: 1px solid #A0A0A0;
     box-shadow: 4px 4px 8px var(--xp-shadow);
     padding: 5px;
     border-radius: 6px;
     box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    font-family: Tahoma, sans-serif;
}
}


/* Advanced Indicator Styling */
/* Modal/Dialog Styling */
.mw-indicator {
.dialog-window {
     background: linear-gradient(to bottom, var(--xp-blue), var(--xp-light-blue));
     background-color: #F0F0F0;
    color: white;
     border: 2px solid #6A5ACD;
     padding: 3px 8px;
     border-radius: 6px;
     border-radius: 3px;
     box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
     box-shadow: 1px 1px 3px var(--xp-shadow);
}
}


/* Hover and Active States */
.dialog-header {
button:active,
     background-color: #6A5ACD;
input[type="submit"]:active {
     color: #FFFFFF;
     border-color: var(--xp-text);
    padding: 8px;
     background: linear-gradient(to bottom, #E1DFD2, #F1EFE2);
     font-weight: bold;
     box-shadow: inset 2px 2px 4px var(--xp-shadow);
}
}


/* Notification and Message Styling */
/* Responsive Adjustments */
.mw-notification {
@media screen and (max-width: 768px) {
    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 {
     #sidebar {
         width: 100%;
         width: 100%;
         max-width: none;
         border-right: none;
     }
     }
}
}


/* Additional Windows XP Easter Eggs */
/* Additional XP-like Nuances */
.mw-logo::before {
.window-shadow {
     content: "BonziPEDIA";
     box-shadow: 3px 3px 6px rgba(0,0,0,0.2);
    position: absolute;
}
    top: 10px;
 
    left: 10px;
/* Final Decorative Touches */
     color: white;
.xp-gradient {
    font-family: Tahoma, sans-serif;
     background: linear-gradient(to bottom, #E1E4E6, #C0C0C0);
    font-weight: bold;
}
}
Retrieved from "https://bonzipedia.skywiki.org/wiki/MediaWiki:Common.css"