StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-24 06:24:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #278 from StarCitizenTools/dev

Browse source 
Minor fixes and improvements
This commit is contained in:
alistair3149 2021-03-01 13:00:47 -05:00 committed by GitHub
parent c6dc92c1aa 85a692c93e
commit 51689fafc0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 164 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
resources/skins.citizen.styles/Catlinks.less
View file

@ -7,10 +7,9 @@
> a {
display: block;
color: @color-content-caption;
font-size: @content-caption-size;
letter-spacing: 1px;
text-transform: uppercase;
color: var( --color-base--subtle );
font-size: @ui-menu-text;
letter-spacing: 0.75px;
}
> ul {
@ -55,4 +54,8 @@
}
}
}
.mw-hidden-cats-hidden {
display: none;
}
}

103
skinStyles/extensions/MultimediaViewer/mmv.less
View file

@ -6,20 +6,85 @@
@import '../../../resources/variables.less';
@import '../../../resources/mixins.less';
.mw-mmv-image-metadata {
border-color: @base-80;
.mw-mmv-post-image {
background-color: var( --background-color-dp-04 );
color: var( --color-base--emphasized );
}
.mw-mmv-stripe-button.mw-mmv-description-page-button,
.mw-mmv-stripe-button.mw-mmv-description-page-button:active,
.mw-mmv-stripe-button.mw-mmv-description-page-button:visited {
padding: 18px 16px;
margin: 0;
border-radius: 0;
.mw-mmv-image-metadata {
border-color: var( --border-color-base );
background-color: var( --background-color-framed );
color: var( --color-base );
}
.mw-mmv-credit,
.mw-mmv-image-links li {
color: var( --color-base--subtle );
}
.mw-mmv-stripe-button.mw-mmv-description-page-button {
margin: 11px var( --padding-page );
font-size: @ui-menu-text;
}
@media only screen and ( max-width: 560px ) {
.mw-mmv-title-para .mw-mmv-ttf-ellipsis {
background-color: var( --background-color-dp-04 );
box-shadow: none;
}
.mw-mmv-ttf-container .mw-mmv-ttf-ellipsis:before {
background-image: linear-gradient( to right, rgba( 255, 255, 255, 0 ) 0%, var( --background-color-dp01 ) 100% ) !important;
}
.mw-mmv-dialog {
background-color: var( --background-color-dp-08 );
.mw-mmv-dialog-down-arrow {
background-color: var( --background-color-dp-08 );
}
}
.mw-mmv-reuse-dialog .mw-mmv-reuse-tabs {
border-color: var( --border-color-base );
}
.mw-mmv-options-dialog-header {
color: var( --color-base--emphasized );
}
.mw-mmv-options-text-header {
color: var( --color-base );
}
.mw-mmv-options-text-body {
color: var( --color-base--subtle );
}
.mw-mmv-download-dialog .mw-mmv-dialog-down-arrow {
background-color: var( --background-color-framed );
}
.mw-mmv-download-pane {
.mw-mmv-download-area .mw-mmv-download-preview-link {
color: var( --color-base--subtle );
}
.mw-mmv-download-attribution {
background-color: var( --background-color-framed );
color: var( --color-base );
&:hover {
background-color: var( --background-color-framed--hover );
color: var( --color-base--emphasized );
}
&-attribution-cta-invite {
color: var( --color-base--subtle );
}
}
}
@media only screen and ( max-width: @width-breakpoint-tablet ) {
.mw-mmv-image-metadata-links-column {
width: auto; // Fix mobile bouncing
float: none;
@ -33,23 +98,3 @@
}
}
}
.skin-citizen-dark {
.mw-mmv-post-image {
background-color: @dark-bg-0;
color: @dark-text-100;
}
.mw-mmv-image-metadata {
border-color: @dark-bg-20;
background-color: @dark-bg-10;
}
.mw-mmv-credit {
color: @dark-text-90;
}
.mw-mmv-image-links li {
color: @dark-text-80;
}
}

45
skinStyles/extensions/RelatedArticles/ext.relatedArticles.cards.less
View file

@ -11,9 +11,13 @@
padding-top: @content-margin-top; // Give room for shadows and translate
margin-top: 0;
h3:after {
background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), var( --background-color-dp-04 ) 50% );
}
.ext-related-articles-card {
border: 1px solid @base-80 !important;
border-radius: 0 !important;
border-color: var( --border-color-base ) !important;
background-color: var( --background-color-dp-04 );
transition: @transition-transform-quick;
.boxshadow(1);
@ -26,6 +30,14 @@
box-shadow: none;
}
}
.ext-related-articles-card-thumb {
background-color: var( --background-color-framed );
}
.ext-related-articles-card-extract {
color: var( --color-base--subtle );
}
}
.ext-related-articles-card-extract:after {
@ -34,33 +46,6 @@
bottom: 0;
width: 10%;
height: 1em;
background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 50% );
background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), var( --background-color-dp-04 ) 50% );
content: '';
}
.skin-citizen-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;
}
h3 {
&:after {
background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), @dark-bg-30 50% );
}
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% );
}
}

5
skinStyles/extensions/RelatedArticles/ext.relatedArticles.readMore.less
View file

@ -13,9 +13,12 @@
.ra-read-more {
padding: @margin-side;
// In line with catlink styles
h2 {
padding: 0;
margin: 0;
font-size: @content-caption-size; // In line with other styles
color: var( --color-base--subtle );
font-size: @ui-menu-text;
letter-spacing: 0.75px;
}
}

94
skinStyles/mediawiki/ui/mediawiki.ui.components.button.less
View file

@ -5,68 +5,82 @@
@import '../../../resources/variables.less';
.skin-citizen-dark {
.mw-ui-button {
border-color: @dark-bg-50;
background-color: @dark-bg-10;
color: @dark-text-90;
.mw-ui-button {
background-color: var( --background-color-framed );
color: var( --color-base );
&:visited {
color: @dark-text-90;
}
&.mw-ui-quiet,
&.mw-ui-quiet.mw-ui-progressive,
&.mw-ui-quiet.mw-ui-destructive {
color: var( --color-base );
&:hover {
border-color: @dark-bg-50;
background-color: @dark-bg-0;
color: @dark-text-80;
background-color: var( --background-color-quiet--hover );
color: var( --color-base--emphasized );
}
&:active {
background-color: var( --background-color-quiet--active );
color: var( --color-base--subtle );
}
&:focus {
background-color: @dark-bg-0;
color: @dark-text-90;
color: var( --color-base );
}
&:active,
&.is-on {
border-color: @dark-bg-60;
background-color: @dark-bg-30;
color: @dark-text-100;
&:disabled,
&:disabled:hover,
&:disabled:active {
color: var( --color-base--subtle );
}
}
&.mw-ui-progressive {
background-color: var( --color-primary );
&:hover {
background-color: var( --color-primary--hover );
}
&:disabled {
border-color: @dark-bg-30 !important;
background-color: @dark-bg-30 !important;
color: @dark-text-100 !important;
&:hover,
&:active {
border-color: @dark-bg-20;
background-color: @dark-bg-20;
color: @dark-text-90;
}
&:active {
background-color: var( --color-primary--active );
}
&.mw-ui-quiet,
&.mw-ui-quiet.mw-ui-progressive,
&.mw-ui-quiet.mw-ui-destructive {
color: @dark-text-90;
&:focus {
background-color: var( --color-primary );
}
&.mw-ui-quiet {
color: var( --color-primary );
&:hover {
color: @dark-text-80;
color: var( --color-primary--hover );
}
&:active {
color: @dark-text-100;
color: var( --color-primary--active );
}
&:focus {
color: @dark-text-90;
color: var( --color-primary );
}
}
}
&.mw-ui-destructive {
&.mw-ui-quiet {
color: var( --color-destructive );
&:hover {
color: var( --color-destructive--hover );
}
&:disabled,
&:disabled:hover,
&:disabled:active {
color: @dark-text-70;
&:active {
color: var( --color-destructive--active );
}
&:focus {
color: var( --color-destructive );
}
}
}

23
skinStyles/mediawiki/ui/mediawiki.ui.components.input.less
View file

@ -5,20 +5,17 @@
@import '../../../resources/variables.less';
.skin-citizen-dark {
.mw-ui-input {
border: 1px solid @dark-bg-50;
background-color: @dark-bg-0;
box-shadow: inset 0 0 0 0.1em @dark-bg-0;
color: @dark-text-100;
.mw-ui-input {
border: 1px solid var( --border-color-input );
background-color: var( --background-color-input );
color: var( --color-base );
&:hover {
border-color: @dark-bg-60;
}
&:hover {
border-color: var( --border-color-input--hover );
}
&:disabled {
border-color: @dark-bg-20;
color: @dark-text-70;
}
&:disabled {
border-color: var( --background-color-framed--active );
color: var( --color-base--subtle );
}
}