diff options
Diffstat (limited to 'src/client/style.scss')
| -rw-r--r-- | src/client/style.scss | 341 |
1 files changed, 341 insertions, 0 deletions
diff --git a/src/client/style.scss b/src/client/style.scss new file mode 100644 index 0000000000..5f90a7aa14 --- /dev/null +++ b/src/client/style.scss @@ -0,0 +1,341 @@ +@charset "utf-8"; + +:root { + --radius: 8px; + --marginFull: 16px; + --marginHalf: 8px; + + --margin: var(--marginFull); + + @media (max-width: 500px) { + --margin: var(--marginHalf); + } +} + +* { + tap-highlight-color: transparent; + -webkit-tap-highlight-color: transparent; +} + +html { + background-color: var(--bg); + background-attachment: fixed; + background-size: cover; + background-position: center; + color: var(--fg); + overflow: auto; + overflow-y: scroll; + + &, * { + scrollbar-color: var(--scrollbarHandle) var(--panel); + + &:hover { + scrollbar-color: var(--scrollbarHandleHover) var(--panel); + } + + &:active { + scrollbar-color: var(--accent) var(--panel); + } + + &::-webkit-scrollbar { + width: 6px; + height: 6px; + } + + &::-webkit-scrollbar-track { + background: var(--panel); + } + + &::-webkit-scrollbar-thumb { + background: var(--scrollbarHandle); + + &:hover { + background: var(--scrollbarHandleHover); + } + + &:active { + background: var(--accent); + } + } + } +} + +html.changing-theme { + &, * { + transition: background 1s ease !important; + } +} + +body { + overflow-wrap: break-word; +} + +#ini { + position: fixed; + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 100%; + cursor: wait; + + > svg { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + width: 64px; + height: 64px; + animation: ini 0.6s infinite linear; + } +} + +html, body { + margin: 0; + padding: 0; + scroll-behavior: smooth; + text-size-adjust: 100%; + font-family: Roboto, HelveticaNeue, Arial, sans-serif; +} + +a { + text-decoration: none; + cursor: pointer; + color: inherit; + + &:hover { + text-decoration: underline; + } + + * { + cursor: pointer; + } +} + +#nprogress { + pointer-events: none; + position: absolute; + z-index: 10000; + + .bar { + background: var(--accent); + position: fixed; + z-index: 10001; + top: 0; + left: 0; + width: 100%; + height: 2px; + } + + .peg { + display: block; + position: absolute; + right: 0; + width: 100px; + height: 100%; + box-shadow: 0 0 10px var(--accent), 0 0 5px var(--accent); + opacity: 1; + transform: rotate(3deg) translate(0px, -4px); + } +} + +#wait { + display: block; + position: fixed; + z-index: 10000; + top: 15px; + right: 15px; + + &:before { + content: ""; + display: block; + width: 18px; + height: 18px; + box-sizing: border-box; + border: solid 2px transparent; + border-top-color: var(--accent); + border-left-color: var(--accent); + border-radius: 50%; + animation: progress-spinner 400ms linear infinite; + } +} + +._button { + appearance: none; + padding: 0; + background: none; + border: none; + cursor: pointer; + color: var(--fg); + touch-action: manipulation; + font-size: 1em; + + &, * { + user-select: none; + -webkit-user-select: none; + -webkit-touch-callout: none; + } + + * { + pointer-events: none; + } + + &:focus { + outline: none; + } + + &:disabled { + opacity: 0.5; + cursor: default; + } +} + +._buttonPrimary { + @extend ._button; + color: #fff; + background: var(--accent); + + &:not(:disabled):hover { + background: var(--jkhztclx); + } + + &:not(:disabled):active { + background: var(--zbqjwygh); + } +} + +._textButton { + @extend ._button; + color: var(--accent); + + &:not(:disabled):hover { + text-decoration: underline; + } +} + +._shadow { + box-shadow: 0 8px 32px var(--shadow); + + @media (max-width: 700px) { + box-shadow: 0 4px 16px var(--shadow); + } + + @media (max-width: 500px) { + box-shadow: 0 2px 8px var(--shadow); + } +} + +._panel { + @extend ._shadow; + position: relative; + background: var(--panel); + border-radius: var(--radius); +} + +._section { + @extend ._panel; + + & + ._section { + margin-top: var(--margin); + } + + > ._title { + margin: 0; + padding: 22px 32px; + font-size: 1.1em; + border-bottom: solid 1px var(--divider); + font-weight: bold; + + @media (max-width: 500px) { + padding: 16px; + font-size: 1em; + } + } + + > ._content { + padding: 32px; + + @media (max-width: 500px) { + padding: 16px; + } + + & + ._content { + border-top: solid 1px var(--divider); + } + + &._list { + padding: 16px; + + @media (max-width: 500px) { + padding: 8px; + } + + ._listItem { + padding: 8px 16px; + border-radius: var(--radius); + + @media (max-width: 500px) { + padding: 8px; + } + + &:hover { + background: var(--listItemHoverBg); + } + + > * { + pointer-events: none; + } + } + } + } + + > ._footer { + border-top: solid 1px var(--divider); + padding: 24px 32px; + + @media (max-width: 500px) { + padding: 16px; + } + } +} + +.zoom-enter-active, .zoom-leave-active { + transition: opacity 0.5s, transform 0.5s !important; +} +.zoom-enter, .zoom-leave-to { + opacity: 0; + transform: scale(0.9); +} + +.zoom-in-top-enter-active, +.zoom-in-top-leave-active { + opacity: 1; + transform: scaleY(1); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); + transform-origin: center top; +} +.zoom-in-top-enter, +.zoom-in-top-leave-active { + opacity: 0; + transform: scaleY(0); +} + +@keyframes progress-spinner { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes ini { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} |