mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-25 14:57:31 +00:00
Add gradient for the loading animation
This commit is contained in:
alistair3149
parent
fdd8b16160
commit
bed74883e5
|
|
@ -7,263 +7,285 @@
|
||||||
|
|
||||||
// TODO: Make it configurable and flexible
|
// TODO: Make it configurable and flexible
|
||||||
#site-search {
|
#site-search {
|
||||||
#search-form {
|
#search-form {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: -1; // Not interactable
|
z-index: -1; // Not interactable
|
||||||
margin: 7px 0 8px; // 1px h3 screen reader
|
margin: 7px 0 8px; // 1px h3 screen reader
|
||||||
display: flex;
|
display: flex;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: @icon-box-size + @icon-padding * 2;
|
right: @icon-box-size + @icon-padding * 2;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
.boxshadow(4);
|
.boxshadow(4);
|
||||||
transition: @transition-opacity;
|
transition: @transition-opacity;
|
||||||
|
|
||||||
// Search field
|
// Search field
|
||||||
#search-input {
|
#search-input {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
padding: 12px 15px;
|
padding: 12px 15px;
|
||||||
width: 0;
|
width: 0;
|
||||||
max-width: calc( ~'100vw -'@icon-box-size * 2 + @icon-padding * 4 + @margin-side );
|
max-width: calc(~'100vw -'@icon-box-size * 2 + @icon-padding * 4 + @margin-side );
|
||||||
border: 1px solid @base-90;
|
border: 1px solid @base-90;
|
||||||
transition: @transition-width, @transition-box-shadow;
|
transition: @transition-width, @transition-box-shadow;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
.boxshadow(5);
|
.boxshadow(5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Search field button
|
// Search field button
|
||||||
#search-button {
|
#search-button {
|
||||||
.button-blue;
|
.button-blue;
|
||||||
width: @icon-box-size + @icon-padding * 2;
|
width: @icon-box-size + @icon-padding * 2;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
border: 0;
|
border: 0;
|
||||||
cursor: pointer; //somehow it is not pointer
|
cursor: pointer; //somehow it is not pointer
|
||||||
|
|
||||||
img {
|
img {
|
||||||
filter: invert( 1 );
|
filter: invert(1);
|
||||||
width: 16px;
|
width: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
.button-blue-active;
|
.button-blue-active;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-toggle-icon-container {
|
#search-toggle-icon-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
|
|
||||||
#search-toggle-icon {
|
#search-toggle-icon {
|
||||||
opacity: @opacity-icon;
|
opacity: @opacity-icon;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: -2px;
|
margin-top: -2px;
|
||||||
margin-left: -2px;
|
margin-left: -2px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
border: solid 2px @base-0;
|
border: solid 2px @base-0;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
transform: rotate( -45deg );
|
transform: rotate(-45deg);
|
||||||
transition: @transition-transform, @transition-height, @transition-opacity, @transition-border-color;
|
transition: @transition-transform, @transition-height, @transition-opacity, @transition-border-color;
|
||||||
|
|
||||||
&:before,
|
&:before,
|
||||||
&:after {
|
&:after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 2px;
|
width: 2px;
|
||||||
background-color: @base-0;
|
background-color: @base-0;
|
||||||
transition: inherit;
|
transition: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
top: 10px;
|
top: 10px;
|
||||||
left: 3px;
|
left: 3px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
top: -1px;
|
top: -1px;
|
||||||
left: 4px;
|
left: 4px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
transform: rotate( -90deg );
|
transform: rotate(-90deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-toggle {
|
#search-toggle {
|
||||||
&:checked {
|
&:checked {
|
||||||
~ #search-form {
|
~#search-form {
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
||||||
#search-input {
|
#search-input {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
~ #search-toggle-icon-container #search-toggle-icon {
|
~#search-toggle-icon-container #search-toggle-icon {
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
height: 18px;
|
height: 18px;
|
||||||
transform: translate( 1px, -11px );
|
transform: translate(1px, -11px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
~ #search-toggle-icon-container #search-toggle-icon {
|
~#search-toggle-icon-container #search-toggle-icon {
|
||||||
border-color: @base-0;
|
border-color: @base-0;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
~ #search-toggle-icon-container #search-toggle-icon {
|
~#search-toggle-icon-container #search-toggle-icon {
|
||||||
border-color: @base-0;
|
border-color: @base-0;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
height: 12px;
|
height: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
~ #search-toggle-icon-container #search-toggle-icon {
|
~#search-toggle-icon-container #search-toggle-icon {
|
||||||
opacity: @opacity-icon-active;
|
opacity: @opacity-icon-active;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
height: 5px;
|
height: 5px;
|
||||||
transform: translate( 0, 5px );
|
transform: translate(0, 5px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#typeahead-suggestions {
|
#typeahead-suggestions {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: @header-height;
|
top: @header-height;
|
||||||
z-index: 99999;
|
z-index: 99999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.suggestions-dropdown {
|
.suggestions-dropdown {
|
||||||
background: @base-100;
|
background: @base-100;
|
||||||
.boxshadow(4);
|
.boxshadow(4);
|
||||||
width: @suggestion-max-width;
|
width: @suggestion-max-width;
|
||||||
max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
|
max-width: calc(~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
|
||||||
}
|
}
|
||||||
|
|
||||||
.suggestion-link {
|
.suggestion-link {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 2rem * @content-scaling;
|
min-height: 2rem * @content-scaling;
|
||||||
padding: 1rem 1rem 1rem 8.5rem * @content-scaling;
|
padding: 1rem 1rem 1rem 8.5rem * @content-scaling;
|
||||||
border-bottom: 1px solid @base-90;
|
border-bottom: 1px solid @base-90;
|
||||||
}
|
}
|
||||||
|
|
||||||
.suggestion-title {
|
.suggestion-title {
|
||||||
margin: 0 0 0.78rem * @content-scaling 0;
|
margin: 0 0 0.78rem * @content-scaling 0;
|
||||||
color: @base-10;
|
color: @base-10;
|
||||||
font-size: 1.6rem * @content-scaling;
|
font-size: 1.6rem * @content-scaling;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 1.872rem * @content-scaling;
|
line-height: 1.872rem * @content-scaling;
|
||||||
}
|
}
|
||||||
|
|
||||||
.suggestion-link.active .suggestion-title {
|
.suggestion-link.active .suggestion-title {
|
||||||
color: @accent-50;
|
color: @accent-50;
|
||||||
}
|
}
|
||||||
|
|
||||||
.suggestion-highlight {
|
.suggestion-highlight {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.suggestion-description {
|
.suggestion-description {
|
||||||
color: @base-30;
|
color: @base-30;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: @fonts;
|
font-family: @fonts;
|
||||||
font-size: 1.3rem * @content-scaling;
|
font-size: 1.3rem * @content-scaling;
|
||||||
line-height: 1.43rem * @content-scaling;
|
line-height: 1.43rem * @content-scaling;
|
||||||
}
|
}
|
||||||
|
|
||||||
.suggestion-link.active {
|
.suggestion-link.active {
|
||||||
background-color: @accent-90;
|
background-color: @accent-90;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* using element selector to override default anchor styles */
|
/* using element selector to override default anchor styles */
|
||||||
a.suggestion-link:hover {
|
a.suggestion-link:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.suggestion-thumbnail {
|
.suggestion-thumbnail {
|
||||||
background-color: @base-80;
|
background-color: @base-80;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 7rem * @content-scaling;
|
width: 7rem * @content-scaling;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.suggestion-placeholder {
|
.suggestion-placeholder {
|
||||||
.suggestion-title {
|
.suggestion-title {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
height: 1.6rem * @content-scaling;
|
height: 1.6rem * @content-scaling;
|
||||||
}
|
}
|
||||||
.suggestion-description {
|
|
||||||
width: 70%;
|
.suggestion-description {
|
||||||
height: 1.3rem * @content-scaling;
|
width: 70%;
|
||||||
}
|
height: 1.3rem * @content-scaling;
|
||||||
.suggestion-title,
|
}
|
||||||
.suggestion-description {
|
|
||||||
background-color: @base-80;
|
.suggestion-title,
|
||||||
}
|
.suggestion-description {
|
||||||
|
background-color: @base-80;
|
||||||
|
animation-duration: 1.8s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-name: placeHolderShimmer;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
background: @base-70;
|
||||||
|
background: linear-gradient(to right, @base-90 8%, @base-80 38%, @base-90 54%);
|
||||||
|
background-size: 1000px 640px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// RTL tweaks
|
// RTL tweaks
|
||||||
.rtl {
|
.rtl {
|
||||||
#site-search {
|
#site-search {
|
||||||
#search-form {
|
#search-form {
|
||||||
left: @icon-box-size + @margin-side + @icon-padding;
|
left: @icon-box-size + @margin-side + @icon-padding;
|
||||||
right: unset;
|
right: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and ( max-width: @suggestion-max-width ) {
|
@media only screen and (max-width: @suggestion-max-width ) {
|
||||||
.suggestions-dropdown {
|
.suggestions-dropdown {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: @header-height + 1px;
|
top: @header-height + 1px;
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
content: '';
|
content: '';
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background: #000;
|
background: #000;
|
||||||
display: block;
|
display: block;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes placeHolderShimmer {
|
||||||
|
0% {
|
||||||
|
background-position: -468px 0
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-position: 468px 0
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue