[CSS] Reverting desktop side margins. All margins, sizes, radius, etc were redone.

This commit is contained in:
Eliseu Amaro 2021-09-25 15:59:16 +01:00 committed by Diogo Peralta Cordeiro
parent 4a17adc182
commit 20ae2dba5d
Signed by: diogo
GPG Key ID: 18D2D35001FBFAB0
6 changed files with 264 additions and 293 deletions

View File

@ -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 {

View File

@ -58,7 +58,4 @@ and (min-width : 1281px) {
#panel-left-icon {
display: none;
}
.panel-left > * {
margin-left: 11vw;
}
}

View File

@ -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);
}
}

View File

@ -21,7 +21,4 @@ and (min-width: 1281px) {
#panel-right-icon {
display: none;
}
.panel-right > * {
margin-right: 11vw;
}
}

View File

@ -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);

View File

@ -18,12 +18,12 @@
{% block body %}
<nav class='main-nav'>
<h1>Settings</h1>
<h2>Settings</h2>
<ul>
<li>
<details class="section-title-settings">
<summary>
<h2>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
<h3>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
<em>Personal Information, Avatar and Profile</em>
</summary>
@ -73,7 +73,7 @@
<li>
<details class="section-title-settings">
<summary>
<h2>Account{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
<h3>Account{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
<em>Email, Password and Language</em>
</summary>
@ -90,7 +90,7 @@
<li>
<details class="section-title-settings">
<summary>
<h2>Notifications{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
<h3>Notifications{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
<em>Enable/disable notifications (Email, XMPP, Replies...)</em>
</summary>