mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-14 10:04:56 +00:00
feat: update print styles
This commit is contained in:
alistair3149
parent
5629308481
commit
e3dc01cdc9
|
|
@ -1,208 +1,210 @@
|
|||
@import '../variables.less';
|
||||
@import '../mixins.less';
|
||||
|
||||
.toc {
|
||||
position: fixed;
|
||||
top: var( --height-header );
|
||||
left: 0;
|
||||
max-width: @width-toc - @padding-page * 2;
|
||||
padding: @padding-page;
|
||||
color: var( --color-base--subtle );
|
||||
font-size: @ui-menu-text;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0; // Hide bar on toc
|
||||
}
|
||||
|
||||
&title {
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: var( --color-base--subtle ) !important;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.75px;
|
||||
}
|
||||
}
|
||||
|
||||
&toggle {
|
||||
&span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&checkbox:checked ~ ul {
|
||||
display: block !important; // Force display
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
border-left: 2px solid var( --border-color-base--darker );
|
||||
|
||||
&.toclevel-2,
|
||||
&.toclevel-3,
|
||||
&.toclevel-4,
|
||||
&.toclevel-5,
|
||||
&.toclevel-6 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
border-color: var( --color-primary );
|
||||
color: var( --color-primary );
|
||||
|
||||
> a {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
a,
|
||||
li {
|
||||
color: var( --color-base );
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.25rem 0 0.25rem 10px;
|
||||
color: var( --color-base--subtle );
|
||||
|
||||
&:hover {
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
|
||||
&number {
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0 !important;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
> ul {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
overflow: visible auto;
|
||||
max-height: ~'calc( 100vh - '@header-height * 2 + @margin-side * 4 ~' )';
|
||||
margin: @content-margin-top * 0.75 0 0 0 !important;
|
||||
font-weight: 450;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @width-breakpoint-desktop-wide ) {
|
||||
@media screen {
|
||||
.toc {
|
||||
z-index: 11; // Higher than header
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin-top: ~'calc( var( --height-header ) * -1 )';
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: var( --height-header );
|
||||
left: 0;
|
||||
max-width: @width-toc - @padding-page * 2;
|
||||
padding: @padding-page;
|
||||
color: var( --color-base--subtle );
|
||||
font-size: @ui-menu-text;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: unset; // Disable fade
|
||||
&::-webkit-scrollbar {
|
||||
width: 0; // Hide bar on toc
|
||||
}
|
||||
|
||||
&title {
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: var( --color-base--subtle ) !important;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.75px;
|
||||
}
|
||||
}
|
||||
|
||||
&toggle {
|
||||
&span {
|
||||
display: block;
|
||||
font-size: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&label {
|
||||
position: fixed;
|
||||
z-index: 7;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: 39px;
|
||||
height: 56px;
|
||||
padding: 0 @margin-side / 2;
|
||||
border-top: 1px solid var( --border-color-base );
|
||||
border-left: 1px solid var( --border-color-base );
|
||||
background-color: var( --background-color-dp-06 );
|
||||
border-radius: @border-radius-large 0 0 0;
|
||||
pointer-events: auto;
|
||||
.boxshadow(4);
|
||||
|
||||
&:hover {
|
||||
background-color: var( --background-color-dp-12 );
|
||||
.boxshadow(5);
|
||||
|
||||
&:before {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var( --background-color-dp-02 );
|
||||
|
||||
&:before {
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
.resource-loader-icon;
|
||||
display: block;
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
}
|
||||
|
||||
&checkbox:not( :checked ) {
|
||||
~ .toctitle h2,
|
||||
~ ul {
|
||||
transform: translateX( -@width-toc - @margin-side );
|
||||
}
|
||||
&checkbox:checked ~ ul {
|
||||
display: block !important; // Force display
|
||||
}
|
||||
}
|
||||
|
||||
&title h2 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
max-width: @width-toc;
|
||||
padding: 10px var( --padding-page ) 0 var( --padding-page );
|
||||
margin-top: var( --height-header );
|
||||
transition: @transition-transform;
|
||||
li {
|
||||
border-left: 2px solid var( --border-color-base--darker );
|
||||
|
||||
&.toclevel-2,
|
||||
&.toclevel-3,
|
||||
&.toclevel-4,
|
||||
&.toclevel-5,
|
||||
&.toclevel-6 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
border-color: var( --color-primary );
|
||||
color: var( --color-primary );
|
||||
|
||||
> a {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
a,
|
||||
li {
|
||||
color: var( --color-base );
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.25rem 0 0.25rem 10px;
|
||||
color: var( --color-base--subtle );
|
||||
|
||||
&:hover {
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
}
|
||||
|
||||
&number {
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0 !important;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
> ul {
|
||||
display: block !important; // So that animation is visible
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
max-height: ~'calc( 100vh - var( --height-header ) - 24px - 0.6rem - 20px )';
|
||||
padding: ~'calc( var( --height-header ) + 24px + 0.6rem ) var( --padding-page ) 20px var( --padding-page )';
|
||||
margin: 0 !important;
|
||||
background: var( --background-color-dp-16 );
|
||||
border-radius: 0 @border-radius-large @border-radius-large 0;
|
||||
pointer-events: auto;
|
||||
transition: @transition-transform;
|
||||
.boxshadow(3);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
overflow: visible auto;
|
||||
max-height: ~'calc( 100vh - '@header-height * 2 + @margin-side * 4 ~' )';
|
||||
margin: @content-margin-top * 0.75 0 0 0 !important;
|
||||
font-weight: 450;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.skin-citizen-dark {
|
||||
@media ( max-width: @width-breakpoint-desktop-wide ) {
|
||||
.toc {
|
||||
&togglelabel {
|
||||
&:before {
|
||||
filter: invert( 1 );
|
||||
z-index: 11; // Higher than header
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin-top: ~'calc( var( --height-header ) * -1 )';
|
||||
pointer-events: none;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: unset; // Disable fade
|
||||
}
|
||||
|
||||
&toggle {
|
||||
&span {
|
||||
display: block;
|
||||
font-size: 0 !important;
|
||||
}
|
||||
|
||||
&label {
|
||||
position: fixed;
|
||||
z-index: 7;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: 39px;
|
||||
height: 56px;
|
||||
padding: 0 @margin-side / 2;
|
||||
border-top: 1px solid var( --border-color-base );
|
||||
border-left: 1px solid var( --border-color-base );
|
||||
background-color: var( --background-color-dp-06 );
|
||||
border-radius: @border-radius-large 0 0 0;
|
||||
pointer-events: auto;
|
||||
.boxshadow(4);
|
||||
|
||||
&:hover {
|
||||
background-color: var( --background-color-dp-12 );
|
||||
.boxshadow(5);
|
||||
|
||||
&:before {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var( --background-color-dp-02 );
|
||||
|
||||
&:before {
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
.resource-loader-icon;
|
||||
display: block;
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
}
|
||||
|
||||
&checkbox:not( :checked ) {
|
||||
~ .toctitle h2,
|
||||
~ ul {
|
||||
transform: translateX( -@width-toc - @margin-side );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&title h2 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
max-width: @width-toc;
|
||||
padding: 10px var( --padding-page ) 0 var( --padding-page );
|
||||
margin-top: var( --height-header );
|
||||
transition: @transition-transform;
|
||||
}
|
||||
|
||||
> ul {
|
||||
display: block !important; // So that animation is visible
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
max-height: ~'calc( 100vh - var( --height-header ) - 24px - 0.6rem - 20px )';
|
||||
padding: ~'calc( var( --height-header ) + 24px + 0.6rem ) var( --padding-page ) 20px var( --padding-page )';
|
||||
margin: 0 !important;
|
||||
background: var( --background-color-dp-16 );
|
||||
border-radius: 0 @border-radius-large @border-radius-large 0;
|
||||
pointer-events: auto;
|
||||
transition: @transition-transform;
|
||||
.boxshadow(3);
|
||||
}
|
||||
}
|
||||
|
||||
.skin-citizen-dark {
|
||||
.toc {
|
||||
&togglelabel {
|
||||
&:before {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop-wide ) and ( max-width: @width-breakpoint-desktop-wider ) {
|
||||
.skin-citizen-has-toc {
|
||||
.mw-body-header,
|
||||
.mw-body-content {
|
||||
margin-right: 0;
|
||||
margin-left: @width-toc - @padding-page;
|
||||
@media ( min-width: @width-breakpoint-desktop-wide ) and ( max-width: @width-breakpoint-desktop-wider ) {
|
||||
.skin-citizen-has-toc {
|
||||
.mw-body-header,
|
||||
.mw-body-content {
|
||||
margin-right: 0;
|
||||
margin-left: @width-toc - @padding-page;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@ a {
|
|||
|
||||
figcaption,
|
||||
.thumbcaption {
|
||||
margin: @content-margin-top / 2 0 0;
|
||||
margin: @content-margin-top / 2 0;
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,178 +1,92 @@
|
|||
|
||||
/*
|
||||
* Hide some extra stuff from print view
|
||||
* (some of the navigation is already hidden automatically, but not all)
|
||||
*/
|
||||
// Hide elements that are not needed in print
|
||||
.mw-header,
|
||||
#siteNotice,
|
||||
.mw-indicators,
|
||||
.toctoggle,
|
||||
.mw-side,
|
||||
.noprint,
|
||||
#catlinks,
|
||||
#p-namespaces,
|
||||
#p-variants,
|
||||
#footer-bottom,
|
||||
#toc,
|
||||
.hatnote,
|
||||
.mbox,
|
||||
.mw-sidebar-sitename,
|
||||
.tabbernav,
|
||||
.embedvideo {
|
||||
display: none !important;
|
||||
.page-actions,
|
||||
.section-toggle,
|
||||
.mw-editsection,
|
||||
.catlinks,
|
||||
.mw-footer nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-shadow: none !important;
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
color: @base-20;
|
||||
font-family: @fonts;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
margin: 0.8rem 0 0 0;
|
||||
}
|
||||
|
||||
.mw-body {
|
||||
color: @base-20;
|
||||
}
|
||||
|
||||
.mw-body .firstHeading {
|
||||
overflow: inherit;
|
||||
padding-top: 1.2rem;
|
||||
.firstHeading {
|
||||
margin: 0;
|
||||
color: @base-10;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.mw-body h1,
|
||||
.mw-body-content h1 {
|
||||
font-size: @content-h1-size;
|
||||
}
|
||||
|
||||
.mw-body-content {
|
||||
font-size: @content-body-size;
|
||||
line-height: @content-line-height;
|
||||
|
||||
#contentSub,
|
||||
#contentSub2 {
|
||||
color: @base-30;
|
||||
font-size: @content-caption-size;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: @color-content-header;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: @content-margin-top * 3;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p + p {
|
||||
margin-top: @content-margin-top * 2;
|
||||
}
|
||||
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
h1 + h2,
|
||||
h2 + h3,
|
||||
h3 + h4,
|
||||
h4 + h5,
|
||||
h5 + h6,
|
||||
p,
|
||||
table {
|
||||
margin-top: @content-margin-top;
|
||||
}
|
||||
/* stylelint-enable */
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: @content-margin-top 0 0 @content-margin-top * 2;
|
||||
|
||||
ul {
|
||||
margin: 0 0 0 @content-margin-top * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#siteSub {
|
||||
display: block;
|
||||
margin: 0.4rem 0 1.6rem;
|
||||
color: #72777d;
|
||||
font-size: 0.8125rem;
|
||||
color: @color-base30;
|
||||
}
|
||||
|
||||
.mw-body-header {
|
||||
margin-bottom: @content-margin-top;
|
||||
}
|
||||
|
||||
.printfooter {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mw-footer {
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid @base-30;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid;
|
||||
margin-top: 20px;
|
||||
color: @color-base30;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
// Table of contents
|
||||
.toc {
|
||||
display: table;
|
||||
padding: 10px;
|
||||
border: 1px solid;
|
||||
margin-top: @content-margin-top;
|
||||
font-size: 14px;
|
||||
|
||||
&title {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
.last-modified-bar {
|
||||
padding-bottom: 1rem;
|
||||
font-size: @content-caption-size;
|
||||
#mw-toc-heading {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.mw-wiki-title {
|
||||
color: @base-30;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
.thumb {
|
||||
margin-top: @content-margin-top;
|
||||
margin-bottom: @content-margin-top;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
margin: 0 !important;
|
||||
// Float styles
|
||||
div.tleft,
|
||||
div.floatleft,
|
||||
table.floatleft {
|
||||
margin-right: 1.4rem;
|
||||
clear: left;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.infobox {
|
||||
border: 1px solid @base-30 !important;
|
||||
background: @base-100 !important;
|
||||
div.tright,
|
||||
div.floatright,
|
||||
table.floatright {
|
||||
margin-left: 1.4rem;
|
||||
clear: right;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.tabbertab {
|
||||
display: block !important;
|
||||
// Gallery
|
||||
.skin-citizen {
|
||||
ul.mw-gallery-packed {
|
||||
&-hover,
|
||||
&-overlay {
|
||||
div.thumb:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,12 +10,12 @@
|
|||
.mw-body-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.8rem;
|
||||
margin-bottom: @content-margin-top;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
flex-grow: 1;
|
||||
margin-bottom: 0.8rem;
|
||||
margin-bottom: @content-margin-top;
|
||||
}
|
||||
|
||||
.firstHeading-container {
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
.thumb {
|
||||
margin: 0.6rem 0;
|
||||
margin: @content-margin-top 0;
|
||||
|
||||
.thumbinner {
|
||||
max-width: 100%;
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
|
||||
@import '../variables.less';
|
||||
@import '../mixins.less';
|
||||
@import 'common/typography.less';
|
||||
|
||||
@media screen {
|
||||
@import 'common/rootvariables.less';
|
||||
@import 'layout.less';
|
||||
@import 'common/common.less';
|
||||
@import 'common/content.less';
|
||||
@import 'common/typography.less';
|
||||
@import 'common/hacks.less';
|
||||
@import 'common/wikitable.less';
|
||||
@import 'common/reducemotion.less';
|
||||
|
|
|
|||
Loading…
Reference in a new issue