123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396 |
- @tailwind base;
- html {
- line-height: 1.15;
- }
- @tailwind components;
- :not(input) {
- user-select: none;
- }
- :root {
- --violet-gradient: linear-gradient(
- -180deg,
- rgb(144 89 255 / 80%) 0%,
- rgb(144 89 255 / 40%) 100%
- );
- }
- a {
- color: inherit;
- text-decoration: none;
- }
- a:focus {
- outline: 1px dotted grey;
- }
- body {
- background-image: url('../assets/bg.svg');
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- overflow-x: hidden;
- }
- .btn {
- @apply bg-primary;
- @apply text-white;
- @apply cursor-pointer;
- @apply py-4;
- @apply px-6;
- @apply font-semibold;
- }
- .btn:hover {
- @apply bg-primary_accent;
- }
- .btn:focus {
- @apply bg-primary_accent;
- }
- .checkbox {
- @apply leading-normal;
- @apply select-none;
- }
- .checkbox > input[type='checkbox'] {
- @apply absolute;
- @apply opacity-0;
- }
- .checkbox > label {
- @apply cursor-pointer;
- }
- .checkbox > label::before {
- /* @apply bg-grey-10; */
- @apply border-default;
- @apply rounded-sm;
- content: '';
- height: 1.5rem;
- width: 1.5rem;
- margin-right: 0.5rem;
- float: left;
- }
- .checkbox > label:hover::before {
- @apply border-primary;
- }
- .checkbox > input:focus + label::before {
- @apply border-primary;
- }
- .checkbox > input:checked + label::before {
- @apply bg-primary;
- @apply border-primary;
- background-image: url('../assets/lock.svg');
- background-position: center;
- background-size: 1.25rem;
- background-repeat: no-repeat;
- }
- .checkbox > input:disabled + label {
- cursor: auto;
- }
- .checkbox > input:disabled + label::before {
- @apply bg-primary;
- @apply border-primary;
- background-image: url('../assets/lock.svg');
- background-position: center;
- background-size: 1.25rem;
- background-repeat: no-repeat;
- cursor: auto;
- }
- details {
- overflow: hidden;
- }
- details > summary::marker {
- display: none;
- }
- details > summary > svg {
- transition: all 0.25s cubic-bezier(0.07, 0.95, 0, 1);
- }
- details[open] {
- overflow-y: auto;
- }
- details[open] > summary > svg {
- transform: rotate(90deg);
- }
- footer li a:hover {
- text-decoration: underline;
- }
- .feedback-link {
- background-color: #000;
- background-image: url('../assets/feedback.svg');
- background-position: 0.125rem 0.25rem;
- background-repeat: no-repeat;
- background-size: 1.125rem;
- color: #fff;
- display: block;
- font-size: 0.75rem;
- line-height: 0.75rem;
- padding: 0.375rem 0.375rem 0.375rem 1.25rem;
- text-indent: 0.125rem;
- white-space: nowrap;
- }
- .link-primary {
- @apply text-primary;
- }
- .link-primary:hover {
- @apply text-primary_accent;
- }
- .link-primary:focus {
- @apply text-primary_accent;
- }
- .main-header img {
- height: 32px;
- width: auto;
- }
- .main {
- display: flex;
- position: relative;
- max-width: 64rem;
- width: 100%;
- }
- .main > section {
- @apply bg-white;
- }
- #password-msg::after {
- content: '\200b';
- }
- progress {
- @apply bg-grey-30;
- @apply rounded-sm;
- @apply w-full;
- @apply h-1;
- }
- progress::-webkit-progress-bar {
- @apply bg-grey-30;
- @apply rounded-sm;
- @apply w-full;
- @apply h-1;
- }
- progress::-webkit-progress-value {
- /* stylelint-disable */
- background-image: -webkit-linear-gradient(
- -45deg,
- transparent 20%,
- rgb(255 255 255 / 40%) 20%,
- rgb(255 255 255 / 40%) 40%,
- transparent 40%,
- transparent 60%,
- rgb(255 255 255 / 40%) 60%,
- rgb(255 255 255 / 40%) 80%,
- transparent 80%
- ),
- -webkit-linear-gradient(left, var(--color-primary), var(--color-primary));
- /* stylelint-enable */
- border-radius: 2px;
- background-size: 21px 20px, 100% 100%, 100% 100%;
- }
- progress::-moz-progress-bar {
- /* stylelint-disable */
- background-image: -moz-linear-gradient(
- 135deg,
- transparent 20%,
- rgb(255 255 255 / 40%) 20%,
- rgb(255 255 255 / 40%) 40%,
- transparent 40%,
- transparent 60%,
- rgb(255 255 255 / 40%) 60%,
- rgb(255 255 255 / 40%) 80%,
- transparent 80%
- ),
- -moz-linear-gradient(left, var(--color-primary), var(--color-primary));
- /* stylelint-enable */
- border-radius: 2px;
- background-size: 21px 20px, 100% 100%, 100% 100%;
- animation: animate-stripes 1s linear infinite;
- }
- @keyframes animate-stripes {
- 100% {
- background-position: -21px 0;
- }
- }
- select {
- background-image: url('../assets/select-arrow.svg');
- background-position: calc(100% - 0.75rem);
- background-repeat: no-repeat;
- }
- @screen md {
- .main-header img {
- height: 48px;
- width: auto;
- }
- .main {
- @apply flex-1;
- @apply self-center;
- @apply items-center;
- @apply m-auto;
- @apply py-8;
- max-height: 42rem;
- width: calc(100% - 3rem);
- }
- }
- @screen dark {
- body {
- @apply text-grey-10;
- background-image: unset;
- }
- .btn {
- @apply bg-primary;
- @apply text-white;
- }
- .btn:hover {
- @apply bg-primary_accent;
- }
- .btn:focus {
- @apply bg-primary_accent;
- }
- .link-primary {
- @apply text-primary;
- }
- .link-primary:hover {
- @apply text-primary_accent;
- }
- .link-primary:focus {
- @apply text-primary_accent;
- }
- .main > section {
- @apply bg-grey-90;
- }
- @screen md {
- .main > section {
- @apply border-default;
- @apply border-grey-80;
- }
- }
- }
- @tailwind utilities;
- @responsive {
- .shadow-light {
- box-shadow: 0 0 8px 0 rgb(12 12 13 / 10%);
- }
- .shadow-big {
- box-shadow: 0 12px 18px 2px rgb(34 0 51 / 4%),
- 0 6px 22px 4px rgb(7 48 114 / 12%), 0 6px 10px -4px rgb(14 13 26 / 12%);
- }
- }
- @variants focus {
- .outline {
- outline: 1px dotted grey;
- }
- }
- .word-break-all {
- word-break: break-all;
- line-break: anywhere;
- }
- .signin {
- backface-visibility: hidden;
- border-radius: 6px;
- transition-property: transform, background-color;
- transition-duration: 250ms;
- transition-timing-function: cubic-bezier(0.07, 0.95, 0, 1);
- }
- .signin:hover,
- .signin:focus {
- transform: scale(1.0625);
- }
- .signin:hover:active {
- transform: scale(0.9375);
- }
- /* begin signin button color experiment */
- .white-primary {
- @apply border-primary;
- @apply border-2;
- @apply text-primary;
- }
- .white-primary:hover,
- .white-primary:focus {
- @apply bg-primary;
- @apply text-white;
- }
- .primary {
- @apply bg-primary;
- @apply text-white;
- }
- .white-violet {
- @apply border-violet;
- @apply border-2;
- @apply text-violet;
- }
- .white-violet:hover,
- .white-violet:focus {
- @apply bg-violet;
- @apply text-white;
- background-image: var(--violet-gradient);
- }
- .violet {
- @apply bg-violet;
- @apply text-white;
- }
- .violet:hover,
- .violet:focus {
- background-image: var(--violet-gradient);
- }
- /* end signin button color experiment */
|