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

refactor: use common CSS variables for search suggestion

Browse source
This commit is contained in:
alistair3149 2021-01-12 15:46:40 -05:00
parent de0dcd6c75
commit 3f60ca2b14
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
4 changed files with 35 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
resources/skins.citizen.styles.search/skins.citizen.styles.search.less
View file

@ -6,44 +6,6 @@
@import '../variables.less';
@import '../mixins.less';
:root {
--suggestion-dropdown-background-color: @base-100;
--suggestion-link-active-background-color: @accent-90;
--suggestion-link-active-suggestion-title-color: @accent-50;
--suggestion-title-color: @base-10;
--suggestion-highlight-color: @base-30;
--suggestion-description-color: @base-30;
--suggestion-thumbnail-background-color: @base-80;
--suggestion-special-border-color: @base-80;
--suggestion-special-hover-background-color: @accent-90;
--suggestion-special-color: @base-10;
}
:root.skin-citizen-dark {
--suggestion-dropdown-background-color: @dark-bg-50;
--suggestion-link-active-background-color: @accent-10;
--suggestion-link-active-suggestion-title-color: @accent-90;
--suggestion-title-color: @dark-text-90;
--suggestion-highlight-color: @dark-text-70;
--suggestion-description-color: @dark-text-70;
--suggestion-thumbnail-background-color: @base-80;
--suggestion-special-border-color: @dark-bg-40;
--suggestion-special-hover-background-color: @accent-10;
--suggestion-special-color: @dark-text-90;
}
#typeahead-suggestions {
position: absolute;
z-index: 90;
@ -56,7 +18,7 @@
max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
flex-direction: column;
padding-top: 4px;
background: var( --suggestion-dropdown-background-color );
background: var( --background-color-dp-08 );
border-radius: 0 0 @border-radius-large @border-radius-large;
.boxshadow(4);
}
@ -68,10 +30,18 @@
padding: 8px 20px;
&.active {
background-color: var( --suggestion-link-active-background-color );
background-color: var( --background-color-primary );
&:active {
background-color: @background-color-primary--active;
}
.suggestion-title {
color: var( --suggestion-link-active-suggestion-title-color );
color: var( --color-primary );
&:active {
color: var( --color-primary--active );
}
}
}
}
@ -83,19 +53,19 @@
&-title {
display: inline-block; // so that the margin does not occupy space
margin: 0 0 0.78rem * @content-scaling 0;
color: var( --suggestion-title-color );
color: var( --color-base );
font-size: @content-h6-size;
line-height: 1.872rem * @content-scaling;
}
&-highlight {
color: var( --suggestion-highlight-color );
color: var( --color-base--subtle );
font-style: normal;
}
&-description {
margin: 0;
color: var( --suggestion-description-color );
color: var( --color-base--subtle );
font-family: @fonts;
font-size: @content-caption-size;
line-height: 1.43rem * @content-scaling;
@ -105,7 +75,7 @@
width: 70px;
min-width: 70px; // so it won't be squeezed by the content text
height: 60px;
background-color: var( --suggestion-thumbnail-background-color );
background-color: var( --background-color-framed );
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
@ -128,9 +98,9 @@
display: flex;
align-items: center;
padding: 1rem;
border-top: 1px solid @base-80;
border-top: 1px solid var( --border-color-base );
border-radius: 0 0 @border-radius-large @border-radius-large;
color: @base-10;
color: var( --color-base );
&-icon {
width: 20px;
@ -150,7 +120,7 @@
}
&:hover {
background-color: @accent-90;
background-color: var( --background-color-primary );
}
}
}
@ -203,7 +173,7 @@ a.suggestion-link:hover {
/* fill direction */ alternate;
// Add a progress-bar to the loading indicator,
// but only show it animating after 1 second of loading.
background: /*image*/ linear-gradient( 90deg, @accent-50 0%, @accent-50 100% )
background: /*image*/ linear-gradient( 90deg, var( --color-primary ) 0%, var( --color-primary ) 100% )
/* position / size*/ -10% 0 ~'/' 0 @search-loader-progress-bar-height
/* repeat */ no-repeat,transparent;
// Align style with the form

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

@ -208,9 +208,10 @@
appearance: none;
background: var( --background-color-dp-03 );
border-radius: @border-radius-small;
transition: @transition-width, @transition-box-shadow;
transition: @transition-width, @transition-background, @transition-box-shadow;
&:focus {
background-color: var( --background-color-dp-08 );
outline: 0;
.boxshadow(5);
}

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

@ -27,6 +27,9 @@
--background-color-icon--active: @background-color-icon--active;
--background-color-quiet--hover: @background-color-quiet--hover;
--background-color-quiet--active: @background-color-quiet--active;
--background-color-primary: @background-color-primary;
// --background-color-primary--active: @background-color-primary--active;
--background-color-destructive: @background-color-destructive;
/* Foreground Colors */
@ -71,6 +74,7 @@
--background-color-quiet--hover: @dark-background-color-quiet--hover;
--background-color-quiet--active: @dark-background-color-quiet--active;
--background-color-primary: @dark-background-color-primary;
--background-color-destructive: @dark-background-color-destructive;
/* Foreground Colors */
@ -78,6 +82,9 @@
--color-base--emphasized: @dark-color-base--emphasized;
--color-base--subtle: @dark-color-base--subtle;
--color-primary: @dark-color-primary;
--color-primary--hover: @dark-color-primary--hover;
/* Border Colors */
--border-color-base: @dark-border-color-base;
--border-color-base--lighter: @dark-border-color-base--lighter;

8
resources/variables.less
View file

@ -81,7 +81,9 @@
@background-color-quiet--hover: rgba( 0, 0, 0, 0.04 );
@background-color-quiet--active: rgba( 0, 0, 0, 0.06 );
@background-color-destructive: @color-red90;
@background-color-primary: @color-accent90;
@background-color-primary--active: rgba( 41, 98, 204, 0.3 );
@background-color-destructive: @color-red90;
/* Foreground Colors */
@color-base: @color-base20;
@ -123,6 +125,7 @@
@dark-background-color-quiet--hover: rgba( 255, 255, 255, 0.04 );
@dark-background-color-quiet--active: rgba( 255, 255, 255, 0.06 );
@dark-background-color-primary: @color-accent30;
@dark-background-color-destructive: @color-red30;
/* Foreground Colors */
@ -130,6 +133,9 @@
@dark-color-base--emphasized: rgba( 255, 255, 255, 0.87 );
@dark-color-base--subtle: rgba( 255, 255, 255, 0.38 );
@dark-color-primary: @color-accent50--lighten;
@dark-color-primary--hover: @color-accent50;
/* Border Colors */
@dark-border-color-base: rgba( 255, 255, 255, 0.05 );
@dark-border-color-base--lighter: rgba( 255, 255, 255, 0.02 );