mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-09-23 18:28:58 +00:00
Lint + Fix .less files
This commit is contained in:
Hannes
parent
5c503063e0
commit
4429026ead
|
|
@ -4,55 +4,55 @@
|
|||
//
|
||||
|
||||
#mw-bottombar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
transform: translate(0px, @header-height + @margin-side);
|
||||
transition: @transition-transform;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
transform: translate( 0, @header-height + @margin-side );
|
||||
transition: @transition-transform;
|
||||
|
||||
&-buttons {
|
||||
display: flex;
|
||||
margin: @margin-side;
|
||||
padding: 0 @margin-side / 2;
|
||||
background-color: #7289da; // Discord color
|
||||
border-radius: 100%;
|
||||
.boxshadow(4);
|
||||
transition: @transition-transform-quick, @transition-box-shadow-quick;
|
||||
&-buttons {
|
||||
display: flex;
|
||||
margin: @margin-side;
|
||||
padding: 0 @margin-side / 2;
|
||||
background-color: #7289da; // Discord color
|
||||
border-radius: 100%;
|
||||
.boxshadow(4);
|
||||
transition: @transition-transform-quick, @transition-box-shadow-quick;
|
||||
|
||||
.citizen-ui-icon {
|
||||
> a {
|
||||
width: @icon-box-size + @icon-padding;
|
||||
height: @header-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-indent: -1000px; // Hide text
|
||||
.citizen-ui-icon {
|
||||
> a {
|
||||
width: @icon-box-size + @icon-padding;
|
||||
height: @header-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-indent: -1000px; // Hide text
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
.resource-loader-menu-icon;
|
||||
transition: @transition-opacity;
|
||||
opacity: 1;
|
||||
}
|
||||
&:after {
|
||||
display: block;
|
||||
.resource-loader-menu-icon;
|
||||
transition: @transition-opacity;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:after {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
&:after {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Movable navigation bar
|
||||
.nav-up ~ #mw-bottombar {
|
||||
transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen0) {
|
||||
#mw-bottombar {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and ( max-width: @screen0 ) {
|
||||
#mw-bottombar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -3,209 +3,201 @@
|
|||
// https://starcitizen.tools
|
||||
//
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
html,
|
||||
body {
|
||||
background: @dark-bg-0;
|
||||
color: @dark-text-90;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background: @dark-bg-0;
|
||||
color: @dark-text-90;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: @dark-bg-60;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: @dark-bg-60;
|
||||
}
|
||||
* {
|
||||
scrollbar-color: @dark-bg-60 transparent;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-color: @dark-bg-60 transparent;
|
||||
}
|
||||
pre,
|
||||
code,
|
||||
.mw-code {
|
||||
color: @dark-text-90;
|
||||
background-color: @dark-bg-10;
|
||||
border: 1px solid @dark-bg-20;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
.mw-code {
|
||||
color: @dark-text-90;
|
||||
background-color: @dark-bg-10;
|
||||
border: 1px solid @dark-bg-20;
|
||||
}
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid @dark-bg-50;
|
||||
background: @dark-bg-40;
|
||||
color: @dark-text-80;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid @dark-bg-50;
|
||||
background: @dark-bg-40;
|
||||
color: @dark-text-80;
|
||||
}
|
||||
fieldset {
|
||||
color: @dark-text-90;
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
color: @dark-text-90;
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
legend {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
|
||||
legend {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
a,
|
||||
a:visited,
|
||||
a.external,
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc li.active {
|
||||
color: @dark-color-link;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited,
|
||||
a.external,
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc li.active {
|
||||
color: @dark-color-link;
|
||||
}
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc li.active {
|
||||
color: @dark-color-link !important;
|
||||
}
|
||||
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc li.active {
|
||||
color: @dark-color-link !important;
|
||||
}
|
||||
a.new {
|
||||
color: @dark-color-link-new !important;
|
||||
}
|
||||
|
||||
a.new {
|
||||
color: @dark-color-link-new !important;
|
||||
}
|
||||
.catlinks .mw-normal-catlinks > ul li a {
|
||||
background-color: @dark-bg-10;
|
||||
border-color: @dark-bg-10;
|
||||
}
|
||||
|
||||
.catlinks .mw-normal-catlinks>ul li a {
|
||||
background-color: @dark-bg-10;
|
||||
border-color: @dark-bg-10;
|
||||
}
|
||||
#p-namespaces ul li a {
|
||||
background-color: @dark-bg-10;
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
|
||||
#p-namespaces ul li a {
|
||||
background-color: @dark-bg-10;
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
#mw-header-menu-drawer-container a:hover {
|
||||
background-color: @dark-bg-60;
|
||||
color: @dark-text-90 !important;
|
||||
}
|
||||
|
||||
#mw-header-menu-drawer-container a:hover {
|
||||
background-color: @dark-bg-60;
|
||||
color: @dark-text-90 !important;
|
||||
;
|
||||
}
|
||||
table.wikitable tr:hover {
|
||||
background-color: @dark-bg-10;
|
||||
}
|
||||
|
||||
table.wikitable tr:hover {
|
||||
background-color: @dark-bg-10;
|
||||
}
|
||||
table.wikitable tr th,
|
||||
table.wikitable tr td {
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
|
||||
table.wikitable tr th,
|
||||
table.wikitable tr td {
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
#mw-header-menu-drawer {
|
||||
background: @dark-bg-40;
|
||||
}
|
||||
|
||||
#mw-header-menu-drawer {
|
||||
background: @dark-bg-40;
|
||||
}
|
||||
#page-tools #p-actions > nav ul {
|
||||
background: @dark-bg-50;
|
||||
}
|
||||
|
||||
#page-tools #p-actions>nav ul {
|
||||
background: @dark-bg-50;
|
||||
}
|
||||
.suggestions-dropdown,
|
||||
#site-search #search-form #search-input {
|
||||
background: @dark-bg-50 !important;
|
||||
}
|
||||
|
||||
.suggestions-dropdown,
|
||||
#site-search #search-form #search-input {
|
||||
background: @dark-bg-50 !important;
|
||||
}
|
||||
#mw-header-menu-drawer-container #mw-user-links #p-personal {
|
||||
border-color: @dark-bg-50;
|
||||
}
|
||||
|
||||
#mw-header-menu-drawer-container #mw-user-links #p-personal {
|
||||
border-color: @dark-bg-50;
|
||||
}
|
||||
.suggestion-link,
|
||||
#site-search #search-form #search-input {
|
||||
border-color: @dark-bg-60;
|
||||
}
|
||||
|
||||
.suggestion-link,
|
||||
#site-search #search-form #search-input {
|
||||
border-color: @dark-bg-60;
|
||||
}
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon,
|
||||
#site-search > input:checked:hover ~ #search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: @base-100;
|
||||
}
|
||||
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon,
|
||||
#site-search>input:checked:hover~#search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: @base-100;
|
||||
}
|
||||
#mw-header-menu-toggle span,
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon:before,
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon:after {
|
||||
background: @base-100;
|
||||
}
|
||||
|
||||
#mw-header-menu-toggle span,
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon:before,
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon:after {
|
||||
background: @base-100;
|
||||
}
|
||||
.mw-body .firstHeading,
|
||||
.mw-body-content h1,
|
||||
.mw-body-content h2,
|
||||
.mw-body-content h3,
|
||||
.mw-body-content h4,
|
||||
.mw-body-content h5,
|
||||
.mw-body-content h6,
|
||||
#mw-header-menu .mw-wiki-title,
|
||||
#mw-header-menu-drawer-container h3 {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
|
||||
.mw-body .firstHeading,
|
||||
.mw-body-content h1,
|
||||
.mw-body-content h2,
|
||||
.mw-body-content h3,
|
||||
.mw-body-content h4,
|
||||
.mw-body-content h5,
|
||||
.mw-body-content h6,
|
||||
#mw-header-menu .mw-wiki-title,
|
||||
#mw-header-menu-drawer-container h3 {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
table.wikitable,
|
||||
.suggestion-title {
|
||||
color: @dark-text-90;
|
||||
}
|
||||
|
||||
table.wikitable,
|
||||
.suggestion-title {
|
||||
color: @dark-text-90;
|
||||
}
|
||||
.suggestion-link.active {
|
||||
background-color: @accent-10;
|
||||
}
|
||||
|
||||
.suggestion-link.active {
|
||||
background-color: @accent-10;
|
||||
}
|
||||
.suggestion-link.active .suggestion-title {
|
||||
color: @accent-90;
|
||||
}
|
||||
|
||||
.suggestion-link.active .suggestion-title {
|
||||
color: @accent-90;
|
||||
}
|
||||
.mw-body-content #contentSub,
|
||||
.mw-body-content #contentSub2,
|
||||
.mw-body #siteSub,
|
||||
table.wikitable tr th,
|
||||
#mw-header-menu-drawer-container a,
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc a:hover,
|
||||
.suggestion-description {
|
||||
color: @dark-text-80 !important;
|
||||
}
|
||||
|
||||
.mw-body-content #contentSub,
|
||||
.mw-body-content #contentSub2,
|
||||
.mw-body #siteSub,
|
||||
table.wikitable tr th,
|
||||
#mw-header-menu-drawer-container a,
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc a:hover,
|
||||
.suggestion-description {
|
||||
color: @dark-text-80 !important;
|
||||
}
|
||||
a.mw-wiki-title,
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc a {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
|
||||
a.mw-wiki-title,
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc a {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc:before,
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc:after {
|
||||
background: linear-gradient( @dark-bg-0, rgba( 0, 0, 0, 0.001 ) );
|
||||
}
|
||||
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc:before,
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc:after {
|
||||
background: linear-gradient(@dark-bg-0, rgba(0, 0, 0, 0.001));
|
||||
}
|
||||
|
||||
#page-tools #p-views li>a:after,
|
||||
#page-tools #p-actions>nav:before,
|
||||
#mw-header-menu-drawer-container a:after,
|
||||
.mw-editsection>a:before,
|
||||
#pt-notifications-alert .mw-echo-notifications-badge:before,
|
||||
#pt-notifications-notice .mw-echo-notifications-badge:before,
|
||||
#p-namespaces ul li a:after {
|
||||
filter: invert(1);
|
||||
}
|
||||
#page-tools #p-views li > a:after,
|
||||
#page-tools #p-actions > nav:before,
|
||||
#mw-header-menu-drawer-container a:after,
|
||||
.mw-editsection > a:before,
|
||||
#pt-notifications-alert .mw-echo-notifications-badge:before,
|
||||
#pt-notifications-notice .mw-echo-notifications-badge:before,
|
||||
#p-namespaces ul li a:after {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1290px) and (prefers-color-scheme: dark) {
|
||||
@media only screen and ( max-width: 1290px ) and ( prefers-color-scheme: dark ) {
|
||||
.mw-header-container {
|
||||
background: @dark-bg-0;
|
||||
}
|
||||
|
||||
.mw-header-container {
|
||||
background: @dark-bg-0;
|
||||
}
|
||||
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc {
|
||||
background: @dark-bg-40;
|
||||
}
|
||||
|
||||
.mw-header-container.nav-down {
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc {
|
||||
background: @dark-bg-40;
|
||||
}
|
||||
|
||||
.mw-header-container.nav-down {
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1450px) and (prefers-color-scheme: dark) {
|
||||
@media only screen and ( max-width: 1450px ) and ( prefers-color-scheme: dark ) {
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc {
|
||||
.toctoggle a {
|
||||
background-color: @dark-bg-50;
|
||||
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc {
|
||||
&:before {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
|
||||
.toctoggle a {
|
||||
background-color: @dark-bg-50;
|
||||
|
||||
&:before {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @accent-10;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @accent-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,227 +3,226 @@
|
|||
// https://starcitizen.tools
|
||||
//
|
||||
|
||||
|
||||
#footer {
|
||||
z-index: 9; // High enough so it covers the floating UI
|
||||
overflow: hidden; //stop background hacks from destroying viewbox
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
direction: ltr;
|
||||
margin-top: @margin-side * 2;
|
||||
color: @color-footer-text;
|
||||
background: @color-footer-background-50;
|
||||
font-size: @ui-menu-text;
|
||||
line-height: @footer-line-height;
|
||||
z-index: 9; // High enough so it covers the floating UI
|
||||
overflow: hidden; //stop background hacks from destroying viewbox
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
direction: ltr;
|
||||
margin-top: @margin-side * 2;
|
||||
color: @color-footer-text;
|
||||
background: @color-footer-background-50;
|
||||
font-size: @ui-menu-text;
|
||||
line-height: @footer-line-height;
|
||||
|
||||
a {
|
||||
color: @color-footer-link;
|
||||
a {
|
||||
color: @color-footer-link;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: @color-footer-link-active;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: @color-footer-link-active;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul, li {
|
||||
margin: 0;
|
||||
}
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
}
|
||||
div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Bless Flexbox for saving me from PHP nightmare
|
||||
// OPTIMIZE: Implement nightmare
|
||||
&-list {
|
||||
margin: 0 auto!important;
|
||||
max-width: @footer-width;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// Bless Flexbox for saving me from PHP nightmare
|
||||
// OPTIMIZE: Implement nightmare
|
||||
&-list {
|
||||
margin: 0 auto !important;
|
||||
max-width: @footer-width;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
padding-left: @margin-side;
|
||||
padding-right: @margin-side;
|
||||
}
|
||||
> li {
|
||||
position: relative;
|
||||
padding-left: @margin-side;
|
||||
padding-right: @margin-side;
|
||||
}
|
||||
|
||||
#lastmod {
|
||||
order: 1;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
display: flex;
|
||||
#lastmod {
|
||||
order: 1;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
margin-right: 5px;
|
||||
}
|
||||
a {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
// Change icon
|
||||
&:before {
|
||||
margin-right: @icon-padding;
|
||||
.resource-loader-list-icon;
|
||||
opacity: @opacity-icon;
|
||||
}
|
||||
// Change icon
|
||||
&:before {
|
||||
margin-right: @icon-padding;
|
||||
.resource-loader-list-icon;
|
||||
opacity: @opacity-icon;
|
||||
}
|
||||
|
||||
// Background
|
||||
&:after {
|
||||
content: "";
|
||||
background-color: @color-footer-background-60;
|
||||
height: 100%;
|
||||
width: 600vw; // so long so it is always there
|
||||
top: 0;
|
||||
margin: 0 -100vw; // so long so you can't see the end
|
||||
display: block;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
overflow: hidden; // now you literally can't see the end
|
||||
}
|
||||
}
|
||||
// Background
|
||||
&:after {
|
||||
content: '';
|
||||
background-color: @color-footer-background-60;
|
||||
height: 100%;
|
||||
width: 600vw; // so long so it is always there
|
||||
top: 0;
|
||||
margin: 0 -100vw; // so long so you can't see the end
|
||||
display: block;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
overflow: hidden; // now you literally can't see the end
|
||||
}
|
||||
}
|
||||
|
||||
#sitelogo {
|
||||
order: 2;
|
||||
}
|
||||
#sitelogo {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
#sitetitle {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
margin-top: @margin-side * 3;
|
||||
margin-bottom: @margin-side / 2;
|
||||
#sitetitle {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
margin-top: @margin-side * 3;
|
||||
margin-bottom: @margin-side / 2;
|
||||
|
||||
.mw-wiki-title {
|
||||
color: @base-90;
|
||||
font-size: 20px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
.mw-wiki-title {
|
||||
color: @base-90;
|
||||
font-size: 20px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
#sitedesc {
|
||||
order: 4;
|
||||
margin-top: @margin-side / 2;
|
||||
}
|
||||
#sitedesc {
|
||||
order: 4;
|
||||
margin-top: @margin-side / 2;
|
||||
}
|
||||
|
||||
#about {
|
||||
order: 10;
|
||||
}
|
||||
#about {
|
||||
order: 10;
|
||||
}
|
||||
|
||||
#privacy {
|
||||
order: 11;
|
||||
}
|
||||
#privacy {
|
||||
order: 11;
|
||||
}
|
||||
|
||||
#disclaimer {
|
||||
order: 12;
|
||||
}
|
||||
#disclaimer {
|
||||
order: 12;
|
||||
}
|
||||
|
||||
#cookiestatement {
|
||||
order: 13;
|
||||
}
|
||||
#cookiestatement {
|
||||
order: 13;
|
||||
}
|
||||
|
||||
#about,
|
||||
#privacy,
|
||||
#disclaimer,
|
||||
#cookiestatement {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
#about,
|
||||
#privacy,
|
||||
#disclaimer,
|
||||
#cookiestatement {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
padding: @margin-side / 2 @margin-side;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
a {
|
||||
padding: @margin-side / 2 @margin-side;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#sitedesc,
|
||||
#copyright {
|
||||
margin-bottom: @margin-side / 2;
|
||||
width: 100%;
|
||||
}
|
||||
#sitedesc,
|
||||
#copyright {
|
||||
margin-bottom: @margin-side / 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#copyright{
|
||||
margin-top: @margin-side;
|
||||
order: 20;
|
||||
opacity: 0.5;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
#copyright {
|
||||
margin-top: @margin-side;
|
||||
order: 20;
|
||||
opacity: 0.5;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-container-icons {
|
||||
margin-top: @margin-side * 2;
|
||||
background-color: @color-footer-background-40;
|
||||
&-container-icons {
|
||||
margin-top: @margin-side * 2;
|
||||
background-color: @color-footer-background-40;
|
||||
|
||||
#footer-bottom-container {
|
||||
margin: 0 auto;
|
||||
padding: @margin-side / 2 0;
|
||||
width: 100%;
|
||||
max-width: @footer-width;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
#footer-bottom-container {
|
||||
margin: 0 auto;
|
||||
padding: @margin-side / 2 0;
|
||||
width: 100%;
|
||||
max-width: @footer-width;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
#mw-footer-tagline {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
#mw-footer-tagline {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
#footer-icons {
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
#footer-icons {
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
a {
|
||||
padding: 15px 10px;
|
||||
height: 50px;
|
||||
display: block;
|
||||
opacity: 0.5;
|
||||
transition: @transition-opacity;
|
||||
a {
|
||||
padding: 15px 10px;
|
||||
height: 50px;
|
||||
display: block;
|
||||
opacity: 0.5;
|
||||
transition: @transition-opacity;
|
||||
|
||||
&:before {
|
||||
content:"";
|
||||
.resource-loader-icon;
|
||||
display: block;
|
||||
background-size: contain;
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
.resource-loader-icon;
|
||||
display: block;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
img {
|
||||
display: none; // hide placeholder images
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: none; // hide placeholder images
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Icon styles
|
||||
&-partofico a {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
// Icon styles
|
||||
&-partofico a {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
&-madebyico a {
|
||||
width: 50px;
|
||||
}
|
||||
&-madebyico a {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
&-gdprcomplianceico a {
|
||||
width: 50px;
|
||||
}
|
||||
&-gdprcomplianceico a {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
&-monitoredbyico a {
|
||||
width: 95px;
|
||||
margin-bottom: -3px; //dirty fix
|
||||
}
|
||||
&-monitoredbyico a {
|
||||
width: 95px;
|
||||
margin-bottom: -3px; //dirty fix
|
||||
}
|
||||
|
||||
&-poweredbyico a {
|
||||
width: 95px;
|
||||
}
|
||||
&-poweredbyico a {
|
||||
width: 95px;
|
||||
}
|
||||
|
||||
&-copyrightico a {
|
||||
width: 110px;
|
||||
}
|
||||
&-copyrightico a {
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,53 +8,53 @@
|
|||
*/
|
||||
|
||||
.mw-header-container {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: @header-height;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: @fonts-secondary;
|
||||
transition: @transition-transform;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: @header-height;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: @fonts-secondary;
|
||||
transition: @transition-transform;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Hide header when scroll
|
||||
&.nav-up {
|
||||
transform: translate(0px, -@header-height);
|
||||
}
|
||||
// Hide header when scroll
|
||||
&.nav-up {
|
||||
transform: translate( 0, -@header-height );
|
||||
}
|
||||
|
||||
.mw-header-icons {
|
||||
display: inherit;
|
||||
}
|
||||
.mw-header-icons {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.mw-header-end {
|
||||
width: @icon-box-size + @margin-side + @icon-padding;
|
||||
height: @header-height;
|
||||
user-select: none;
|
||||
.mw-header-end {
|
||||
width: @icon-box-size + @margin-side + @icon-padding;
|
||||
height: @header-height;
|
||||
user-select: none;
|
||||
|
||||
// Input button hack
|
||||
>input {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
margin: 0;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
}
|
||||
// Input button hack
|
||||
> input {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
margin: 0;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -62,281 +62,277 @@
|
|||
* Modified from https://codepen.io/erikterwan/pen/EVzeRP and https://codepen.io/oxla/pen/zgvqmM
|
||||
*/
|
||||
#mw-header-menu {
|
||||
.mw-wiki-title {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.mw-wiki-title {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
input {
|
||||
&:checked {
|
||||
|
||||
input {
|
||||
&:checked {
|
||||
// Show drawer
|
||||
~ #mw-header-menu-drawer {
|
||||
transform: none;
|
||||
will-change: unset;
|
||||
}
|
||||
|
||||
// Show drawer
|
||||
~#mw-header-menu-drawer {
|
||||
transform: none;
|
||||
will-change: unset;
|
||||
}
|
||||
// Transform all the slices of hamburger into a crossmark
|
||||
~ #mw-header-menu-toggle > span {
|
||||
opacity: @opacity-icon;
|
||||
transform: rotate( 45deg ) translate( -5px, -7px );
|
||||
|
||||
// Transform all the slices of hamburger into a crossmark
|
||||
~#mw-header-menu-toggle>span {
|
||||
opacity: @opacity-icon;
|
||||
transform: rotate(45deg) translate(-5px, -7px);
|
||||
// Reflect line
|
||||
&:nth-last-child( 2 ) {
|
||||
transform: rotate( -45deg ) translate( -2px, 6px );
|
||||
}
|
||||
|
||||
// Reflect line
|
||||
&:nth-last-child(2) {
|
||||
transform: rotate(-45deg) translate(-2px, 6px);
|
||||
}
|
||||
// Hide line
|
||||
&:nth-last-child( 3 ) {
|
||||
opacity: 0;
|
||||
transform: rotate( 0deg ) scale( 0.2, 0.2 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide line
|
||||
&:nth-last-child(3) {
|
||||
opacity: 0;
|
||||
transform: rotate(0deg) scale(0.2, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Hover state
|
||||
&:hover ~ #mw-header-menu-toggle > span {
|
||||
opacity: @opacity-icon-active;
|
||||
|
||||
// Hover state
|
||||
&:hover~#mw-header-menu-toggle>span {
|
||||
opacity: @opacity-icon-active;
|
||||
&:first-child {
|
||||
transform: translate( -50%, 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
&-toggle {
|
||||
width: @icon-size;
|
||||
height: @icon-size;
|
||||
margin: (@header-height - @icon-size) / 2 @icon-padding (@header-height - @icon-size) / 2 (@icon-margin * 2 + @margin-side * 2) / 2;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&-toggle {
|
||||
width: @icon-size;
|
||||
height: @icon-size;
|
||||
margin: (@header-height - @icon-size) / 2 @icon-padding (@header-height - @icon-size) / 2 (@icon-margin * 2 + @margin-side * 2) / 2;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
span {
|
||||
z-index: 5;
|
||||
margin: 1.5px 0;
|
||||
width: @icon-size;
|
||||
height: 2px;
|
||||
display: block;
|
||||
background: @base-0;
|
||||
opacity: @opacity-icon;
|
||||
transform-origin: 4px 0;
|
||||
transition: @transition-transform, @transition-background-quick, @transition-opacity;
|
||||
|
||||
span {
|
||||
z-index: 5;
|
||||
margin: 1.5px 0;
|
||||
width: @icon-size;
|
||||
height: 2px;
|
||||
display: block;
|
||||
background: @base-0;
|
||||
opacity: @opacity-icon;
|
||||
transform-origin: 4px 0px;
|
||||
transition: @transition-transform,
|
||||
@transition-background-quick,
|
||||
@transition-opacity;
|
||||
&:first-child {
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
&:nth-last-child( 2 ) {
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-last-child(2) {
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-drawer {
|
||||
position: fixed;
|
||||
z-index: 4;
|
||||
top: 0;
|
||||
padding-top: @header-height;
|
||||
width: @drawer-width;
|
||||
max-width: 100vw; // In case if someone has super small screen
|
||||
height: 100vh;
|
||||
.boxshadow(3);
|
||||
background: @menu-background;
|
||||
transform-origin: 0% 0%;
|
||||
transform: translate( -110%, 0 ); // Shadow bleeding with 100%
|
||||
transition: @transition-transform;
|
||||
will-change: transform; // Help with performance
|
||||
|
||||
&-drawer {
|
||||
position: fixed;
|
||||
z-index: 4;
|
||||
top: 0;
|
||||
padding-top: @header-height;
|
||||
width: @drawer-width;
|
||||
max-width: 100vw; // In case if someone has super small screen
|
||||
height: 100vh;
|
||||
.boxshadow(3);
|
||||
background: @menu-background;
|
||||
transform-origin: 0% 0%;
|
||||
transform: translate(-110%, 0); // Shadow bleeding with 100%
|
||||
transition: @transition-transform;
|
||||
will-change: transform; // Help with performance
|
||||
&-container {
|
||||
height: ~'calc(100vh - @{header-height})';
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: @transition-height;
|
||||
|
||||
&-container {
|
||||
height:~"calc(100vh - @{header-height})";
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: @transition-height;
|
||||
.mw-wiki-title {
|
||||
padding: @margin-side;
|
||||
}
|
||||
|
||||
.mw-wiki-title {
|
||||
padding: @margin-side;
|
||||
}
|
||||
#p-nt-container {
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#p-nt-container {
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#p-navigation-label {
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
|
||||
#p-navigation-label {
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
#mw-user-links {
|
||||
#p-personal {
|
||||
margin-top: @margin-side / 2;
|
||||
padding-top: @margin-side / 2;
|
||||
border-top: 1px solid @base-80;
|
||||
|
||||
#mw-user-links {
|
||||
h3 {
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
|
||||
#p-personal {
|
||||
margin-top: @margin-side / 2;
|
||||
padding-top: @margin-side / 2;
|
||||
border-top: 1px solid @base-80;
|
||||
#pt-userpage {
|
||||
margin-bottom: @margin-side / 2;
|
||||
|
||||
h3 {
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
a {
|
||||
justify-content: unset;
|
||||
|
||||
#pt-userpage {
|
||||
margin-bottom: @margin-side / 2;
|
||||
&:after {
|
||||
margin: 0;
|
||||
width: @icon-box-size;
|
||||
height: @icon-box-size;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
justify-content: unset;
|
||||
span {
|
||||
order: 2;
|
||||
padding-left: @margin-side;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
margin: 0;
|
||||
width: @icon-box-size;
|
||||
height: @icon-box-size;
|
||||
}
|
||||
}
|
||||
#pt-login {
|
||||
a {
|
||||
.button-blue;
|
||||
|
||||
span {
|
||||
order: 2;
|
||||
padding-left: @margin-side;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.button-blue-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pt-login {
|
||||
a {
|
||||
.button-blue;
|
||||
#pt-logout {
|
||||
a {
|
||||
.button-red;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.button-blue-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.button-red-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pt-logout {
|
||||
a {
|
||||
.button-red;
|
||||
h3 {
|
||||
margin: @margin-side / 2 0 0 0;
|
||||
padding: @margin-side / 2 @margin-side;
|
||||
color: @color-item-header;
|
||||
font-size: @ui-menu-header;
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.button-red-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: @margin-side / 2 0 0 0;
|
||||
padding: @margin-side / 2 @margin-side;
|
||||
color: @color-item-header;
|
||||
font-size: @ui-menu-header;
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
a {
|
||||
.menu-item-link;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: @padding-menu-item-big;
|
||||
font-size: @ui-menu-text-big;
|
||||
font-family: @fonts;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
&:after {
|
||||
.resource-loader-list-icon;
|
||||
margin-left: @icon-padding;
|
||||
opacity: 0.4;
|
||||
display: block;
|
||||
background-size: contain;
|
||||
transition: @transition-opacity-quick;
|
||||
}
|
||||
|
||||
a {
|
||||
.menu-item-link;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: @padding-menu-item-big;
|
||||
font-size: @ui-menu-text-big;
|
||||
font-family: @fonts;
|
||||
&:hover {
|
||||
.menu-item-link-hover;
|
||||
|
||||
&:after {
|
||||
.resource-loader-list-icon;
|
||||
margin-left: @icon-padding;
|
||||
opacity: 0.4;
|
||||
display: block;
|
||||
background-size: contain;
|
||||
transition: @transition-opacity-quick;
|
||||
}
|
||||
&:after {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.menu-item-link-hover;
|
||||
&:active {
|
||||
.menu-item-link-active;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.menu-item-link-active;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.menu-item-link-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
.menu-item-link-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar site title
|
||||
#mw-sidebar-sitename {
|
||||
position: fixed;
|
||||
visibility: visible;
|
||||
top: @sidebar-sitename-height + @header-height + @margin-side;
|
||||
left: @margin-side;
|
||||
font-size: 11px;
|
||||
letter-spacing: 4px;
|
||||
transform: translateY(0) rotate(-90deg);
|
||||
transform-origin: top left;
|
||||
transition: @transition-transform, @transition-opacity;
|
||||
position: fixed;
|
||||
visibility: visible;
|
||||
top: @sidebar-sitename-height + @header-height + @margin-side;
|
||||
left: @margin-side;
|
||||
font-size: 11px;
|
||||
letter-spacing: 4px;
|
||||
transform: translateY( 0 ) rotate( -90deg );
|
||||
transform-origin: top left;
|
||||
transition: @transition-transform, @transition-opacity;
|
||||
}
|
||||
|
||||
// Nav up stuff
|
||||
.nav-up {
|
||||
~#mw-sidebar-sitename {
|
||||
transform: translateY(-54px) rotate(-90deg);
|
||||
}
|
||||
~ #mw-sidebar-sitename {
|
||||
transform: translateY( -54px ) rotate( -90deg );
|
||||
}
|
||||
|
||||
#mw-header-menu-drawer-container {
|
||||
height: 100vh;
|
||||
}
|
||||
#mw-header-menu-drawer-container {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
// Bypass calculation
|
||||
@mw-sidebar-sitename-max-width: @margin-side * 5 + @page-width;
|
||||
|
||||
@media only screen and (max-width: @mw-sidebar-sitename-max-width) {
|
||||
#mw-sidebar-sitename {
|
||||
z-index: -1; // remove link
|
||||
opacity: 0; // hide visual
|
||||
}
|
||||
@media only screen and ( max-width: @mw-sidebar-sitename-max-width ) {
|
||||
#mw-sidebar-sitename {
|
||||
z-index: -1; // remove link
|
||||
opacity: 0; // hide visual
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen2) {
|
||||
.mw-header-container {
|
||||
background: @base-100;
|
||||
@media only screen and ( max-width: @screen2 ) {
|
||||
.mw-header-container {
|
||||
background: @base-100;
|
||||
|
||||
&.nav-down {
|
||||
border-bottom: 1px solid @base-80;
|
||||
.boxshadow(2);
|
||||
}
|
||||
&.nav-down {
|
||||
border-bottom: 1px solid @base-80;
|
||||
.boxshadow(2);
|
||||
}
|
||||
|
||||
&.nav-up {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&.nav-up {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* User icon bar
|
||||
*/
|
||||
#p-personal-extra {
|
||||
ul {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
ul {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -345,23 +341,23 @@
|
|||
#feedlinks,
|
||||
#pt-anontalk,
|
||||
#pt-anoncontribs {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
// RTL tweaks
|
||||
.rtl {
|
||||
#mw-sidebar-sitename {
|
||||
left: unset;
|
||||
right: @margin-side;
|
||||
transform: translateY(0) rotate(90deg);
|
||||
transform-origin: top right;
|
||||
}
|
||||
#mw-sidebar-sitename {
|
||||
left: unset;
|
||||
right: @margin-side;
|
||||
transform: translateY( 0 ) rotate( 90deg );
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
.nav-up~#mw-sidebar-sitename {
|
||||
transform: translateY(-54px) rotate(90deg);
|
||||
}
|
||||
.nav-up ~ #mw-sidebar-sitename {
|
||||
transform: translateY( -54px ) rotate( 90deg );
|
||||
}
|
||||
|
||||
#mw-header-menu-drawer {
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
}
|
||||
#mw-header-menu-drawer {
|
||||
transform: translate( 100%, 0 );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,146 +6,146 @@
|
|||
|
||||
// Hide selected item
|
||||
.mw-portlet li.selected {
|
||||
.mixin-screen-reader-text;
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
|
||||
#page-tools {
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
margin-top: 1.3rem;
|
||||
display: flex;
|
||||
transform: translateX(~"calc( (100vw - @{page-width}) / 2 - @{margin-side} * 2 - 100%)"); // magic
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
margin-top: 1.3rem;
|
||||
display: flex;
|
||||
transform: translateX( ~'calc( (100vw - @{page-width}) / 2 - @{margin-side} * 2 - 100%)' ); // magic
|
||||
|
||||
h3 {
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
h3 {
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#p-views {
|
||||
li > a {
|
||||
.resource-loader-icon-link;
|
||||
padding: 5px;
|
||||
opacity: @opacity-icon;
|
||||
transition: @transition-opacity;
|
||||
#p-views {
|
||||
li > a {
|
||||
.resource-loader-icon-link;
|
||||
padding: 5px;
|
||||
opacity: @opacity-icon;
|
||||
transition: @transition-opacity;
|
||||
|
||||
&:hover {
|
||||
opacity: @opacity-icon-active;
|
||||
}
|
||||
&:hover {
|
||||
opacity: @opacity-icon-active;
|
||||
}
|
||||
|
||||
&:after {
|
||||
.resource-loader-icon;
|
||||
}
|
||||
&:after {
|
||||
.resource-loader-icon;
|
||||
}
|
||||
|
||||
span {
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#p-actions {
|
||||
> nav {
|
||||
.resource-loader-icon-link;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
// transition: @transition-opacity-quick; - Hidden behind the menu anyways
|
||||
#p-actions {
|
||||
> nav {
|
||||
.resource-loader-icon-link;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
// transition: @transition-opacity-quick; - Hidden behind the menu anyways
|
||||
|
||||
// TODO: Need to make value more flexible
|
||||
ul {
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
.menu-container;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
.boxshadow(4);
|
||||
transition: @transition-opacity-quick, @transition-box-shadow-quick;
|
||||
// TODO: Need to make value more flexible
|
||||
ul {
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
.menu-container;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
.boxshadow(4);
|
||||
transition: @transition-opacity-quick, @transition-box-shadow-quick;
|
||||
|
||||
a {
|
||||
.menu-item-link;
|
||||
justify-content: space-between;
|
||||
font-size: @ui-menu-text;
|
||||
padding: @padding-menu-item;
|
||||
a {
|
||||
.menu-item-link;
|
||||
justify-content: space-between;
|
||||
font-size: @ui-menu-text;
|
||||
padding: @padding-menu-item;
|
||||
|
||||
&:after {
|
||||
.resource-loader-list-icon;
|
||||
margin-left: @icon-padding;
|
||||
opacity: @opacity-icon;
|
||||
}
|
||||
&:after {
|
||||
.resource-loader-list-icon;
|
||||
margin-left: @icon-padding;
|
||||
opacity: @opacity-icon;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:after {
|
||||
opacity: @opacity-icon-active;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:after {
|
||||
opacity: @opacity-icon-active;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.menu-item-link-hover;
|
||||
}
|
||||
&:hover {
|
||||
.menu-item-link-hover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
.menu-item-link-active;
|
||||
}
|
||||
&:active {
|
||||
.menu-item-link-active;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.menu-item-link-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
.menu-item-link-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
.resource-loader-menu-icon;
|
||||
opacity: @opacity-icon;
|
||||
}
|
||||
&:before {
|
||||
.resource-loader-menu-icon;
|
||||
opacity: @opacity-icon;
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
* Hidden behind the menu anyways
|
||||
* &:hover:after {
|
||||
* opacity: @opacity-icon-active;
|
||||
* }
|
||||
*/
|
||||
|
||||
&:hover ul {
|
||||
z-index: 5;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover ul {
|
||||
z-index: 5;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Flexible value
|
||||
@media only screen and (max-width: @screen2) {
|
||||
#page-tools {
|
||||
position: relative;
|
||||
margin-left: @margin-side / 2;
|
||||
float: right;
|
||||
transform: none;
|
||||
@media only screen and ( max-width: @screen2 ) {
|
||||
#page-tools {
|
||||
position: relative;
|
||||
margin-left: @margin-side / 2;
|
||||
float: right;
|
||||
transform: none;
|
||||
|
||||
#p-actions > nav ul {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
#p-actions > nav ul {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
#page-tools {
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
transform: none;
|
||||
float: none;
|
||||
@media only screen and ( max-width: 500px ) {
|
||||
#page-tools {
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
transform: none;
|
||||
float: none;
|
||||
|
||||
#p-actions > nav ul {
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
#p-actions > nav ul {
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,11 @@
|
|||
// https://starcitizen.tools
|
||||
//
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.001s !important;
|
||||
transition-duration: 0.001s !important;
|
||||
}
|
||||
}
|
||||
@media ( prefers-reduced-motion: reduce ) {
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
animation-duration: 0.001s !important;
|
||||
transition-duration: 0.001s !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,19 +4,19 @@
|
|||
//
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: @base-70 transparent;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: @base-70 transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: @base-70;
|
||||
border: 4px solid transparent;
|
||||
}
|
||||
background-color: @base-70;
|
||||
border: 4px solid transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,254 +7,248 @@
|
|||
|
||||
// TODO: Make it configurable and flexible
|
||||
#site-search {
|
||||
#search-form {
|
||||
position: absolute;
|
||||
z-index: -1; // Not interactable
|
||||
margin: 7px 0 8px; // 1px h3 screen reader
|
||||
display: flex;
|
||||
top: 0;
|
||||
right: @icon-box-size + @icon-padding * 2;
|
||||
opacity: 0;
|
||||
.boxshadow(4);
|
||||
transition: @transition-opacity;
|
||||
|
||||
#search-form {
|
||||
position: absolute;
|
||||
z-index: -1; // Not interactable
|
||||
margin: 7px 0 8px; // 1px h3 screen reader
|
||||
display: flex;
|
||||
top: 0;
|
||||
right: @icon-box-size + @icon-padding * 2;
|
||||
opacity: 0;
|
||||
.boxshadow(4);
|
||||
transition: @transition-opacity;
|
||||
// Search field
|
||||
#search-input {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 12px 15px;
|
||||
width: 0;
|
||||
max-width: calc( ~'100vw -'@icon-box-size * 2 + @icon-padding * 4 + @margin-side );
|
||||
border: 1px solid @base-90;
|
||||
transition: @transition-width, @transition-box-shadow;
|
||||
|
||||
// Search field
|
||||
#search-input {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 12px 15px;
|
||||
width: 0;
|
||||
max-width: calc(~"100vw -"@icon-box-size * 2 + @icon-padding * 4 + @margin-side );
|
||||
border: 1px solid @base-90;
|
||||
transition: @transition-width, @transition-box-shadow;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
.boxshadow(5);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
.boxshadow(5);
|
||||
}
|
||||
}
|
||||
// Search field button
|
||||
#search-button {
|
||||
.button-blue;
|
||||
width: @icon-box-size + @icon-padding * 2;
|
||||
height: 42px;
|
||||
border: 0;
|
||||
cursor: pointer; //somehow it is not pointer
|
||||
|
||||
// Search field button
|
||||
#search-button {
|
||||
.button-blue;
|
||||
width: @icon-box-size + @icon-padding * 2;
|
||||
height: 42px;
|
||||
border: 0;
|
||||
cursor: pointer; //somehow it is not pointer
|
||||
img {
|
||||
filter: invert( 1 );
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
img {
|
||||
filter: invert(1);
|
||||
width: 16px;
|
||||
}
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.button-blue-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.button-blue-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
#search-toggle-icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: inherit;
|
||||
|
||||
#search-toggle-icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: inherit;
|
||||
#search-toggle-icon {
|
||||
opacity: @opacity-icon;
|
||||
position: absolute;
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: solid 2px @base-0;
|
||||
border-radius: 100%;
|
||||
transform: rotate( -45deg );
|
||||
transition: @transition-transform, @transition-height, @transition-opacity, @transition-border-color;
|
||||
|
||||
#search-toggle-icon {
|
||||
opacity: @opacity-icon;
|
||||
position: absolute;
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: solid 2px @base-0;
|
||||
border-radius: 100%;
|
||||
transform: rotate(-45deg);
|
||||
transition: @transition-transform,
|
||||
@transition-height,
|
||||
@transition-opacity,
|
||||
@transition-border-color;
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
background-color: @base-0;
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
background-color: @base-0;
|
||||
transition: inherit;
|
||||
}
|
||||
&:before {
|
||||
top: 10px;
|
||||
left: 3px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 10px;
|
||||
left: 3px;
|
||||
height: 10px;
|
||||
}
|
||||
&:after {
|
||||
opacity: 0;
|
||||
top: -1px;
|
||||
left: 4px;
|
||||
height: 18px;
|
||||
transform: rotate( -90deg );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
top: -1px;
|
||||
left: 4px;
|
||||
height: 18px;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
#search-toggle {
|
||||
&:checked {
|
||||
~ #search-form {
|
||||
z-index: 5;
|
||||
opacity: 1;
|
||||
|
||||
#search-toggle {
|
||||
&:checked {
|
||||
~#search-form {
|
||||
z-index: 5;
|
||||
opacity: 1;
|
||||
#search-input {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
#search-input {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
~ #search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: transparent;
|
||||
|
||||
~#search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: transparent;
|
||||
&:before {
|
||||
height: 18px;
|
||||
transform: translate( 1px, -11px );
|
||||
}
|
||||
|
||||
&:before {
|
||||
height: 18px;
|
||||
transform: translate(1px, -11px);
|
||||
}
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover {
|
||||
~ #search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: @base-0;
|
||||
|
||||
&:hover {
|
||||
~#search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: @base-0;
|
||||
&:after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
~ #search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: @base-0;
|
||||
|
||||
&:hover {
|
||||
~#search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: @base-0;
|
||||
&:after {
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
~ #search-toggle-icon-container #search-toggle-icon {
|
||||
opacity: @opacity-icon-active;
|
||||
|
||||
&:hover {
|
||||
~#search-toggle-icon-container #search-toggle-icon {
|
||||
opacity: @opacity-icon-active;
|
||||
|
||||
&:before {
|
||||
height: 5px;
|
||||
transform: translate(0px, 5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
height: 5px;
|
||||
transform: translate( 0, 5px );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#typeahead-suggestions {
|
||||
position: absolute;
|
||||
top: @header-height;
|
||||
z-index: 99999;
|
||||
position: absolute;
|
||||
top: @header-height;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.suggestions-dropdown {
|
||||
background: @base-100;
|
||||
.boxshadow(4);
|
||||
width: @suggestion-max-width;
|
||||
max-width: calc(~"100vw -"@icon-box-size + @icon-padding * 2 + @margin-side );
|
||||
background: @base-100;
|
||||
.boxshadow(4);
|
||||
width: @suggestion-max-width;
|
||||
max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
|
||||
}
|
||||
|
||||
.suggestion-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
min-height: 2rem * @content-scaling;
|
||||
padding: 1rem 1rem 1rem 8.5rem * @content-scaling;
|
||||
border-bottom: 1px solid @base-90;
|
||||
display: block;
|
||||
position: relative;
|
||||
min-height: 2rem * @content-scaling;
|
||||
padding: 1rem 1rem 1rem 8.5rem * @content-scaling;
|
||||
border-bottom: 1px solid @base-90;
|
||||
}
|
||||
|
||||
.suggestion-title {
|
||||
margin: 0 0 0.78rem * @content-scaling 0;
|
||||
color: @base-10;
|
||||
font-size: 1.6rem * @content-scaling;
|
||||
font-weight: 400;
|
||||
line-height: 1.872rem * @content-scaling;
|
||||
margin: 0 0 0.78rem * @content-scaling 0;
|
||||
color: @base-10;
|
||||
font-size: 1.6rem * @content-scaling;
|
||||
font-weight: normal;
|
||||
line-height: 1.872rem * @content-scaling;
|
||||
}
|
||||
|
||||
.suggestion-link.active .suggestion-title {
|
||||
color: @accent-50;
|
||||
color: @accent-50;
|
||||
}
|
||||
|
||||
.suggestion-highlight {
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.suggestion-description {
|
||||
color: @base-30;
|
||||
margin: 0;
|
||||
font-family: @fonts;
|
||||
font-size: 1.3rem * @content-scaling;
|
||||
line-height: 1.43rem * @content-scaling;
|
||||
color: @base-30;
|
||||
margin: 0;
|
||||
font-family: @fonts;
|
||||
font-size: 1.3rem * @content-scaling;
|
||||
line-height: 1.43rem * @content-scaling;
|
||||
}
|
||||
|
||||
.suggestion-link.active {
|
||||
background-color: @accent-90;
|
||||
background-color: @accent-90;
|
||||
}
|
||||
|
||||
/* using element selector to override default anchor styles */
|
||||
a.suggestion-link:hover {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.suggestion-thumbnail {
|
||||
background-color: @base-80;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
width: 7rem * @content-scaling;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: @base-80;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
width: 7rem * @content-scaling;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// RTL tweaks
|
||||
.rtl {
|
||||
#site-search {
|
||||
#search-form {
|
||||
left: @icon-box-size + @margin-side + @icon-padding;
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
#site-search {
|
||||
#search-form {
|
||||
left: @icon-box-size + @margin-side + @icon-padding;
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and ( max-width: @suggestion-max-width ) {
|
||||
.suggestions-dropdown {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: @header-height + 1px;
|
||||
max-width: 100vw;
|
||||
|
||||
|
||||
@media only screen and (max-width: @suggestion-max-width) {
|
||||
.suggestions-dropdown {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: @header-height + 1px;
|
||||
max-width: 100vw;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: black;
|
||||
display: block;
|
||||
opacity: 0.7;
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #000;
|
||||
display: block;
|
||||
opacity: 0.7;
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,39 +4,39 @@
|
|||
//
|
||||
|
||||
table.wikitable {
|
||||
background-color: transparent;
|
||||
color: @base-20;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
color: @base-20;
|
||||
border: 0;
|
||||
|
||||
tr {
|
||||
vertical-align: top;
|
||||
tr {
|
||||
vertical-align: top;
|
||||
|
||||
th {
|
||||
color: @base-30;
|
||||
background-color: transparent;
|
||||
font-size: @content-caption-size;
|
||||
text-align: left;
|
||||
}
|
||||
th {
|
||||
color: @base-30;
|
||||
background-color: transparent;
|
||||
font-size: @content-caption-size;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: @content-monospace-size;
|
||||
}
|
||||
td {
|
||||
font-size: @content-monospace-size;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: @margin-side / 2 @margin-side @margin-side / 2 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid @base-80;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: @margin-side / 2 @margin-side @margin-side / 2 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid @base-80;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @base-90;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: @base-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen2) {
|
||||
table.wikiatble {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@media only screen and ( max-width: @screen2 ) {
|
||||
table.wikiatble {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,61 +4,49 @@
|
|||
@font-directory: 'fonts/';
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: local('Roboto'), local('Roboto-Regular'),
|
||||
url('@{font-directory}Roboto-Regular.woff2') format('woff2'),
|
||||
url('@{font-directory}Roboto-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
src: local( 'Roboto' ), local( 'Roboto-Regular' ), url( '@{font-directory}Roboto-Regular.woff2' ) format( 'woff2' ), url( '@{font-directory}Roboto-Regular.woff' ) format( 'woff' );
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'),
|
||||
url('@{font-directory}Roboto-Bold.woff2') format('woff2'),
|
||||
url('@{font-directory}Roboto-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
src: local( 'Roboto Bold' ), local( 'Roboto-Bold' ), url( '@{font-directory}Roboto-Bold.woff2' ) format( 'woff2' ), url( '@{font-directory}Roboto-Bold.woff' ) format( 'woff' );
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: local('Roboto Italic'), local('Roboto-Italic'),
|
||||
url('@{font-directory}Roboto-Italic.woff2') format('woff2'),
|
||||
url('@{font-directory}Roboto-Italic.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
src: local( 'Roboto Italic' ), local( 'Roboto-Italic' ), url( '@{font-directory}Roboto-Italic.woff2' ) format( 'woff2' ), url( '@{font-directory}Roboto-Italic.woff' ) format( 'woff' );
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Titillium Web';
|
||||
src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'),
|
||||
url('@{font-directory}TitilliumWeb-Regular.woff2') format('woff2'),
|
||||
url('@{font-directory}TitilliumWeb-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-family: 'Titillium Web';
|
||||
src: local( 'Titillium Web Regular' ), local( 'TitilliumWeb-Regular' ), url( '@{font-directory}TitilliumWeb-Regular.woff2' ) format( 'woff2' ), url( '@{font-directory}TitilliumWeb-Regular.woff' ) format( 'woff' );
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Titillium Web';
|
||||
src: local('Titillium Web Bold'), local('TitilliumWeb-Bold'),
|
||||
url('@{font-directory}TitilliumWeb-Bold.woff2') format('woff2'),
|
||||
url('@{font-directory}TitilliumWeb-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-family: 'Titillium Web';
|
||||
src: local( 'Titillium Web Bold' ), local( 'TitilliumWeb-Bold' ), url( '@{font-directory}TitilliumWeb-Bold.woff2' ) format( 'woff2' ), url( '@{font-directory}TitilliumWeb-Bold.woff' ) format( 'woff' );
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Titillium Web';
|
||||
src: local('Titillium Web Italic'), local('TitilliumWeb-Italic'),
|
||||
url('@{font-directory}TitilliumWeb-Italic.woff2') format('woff2'),
|
||||
url('@{font-directory}TitilliumWeb-Italic.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
font-family: 'Titillium Web';
|
||||
src: local( 'Titillium Web Italic' ), local( 'TitilliumWeb-Italic' ), url( '@{font-directory}TitilliumWeb-Italic.woff2' ) format( 'woff2' ), url( '@{font-directory}TitilliumWeb-Italic.woff' ) format( 'woff' );
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
.resource-loader-icon() {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
}
|
||||
|
||||
.resource-loader-menu-icon() {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: @icon-box-size;
|
||||
height: @icon-box-size;
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
}
|
||||
|
||||
.resource-loader-list-icon() {
|
||||
content: "";
|
||||
content: '';
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
|
|
@ -67,65 +67,67 @@
|
|||
|
||||
.menu-item-link() {
|
||||
display: flex;
|
||||
color: @color-item-text!important;
|
||||
color: @color-item-text !important;
|
||||
transition: @transition-background-quick, @transition-color-quick;
|
||||
}
|
||||
|
||||
.menu-item-link-hover() {
|
||||
color: @color-item-text-hover!important;
|
||||
color: @color-item-text-hover !important;
|
||||
background-color: @menu-item-link-hover;
|
||||
}
|
||||
|
||||
.menu-item-link-active() {
|
||||
color: @color-item-text-active!important;
|
||||
background-color: @menu-item-link-active;
|
||||
color: @color-item-text-active !important;
|
||||
background-color: @menu-item-link-active;
|
||||
}
|
||||
|
||||
.menu-item-link-focus() {
|
||||
color: @color-item-text-active!important;
|
||||
background-color: @menu-item-link-active;
|
||||
color: @color-item-text-active !important;
|
||||
background-color: @menu-item-link-active;
|
||||
}
|
||||
|
||||
// Button Styles
|
||||
.button-blue() {
|
||||
background-color: @accent-50;
|
||||
color: @base-80!important;
|
||||
color: @base-80 !important;
|
||||
transition: @transition-background-quick, @transition-color-quick;
|
||||
}
|
||||
|
||||
.button-blue-active() {
|
||||
background-color: @accent-10;
|
||||
color: @base-100!important;
|
||||
color: @base-100 !important;
|
||||
}
|
||||
|
||||
.button-red() {
|
||||
background-color: @red-50;
|
||||
color: @base-80!important;
|
||||
color: @base-80 !important;
|
||||
transition: @transition-background-quick, @transition-color-quick;
|
||||
}
|
||||
|
||||
.button-red-active() {
|
||||
background-color: @red-30;
|
||||
color: @base-100!important;
|
||||
color: @base-100 !important;
|
||||
}
|
||||
|
||||
// Link styles
|
||||
.link-content-text(@color) {
|
||||
background-image: linear-gradient(to right, @color 0, @color 100%);
|
||||
background-image: linear-gradient( to right, @color 0, @color 100% );
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0 100%;
|
||||
transition: @transition-background-quick, @transition-color-quick;
|
||||
|
||||
/* stylelint-disable declaration-property-value-blacklist */
|
||||
&:hover {
|
||||
outline: none;
|
||||
color: white!important;
|
||||
background-size: 100% 100%!important;
|
||||
color: #fff !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
/* stylelint-enable */
|
||||
}
|
||||
|
||||
// Gradient overflow
|
||||
.gradient-overflow(@position) {
|
||||
content: "";
|
||||
content: '';
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
|
|
@ -135,20 +137,20 @@
|
|||
|
||||
// Box-shadow
|
||||
// https://codepen.io/sdthornton/pen/wBZdXq
|
||||
.boxshadow(@level: 1){
|
||||
& when (@level = 1) {
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.06); // Cards
|
||||
}
|
||||
& when (@level = 2) {
|
||||
box-shadow: 0 3px 6px rgba(0,0,0,0.04), 0 3px 6px rgba(0,0,0,0.0575);
|
||||
}
|
||||
& when (@level = 3) {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.0475), 0 6px 6px rgba(0,0,0,0.0575); // Drawer
|
||||
}
|
||||
& when (@level = 4) {
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.0625), 0 10px 10px rgba(0,0,0,0.055); // FAB, floating elements
|
||||
}
|
||||
& when (@level = 5) {
|
||||
box-shadow: 0 19px 38px rgba(0,0,0,0.075), 0 15px 12px rgba(0,0,0,0.055); // Dialogs
|
||||
}
|
||||
.boxshadow(@level: 1) {
|
||||
& when (@level = 1) {
|
||||
box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.03 ), 0 1px 2px rgba( 0, 0, 0, 0.06 ); // Cards
|
||||
}
|
||||
& when (@level = 2) {
|
||||
box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 );
|
||||
}
|
||||
& when (@level = 3) {
|
||||
box-shadow: 0 10px 20px rgba( 0, 0, 0, 0.0475 ), 0 6px 6px rgba( 0, 0, 0, 0.0575 ); // Drawer
|
||||
}
|
||||
& when (@level = 4) {
|
||||
box-shadow: 0 14px 28px rgba( 0, 0, 0, 0.0625 ), 0 10px 10px rgba( 0, 0, 0, 0.055 ); // FAB, floating elements
|
||||
}
|
||||
& when (@level = 5) {
|
||||
box-shadow: 0 19px 38px rgba( 0, 0, 0, 0.075 ), 0 15px 12px rgba( 0, 0, 0, 0.055 ); // Dialogs
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,32 +16,32 @@
|
|||
#footer-container-icons,
|
||||
.tabbernav,
|
||||
.embedvideo {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
* {
|
||||
box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
color: @base-20;
|
||||
font-family: @fonts;
|
||||
color: @base-20;
|
||||
font-family: @fonts;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
margin: 0.8rem 0 0 0;
|
||||
margin: 0.8rem 0 0 0;
|
||||
}
|
||||
|
||||
#toc {
|
||||
background: none;
|
||||
border: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.mw-body {
|
||||
color: @base-20;
|
||||
color: @base-20;
|
||||
}
|
||||
|
||||
.mw-wiki-title,
|
||||
|
|
@ -50,152 +50,153 @@ ol {
|
|||
.mw-body-content h2,
|
||||
.mw-body-content h3,
|
||||
.mw-body-content h4 {
|
||||
font-family: @fonts-secondary;
|
||||
font-family: @fonts-secondary;
|
||||
}
|
||||
|
||||
.mw-body .firstHeading {
|
||||
margin: 0;
|
||||
padding-top: 1.2rem;
|
||||
color: @base-10;
|
||||
overflow: inherit;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
padding-top: 1.2rem;
|
||||
color: @base-10;
|
||||
overflow: inherit;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.mw-body h1,
|
||||
.mw-body-content h1 {
|
||||
font-size: @content-h1-size;
|
||||
font-size: @content-h1-size;
|
||||
}
|
||||
|
||||
.mw-body-content {
|
||||
line-height: @content-line-height;
|
||||
font-size: @content-body-size;
|
||||
|
||||
line-height: @content-line-height;
|
||||
font-size: @content-body-size;
|
||||
#contentSub,
|
||||
#contentSub2 {
|
||||
color: @base-30;
|
||||
font-size: @content-caption-size;
|
||||
}
|
||||
|
||||
#contentSub,
|
||||
#contentSub2 {
|
||||
color: @base-30;
|
||||
font-size: @content-caption-size;
|
||||
}
|
||||
p {
|
||||
line-height: inherit;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: inherit;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
h2 {
|
||||
font-size: @content-h2-size;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: @content-h2-size;
|
||||
}
|
||||
h3 {
|
||||
font-size: @content-h3-size;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: @content-h3-size;
|
||||
}
|
||||
h4 {
|
||||
font-size: @content-h4-size;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: @content-h4-size;
|
||||
}
|
||||
h5 {
|
||||
font-size: @content-h5-size;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: @content-h5-size;
|
||||
}
|
||||
h6 {
|
||||
font-size: @content-h6-size;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: @content-h6-size;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: @color-content-header;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: @color-content-header;
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: @content-margin-top * 3;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: @content-margin-top * 3;
|
||||
}
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p + p {
|
||||
margin-top: @content-margin-top * 2;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p+p {
|
||||
margin-top: @content-margin-top * 2;
|
||||
}
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
h1 + h2,
|
||||
h2 + h3,
|
||||
h3 + h4,
|
||||
h4 + h5,
|
||||
h5 + h6,
|
||||
p,
|
||||
table {
|
||||
margin-top: @content-margin-top;
|
||||
}
|
||||
/* stylelint-enable */
|
||||
|
||||
h1+h2,
|
||||
h2+h3,
|
||||
h3+h4,
|
||||
h4+h5,
|
||||
h5+h6,
|
||||
p,
|
||||
table {
|
||||
margin-top: @content-margin-top;
|
||||
}
|
||||
ul {
|
||||
margin: @content-margin-top 0 0 @content-margin-top * 2;
|
||||
padding: 0;
|
||||
|
||||
ul {
|
||||
margin: @content-margin-top 0 0 @content-margin-top * 2;
|
||||
padding: 0;
|
||||
|
||||
ul {
|
||||
margin: 0 0 0 @content-margin-top * 2;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin: 0 0 0 @content-margin-top * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mw-body #siteSub {
|
||||
display: block;
|
||||
margin: .4rem 0 1.6rem;
|
||||
color: @base-30;
|
||||
font-size: @content-caption-size;
|
||||
display: block;
|
||||
margin: 0.4rem 0 1.6rem;
|
||||
color: @base-30;
|
||||
font-size: @content-caption-size;
|
||||
}
|
||||
|
||||
#mw-wrapper,
|
||||
#footer-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#mw-sidebar-sitename,
|
||||
#lastmod {
|
||||
order: -1;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
#footer {
|
||||
margin-top: 2rem;
|
||||
font-size: @content-monospace-size;
|
||||
color: @base-30;
|
||||
margin-top: 2rem;
|
||||
font-size: @content-monospace-size;
|
||||
color: @base-30;
|
||||
}
|
||||
|
||||
#footer-list {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#sitetitle {
|
||||
margin-top: @content-margin-top;
|
||||
margin-bottom: @content-margin-top / 2;
|
||||
margin-top: @content-margin-top;
|
||||
margin-bottom: @content-margin-top / 2;
|
||||
}
|
||||
|
||||
.mw-wiki-title {
|
||||
color: @base-30;
|
||||
font-size: 1.2rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: @base-30;
|
||||
font-size: 1.2rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
margin: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.infobox {
|
||||
background: @base-100 !important;
|
||||
border: 1px solid @base-30 !important;
|
||||
background: @base-100 !important;
|
||||
border: 1px solid @base-30 !important;
|
||||
}
|
||||
|
||||
.tabbertab {
|
||||
display: block !important;
|
||||
}
|
||||
display: block !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
|
||||
// Import MediaWiki-supplied mixins
|
||||
@import "mediawiki.mixins";
|
||||
@import 'mediawiki.mixins';
|
||||
|
||||
/*
|
||||
* Framework
|
||||
|
|
@ -107,12 +107,12 @@
|
|||
* Transitions
|
||||
*/
|
||||
@transition-color-quick: color 0.2s ease;
|
||||
@transition-transform: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
|
||||
@transition-transform-quick: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1.0);
|
||||
@transition-width: width 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
|
||||
@transition-height: height 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
|
||||
@transition-margin: margin 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
|
||||
@transition-padding: padding 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
|
||||
@transition-transform: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||
@transition-transform-quick: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||
@transition-width: width 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||
@transition-height: height 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||
@transition-margin: margin 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||
@transition-padding: padding 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||
@transition-background-quick: background 0.2s ease;
|
||||
@transition-background: background 0.55s ease;
|
||||
@transition-opacity: opacity 0.55s ease;
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
* `Helvetica, Arial, sans-serif` – (Generic) Web fallback
|
||||
* Note that standard `system-ui` value has resulted in unresolved side-effects in certain OS/language combinations as of now and is therefore not included.
|
||||
*/
|
||||
@fonts: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
|
||||
@fonts: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
|
||||
/**
|
||||
* Citizen font stack
|
||||
*
|
||||
|
|
@ -173,13 +173,13 @@
|
|||
// Wikimedia scale - https://design.wikimedia.org/style-guide/visual-style_typography.html
|
||||
@content-h1-size: 3.2rem * @content-scaling;
|
||||
@content-h2-size: 2.4rem * @content-scaling;
|
||||
@content-h3-size: 2.0rem * @content-scaling;
|
||||
@content-h3-size: 2rem * @content-scaling;
|
||||
@content-h4-size: 1.8rem * @content-scaling;
|
||||
@content-h5-size: 1.6rem * @content-scaling;
|
||||
@content-h6-size: 1.6rem * @content-scaling;
|
||||
@content-body-size: 1.6rem * @content-scaling;
|
||||
@content-lead-paragraph-size: 1.8rem * @content-scaling;
|
||||
@content-quote-primary-size: 2.0rem * @content-scaling;
|
||||
@content-quote-primary-size: 2rem * @content-scaling;
|
||||
@content-quote-secondary-size: 1.4rem * @content-scaling;
|
||||
@content-caption-size: 1.3rem * @content-scaling;
|
||||
@content-small-text-size: 1.3rem * @content-scaling;
|
||||
|
|
@ -201,4 +201,4 @@
|
|||
@screen1: @page-width + @margin-side * 2; // 900px
|
||||
@screen2: @footer-width; // 1290px
|
||||
@screen3: @footer-width + @margin-side * 8; // 1450px
|
||||
@screen4: @footer-width - (@negative-margin * 2); // 1720px
|
||||
@screen4: @footer-width - (@negative-margin * 2); // 1720px
|
||||
|
|
|
|||
|
|
@ -7,78 +7,78 @@
|
|||
@import '../resources/mixins.less';
|
||||
|
||||
.mw-cookiewarning-container {
|
||||
top: unset;
|
||||
right: 0;
|
||||
bottom: @margin-side;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
max-width: @page-width;
|
||||
opacity: 1;
|
||||
background: @base-20;
|
||||
font-size: @content-small-text-size;
|
||||
font-weight: 400;
|
||||
.boxshadow(5);
|
||||
top: unset;
|
||||
right: 0;
|
||||
bottom: @margin-side;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
max-width: @page-width;
|
||||
opacity: 1;
|
||||
background: @base-20;
|
||||
font-size: @content-small-text-size;
|
||||
font-weight: normal;
|
||||
.boxshadow(5);
|
||||
|
||||
.mw-cookiewarning-text {
|
||||
display: flex;
|
||||
line-height: 1.4;
|
||||
.mw-cookiewarning-text {
|
||||
display: flex;
|
||||
line-height: 1.4;
|
||||
|
||||
>* {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
> * {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0;
|
||||
padding: @margin-side * 0.75 @margin-side;
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
}
|
||||
span {
|
||||
margin: 0;
|
||||
padding: @margin-side * 0.75 @margin-side;
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.mw-cookiewarning-dismiss {
|
||||
background: @accent-50;
|
||||
.mw-cookiewarning-dismiss {
|
||||
background: @accent-50;
|
||||
|
||||
&:hover {
|
||||
background: @accent-10;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: @accent-10;
|
||||
}
|
||||
}
|
||||
|
||||
>a {
|
||||
background: @base-10;
|
||||
> a {
|
||||
background: @base-10;
|
||||
|
||||
&:hover {
|
||||
background: @base-0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: @base-0;
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
.mw-cookiewarning-dismiss {
|
||||
margin: 0;
|
||||
padding: @margin-side * 0.75 @margin-side;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
transition: @transition-background-quick;
|
||||
}
|
||||
}
|
||||
a,
|
||||
.mw-cookiewarning-dismiss {
|
||||
margin: 0;
|
||||
padding: @margin-side * 0.75 @margin-side;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
font-weight: normal;
|
||||
line-height: 1.4;
|
||||
transition: @transition-background-quick;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen1) {
|
||||
.mw-cookiewarning-container {
|
||||
max-width: none;
|
||||
bottom: 0;
|
||||
}
|
||||
@media only screen and ( max-width: @screen1 ) {
|
||||
.mw-cookiewarning-container {
|
||||
max-width: none;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mw-cookiewarning-container .mw-cookiewarning-text {
|
||||
flex-wrap: wrap;
|
||||
@media only screen and ( max-width: 480px ) {
|
||||
.mw-cookiewarning-container .mw-cookiewarning-text {
|
||||
flex-wrap: wrap;
|
||||
|
||||
span,
|
||||
a,
|
||||
.mw-cookiewarning-dismiss {
|
||||
padding: @margin-side / 2 @margin-side;
|
||||
}
|
||||
}
|
||||
}
|
||||
span,
|
||||
a,
|
||||
.mw-cookiewarning-dismiss {
|
||||
padding: @margin-side / 2 @margin-side;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,51 +6,50 @@
|
|||
@import '../resources/variables.less';
|
||||
|
||||
.tabber {
|
||||
|
||||
ul.tabbernav {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
font-size: inherit;
|
||||
font-weight: 400;
|
||||
font-family: inherit;
|
||||
letter-spacing: -0.25px;
|
||||
ul.tabbernav {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
font-family: inherit;
|
||||
letter-spacing: -0.25px;
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
display: block;
|
||||
li {
|
||||
padding: 0;
|
||||
display: block;
|
||||
|
||||
&:first-child a {
|
||||
padding-left: 0;
|
||||
}
|
||||
&:first-child a {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.tabberactive a {
|
||||
color: @accent-50;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.tabberactive a {
|
||||
color: @accent-50;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 0;
|
||||
padding: @margin-side / 2;
|
||||
display: block;
|
||||
border: 0;
|
||||
background: 0 !important; // To override hover styles
|
||||
color: @base-50;
|
||||
a {
|
||||
margin: 0;
|
||||
padding: @margin-side / 2;
|
||||
display: block;
|
||||
border: 0;
|
||||
background: 0 !important; // To override hover styles
|
||||
color: @base-50;
|
||||
|
||||
&:hover {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabbertab {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.tabbertab {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-body-content #mw-content-text .mw-parser-output .tabber .tabbernav a:hover {
|
||||
color: @base-30 !important; // Override sigh
|
||||
}
|
||||
color: @base-30 !important; // Override sigh
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
#pt-notifications {
|
||||
&-alert,
|
||||
&-notice {
|
||||
|
||||
.mw-echo-notifications-badge {
|
||||
top: -1000px; // Default was -1005px for some reason
|
||||
margin: 0;
|
||||
|
|
@ -20,7 +19,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
&:before {
|
||||
opacity: 0.6!important; // override all styles
|
||||
opacity: 0.6 !important; // override all styles
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -50,7 +49,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
&:before {
|
||||
transform: rotateZ(20deg);
|
||||
transform: rotateZ( 20deg );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,12 +13,12 @@
|
|||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 0!important;
|
||||
border: 0 !important;
|
||||
.boxshadow(2);
|
||||
}
|
||||
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer {
|
||||
border-color: @base-80!important;
|
||||
border-color: @base-80 !important;
|
||||
}
|
||||
|
||||
.mw-echo-ui-notificationItemWidget {
|
||||
|
|
@ -26,20 +26,20 @@
|
|||
}
|
||||
|
||||
// 500px or below will break the message box, +40px margin
|
||||
@media only screen and (max-width: 540px) {
|
||||
@media only screen and ( max-width: 540px ) {
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
|
||||
left: 0!important;
|
||||
left: 0 !important;
|
||||
|
||||
> .oo-ui-popupWidget-popup {
|
||||
width: auto!important;
|
||||
width: auto !important;
|
||||
|
||||
> .oo-ui-popupWidget-body {
|
||||
width: auto!important;
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .oo-ui-popupWidget-anchor {
|
||||
display: none;
|
||||
}
|
||||
> .oo-ui-popupWidget-anchor {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,26 +7,26 @@
|
|||
@import '../resources/mixins.less';
|
||||
|
||||
.mwe-popups {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
.boxshadow(4);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
.boxshadow(4);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.mwe-popups {
|
||||
background: @dark-bg-50;
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
.mwe-popups {
|
||||
background: @dark-bg-50;
|
||||
|
||||
&.mwe-popups-image-tri:after {
|
||||
border-color: @dark-bg-50;
|
||||
}
|
||||
&.mwe-popups-image-tri:after {
|
||||
border-color: @dark-bg-50;
|
||||
}
|
||||
|
||||
.mwe-popups-container,
|
||||
.mwe-popups-extract {
|
||||
color: @dark-text-90;
|
||||
}
|
||||
.mwe-popups-container,
|
||||
.mwe-popups-extract {
|
||||
color: @dark-text-90;
|
||||
}
|
||||
|
||||
.mwe-popups-extract[dir='ltr']:after {
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), @dark-bg-50 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.mwe-popups-extract[ dir='ltr' ]:after {
|
||||
background-image: linear-gradient( to right, rgba( 255, 255, 255, 0 ), @dark-bg-50 50% );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,60 +7,60 @@
|
|||
@import '../resources/mixins.less';
|
||||
|
||||
.ext-related-articles-card-list {
|
||||
margin-top: 0;
|
||||
padding-top: @content-margin-top; // Give room for shadows and translate
|
||||
overflow: visible; // Show shadow
|
||||
margin-top: 0;
|
||||
padding-top: @content-margin-top; // Give room for shadows and translate
|
||||
overflow: visible; // Show shadow
|
||||
|
||||
.ext-related-articles-card {
|
||||
border: 1px solid @base-80 !important;
|
||||
border-radius: 0 !important;
|
||||
.boxshadow(1);
|
||||
transition: @transition-transform-quick;
|
||||
.ext-related-articles-card {
|
||||
border: 1px solid @base-80 !important;
|
||||
border-radius: 0 !important;
|
||||
.boxshadow(1);
|
||||
transition: @transition-transform-quick;
|
||||
|
||||
&:hover {
|
||||
.boxshadow(3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
&:hover {
|
||||
.boxshadow(3);
|
||||
transform: translateY( -2px );
|
||||
}
|
||||
|
||||
>a:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
> a:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ext-related-articles-card-extract:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 10%;
|
||||
height: 1em;
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 10%;
|
||||
height: 1em;
|
||||
background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 50% );
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.ext-related-articles-card-list {
|
||||
.ext-related-articles-card {
|
||||
border-color: @dark-bg-40 !important;
|
||||
background-color: @dark-bg-30;
|
||||
}
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
.ext-related-articles-card-list {
|
||||
.ext-related-articles-card {
|
||||
border-color: @dark-bg-40 !important;
|
||||
background-color: @dark-bg-30;
|
||||
}
|
||||
|
||||
.ext-related-articles-card-thumb {
|
||||
background-color: @dark-bg-10;
|
||||
}
|
||||
.ext-related-articles-card-thumb {
|
||||
background-color: @dark-bg-10;
|
||||
}
|
||||
|
||||
h3 {
|
||||
&:after {
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0), @dark-bg-30 50%);
|
||||
}
|
||||
h3 {
|
||||
&:after {
|
||||
background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), @dark-bg-30 50% );
|
||||
}
|
||||
|
||||
a {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ext-related-articles-card-extract:after {
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0), @dark-bg-30 50%);
|
||||
}
|
||||
}
|
||||
.ext-related-articles-card-extract:after {
|
||||
background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), @dark-bg-30 50% );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
@import '../resources/variables.less';
|
||||
|
||||
.mw-pt-translate-header {
|
||||
margin: 8px 0 0 ~"calc(-@{page-width} / 2 + 310px)";
|
||||
margin: 8px 0 0 ~'calc(-@{page-width} / 2 + 310px)';
|
||||
width: 90px;
|
||||
position: absolute;
|
||||
border-top: 1px solid currentColor;
|
||||
|
|
@ -26,8 +26,8 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen2) {
|
||||
.mw-pt-translate-header {
|
||||
@media only screen and ( max-width: @screen2 ) {
|
||||
.mw-pt-translate-header {
|
||||
z-index: -1; // Not interactable
|
||||
pointer-events: none; // Not interactable
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@
|
|||
@import '../resources/mixins.less';
|
||||
|
||||
.tux-messagetable-loader {
|
||||
background: transparent!important;
|
||||
box-shadow: none!important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
> span {
|
||||
position: relative!important;
|
||||
position: relative !important;
|
||||
clip: unset;
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
.tux-messagelist,
|
||||
.tux-action-bar,
|
||||
.tux-messagetable-header.floating {
|
||||
margin: 0 @negative-margin!important;
|
||||
margin: 0 @negative-margin !important;
|
||||
}
|
||||
|
||||
.tux-action-bar.floating,
|
||||
|
|
@ -59,18 +59,18 @@
|
|||
}
|
||||
|
||||
.tux-messagelist,
|
||||
.tux-action-bar:not(.floating) {
|
||||
width: auto!important;
|
||||
.tux-action-bar:not( .floating ) {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.tux-messagetable-header {
|
||||
padding: 0; // Reserve spaces for tabs
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
|
||||
&.floating {
|
||||
> div:first-of-type {
|
||||
padding: 0px 20px 10px;
|
||||
padding: 0 20px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -80,6 +80,7 @@
|
|||
&.selected {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @base-50;
|
||||
padding: @margin-side / 2 @margin-side;
|
||||
|
|
@ -97,7 +98,7 @@
|
|||
}
|
||||
|
||||
.more {
|
||||
padding: @margin-side / 2 @margin-side!important;
|
||||
padding: @margin-side / 2 @margin-side !important;
|
||||
|
||||
> ul {
|
||||
margin: 0;
|
||||
|
|
@ -115,7 +116,7 @@
|
|||
|
||||
a {
|
||||
margin: 0;
|
||||
padding: 10px 15px!important;
|
||||
padding: 10px 15px !important;
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -130,7 +131,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen2) {
|
||||
@media only screen and ( max-width: @screen2 ) {
|
||||
#page-tools {
|
||||
margin: 0 auto @margin-side * 2;
|
||||
float: none;
|
||||
|
|
@ -146,14 +147,14 @@
|
|||
.tux-messagelist,
|
||||
.tux-action-bar,
|
||||
.tux-messagetable-header.floating {
|
||||
margin: 0 ~"calc((100vw - @{page-width}) / -2)"!important;
|
||||
margin: 0 ~'calc((100vw - @{page-width}) / -2)' !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen1) {
|
||||
@media only screen and ( max-width: @screen1 ) {
|
||||
.tux-messagelist,
|
||||
.tux-action-bar,
|
||||
.tux-messagetable-header.floating {
|
||||
margin: 0 -@margin-side!important; // fill margin
|
||||
margin: 0 -@margin-side !important; // fill margin
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
#siteSub,
|
||||
#p-actions,
|
||||
#mw-bottombar {
|
||||
display: none!important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.tux-messagetable-header {
|
||||
|
|
|
|||
|
|
@ -7,93 +7,90 @@
|
|||
@import '../resources/mixins.less';
|
||||
|
||||
.mw-pt-languages {
|
||||
display: block;
|
||||
border: 0;
|
||||
width: auto;
|
||||
background: 0;
|
||||
margin: 0;
|
||||
padding: @margin-side 0;
|
||||
display: block;
|
||||
border: 0;
|
||||
width: auto;
|
||||
background: 0;
|
||||
margin: 0;
|
||||
padding: @margin-side 0;
|
||||
}
|
||||
|
||||
.mw-pt-languages-label {
|
||||
display: block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
color: @base-30;
|
||||
background: 0;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
width: auto;
|
||||
|
||||
display: block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
color: @base-30;
|
||||
background: 0;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.mw-pt-languages-list {
|
||||
padding: @content-margin-top 0 0 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: auto;
|
||||
visibility: hidden; // Hide dots
|
||||
padding: @content-margin-top 0 0 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: auto;
|
||||
visibility: hidden; // Hide dots
|
||||
|
||||
>* {
|
||||
visibility: visible;
|
||||
}
|
||||
> * {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-pt-languages-selected,
|
||||
.mw-pt-languages-ui {
|
||||
font-weight: 400;
|
||||
.boxshadow(2) !important;
|
||||
font-weight: normal;
|
||||
.boxshadow(2) !important;
|
||||
|
||||
&:hover {
|
||||
transform: none !important;
|
||||
}
|
||||
&:hover {
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-pt-progress {
|
||||
margin: 0 0 @margin-side / 2 0;
|
||||
padding: @margin-side / 4 @margin-side / 2;
|
||||
display: block;
|
||||
border: 1px solid @base-90;
|
||||
background: @base-90;
|
||||
color: @base-30;
|
||||
font-size: @content-caption-size;
|
||||
.boxshadow(1);
|
||||
transition: @transition-transform-quick,
|
||||
@transition-box-shadow-quick;
|
||||
margin: 0 0 @margin-side / 2 0;
|
||||
padding: @margin-side / 4 @margin-side / 2;
|
||||
display: block;
|
||||
border: 1px solid @base-90;
|
||||
background: @base-90;
|
||||
color: @base-30;
|
||||
font-size: @content-caption-size;
|
||||
.boxshadow(1);
|
||||
transition: @transition-transform-quick, @transition-box-shadow-quick;
|
||||
|
||||
&:hover {
|
||||
.boxshadow(2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
&:hover {
|
||||
.boxshadow(2);
|
||||
transform: translateY( -2px );
|
||||
}
|
||||
}
|
||||
|
||||
.mw-pt-progress--stub {
|
||||
background: @base-90;
|
||||
background: @base-90;
|
||||
}
|
||||
|
||||
.mw-pt-progress--low {
|
||||
background: @red-50;
|
||||
border-color: @red-50;
|
||||
;
|
||||
color: @base-100!important; // bypass visited styles
|
||||
background: @red-50;
|
||||
border-color: @red-50;
|
||||
color: @base-100 !important; // bypass visited styles
|
||||
}
|
||||
|
||||
.mw-pt-progress--med {
|
||||
background: @yellow-50;
|
||||
border-color: @yellow-50;
|
||||
color: @base-100!important; // bypass visited styles
|
||||
background: @yellow-50;
|
||||
border-color: @yellow-50;
|
||||
color: @base-100 !important; // bypass visited styles
|
||||
}
|
||||
|
||||
.mw-pt-progress--high {
|
||||
background: @green-50;
|
||||
border-color: @green-50;
|
||||
color: @base-100!important; // bypass visited styles
|
||||
background: @green-50;
|
||||
border-color: @green-50;
|
||||
color: @base-100 !important; // bypass visited styles
|
||||
}
|
||||
|
||||
.mw-pt-progress--complete {
|
||||
background: @green-30;
|
||||
border-color: @green-30;
|
||||
color: @base-100!important; // bypass visited styles
|
||||
}
|
||||
background: @green-30;
|
||||
border-color: @green-30;
|
||||
color: @base-100 !important; // bypass visited styles
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
// Need important to override
|
||||
.uls-menu {
|
||||
border: 0!important;
|
||||
border: 0 !important;
|
||||
border-radius: 0;
|
||||
.boxshadow(5)!important;
|
||||
}
|
||||
|
|
@ -27,10 +27,10 @@
|
|||
|
||||
// Gotta fix this for mobile
|
||||
.uls-narrow {
|
||||
left: 0!important;
|
||||
width: 100%!important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#uls-settings-block {
|
||||
border-color: @base-80!important;
|
||||
border-color: @base-80 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,25 +7,25 @@
|
|||
|
||||
// Styles for ULS icon
|
||||
#pt-uls a.uls-trigger {
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: @icon-box-size + @icon-padding;
|
||||
height: @header-height;
|
||||
color: transparent; // Hide text
|
||||
opacity: 0.6; // Replicate color of other icons
|
||||
background-size: @icon-box-size;
|
||||
background-position: center;
|
||||
transition: @transition-opacity;
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: @icon-box-size + @icon-padding;
|
||||
height: @header-height;
|
||||
color: transparent; // Hide text
|
||||
opacity: 0.6; // Replicate color of other icons
|
||||
background-size: @icon-box-size;
|
||||
background-position: center;
|
||||
transition: @transition-opacity;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#pt-uls a.uls-trigger {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
#pt-uls a.uls-trigger {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,74 +6,74 @@
|
|||
@import '../resources/variables.less';
|
||||
|
||||
.ve-activated {
|
||||
.mw-header-container {
|
||||
background-color: white;
|
||||
}
|
||||
.mw-header-container {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
#mw-sidebar-sitename {
|
||||
top: @sidebar-sitename-height + @header-height * 2 + @margin-side;
|
||||
}
|
||||
#mw-sidebar-sitename {
|
||||
top: @sidebar-sitename-height + @header-height * 2 + @margin-side;
|
||||
}
|
||||
|
||||
#page-tools {
|
||||
z-index: 1; // Fix collision
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
#page-tools {
|
||||
z-index: 1; // Fix collision
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#mw-bottombar {
|
||||
display: none;
|
||||
}
|
||||
#mw-bottombar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ve-ui-overlay {
|
||||
font-family: @fonts;
|
||||
font-family: @fonts;
|
||||
|
||||
&-global {
|
||||
z-index: 12; // Higher than header
|
||||
}
|
||||
&-global {
|
||||
z-index: 12; // Higher than header
|
||||
}
|
||||
}
|
||||
|
||||
// Fix weird compressed text bug
|
||||
.ve-init-mw-tempWikitextEditorWidget {
|
||||
width: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
// Match animation
|
||||
.ve-init-mw-desktopArticleTarget-toolbar-open>.oo-ui-toolbar-bar {
|
||||
transition: @transition-transform !important;
|
||||
.ve-init-mw-desktopArticleTarget-toolbar-open > .oo-ui-toolbar-bar {
|
||||
transition: @transition-transform !important;
|
||||
}
|
||||
|
||||
// Make toolbar more mobile friendly, well at least I did by best
|
||||
.ve-init-mw-desktopArticleTarget-toolbar {
|
||||
margin: -20px -20px 20px -20px !important; // Bypass @media screen styles
|
||||
margin: -20px -20px 20px -20px !important; // Bypass @media screen styles
|
||||
}
|
||||
|
||||
// Stick with the header
|
||||
.nav-down~.mw-body {
|
||||
.ve-ui-toolbar-floating>.oo-ui-toolbar-bar {
|
||||
transform: translateY(@header-height );
|
||||
}
|
||||
.nav-down ~ .mw-body {
|
||||
.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
|
||||
transform: translateY( @header-height );
|
||||
}
|
||||
}
|
||||
|
||||
.ve-ui-surface-placeholder,
|
||||
.ve-ui-surface .ve-ce-documentNode {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ve-init-mw-desktopArticleTarget .CodeMirror {
|
||||
padding: 0;
|
||||
line-height: @content-line-height; // Lining up syntax highlighter
|
||||
padding: 0;
|
||||
line-height: @content-line-height; // Lining up syntax highlighter
|
||||
}
|
||||
|
||||
.ve-init-mw-desktopArticleTarget .CodeMirror-code *,
|
||||
.ve-init-mw-desktopArticleTarget .ve-ui-mwWikitextSurface .ve-ce-paragraphNode {
|
||||
line-height: @content-line-height; // Lining up syntax highlighter
|
||||
line-height: @content-line-height; // Lining up syntax highlighter
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.ve-activated {
|
||||
.mw-header-container {
|
||||
background-color: @dark-bg-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
.ve-activated {
|
||||
.mw-header-container {
|
||||
background-color: @dark-bg-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,112 +7,109 @@
|
|||
@import '../resources/mixins.less';
|
||||
|
||||
#filetoc {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
border-color: @base-80;
|
||||
transition: @transition-margin,
|
||||
@transition-padding;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
border-color: @base-80;
|
||||
transition: @transition-margin, @transition-padding;
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
display: block;
|
||||
li {
|
||||
padding: 0;
|
||||
display: block;
|
||||
|
||||
a {
|
||||
padding: @margin-side / 2 @margin-side;
|
||||
display: block;
|
||||
transition: @transition-background-quick;
|
||||
a {
|
||||
padding: @margin-side / 2 @margin-side;
|
||||
display: block;
|
||||
transition: @transition-background-quick;
|
||||
|
||||
&:hover {
|
||||
background-color: @base-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: @base-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fullImageLink {
|
||||
margin: 0 @negative-margin;
|
||||
max-width: @footer-width - 10px; // 1280px - image size 4
|
||||
background-color: @base-90;
|
||||
margin: 0 @negative-margin;
|
||||
max-width: @footer-width - 10px; // 1280px - image size 4
|
||||
background-color: @base-90;
|
||||
|
||||
>a {
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
> a {
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
|
||||
>img {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
.boxshadow(1);
|
||||
}
|
||||
}
|
||||
> img {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
.boxshadow(1);
|
||||
}
|
||||
}
|
||||
|
||||
.mw-filepage-resolutioninfo {
|
||||
padding: @margin-side / 2 @margin-side;
|
||||
border: 1px solid @base-80;
|
||||
text-align: center;
|
||||
transition: @transition-margin,
|
||||
@transition-padding;
|
||||
}
|
||||
.mw-filepage-resolutioninfo {
|
||||
padding: @margin-side / 2 @margin-side;
|
||||
border: 1px solid @base-80;
|
||||
text-align: center;
|
||||
transition: @transition-margin, @transition-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.fullMedia {
|
||||
padding: @margin-side / 2 @margin-side;
|
||||
border: 1px solid @base-80;
|
||||
border-top: 0;
|
||||
background-color: @base-90;
|
||||
font-size: smaller;
|
||||
text-align: center;
|
||||
transition: @transition-margin;
|
||||
padding: @margin-side / 2 @margin-side;
|
||||
border: 1px solid @base-80;
|
||||
border-top: 0;
|
||||
background-color: @base-90;
|
||||
font-size: smaller;
|
||||
text-align: center;
|
||||
transition: @transition-margin;
|
||||
|
||||
.mw-mmv-filepage-buttons {
|
||||
margin-top: @margin-side / 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.mw-mmv-filepage-buttons {
|
||||
margin-top: @margin-side / 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen2) {
|
||||
.fullImageLink {
|
||||
margin: 0~"calc((100vw - @{page-width}) / -2)";
|
||||
@media only screen and ( max-width: @screen2 ) {
|
||||
.fullImageLink {
|
||||
/* stylelint-disable unit-no-unknown */
|
||||
margin: 0~'calc((100vw - @{page-width}) / -2)';
|
||||
/* stylelint-enable */
|
||||
|
||||
.mw-filepage-resolutioninfo,
|
||||
.fullMedia {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.mw-filepage-resolutioninfo,
|
||||
.fullMedia {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen1) {
|
||||
@media only screen and ( max-width: @screen1 ) {
|
||||
#filetoc,
|
||||
.fullImageLink,
|
||||
.fullMedia {
|
||||
margin: 0 -@margin-side;
|
||||
}
|
||||
|
||||
#filetoc,
|
||||
.fullImageLink,
|
||||
.fullMedia {
|
||||
margin: 0 -@margin-side;
|
||||
}
|
||||
|
||||
#filetoc {
|
||||
padding: 0 @margin-side;
|
||||
}
|
||||
#filetoc {
|
||||
padding: 0 @margin-side;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
#filetoc,
|
||||
.fullMedia {
|
||||
background-color: @dark-bg-10;
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
|
||||
#filetoc,
|
||||
.fullMedia {
|
||||
background-color: @dark-bg-10;
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
.fullImageLink {
|
||||
background-color: @dark-bg-10;
|
||||
|
||||
.fullImageLink {
|
||||
background-color: @dark-bg-10;
|
||||
|
||||
.mw-filepage-resolutioninfo {
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.mw-filepage-resolutioninfo {
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,59 +7,58 @@
|
|||
@import '../resources/mixins.less';
|
||||
|
||||
ul.gallery {
|
||||
position: relative;
|
||||
margin: @content-margin-top @negative-margin @content-margin-top * 2 !important;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin: @content-margin-top @negative-margin @content-margin-top * 2 !important;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
li.gallerybox {
|
||||
margin: 2px;
|
||||
display: block;
|
||||
margin: 2px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li.gallerybox div.thumb {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li.gallerybox,
|
||||
li.gallerybox>div {
|
||||
width: fit-content !important;
|
||||
height: auto !important;
|
||||
li.gallerybox > div {
|
||||
width: fit-content !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
li.gallerybox,
|
||||
li.gallerybox div,
|
||||
li.gallerybox a.image,
|
||||
li.gallerybox a.image img {
|
||||
transition: @transition-width,
|
||||
@transition-height;
|
||||
transition: @transition-width, @transition-height;
|
||||
}
|
||||
|
||||
div.gallerytext {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen2) {
|
||||
ul.gallery {
|
||||
margin: @content-margin-top 0 @content-margin-top * 2 !important;
|
||||
overflow: hidden; // Hack to avoid viewpoint move
|
||||
}
|
||||
@media only screen and ( max-width: @screen2 ) {
|
||||
ul.gallery {
|
||||
margin: @content-margin-top 0 @content-margin-top * 2 !important;
|
||||
overflow: hidden; // Hack to avoid viewpoint move
|
||||
}
|
||||
|
||||
li.gallerybox,
|
||||
li.gallerybox div,
|
||||
li.gallerybox a.image,
|
||||
li.gallerybox a.image img {
|
||||
width: 100vw !important;
|
||||
height: auto !important;
|
||||
transition: none; // Performance tweaks
|
||||
}
|
||||
li.gallerybox,
|
||||
li.gallerybox div,
|
||||
li.gallerybox a.image,
|
||||
li.gallerybox a.image img {
|
||||
width: 100vw !important;
|
||||
height: auto !important;
|
||||
transition: none; // Performance tweaks
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen1) {
|
||||
ul.gallery {
|
||||
margin: @content-margin-top -@margin-side @content-margin-top * 2 !important;
|
||||
}
|
||||
}
|
||||
@media only screen and ( max-width: @screen1 ) {
|
||||
ul.gallery {
|
||||
margin: @content-margin-top -@margin-side @content-margin-top * 2 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,31 +11,31 @@
|
|||
*/
|
||||
|
||||
table.mw-enhanced-rc {
|
||||
margin: 0 !important;
|
||||
padding: @margin-side / 2 0;
|
||||
border-bottom: 1px solid @base-80;
|
||||
transition: @transition-background-quick;
|
||||
margin: 0 !important;
|
||||
padding: @margin-side / 2 0;
|
||||
border-bottom: 1px solid @base-80;
|
||||
transition: @transition-background-quick;
|
||||
|
||||
&:hover {
|
||||
background-color: @base-90;
|
||||
}
|
||||
&:hover {
|
||||
background-color: @base-90;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-enhanced-rc-nested {
|
||||
margin-top: @margin-side / 4;
|
||||
display: block;
|
||||
margin-top: @margin-side / 4;
|
||||
display: block;
|
||||
|
||||
.mw-tag-markers {
|
||||
margin: @margin-side / 4;
|
||||
}
|
||||
.mw-tag-markers {
|
||||
margin: @margin-side / 4;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
table.mw-enhanced-rc {
|
||||
border-color: @dark-bg-20;
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
table.mw-enhanced-rc {
|
||||
border-color: @dark-bg-20;
|
||||
|
||||
&:hover {
|
||||
background-color: @dark-bg-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: @dark-bg-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,87 +10,86 @@
|
|||
*/
|
||||
|
||||
#siteSub {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.rcoptions {
|
||||
margin: @content-margin-top * 2 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: @content-monospace-size;
|
||||
color: @base-20;
|
||||
margin: @content-margin-top * 2 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: @content-monospace-size;
|
||||
color: @base-20;
|
||||
|
||||
legend {
|
||||
display: none;
|
||||
}
|
||||
legend {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-changeslist {
|
||||
h4 {
|
||||
top: 0;
|
||||
border-top: 2px solid currentColor;
|
||||
color: @base-50 !important;
|
||||
padding: @margin-side / 2 0 !important;
|
||||
font-size: @content-caption-size !important;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
font-family: @fonts !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
h4 {
|
||||
top: 0;
|
||||
border-top: 2px solid currentColor;
|
||||
color: @base-50 !important;
|
||||
padding: @margin-side / 2 0 !important;
|
||||
font-size: @content-caption-size !important;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
font-family: @fonts !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.comment {
|
||||
margin-top: @content-margin-top / 2;
|
||||
display: block;
|
||||
color: @base-30;
|
||||
font-size: @content-monospace-size;
|
||||
}
|
||||
.comment {
|
||||
margin-top: @content-margin-top / 2;
|
||||
display: block;
|
||||
color: @base-30;
|
||||
font-size: @content-monospace-size;
|
||||
}
|
||||
|
||||
.mw-tag-markers {
|
||||
margin-top: @content-margin-top / 2;
|
||||
display: flex;
|
||||
visibility: hidden; // Hide other stuff
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
.mw-tag-markers {
|
||||
margin-top: @content-margin-top / 2;
|
||||
display: flex;
|
||||
visibility: hidden; // Hide other stuff
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
|
||||
.mw-tag-marker {
|
||||
visibility: visible;
|
||||
order: -1;
|
||||
margin-right: @margin-side / 2;
|
||||
padding: @margin-side / 4 @margin-side / 2;
|
||||
display: block;
|
||||
border: 1px solid @base-90;
|
||||
background-color: @base-90;
|
||||
color: @base-30;
|
||||
font-size: @content-caption-size;
|
||||
}
|
||||
}
|
||||
.mw-tag-marker {
|
||||
visibility: visible;
|
||||
order: -1;
|
||||
margin-right: @margin-side / 2;
|
||||
padding: @margin-side / 4 @margin-side / 2;
|
||||
display: block;
|
||||
border: 1px solid @base-90;
|
||||
background-color: @base-90;
|
||||
color: @base-30;
|
||||
font-size: @content-caption-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.rcoptions {
|
||||
color: @dark-text-90;
|
||||
}
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
.rcoptions {
|
||||
color: @dark-text-90;
|
||||
}
|
||||
|
||||
.mw-changeslist {
|
||||
h4 {
|
||||
color: @dark-text-60 !important;
|
||||
}
|
||||
.mw-changeslist {
|
||||
h4 {
|
||||
color: @dark-text-60 !important;
|
||||
}
|
||||
|
||||
&-legend {
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
&-legend {
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
.comment {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
|
||||
.mw-tag-markers {
|
||||
|
||||
.mw-tag-marker {
|
||||
border-color: @dark-bg-10;
|
||||
background-color: @dark-bg-10;
|
||||
color: @dark-text-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mw-tag-markers {
|
||||
.mw-tag-marker {
|
||||
border-color: @dark-bg-10;
|
||||
background-color: @dark-bg-10;
|
||||
color: @dark-text-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,6 @@
|
|||
/* Special:Search */
|
||||
.search-types {
|
||||
ul {
|
||||
margin: 0!important; // Cancel out ul margin from common
|
||||
margin: 0 !important; // Cancel out ul margin from common
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
font-size: @ui-menu-text;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 560px) {
|
||||
@media only screen and ( max-width: 560px ) {
|
||||
.mw-mmv-image-metadata-links-column {
|
||||
width: auto; // Fix mobile bouncing
|
||||
float: none;
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
.mw-mmv-post-image {
|
||||
background-color: @dark-bg-0;
|
||||
color: @dark-text-100;
|
||||
|
|
@ -52,4 +52,4 @@
|
|||
.mw-mmv-image-links li {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,47 +18,47 @@
|
|||
*/
|
||||
|
||||
.oo-ui-popupWidget-popup {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
.boxshadow(4);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
.boxshadow(4);
|
||||
}
|
||||
|
||||
.oo-ui-buttonElement > .oo-ui-buttonElement-button {
|
||||
border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
|
||||
border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
|
||||
background-color: @base-90;
|
||||
border-color: @base-90;
|
||||
background-color: @base-90;
|
||||
border-color: @base-90;
|
||||
|
||||
&:hover {
|
||||
border-color: @base-100;
|
||||
.boxshadow(3);
|
||||
}
|
||||
&:hover {
|
||||
border-color: @base-100;
|
||||
.boxshadow(3);
|
||||
}
|
||||
}
|
||||
|
||||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
|
||||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active:focus,
|
||||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
|
||||
border-color: #c8ccd1;
|
||||
border-color: #c8ccd1;
|
||||
}
|
||||
|
||||
.oo-ui-textInputWidget input,
|
||||
.oo-ui-textInputWidget textarea {
|
||||
border-color: @base-80;
|
||||
border-radius: 0;
|
||||
.boxshadow(1);
|
||||
border-color: @base-80;
|
||||
border-radius: 0;
|
||||
.boxshadow(1);
|
||||
}
|
||||
|
||||
.oo-ui-textInputWidget.oo-ui-widget-enabled input,
|
||||
.oo-ui-textInputWidget.oo-ui-widget-enabled textarea {
|
||||
.boxshadow(1);
|
||||
.boxshadow(1);
|
||||
|
||||
&:focus {
|
||||
.boxshadow(3);
|
||||
}
|
||||
&:focus {
|
||||
.boxshadow(3);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,20 +18,20 @@
|
|||
*/
|
||||
|
||||
.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
|
||||
border: 0;
|
||||
.boxshadow(3);
|
||||
border: 0;
|
||||
.boxshadow(3);
|
||||
}
|
||||
|
||||
.oo-ui-toolbar-bar .oo-ui-toolbar-bar {
|
||||
box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.oo-ui-toolGroup,
|
||||
.oo-ui-toolbar-actions .oo-ui-toolGroup {
|
||||
border-color: @base-80;
|
||||
}
|
||||
border-color: @base-80;
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
|
||||
border: 0;
|
||||
.boxshadow(3);
|
||||
border: 0;
|
||||
.boxshadow(3);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,10 +18,10 @@
|
|||
*/
|
||||
|
||||
.oo-ui-bookletLayout > .oo-ui-menuLayout-menu {
|
||||
border-color: @base-80;
|
||||
border-color: @base-80;
|
||||
}
|
||||
|
||||
.oo-ui-searchWidget-query {
|
||||
border: 0;
|
||||
.boxshadow(2);
|
||||
border: 0;
|
||||
.boxshadow(2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,30 +18,30 @@
|
|||
*/
|
||||
|
||||
.oo-ui-dialog-content > .oo-ui-window-head {
|
||||
z-index: 3; // To show the shadow
|
||||
.boxshadow(2);
|
||||
z-index: 3; // To show the shadow
|
||||
.boxshadow(2);
|
||||
}
|
||||
|
||||
.oo-ui-processDialog-content .oo-ui-window-body {
|
||||
outline: 0;
|
||||
border-bottom: 1px solid @base-80;
|
||||
outline: 0;
|
||||
border-bottom: 1px solid @base-80;
|
||||
}
|
||||
|
||||
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
.boxshadow(5);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
.boxshadow(5);
|
||||
}
|
||||
|
||||
.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonElement-framed,
|
||||
.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-framed,
|
||||
.oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonElement-framed {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
|
||||
> a.oo-ui-buttonElement-button {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
> a.oo-ui-buttonElement-button {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue