mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-15 02:24:04 +00:00
feat(core): ✨ clean up elements styles
This commit is contained in:
alistair3149
parent
0268c2d158
commit
20d8d0d0d4
|
|
@ -20,49 +20,6 @@ body {
|
|||
outline-color: var( --color-primary );
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var( --color-base--emphasized );
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
table {
|
||||
overflow: auto;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var( --border-color-base--darker );
|
||||
}
|
||||
|
||||
p,
|
||||
dl {
|
||||
margin: @content-margin-top 0 0 0;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
.mw-code {
|
||||
border: 1px solid var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
pre,
|
||||
.mw-code {
|
||||
overflow: auto;
|
||||
padding: 1rem;
|
||||
border-radius: var( --border-radius--large );
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
|
|
@ -71,18 +28,6 @@ textarea {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: @content-margin-top / 2 20px;
|
||||
border: 1px solid var( --border-color-base );
|
||||
margin: @content-margin-top 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 4px;
|
||||
margin: 0;
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -106,11 +51,6 @@ sub {
|
|||
line-height: 1;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: 0.1rem;
|
||||
margin-left: @content-margin-top * 2;
|
||||
}
|
||||
|
||||
td {
|
||||
> p,
|
||||
> ul,
|
||||
|
|
@ -121,35 +61,6 @@ td {
|
|||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var( --color-link );
|
||||
text-decoration: none;
|
||||
|
||||
&:not( [ href ] ) {
|
||||
cursor: pointer;
|
||||
/* Always cursor:pointer even without href */
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var( --color-link--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var( --color-link--active );
|
||||
}
|
||||
|
||||
&.new,
|
||||
&.new:visited {
|
||||
&:hover {
|
||||
color: var( --color-link-new--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var( --color-link-new--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -184,10 +95,6 @@ video {
|
|||
.skin-citizen-dark {
|
||||
color-scheme: dark;
|
||||
|
||||
.mw-editsection > a:before {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
|
||||
.mw-indicator {
|
||||
filter: invert( 1 ) hue-rotate( 180deg );
|
||||
|
||||
|
|
|
|||
|
|
@ -20,46 +20,6 @@
|
|||
}
|
||||
|
||||
.citizen-body {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: @content-margin-top * 3;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: @content-margin-top * 2;
|
||||
}
|
||||
|
||||
h1 + h2,
|
||||
h2 + h3,
|
||||
h3 + h4,
|
||||
h4 + h5,
|
||||
h5 + h6 {
|
||||
margin-top: @content-margin-top;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: @content-margin-top;
|
||||
margin-bottom: @content-margin-top;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a.image {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
|
@ -77,11 +37,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.plainlist ol,
|
||||
.plainlist ul {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -19,28 +19,10 @@ b {
|
|||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
tt,
|
||||
kbd,
|
||||
samp,
|
||||
.mw-code {
|
||||
font-family: var( --font-family-monospace );
|
||||
font-size: @content-monospace-size;
|
||||
}
|
||||
|
||||
cite {
|
||||
font-style: inherit;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
font-size: @content-monospace-size;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-family: var( --font-family-serif );
|
||||
font-style: italic;
|
||||
|
|
@ -52,10 +34,6 @@ blockquote {
|
|||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 80%;
|
||||
|
|
@ -82,8 +60,6 @@ figcaption,
|
|||
}
|
||||
|
||||
.firstHeading {
|
||||
font-size: var( --font-size-h1 );
|
||||
|
||||
&-parenthesis {
|
||||
font-size: var( --font-size-h3 );
|
||||
}
|
||||
|
|
@ -92,39 +68,6 @@ figcaption,
|
|||
.citizen-body,
|
||||
.mw-body-content {
|
||||
line-height: var( --line-height );
|
||||
|
||||
h1 {
|
||||
font-size: var( --font-size-h1 );
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var( --font-size-h2 );
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var( --font-size-h3 );
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var( --font-size-h4 );
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var( --font-size-h5 );
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var( --font-size-h6 );
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: var( --line-height-xs );
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
mask-size: contain;
|
||||
}
|
||||
|
||||
// Somehow this get overriden
|
||||
// Somehow this get overriden from content.links
|
||||
&:hover,
|
||||
&:visited:hover {
|
||||
color: var( --color-link--hover );
|
||||
|
|
|
|||
|
|
@ -7,9 +7,23 @@
|
|||
* Date: 2022-11-14
|
||||
*/
|
||||
|
||||
// Needed the specificity
|
||||
// Be more specific to replace default style
|
||||
.skin-citizen {
|
||||
a.mw-selflink {
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
}
|
||||
|
||||
// Hover states addition for new links
|
||||
a {
|
||||
&.new,
|
||||
&.new:visited {
|
||||
&:hover {
|
||||
color: var( --color-link-new--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var( --color-link-new--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,105 @@
|
|||
* Date: 2022-11-14
|
||||
*/
|
||||
|
||||
/* Links */
|
||||
// Some of the link styles are handled in content.links
|
||||
a {
|
||||
color: var( --color-link );
|
||||
text-decoration: none;
|
||||
|
||||
&:not( [ href ] ) {
|
||||
cursor: pointer; /* Always cursor:pointer even without href */
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var( --color-link--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var( --color-link--active );
|
||||
}
|
||||
}
|
||||
|
||||
a:lang( ar ),
|
||||
a:lang( kk-arab ),
|
||||
a:lang( mzn ),
|
||||
a:lang( ps ),
|
||||
a:lang( ur ) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Inline Elements */
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var( --border-color-base );
|
||||
margin: var( --space-md ) 0;
|
||||
}
|
||||
|
||||
/* Structural Elements */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
color: var( --color-base--emphasized );
|
||||
font-weight: var( --font-weight-semibold );
|
||||
line-height: var( --line-height-xs );
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 1.25em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var( --font-size-h1 );
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var( --font-size-h2 );
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var( --font-size-h3 );
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var( --font-size-h4 );
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var( --font-size-h5 );
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var( --font-size-h6 );
|
||||
}
|
||||
|
||||
p {
|
||||
margin: var( --space-md ) 0;
|
||||
overflow-wrap: break-word; // Force wrap to preserve layout
|
||||
}
|
||||
|
||||
p img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
// Will break a lot of styles if we use padding for horizontal spacing
|
||||
padding: 0;
|
||||
|
|
@ -17,3 +116,79 @@ ol {
|
|||
padding: 0;
|
||||
margin: var( --space-md ) 0 var( --space-md ) var( --space-lg );
|
||||
}
|
||||
|
||||
dt {
|
||||
color: var( --color-base--emphasized );
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: var( --space-md ) 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: var( --space-lg );
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
tt,
|
||||
kbd,
|
||||
samp,
|
||||
.mw-code {
|
||||
font-family: var( --font-family-monospace );
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
.mw-code {
|
||||
border: 1px solid var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
border-radius: var( --border-radius--small );
|
||||
}
|
||||
|
||||
pre,
|
||||
.mw-code {
|
||||
overflow: auto;
|
||||
padding: 1rem;
|
||||
border-radius: var( --border-radius--large );
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
// Add some responsiveness
|
||||
// TODO: Consider adding a wrapper to make it truly responsive like Timeless
|
||||
table {
|
||||
overflow: auto;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
fieldset {
|
||||
padding: var( --space-xs ) var( --space-md );
|
||||
border: 1px solid var( --border-color-base );
|
||||
margin: var( --space-md ) 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: var( --space-xxs );
|
||||
color: var( --color-base--subtle );
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Emulate Center */
|
||||
.center {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
*.center * {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue