MediaWiki:Timeless.css: Difference between revisions
From Ghost Theory Wiki
Replaced content with "→Reset and Base Styles: * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000000; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.6; } →Links: a { color: #ffe135; text-decoration: none; transition: color 0.3s ease; } a:visited { color: #c0c0c0; } a:hover { color: #ffed" Tag: Replaced |
No edit summary |
||
| Line 26: | Line 26: | ||
a:hover { | a:hover { | ||
color: # | color: #ffed4e; | ||
} | |||
/* Main Layout */ | |||
#mw-page-base, | |||
#mw-head-base { | |||
background-color: #000000; | |||
} | |||
#mw-head { | |||
background-color: #1a1a1a; | |||
border-bottom: 2px solid #333333; | |||
padding: 10px 20px; | |||
} | |||
#mw-navigation { | |||
background-color: #000000; | |||
} | |||
/* Content Area */ | |||
#content { | |||
background-color: #000000; | |||
padding: 20px; | |||
margin-left: 0; | |||
} | |||
#mw-content-container { | |||
max-width: 100%; | |||
} | |||
/* Text Boxes and Content */ | |||
#mw-content { | |||
background-color: #1a1a1a; | |||
padding: 20px; | |||
border-radius: 4px; | |||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); | |||
} | |||
/* Sidebar Navigation */ | |||
#mw-panel { | |||
background-color: #000000; | |||
padding: 10px 0; | |||
} | |||
.mw-portlet { | |||
background-color: #000000; | |||
margin-bottom: 20px; | |||
border: 1px solid #333333; | |||
border-radius: 4px; | |||
overflow: hidden; | |||
} | |||
.mw-portlet-body { | |||
background-color: #1a1a1a; | |||
padding: 0; | |||
} | |||
/* Portlet Header */ | |||
.mw-portlet > h3, | |||
.vector-portlet-heading { | |||
background-color: #2a2a2a; | |||
color: #ffffff; | |||
padding: 12px 15px; | |||
margin: 0; | |||
font-size: 16px; | |||
font-weight: 600; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
cursor: pointer; | |||
user-select: none; | |||
border-bottom: 1px solid #333333; | |||
transition: background-color 0.3s ease; | |||
} | |||
.mw-portlet > h3:hover, | |||
.vector-portlet-heading:hover { | |||
background-color: #333333; | |||
} | |||
/* Collapsible Arrow */ | |||
.portlet-arrow { | |||
display: inline-block; | |||
transition: transform 0.3s ease; | |||
font-size: 12px; | |||
color: #ffe135; | |||
} | |||
.portlet-arrow.collapsed { | |||
transform: rotate(-90deg); | |||
} | |||
/* Portlet List */ | |||
.mw-portlet-body ul { | |||
list-style: none; | |||
padding: 0; | |||
margin: 0; | |||
} | |||
.mw-portlet-body li { | |||
border-bottom: 1px solid #2a2a2a; | |||
margin: 0; | |||
} | |||
.mw-portlet-body li:last-child { | |||
border-bottom: none; | |||
} | |||
.mw-portlet-body a { | |||
display: block; | |||
padding: 12px 15px; | |||
color: #ffe135; | |||
text-decoration: none; | |||
transition: background-color 0.2s ease, padding-left 0.2s ease; | |||
} | |||
.mw-portlet-body a:visited { | |||
color: #c0c0c0; | |||
} | |||
.mw-portlet-body a:hover { | |||
background-color: #2a2a2a; | |||
padding-left: 20px; | |||
color: #ffed4e; | |||
} | |||
/* Year Items and Expandable Sections */ | |||
.year-item { | |||
background-color: #1a1a1a; | |||
border-bottom: 1px solid #2a2a2a; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
.year-item:last-child { | |||
border-bottom: none; | |||
} | |||
.year-header { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding: 12px 15px; | |||
background-color: #1a1a1a; | |||
color: #ffe135; | |||
cursor: pointer; | |||
user-select: none; | |||
font-weight: 500; | |||
transition: background-color 0.2s ease; | |||
} | |||
.year-header:hover { | |||
background-color: #2a2a2a; | |||
} | |||
.year-arrow { | |||
display: inline-block; | |||
transition: transform 0.3s ease; | |||
font-size: 12px; | |||
color: #ffe135; | |||
} | |||
.year-arrow.collapsed { | |||
transform: rotate(-90deg); | |||
} | |||
.year-content { | |||
display: none; | |||
background-color: #0f0f0f; | |||
padding: 0; | |||
border-top: 1px solid #2a2a2a; | |||
} | |||
.year-content.expanded { | |||
display: block; | |||
} | |||
.year-content ul { | |||
list-style: none; | |||
padding: 0; | |||
margin: 0; | |||
} | |||
.year-content li { | |||
border-bottom: 1px solid #2a2a2a; | |||
margin: 0; | |||
} | |||
.year-content li:last-child { | |||
border-bottom: none; | |||
} | |||
.year-content a { | |||
display: block; | |||
padding: 10px 15px 10px 30px; | |||
color: #ffe135; | |||
text-decoration: none; | |||
transition: background-color 0.2s ease, padding-left 0.2s ease; | |||
font-size: 14px; | |||
} | |||
.year-content a:visited { | |||
color: #c0c0c0; | |||
} | |||
.year-content a:hover { | |||
background-color: #1a1a1a; | |||
padding-left: 35px; | |||
color: #ffed4e; | |||
} | |||
/* Search Box */ | |||
.searchbox { | |||
padding: 10px; | |||
margin-bottom: 10px; | |||
} | |||
.searchbox input { | |||
width: 100%; | |||
padding: 8px; | |||
border: 1px solid #2a2a2a; | |||
background-color: #0f0f0f; | |||
color: #ffe135; | |||
font-size: 14px; | |||
box-sizing: border-box; | |||
} | |||
.searchbox input::placeholder { | |||
color: #666; | |||
} | |||
.searchbox input:focus { | |||
outline: none; | |||
border-color: #ffe135; | |||
background-color: #1a1a1a; | |||
} | |||
/* Responsive Design */ | |||
@media (max-width: 768px) { | |||
.sidebar { | |||
position: fixed; | |||
left: -300px; | |||
top: 0; | |||
height: 100vh; | |||
z-index: 1000; | |||
transition: left 0.3s ease; | |||
} | |||
.sidebar.active { | |||
left: 0; | |||
} | |||
.main-content { | |||
margin-left: 0; | |||
} | |||
} | |||
