From 20ae2dba5dcdf8e5d7feda1e433f74aeee8c1cb8 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Sat, 25 Sep 2021 15:59:16 +0100 Subject: [PATCH] [CSS] Reverting desktop side margins. All margins, sizes, radius, etc were redone. --- public/assets/css/base.css | 337 ++++++---------------------- public/assets/css/left/view.css | 3 - public/assets/css/reset.css | 199 +++++++++++++++- public/assets/css/right/view.css | 3 - public/assets/css/settings/view.css | 7 +- templates/settings/base.html.twig | 8 +- 6 files changed, 264 insertions(+), 293 deletions(-) diff --git a/public/assets/css/base.css b/public/assets/css/base.css index aaa9037130..8efd4c89c1 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -2,7 +2,7 @@ @import url("../fonts/opensans/opensans.css"); html { - scroll-margin-top: 4rem; + scroll-margin-top: 3rem; } * { @@ -10,13 +10,6 @@ html { max-height: 100%; } -*:hover, -*:active { - -webkit-box-shadow: unset; - -moz-box-shadow: unset; - box-shadow: unset; -} - *:focus { -webkit-box-shadow: inset 0 0 0 3px var(--bg3); -moz-box-shadow: inset 0 0 0 3px var(--bg3); @@ -34,9 +27,9 @@ html { * medium size - same as above, except that the element in question is contained in something else * small size - used in common text, borders */ - --unit-size: 0.5rem; - --main-size: 1.5rem; - --medium-size: 1.2rem; + --unit-size: 0.62rem; + --main-size: 1.62rem; + --medium-size: 1.3rem; --small-size: 1rem; --smaller-size: 0.8rem; @@ -47,10 +40,6 @@ html { --fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1); } -h1, h2, h3, h4, h5, h6 { - font-family: var(--display-font); -} - @media (prefers-color-scheme: dark) { :root { /* colours and shadows */ @@ -115,6 +104,11 @@ h1, h2, h3, h4, h5, h6 { } } +.bg { + background-position: center; + background-repeat: no-repeat; + background-size: 100% 100%; +} a, a:visited { @@ -139,26 +133,60 @@ hr { background: var(--bg2); } + /* CHECKERBOARD BACKGROUND FOR TRANSPARENT IMAGES */ -.note img { +.h-entry img { background: repeating-conic-gradient( #ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round; } - -/* BACKGROUND IMG GRADIENT */ -.bg { - background-position: center; - background-repeat: no-repeat; - background-size: 100% 100%; +.icon { + fill: var(--white); + align-self: center; } +.active { + font-weight: bold; +} + +/* ACCESSIBILITY MENU */ .anchor-hidden { - display: none; + width: 1px; + height: 1px; + overflow: hidden; } -/* HEADER AND SIDEPANELS */ +#accessibility-menu { + display: block; + position: absolute; + z-index: 999; + + top: -90%; + left: -90%; + + width: 30%; + height: min-content; + + background-color: var(--bg1); + padding: var(--unit-size); + + border: solid 2px var(--bg3); + border-radius: var(--unit-size); + box-shadow: var(--shadow); +} + +#accessibility-menu ul { + list-style-type: disc; + margin-left: var(--medium-size); +} + +#accessibility-menu:focus-within:not(:active) { + top: var(--unit-size); + left: var(--unit-size); +} + +/* HEADER AND INSTANCE NAME */ #header { z-index: 1; font-family: var(--display-font); @@ -189,22 +217,10 @@ hr { margin: unset; } -.icon { - fill: var(--white); - align-self: center; -} - -/* CURRENT PAGE LINK */ -.active { - font-weight: bold; -} - /* CONTAINS ALL ELEMENTS BESIDES HEADER */ .container { position: relative; - top: 3rem; - width: 48vw; margin-left: auto; margin-right: auto; @@ -271,7 +287,7 @@ hr { } .notes hr { - margin-top: 5px; + margin-top: 6.2px; } .note-wrapper { @@ -299,7 +315,7 @@ hr { border-radius: 2px; } -.h-entry { +.h-entry:not(:first-child) { margin-top: var(--unit-size); } @@ -354,7 +370,7 @@ hr { background: linear-gradient(to left, var(--translucent), transparent); font-size: var(--medium-size); - padding: 5px 10px 5px 0; + padding: 6.2px 10px 6.2px 0; } .note-author { @@ -380,8 +396,8 @@ hr { background-repeat: no-repeat !important; - width: var(--medium-size) !important; - height: var(--medium-size) !important; + width: var(--small-size) !important; + height: var(--small-size) !important; margin-left: var(--unit-size); text-indent: -9999em; @@ -459,7 +475,6 @@ hr { .section-widget { display: flex; flex-direction: column; - width: fit-content; background-color: var(--translucent); border-radius: var(--unit-size); @@ -487,8 +502,8 @@ hr { border: 2px solid var(--bg2); border-radius: var(--unit-size); background: var(--bg-button); - padding: 5px 10px; - margin-top: 5px; + padding: 6.2px 10px; + margin-top: 6.2px; cursor: pointer; float: right; @@ -503,7 +518,7 @@ hr { font-weight: 700; border-radius: var(--unit-size); - padding: 5px 10px 5px 10px; + padding: 6.2px 10px 6.2px 10px; background-color: var(--translucent); } @@ -539,7 +554,7 @@ hr { } .section-form-label { - margin-bottom: 5px; + margin-bottom: 1.62px; } .form-group { @@ -547,19 +562,17 @@ hr { display: flex; flex-direction: column; - margin-bottom: 10px; + margin-bottom: 6.2px; } .help-block { - margin-top: 5px; - margin-bottom: 10px; + margin-bottom: 6.2px; } .help-text { font-style: italic; font-size: var(--small-size); - margin-top: 5px; - margin-bottom: 10px; + margin-bottom: 6.2px; } .help-block > .list-unstyled, @@ -594,220 +607,6 @@ hr { resize: vertical; } -/* BUTTONS AND INPUT SHENANIGANS */ -label, button { - font-weight: bold !important; -} - -select, -button, -textarea, -input { - font-size: inherit !important; - color: var(--white); - - padding: 2px 8px; - border: 2px solid var(--bg2); - border-radius: var(--unit-size); - background-color: var(--translucent); -} - -select, -textarea { - padding: 4px; -} - -button { - background: var(--bg-button); - padding: 4px 12px; - margin-left: auto; -} - -select { - -webkit-appearance: none !important; - -moz-appearance: none !important; - - background-repeat: no-repeat; - background-size: 16px; - background-position: center right 5px; - - color: var(--white) !important; - border: 2px solid var(--bg2); - border-radius: var(--unit-size); -} - -input[type=radio] { - border: solid 0.25em var(--bg2) !important; - background-color: var(--bg1) !important; -} - -input[type=checkbox] { - all: unset; - - display: inline-block; - width: var(--medium-size); - height: var(--medium-size); - vertical-align: middle; - - background-color: var(--bg2) !important; - background-size: cover; - margin-right: 2px; - - -webkit-mask-image: url("../icons/check-off.svg") !important; - -o-mask-image: url("../icons/check-off.svg") !important; - -moz-mask-image: url("../icons/check-off.svg") !important; - mask-image: url("../icons/check-off.svg") !important; -} - -input[type=color] { - border: unset; - padding: 2px; - width: 100%; - height: 3rem; -} - -/* DISABLED STATE TEXT COLOR */ -:is(:disabled, :disabled:active)::file-selector-button, -button:is(:disabled, :disabled:active), -input:is([type=reset], [type=button], [type=submit]):is(:disabled, :disabled:active), -select:is(:disabled, :disabled:active) > button { - color: var(--white) !important; -} - -/* HOVER AND FOCUS */ -textarea:hover, -textarea:focus, -button:hover, -button:focus, -input:hover, -input:focus, -select:hover, -select:focus { - color: var(--white) !important; - -webkit-box-shadow: inset 0px 0px 0px 2px var(--bg3) !important; - -moz-box-shadow: inset 0px 0px 0px 2px var(--bg3) !important; - box-shadow: inset 0px 0px 0px 2px var(--bg3) !important; -} - -/* checkbox and radio */ -input[type=radio]:hover, -input[type=radio]:focus, -input[type=checkbox]:hover, -input[type=checkbox]:focus { - color: var(--white) !important; - background-color: var(--bg3) !important; -} - -input[type=radio]:checked { - background-color: var(--white) !important; -} - -input[type=checkbox]:checked { - background-color: var(--bg3) !important; - -webkit-mask-image: url("../icons/check-on.svg") !important; - -o-mask-image: url("../icons/check-on.svg") !important; - -moz-mask-image: url("../icons/check-on.svg") !important; - mask-image: url("../icons/check-on.svg") !important; -} - -/* file selector */ -input[type=file] { - font-family: var(--main-font) !important; - font-weight: normal !important; - padding: unset !important; - - background: var(--bg-button); - border: 2px solid var(--bg2); - border-radius: var(--unit-size); -} - -/* button part of file selector */ -::file-selector-button { - font-family: var(--main-font) !important; - font-weight: bold !important; - color: var(--white) !important; -} - -/* ACCESSIBILITY MENU */ -#accessibility-menu { - display: block; - position: absolute; - z-index: 999; - - top: -90%; - left: -90%; - - width: 30%; - height: min-content; - - background-color: var(--bg1); - padding: var(--unit-size); - - border: solid 2px var(--bg3); - border-radius: var(--unit-size); - box-shadow: var(--shadow); -} - -#accessibility-menu ul { - list-style-type: disc; - margin-left: var(--medium-size); -} - -#accessibility-menu:focus-within:not(:active) { - top: var(--unit-size); - left: var(--unit-size); -} - -.anchor-hidden { - width: 1px; - height: 1px; - overflow: hidden; -} - -/* ANIMATIONS */ -@keyframes fadeIn { - 0% { - opacity: 0; - transform: translateY(-10px); - } - - 100% { - opacity: unset; - transform: none; - } -} - -@keyframes fadeOut { - 100% { - opacity: 0; - transform: translateY(-10px); - } - - 0% { - opacity: unset; - transform: none; - } -} - -@keyframes highlight { - 0% { - box-shadow: initial; - border-radius: var(--unit-size); - } - - 50% { - border-radius: var(--unit-size); - box-shadow: inset 0 20px 40px var(--white); - transition: box-shadow 0.3s ease-in-out; - } - - 100% { - box-shadow: initial; - border-radius: var(--unit-size); - } -} - - /* PROFILE */ .profile { display: flex; @@ -857,6 +656,11 @@ input[type=file] { } /* MEDIA QUERIES */ +.container { + top: 3rem; + width: 62vw; +} + /* sidepanels need to be shown by default on desktop, hidden on mobile */ .panel .panel-content { display: flex; @@ -879,7 +683,6 @@ input[type=file] { overflow-y: auto; } - @media only screen and (min-width: 1281px) { .content { @@ -887,7 +690,7 @@ and (min-width: 1281px) { } .panel .panel-content { - width: 15vw; + width: 19vw; } a[id|="anchor"]:target + .accessibility-target { diff --git a/public/assets/css/left/view.css b/public/assets/css/left/view.css index a4a0a68058..0fcc4b74d0 100644 --- a/public/assets/css/left/view.css +++ b/public/assets/css/left/view.css @@ -58,7 +58,4 @@ and (min-width : 1281px) { #panel-left-icon { display: none; } - .panel-left > * { - margin-left: 11vw; - } } \ No newline at end of file diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css index 80055bebc8..4149b877e1 100644 --- a/public/assets/css/reset.css +++ b/public/assets/css/reset.css @@ -79,32 +79,34 @@ html { font-size: var(--small-size); } -h1,h2,h3,h4,h5,h6 { +h1, h2, h3, h4, h5, h6 { all: unset; display: block; + font-family: var(--display-font); } h1 { font-size: var(--main-size); font-weight: 700; - margin-bottom: 15px; + margin-bottom: 16.2px; } h2 { font-size: var(--medium-size); font-weight: 600; - margin-bottom: 10px; + margin-bottom: 13px; } h3 { - font-size: var(--medium-size); - font-weight: 600; - margin-bottom: 5px; -} -h4, h5 { font-size: var(--small-size); font-weight: 600; - margin-bottom: 5px; + margin-bottom: 10px; +} + +h4, h5 { + font-size: var(--small-size); + font-weight: 400; + margin-bottom: 6.1px; } p { @@ -172,7 +174,6 @@ input:not([type=button], [type=color], [type=checkbox], [type=radio]) { cursor: auto !important; } -/*noinspection CssInvalidPseudoSelector*/ *|*::-moz-button-content { all: unset; } @@ -216,3 +217,181 @@ input + label { border: unset; margin: 3px; } + +/* BUTTONS AND INPUT SHENANIGANS */ +label, button { + font-family: var(--display-font); + font-weight: bold !important; +} + +select, +button, +textarea, +input { + font-size: inherit !important; + color: var(--white); + + padding: 2px 8px; + border: 2px solid var(--bg2); + border-radius: var(--unit-size); + background-color: var(--translucent); +} + +select, +textarea { + padding: 4px; +} + +button { + background: var(--bg-button); + padding: 4px 12px; + margin-left: auto; +} + +select { + -webkit-appearance: none !important; + -moz-appearance: none !important; + + background-repeat: no-repeat; + background-size: 16px; + background-position: center right 5px; + + color: var(--white) !important; + border: 2px solid var(--bg2); + border-radius: var(--unit-size); +} + +input[type=radio] { + border: solid 0.25em var(--bg2) !important; + background-color: var(--bg1) !important; +} + +input[type=checkbox] { + all: unset; + + display: inline-block; + width: var(--medium-size); + height: var(--medium-size); + vertical-align: middle; + + background-color: var(--bg2) !important; + background-size: cover; + margin-right: 2px; + + -webkit-mask-image: url("../icons/check-off.svg") !important; + -o-mask-image: url("../icons/check-off.svg") !important; + -moz-mask-image: url("../icons/check-off.svg") !important; + mask-image: url("../icons/check-off.svg") !important; +} + +input[type=color] { + border: unset; + padding: 2px; + width: 100%; + height: 3rem; +} + +/* DISABLED STATE TEXT COLOR */ +:is(:disabled, :disabled:active)::file-selector-button, +button:is(:disabled, :disabled:active), +input:is([type=reset], [type=button], [type=submit]):is(:disabled, :disabled:active), +select:is(:disabled, :disabled:active) > button { + color: var(--white) !important; +} + +/* HOVER AND FOCUS */ +textarea:hover, +textarea:focus, +button:hover, +button:focus, +input:hover, +input:focus, +select:hover, +select:focus { + color: var(--white) !important; + -webkit-box-shadow: inset 0px 0px 0px 2px var(--bg3) !important; + -moz-box-shadow: inset 0px 0px 0px 2px var(--bg3) !important; + box-shadow: inset 0px 0px 0px 2px var(--bg3) !important; +} + +/* checkbox and radio */ +input[type=radio]:hover, +input[type=radio]:focus, +input[type=checkbox]:hover, +input[type=checkbox]:focus { + color: var(--white) !important; + background-color: var(--bg3) !important; +} + +input[type=radio]:checked { + background-color: var(--white) !important; +} + +input[type=checkbox]:checked { + background-color: var(--bg3) !important; + -webkit-mask-image: url("../icons/check-on.svg") !important; + -o-mask-image: url("../icons/check-on.svg") !important; + -moz-mask-image: url("../icons/check-on.svg") !important; + mask-image: url("../icons/check-on.svg") !important; +} + +/* file selector */ +input[type=file] { + font-family: var(--main-font) !important; + font-weight: normal !important; + padding: unset !important; + + background: var(--bg-button); + border: 2px solid var(--bg2); + border-radius: var(--unit-size); +} + +/* button part of file selector */ +::file-selector-button { + font-family: var(--main-font) !important; + font-weight: bold !important; + color: var(--white) !important; +} + +/* ANIMATIONS */ +@keyframes fadeIn { + 0% { + opacity: 0; + transform: translateY(-10px); + } + + 100% { + opacity: unset; + transform: none; + } +} + +@keyframes fadeOut { + 100% { + opacity: 0; + transform: translateY(-10px); + } + + 0% { + opacity: unset; + transform: none; + } +} + +@keyframes highlight { + 0% { + box-shadow: initial; + border-radius: var(--unit-size); + } + + 50% { + border-radius: var(--unit-size); + box-shadow: inset 0 20px 40px var(--white); + transition: box-shadow 0.3s ease-in-out; + } + + 100% { + box-shadow: initial; + border-radius: var(--unit-size); + } +} \ No newline at end of file diff --git a/public/assets/css/right/view.css b/public/assets/css/right/view.css index 03e6e66f8e..a47bf25965 100644 --- a/public/assets/css/right/view.css +++ b/public/assets/css/right/view.css @@ -21,7 +21,4 @@ and (min-width: 1281px) { #panel-right-icon { display: none; } - .panel-right > * { - margin-right: 11vw; - } } \ No newline at end of file diff --git a/public/assets/css/settings/view.css b/public/assets/css/settings/view.css index ee37107120..d08e927e2a 100644 --- a/public/assets/css/settings/view.css +++ b/public/assets/css/settings/view.css @@ -7,15 +7,10 @@ border: solid 2px var(--bg2); } -.main-nav h1 { - margin-top: var(--unit-size); - margin-bottom: var(--unit-size); -} - .main-nav hr { all: unset; display: block; - height: 2px; + height: 1px; background-image: linear-gradient(to right, var(--bg2), transparent 90%); margin-top: var(--unit-size); margin-bottom: var(--unit-size); diff --git a/templates/settings/base.html.twig b/templates/settings/base.html.twig index a457085fff..7dfb8aa781 100644 --- a/templates/settings/base.html.twig +++ b/templates/settings/base.html.twig @@ -18,12 +18,12 @@ {% block body %}