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

feat: unify icon opacity and states

Browse source
This commit is contained in:
alistair3149 2021-01-14 12:20:15 -05:00
parent 395892fa8b
commit 7db6a19a44
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
10 changed files with 64 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
resources/skins.citizen.styles/Drawer.less
View file

@ -131,7 +131,7 @@
display: block; display: block;
margin-left: @icon-padding; margin-left: @icon-padding;
background-size: contain; background-size: contain;
opacity: 0.4; opacity: var( --opacity-icon-base );
transition: @transition-opacity-quick; transition: @transition-opacity-quick;
} }
@ -139,12 +139,16 @@
.menu-item-link-hover; .menu-item-link-hover;
&:after { &:after {
opacity: 0.6; opacity: var( --opacity-icon-base--hover );
} }
} }
&:active { &:active {
.menu-item-link-active; .menu-item-link-active;
&:after {
opacity: var( --opacity-icon-base--active );
}
} }
} }
} }

2
resources/skins.citizen.styles/Footer.less
View file

@ -15,7 +15,7 @@
margin-right: @icon-padding; margin-right: @icon-padding;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
opacity: @opacity-icon; opacity: var( --opacity-icon-base );
} }
&-text { &-text {

2
resources/skins.citizen.styles/Pagelinks.less
View file

@ -43,7 +43,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
content: ''; content: '';
opacity: 0.5; opacity: var( --opacity-icon-base );
} }
} }
} }

31
resources/skins.citizen.styles/Pagetools.less
View file

@ -20,11 +20,15 @@
.resource-loader-icon-link; .resource-loader-icon-link;
padding: 5px; padding: 5px;
font-size: 0; font-size: 0;
opacity: @opacity-icon; opacity: var( --opacity-icon-base );
transition: @transition-opacity; transition: @transition-opacity-quick;
&:hover { &:hover {
opacity: @opacity-icon-active; opacity: var( --opacity-icon-base--hover );
}
&:active {
opacity: var( --opacity-icon-base--active );
} }
&:after { &:after {
@ -62,30 +66,28 @@
&:after { &:after {
.resource-loader-list-icon; .resource-loader-list-icon;
margin-left: @icon-padding; margin-left: @icon-padding;
opacity: @opacity-icon; opacity: var( --opacity-icon-base );
}
&:hover,
&:active,
&:focus {
&:after {
opacity: @opacity-icon-active;
}
} }
&:hover { &:hover {
.menu-item-link-hover; .menu-item-link-hover;
&:after {
opacity: var( --opacity-icon-base--hover );
}
} }
&:active { &:active {
.menu-item-link-active; .menu-item-link-active;
&:after {
opacity: var( --opacity-icon-base--active );
}
} }
} }
} }
&:before { &:before {
.resource-loader-menu-icon; .resource-loader-menu-icon;
opacity: @opacity-icon; opacity: var( --opacity-icon-base );
} }
&:hover ul { &:hover ul {
@ -102,7 +104,8 @@
} }
} }
#p-views { #p-views,
#p-actions {
li > a:after { li > a:after {
filter: invert( 1 ); filter: invert( 1 );
} }

15
resources/skins.citizen.styles/Searchbox.less
View file

@ -24,7 +24,7 @@
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 14px; background-size: 14px;
opacity: @opacity-icon; opacity: var( --opacity-icon-base );
} }
&-random { &-random {
@ -36,13 +36,17 @@
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 18px; background-size: 18px;
opacity: @opacity-icon; opacity: var( --opacity-icon-base );
transition: @transition-transform-quick, @transition-opacity-quick; transition: @transition-transform-quick, @transition-opacity-quick;
&:hover { &:hover {
opacity: @opacity-icon-active; opacity: var( --opacity-icon-base--hover );
transform: rotate( 30deg ); transform: rotate( 30deg );
} }
&:active {
opacity: var( --opacity-icon-base--active );
}
} }
} }
@ -290,11 +294,6 @@
&-icon, &-icon,
&-random { &-random {
filter: invert( 1 ); filter: invert( 1 );
opacity: 0.4;
}
&-random:hover {
opacity: 0.6;
} }
} }
} }

2
resources/skins.citizen.styles/Sidebar.less
View file

@ -4,7 +4,7 @@
left: @margin-side; left: @margin-side;
font-size: 11px; font-size: 11px;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
transition: @transition-opacity; transition: @transition-opacity-quick;
visibility: visible; visibility: visible;
.mw-wiki-title { .mw-wiki-title {

14
resources/skins.citizen.styles/common/common.less
View file

@ -208,20 +208,6 @@ a {
} }
} }
.mw-wiki-title {
a& {
color: @base-50;
transition: @transition-opacity;
&:hover,
&:active,
&:focus {
color: @base-30;
text-decoration: none;
}
}
}
figcaption, figcaption,
.thumbcaption { .thumbcaption {
margin: @content-margin-top / 2 0 0; margin: @content-margin-top / 2 0 0;

14
resources/skins.citizen.styles/common/content.less
View file

@ -115,9 +115,9 @@
.resource-loader-icon-link-small; .resource-loader-icon-link-small;
padding: @margin-side / 4; padding: @margin-side / 4;
background: 0 !important; // Cancel above styles background: 0 !important; // Cancel above styles
opacity: @opacity-icon; opacity: var( --opacity-icon-base );
text-indent: -9999px; // Hide text text-indent: -9999px; // Hide text
transition: @transition-opacity; transition: @transition-opacity-quick;
&:before { &:before {
.resource-loader-icon; .resource-loader-icon;
@ -125,10 +125,12 @@
background-size: contain; background-size: contain;
} }
&:hover, &:hover {
&:active, opacity: var( --opacity-icon-base--hover );
&:focus { }
opacity: @opacity-icon-active;
&:active {
opacity: var( --opacity-icon-base--active );
} }
} }

8
resources/skins.citizen.styles/common/rootvariables.less
View file

@ -48,6 +48,11 @@
--color-primary--hover: @color-primary--hover; --color-primary--hover: @color-primary--hover;
--color-primary--active: @color-primary--active; --color-primary--active: @color-primary--active;
/* Opacity */
--opacity-icon-base: @opacity-icon-base;
--opacity-icon-base--hover: @opacity-icon-base--hover;
--opacity-icon-base--active: @opacity-icon-base--active;
/* Border Colors */ /* Border Colors */
--border-color-base: @border-color-base; --border-color-base: @border-color-base;
--border-color-base--lighter: @border-color-base--lighter; --border-color-base--lighter: @border-color-base--lighter;
@ -89,6 +94,9 @@
--color-base--emphasized: @dark-color-base--emphasized; --color-base--emphasized: @dark-color-base--emphasized;
--color-base--subtle: @dark-color-base--subtle; --color-base--subtle: @dark-color-base--subtle;
/* Opacity */
--opacity-icon-base--active: @dark-opacity-icon-base--active;
/* Border Colors */ /* Border Colors */
--border-color-base: @dark-border-color-base; --border-color-base: @dark-border-color-base;
--border-color-base--lighter: @dark-border-color-base--lighter; --border-color-base--lighter: @dark-border-color-base--lighter;

20
resources/variables.less
View file

@ -77,9 +77,9 @@
@background-color-framed: @color-base90; @background-color-framed: @color-base90;
@background-color-framed--hover: @color-base80; @background-color-framed--hover: @color-base80;
@background-color-framed--active: @color-base70; @background-color-framed--active: @color-base70;
@background-color-icon: rgba( 0, 0, 0, 0.3 ); @background-color-icon: rgba( 0, 0, 0, 0.4 );
@background-color-icon--hover: rgba( 0, 0, 0, 0.4 ); @background-color-icon--hover: rgba( 0, 0, 0, 0.6 );
@background-color-icon--active: rgba( 0, 0, 0, 0.6 ); @background-color-icon--active: rgba( 0, 0, 0, 0.8 );
@background-color-quiet: transparent; @background-color-quiet: transparent;
@background-color-quiet--hover: rgba( 0, 0, 0, 0.04 ); @background-color-quiet--hover: rgba( 0, 0, 0, 0.04 );
@background-color-quiet--active: rgba( 0, 0, 0, 0.06 ); @background-color-quiet--active: rgba( 0, 0, 0, 0.06 );
@ -101,6 +101,11 @@
@color-primary--hover: @color-accent50--lighten; @color-primary--hover: @color-accent50--lighten;
@color-primary--active: @color-accent30; @color-primary--active: @color-accent30;
/* Opacity */
@opacity-icon-base: 0.4;
@opacity-icon-base--hover: 0.6;
@opacity-icon-base--active: 0.8;
/* Border Colors */ /* Border Colors */
@border-color-base: rgba( 0, 0, 0, 0.05 ); @border-color-base: rgba( 0, 0, 0, 0.05 );
@border-color-base--lighter: rgba( 0, 0, 0, 0.02 ); @border-color-base--lighter: rgba( 0, 0, 0, 0.02 );
@ -121,8 +126,8 @@
@dark-background-color-framed: @dark-color-base20; @dark-background-color-framed: @dark-color-base20;
@dark-background-color-framed--hover: @dark-color-base30; @dark-background-color-framed--hover: @dark-color-base30;
@dark-background-color-framed--active: @dark-color-base10; @dark-background-color-framed--active: @dark-color-base10;
@dark-background-color-icon: rgba( 255, 255, 255, 0.3 ); @dark-background-color-icon: rgba( 255, 255, 255, 0.4 );
@dark-background-color-icon--hover: rgba( 255, 255, 255, 0.4 ); @dark-background-color-icon--hover: rgba( 255, 255, 255, 0.6 );
@dark-background-color-icon--active: rgba( 255, 255, 255, 0.2 ); @dark-background-color-icon--active: rgba( 255, 255, 255, 0.2 );
// @dark-background-color-quiet: transparent; // @dark-background-color-quiet: transparent;
@dark-background-color-quiet--hover: rgba( 255, 255, 255, 0.04 ); @dark-background-color-quiet--hover: rgba( 255, 255, 255, 0.04 );
@ -138,6 +143,11 @@
@dark-color-base--emphasized: rgba( 255, 255, 255, 0.87 ); @dark-color-base--emphasized: rgba( 255, 255, 255, 0.87 );
@dark-color-base--subtle: rgba( 255, 255, 255, 0.38 ); @dark-color-base--subtle: rgba( 255, 255, 255, 0.38 );
/* Opacity */
// @dark-opacity-icon-base: 0.4;
// @dark-opacity-icon-base--hover: 0.6;
@dark-opacity-icon-base--active: 0.2;
/* Border Colors */ /* Border Colors */
@dark-border-color-base: rgba( 255, 255, 255, 0.05 ); @dark-border-color-base: rgba( 255, 255, 255, 0.05 );
@dark-border-color-base--lighter: rgba( 255, 255, 255, 0.02 ); @dark-border-color-base--lighter: rgba( 255, 255, 255, 0.02 );