From 6c54c9d57d5fa4c52aa454ed3ca09060b0674ad3 Mon Sep 17 00:00:00 2001 From: piotrruss Date: Sat, 4 Sep 2021 11:20:34 +0200 Subject: split scss into partials --- apps/Notes/Notes.module.scss | 244 ----------------------------- apps/Notes/components/Export.js | 2 +- apps/Notes/components/Import.js | 2 +- apps/Notes/components/List.js | 2 +- apps/Notes/components/ListItem.js | 2 +- apps/Notes/components/NoteEdit.js | 2 +- apps/Notes/components/NoteView.js | 2 +- apps/Notes/styles/Notes.module.scss | 6 + apps/Notes/styles/_export.scss | 19 +++ apps/Notes/styles/_import.scss | 39 +++++ apps/Notes/styles/_listItem.scss | 46 ++++++ apps/Notes/styles/_noteEdit.scss | 64 ++++++++ apps/Notes/styles/_noteView.scss | 29 ++++ apps/Notes/styles/_notesList.scss | 43 +++++ styles/Main.module.scss | 305 ++---------------------------------- styles/_reset.scss | 56 ------- styles/_themes.scss | 86 ---------- styles/_window.scss | 191 ---------------------- styles/global.scss | 6 +- styles/global/_reset.scss | 56 +++++++ styles/global/_themes.scss | 86 ++++++++++ styles/global/_window.scss | 191 ++++++++++++++++++++++ styles/main/_fixed.scss | 7 + styles/main/_header.scss | 39 +++++ styles/main/_headerOverlay.scss | 8 + styles/main/_icon.scss | 22 +++ styles/main/_layout.scss | 7 + styles/main/_splash.scss | 34 ++++ styles/main/_submenu.scss | 28 ++++ styles/main/_user.scss | 14 ++ styles/main/_userForm.scss | 104 ++++++++++++ styles/main/_verify.scss | 23 +++ 32 files changed, 884 insertions(+), 881 deletions(-) delete mode 100644 apps/Notes/Notes.module.scss create mode 100644 apps/Notes/styles/Notes.module.scss create mode 100644 apps/Notes/styles/_export.scss create mode 100644 apps/Notes/styles/_import.scss create mode 100644 apps/Notes/styles/_listItem.scss create mode 100644 apps/Notes/styles/_noteEdit.scss create mode 100644 apps/Notes/styles/_noteView.scss create mode 100644 apps/Notes/styles/_notesList.scss delete mode 100755 styles/_reset.scss delete mode 100644 styles/_themes.scss delete mode 100644 styles/_window.scss create mode 100755 styles/global/_reset.scss create mode 100644 styles/global/_themes.scss create mode 100644 styles/global/_window.scss create mode 100644 styles/main/_fixed.scss create mode 100644 styles/main/_header.scss create mode 100644 styles/main/_headerOverlay.scss create mode 100644 styles/main/_icon.scss create mode 100644 styles/main/_layout.scss create mode 100644 styles/main/_splash.scss create mode 100644 styles/main/_submenu.scss create mode 100644 styles/main/_user.scss create mode 100644 styles/main/_userForm.scss create mode 100644 styles/main/_verify.scss diff --git a/apps/Notes/Notes.module.scss b/apps/Notes/Notes.module.scss deleted file mode 100644 index a8ad168..0000000 --- a/apps/Notes/Notes.module.scss +++ /dev/null @@ -1,244 +0,0 @@ -.notesList { - @keyframes fade-in { - from {opacity: 0;} - to {opacity: 1;} - } - - display: block; - overflow: auto; - width: 100%; - table-layout: fixed; - word-wrap: break-word; - height: 100%; - margin-top: -1em; - padding-top: 1em; - - & > tbody, - & > thead { - display: block; - } - - & tr { - display: flex; - padding: .5em; - } - - & th { - font-weight: 600; - text-align: left; - min-width: 10em; - white-space: nowrap; - padding-bottom: .5em; - // cursor: pointer; - line-height: 1.1em; - - &:first-of-type { - width: 99%; - } - - svg { - animation: fade-in .3s; - } - } -} - -.listItem { - td { - min-width: 10em; - white-space: nowrap; - - &:first-of-type { - width: 99%; - display: flex; - margin-right: 1em; - - & > span:nth-child(1) { - text-overflow: ellipsis; - overflow: hidden; - flex-grow: 1; - } - - & > span:nth-child(n+2){ - margin-left: .25em; - padding: .15em .5em; - line-height: 1em; - border-radius: 50%; - visibility: hidden; - opacity: 0; - font-size: 80%; - transition: .3s opacity linear .3s; - } - } - } - - &:hover { - background: var(--color-window-menu-alt); - border-radius: .5em; - // cursor: pointer; - - & > td:first-of-type > span:nth-child(n+2){ - color: var(--color-window-buttons); - visibility: visible; - opacity: 1; - } - } - - & > td:first-of-type > span:nth-child(n+2):hover { - color: var(--color-text-alt); - background-color: var(--color-glass); - } -} - -.noteView { - @keyframes fade-in { - from {opacity: 0;} - to {opacity: 1;} - } - - padding: 1rem; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - animation: fade-in .3s; - - h2 { - font-size: 1.25em; - font-weight: 600; - padding: 1rem; - user-select: text; - } - - p { - line-height: 1.33; - padding: 0 1rem 1rem; - white-space: pre-line; - user-select: text; - } -} - -.noteEdit { - @keyframes fade-in { - from {opacity: 0;} - to {opacity: 1;} - } - - display: flex; - flex-direction: column; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - padding: 1em 1em 2em; - animation: fade-in .3s; - - h2 { - font-size: 1.2em; - margin-bottom: .5em; - } - - form { - display: flex; - flex-direction: column; - width: 100%; - flex-grow: 1; - - & > div { - text-align: right; - } - } - - input[type=text] { - background-color: var(--color-window-content); - color: var(--color-text-alt); - margin-bottom: .5rem; - height: 3rem; - border: none; - padding: 0.5rem; - font-size: 1rem; - border: 1px dashed var(--color-window-buttons); - - &:placeholder { - font: inherit; - } - } - - textarea { - background-color: var(--color-window-content); - color: var(--color-text-alt); - font-size: 1rem; - flex-grow: 1; - resize: none; - height: 100%; - width: 100%; - border: none; - border: 1px dashed var(--color-window-buttons); - padding: 0.5rem; - - &:placeholder { - font: inherit; - } - } -} - -.import { - @keyframes fade-in { - from {opacity: 0;} - to {opacity: 1;} - } - - padding: 1rem; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - animation: fade-in .3s; - - form { - padding: 1em; - } - - input[type=file] { - display: none; - } - - label { - display: inline-block; - // cursor: pointer; - } - - li { - padding: .25em; - } - - p { - padding: 1em 0; - } - - .fa-check ~ span { - color: var(--color-success); - } -} - -.export { - padding: 1em; - - p { - padding-top: 2em; - padding-bottom: 1em; - } - - &__select { - display: inline-block; - border-bottom: 1px dashed var(--color-decor); - padding-bottom: .5em; - margin-bottom: .25em; - } - - input[type=checkbox] { - margin: .5em .5em 0 0; - } -} diff --git a/apps/Notes/components/Export.js b/apps/Notes/components/Export.js index 0838cea..11aed5b 100644 --- a/apps/Notes/components/Export.js +++ b/apps/Notes/components/Export.js @@ -1,4 +1,4 @@ -import styles from '../Notes.module.scss' +import styles from '../styles/Notes.module.scss' import React, {useState} from 'react' import useSettings from 'hooks/useSettings' import useNotes from '../hooks/useNotes' diff --git a/apps/Notes/components/Import.js b/apps/Notes/components/Import.js index ad2b831..1c90008 100644 --- a/apps/Notes/components/Import.js +++ b/apps/Notes/components/Import.js @@ -1,4 +1,4 @@ -import styles from '../Notes.module.scss' +import styles from '../styles/Notes.module.scss' import React, {useState} from 'react' import useSettings from 'hooks/useSettings' import useNotes from '../hooks/useNotes' diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js index 9655d74..5039061 100644 --- a/apps/Notes/components/List.js +++ b/apps/Notes/components/List.js @@ -1,4 +1,4 @@ -import styles from '../Notes.module.scss' +import styles from '../styles/Notes.module.scss' import React, {useState, useEffect} from 'react' import useUser from 'hooks/useUser' import useSettings from 'hooks/useSettings' diff --git a/apps/Notes/components/ListItem.js b/apps/Notes/components/ListItem.js index 4a2d6f6..4abefd3 100644 --- a/apps/Notes/components/ListItem.js +++ b/apps/Notes/components/ListItem.js @@ -1,4 +1,4 @@ -import styles from '../Notes.module.scss' +import styles from '../styles/Notes.module.scss' import React from 'react' import {getNote, exportNote, removeNote} from '../helpers/noteActions.js' import useSettings from 'hooks/useSettings' diff --git a/apps/Notes/components/NoteEdit.js b/apps/Notes/components/NoteEdit.js index f9cc3f2..45d226f 100644 --- a/apps/Notes/components/NoteEdit.js +++ b/apps/Notes/components/NoteEdit.js @@ -1,4 +1,4 @@ -import styles from '../Notes.module.scss' +import styles from '../styles/Notes.module.scss' import React from 'react' import usePopup from 'hooks/usePopup' import useSettings from 'hooks/useSettings' diff --git a/apps/Notes/components/NoteView.js b/apps/Notes/components/NoteView.js index 02937f8..ccaf343 100644 --- a/apps/Notes/components/NoteView.js +++ b/apps/Notes/components/NoteView.js @@ -1,4 +1,4 @@ -import styles from '../Notes.module.scss' +import styles from '../styles/Notes.module.scss' import React from 'react'; import useSettings from 'hooks/useSettings' import usePopup from 'hooks/usePopup' diff --git a/apps/Notes/styles/Notes.module.scss b/apps/Notes/styles/Notes.module.scss new file mode 100644 index 0000000..3208b80 --- /dev/null +++ b/apps/Notes/styles/Notes.module.scss @@ -0,0 +1,6 @@ +@import "listItem"; +@import "noteView"; +@import "notesList"; +@import "noteEdit"; +@import "import"; +@import "export"; diff --git a/apps/Notes/styles/_export.scss b/apps/Notes/styles/_export.scss new file mode 100644 index 0000000..d5951f3 --- /dev/null +++ b/apps/Notes/styles/_export.scss @@ -0,0 +1,19 @@ +.export { + padding: 1em; + + p { + padding-top: 2em; + padding-bottom: 1em; + } + + &__select { + display: inline-block; + border-bottom: 1px dashed var(--color-decor); + padding-bottom: .5em; + margin-bottom: .25em; + } + + input[type=checkbox] { + margin: .5em .5em 0 0; + } +} diff --git a/apps/Notes/styles/_import.scss b/apps/Notes/styles/_import.scss new file mode 100644 index 0000000..5d167a8 --- /dev/null +++ b/apps/Notes/styles/_import.scss @@ -0,0 +1,39 @@ +.import { + @keyframes fade-in { + from {opacity: 0;} + to {opacity: 1;} + } + + padding: 1rem; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + animation: fade-in .3s; + + form { + padding: 1em; + } + + input[type=file] { + display: none; + } + + label { + display: inline-block; + // cursor: pointer; + } + + li { + padding: .25em; + } + + p { + padding: 1em 0; + } + + .fa-check ~ span { + color: var(--color-success); + } +} diff --git a/apps/Notes/styles/_listItem.scss b/apps/Notes/styles/_listItem.scss new file mode 100644 index 0000000..5e7376f --- /dev/null +++ b/apps/Notes/styles/_listItem.scss @@ -0,0 +1,46 @@ +.listItem { + td { + min-width: 10em; + white-space: nowrap; + + &:first-of-type { + width: 99%; + display: flex; + margin-right: 1em; + + & > span:nth-child(1) { + text-overflow: ellipsis; + overflow: hidden; + flex-grow: 1; + } + + & > span:nth-child(n+2){ + margin-left: .25em; + padding: .15em .5em; + line-height: 1em; + border-radius: 50%; + visibility: hidden; + opacity: 0; + font-size: 80%; + transition: .3s opacity linear .3s; + } + } + } + + &:hover { + background: var(--color-window-menu-alt); + border-radius: .5em; + // cursor: pointer; + + & > td:first-of-type > span:nth-child(n+2){ + color: var(--color-window-buttons); + visibility: visible; + opacity: 1; + } + } + + & > td:first-of-type > span:nth-child(n+2):hover { + color: var(--color-text-alt); + background-color: var(--color-glass); + } +} diff --git a/apps/Notes/styles/_noteEdit.scss b/apps/Notes/styles/_noteEdit.scss new file mode 100644 index 0000000..43191fe --- /dev/null +++ b/apps/Notes/styles/_noteEdit.scss @@ -0,0 +1,64 @@ +.noteEdit { + @keyframes fade-in { + from {opacity: 0;} + to {opacity: 1;} + } + + display: flex; + flex-direction: column; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: 1em 1em 2em; + animation: fade-in .3s; + + h2 { + font-size: 1.2em; + margin-bottom: .5em; + } + + form { + display: flex; + flex-direction: column; + width: 100%; + flex-grow: 1; + + & > div { + text-align: right; + } + } + + input[type=text] { + background-color: var(--color-window-content); + color: var(--color-text-alt); + margin-bottom: .5rem; + height: 3rem; + border: none; + padding: 0.5rem; + font-size: 1rem; + border: 1px dashed var(--color-window-buttons); + + &:placeholder { + font: inherit; + } + } + + textarea { + background-color: var(--color-window-content); + color: var(--color-text-alt); + font-size: 1rem; + flex-grow: 1; + resize: none; + height: 100%; + width: 100%; + border: none; + border: 1px dashed var(--color-window-buttons); + padding: 0.5rem; + + &:placeholder { + font: inherit; + } + } +} diff --git a/apps/Notes/styles/_noteView.scss b/apps/Notes/styles/_noteView.scss new file mode 100644 index 0000000..cf6a080 --- /dev/null +++ b/apps/Notes/styles/_noteView.scss @@ -0,0 +1,29 @@ +.noteView { + @keyframes fade-in { + from {opacity: 0;} + to {opacity: 1;} + } + + padding: 1rem; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + animation: fade-in .3s; + + h2 { + font-size: 1.25em; + font-weight: 600; + padding: 1rem; + user-select: text; + } + + p { + line-height: 1.33; + padding: 0 1rem 1rem; + white-space: pre-line; + user-select: text; + } +} + diff --git a/apps/Notes/styles/_notesList.scss b/apps/Notes/styles/_notesList.scss new file mode 100644 index 0000000..f55757f --- /dev/null +++ b/apps/Notes/styles/_notesList.scss @@ -0,0 +1,43 @@ +.notesList { + @keyframes fade-in { + from {opacity: 0;} + to {opacity: 1;} + } + + display: block; + overflow: auto; + width: 100%; + table-layout: fixed; + word-wrap: break-word; + height: 100%; + margin-top: -1em; + padding-top: 1em; + + & > tbody, + & > thead { + display: block; + } + + & tr { + display: flex; + padding: .5em; + } + + & th { + font-weight: 600; + text-align: left; + min-width: 10em; + white-space: nowrap; + padding-bottom: .5em; + // cursor: pointer; + line-height: 1.1em; + + &:first-of-type { + width: 99%; + } + + svg { + animation: fade-in .3s; + } + } +} diff --git a/styles/Main.module.scss b/styles/Main.module.scss index 6663b15..a1f39ea 100644 --- a/styles/Main.module.scss +++ b/styles/Main.module.scss @@ -1,295 +1,10 @@ -.layout { - color: var(--color-text); - height: 100vh; - background: var(--color-bg); - background: linear-gradient(to bottom right, var(--color-bg) 0%, var(--color-bg-alt) 100%); - position: relative; -} - -.icon { - text-decoration: none; - display: inline-block; - padding: .5em; - text-align: center; - outline: none; - - img { - width: 3em; - } - - p { - margin-top: .25em; - padding: .25em; - transition: .2s background; - border-radius: .5em; - } - - &:focus p { - background-color: var(--color-selected); - } -} - -.userForm { - padding: 2em; - - label, - & { - display: flex; - flex-flow: column; - } - - label > span { - font-weight: 600; - } - - input[type=email], - input[type=password] { - color: var(--color-text-alt); - background: var(--color-window-content); - padding: .5em; - margin: .5em 0; - border: 1px dashed var(--color-decor); - border-radius: .5px; - } - - - input[type=password]:nth-of-type(2) { - margin-top: 1em; - } - - p { - text-align: center; - color: var(--color-error); - margin: 1rem 0 0; - } - - legend { - font-size: .8em; - padding: 2em 0 1.5em; - } - - & > fieldset:nth-of-type(1) { - fieldset { - display: inline-block; - } - - input { - display: none; - } - - label { - padding: 0 .75em; - transition: .3s color; - display: inline-block; - color: var(--color-decor); - margin-bottom: .5em; - - &:hover { - color: #666; - } - } - - input:checked + label { - font-weight: 600; - color: var(--color-text); - } - } - - & > fieldset:nth-of-type(2) { - fieldset { - display: inline-block; - } - - input { - display: none; - } - - label { - width: 2em; - height: 2em; - display: inline-block; - margin: 0 1em 1em; - outline-offset: 4px; - } - - fieldset:nth-of-type(1) label { - background-color: #53e3a6; - } - - fieldset:nth-of-type(2) label { - background-color: #2986b3; - } - - fieldset:nth-of-type(3) label { - background-color: #000; - } - - input:checked + label { - outline: 3px solid var(--color-window-buttons); - } - } - - input[type=submit] { - margin-top: 1.5em; - } -} - -.header { - height: 2em; - background-color: var(--color-glass); - border-bottom: 1px solid var(--color-window-border-bottom); - - nav { - display: flex; - - & > ul:first-of-type { - flex-grow: 1; - overflow: auto; - } - - & > ul { - display: block; - - & > li { - display: inline-block; - - & > span, - & > a { - display: inline-block; - color: var(--color-text); - text-decoration: none; - align-items: center; - padding: .25em .5em; - margin: .25em; - border-radius: .5em; - transition: .3s background, .3s color; - - &:hover { - background-color: var(--color-selected); - color: var(--color-text-alt); - } - } - } - } - } -} - -.headerOverlay { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - cursor: auto; -} - -.user { - font-weight: 600; - // cursor: pointer; - position: relative; - padding: .25em .5em; - margin: .25em; - border-radius: .5em; - transition: .3s background, .3s color; - - &:hover { - color: var(--color-text-alt); - background-color: var(--color-selected); - } -} - -.submenu { - position: absolute; - right: 4px; - top: 2.1em; - padding: .75em; - background-color: var(--color-window-content); - border-bottom: 1px solid var(--color-window-border-bottom); - border-radius: .5em; - display: flex; - flex-direction: column; - - & > li > span, - & > li > a { - display: block; - color: var(--color-text); - padding: .5em; - margin: .25em; - white-space: nowrap; - text-decoration: none; - transition: .3s background, .3s color; - border-radius: .5em; - - &:hover { - color: var(--color-text-alt); - background-color: var(--color-selected); - } - } -} - -.verify { - & > form { - padding: .5em 0; - - & > input { - padding: .75em; - border-radius: .5em; - } - } - - p { - line-height: 1.33; - padding: .5em 0; - } - - .email { - color: var(--color-link); - // cursor: pointer; - } - .error { - color: var(--color-error); - } -} - -.fixed { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -.loader, -.connection { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - flex-direction: column; - - @keyframes rotating { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - } - - svg { - font-size: 600%; - color: #ccc; - } - - p { - padding-top: 1em; - color: #ccc; - font-weight: 600; - } -} - -.loader { - svg { - animation: rotating 1s linear infinite; - } -} +@import "main/layout"; +@import "main/icon"; +@import "main/userForm"; +@import "main/header"; +@import "main/headerOverlay"; +@import "main/user"; +@import "main/submenu"; +@import "main/verify"; +@import "main/fixed"; +@import "main/splash"; diff --git a/styles/_reset.scss b/styles/_reset.scss deleted file mode 100755 index 0dc1326..0000000 --- a/styles/_reset.scss +++ /dev/null @@ -1,56 +0,0 @@ -* { - box-sizing: border-box; -} - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; - moz-user-select: none; - webkit-user-select: none; - ms-user-select: none; - user-select: none; - cursor: auto; -} -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} - -html{ - min-width: 320px; - background: white; -} diff --git a/styles/_themes.scss b/styles/_themes.scss deleted file mode 100644 index 9319fa5..0000000 --- a/styles/_themes.scss +++ /dev/null @@ -1,86 +0,0 @@ -.green { - --color-bg: #50a3a2; - --color-bg-alt: #53e3a6; - --color-text: #333; - --color-text-alt: #111; - --color-decor: #ccc; - --color-glass: rgb(151, 215, 200, .9); - --color-glass-alt: rgba(255, 255, 255, 0.5); - --color-error: #a00; - --color-success: #0a0; - --color-link: #006dd0; - --color-selected: rgba(0,0,0,.1); - --color-window-border-top: rgba(255,255,255,.7); - --color-window-border-bottom: #ccc; - --color-window-content: #fff; - --color-window-popup: #fff; - --color-window-buttons: #666; - --color-window-buttons-alt: #222; - --color-window-menu: #eee; - --color-window-menu-alt: #ddd; - --color-button: #9cdbb5; - --color-button-alt: #a4eac0; - --color-button-border: #8ecca6; - --color-popup-error-bg: #ffe1e1; - --color-popup-error-button: #ffbebe; - --color-popup-error-button-alt: #ffa1a1; - --color-popup-error-border: #ffb6b6; -} - -.blue { - --color-bg: #71b0d7; - --color-bg-alt: #a4e4fd; - --color-text: #333; - --color-text-alt: #111; - --color-decor: #ccc; - --color-glass: rgba(151, 192, 230, 0.9); - --color-glass-alt: rgba(255, 255, 255, 0.5); - --color-error: #a00; - --color-success: #0a0; - --color-link: #006dd0; - --color-selected: rgba(0,0,0,.1); - --color-window-border-top: rgba(255,255,255,.7); - --color-window-border-bottom: #ccc; - --color-window-content: #fff; - --color-window-popup: #fff; - --color-window-buttons: #666; - --color-window-buttons-alt: #222; - --color-window-menu: #eee; - --color-window-menu-alt: #ddd; - --color-button: #81d5ff; - --color-button-alt: #ace0ff; - --color-button-border: #67c1f9; - --color-popup-error-bg: #ffe1e1; - --color-popup-error-button: #ffbebe; - --color-popup-error-button-alt: #ffa1a1; - --color-popup-error-border: #ffb6b6; -} - -.black { - --color-bg: #000; - --color-bg-alt: #222; - --color-text: #eee; - --color-text-alt: #fff; - --color-decor: #ccc; - --color-glass: rgb(20, 20, 20, .9); - --color-glass-alt: rgba(255, 255, 255, 0.3); - --color-error: #a00; - --color-success: #0a0; - --color-link: #006dd0; - --color-selected: rgba(255,255,255,.2); - --color-window-border-top: rgba(255,255,255,.3); - --color-window-border-bottom: #444; - --color-window-content: #222; - --color-window-popup: #333; - --color-window-buttons: #ccc; - --color-window-buttons-alt: #fff; - --color-window-menu: #282828; - --color-window-menu-alt: #111; - --color-button: #555; - --color-button-alt: #444; - --color-button-border: #666; - --color-popup-error-bg: #6f0b0b; - --color-popup-error-button: #934e4e; - --color-popup-error-button-alt: #a21010; - --color-popup-error-border: #ffd6d6; -} diff --git a/styles/_window.scss b/styles/_window.scss deleted file mode 100644 index 08ddfaf..0000000 --- a/styles/_window.scss +++ /dev/null @@ -1,191 +0,0 @@ -.window { - position: absolute; - transition-property: opacity, visibility, transform, width, height, top, left; - transition-duration: .3s; - box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; - border-radius: .5em; - color: var(--color-text); - - &.moving { - transition: none - } - - &--popup { - padding: 1em; - background: var(--color-window-popup); - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - max-width: 21rem; - margin: 0 auto; - - &:not(.window--popup-with-title) { - border-top-left-radius: .5em; - border-top-right-radius: .5em; - } - } - - &:not(.window--popup) { - height: 100%; - width: 100%; - } - // top: 50%; - // left: 50%; - - // @media (min-width: 80em) { - // width: 64em; - // left: calc((100vw - 64em) / 2) - // } - - // @media (min-height: 80em) { - // width: 64em; - // left: calc((100vh - 64em) / 2) - // } - // } - - &__title { - position: absolute; - background-color: var(--color-glass); - top: 0; - left: 0; - right: 0; - height: 2em; - text-align: center; - padding: .5em; - width: 100%; - border-bottom: 1px solid var(--color-window-border-bottom); - border-top: 1px solid var(--color-window-border-top); - border-top-left-radius: .5em; - border-top-right-radius: .5em; - } - - &--popup > .window__title { - top: -2em; - } - - &__content--popup { - text-align: center; - padding: 1em; - } - - &__title-buttons { - position: absolute; - top: .5em; - right: .5em; - // cursor: pointer; - - & > span { - padding: .5em; - transition: .3s background, .3s color; - border-radius: .5em; - color: var(--color-window-buttons); - font-size: 0.8em; - - &:hover { - background-color: var(--color-selected); - color: var(--color-window-buttons-alt); - } - } - } - - &__content { - position: absolute; - overflow: hidden; - background-color: var(--color-window-content); - top: 2em; - right: 0; - bottom: 0; - left: 0; - padding: 1em; - border-bottom-left-radius: .5em; - border-bottom-right-radius: .5em; - } - - &--with-submenu { - .window__content { - top: 4em; - } - } - - .window__submenu { - display: block; - margin: -1em -1em 1em; - height: 2em; - background: var(--color-window-menu); - - & > div { - // cursor: pointer; - display: inline-block; - padding: .5em; - transition: .3s background; - - &:hover { - background-color: var(--color-window-menu-alt); - } - } - } - - &__scroll { - height: 100%; - overflow: auto; - margin: -1em -1em 0; - } - - &__buttons--popup { - padding: 0 .5em 1em; - text-align: center; - } - - &__button { - color: var(--color-text); - margin: 1em 1em 0; - font-size: 1em; - padding: .5em 1em; - background-color: var(--color-button); - border-left: 0; - border-right: 0; - border-top: 1px solid var(--color-button-border); - border-bottom: 1px solid var(--color-button-border); - border-radius: .5em; - // cursor: pointer; - transition: .3s background-color; - - &:hover { - background-color: var(--color-button-alt); - } - } - - &--error { - background: var(--color-popup-error-bg); - - .window__button { - background-color: var(--color-popup-error-button); - border-top: 1px solid var(--color-popup-error-border); - border-bottom: 1px solid var(--color-popup-error-border); - - &:hover { - background-color: var(--color-popup-error-button-alt); - } - } - } - - &.hidden { - opacity: 0; - visibility: hidden; - transform: translateY(-100vh); - z-index: -1; - } - - &.maximized { - top:0!important; - right: 0!important; - bottom: 0!important; - left: 0!important; - width: 100%!important; - height: 100%!important; - - & > .window__content { - top: 0; - } - } -} diff --git a/styles/global.scss b/styles/global.scss index 11d23d3..0a542a9 100644 --- a/styles/global.scss +++ b/styles/global.scss @@ -1,6 +1,6 @@ -@import "reset"; -@import "themes"; -@import "window"; +@import "global/reset"; +@import "global/themes"; +@import "global/window"; main { position: fixed; diff --git a/styles/global/_reset.scss b/styles/global/_reset.scss new file mode 100755 index 0000000..0dc1326 --- /dev/null +++ b/styles/global/_reset.scss @@ -0,0 +1,56 @@ +* { + box-sizing: border-box; +} + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + moz-user-select: none; + webkit-user-select: none; + ms-user-select: none; + user-select: none; + cursor: auto; +} +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +html{ + min-width: 320px; + background: white; +} diff --git a/styles/global/_themes.scss b/styles/global/_themes.scss new file mode 100644 index 0000000..9319fa5 --- /dev/null +++ b/styles/global/_themes.scss @@ -0,0 +1,86 @@ +.green { + --color-bg: #50a3a2; + --color-bg-alt: #53e3a6; + --color-text: #333; + --color-text-alt: #111; + --color-decor: #ccc; + --color-glass: rgb(151, 215, 200, .9); + --color-glass-alt: rgba(255, 255, 255, 0.5); + --color-error: #a00; + --color-success: #0a0; + --color-link: #006dd0; + --color-selected: rgba(0,0,0,.1); + --color-window-border-top: rgba(255,255,255,.7); + --color-window-border-bottom: #ccc; + --color-window-content: #fff; + --color-window-popup: #fff; + --color-window-buttons: #666; + --color-window-buttons-alt: #222; + --color-window-menu: #eee; + --color-window-menu-alt: #ddd; + --color-button: #9cdbb5; + --color-button-alt: #a4eac0; + --color-button-border: #8ecca6; + --color-popup-error-bg: #ffe1e1; + --color-popup-error-button: #ffbebe; + --color-popup-error-button-alt: #ffa1a1; + --color-popup-error-border: #ffb6b6; +} + +.blue { + --color-bg: #71b0d7; + --color-bg-alt: #a4e4fd; + --color-text: #333; + --color-text-alt: #111; + --color-decor: #ccc; + --color-glass: rgba(151, 192, 230, 0.9); + --color-glass-alt: rgba(255, 255, 255, 0.5); + --color-error: #a00; + --color-success: #0a0; + --color-link: #006dd0; + --color-selected: rgba(0,0,0,.1); + --color-window-border-top: rgba(255,255,255,.7); + --color-window-border-bottom: #ccc; + --color-window-content: #fff; + --color-window-popup: #fff; + --color-window-buttons: #666; + --color-window-buttons-alt: #222; + --color-window-menu: #eee; + --color-window-menu-alt: #ddd; + --color-button: #81d5ff; + --color-button-alt: #ace0ff; + --color-button-border: #67c1f9; + --color-popup-error-bg: #ffe1e1; + --color-popup-error-button: #ffbebe; + --color-popup-error-button-alt: #ffa1a1; + --color-popup-error-border: #ffb6b6; +} + +.black { + --color-bg: #000; + --color-bg-alt: #222; + --color-text: #eee; + --color-text-alt: #fff; + --color-decor: #ccc; + --color-glass: rgb(20, 20, 20, .9); + --color-glass-alt: rgba(255, 255, 255, 0.3); + --color-error: #a00; + --color-success: #0a0; + --color-link: #006dd0; + --color-selected: rgba(255,255,255,.2); + --color-window-border-top: rgba(255,255,255,.3); + --color-window-border-bottom: #444; + --color-window-content: #222; + --color-window-popup: #333; + --color-window-buttons: #ccc; + --color-window-buttons-alt: #fff; + --color-window-menu: #282828; + --color-window-menu-alt: #111; + --color-button: #555; + --color-button-alt: #444; + --color-button-border: #666; + --color-popup-error-bg: #6f0b0b; + --color-popup-error-button: #934e4e; + --color-popup-error-button-alt: #a21010; + --color-popup-error-border: #ffd6d6; +} diff --git a/styles/global/_window.scss b/styles/global/_window.scss new file mode 100644 index 0000000..08ddfaf --- /dev/null +++ b/styles/global/_window.scss @@ -0,0 +1,191 @@ +.window { + position: absolute; + transition-property: opacity, visibility, transform, width, height, top, left; + transition-duration: .3s; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; + border-radius: .5em; + color: var(--color-text); + + &.moving { + transition: none + } + + &--popup { + padding: 1em; + background: var(--color-window-popup); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-width: 21rem; + margin: 0 auto; + + &:not(.window--popup-with-title) { + border-top-left-radius: .5em; + border-top-right-radius: .5em; + } + } + + &:not(.window--popup) { + height: 100%; + width: 100%; + } + // top: 50%; + // left: 50%; + + // @media (min-width: 80em) { + // width: 64em; + // left: calc((100vw - 64em) / 2) + // } + + // @media (min-height: 80em) { + // width: 64em; + // left: calc((100vh - 64em) / 2) + // } + // } + + &__title { + position: absolute; + background-color: var(--color-glass); + top: 0; + left: 0; + right: 0; + height: 2em; + text-align: center; + padding: .5em; + width: 100%; + border-bottom: 1px solid var(--color-window-border-bottom); + border-top: 1px solid var(--color-window-border-top); + border-top-left-radius: .5em; + border-top-right-radius: .5em; + } + + &--popup > .window__title { + top: -2em; + } + + &__content--popup { + text-align: center; + padding: 1em; + } + + &__title-buttons { + position: absolute; + top: .5em; + right: .5em; + // cursor: pointer; + + & > span { + padding: .5em; + transition: .3s background, .3s color; + border-radius: .5em; + color: var(--color-window-buttons); + font-size: 0.8em; + + &:hover { + background-color: var(--color-selected); + color: var(--color-window-buttons-alt); + } + } + } + + &__content { + position: absolute; + overflow: hidden; + background-color: var(--color-window-content); + top: 2em; + right: 0; + bottom: 0; + left: 0; + padding: 1em; + border-bottom-left-radius: .5em; + border-bottom-right-radius: .5em; + } + + &--with-submenu { + .window__content { + top: 4em; + } + } + + .window__submenu { + display: block; + margin: -1em -1em 1em; + height: 2em; + background: var(--color-window-menu); + + & > div { + // cursor: pointer; + display: inline-block; + padding: .5em; + transition: .3s background; + + &:hover { + background-color: var(--color-window-menu-alt); + } + } + } + + &__scroll { + height: 100%; + overflow: auto; + margin: -1em -1em 0; + } + + &__buttons--popup { + padding: 0 .5em 1em; + text-align: center; + } + + &__button { + color: var(--color-text); + margin: 1em 1em 0; + font-size: 1em; + padding: .5em 1em; + background-color: var(--color-button); + border-left: 0; + border-right: 0; + border-top: 1px solid var(--color-button-border); + border-bottom: 1px solid var(--color-button-border); + border-radius: .5em; + // cursor: pointer; + transition: .3s background-color; + + &:hover { + background-color: var(--color-button-alt); + } + } + + &--error { + background: var(--color-popup-error-bg); + + .window__button { + background-color: var(--color-popup-error-button); + border-top: 1px solid var(--color-popup-error-border); + border-bottom: 1px solid var(--color-popup-error-border); + + &:hover { + background-color: var(--color-popup-error-button-alt); + } + } + } + + &.hidden { + opacity: 0; + visibility: hidden; + transform: translateY(-100vh); + z-index: -1; + } + + &.maximized { + top:0!important; + right: 0!important; + bottom: 0!important; + left: 0!important; + width: 100%!important; + height: 100%!important; + + & > .window__content { + top: 0; + } + } +} diff --git a/styles/main/_fixed.scss b/styles/main/_fixed.scss new file mode 100644 index 0000000..16cfbd8 --- /dev/null +++ b/styles/main/_fixed.scss @@ -0,0 +1,7 @@ +.fixed { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; +} diff --git a/styles/main/_header.scss b/styles/main/_header.scss new file mode 100644 index 0000000..9fab16b --- /dev/null +++ b/styles/main/_header.scss @@ -0,0 +1,39 @@ +.header { + height: 2em; + background-color: var(--color-glass); + border-bottom: 1px solid var(--color-window-border-bottom); + + nav { + display: flex; + + & > ul:first-of-type { + flex-grow: 1; + overflow: auto; + } + + & > ul { + display: block; + + & > li { + display: inline-block; + + & > span, + & > a { + display: inline-block; + color: var(--color-text); + text-decoration: none; + align-items: center; + padding: .25em .5em; + margin: .25em; + border-radius: .5em; + transition: .3s background, .3s color; + + &:hover { + background-color: var(--color-selected); + color: var(--color-text-alt); + } + } + } + } + } +} diff --git a/styles/main/_headerOverlay.scss b/styles/main/_headerOverlay.scss new file mode 100644 index 0000000..b11897a --- /dev/null +++ b/styles/main/_headerOverlay.scss @@ -0,0 +1,8 @@ +.headerOverlay { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + cursor: auto; +} diff --git a/styles/main/_icon.scss b/styles/main/_icon.scss new file mode 100644 index 0000000..a7c16ed --- /dev/null +++ b/styles/main/_icon.scss @@ -0,0 +1,22 @@ +.icon { + text-decoration: none; + display: inline-block; + padding: .5em; + text-align: center; + outline: none; + + img { + width: 3em; + } + + p { + margin-top: .25em; + padding: .25em; + transition: .2s background; + border-radius: .5em; + } + + &:focus p { + background-color: var(--color-selected); + } +} diff --git a/styles/main/_layout.scss b/styles/main/_layout.scss new file mode 100644 index 0000000..48374a5 --- /dev/null +++ b/styles/main/_layout.scss @@ -0,0 +1,7 @@ +.layout { + color: var(--color-text); + height: 100vh; + background: var(--color-bg); + background: linear-gradient(to bottom right, var(--color-bg) 0%, var(--color-bg-alt) 100%); + position: relative; +} diff --git a/styles/main/_splash.scss b/styles/main/_splash.scss new file mode 100644 index 0000000..3db973f --- /dev/null +++ b/styles/main/_splash.scss @@ -0,0 +1,34 @@ +.loader, +.connection { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + flex-direction: column; + + @keyframes rotating { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + + svg { + font-size: 600%; + color: #ccc; + } + + p { + padding-top: 1em; + color: #ccc; + font-weight: 600; + } +} + +.loader { + svg { + animation: rotating 1s linear infinite; + } +} diff --git a/styles/main/_submenu.scss b/styles/main/_submenu.scss new file mode 100644 index 0000000..92bac7c --- /dev/null +++ b/styles/main/_submenu.scss @@ -0,0 +1,28 @@ +.submenu { + position: absolute; + right: 4px; + top: 2.1em; + padding: .75em; + background-color: var(--color-window-content); + border-bottom: 1px solid var(--color-window-border-bottom); + border-radius: .5em; + display: flex; + flex-direction: column; + + & > li > span, + & > li > a { + display: block; + color: var(--color-text); + padding: .5em; + margin: .25em; + white-space: nowrap; + text-decoration: none; + transition: .3s background, .3s color; + border-radius: .5em; + + &:hover { + color: var(--color-text-alt); + background-color: var(--color-selected); + } + } +} diff --git a/styles/main/_user.scss b/styles/main/_user.scss new file mode 100644 index 0000000..07e5c28 --- /dev/null +++ b/styles/main/_user.scss @@ -0,0 +1,14 @@ +.user { + font-weight: 600; + // cursor: pointer; + position: relative; + padding: .25em .5em; + margin: .25em; + border-radius: .5em; + transition: .3s background, .3s color; + + &:hover { + color: var(--color-text-alt); + background-color: var(--color-selected); + } +} diff --git a/styles/main/_userForm.scss b/styles/main/_userForm.scss new file mode 100644 index 0000000..5cf0653 --- /dev/null +++ b/styles/main/_userForm.scss @@ -0,0 +1,104 @@ +.userForm { + padding: 2em; + + label, + & { + display: flex; + flex-flow: column; + } + + label > span { + font-weight: 600; + } + + input[type=email], + input[type=password] { + color: var(--color-text-alt); + background: var(--color-window-content); + padding: .5em; + margin: .5em 0; + border: 1px dashed var(--color-decor); + border-radius: .5px; + } + + + input[type=password]:nth-of-type(2) { + margin-top: 1em; + } + + p { + text-align: center; + color: var(--color-error); + margin: 1rem 0 0; + } + + legend { + font-size: .8em; + padding: 2em 0 1.5em; + } + + & > fieldset:nth-of-type(1) { + fieldset { + display: inline-block; + } + + input { + display: none; + } + + label { + padding: 0 .75em; + transition: .3s color; + display: inline-block; + color: var(--color-decor); + margin-bottom: .5em; + + &:hover { + color: #666; + } + } + + input:checked + label { + font-weight: 600; + color: var(--color-text); + } + } + + & > fieldset:nth-of-type(2) { + fieldset { + display: inline-block; + } + + input { + display: none; + } + + label { + width: 2em; + height: 2em; + display: inline-block; + margin: 0 1em 1em; + outline-offset: 4px; + } + + fieldset:nth-of-type(1) label { + background-color: #53e3a6; + } + + fieldset:nth-of-type(2) label { + background-color: #2986b3; + } + + fieldset:nth-of-type(3) label { + background-color: #000; + } + + input:checked + label { + outline: 3px solid var(--color-window-buttons); + } + } + + input[type=submit] { + margin-top: 1.5em; + } +} diff --git a/styles/main/_verify.scss b/styles/main/_verify.scss new file mode 100644 index 0000000..d962916 --- /dev/null +++ b/styles/main/_verify.scss @@ -0,0 +1,23 @@ +.verify { + & > form { + padding: .5em 0; + + & > input { + padding: .75em; + border-radius: .5em; + } + } + + p { + line-height: 1.33; + padding: .5em 0; + } + + .email { + color: var(--color-link); + // cursor: pointer; + } + .error { + color: var(--color-error); + } +} -- cgit v1.2.3