MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
(Revert) Tag: Manual revert |
||
(9 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
:root { | |||
--shadow-color: 246deg 73% 41%; | |||
--shadow-elevation-low: | |||
0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34), | |||
0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34), | |||
1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34); | |||
--shadow-elevation-medium: | |||
0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36), | |||
0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36), | |||
2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36), | |||
5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36); | |||
--shadow-elevation-high: | |||
0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34), | |||
1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34), | |||
2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34), | |||
4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34), | |||
7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34), | |||
11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34), | |||
17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34), | |||
25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34); | |||
} | |||
body { | body { | ||
background-image: linear-gradient(245deg, rgba(89,149,255,1) 0%, rgba(104,88,255,1) 100%) | background-image: linear-gradient(245deg, rgba(89,149,255,1) 0%, rgba(104,88,255,1) 100%); | ||
background-color: rgb(104,88,255); | background-color: rgb(104,88,255); | ||
} | |||
html, body { | |||
height: auto; | |||
min-height: 100%; | |||
} | } | ||
Line 18: | Line 46: | ||
.mw-body { | .mw-body { | ||
border-color: rgb(104,88,255); | border-color: rgb(104,88,255); | ||
border-radius: 0 0 0 14px; | |||
box-shadow: var(--shadow-elevation-low); | |||
} | |||
.vector-menu-tabs-legacy { | |||
padding-left: 0; | |||
margin-left: 1px; | |||
border-radius: 14px 0 0 0; | |||
overflow: hidden; | |||
} | } | ||
Line 56: | Line 94: | ||
#p-logo { | #p-logo { | ||
padding-top: 0.5em; | padding-top: 0.5em; | ||
} | |||
#p-logo a { | |||
background-size: contain; | |||
width: 8em; | |||
margin: auto; | |||
} | } | ||
Line 99: | Line 143: | ||
.vectorMenu h3 span { | .vectorMenu h3 span { | ||
color: #F0F0F2; | color: #F0F0F2; | ||
} | |||
.vector-menu.vector-menu-portal a[href]:link, .vector-menu.vector-menu-portal a[href]:visited { | |||
color: white; | |||
transition: color 150ms ease, opacity 150ms ease; | |||
} | |||
.vector-menu.vector-menu-portal a[href]:hover { | |||
opacity: 0.7; | |||
} | |||
.vector-menu.vector-menu-portal a[href]:active { | |||
opacity: 0.9; | |||
} | |||
@media screen and (max-width: 999px) { | |||
#p-personal, | |||
.vector-user-menu-legacy { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
} | |||
.vector-user-menu-legacy .vector-menu-content { | |||
display: block; | |||
width: 100%; | |||
padding: 8px 12px; | |||
overflow: auto; | |||
box-sizing: border-box; | |||
} | |||
#p-personal ul, | |||
.vector-user-menu-legacy .vector-menu-content-list { | |||
white-space: nowrap; | |||
display: block; | |||
padding-left: 0; | |||
} | |||
.vector-user-menu-legacy .mw-list-item { | |||
float: none; | |||
display: inline-block; | |||
} | |||
} | } |
Latest revision as of 06:54, 20 May 2024
/* CSS placed here will be applied to all skins */
:root {
--shadow-color: 246deg 73% 41%;
--shadow-elevation-low:
0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
--shadow-elevation-medium:
0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
--shadow-elevation-high:
0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34),
2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34),
4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34),
7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34),
11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34),
17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34),
25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);
}
body {
background-image: linear-gradient(245deg, rgba(89,149,255,1) 0%, rgba(104,88,255,1) 100%);
background-color: rgb(104,88,255);
}
html, body {
height: auto;
min-height: 100%;
}
.vectorTabs, #mw-head .vectorMenu h3 {
background-image: none;
}
#mw-page-base {
background: transparent;
}
.mw-body, .parsoid-body {
background-color: white;
}
.mw-body {
border-color: rgb(104,88,255);
border-radius: 0 0 0 14px;
box-shadow: var(--shadow-elevation-low);
}
.vector-menu-tabs-legacy {
padding-left: 0;
margin-left: 1px;
border-radius: 14px 0 0 0;
overflow: hidden;
}
.vectorTabs ul li {
background: #293590;
}
.vectorTabs span {
background-image: none;
border-left: none;
border-right: none;
}
pre, .mw-code {
background-color: #F0F0F2;
}
.vectorTabs li.selected span {
border: none;
}
.vectorTabs li.selected {
background-image: none;
background-color: white;
}
.vectorTabs li a {
color: white;
}
.vectorTabs li a:visited {
color: #F0F0F2;
}
.vectorTabs li.new a, .vectorTabs li.new a:visited {
color: #5E7EFF;
}
#p-logo {
padding-top: 0.5em;
}
#p-logo a {
background-size: contain;
width: 8em;
margin: auto;
}
#mw-panel .portal .body li a {
color: white;
}
#mw-panel .portal .body li a:visited {
color: #E0E1E4;
}
a.new, #p-personal a.new {
color: #F05C6C;
}
a {
color: white;
}
a:visited {
color: #F0F0F2;
}
.mw-parser-output a.external {
color: #D15E54;
}
#content a {
color: #5E7EFF;
text-decoration: underline;
}
#content a:visited {
color: #192369;
}
#content a.new {
color: #D15E54;
}
#footer ul li,
#mw-panel .portal h3,
.vectorMenu h3 span {
color: #F0F0F2;
}
.vector-menu.vector-menu-portal a[href]:link, .vector-menu.vector-menu-portal a[href]:visited {
color: white;
transition: color 150ms ease, opacity 150ms ease;
}
.vector-menu.vector-menu-portal a[href]:hover {
opacity: 0.7;
}
.vector-menu.vector-menu-portal a[href]:active {
opacity: 0.9;
}
@media screen and (max-width: 999px) {
#p-personal,
.vector-user-menu-legacy {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.vector-user-menu-legacy .vector-menu-content {
display: block;
width: 100%;
padding: 8px 12px;
overflow: auto;
box-sizing: border-box;
}
#p-personal ul,
.vector-user-menu-legacy .vector-menu-content-list {
white-space: nowrap;
display: block;
padding-left: 0;
}
.vector-user-menu-legacy .mw-list-item {
float: none;
display: inline-block;
}
}