diff options
Diffstat (limited to '')
| -rw-r--r-- | public/css/home.css | 40 | ||||
| -rw-r--r-- | public/css/login.css | 18 | ||||
| -rw-r--r-- | public/css/main.css | 119 | ||||
| -rw-r--r-- | public/css/record.css | 67 |
4 files changed, 244 insertions, 0 deletions
diff --git a/public/css/home.css b/public/css/home.css new file mode 100644 index 0000000..2548a28 --- /dev/null +++ b/public/css/home.css @@ -0,0 +1,40 @@ +span { + margin-top: 5rem; + margin-bottom: 1rem; + width: 45rem; + font-size: 2em; +} + +#new { + display: flex; + justify-content: center; + width: 100%; + padding-top: 2rem; + padding-bottom: 1rem; + border-bottom: solid 1px var(--gray); +} + +#new input, .block { + border-radius: 1rem 0 0 1rem; + width: 40rem; +} + +.block { + width: 33em; +} + +#new button { + border-radius: 0 1rem 1rem 0; +} + +.domain { + margin-top: 2rem; +} + +.domain .delete { + border-radius: 0 1rem 1rem 0; +} + +.domain .edit { + border-radius: 0; +}
\ No newline at end of file diff --git a/public/css/login.css b/public/css/login.css new file mode 100644 index 0000000..2be7c13 --- /dev/null +++ b/public/css/login.css @@ -0,0 +1,18 @@ +#login { + margin-top: 20em; +} + +#logo { + font-size: 6em; + font-weight: 750; + font-family: bold; + margin-bottom: 2rem; +} + +form { + width: 30rem; +} + +form input { + width: 100%; +}
\ No newline at end of file diff --git a/public/css/main.css b/public/css/main.css new file mode 100644 index 0000000..971e2bb --- /dev/null +++ b/public/css/main.css @@ -0,0 +1,119 @@ +:root { + --dark: #222428; + --dark-alternate: #2b2e36; + --header: #1e1e22; + + --accent: #8849f5; + --accent-alternate: #6829d5; + --gray: #2f2f3f; + --main: #ffffff; + --main-alternate: #cccccc; +} + +* { + padding: 0; + margin: 0; +} + +@font-face { + font-family: main; + src: url("../fonts/helvetica.ttf") format("truetype"); + font-display: swap; +} + +@font-face { + font-family: bold; + src: url("../fonts/overpass-bold.otf") format("opentype"); + font-display: swap; +} + +@font-face { + font-family: bold-italic; + src: url("../fonts/overpass-bold-italic.otf") format("opentype"); + font-display: swap; +} + +html { + background-color: var(--dark); + font-family: main; + color: var(--main); + width: 100%; + height: 100%; +} + +body { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.accent { + color: var(--accent); +} + +.fill { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +input, button, .block { + all: unset; + display: inline-block; + font: main; + background-color: var(--dark-alternate); + font-size: 1rem; + padding: 1rem; + border-radius: 1rem; + margin-bottom: 20px; +} + +button { + background-color: var(--accent); + width: 5em; + text-align: center; +} + +button:hover { + cursor: pointer; + background-color: var(--accent-alternate); +} + +.delete { + background-color: #f54842; +} + +.delete:hover { + cursor: pointer; + background-color: #d52822; +} + +form { + display: flex; + flex-direction: column; +} + +#header { + width: calc(100% - 4rem); + background-color: var(--header); + border-bottom: solid 1px var(--gray); + padding: 1rem; + padding-left: 3rem; +} + +#logo { + font-size: 2em; + font-weight: 500; + font-family: bold; +} + +#title { + font-size: 2em; + font-weight: 300; + font-family: sans-serif; + padding-left: 1em; +}
\ No newline at end of file diff --git a/public/css/record.css b/public/css/record.css new file mode 100644 index 0000000..3dc257a --- /dev/null +++ b/public/css/record.css @@ -0,0 +1,67 @@ +#buttons { + margin-top: 2rem; + width: 50rem; +} + +#buttons button { + margin: 0; + margin-right: 2rem; + border-radius: 10px; + width: auto; + padding: .75rem 1rem; +} + +.record { + width: 50rem; + background-color: var(--header); + padding: 1rem; + margin-top: 2rem; +} + +.header { + display: flex; + align-items: center; + margin-bottom: 1rem; +} + +.header span { + font-family: bold; +} + +.header button { + margin: 0; + margin-left: 2rem; + padding: .5rem 1rem; + width: auto; + border-radius: 5px; +} + +.type { + margin-right: 1rem; + background-color: var(--accent); + padding: .25rem .5rem; + border-radius: 5px; +} + +.domain { + color: var(--main-alternate); + flex-grow: 1; +} + +.properties { + display: flex; + flex-direction: column; +} + +.poperty { + display: flex; + flex-direction: row; + border-bottom: solid 1px var(--gray); + margin-top: 1rem; +} + +.key { + font-family: bold; + width: 5rem; +} + |