mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-28 08:10:45 +00:00
Merge pull request #278 from StarCitizenTools/dev
Minor fixes and improvements
This commit is contained in:
commit
51689fafc0
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -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% );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 );
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue