MediaWiki:Common.css: Difference between revisions
From Starlight wiki
Created page with "→CSS placed here will be applied to all skins: .gradient-header-frame { border: 1px solid #3a3a46; border-radius: 0.3em; } .gradient-header-frame__header { color: #efefef; font-size: 1.15em; font-family: "noto sans"; padding: 6px 10px; background: linear-gradient(90deg, #2f2f37 0%, #3a3a45 40%, #3b3b47 50%, #3a3a45 60%, #2f2f37 100%); text-align: center; } .gradient-header-frame__content { } .gradient-header-frame__content::-webkit..." |
No edit summary |
||
Line 21: | Line 21: | ||
.gradient-header-frame__content::-webkit-scrollbar-track { background: #2c2c33; } | .gradient-header-frame__content::-webkit-scrollbar-track { background: #2c2c33; } | ||
.gradient-header-frame__content::-webkit-scrollbar-thumb { background: #44444d; border: 2px solid #2c2c33; border-radius: 0; } | .gradient-header-frame__content::-webkit-scrollbar-thumb { background: #44444d; border: 2px solid #2c2c33; border-radius: 0; } | ||
.gradient-header-frame-sub { | |||
border: 1px solid #3a3a46; | |||
border-radius: 0.3em; | |||
} | |||
.gradient-header-frame-sub__header { | |||
color: #efefef; | |||
font-size: 1.15em; | |||
font-family: "noto sans"; | |||
padding: 6px 10px; | |||
background: linear-gradient(90deg, #3a3a45 0%, #3a3a45 10%, #2f2f37 50%); | |||
text-align: left; | |||
} | |||
.gradient-header-frame-sub__content { | |||
} | |||
.gradient-header-frame-sub__content::-webkit-scrollbar { width: 10px; } | |||
.gradient-header-frame-sub__content::-webkit-scrollbar-track { background: #2c2c33; } | |||
.gradient-header-frame-sub__content::-webkit-scrollbar-thumb { background: #44444d; border: 2px solid #2c2c33; border-radius: 0; } | |||
.modern-frame { | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
.modern-frame__title { | |||
position: relative; | |||
display: flex; | |||
align-items: center; | |||
min-height: 32px; | |||
padding: 2px 8px; | |||
color: #e5e5e5; | |||
font-size: 15px; | |||
font-family: "noto sans"; | |||
border-radius: 0.3em 0.3em 0 0; | |||
border-bottom: 3px solid #00000045 !important; | |||
} | |||
.modern-frame__content { | |||
border-radius: 0 0 0.3em 0.3em; | |||
box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.4); | |||
} | |||
@media (max-width: 800px) { | |||
.modern-frame__content { | |||
gap: 6px; | |||
padding: 8px; | |||
} | |||
} | |||
.modern-button { | |||
position: relative; | |||
display: flex; | |||
min-width: 45%; | |||
background: #31313b; | |||
border-radius: 8px; | |||
min-height: 64px; | |||
width: 100%; | |||
overflow: hidden; | |||
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2); | |||
} | |||
.modern-button__image { | |||
display: flex; | |||
align-items: center; | |||
background: #40404d; | |||
padding: 4px; | |||
box-shadow: inset 20px 0px 20px 0px rgba(0, 0, 0, 0.05); | |||
} | |||
.modern-button__content { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
gap: 2px; | |||
width: 100%; | |||
padding: 8px 10px; | |||
} | |||
.modern-button__title { | |||
font-size: 1.8em; | |||
line-height: 1; | |||
font-family: "Oswald"; | |||
} | |||
.modern-button__subtext { | |||
font-size: 0.8em; | |||
} |
Revision as of 13:33, 30 December 2024
/* CSS placed here will be applied to all skins */ .gradient-header-frame { border: 1px solid #3a3a46; border-radius: 0.3em; } .gradient-header-frame__header { color: #efefef; font-size: 1.15em; font-family: "noto sans"; padding: 6px 10px; background: linear-gradient(90deg, #2f2f37 0%, #3a3a45 40%, #3b3b47 50%, #3a3a45 60%, #2f2f37 100%); text-align: center; } .gradient-header-frame__content { } .gradient-header-frame__content::-webkit-scrollbar { width: 10px; } .gradient-header-frame__content::-webkit-scrollbar-track { background: #2c2c33; } .gradient-header-frame__content::-webkit-scrollbar-thumb { background: #44444d; border: 2px solid #2c2c33; border-radius: 0; } .gradient-header-frame-sub { border: 1px solid #3a3a46; border-radius: 0.3em; } .gradient-header-frame-sub__header { color: #efefef; font-size: 1.15em; font-family: "noto sans"; padding: 6px 10px; background: linear-gradient(90deg, #3a3a45 0%, #3a3a45 10%, #2f2f37 50%); text-align: left; } .gradient-header-frame-sub__content { } .gradient-header-frame-sub__content::-webkit-scrollbar { width: 10px; } .gradient-header-frame-sub__content::-webkit-scrollbar-track { background: #2c2c33; } .gradient-header-frame-sub__content::-webkit-scrollbar-thumb { background: #44444d; border: 2px solid #2c2c33; border-radius: 0; } .modern-frame { display: flex; flex-direction: column; } .modern-frame__title { position: relative; display: flex; align-items: center; min-height: 32px; padding: 2px 8px; color: #e5e5e5; font-size: 15px; font-family: "noto sans"; border-radius: 0.3em 0.3em 0 0; border-bottom: 3px solid #00000045 !important; } .modern-frame__content { border-radius: 0 0 0.3em 0.3em; box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.4); } @media (max-width: 800px) { .modern-frame__content { gap: 6px; padding: 8px; } } .modern-button { position: relative; display: flex; min-width: 45%; background: #31313b; border-radius: 8px; min-height: 64px; width: 100%; overflow: hidden; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2); } .modern-button__image { display: flex; align-items: center; background: #40404d; padding: 4px; box-shadow: inset 20px 0px 20px 0px rgba(0, 0, 0, 0.05); } .modern-button__content { display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; padding: 8px 10px; } .modern-button__title { font-size: 1.8em; line-height: 1; font-family: "Oswald"; } .modern-button__subtext { font-size: 0.8em; }