From 520b80132efa61ff9da5d3a9115f29ab1647e603 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Fri, 12 Jun 2020 01:43:12 -0400 Subject: [PATCH] Move Cite-related styles outside of common --- .../skins.citizen.styles/common/common.less | 189 ++++++++---------- .../common/typography.less | 7 +- skin.json | 2 + .../extensions/Cite/ext.cite.styles.less | 34 ++++ 4 files changed, 119 insertions(+), 113 deletions(-) create mode 100644 skinStyles/extensions/Cite/ext.cite.styles.less diff --git a/resources/skins.citizen.styles/common/common.less b/resources/skins.citizen.styles/common/common.less index 255c470e..6d1204ac 100644 --- a/resources/skins.citizen.styles/common/common.less +++ b/resources/skins.citizen.styles/common/common.less @@ -225,6 +225,36 @@ figcaption, color: @base-30; } +.thumb { + overflow: hidden; + + > .thumbinner { + > a { + transition: @transition-box-shadow-quick !important; + + &:hover:not( .lazy ):not( .new ) { + background: 0 !important; + .boxshadow(2); + + img { + transform: scale( 1.1 ); + } + } + + &:before { + content: none; + } + + &.new { + padding: @margin-side / 2; + display: block; + background-color: @base-80; + transition: @transition-background-quick, @transition-color-quick !important; + } + } + } +} + .mw-body { .firstHeading { margin: 0; @@ -268,58 +298,6 @@ figcaption, .content-center; z-index: 0; - #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; - } - } - } - } - p { overflow-wrap: break-word; } @@ -382,53 +360,6 @@ figcaption, vertical-align: middle; } - .mw-references-wrap { - margin: @content-margin-top 0 0 0; - color: @base-30; - - &.mw-references-columns { - margin: @content-margin-top @negative-margin 0 @negative-margin; - } - - .references { - margin: 0 @content-margin-top * 2; - - li { - margin-bottom: @content-margin-top / 4; - } - } - } - - .thumb { - overflow: hidden; - - > .thumbinner { - > a { - transition: @transition-box-shadow-quick !important; - - &:hover:not( .lazy ):not( .new ) { - background: 0 !important; - .boxshadow(2); - - img { - transform: scale( 1.1 ); - } - } - - &:before { - content: none; - } - - &.new { - padding: @margin-side / 2; - display: block; - background-color: @base-80; - transition: @transition-background-quick, @transition-color-quick !important; - } - } - } - } - a.image { display: block; overflow: hidden; @@ -448,6 +379,58 @@ figcaption, } } +#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; + } + } + } +} + // Namespace button #p-namespaces { position: relative; @@ -518,12 +501,4 @@ figcaption, #p-namespaces { margin: 0~'calc((100vw - @{page-width}) / -2)'; } - - .mw-body-content { - .mw-references-wrap { - &.mw-references-columns { - margin: @content-margin-top 0 0 0; - } - } - } } diff --git a/resources/skins.citizen.styles/common/typography.less b/resources/skins.citizen.styles/common/typography.less index c94c1e61..3f8f4a52 100644 --- a/resources/skins.citizen.styles/common/typography.less +++ b/resources/skins.citizen.styles/common/typography.less @@ -53,8 +53,7 @@ dt { } sub, -sup, -span.reference { +sup { font-size: 80%; } @@ -95,10 +94,6 @@ figcaption, font-weight: normal; } -.mw-references-wrap { - font-size: @content-small-text-size; -} - .mw-body { // h1's can exist outside of mw-body-content so some heading styles // need to be defined in mw-body as well diff --git a/skin.json b/skin.json index 1c2db85e..dab656b6 100644 --- a/skin.json +++ b/skin.json @@ -353,6 +353,8 @@ "+ext.advancedSearch.initialstyles": "skinStyles/extensions/AdvancedSearch/ext.advancedSearch.initialstyles.less", "+ext.advancedSearch.styles": "skinStyles/extensions/AdvancedSearch/ext.advancedSearch.styles.less", + "+ext.cite.styles": "skinStyles/extensions/Cite/ext.cite.styles.less", + "+ext.echo.styles.badge": "skinStyles/extensions/Echo/ext.echo.styles.badge.less", "+ext.echo.ui": "skinStyles/extensions/Echo/ext.echo.ui.less", diff --git a/skinStyles/extensions/Cite/ext.cite.styles.less b/skinStyles/extensions/Cite/ext.cite.styles.less new file mode 100644 index 00000000..0079c194 --- /dev/null +++ b/skinStyles/extensions/Cite/ext.cite.styles.less @@ -0,0 +1,34 @@ +/* + * Citizen - Cite styles + * https://starcitizen.tools +*/ + +@import '../../../resources/variables.less'; + +.mw-references-wrap { + margin: @content-margin-top 0 0 0; + color: @base-30; + font-size: @content-small-text-size; +} + +.mw-references-columns { + margin: @content-margin-top @negative-margin 0 @negative-margin; +} + +.references { + margin: 0 @content-margin-top * 2; + + li { + margin-bottom: @content-margin-top / 4; + } +} + +span.reference { + font-size: 80%; +} + +@media ( max-width: @screen2 ) { + .mw-references-columns { + margin: @content-margin-top 0 0 0; + } +} \ No newline at end of file