Browse Source

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

remotes/upstream/experimental
parent
commit
20ae2dba5d
Signed by: diogo <mail@diogo.site> GPG Key ID: 18D2D35001FBFAB0
6 changed files with 261 additions and 290 deletions
  1. +69
    -266
      public/assets/css/base.css
  2. +0
    -3
      public/assets/css/left/view.css
  3. +187
    -8
      public/assets/css/reset.css
  4. +0
    -3
      public/assets/css/right/view.css
  5. +1
    -6
      public/assets/css/settings/view.css
  6. +4
    -4
      templates/settings/base.html.twig

+ 69
- 266
public/assets/css/base.css 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;
}

.icon {
fill: var(--white);
align-self: center;
}

/* BACKGROUND IMG GRADIENT */
.bg {
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
.active {
font-weight: bold;
}

/* ACCESSIBILITY MENU */
.anchor-hidden {
display: none;
width: 1px;
height: 1px;
overflow: hidden;
}

#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 SIDEPANELS */
/* 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 {


+ 0
- 3
public/assets/css/left/view.css View File

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

+ 187
- 8
public/assets/css/reset.css 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-size: var(--small-size);
font-weight: 600;
margin-bottom: 5px;
margin-bottom: 10px;
}

h4, h5 {
font-size: var(--small-size);
font-weight: 600;
margin-bottom: 5px;
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);
}
}

+ 0
- 3
public/assets/css/right/view.css View File

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

+ 1
- 6
public/assets/css/settings/view.css 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);


+ 4
- 4
templates/settings/base.html.twig 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>



Loading…
Cancel
Save