mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-25 23:05:23 +00:00
755 lines
17 KiB
CSS
755 lines
17 KiB
CSS
/*
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*/
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('/fonts/Source-Code-Pro-Regular.woff2') format('woff2');
|
|
}
|
|
|
|
/* Latin */
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_W_Md.woff2')
|
|
format('woff2');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_W_MdIt.woff2')
|
|
format('woff2');
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_W_SBd.woff2')
|
|
format('woff2');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_W_SBdIt.woff2')
|
|
format('woff2');
|
|
font-weight: 600;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_W_Bd.woff2')
|
|
format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_W_BdIt.woff2')
|
|
format('woff2');
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_W_Rg.woff2')
|
|
format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_W_It.woff2')
|
|
format('woff2');
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_W_Md.woff2')
|
|
format('woff2');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_W_MdIt.woff2')
|
|
format('woff2');
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_W_Bd.woff2')
|
|
format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_W_BdIt.woff2')
|
|
format('woff2');
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* Arabic */
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_Arbc_W_Md.woff2')
|
|
format('woff2');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0600-06FF;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_Arbc_W_SBd.woff2')
|
|
format('woff2');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0600-06FF;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_Arbc_W_Bd.woff2')
|
|
format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0600-06FF;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_Arbc_W_Rg.woff2')
|
|
format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0600-06FF;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_Arbc_W_Md.woff2')
|
|
format('woff2');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0600-06FF;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_Arbc_W_Bd.woff2')
|
|
format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0600-06FF;
|
|
}
|
|
|
|
/* Cyrillic */
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_Cyrl_W_Md.woff2')
|
|
format('woff2');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0400-045F, U+2116;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_Cyrl_W_SBd.woff2')
|
|
format('woff2');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0400-045F, U+2116;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_Cyrl_W_Bd.woff2')
|
|
format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0400-045F, U+2116;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_Cyrl_W_Rg.woff2')
|
|
format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0400-045F, U+2116;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_Cyrl_W_Md.woff2')
|
|
format('woff2');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0400-045F, U+2116;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_Cyrl_W_Bd.woff2')
|
|
format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0400-045F, U+2116;
|
|
}
|
|
|
|
/* Devanagari */
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_Deva_W_Md.woff2')
|
|
format('woff2');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
|
|
U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_Deva_W_SBd.woff2')
|
|
format('woff2');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
|
|
U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_Deva_W_Bd.woff2')
|
|
format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
|
|
U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_Deva_W_Rg.woff2')
|
|
format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
|
|
U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_Deva_W_Md.woff2')
|
|
format('woff2');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
|
|
U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_Deva_W_Bd.woff2')
|
|
format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
|
|
U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
|
|
}
|
|
|
|
/* Vietnamese */
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_Viet_W_Md.woff2')
|
|
format('woff2');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_Viet_W_SBd.woff2')
|
|
format('woff2');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Display';
|
|
src: url('https://react.dev/fonts/Optimistic_Display_Viet_W_Bd.woff2')
|
|
format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_Viet_W_Rg.woff2')
|
|
format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_Viet_W_Md.woff2')
|
|
format('woff2');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Optimistic Text';
|
|
src: url('https://react.dev/fonts/Optimistic_Text_Viet_W_Bd.woff2')
|
|
format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
|
}
|
|
|
|
/* Write your own custom base styles here */
|
|
html {
|
|
color-scheme: light;
|
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html .dark-image {
|
|
display: none;
|
|
}
|
|
|
|
html .light-image {
|
|
display: block;
|
|
}
|
|
|
|
html.dark .dark-image {
|
|
display: block;
|
|
}
|
|
|
|
html.dark .light-image {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide all content that's relevant only to a specific platform */
|
|
html.platform-mac [data-platform='win'] {
|
|
display: none;
|
|
}
|
|
|
|
html.platform-win [data-platform='mac'] {
|
|
display: none;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
@media screen and (max-width: 1023px) {
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
|
|
/* Start purging... */
|
|
/* Force GPU Accelerated scrolling, credit: Twitter Lite */
|
|
.scrolling-gpu {
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-7xl {
|
|
font-size: 5rem;
|
|
}
|
|
|
|
.text-8xl {
|
|
font-size: 6rem;
|
|
}
|
|
}
|
|
|
|
a > code {
|
|
color: #087ea4 !important; /* blue-50 */
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
html.dark a > code {
|
|
color: #58c4dc !important; /* blue-40 */
|
|
}
|
|
|
|
.text-code {
|
|
font-size: calc(1em - 10%) !important;
|
|
}
|
|
|
|
.text-gradient {
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
box-decoration-break: clone;
|
|
background-repeat: no-repeat;
|
|
color: transparent;
|
|
}
|
|
|
|
.text-gradient-electric-blue {
|
|
background-image: linear-gradient(45deg, #61dafb, #0072ff);
|
|
}
|
|
/* Stop purging. */
|
|
/* Your own custom utilities */
|
|
|
|
details {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
display: block;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
table td,
|
|
table th {
|
|
padding: 0.75rem;
|
|
vertical-align: top;
|
|
border: 1px solid #dee2e6;
|
|
overflow: auto;
|
|
}
|
|
|
|
summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
/*
|
|
* Hopefully when scrollbar-color lands everywhere,
|
|
* (and not just in FF), we'll be able to keep just this.
|
|
*/
|
|
html .no-bg-scrollbar {
|
|
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
|
|
}
|
|
html.dark .no-bg-scrollbar {
|
|
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
|
|
}
|
|
/*
|
|
* Until then, we have ... this.
|
|
* If you're changing this, make sure you've tested:
|
|
* - Different browsers (Chrome, Safari, FF)
|
|
* - Dark and light modes
|
|
* - System scrollbar settings ("always on" vs "when scrolling")
|
|
* - Switching between modes should never jump width
|
|
* - When you interact with a sidebar, it should always be visible
|
|
* - For each combination, test overflowing and non-overflowing sidebar
|
|
* I've spent hours picking these so I expect no less diligence from you.
|
|
*/
|
|
html .no-bg-scrollbar::-webkit-scrollbar,
|
|
html .no-bg-scrollbar::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
html .no-bg-scrollbar:hover::-webkit-scrollbar-thumb,
|
|
html .no-bg-scrollbar:focus::-webkit-scrollbar-thumb,
|
|
html .no-bg-scrollbar:focus-within::-webkit-scrollbar-thumb,
|
|
html .no-bg-scrollbar:active::-webkit-scrollbar-thumb {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border: 4px solid transparent;
|
|
background-clip: content-box;
|
|
border-radius: 10px;
|
|
}
|
|
html .no-bg-scrollbar::-webkit-scrollbar-thumb:hover,
|
|
html .no-bg-scrollbar::-webkit-scrollbar-thumb:active {
|
|
background-color: rgba(0, 0, 0, 0.35) !important;
|
|
}
|
|
html.dark .no-bg-scrollbar:hover::-webkit-scrollbar-thumb,
|
|
html.dark .no-bg-scrollbar:focus::-webkit-scrollbar-thumb,
|
|
html.dark .no-bg-scrollbar:focus-within::-webkit-scrollbar-thumb,
|
|
html.dark .no-bg-scrollbar:active::-webkit-scrollbar-thumb {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:hover,
|
|
html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:active {
|
|
background-color: rgba(255, 255, 255, 0.35) !important;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
[class*='space-x-'] {
|
|
@apply rtl:space-x-reverse;
|
|
}
|
|
}
|
|
|
|
.code-step * {
|
|
color: inherit !important;
|
|
}
|
|
|
|
.code-step code {
|
|
background: none !important;
|
|
padding: 2px !important;
|
|
}
|
|
|
|
.dark .console-block code {
|
|
background: rgba(235 236 240 / 0.05) !important;
|
|
color: rgba(208, 125, 119) !important;
|
|
}
|
|
|
|
.console-block code {
|
|
background: rgba(235 236 240 / 0.95) !important;
|
|
color: rgb(166, 66, 58) !important;
|
|
}
|
|
|
|
html.dark .code-step * {
|
|
color: inherit !important;
|
|
}
|
|
|
|
.mdx-heading {
|
|
scroll-margin-top: calc(4rem + 20px);
|
|
/* Space for the anchor */
|
|
padding-inline-end: 1em;
|
|
}
|
|
|
|
.mdx-heading:before {
|
|
height: 6rem;
|
|
margin-top: -6rem;
|
|
visibility: hidden;
|
|
content: '';
|
|
}
|
|
.mdx-heading .mdx-header-anchor {
|
|
/* Prevent the anchor from
|
|
overflowing to its own line */
|
|
height: 0px;
|
|
width: 0px;
|
|
}
|
|
.mdx-heading .mdx-header-anchor svg {
|
|
display: inline;
|
|
}
|
|
.mdx-heading .mdx-header-anchor svg {
|
|
visibility: hidden;
|
|
}
|
|
.mdx-heading:hover .mdx-header-anchor svg {
|
|
visibility: visible;
|
|
}
|
|
.mdx-heading .mdx-header-anchor:focus svg {
|
|
visibility: visible;
|
|
}
|
|
|
|
.mdx-blockquote > span > p:first-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
.mdx-blockquote > span > p:last-of-type {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.mdx-illustration-block {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
align-content: stretch;
|
|
align-items: stretch;
|
|
gap: 42px;
|
|
}
|
|
ol.mdx-illustration-block {
|
|
gap: 60px;
|
|
}
|
|
.mdx-illustration-block li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
align-content: stretch;
|
|
justify-content: space-around;
|
|
position: relative;
|
|
padding: 1rem;
|
|
}
|
|
.mdx-illustration-block figure {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-content: center;
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
.mdx-illustration-block li:after {
|
|
content: ' ';
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
inset-inline-end: 100%;
|
|
transform: translateY(-50%);
|
|
width: 60px;
|
|
height: 49px;
|
|
background: center / contain no-repeat url('/images/g_arrow.png');
|
|
}
|
|
.mdx-illustration-block li:first-child:after {
|
|
content: ' ';
|
|
display: none;
|
|
}
|
|
.mdx-illustration-block img {
|
|
max-height: 250px;
|
|
width: 100%;
|
|
}
|
|
@media (max-width: 680px) {
|
|
.mdx-illustration-block {
|
|
flex-direction: column;
|
|
}
|
|
.mdx-illustration-block img {
|
|
max-height: 200px;
|
|
width: auto;
|
|
}
|
|
.mdx-illustration-block li:after {
|
|
top: 0;
|
|
inset-inline-start: 50%;
|
|
inset-inline-end: auto;
|
|
transform: translateX(-50%) translateY(-100%) rotate(90deg);
|
|
}
|
|
}
|
|
|
|
@keyframes fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animation-pulse-button {
|
|
animation: pulse-button 2s infinite;
|
|
}
|
|
|
|
.animation-pulse-shadow {
|
|
animation: pulse-shadow 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse-button {
|
|
0% {
|
|
transform: scale(0.9);
|
|
}
|
|
70% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-shadow {
|
|
0% {
|
|
transform: scale(0.65);
|
|
opacity: 1;
|
|
}
|
|
|
|
70% {
|
|
transform: scale(1);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0.65);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes progressbar {
|
|
from {
|
|
width: 0;
|
|
}
|
|
to {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.exit {
|
|
opacity: 0;
|
|
transition: opacity 500ms ease-out;
|
|
transition-delay: 1s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.uwu-visible {
|
|
display: none;
|
|
}
|
|
.uwu-hidden {
|
|
display: flex;
|
|
}
|
|
|
|
.uwu .uwu-visible {
|
|
display: flex;
|
|
}
|
|
|
|
.uwu .uwu-hidden {
|
|
display: none;
|
|
}
|