SpotiFlyer/styles.css

334 lines
7.5 KiB
CSS

/*
* * Copyright (c) 2021 Shabinder Singh
* * This program is free software: you can redistribute it and/or modify
* * it under the terms of the GNU General Public License as published by
* * the Free Software Foundation, either version 3 of the License, or
* * (at your option) any later version.
* *
* * This program is distributed in the hope that it will be useful,
* * but WITHOUT ANY WARRANTY; without even the implied warranty of
* * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* * GNU General Public License for more details.
* *
* * You should have received a copy of the GNU General Public License
* * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
@font-face {
font-family: pristine;
src: url("pristine_script.ttf");
}
html {
background-image: url("header-dark.jpg");
font-family: Lora,Helvetica Neue,Helvetica,Arial,sans-serif;
}
a:link, a:visited {
color: white;
text-decoration: none;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
position: relative;
color: #fff;
caret-color: crimson;
/*background-image: linear-gradient(180deg,rgba(221,0,221,0.50),rgba(221,0,221,0.32),rgba(221,0,221,0.16),rgba(221,0,221,0.08),rgba(221,0,221,0.04),rgba(0,0,0,0));*/
}
#appName{
font-family: pristine, cursive;
font-weight: 100;
text-shadow: 0.3px 0.5px #ffffff;
}
.headingTitle{
text-align: center;
margin: 10px;
font-family: 'RocknRoll One', sans-serif;
}
.glow-button, .PaymentButton {
transition: all .2s ease-in-out;
}
.glow-button:hover, .PaymentButton:hover {
color: rgba(255, 255, 255, 1);
box-shadow: 0 5px 15px rgb(105, 44, 143);
transform: scale(1.1);
}
/*Loading Spinner*/
.lds-ring {
align-items: center;
justify-content: center;
display: flex;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 3.5em;
height: 3.5em;
border: 8px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.button {
text-decoration: none;
color: rgba(255, 255, 255, 0.8);
//background: rgb(145, 92, 182);
padding: 15px 40px;
border-radius: 4px;
font-weight: normal;
text-transform: uppercase;
transition: all 0.2s ease-in-out;
}
.searchBox {;
background: #2f3640;
height: 42px;
border-radius: 40px;
padding: 10px;
align-self: center;
margin: 24px;
}
.searchBox:hover > .searchInput {
width: 35vw;
padding: 0 6px;
}
.searchBox:hover .search-icon {
filter: none;
}
.searchBox:hover > .searchButton {
background: white;
color : #2f3640;
}
.search-icon {
filter: invert(100%);
}
.searchButton {
color: white;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
outline: none;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.searchInput {
border:none;
background: none;
outline:none;
float:left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
/*Download All Button*/
#download-all-text {
color: black;
display: none;
}
.download-button {
font-size: 1.5rem;
border: 2px solid white;
border-radius: 100px;
width: 40px;
height: 40px;
padding: 5px;
margin: 12px auto;
transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
justify-content: center;
}
.download-button:hover {
width: 150px;
background-color: white;
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
color: black;
transition: 0.3s;
justify-content: flex-start;
}
.download-button:hover #download-all-text {
display: inline;
color: black;
}
.download-button:hover .download-all-icon {
filter: none;
margin-right: 8px;
}
.download-button:not(hover) .download-all-icon {
filter: invert(100);
}
.sk-cube-grid {
width: 40px;
height: 40px;
margin: 100px auto;
}
.sk-cube-grid .sk-cube {
width: 33%;
height: 33%;
background-color: rgb(240, 90, 220);
float: left;
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-cube-grid .sk-cube1 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
-webkit-animation-delay: 0s;
animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
@-webkit-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
@keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
/*Extension Switch*/
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
input.cmn-toggle-round-flat + label {
/* width = 2*height or 2*border-radius */
padding: 2px;
width: 40px;
height: 20px;
border: 3px solid #dddddd;
border-radius: 60px;
transition: border-color 0.3s;
}
input.cmn-toggle-round-flat + label:before,
input.cmn-toggle-round-flat + label:after {
display: block;
position: absolute;
content: "";
}
input.cmn-toggle-round-flat + label:after {
/* width = 2*border-radius */
top: 4px;
left: 4px;
bottom: 4px;
width: 16px;
background-color: #dddddd;
border-radius: 52px;
transition: margin 0.3s, background 0.3s;
}
input.cmn-toggle-round-flat:checked + label {
border-color: #8ce196;
}
input.cmn-toggle-round-flat:checked + label:after {
/* margin-left = border-radius from 'input.cmn-toggle-round-flat + label' */
margin-left: 20px;
background-color: #8ce196;
}
@media screen and (max-width: 600px) {
/* CSS HERE ONLY ON PHONE */
.info-banners {
flex-direction: column;
}
.searchBox:hover > .searchInput {
width: 60vw;
padding: 0 6px;
}
.searchInput {
width: 55vw;
padding: 0 6px;
}
.search-icon {
filter: none;
}
.searchButton {
background: white;
color : #2f3640;
}
}