MediaWiki:Gadget-VivahxTheme.css: Difference between revisions
From Hotline Wiki
Created page with "→* * Vivahx Self-Contained Skin Override * Packaged as a MediaWiki Gadget: :root { --vhx-bg: #FDF5C6; --vhx-white: #FFFFFF; --vhx-sidebar-bg: #F2F2F2; --vhx-accent-green: #9ADA92; --vhx-text-blue: #333366; --vhx-border: #999999; --vhx-width: 808px; --vhx-logo-url: url("https://web.archive.org/web/20060825120444im_/http://www.vivahx.com/images/logo.jpg"); --vhx-title-bg: url("https://web.archive.org/web/20060825120444im_/http://w..." |
No edit summary |
||
| Line 1: | Line 1: | ||
/** | /** | ||
* Vivahx Self-Contained Skin Override | * Vivahx Fixed Self-Contained Skin Override | ||
*/ | */ | ||
| Line 16: | Line 15: | ||
} | } | ||
/* Container | /* 1. Reset and Container */ | ||
body { | body { | ||
background-color: var(--vhx-bg) !important; | background-color: var(--vhx-bg) !important; | ||
| Line 22: | Line 21: | ||
} | } | ||
#globalWrapper, #mw-wrapper, .mw-body { | #globalWrapper, #mw-wrapper, .mw-body { | ||
width: var(--vhx-width) !important; | width: var(--vhx-width) !important; | ||
| Line 28: | Line 26: | ||
border: 1px solid var(--vhx-border) !important; | border: 1px solid var(--vhx-border) !important; | ||
background-color: var(--vhx-white) !important; | background-color: var(--vhx-white) !important; | ||
display: block; | |||
overflow: visible !important; /* Changed from hidden to ensure clicks register */ | |||
} | } | ||
/* Header & Logo */ | /* 2. Header & Logo - Ensuring z-index doesn't block clicks */ | ||
#p-logo { | #p-logo { | ||
position: relative !important; | position: relative !important; | ||
| Line 40: | Line 38: | ||
background: var(--vhx-logo-url) no-repeat left center #FAFDF6 !important; | background: var(--vhx-logo-url) no-repeat left center #FAFDF6 !important; | ||
border-bottom: 1px solid var(--vhx-border); | border-bottom: 1px solid var(--vhx-border); | ||
z-index: 5; | |||
} | } | ||
#p-logo a { | #p-logo a { display: block; width: 100%; height: 100%; background-image: none !important; } | ||
/* The | /* 3. The Action Bar */ | ||
#p-cactions { | #p-cactions { | ||
position: | position: relative !important; | ||
background-color: var(--vhx-accent-green) !important; | background-color: var(--vhx-accent-green) !important; | ||
padding: 5px 0 !important; | padding: 5px 0 !important; | ||
border-bottom: 1px solid var(--vhx-border); | border-bottom: 1px solid var(--vhx-border); | ||
text-align: center; | text-align: center; | ||
z-index: 10; | |||
} | } | ||
#p-cactions li { | #p-cactions li { display: inline-block !important; } | ||
/* 4. Layout Fix: Sidebar and Content Area */ | |||
#content { | |||
margin-right: 210px !important; /* Space for sidebar */ | |||
margin-left: 0 !important; | |||
border: none !important; | border: none !important; | ||
padding: 20px !important; | |||
position: relative !important; | |||
z-index: 1; /* Content stays low */ | |||
} | } | ||
/* | /* Moving sidebar to the right and ensuring it doesn't overlap content */ | ||
#mw-panel, #column-one { | #mw-panel, #column-one { | ||
position: absolute !important; | |||
top: 140px; /* Adjust based on logo + cactions height */ | |||
width: | right: 0 !important; | ||
left: auto !important; | |||
width: 180px !important; | |||
background-color: var(--vhx-sidebar-bg) !important; | background-color: var(--vhx-sidebar-bg) !important; | ||
padding: 15px !important; | padding: 15px !important; | ||
border-left: 1px solid #CCC; | border-left: 1px solid #CCC; | ||
height: auto !important; | |||
min-height: | min-height: 400px; | ||
z-index: 2; /* Sidebar sits above content but only on the right */ | |||
} | } | ||
/* Sidebar Boxes | /* 5. Sidebar Boxes Styling */ | ||
.portlet, .mw-portlet { | .portlet, .mw-portlet { | ||
background: var(--vhx-white) !important; | background: var(--vhx-white) !important; | ||
border: 1px solid var(--vhx-border) !important; | border: 1px solid var(--vhx-border) !important; | ||
margin-bottom: 15px !important; | margin-bottom: 15px !important; | ||
pointer-events: auto !important; /* Force clickability */ | |||
} | } | ||
.portlet h3, .mw-portlet h3 { | .portlet h3, .mw-portlet h3 { | ||
background: var(--vhx-title-bg) repeat-x !important; | background: var(--vhx-title-bg) repeat-x !important; | ||
color: #000 !important; | color: #000 !important; | ||
font-size: | font-size: 11px !important; | ||
font-weight: bold !important; | font-weight: bold !important; | ||
height: 25px !important; | height: 25px !important; | ||
| Line 92: | Line 94: | ||
padding-left: 10px !important; | padding-left: 10px !important; | ||
border-bottom: 1px solid var(--vhx-border); | border-bottom: 1px solid var(--vhx-border); | ||
} | } | ||
/* | /* 6. Clean Up Hide Elements */ | ||
#mw-head-base, #mw-page-base { display: none !important; } | #mw-head-base, #mw-page-base, #left-navigation { display: none !important; } | ||
Revision as of 19:33, 8 March 2026
/**
* Vivahx Fixed Self-Contained Skin Override
*/
:root {
--vhx-bg: #FDF5C6;
--vhx-white: #FFFFFF;
--vhx-sidebar-bg: #F2F2F2;
--vhx-accent-green: #9ADA92;
--vhx-text-blue: #333366;
--vhx-border: #999999;
--vhx-width: 808px;
--vhx-logo-url: url("https://web.archive.org/web/20060825120444im_/http://www.vivahx.com/images/logo.jpg");
--vhx-title-bg: url("https://web.archive.org/web/20060825120444im_/http://www.vivahx.com/images/fond_titre.jpg");
}
/* 1. Reset and Container */
body {
background-color: var(--vhx-bg) !important;
font-family: Verdana, Tahoma, sans-serif !important;
}
#globalWrapper, #mw-wrapper, .mw-body {
width: var(--vhx-width) !important;
margin: 30px auto !important;
border: 1px solid var(--vhx-border) !important;
background-color: var(--vhx-white) !important;
display: block;
overflow: visible !important; /* Changed from hidden to ensure clicks register */
}
/* 2. Header & Logo - Ensuring z-index doesn't block clicks */
#p-logo {
position: relative !important;
display: block !important;
width: 100% !important;
height: 100px !important;
background: var(--vhx-logo-url) no-repeat left center #FAFDF6 !important;
border-bottom: 1px solid var(--vhx-border);
z-index: 5;
}
#p-logo a { display: block; width: 100%; height: 100%; background-image: none !important; }
/* 3. The Action Bar */
#p-cactions {
position: relative !important;
background-color: var(--vhx-accent-green) !important;
padding: 5px 0 !important;
border-bottom: 1px solid var(--vhx-border);
text-align: center;
z-index: 10;
}
#p-cactions li { display: inline-block !important; }
/* 4. Layout Fix: Sidebar and Content Area */
#content {
margin-right: 210px !important; /* Space for sidebar */
margin-left: 0 !important;
border: none !important;
padding: 20px !important;
position: relative !important;
z-index: 1; /* Content stays low */
}
/* Moving sidebar to the right and ensuring it doesn't overlap content */
#mw-panel, #column-one {
position: absolute !important;
top: 140px; /* Adjust based on logo + cactions height */
right: 0 !important;
left: auto !important;
width: 180px !important;
background-color: var(--vhx-sidebar-bg) !important;
padding: 15px !important;
border-left: 1px solid #CCC;
height: auto !important;
min-height: 400px;
z-index: 2; /* Sidebar sits above content but only on the right */
}
/* 5. Sidebar Boxes Styling */
.portlet, .mw-portlet {
background: var(--vhx-white) !important;
border: 1px solid var(--vhx-border) !important;
margin-bottom: 15px !important;
pointer-events: auto !important; /* Force clickability */
}
.portlet h3, .mw-portlet h3 {
background: var(--vhx-title-bg) repeat-x !important;
color: #000 !important;
font-size: 11px !important;
font-weight: bold !important;
height: 25px !important;
line-height: 25px !important;
padding-left: 10px !important;
border-bottom: 1px solid var(--vhx-border);
}
/* 6. Clean Up Hide Elements */
#mw-head-base, #mw-page-base, #left-navigation { display: none !important; }