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;
margin-left: @icon-padding;
background-size: contain;
opacity: 0.4;
opacity: var( --opacity-icon-base );
transition: @transition-opacity-quick;
}
@ -139,12 +139,16 @@
.menu-item-link-hover;
&:after {
opacity: 0.6;
opacity: var( --opacity-icon-base--hover );
}
}
&: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;
background-position: center;
background-repeat: no-repeat;
opacity: @opacity-icon;
opacity: var( --opacity-icon-base );
}
&-text {

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

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

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

@ -24,7 +24,7 @@
background-position: center;
background-repeat: no-repeat;
background-size: 14px;
opacity: @opacity-icon;
opacity: var( --opacity-icon-base );
}
&-random {
@ -36,13 +36,17 @@
background-position: center;
background-repeat: no-repeat;
background-size: 18px;
opacity: @opacity-icon;
opacity: var( --opacity-icon-base );
transition: @transition-transform-quick, @transition-opacity-quick;
&:hover {
opacity: @opacity-icon-active;
opacity: var( --opacity-icon-base--hover );
transform: rotate( 30deg );
}
&:active {
opacity: var( --opacity-icon-base--active );
}
}
}
@ -290,11 +294,6 @@
&-icon,
&-random {
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;
font-size: 11px;
-webkit-font-smoothing: subpixel-antialiased;
transition: @transition-opacity;
transition: @transition-opacity-quick;
visibility: visible;
.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,
.thumbcaption {
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;
padding: @margin-side / 4;
background: 0 !important; // Cancel above styles
opacity: @opacity-icon;
opacity: var( --opacity-icon-base );
text-indent: -9999px; // Hide text
transition: @transition-opacity;
transition: @transition-opacity-quick;
&:before {
.resource-loader-icon;
@ -125,10 +125,12 @@
background-size: contain;
}
&:hover,
&:active,
&:focus {
opacity: @opacity-icon-active;
&:hover {
opacity: var( --opacity-icon-base--hover );
}
&: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--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-color-base: @border-color-base;
--border-color-base--lighter: @border-color-base--lighter;
@ -89,6 +94,9 @@
--color-base--emphasized: @dark-color-base--emphasized;
--color-base--subtle: @dark-color-base--subtle;
/* Opacity */
--opacity-icon-base--active: @dark-opacity-icon-base--active;
/* Border Colors */
--border-color-base: @dark-border-color-base;
--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--hover: @color-base80;
@background-color-framed--active: @color-base70;
@background-color-icon: rgba( 0, 0, 0, 0.3 );
@background-color-icon--hover: rgba( 0, 0, 0, 0.4 );
@background-color-icon--active: rgba( 0, 0, 0, 0.6 );
@background-color-icon: 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.8 );
@background-color-quiet: transparent;
@background-color-quiet--hover: rgba( 0, 0, 0, 0.04 );
@background-color-quiet--active: rgba( 0, 0, 0, 0.06 );
@ -101,6 +101,11 @@
@color-primary--hover: @color-accent50--lighten;
@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-color-base: rgba( 0, 0, 0, 0.05 );
@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--hover: @dark-color-base30;
@dark-background-color-framed--active: @dark-color-base10;
@dark-background-color-icon: rgba( 255, 255, 255, 0.3 );
@dark-background-color-icon--hover: rgba( 255, 255, 255, 0.4 );
@dark-background-color-icon: 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-quiet: transparent;
@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--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 */
@dark-border-color-base: rgba( 255, 255, 255, 0.05 );
@dark-border-color-base--lighter: rgba( 255, 255, 255, 0.02 );