mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-29 08:35:23 +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
|
||||
#site-search {
|
||||
#search-form {
|
||||
position: absolute;
|
||||
z-index: -1; // Not interactable
|
||||
margin: 7px 0 8px; // 1px h3 screen reader
|
||||
display: flex;
|
||||
top: 0;
|
||||
right: @icon-box-size + @icon-padding * 2;
|
||||
opacity: 0;
|
||||
.boxshadow(4);
|
||||
transition: @transition-opacity;
|
||||
#search-form {
|
||||
position: absolute;
|
||||
z-index: -1; // Not interactable
|
||||
margin: 7px 0 8px; // 1px h3 screen reader
|
||||
display: flex;
|
||||
top: 0;
|
||||
right: @icon-box-size + @icon-padding * 2;
|
||||
opacity: 0;
|
||||
.boxshadow(4);
|
||||
transition: @transition-opacity;
|
||||
|
||||
// Search field
|
||||
#search-input {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 12px 15px;
|
||||
width: 0;
|
||||
max-width: calc( ~'100vw -'@icon-box-size * 2 + @icon-padding * 4 + @margin-side );
|
||||
border: 1px solid @base-90;
|
||||
transition: @transition-width, @transition-box-shadow;
|
||||
// Search field
|
||||
#search-input {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 12px 15px;
|
||||
width: 0;
|
||||
max-width: calc(~'100vw -'@icon-box-size * 2 + @icon-padding * 4 + @margin-side );
|
||||
border: 1px solid @base-90;
|
||||
transition: @transition-width, @transition-box-shadow;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
.boxshadow(5);
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
outline: 0;
|
||||
.boxshadow(5);
|
||||
}
|
||||
}
|
||||
|
||||
// Search field button
|
||||
#search-button {
|
||||
.button-blue;
|
||||
width: @icon-box-size + @icon-padding * 2;
|
||||
height: 42px;
|
||||
border: 0;
|
||||
cursor: pointer; //somehow it is not pointer
|
||||
// Search field button
|
||||
#search-button {
|
||||
.button-blue;
|
||||
width: @icon-box-size + @icon-padding * 2;
|
||||
height: 42px;
|
||||
border: 0;
|
||||
cursor: pointer; //somehow it is not pointer
|
||||
|
||||
img {
|
||||
filter: invert( 1 );
|
||||
width: 16px;
|
||||
}
|
||||
img {
|
||||
filter: invert(1);
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.button-blue-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.button-blue-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search-toggle-icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: inherit;
|
||||
#search-toggle-icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: inherit;
|
||||
|
||||
#search-toggle-icon {
|
||||
opacity: @opacity-icon;
|
||||
position: absolute;
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: solid 2px @base-0;
|
||||
border-radius: 100%;
|
||||
transform: rotate( -45deg );
|
||||
transition: @transition-transform, @transition-height, @transition-opacity, @transition-border-color;
|
||||
#search-toggle-icon {
|
||||
opacity: @opacity-icon;
|
||||
position: absolute;
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: solid 2px @base-0;
|
||||
border-radius: 100%;
|
||||
transform: rotate(-45deg);
|
||||
transition: @transition-transform, @transition-height, @transition-opacity, @transition-border-color;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
background-color: @base-0;
|
||||
transition: inherit;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
background-color: @base-0;
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 10px;
|
||||
left: 3px;
|
||||
height: 10px;
|
||||
}
|
||||
&:before {
|
||||
top: 10px;
|
||||
left: 3px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
top: -1px;
|
||||
left: 4px;
|
||||
height: 18px;
|
||||
transform: rotate( -90deg );
|
||||
}
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
opacity: 0;
|
||||
top: -1px;
|
||||
left: 4px;
|
||||
height: 18px;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search-toggle {
|
||||
&:checked {
|
||||
~ #search-form {
|
||||
z-index: 5;
|
||||
opacity: 1;
|
||||
#search-toggle {
|
||||
&:checked {
|
||||
~#search-form {
|
||||
z-index: 5;
|
||||
opacity: 1;
|
||||
|
||||
#search-input {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
#search-input {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
~ #search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: transparent;
|
||||
~#search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: transparent;
|
||||
|
||||
&:before {
|
||||
height: 18px;
|
||||
transform: translate( 1px, -11px );
|
||||
}
|
||||
&:before {
|
||||
height: 18px;
|
||||
transform: translate(1px, -11px);
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
~ #search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: @base-0;
|
||||
&:hover {
|
||||
~#search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: @base-0;
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
~ #search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: @base-0;
|
||||
&:hover {
|
||||
~#search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: @base-0;
|
||||
|
||||
&:after {
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
~ #search-toggle-icon-container #search-toggle-icon {
|
||||
opacity: @opacity-icon-active;
|
||||
&:hover {
|
||||
~#search-toggle-icon-container #search-toggle-icon {
|
||||
opacity: @opacity-icon-active;
|
||||
|
||||
&:before {
|
||||
height: 5px;
|
||||
transform: translate( 0, 5px );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
height: 5px;
|
||||
transform: translate(0, 5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#typeahead-suggestions {
|
||||
position: absolute;
|
||||
top: @header-height;
|
||||
z-index: 99999;
|
||||
position: absolute;
|
||||
top: @header-height;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.suggestions-dropdown {
|
||||
background: @base-100;
|
||||
.boxshadow(4);
|
||||
width: @suggestion-max-width;
|
||||
max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
|
||||
background: @base-100;
|
||||
.boxshadow(4);
|
||||
width: @suggestion-max-width;
|
||||
max-width: calc(~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
|
||||
}
|
||||
|
||||
.suggestion-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
min-height: 2rem * @content-scaling;
|
||||
padding: 1rem 1rem 1rem 8.5rem * @content-scaling;
|
||||
border-bottom: 1px solid @base-90;
|
||||
display: block;
|
||||
position: relative;
|
||||
min-height: 2rem * @content-scaling;
|
||||
padding: 1rem 1rem 1rem 8.5rem * @content-scaling;
|
||||
border-bottom: 1px solid @base-90;
|
||||
}
|
||||
|
||||
.suggestion-title {
|
||||
margin: 0 0 0.78rem * @content-scaling 0;
|
||||
color: @base-10;
|
||||
font-size: 1.6rem * @content-scaling;
|
||||
font-weight: normal;
|
||||
line-height: 1.872rem * @content-scaling;
|
||||
margin: 0 0 0.78rem * @content-scaling 0;
|
||||
color: @base-10;
|
||||
font-size: 1.6rem * @content-scaling;
|
||||
font-weight: normal;
|
||||
line-height: 1.872rem * @content-scaling;
|
||||
}
|
||||
|
||||
.suggestion-link.active .suggestion-title {
|
||||
color: @accent-50;
|
||||
color: @accent-50;
|
||||
}
|
||||
|
||||
.suggestion-highlight {
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.suggestion-description {
|
||||
color: @base-30;
|
||||
margin: 0;
|
||||
font-family: @fonts;
|
||||
font-size: 1.3rem * @content-scaling;
|
||||
line-height: 1.43rem * @content-scaling;
|
||||
color: @base-30;
|
||||
margin: 0;
|
||||
font-family: @fonts;
|
||||
font-size: 1.3rem * @content-scaling;
|
||||
line-height: 1.43rem * @content-scaling;
|
||||
}
|
||||
|
||||
.suggestion-link.active {
|
||||
background-color: @accent-90;
|
||||
background-color: @accent-90;
|
||||
}
|
||||
|
||||
/* using element selector to override default anchor styles */
|
||||
a.suggestion-link:hover {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.suggestion-thumbnail {
|
||||
background-color: @base-80;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
width: 7rem * @content-scaling;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: @base-80;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
width: 7rem * @content-scaling;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.suggestion-placeholder {
|
||||
.suggestion-title {
|
||||
width: 30%;
|
||||
height: 1.6rem * @content-scaling;
|
||||
}
|
||||
.suggestion-description {
|
||||
width: 70%;
|
||||
height: 1.3rem * @content-scaling;
|
||||
}
|
||||
.suggestion-title,
|
||||
.suggestion-description {
|
||||
background-color: @base-80;
|
||||
}
|
||||
.suggestion-title {
|
||||
width: 30%;
|
||||
height: 1.6rem * @content-scaling;
|
||||
}
|
||||
|
||||
.suggestion-description {
|
||||
width: 70%;
|
||||
height: 1.3rem * @content-scaling;
|
||||
}
|
||||
|
||||
.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 {
|
||||
#site-search {
|
||||
#search-form {
|
||||
left: @icon-box-size + @margin-side + @icon-padding;
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
#site-search {
|
||||
#search-form {
|
||||
left: @icon-box-size + @margin-side + @icon-padding;
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and ( max-width: @suggestion-max-width ) {
|
||||
.suggestions-dropdown {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: @header-height + 1px;
|
||||
max-width: 100vw;
|
||||
@media only screen and (max-width: @suggestion-max-width ) {
|
||||
.suggestions-dropdown {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: @header-height + 1px;
|
||||
max-width: 100vw;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #000;
|
||||
display: block;
|
||||
opacity: 0.7;
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #000;
|
||||
display: block;
|
||||
opacity: 0.7;
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes placeHolderShimmer {
|
||||
0% {
|
||||
background-position: -468px 0
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 468px 0
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue