123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360 |
- @import "~bootstrap/scss/bootstrap";
- $mainColor: #0b5ed7;
- $secondaryColor: #212529;
- :root {
- --flick-big-text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px #fff,
- 0 0 15px $mainColor, 0 0 30px $mainColor, 0 0 40px $mainColor,
- 0 0 70px $mainColor, 0 0 100px $mainColor;
- --flick-small-text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px #fff,
- 0 0 11px $mainColor, 0 0 20px $mainColor, 0 0 30px $mainColor,
- 0 0 55px $mainColor, 0 0 80px $mainColor;
- }
- body {
- background-color: #34393d;
- color: white;
- font-family: "Catamaran", sans-serif;
- height: 150vh;
- }
- .Main {
- .containerMain {
- padding: 1rem;
- display: block;
- position: absolute;
- left: 50%;
- width: 50%;
- transform: translate(-50%, -50%);
- text-align: center;
- border: solid 2px #fff;
- border-radius: 0.8rem;
- box-shadow: 0 0 0.1rem #fff, 0 0 0.2rem #fff, 0 0 0.3rem rgb(0, 140, 255),
- 0 0 0.8rem rgb(52, 50, 190), 0 0 1rem rgb(43, 52, 177),
- inset 0 0 1.3rem rgb(45, 97, 240);
- }
- .neon-text {
- font-size: 2rem;
- margin: 0;
- padding: 0;
- }
- }
- .spoilerText {
- float: left;
- }
- .Spoiler {
- display: flex;
- flex-wrap: wrap;
- .header {
- padding-left: 1.5em;
- transition: opacity 0.15s linear;
- -khtml-user-select: none;
- user-select: none;
- :hover {
- text-decoration: underline;
- cursor: pointer;
- }
- }
- .content {
- flex: 0 0 50%;
- }
- }
- .spoilerArrow {
- float: right;
- }
- .customBorder {
- width: 50%;
- border-width: 1px;
- border-style: dashed !important;
- }
- .customBrand {
- color: white;
- font-size: 16px;
- }
- .avatarProfile {
- width: 30vh;
- height: 30vh;
- }
- .avatarHeader {
- vertical-align: middle;
- margin-right: 2vh;
- width: 40px;
- height: 40px;
- }
- .player-container {
- z-index: 1;
- margin-bottom: -72px;
- padding: 25px 0;
- transition: box-shadow 400ms;
- display: flex;
- font-size: 16px;
- }
- .player-container > span {
- text-decoration: underline $mainColor;
- }
- .sticky {
- position: fixed;
- display: inline-block;
- top: 0;
- width: 50%;
- font-size: 12px;
- }
- .header-section > div {
- margin: 1vh;
- }
- .customAudio {
- width: 70vh;
- }
- .AudioController {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-wrap: nowrap;
- background-color: $secondaryColor;
- width: 100%;
- z-index: 1000;
- height: 15vh;
- position: fixed;
- left: 0;
- bottom: 0;
- .SongName {
- margin-left: 5vh;
- width: 20%;
- font-size: 17px;
- }
- .Buttons {
- width: 70%;
- text-align: center;
- align-self: center;
- }
- .Volume {
- width: 15%;
- input {
- width: 50%;
- }
- }
- .Duration {
- span {
- margin-left: 1vh;
- font-size: 12px;
- }
- }
- }
- .btn-circle {
- width: 38px;
- height: 38px;
- border-radius: 19px;
- text-align: center;
- padding-left: 0;
- padding-right: 0;
- font-size: 16px;
- margin: 0 1vh;
- }
- .AuthForm {
- text-align: center;
- width: 50%;
- }
- .error-container {
- text-align: center;
- font-size: 106px;
- font-weight: 800;
- margin: 70px 15px;
- }
- .error-container > span {
- display: inline-block;
- position: relative;
- }
- .error-container > span.four {
- width: 136px;
- height: 43px;
- border-radius: 999px;
- background: linear-gradient(
- 140deg,
- rgba(0, 0, 0, 0.1) 0%,
- rgba(0, 0, 0, 0.07) 43%,
- transparent 44%,
- transparent 100%
- ),
- linear-gradient(
- 105deg,
- transparent 0%,
- transparent 40%,
- rgba(0, 0, 0, 0.06) 41%,
- rgba(0, 0, 0, 0.07) 76%,
- transparent 77%,
- transparent 100%
- ),
- linear-gradient(to right, #a09cd8, #917be2);
- }
- .error-container > span.four:before,
- .error-container > span.four:after {
- content: "";
- display: block;
- position: absolute;
- border-radius: 999px;
- }
- .error-container > span.four:before {
- width: 43px;
- height: 156px;
- left: 60px;
- bottom: -43px;
- background: linear-gradient(
- 128deg,
- rgba(0, 0, 0, 0.1) 0%,
- rgba(0, 0, 0, 0.07) 40%,
- transparent 41%,
- transparent 100%
- ),
- linear-gradient(
- 116deg,
- rgba(0, 0, 0, 0.1) 0%,
- rgba(0, 0, 0, 0.07) 50%,
- transparent 51%,
- transparent 100%
- ),
- linear-gradient(to top, #78749d, #77749d, #b895ab, #cc9aa6, #d7969e);
- }
- .error-container > span.four:after {
- width: 137px;
- height: 43px;
- transform: rotate(-49.5deg);
- left: -18px;
- bottom: 36px;
- background: linear-gradient(
- to right,
- #78749d,
- #77749d,
- #b895ab,
- #cc9aa6,
- #9697d7
- );
- }
- .error-container > span.zero {
- vertical-align: text-top;
- width: 156px;
- height: 156px;
- border-radius: 999px;
- background: linear-gradient(
- -45deg,
- transparent 0%,
- rgba(0, 0, 0, 0.06) 50%,
- transparent 51%,
- transparent 100%
- ),
- linear-gradient(
- to top right,
- #78749d,
- #77749d,
- #b895ab,
- #9b9acc,
- #9a96d7,
- #86bbed,
- #9586ed
- );
- overflow: hidden;
- animation: bgshadow 5s infinite;
- }
- .error-container > span.zero:before {
- content: "";
- display: block;
- position: absolute;
- transform: rotate(45deg);
- width: 90px;
- height: 90px;
- background-color: transparent;
- left: 0px;
- bottom: 0px;
- background: linear-gradient(
- 95deg,
- transparent 0%,
- transparent 8%,
- rgba(0, 0, 0, 0.07) 9%,
- transparent 50%,
- transparent 100%
- ),
- linear-gradient(
- 85deg,
- transparent 0%,
- transparent 19%,
- rgba(0, 0, 0, 0.05) 20%,
- rgba(0, 0, 0, 0.07) 91%,
- transparent 92%,
- transparent 100%
- );
- }
- .error-container > span.zero:after {
- content: "";
- display: block;
- position: absolute;
- border-radius: 999px;
- width: 70px;
- height: 70px;
- left: 43px;
- bottom: 43px;
- background: #34393d;
- box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
- }
- .screen-reader-text {
- position: absolute;
- top: -9999em;
- left: -9999em;
- }
- .Playlists {
- box-sizing: border-box;
- ul {
- margin: 0;
- padding: 0;
- }
- ul li {
- cursor: pointer;
- position: relative;
- padding: 12px 8px 12px 40px;
- list-style-type: none;
- background: #eee;
- font-size: 18px;
- transition: 0.2s;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- ul li {
- background: $secondaryColor;
- margin: 2vh 0;
- }
- ul li a {
- text-decoration: none;
- color: #ddd;
- }
- ul li:hover {
- background: #ddd;
- a {
- color: $secondaryColor;
- }
- }
- }
|