mediawiki-skins-Citizen/resources/components/common.less
2019-11-12 15:40:11 -05:00

980 lines
21 KiB
Plaintext

/*
* 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 {
height: 100%;
margin: 0;
padding: 0;
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;
}
ol {
list-style-type: none;
}
ul,
ol {
padding: 0;
}
p,
ul,
ol {
margin: 0.8rem 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;
}
textarea {
width: 100%;
}
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: 400;
}
.firstHeading {
padding-top: 1.2rem;
line-height: 1.2;
}
/*
* Content
*/
#mw-wrapper {
overflow: hidden;
}
.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;
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;
}
.firstHeading {
margin: 0;
overflow: inherit; // black magic to wrap in small screen devices
}
#siteSub {
display: block;
margin: .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;
color: @color-content-text;
#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: #cccccc;
overflow: auto;
&::-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;
}
li {
color: @base-50;
}
li.active {
color: @accent-50 !important;
>a {
color: inherit !important;
}
}
a {
display: inline-block;
margin-top: @content-margin-top;
color: @base-50;
background: 0;
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 {
direction: rtl; // Hack to force right alignment, need to fix for RTL
margin: @content-margin-top / 2 3px 0 0;
position: relative;
z-index: 2;
border-right: 1px dashed;
display: block;
>li {
margin-right: -3px;
}
}
ul {
list-style-type: disc;
list-style-position: inside;
}
ul,
.toctitle {
text-align: right;
}
}
}
}
p {
line-height: inherit;
}
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;
font-weight: 400;
}
h5,
h6 {
font-weight: 600;
}
p {
overflow-wrap: break-word;
}
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: 0.8rem 0 0 1.6rem;
}
dl,
dd {
margin: 0;
}
img {
vertical-align: middle;
}
.mw-references-wrap {
margin: 0.8rem 0 0 0;
color: @base-30;
column-width: 30em;
font-size: @content-small-text-size;
.references {
margin: 0;
}
}
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);
}
}
}
}
// 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 {
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(0px, @header-height + @margin-side);
transition: @transition-opacity, @transition-transform, @transition-box-shadow-quick;
transition-duration: 0.5s !important; // Override duration 0 for ToC
&:hover {
.boxshadow(5);
&:before {
opacity: @opacity-icon-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 {
margin: 0 @margin-side;
padding: @header-height + @margin-side 0 @header-height + @margin-side * 2; // More scroll spaces
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
}
}
*/