From 77bd2e0bea7fb09be39603d4367fe9cac1a1223d Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Thu, 6 Feb 2020 14:44:28 -0500 Subject: [PATCH] Figure caption and blockquote styles update --- resources/components/common.less | 1725 +++++++++++++++--------------- resources/variables.less | 12 +- 2 files changed, 883 insertions(+), 854 deletions(-) diff --git a/resources/components/common.less b/resources/components/common.less index 6a740c9c..a8cc6d04 100644 --- a/resources/components/common.less +++ b/resources/components/common.less @@ -9,49 +9,49 @@ * Framework */ html { - font-size: @html-font-size; - scroll-padding-top: @header-height + @margin-side; // fixed header offset, supported by major browsers - scroll-behavior: smooth; // not supported by IE, Edge, Safari, and Opera, use JQuery as fallback + font-size: @html-font-size; + scroll-padding-top: @header-height + @margin-side; // fixed header offset, supported by major browsers + scroll-behavior: smooth; // not supported by IE, Edge, Safari, and Opera, use JQuery as fallback } html, body { - min-height: 100%; - margin: 0; - padding: 0; - background: @base-100; - color: @color-content-text; - font-family: @fonts; - // font-smoothing: antialiased; - // -webkit-font-smoothing: antialiased; /* Chrome, Safari */ - // -moz-osx-font-smoothing: grayscale; /* Firefox */ + min-height: 100%; + margin: 0; + padding: 0; + background: @base-100; + color: @color-content-text; + font-family: @fonts; + // font-smoothing: antialiased; + // -webkit-font-smoothing: antialiased; /* Chrome, Safari */ + // -moz-osx-font-smoothing: grayscale; /* Firefox */ } table { - // TEMP solution to fix overflow - display: block; - max-width: 100vw; - overflow: auto; + // TEMP solution to fix overflow + display: block; + max-width: 100vw; + overflow: auto; } hr { - display: none; + display: none; } ul { - list-style-type: square; + list-style-type: square; } ul, ol { - padding: 0; + padding: 0; } p, ul, ol, dl { - margin: @content-margin-top 0 0 0; + margin: @content-margin-top 0 0 0; } pre, @@ -60,139 +60,156 @@ tt, kbd, samp, .mw-code { - font-family: @fonts-monospace; - font-size: @content-monospace-size; + font-family: @fonts-monospace; + font-size: @content-monospace-size; } pre, code, .mw-code { - color: @base-0; - background-color: @base-90; - border: 1px solid @base-80; + color: @base-0; + background-color: @base-90; + border: 1px solid @base-80; } code { - padding: 1px 4px; + padding: 1px 4px; } pre, .mw-code { - padding: 1rem; - /* Wrap lines in overflow. T2260, T103780 */ - white-space: pre-wrap; + padding: 1rem; + /* Wrap lines in overflow. T2260, T103780 */ + white-space: pre-wrap; } cite { - font-style: inherit; + font-style: inherit; } input { - font-family: @fonts; + font-family: @fonts; } fieldset { - border: 1px solid @base-80; - color: @base-30; - font-size: @content-monospace-size; - margin: @content-margin-top 0; - padding: @content-margin-top / 2 @margin-side; + border: 1px solid @base-80; + color: @base-30; + font-size: @content-monospace-size; + margin: @content-margin-top 0; + padding: @content-margin-top / 2 @margin-side; } -fieldset > table { - margin-top: 0 !important; +fieldset>table { + margin-top: 0 !important; } legend { - font-weight: bold; - color: @base-20; - margin: 0; - padding: 4px; + font-weight: bold; + color: @base-20; + margin: 0; + padding: 4px; } textarea { - width: 100%; + width: 100%; +} + +blockquote { + margin: @content-margin-top * 2 * @content-scaling 0 0; + padding: 0 @content-margin-top * 4 * @content-scaling; + color: @base-30; + font-family: @fonts-serif; + font-size: @content-quote-primary-size; + font-style: italic; + + cite { + display: block; + margin-top: @content-margin-top * @content-scaling; + font-family: @fonts; + font-style: normal; + } } dd { - margin-left: @content-margin-top * 2; - margin-bottom: 0.1rem; + margin-left: @content-margin-top * 2; + margin-bottom: 0.1rem; } dt { - margin-bottom: 0.1rem; - font-weight: bold; + margin-bottom: 0.1rem; + font-weight: bold; } td { - > p, - > ul, - > ol { - &:first-child { - margin-top: 0; // Remove margin for the first element in td - } - } + + >p, + >ul, + >ol { + &:first-child { + margin-top: 0; // Remove margin for the first element in td + } + } } a { - color: @color-link; - text-decoration: none !important; + color: @color-link; + text-decoration: none !important; - &:not( [ href ] ) { - cursor: pointer; - /* Always cursor:pointer even without href */ - } + &:not([ href]) { + cursor: pointer; + /* Always cursor:pointer even without href */ + } - &:hover { - color: @color-link-active; - } + &:hover { + color: @color-link-active; + } - &.new { - color: @color-link-new !important; // Override visited + &.new { + color: @color-link-new !important; // Override visited - &:hover { - color: @color-link-new-active !important; - } - } + &:hover { + color: @color-link-new-active !important; + } + } - &:visited { - color: @color-link; + &:visited { + color: @color-link; - &:hover { - color: @color-link-active; - } - } + &:hover { + color: @color-link-active; + } + } - &.mw-selflink { - color: inherit; - font-weight: bold; - text-decoration: inherit; + &.mw-selflink { + color: inherit; + font-weight: bold; + text-decoration: inherit; - &:hover { - cursor: inherit; - text-decoration: inherit; - } + &:hover { + cursor: inherit; + text-decoration: inherit; + } - &:active, - &:visited { - color: inherit; - } - } + &:active, + &:visited { + color: inherit; + } + } } .error { - padding: 2px 4px; - background-color: @red-90; - font-size: unset; - font-weight: normal; + padding: 2px 4px; + background-color: @red-90; + font-size: unset; + font-weight: normal; } .nowrap { - white-space: nowrap; + white-space: nowrap; } .screen-reader-text { - .mixin-screen-reader-text; + .mixin-screen-reader-text; } /* @@ -200,860 +217,866 @@ a { */ #mw-wrapper { - overflow: hidden; + overflow: hidden; } #siteNotice { - margin: -@margin-side -@margin-side @margin-side -@margin-side; - padding: @margin-side / 2 @margin-side; - z-index: 1; - position: relative; - width: ~'calc(100vw - 40px)'; - background: @red-30; - color: @base-100; - font-size: @content-monospace-size; - display: flex; - align-items: center; - justify-content: center; + margin: -@margin-side -@margin-side @margin-side -@margin-side; + padding: @margin-side / 2 @margin-side; + z-index: 1; + position: relative; + width: ~'calc(100vw - 40px)'; + background: @red-30; + color: @base-100; + font-size: @content-monospace-size; + display: flex; + align-items: center; + justify-content: center; } .mw-body, .parsoid-body { - margin-top: @header-height + @margin-side; - padding: 0 @margin-side; - min-height: 80vh; // avoid footer being in the middle of the page - direction: ltr; + margin-top: @header-height + @margin-side; + padding: 0 @margin-side; + min-height: 80vh; // avoid footer being in the middle of the page + direction: ltr; } .mw-wiki-title { - font-family: @fonts-secondary !important; - text-transform: uppercase; - letter-spacing: 2px; + font-family: @fonts-secondary !important; + text-transform: uppercase; + letter-spacing: 2px; - a& { - color: @base-50; - transition: @transition-opacity; + a& { + color: @base-50; + transition: @transition-opacity; - &:hover, - &:active, - &:focus { - color: @base-30; - text-decoration: none; - } - } + &:hover, + &:active, + &:focus { + color: @base-30; + text-decoration: none; + } + } } .mw-body { - // h1's can exist outside of mw-body-content so some heading styles - // need to be defined in mw-body as well - & h1, - &-content h1, - &-content h2, - &-content h3, - &-content h4 { - font-family: @fonts-secondary; - } + // h1's can exist outside of mw-body-content so some heading styles + // need to be defined in mw-body as well + & h1, + &-content h1, + &-content h2, + &-content h3, + &-content h4 { + font-family: @fonts-secondary; + } - & h1, - &-content h1 { - font-size: @content-h1-size; - } + & h1, + &-content h1 { + font-size: @content-h1-size; + } - &-content h1, - &-content h2 { - font-weight: 600; - line-height: 1.2; - } + &-content h1, + &-content h2 { + font-weight: 600; + line-height: 1.2; + } - .firstHeading { - margin: 0; - padding-top: 1.2rem; - color: @base-10; - overflow: inherit; // black magic to wrap in small screen devices - line-height: 1.2; - } + .firstHeading { + margin: 0; + padding-top: 1.2rem; + color: @base-10; + overflow: inherit; // black magic to wrap in small screen devices + line-height: 1.2; + } - #siteSub { - display: block; - margin: 0.4rem 0 1.6rem; - color: @base-30; - font-size: @content-caption-size; - } + #siteSub { + display: block; + margin: 0.4rem 0 1.6rem; + color: @base-30; + font-size: @content-caption-size; + } - .mw-indicators { - float: right; - line-height: @content-line-height; - font-size: @content-body-size; - /* Ensure that this is displayed on top of .mw-body-content and clickable */ - position: relative; - z-index: 1; - } + .mw-indicators { + float: right; + line-height: @content-line-height; + font-size: @content-body-size; + /* Ensure that this is displayed on top of .mw-body-content and clickable */ + position: relative; + z-index: 1; + } - .mw-indicator { - display: inline-block; - zoom: 1; - *display: inline; // stylelint-disable declaration-block-no-duplicate-properties - } + .mw-indicator { + display: inline-block; + zoom: 1; + *display: inline; // stylelint-disable declaration-block-no-duplicate-properties + } - .firstHeading, - #siteSub { - .content-center; - } + .firstHeading, + #siteSub { + .content-center; + } } .mw-body-content { - position: relative; - .content-center; - line-height: @content-line-height; - font-size: @content-body-size; - z-index: 0; + position: relative; + .content-center; + line-height: @content-line-height; + font-size: @content-body-size; + z-index: 0; - #contentSub, - #contentSub2 { - color: @base-30; - font-size: @content-caption-size; - } + #contentSub, + #contentSub2 { + color: @base-30; + font-size: @content-caption-size; + } - #mw-content-text { - .mw-parser-output { - .mw-headline { - order: -1; // Make sure that header is the first - } + #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; - } + &>h1, + &>h2, + &>h3, + &>h4, + &>h5, + &>h6 { + display: flex; + align-items: center; + justify-content: space-between; + } - a:not( .external ):not( .selflink ) { - .link-content-text(@color-link-active); + a:not(.external):not(.selflink) { + .link-content-text(@color-link-active); - &.new { - background-image: linear-gradient( to right, @color-link-new-active 0, @color-link-new-active 100% ); - } + &.new { + background-image: linear-gradient(to right, @color-link-new-active 0, @color-link-new-active 100%); + } - /* Doesn't work for some reason + /* Doesn't work for some reason &:visited { background-image: linear-gradient(to right, @color-link-visited 0, @color-link-visited 100%)!important; } */ - } - - .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; - } - } - - #toc { - position: fixed; - max-width: 450px; - height: ~'calc( 100vh - @{header-height} * 2 - @{margin-side} * 4 )'; - top: @header-height; - right: 0; - padding: @margin-side * 2 @margin-side; - color: @base-70; - - &::-webkit-scrollbar { - width: 0; // Hide bar on toc - } - - @top: linear-gradient(white, rgba(255, 255, 255, 0.001)); - @bottom: linear-gradient(rgba(255, 255, 255, 0.001), white); - - &:before { - top: @header-height; - .gradient-overflow(@top); - } - - &:after { - bottom: @header-height - @margin-side; - .gradient-overflow(@bottom); - } - - .toctitle { - h2 { - margin: 0; - color: @base-50; - font-size: @ui-menu-text-big; - } - } - - .toctoggle { - display: none; - } - - .toctext { - max-width: 250px; - display: flex; - direction: ltr; - } - - li { - color: @base-50; - } - - li.active { - color: @accent-50 !important; - - > a { - color: inherit !important; - border-color: currentColor; - } - } - - a { - display: inline-block; - margin-top: @content-margin-top; - padding-right: 17px; - color: @base-50; - background: 0; - border-right: 3px solid transparent; - transition-duration: 0s !important; // Turn off transitions - - &:hover { - color: @base-30 !important; - } - } - - &level { - &-1 { - font-size: @content-h2-size * @toc-scaling; - } - - &-2 { - font-size: @content-h3-size * @toc-scaling; - } - - &-3 { - font-size: @content-h4-size * @toc-scaling; - } - - &-4 { - font-size: @content-h5-size * @toc-scaling; - } - - &-5 { - font-size: @content-h6-size * @toc-scaling; - } - } - - .tocnumber { - .mixin-screen-reader-text; - } - - &.tochidden { - > ul { - display: block !important; // Force display - } - } - - > ul { - margin: @content-margin-top / 2 0 0 0; - position: relative; - z-index: 2; - border-right: 1px dashed; - max-height: ~'calc( 100vh - @{header-height} * 2 - @{margin-side} * 4 )'; - overflow: visible auto; - overscroll-behavior: contain; - display: block; - } - - ul { - margin: 0; - list-style: none; - } - - ul, - .toctitle { - text-align: right; - } - } - } - } - - p { - line-height: inherit; - overflow-wrap: break-word; - } - - h2 { - font-size: @content-h2-size; - } - - h3 { - font-size: @content-h3-size; - } - - h4 { - font-size: @content-h4-size; - } - - h5 { - font-size: @content-h5-size; - } - - h6 { - font-size: @content-h6-size; - } - - table { - margin: 0; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - margin: 0; - padding: 0; - color: @color-content-header; - } - - h3 { - font-weight: normal; - } - - h1, - h2, - h5, - h6 { - font-weight: 600; - } - - 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; - } - - sub, - sup, - span.reference { - font-size: 80%; - } - - .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; - } - } - } - - div.tnone, - div.floatnone, - table.floatnone, - div.tleft, - div.floatleft, - table.floatleft, - div.tright, - div.floatright, - table.floatright { - z-index: 2; - position: relative; - margin: 0.6rem 1.4rem; - transition: @transition-margin; - } - - div.tnone, - div.floatnone, - table.floatnone { - display: flex; - justify-content: center; - - > * { - width: 100% !important; - height: auto; - } - - .thumbinner { - display: flex; - flex-direction: column; - align-items: center; - } - } - - div.tnone, - div.floatnone, - table.floatnone, - div.tleft, - div.floatleft, - table.floatleft { - margin-left: @negative-margin / 2; - } - - div.tnone, - div.floatnone, - table.floatnone, - div.tright, - div.floatright, - table.floatright { - margin-right: @negative-margin / 2; - } - - figcaption, - .thumbcaption { - margin: @content-margin-top / 2 0 0; - color: @base-30; - font-size: @content-caption-size; - } - - .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; - font-size: @content-caption-size; - transition: @transition-background-quick, @transition-color-quick !important; - } - } - } - } - - 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-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; + } + } + + #toc { + position: fixed; + max-width: 450px; + height:~'calc( 100vh - @{header-height} * 2 - @{margin-side} * 4 )'; + top: @header-height; + right: 0; + padding: @margin-side * 2 @margin-side; + color: @base-70; + + &::-webkit-scrollbar { + width: 0; // Hide bar on toc + } + + @top: linear-gradient(white, rgba(255, 255, 255, 0.001)); + @bottom: linear-gradient(rgba(255, 255, 255, 0.001), white); + + &:before { + top: @header-height; + .gradient-overflow(@top); + } + + &:after { + bottom: @header-height - @margin-side; + .gradient-overflow(@bottom); + } + + .toctitle { + h2 { + margin: 0; + color: @base-50; + font-size: @ui-menu-text-big; + } + } + + .toctoggle { + display: none; + } + + .toctext { + max-width: 250px; + display: flex; + direction: ltr; + } + + li { + color: @base-50; + } + + li.active { + color: @accent-50 !important; + + >a { + color: inherit !important; + border-color: currentColor; + } + } + + a { + display: inline-block; + margin-top: @content-margin-top; + padding-right: 17px; + color: @base-50; + background: 0; + border-right: 3px solid transparent; + transition-duration: 0s !important; // Turn off transitions + + &:hover { + color: @base-30 !important; + } + } + + &level { + &-1 { + font-size: @content-h2-size * @toc-scaling; + } + + &-2 { + font-size: @content-h3-size * @toc-scaling; + } + + &-3 { + font-size: @content-h4-size * @toc-scaling; + } + + &-4 { + font-size: @content-h5-size * @toc-scaling; + } + + &-5 { + font-size: @content-h6-size * @toc-scaling; + } + } + + .tocnumber { + .mixin-screen-reader-text; + } + + &.tochidden { + >ul { + display: block !important; // Force display + } + } + + >ul { + margin: @content-margin-top / 2 0 0 0; + position: relative; + z-index: 2; + border-right: 1px dashed; + max-height:~'calc( 100vh - @{header-height} * 2 - @{margin-side} * 4 )'; + overflow: visible auto; + overscroll-behavior: contain; + display: block; + } + + ul { + margin: 0; + list-style: none; + } + + ul, + .toctitle { + text-align: right; + } + } + } + } + + p { + line-height: inherit; + overflow-wrap: break-word; + } + + h2 { + font-size: @content-h2-size; + } + + h3 { + font-size: @content-h3-size; + } + + h4 { + font-size: @content-h4-size; + } + + h5 { + font-size: @content-h5-size; + } + + h6 { + font-size: @content-h6-size; + } + + table { + margin: 0; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + margin: 0; + padding: 0; + color: @color-content-header; + } + + h3 { + font-weight: normal; + } + + h1, + h2, + h5, + h6 { + font-weight: 600; + } + + 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; + } + + sub, + sup, + span.reference { + font-size: 80%; + } + + .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; + } + } + } + + div.tnone, + div.floatnone, + table.floatnone, + div.tleft, + div.floatleft, + table.floatleft, + div.tright, + div.floatright, + table.floatright { + z-index: 2; + position: relative; + margin: 0.6rem 1.4rem; + transition: @transition-margin; + } + + div.tnone, + div.floatnone, + table.floatnone { + display: flex; + justify-content: center; + + >* { + width: 100% !important; + height: auto; + } + + .thumbinner { + display: flex; + flex-direction: column; + align-items: center; + } + } + + div.tnone, + div.floatnone, + table.floatnone, + div.tleft, + div.floatleft, + table.floatleft { + margin-left: @negative-margin / 2; + } + + div.tnone, + div.floatnone, + table.floatnone, + div.tright, + div.floatright, + table.floatright { + margin-right: @negative-margin / 2; + } + + figcaption, + .thumbcaption { + margin: @content-margin-top / 2 0 0; + color: @base-30; + font-size: @content-caption-size; + font-style: italic; + } + + .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; + font-size: @content-caption-size; + transition: @transition-background-quick, @transition-color-quick !important; + } + } + } + } + + 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; + } + } + } } // Namespace button #p-namespaces { - position: relative; - float: right; - margin: 0 @negative-margin; - padding: @margin-side; + position: relative; + float: right; + margin: 0 @negative-margin; + padding: @margin-side; - &-label { - .mixin-screen-reader-text; - } + &-label { + .mixin-screen-reader-text; + } - ul { - margin: 1.6rem 0 0 0; - display: flex; - justify-content: flex-end; // Right align + ul { + margin: 1.6rem 0 0 0; + display: flex; + justify-content: flex-end; // Right align - li { - list-style: none; + li { + list-style: none; - a { - display: flex; - align-items: center; - padding: 0.4rem 0.8rem; - border: 1px solid @base-80; - background-color: @base-90; - transition: @transition-background-quick, @transition-box-shadow-quick; - .boxshadow(1); + a { + display: flex; + align-items: center; + padding: 0.4rem 0.8rem; + border: 1px solid @base-80; + background-color: @base-90; + transition: @transition-background-quick, @transition-box-shadow-quick; + .boxshadow(1); - &:hover { - background-color: @base-80; - .boxshadow(2); - } + &:hover { + background-color: @base-80; + .boxshadow(2); + } - span { - color: @base-20; - } + span { + color: @base-20; + } - &:after { - order: -1; - content: ''; - position: relative; - width: 14px; - height: 14px; - margin-right: 8px; - background-size: contain; - background-repeat: no-repeat; - background-position: center; - opacity: 0.5; - } - } - } - } + &:after { + order: -1; + content: ''; + position: relative; + width: 14px; + height: 14px; + margin-right: 8px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + opacity: 0.5; + } + } + } + } } .catlinks { - margin: 0 @negative-margin; - padding: @margin-side; - line-height: 1.2; + margin: 0 @negative-margin; + padding: @margin-side; + line-height: 1.2; - .mw-normal-catlinks { - font-size: 0; // Hide colon + .mw-normal-catlinks { + font-size: 0; // Hide colon - > a { - display: block; - color: @color-content-caption; - font-size: @content-caption-size; - text-transform: uppercase; - letter-spacing: 1px; - } + >a { + display: block; + color: @color-content-caption; + font-size: @content-caption-size; + text-transform: uppercase; + letter-spacing: 1px; + } - > ul { - margin: 0; - padding-top: @content-margin-top; - display: flex; - flex-wrap: wrap; - font-size: @content-caption-size; // Reset font + >ul { + margin: 0; + padding-top: @content-margin-top; + display: flex; + flex-wrap: wrap; + font-size: @content-caption-size; // Reset font - li { - display: block; - margin: 0 @margin-side / 2 @margin-side / 2 0; - padding: 0; - border: 0; + li { + display: block; + margin: 0 @margin-side / 2 @margin-side / 2 0; + padding: 0; + border: 0; - &:first-of-type { - margin-left: 0; - } + &:first-of-type { + margin-left: 0; + } - a { - padding: @margin-side / 4 @margin-side / 2; - display: block; - border: 1px solid @base-90; - background-color: @base-90; - color: @color-content-caption !important; // Override other styles - .boxshadow(1); - transition: @transition-background-quick, @transition-color-quick, @transition-border-quick, @transition-transform-quick, @transition-box-shadow-quick; + a { + padding: @margin-side / 4 @margin-side / 2; + display: block; + border: 1px solid @base-90; + background-color: @base-90; + color: @color-content-caption !important; // Override other styles + .boxshadow(1); + transition: @transition-background-quick, @transition-color-quick, @transition-border-quick, @transition-transform-quick, @transition-box-shadow-quick; - &:hover { - background-color: @color-link-active; - border-color: @color-link-active; - color: @base-100 !important; - transform: translateY( -2px ); - .boxshadow(2); - } + &:hover { + background-color: @color-link-active; + border-color: @color-link-active; + color: @base-100 !important; + transform: translateY(-2px); + .boxshadow(2); + } - &.new:hover { - background-color: @color-link-new-active; - border-color: @color-link-new-active; - } - } - } - } - } + &.new:hover { + background-color: @color-link-new-active; + border-color: @color-link-new-active; + } + } + } + } + } } .plainlist ol, .plainlist ul { - line-height: inherit; - list-style: none none; - margin: 0; + line-height: inherit; + list-style: none none; + margin: 0; } // Hide edit button when user is not logged in .not-logged .mw-editsection { - display: none !important; + display: none !important; } -@media only screen and ( max-width: @screen0 ) { - div.tnone, - div.floatnone, - table.floatnone, - div.tleft, - div.floatleft, - table.floatleft, - div.tright, - div.floatright, - table.floatright { - margin: 0.6rem -@margin-side !important; - width: 100vw !important; - display: flex; - justify-content: center; - float: unset; - clear: none; - } +@media only screen and (max-width: @screen0 ) { - figcaption, - .thumbcaption { - text-align: center !important; - } + div.tnone, + div.floatnone, + table.floatnone, + div.tleft, + div.floatleft, + table.floatleft, + div.tright, + div.floatright, + table.floatright { + margin: 0.6rem -@margin-side !important; + width: 100vw !important; + display: flex; + justify-content: center; + float: unset; + clear: none; + } + + figcaption, + .thumbcaption { + text-align: center !important; + } } -@media only screen and ( max-width: @screen1 ) { - .catlinks, - #p-namespaces { - margin: 0 !important; // somehow got overrided - padding: @margin-side 0; - } +@media only screen and (max-width: @screen1 ) { + + .catlinks, + #p-namespaces { + margin: 0 !important; // somehow got overrided + padding: @margin-side 0; + } } -@media only screen and ( max-width: @screen2 ) { - .mw-editsection { - position: relative !important; - transform: none !important; - } +@media only screen and (max-width: @screen2 ) { + .mw-editsection { + position: relative !important; + transform: none !important; + } - .catlinks, - #p-namespaces { - margin: 0~'calc((100vw - @{page-width}) / -2)'; - } + .catlinks, + #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; - } - } + .mw-body-content { + .mw-references-wrap { + &.mw-references-columns { + margin: @content-margin-top 0 0 0; + } + } - div.tnone, - div.floatnone, - table.floatnone { - margin: 0.6rem~'calc((100vw - @{page-width}) / -2)'; + div.tnone, + div.floatnone, + table.floatnone { + margin: 0.6rem~'calc((100vw - @{page-width}) / -2)'; - a.image, - a.image > img { - width: 100% !important; - height: auto !important; - } - } - } + a.image, + a.image>img { + width: 100% !important; + height: auto !important; + } + } + } } -@media only screen and ( max-width: @screen3 ) { - .webfonts-changed #toc { - display: block !important; // Hide until everything is loaded - } +@media only screen and (max-width: @screen3 ) { + .webfonts-changed #toc { + display: block !important; // Hide until everything is loaded + } - .mw-body-content { - div.tleft, - div.floatleft, - table.floatleft { - margin-left: 0; - } + .mw-body-content { - div.tright, - div.floatright, - table.floatright { - margin-right: 0; - } + div.tleft, + div.floatleft, + table.floatleft { + margin-left: 0; + } - div.tleft, - div.floatleft, - table.floatleft, - div.tright, - div.floatright, - table.floatright { - z-index: 0; // Reset so it doesn't cover ToC - position: relative; - } + div.tright, + div.floatright, + table.floatright { + margin-right: 0; + } - #mw-content-text .mw-parser-output #toc { - display: none; - background: @base-100; - z-index: 2; - height: 100vh; - margin-top: -@header-height; - padding: 0; - .boxshadow(3); + div.tleft, + div.floatleft, + table.floatleft, + div.tright, + div.floatright, + table.floatright { + z-index: 0; // Reset so it doesn't cover ToC + position: relative; + } - &:before, - &:after { - content: unset; // Disable fade - } + #mw-content-text .mw-parser-output #toc { + display: none; + background: @base-100; + z-index: 2; + height: 100vh; + margin-top: -@header-height; + padding: 0; + .boxshadow(3); - .toctoggle { - display: block; - font-size: 0; + &:before, + &:after { + content: unset; // Disable fade + } - a { - position: fixed; - z-index: 7; - right: 0; - bottom: 0; - margin: @margin-side; - padding: 0 @margin-side / 2; - width: 39px; - height: 56px; - display: block; - background-color: @base-90; - border-radius: 100%; - .boxshadow(4); - transform: translate( 0, @header-height + @margin-side ); - transition: @transition-opacity, @transition-transform, @transition-box-shadow-quick; - transition-duration: 0.5s !important; // Override duration 0 for ToC + .toctoggle { + display: block; + font-size: 0; - &:hover { - background-color: @menu-item-link-hover; - .boxshadow(5); + a { + position: fixed; + z-index: 7; + right: 0; + bottom: 0; + margin: @margin-side; + padding: 0 @margin-side / 2; + width: 39px; + height: 56px; + display: block; + background-color: @base-90; + border-radius: 100%; + .boxshadow(4); + transform: translate(0, @header-height + @margin-side ); + transition: @transition-opacity, @transition-transform, @transition-box-shadow-quick; + transition-duration: 0.5s !important; // Override duration 0 for ToC - &:before { - opacity: @opacity-icon-active; - } - } + &:hover { + background-color: @menu-item-link-hover; + .boxshadow(5); - &:focus { - background-color: @menu-item-link-active; - } + &:before { + opacity: @opacity-icon-active; + } + } - &:before { - .resource-loader-icon; - display: block; - opacity: @opacity-icon; - } - } - } + &:focus { + background-color: @menu-item-link-active; + } - .toctitle h2 { - display: none; - } + &:before { + .resource-loader-icon; + display: block; + opacity: @opacity-icon; + } + } + } - &.tochidden { - > ul { - display: none !important; // Reset hide - transform: translateX( 300px + @margin-side ); - } - } + .toctitle h2 { + display: none; + } - > ul { - display: none; // Hide until interacted - margin: 0 @margin-side; - padding: @header-height + @margin-side 0 @header-height + @margin-side * 2; // More scroll spaces - max-height: ~'calc( 100vh - '@header-height * 2 + @margin-side * 3 ~')'; - transform: none; - transition: @transition-transform; - } - } - } + &.tochidden { + >ul { + display: none !important; // Reset hide + transform: translateX(300px + @margin-side ); + } + } - .nav-up { - ~ .mw-body .mw-body-content #mw-content-text .mw-parser-output #toc .toctoggle a { - transform: none; - } - } + >ul { + display: none; // Hide until interacted + margin: 0 @margin-side; + padding: @header-height + @margin-side 0 @header-height + @margin-side * 2; // More scroll spaces + max-height: ~'calc( 100vh - '@header-height * 2 + @margin-side * 3 ~')'; + transform: none; + transition: @transition-transform; + } + } + } + + .nav-up { + ~.mw-body .mw-body-content #mw-content-text .mw-parser-output #toc .toctoggle a { + transform: none; + } + } } -@media only screen and ( min-width: @screen4 ) { - div.tnone, - div.floatnone, - table.floatnone, - div.tleft, - div.floatleft, - table.floatleft { - margin-left: @negative-margin !important; - } +@media only screen and (min-width: @screen4 ) { - div.tnone, - div.floatnone, - table.floatnone, - div.tright, - div.floatright, - table.floatright { - margin-right: @negative-margin !important; - } + div.tnone, + div.floatnone, + table.floatnone, + div.tleft, + div.floatleft, + table.floatleft { + margin-left: @negative-margin !important; + } + + div.tnone, + div.floatnone, + table.floatnone, + div.tright, + div.floatright, + table.floatright { + margin-right: @negative-margin !important; + } } + /* // Logged in styles .not-logged { @@ -1061,4 +1084,4 @@ a { display: none!important; // Hide edit icons when not logged in } } -*/ +*/ \ No newline at end of file diff --git a/resources/variables.less b/resources/variables.less index bff2a8db..8f8cda0f 100644 --- a/resources/variables.less +++ b/resources/variables.less @@ -143,14 +143,20 @@ */ @fonts: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif; /** - * Citizen font stack + * Citizen title font stack * * `Titillium Web` – Futuristic, Closet to Univia Pro, OFL licensed * `Univia Pro` - Fallback font if Univia Pro is present - * 'Monoid' - Code font, OFL licensed * Fallback using primary fonts */ -@fonts-secondary: 'Titillium Web', 'Univia Pro', @fonts; +@fonts-secondary: 'Titillium Web', @fonts; +/** + * Citizen serif font stack + * + * `Geogria` – Windows, Mac + * `serif` – (Generic) web font fallback + */ +@fonts-serif: 'Geogria', @fonts; /** * System font stack for monospace fonts *