mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-24 22:35:45 +00:00
Merge pull request #139 from StarCitizenTools/dev
Clean up common stylesheets
This commit is contained in:
alistair3149
GitHub
commit
6c120efad7
|
|
@ -219,18 +219,6 @@ figcaption,
|
|||
}
|
||||
}
|
||||
|
||||
.firstHeading {
|
||||
margin: 0;
|
||||
color: @base-10;
|
||||
overflow-wrap: break-word; // Break word instead of overflow if title is too long
|
||||
}
|
||||
|
||||
#siteSub {
|
||||
display: block;
|
||||
margin: 0.4rem 0 1.6rem;
|
||||
color: @base-30;
|
||||
}
|
||||
|
||||
.mw-indicators {
|
||||
float: right;
|
||||
line-height: @content-line-height;
|
||||
|
|
@ -245,154 +233,6 @@ figcaption,
|
|||
*display: inline; // stylelint-disable declaration-block-no-duplicate-properties
|
||||
}
|
||||
|
||||
.firstHeading,
|
||||
#siteSub {
|
||||
.content-center;
|
||||
}
|
||||
|
||||
#contentSub,
|
||||
#contentSub2 {
|
||||
color: @base-30;
|
||||
}
|
||||
|
||||
.mw-body-content {
|
||||
position: relative;
|
||||
.content-center;
|
||||
z-index: 0;
|
||||
|
||||
p {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: @color-content-header;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: @content-margin-top * 3;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p + p {
|
||||
margin-top: @content-margin-top * 2;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
ul {
|
||||
margin: 0 0 0 @content-margin-top * 2;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
margin: @content-margin-top 0 0 @content-margin-top * 3;
|
||||
|
||||
ol {
|
||||
margin: 0 0 0 @content-margin-top * 3;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a.image {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: fit-content; // Get rid of extra pixels from thumbinner
|
||||
|
||||
img {
|
||||
filter: none;
|
||||
transition: @transition-filter, @transition-transform-quick;
|
||||
|
||||
&.lazy {
|
||||
display: block;
|
||||
background-color: @base-90;
|
||||
filter: blur( 8px );
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#mw-content-text {
|
||||
.mw-parser-output {
|
||||
.mw-headline {
|
||||
order: -1; // Make sure that header is the first
|
||||
}
|
||||
|
||||
& > h1,
|
||||
& > h2,
|
||||
& > h3,
|
||||
& > h4,
|
||||
& > h5,
|
||||
& > h6 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mw-editsection {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
transform: ~'translateX(calc(-100% - @{margin-side}))';
|
||||
|
||||
a {
|
||||
.resource-loader-icon-link-small;
|
||||
padding: @margin-side / 4;
|
||||
opacity: @opacity-icon;
|
||||
transition: @transition-opacity;
|
||||
text-indent: -9999px; // Hide text
|
||||
background: 0 !important; // Cancel above styles
|
||||
|
||||
&:before {
|
||||
.resource-loader-icon;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
opacity: @opacity-icon-active;
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plainlist ol,
|
||||
.plainlist ul {
|
||||
line-height: inherit;
|
||||
|
|
@ -456,22 +296,6 @@ figcaption,
|
|||
color: @dark-color-link-new !important;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
|
||||
.mw-body-content #contentSub,
|
||||
.mw-body-content #contentSub2,
|
||||
.mw-body #siteSub {
|
||||
color: @dark-text-80 !important;
|
||||
}
|
||||
|
||||
.mw-editsection > a:before {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,25 @@
|
|||
.firstHeading {
|
||||
margin: 0;
|
||||
color: @base-10;
|
||||
overflow-wrap: break-word; // Break word instead of overflow if title is too long
|
||||
}
|
||||
|
||||
#siteSub {
|
||||
display: block;
|
||||
margin: 0.4rem 0 1.6rem;
|
||||
color: @base-30;
|
||||
}
|
||||
|
||||
.firstHeading,
|
||||
#siteSub {
|
||||
.content-center;
|
||||
}
|
||||
|
||||
#contentSub,
|
||||
#contentSub2 {
|
||||
color: @base-30;
|
||||
}
|
||||
|
||||
#mw-content-text {
|
||||
/*
|
||||
* Interal link styles
|
||||
|
|
@ -66,6 +88,130 @@
|
|||
margin-right: @negative-margin / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-parser-output {
|
||||
.mw-headline {
|
||||
order: -1; // Make sure that header is the first
|
||||
}
|
||||
|
||||
& > h1,
|
||||
& > h2,
|
||||
& > h3,
|
||||
& > h4,
|
||||
& > h5,
|
||||
& > h6 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mw-editsection {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
transform: ~'translateX(calc(-100% - @{margin-side}))';
|
||||
|
||||
a {
|
||||
.resource-loader-icon-link-small;
|
||||
padding: @margin-side / 4;
|
||||
opacity: @opacity-icon;
|
||||
transition: @transition-opacity;
|
||||
text-indent: -9999px; // Hide text
|
||||
background: 0 !important; // Cancel above styles
|
||||
|
||||
&:before {
|
||||
.resource-loader-icon;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
opacity: @opacity-icon-active;
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mw-body-content {
|
||||
position: relative;
|
||||
.content-center;
|
||||
z-index: 0;
|
||||
|
||||
p {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: @color-content-header;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: @content-margin-top * 3;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p + p {
|
||||
margin-top: @content-margin-top * 2;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
ul {
|
||||
margin: 0 0 0 @content-margin-top * 2;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
margin: @content-margin-top 0 0 @content-margin-top * 3;
|
||||
|
||||
ol {
|
||||
margin: 0 0 0 @content-margin-top * 3;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a.image {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: fit-content; // Get rid of extra pixels from thumbinner
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @screen0 ) {
|
||||
|
|
@ -177,3 +323,21 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
.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 {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
|
||||
.mw-body-content #contentSub,
|
||||
.mw-body-content #contentSub2,
|
||||
.mw-body #siteSub {
|
||||
color: @dark-text-80 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,12 +7,11 @@
|
|||
@import 'common/common.less';
|
||||
@import 'common/content.less';
|
||||
@import 'common/typography.less';
|
||||
@import 'common/scrollbar.less';
|
||||
@import 'common/reducemotion.less';
|
||||
@import 'common/catlinks.less';
|
||||
@import 'common/hacks.less';
|
||||
@import 'common/toc.less';
|
||||
@import 'common/wikitable.less';
|
||||
@import 'common/hacks.less';
|
||||
@import 'common/scrollbar.less';
|
||||
@import 'common/reducemotion.less';
|
||||
|
||||
// Components
|
||||
@import 'Header.less';
|
||||
|
|
@ -21,6 +20,7 @@
|
|||
@import 'Pagetools.less';
|
||||
@import 'Menu.less';
|
||||
@import 'Sidebar.less';
|
||||
@import 'Catlinks.less';
|
||||
@import 'Pagelinks.less';
|
||||
@import 'Footer.less';
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue