/* * Citizen - Common Styles * https://starcitizen.tools */ @import 'mediawiki.mixins'; /* * 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 } 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 */ } table { // TEMP solution to fix overflow display: block; max-width: 100vw; overflow: auto; } hr { display: none; } ul { list-style-type: square; } ul, ol { padding: 0; } p, ul, ol, dl { margin: @content-margin-top 0 0 0; } pre, code, tt, kbd, samp, .mw-code { 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; } code { padding: 1px 4px; } pre, .mw-code { padding: 1rem; /* Wrap lines in overflow. T2260, T103780 */ white-space: pre-wrap; } cite { font-style: inherit; } input { 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; } fieldset > table { margin-top: 0 !important; } legend { font-weight: bold; color: @base-20; margin: 0; padding: 4px; } textarea { width: 100%; } blockquote { margin: @content-margin-top * 2 * @content-scaling; 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-size: @content-quote-secondary-size; font-style: normal; &:before { content: '— '; } } } dd { margin-left: @content-margin-top * 2; margin-bottom: 0.1rem; } dt { margin-bottom: 0.1rem; font-weight: bold; } 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; &:not( [ href ] ) { cursor: pointer; /* Always cursor:pointer even without href */ } &:hover { color: @color-link-active; } &.new { color: @color-link-new !important; // Override visited &:hover { color: @color-link-new-active !important; } } &:visited { color: @color-link; &:hover { color: @color-link-active; } } &.mw-selflink { color: inherit; font-weight: bold; text-decoration: inherit; &:hover { cursor: inherit; text-decoration: inherit; } &:active, &:visited { color: inherit; } } } .error { padding: 2px 4px; background-color: @red-90; font-size: unset; font-weight: normal; } .nowrap { white-space: nowrap; } .screen-reader-text { .mixin-screen-reader-text; } /* * Content */ #mw-wrapper { 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; } .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; } .mw-wiki-title { font-family: @fonts-secondary !important; text-transform: uppercase; letter-spacing: 2px; a& { color: @base-50; transition: @transition-opacity; &: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, &-content h1 { font-size: @content-h1-size; } &-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; } #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-indicator { display: inline-block; zoom: 1; *display: inline; // stylelint-disable declaration-block-no-duplicate-properties } .firstHeading, #siteSub { .content-center; } } .mw-body-content { 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; } #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; } 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% ); } /* 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; 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; &-label { .mixin-screen-reader-text; } ul { margin: 1.6rem 0 0 0; display: flex; justify-content: flex-end; // Right align 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); &:hover { background-color: @base-80; .boxshadow(2); } 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; } } } } } .catlinks { margin: 0 @negative-margin; padding: @margin-side; line-height: 1.2; .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; } > 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; &: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; &: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; } } } } } } .plainlist ol, .plainlist ul { 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; } @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; } 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: @screen2 ) { .mw-editsection { position: relative !important; transform: none !important; } .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; } } 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; } } } } @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; } div.tright, div.floatright, table.floatright { margin-right: 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; } #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); &:before, &:after { content: unset; // Disable fade } .toctoggle { display: block; font-size: 0; 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 &:hover { background-color: @menu-item-link-hover; .boxshadow(5); &:before { opacity: @opacity-icon-active; } } &:focus { background-color: @menu-item-link-active; } &:before { .resource-loader-icon; display: block; opacity: @opacity-icon; } } } .toctitle h2 { display: none; } &.tochidden { > ul { display: none !important; // Reset hide transform: translateX( 300px + @margin-side ); } } > 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; } div.tnone, div.floatnone, table.floatnone, div.tright, div.floatright, table.floatright { margin-right: @negative-margin !important; } } /* // Logged in styles .not-logged { .mw-editsection { display: none!important; // Hide edit icons when not logged in } } */