StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-29 00:31:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Figure caption and blockquote styles update

Browse source
This commit is contained in:
alistair3149 2020-02-06 14:44:28 -05:00
parent 6dfe6aace2
commit 77bd2e0bea
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
2 changed files with 883 additions and 854 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
resources/components/common.less
View file

@ -99,7 +99,7 @@ fieldset {
padding: @content-margin-top / 2 @margin-side; padding: @content-margin-top / 2 @margin-side;
} }
fieldset > table { fieldset>table {
margin-top: 0 !important; margin-top: 0 !important;
} }
@ -114,6 +114,22 @@ 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 { dd {
margin-left: @content-margin-top * 2; margin-left: @content-margin-top * 2;
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
@ -125,9 +141,10 @@ dt {
} }
td { td {
> p,
> ul, >p,
> ol { >ul,
>ol {
&:first-child { &:first-child {
margin-top: 0; // Remove margin for the first element in td margin-top: 0; // Remove margin for the first element in td
} }
@ -138,7 +155,7 @@ a {
color: @color-link; color: @color-link;
text-decoration: none !important; text-decoration: none !important;
&:not( [ href ] ) { &:not([ href]) {
cursor: pointer; cursor: pointer;
/* Always cursor:pointer even without href */ /* Always cursor:pointer even without href */
} }
@ -321,22 +338,22 @@ a {
order: -1; // Make sure that header is the first order: -1; // Make sure that header is the first
} }
& > h1, &>h1,
& > h2, &>h2,
& > h3, &>h3,
& > h4, &>h4,
& > h5, &>h5,
& > h6 { &>h6 {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
a:not( .external ):not( .selflink ) { a:not(.external):not(.selflink) {
.link-content-text(@color-link-active); .link-content-text(@color-link-active);
&.new { &.new {
background-image: linear-gradient( to right, @color-link-new-active 0, @color-link-new-active 100% ); 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
@ -351,7 +368,7 @@ a {
display: flex; display: flex;
margin: 0; margin: 0;
left: 0; left: 0;
transform: ~'translateX(calc(-100% - @{margin-side}))'; transform:~'translateX(calc(-100% - @{margin-side}))';
a { a {
.resource-loader-icon-link-small; .resource-loader-icon-link-small;
@ -374,7 +391,7 @@ a {
} }
} }
> span { >span {
display: none; display: none;
} }
} }
@ -382,7 +399,7 @@ a {
#toc { #toc {
position: fixed; position: fixed;
max-width: 450px; max-width: 450px;
height: ~'calc( 100vh - @{header-height} * 2 - @{margin-side} * 4 )'; height:~'calc( 100vh - @{header-height} * 2 - @{margin-side} * 4 )';
top: @header-height; top: @header-height;
right: 0; right: 0;
padding: @margin-side * 2 @margin-side; padding: @margin-side * 2 @margin-side;
@ -430,7 +447,7 @@ a {
li.active { li.active {
color: @accent-50 !important; color: @accent-50 !important;
> a { >a {
color: inherit !important; color: inherit !important;
border-color: currentColor; border-color: currentColor;
} }
@ -477,17 +494,17 @@ a {
} }
&.tochidden { &.tochidden {
> ul { >ul {
display: block !important; // Force display display: block !important; // Force display
} }
} }
> ul { >ul {
margin: @content-margin-top / 2 0 0 0; margin: @content-margin-top / 2 0 0 0;
position: relative; position: relative;
z-index: 2; z-index: 2;
border-right: 1px dashed; border-right: 1px dashed;
max-height: ~'calc( 100vh - @{header-height} * 2 - @{margin-side} * 4 )'; max-height:~'calc( 100vh - @{header-height} * 2 - @{margin-side} * 4 )';
overflow: visible auto; overflow: visible auto;
overscroll-behavior: contain; overscroll-behavior: contain;
display: block; display: block;
@ -566,15 +583,15 @@ a {
h4, h4,
h5, h5,
h6, h6,
p + p { p+p {
margin-top: @content-margin-top * 2; margin-top: @content-margin-top * 2;
} }
h1 + h2, h1+h2,
h2 + h3, h2+h3,
h3 + h4, h3+h4,
h4 + h5, h4+h5,
h5 + h6, h5+h6,
p, p,
table { table {
margin-top: @content-margin-top; margin-top: @content-margin-top;
@ -645,7 +662,7 @@ a {
display: flex; display: flex;
justify-content: center; justify-content: center;
> * { >* {
width: 100% !important; width: 100% !important;
height: auto; height: auto;
} }
@ -680,21 +697,22 @@ a {
margin: @content-margin-top / 2 0 0; margin: @content-margin-top / 2 0 0;
color: @base-30; color: @base-30;
font-size: @content-caption-size; font-size: @content-caption-size;
font-style: italic;
} }
.thumb { .thumb {
overflow: hidden; overflow: hidden;
> .thumbinner { >.thumbinner {
> a { >a {
transition: @transition-box-shadow-quick !important; transition: @transition-box-shadow-quick !important;
&:hover:not( .lazy ):not( .new ) { &:hover:not(.lazy):not(.new) {
background: 0 !important; background: 0 !important;
.boxshadow(2); .boxshadow(2);
img { img {
transform: scale( 1.1 ); transform: scale(1.1);
} }
} }
@ -725,7 +743,7 @@ a {
&.lazy { &.lazy {
display: block; display: block;
background-color: @base-90; background-color: @base-90;
filter: blur( 8px ); filter: blur(8px);
overflow: hidden; overflow: hidden;
} }
} }
@ -794,7 +812,7 @@ a {
.mw-normal-catlinks { .mw-normal-catlinks {
font-size: 0; // Hide colon font-size: 0; // Hide colon
> a { >a {
display: block; display: block;
color: @color-content-caption; color: @color-content-caption;
font-size: @content-caption-size; font-size: @content-caption-size;
@ -802,7 +820,7 @@ a {
letter-spacing: 1px; letter-spacing: 1px;
} }
> ul { >ul {
margin: 0; margin: 0;
padding-top: @content-margin-top; padding-top: @content-margin-top;
display: flex; display: flex;
@ -832,7 +850,7 @@ a {
background-color: @color-link-active; background-color: @color-link-active;
border-color: @color-link-active; border-color: @color-link-active;
color: @base-100 !important; color: @base-100 !important;
transform: translateY( -2px ); transform: translateY(-2px);
.boxshadow(2); .boxshadow(2);
} }
@ -858,7 +876,8 @@ a {
display: none !important; display: none !important;
} }
@media only screen and ( max-width: @screen0 ) { @media only screen and (max-width: @screen0 ) {
div.tnone, div.tnone,
div.floatnone, div.floatnone,
table.floatnone, table.floatnone,
@ -882,7 +901,8 @@ a {
} }
} }
@media only screen and ( max-width: @screen1 ) { @media only screen and (max-width: @screen1 ) {
.catlinks, .catlinks,
#p-namespaces { #p-namespaces {
margin: 0 !important; // somehow got overrided margin: 0 !important; // somehow got overrided
@ -890,7 +910,7 @@ a {
} }
} }
@media only screen and ( max-width: @screen2 ) { @media only screen and (max-width: @screen2 ) {
.mw-editsection { .mw-editsection {
position: relative !important; position: relative !important;
transform: none !important; transform: none !important;
@ -914,7 +934,7 @@ a {
margin: 0.6rem~'calc((100vw - @{page-width}) / -2)'; margin: 0.6rem~'calc((100vw - @{page-width}) / -2)';
a.image, a.image,
a.image > img { a.image>img {
width: 100% !important; width: 100% !important;
height: auto !important; height: auto !important;
} }
@ -922,12 +942,13 @@ a {
} }
} }
@media only screen and ( max-width: @screen3 ) { @media only screen and (max-width: @screen3 ) {
.webfonts-changed #toc { .webfonts-changed #toc {
display: block !important; // Hide until everything is loaded display: block !important; // Hide until everything is loaded
} }
.mw-body-content { .mw-body-content {
div.tleft, div.tleft,
div.floatleft, div.floatleft,
table.floatleft { table.floatleft {
@ -981,7 +1002,7 @@ a {
background-color: @base-90; background-color: @base-90;
border-radius: 100%; border-radius: 100%;
.boxshadow(4); .boxshadow(4);
transform: translate( 0, @header-height + @margin-side ); transform: translate(0, @header-height + @margin-side );
transition: @transition-opacity, @transition-transform, @transition-box-shadow-quick; transition: @transition-opacity, @transition-transform, @transition-box-shadow-quick;
transition-duration: 0.5s !important; // Override duration 0 for ToC transition-duration: 0.5s !important; // Override duration 0 for ToC
@ -1011,13 +1032,13 @@ a {
} }
&.tochidden { &.tochidden {
> ul { >ul {
display: none !important; // Reset hide display: none !important; // Reset hide
transform: translateX( 300px + @margin-side ); transform: translateX(300px + @margin-side );
} }
} }
> ul { >ul {
display: none; // Hide until interacted display: none; // Hide until interacted
margin: 0 @margin-side; margin: 0 @margin-side;
padding: @header-height + @margin-side 0 @header-height + @margin-side * 2; // More scroll spaces padding: @header-height + @margin-side 0 @header-height + @margin-side * 2; // More scroll spaces
@ -1029,13 +1050,14 @@ a {
} }
.nav-up { .nav-up {
~ .mw-body .mw-body-content #mw-content-text .mw-parser-output #toc .toctoggle a { ~.mw-body .mw-body-content #mw-content-text .mw-parser-output #toc .toctoggle a {
transform: none; transform: none;
} }
} }
} }
@media only screen and ( min-width: @screen4 ) { @media only screen and (min-width: @screen4 ) {
div.tnone, div.tnone,
div.floatnone, div.floatnone,
table.floatnone, table.floatnone,
@ -1054,6 +1076,7 @@ a {
margin-right: @negative-margin !important; margin-right: @negative-margin !important;
} }
} }
/* /*
// Logged in styles // Logged in styles
.not-logged { .not-logged {

12
resources/variables.less
View file

@ -143,14 +143,20 @@
*/ */
@fonts: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif; @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 * `Titillium Web` – Futuristic, Closet to Univia Pro, OFL licensed
* `Univia Pro` - Fallback font if Univia Pro is present * `Univia Pro` - Fallback font if Univia Pro is present
* 'Monoid' - Code font, OFL licensed
* Fallback using primary fonts * 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 * System font stack for monospace fonts
* *