MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap'); | @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap'); | ||
#mw-panel { | #mw-panel { | ||
width: 150px; | |||
padding: 2px; | |||
padding: | |||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
gap: | gap: 4px; | ||
} | } | ||
#mw-panel .mw-portlet { | #mw-panel .mw-portlet { | ||
width: 100%; | |||
background: linear-gradient(to bottom, #111 0%, #222 100%); | |||
border-radius: | border: 1px solid rgba(255, 215, 0, 0.3); | ||
padding: | border-radius: 6px; | ||
padding: 2px; | |||
margin-bottom: 4px; | |||
} | } | ||
#mw-panel .mw-portlet .vector-menu-heading { | #mw-panel .mw-portlet .vector-menu-heading { | ||
font-family: 'Cinzel', serif; | font-family: 'Cinzel', serif; | ||
font-size: | font-size: 13px; | ||
font-weight: | font-weight: bold; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
background: rgba( | color: #C0A080; | ||
background: rgba(15, 15, 15, 0.9); | |||
padding: | padding: 4px; | ||
border-radius: | border-radius: 6px 6px 0 0; | ||
text-align: center; | |||
letter-spacing: 1px; | |||
line-height: 12px; | |||
} | } | ||
#mw-panel .mw-portlet .body a { | #mw-panel .mw-portlet .body a { | ||
font-family: 'Cinzel', serif; | font-family: 'Cinzel', serif; | ||
font-size: | font-size: 12px; | ||
color: # | color: #bbb; | ||
text-decoration: none; | text-decoration: none; | ||
padding: | padding: 3px 5px; | ||
display: block; | |||
transition: all 0.3s ease; | |||
} | } | ||
#mw-panel .mw-portlet .body a:hover { | #mw-panel .mw-portlet .body a:hover { | ||
background: rgba(255, 255, 255, 0. | color: #FFD700; | ||
background: rgba(255, 255, 255, 0.1); | |||
border-radius: 2px; | |||
} | } | ||
#mw-panel .mw-portlet .body { | #mw-panel .mw-portlet .body { | ||
padding: 2px; | |||
} | |||
#mw-panel .mw-portlet { | |||
margin-bottom: 3px; | |||
} | |||
#floating-toc { | |||
position: fixed; | |||
bottom: 20px; | |||
right: 20px; | |||
width: 250px; | |||
background: linear-gradient(to bottom, #111 0%, #222 100%); | |||
border: 2px solid rgba(255, 215, 0, 0.5); /* Goldish border */ | |||
border-radius: 10px; | |||
padding: 10px; | |||
font-size: 14px; | |||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); | |||
transition: all 0.3s ease-in-out; | |||
z-index: 1000; | |||
} | |||
#floating-toc.collapsed { | |||
width: 150px; | |||
height: 30px; | |||
overflow: hidden; | |||
padding: 5px; | |||
text-align: center; | |||
cursor: pointer; | |||
} | |||
#floating-toc h2 { | |||
font-family: 'Cinzel', serif; | |||
font-size: 16px; | |||
font-weight: bold; | |||
text-transform: uppercase; | |||
color: #C0A080; /* Gold */ | |||
text-align: center; | |||
margin: 0; | |||
padding: 5px; | |||
} | |||
#floating-toc ul { | |||
list-style: none; | |||
padding: 0; | |||
margin-top: 10px; | |||
border-top: 1px solid rgba(255, 215, 0, 0.3); | |||
} | } | ||
# | |||
#floating-toc li { | |||
padding: 4px; | |||
} | } | ||
#floating-toc a { | |||
# | font-family: 'Cinzel', serif; | ||
font-size: 13px; | |||
color: #bbb; | |||
text-decoration: none; | |||
display: block; | |||
padding: 4px 10px; | |||
border-radius: 4px; | |||
transition: all 0.3s ease; | |||
} | } | ||
#floating-toc a:hover { | |||
# | color: #FFD700; | ||
background: rgba(255, 255, 255, 0.1); | |||
} | } | ||
# | #floating-toc.collapsed::after { | ||
content: " | content: "Contents ▼"; | ||
font-family: 'Cinzel', serif; | |||
font-size: 14px; | |||
color: #C0A080; | |||
display: block; | |||
text-align: center; | |||
padding: 5px; | |||
} | } |
Revision as of 02:42, 25 March 2025
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
#mw-panel {
width: 150px;
padding: 2px;
display: flex;
flex-direction: column;
gap: 4px;
}
#mw-panel .mw-portlet {
width: 100%;
background: linear-gradient(to bottom, #111 0%, #222 100%);
border: 1px solid rgba(255, 215, 0, 0.3);
border-radius: 6px;
padding: 2px;
margin-bottom: 4px;
}
#mw-panel .mw-portlet .vector-menu-heading {
font-family: 'Cinzel', serif;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
color: #C0A080;
background: rgba(15, 15, 15, 0.9);
padding: 4px;
border-radius: 6px 6px 0 0;
text-align: center;
letter-spacing: 1px;
line-height: 12px;
}
#mw-panel .mw-portlet .body a {
font-family: 'Cinzel', serif;
font-size: 12px;
color: #bbb;
text-decoration: none;
padding: 3px 5px;
display: block;
transition: all 0.3s ease;
}
#mw-panel .mw-portlet .body a:hover {
color: #FFD700;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
}
#mw-panel .mw-portlet .body {
padding: 2px;
}
#mw-panel .mw-portlet {
margin-bottom: 3px;
}
#floating-toc {
position: fixed;
bottom: 20px;
right: 20px;
width: 250px;
background: linear-gradient(to bottom, #111 0%, #222 100%);
border: 2px solid rgba(255, 215, 0, 0.5); /* Goldish border */
border-radius: 10px;
padding: 10px;
font-size: 14px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
transition: all 0.3s ease-in-out;
z-index: 1000;
}
#floating-toc.collapsed {
width: 150px;
height: 30px;
overflow: hidden;
padding: 5px;
text-align: center;
cursor: pointer;
}
#floating-toc h2 {
font-family: 'Cinzel', serif;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
color: #C0A080; /* Gold */
text-align: center;
margin: 0;
padding: 5px;
}
#floating-toc ul {
list-style: none;
padding: 0;
margin-top: 10px;
border-top: 1px solid rgba(255, 215, 0, 0.3);
}
#floating-toc li {
padding: 4px;
}
#floating-toc a {
font-family: 'Cinzel', serif;
font-size: 13px;
color: #bbb;
text-decoration: none;
display: block;
padding: 4px 10px;
border-radius: 4px;
transition: all 0.3s ease;
}
#floating-toc a:hover {
color: #FFD700;
background: rgba(255, 255, 255, 0.1);
}
#floating-toc.collapsed::after {
content: "Contents ▼";
font-family: 'Cinzel', serif;
font-size: 14px;
color: #C0A080;
display: block;
text-align: center;
padding: 5px;
}