Merge pull request #278 from StarCitizenTools/dev

Minor fixes and improvements
This commit is contained in:
alistair3149 2021-03-01 13:00:47 -05:00 committed by GitHub
commit 51689fafc0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 164 additions and 117 deletions

View file

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

View file

@ -6,20 +6,85 @@
@import '../../../resources/variables.less'; @import '../../../resources/variables.less';
@import '../../../resources/mixins.less'; @import '../../../resources/mixins.less';
.mw-mmv-image-metadata { .mw-mmv-post-image {
border-color: @base-80; background-color: var( --background-color-dp-04 );
color: var( --color-base--emphasized );
} }
.mw-mmv-stripe-button.mw-mmv-description-page-button, .mw-mmv-image-metadata {
.mw-mmv-stripe-button.mw-mmv-description-page-button:active, border-color: var( --border-color-base );
.mw-mmv-stripe-button.mw-mmv-description-page-button:visited { background-color: var( --background-color-framed );
padding: 18px 16px; color: var( --color-base );
margin: 0; }
border-radius: 0;
.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; 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 { .mw-mmv-image-metadata-links-column {
width: auto; // Fix mobile bouncing width: auto; // Fix mobile bouncing
float: none; 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;
}
}

View file

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

View file

@ -13,9 +13,12 @@
.ra-read-more { .ra-read-more {
padding: @margin-side; padding: @margin-side;
// In line with catlink styles
h2 { h2 {
padding: 0; padding: 0;
margin: 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;
} }
} }

View file

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

View file

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