GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[UI] Settings theme according to base theme

Browse Source
This commit is contained in:
rainydaysavings 2020-08-14 02:10:31 +01:00 committed by Hugo Sales
parent 915f1dfcdb
commit 80d92e3c88
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
3 changed files with 93 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
public/assets/css/settings/settings.css
View File

@ -15,24 +15,10 @@
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
background-color: #2A323B; background-color: var(--bg5);
padding: var(--medium-size); padding: var(--medium-size);
font-size: var(--medium-size); font-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
}
#form-content {
order: 3;
background-color: #00000050;
padding: calc(2*var(--unit-size));
font-size: var(--medium-size);
height: 100%;
width: 100%;
margin-left: var(--side-margin);
margin-right: var(--side-margin);
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
border-radius: 0 0 var(--unit-size) var(--unit-size);
} }
.set-nav ul { .set-nav ul {
@ -53,16 +39,16 @@
} }
.active { .active {
color: #F6F6F6 !important; color: var(--fg) !important;
font-weight: 700; font-weight: 700;
} }
.set-nav a { .set-nav a {
color: #91B9D0; color: var(--accent);
} }
.set-nav a:hover { .set-nav a:hover {
color: #F6F6F6; color: var(--fg);
transition: all 0.8s ease; transition: all 0.8s ease;
} }
@ -72,7 +58,7 @@
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
background-color: #00000050; background-color: var(--bg5);
padding: var(--medium-size); padding: var(--medium-size);
margin-top: calc(2 * var(--unit-size)); margin-top: calc(2 * var(--unit-size));
margin-left: var(--side-margin); margin-left: var(--side-margin);
@ -80,7 +66,6 @@
font-size: var(--medium-size); font-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
border-radius: var(--unit-size) var(--unit-size) 0 0; border-radius: var(--unit-size) var(--unit-size) 0 0;
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
} }
.set-nav2 ul { .set-nav2 ul {
@ -101,35 +86,35 @@
} }
.active { .active {
color: #F6F6F6 !important; color: var(--fg) !important;
font-weight: 700; font-weight: 700;
} }
.set-nav2 a { .set-nav2 a {
color: #91B9D0; color: var(--accent);
} }
.set-nav2 a:hover { .set-nav2 a:hover {
color: #F6F6F6; color: var(--fg);
transition: all 0.8s ease; transition: all 0.8s ease;
} }
.form { .form {
order: 3; order: 3;
background-color: #00000050; background-color: var(--bg5);
padding: calc(2*var(--unit-size)); padding: calc(2*var(--unit-size));
font-size: var(--medium-size); font-size: var(--medium-size);
height: 100%; height: 100%;
width: 100%; width: 100%;
margin-left: var(--side-margin); margin-left: var(--side-margin);
margin-right: var(--side-margin); margin-right: var(--side-margin);
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); box-shadow: var(--shadow);
border-radius: 0 0 var(--unit-size) var(--unit-size); border-radius: 0 0 var(--unit-size) var(--unit-size);
} }
.form-single { .form-single {
order: 3; order: 3;
background-color: #00000050; background-color: var(--bg5);
padding: calc(2*var(--unit-size)); padding: calc(2*var(--unit-size));
font-size: var(--medium-size); font-size: var(--medium-size);
height: 100%; height: 100%;
@ -137,7 +122,7 @@
margin-left: var(--side-margin); margin-left: var(--side-margin);
margin-right: var(--side-margin); margin-right: var(--side-margin);
margin-top: calc(2 * var(--unit-size)); margin-top: calc(2 * var(--unit-size));
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); box-shadow: var(--shadow);
border-radius: var(--unit-size); border-radius: var(--unit-size);
} }
@ -153,10 +138,10 @@ label {
input[type=text] { input[type=text] {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
background-color: rgba(0, 0, 0, 0.30); background-color: var(--bg1);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: #F6F6F6; color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size); font-size: var(--medium-size);
} }
@ -167,11 +152,11 @@ input[type=text] {
} }
button[type=submit] { button[type=submit] {
background: rgba(0, 0, 0, 0.30); background: var(--bg1);
padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2); padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
color: #F6F6F6; color: var(--fg);
border-style: solid; border-style: solid;
border-color: rgba(144, 185, 208, 0.65); border-color: var(--accent);
border-radius: var(--unit-size); border-radius: var(--unit-size);
border-width: 2px; border-width: 2px;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
@ -183,10 +168,10 @@ button[type=submit] {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
height: calc(10 * var(--unit-size)); height: calc(10 * var(--unit-size));
background-color: rgba(0, 0, 0, 0.30); background-color: var(--bg1);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: #F6F6F6; color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size); font-size: var(--medium-size);
word-wrap: break-word; word-wrap: break-word;
@ -196,20 +181,20 @@ button[type=submit] {
#form_phone_number { #form_phone_number {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
background-color: rgba(0, 0, 0, 0.30); background-color: var(--bg1);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: #F6F6F6; color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size); font-size: var(--medium-size);
} }
#form_language{ #form_language{
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
background-color: rgba(0, 0, 0, 0.30); background-color: var(--bg1);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: #F6F6F6; color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size); font-size: var(--medium-size);
} }
@ -219,14 +204,14 @@ select {
appearance: none; appearance: none;
background-image: url("../../icons/drop.svg"); background-image: url("../../icons/drop.svg");
background-size: var(--main-size); background-size: var(--main-size);
background-position: center right; background-position: 95% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.help-text { .help-text {
font-size: var(--medium-size); font-size: var(--medium-size);
font-style: italic; font-style: italic;
color: rgba(246, 246, 246, 0.8); color: var(--fg);
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
} }
@ -235,7 +220,7 @@ select {
} }
button { button {
background-color: #f6f6f6; background-color: var(--fg);
padding: var(--small-size); padding: var(--small-size);
border: none; border: none;
border-radius: var(--small-size); border-radius: var(--small-size);
@ -258,13 +243,13 @@ button {
/* NOTIFICATIONS TABS */ /* NOTIFICATIONS TABS */
/* visual feedback */ /* visual feedback */
ul input[type=radio] + label { ul input[type=radio] + label {
color: #91B9D0; color: var(--accent);
} }
ul input[type=radio]:checked + label { ul input[type=radio]:checked + label {
color: #F6F6F6; color: var(--fg);
} }
ul input[type=radio]:focus + label { ul input[type=radio]:focus + label {
color: #F6F6F6; color: var(--fg);
} }
/* show/hide each tab */ /* show/hide each tab */
@ -298,8 +283,7 @@ input[type=radio] {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border-radius: var(--unit-size); border-radius: var(--unit-size);
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); background-color: var(--bg5);
background-color: #00000050;
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
} }
@ -309,7 +293,7 @@ input[type=radio] {
} }
#tabs { #tabs {
padding: var(--unit-size); padding: var(--medium-size);
text-transform: capitalize; text-transform: capitalize;
} }

63
public/assets/css/settings/settings_mid.css
View File

@ -15,11 +15,10 @@
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
background-color: #2A323B; background-color: var(--bg5);
padding: var(--medium-size); padding: var(--medium-size);
font-size: var(--medium-size); font-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
} }
.set-nav ul { .set-nav ul {
@ -41,11 +40,11 @@
} }
.set-nav a { .set-nav a {
color: #91B9D0; color: var(--accent);
} }
.set-nav a:hover { .set-nav a:hover {
color: #F6F6F6; color: var(--fg);
transition: all 0.8s ease; transition: all 0.8s ease;
} }
@ -55,7 +54,7 @@
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
background-color: #00000050; background-color: var(--bg5);
padding: var(--medium-size); padding: var(--medium-size);
margin-top: calc(2 * var(--unit-size)); margin-top: calc(2 * var(--unit-size));
margin-left: var(--side-margin); margin-left: var(--side-margin);
@ -63,7 +62,6 @@
font-size: var(--medium-size); font-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
border-radius: var(--unit-size) var(--unit-size) 0 0; border-radius: var(--unit-size) var(--unit-size) 0 0;
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
} }
.set-nav2 ul { .set-nav2 ul {
@ -85,36 +83,36 @@
} }
.set-nav2 a { .set-nav2 a {
color: #91B9D0; color: var(--accent);
} }
.set-nav2 a:hover { .set-nav2 a:hover {
color: #F6F6F6; color: var(--fg);
transition: all 0.8s ease; transition: all 0.8s ease;
} }
.active { .active {
color: #F6F6F6 !important; color: var(--fg) !important;
font-weight: 700; font-weight: 700;
} }
.form { .form {
order: 3; order: 3;
background-color: #00000050; background-color: var(--bg5);
padding: calc(2*var(--unit-size)); padding: calc(2*var(--unit-size));
font-size: var(--medium-size); font-size: var(--medium-size);
height: 100%; height: 100%;
width: 100%; width: 100%;
margin-left: var(--side-margin); margin-left: var(--side-margin);
margin-right: var(--side-margin); margin-right: var(--side-margin);
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); box-shadow: var(--shadow);
border-radius: 0 0 var(--unit-size) var(--unit-size); border-radius: 0 0 var(--unit-size) var(--unit-size);
} }
.form-single { .form-single {
order: 3; order: 3;
background-color: #00000050; background-color: var(--bg5);
padding: calc(2*var(--unit-size)); padding: calc(2*var(--unit-size));
font-size: var(--medium-size); font-size: var(--medium-size);
height: 100%; height: 100%;
@ -122,7 +120,7 @@
margin-left: var(--side-margin); margin-left: var(--side-margin);
margin-right: var(--side-margin); margin-right: var(--side-margin);
margin-top: calc(2 * var(--unit-size)); margin-top: calc(2 * var(--unit-size));
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); box-shadow: var(--shadow);
border-radius: var(--unit-size); border-radius: var(--unit-size);
} }
@ -138,10 +136,10 @@ label {
input[type=text] { input[type=text] {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
background-color: rgba(0, 0, 0, 0.30); background-color: var(--bg1);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5);
color: #F6F6F6; color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size); font-size: var(--medium-size);
} }
@ -151,11 +149,11 @@ input[type=text] {
} }
button[type=submit] { button[type=submit] {
background: rgba(0, 0, 0, 0.30); background: var(--bg1);
padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2); padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
color: #F6F6F6; color: var(--fg);
border-style: solid; border-style: solid;
border-color: rgba(144, 185, 208, 0.65); border-color: var(--accent);
border-radius: var(--unit-size); border-radius: var(--unit-size);
border-width: 2px; border-width: 2px;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
@ -167,10 +165,10 @@ button[type=submit] {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
height: calc(10 * var(--unit-size)); height: calc(10 * var(--unit-size));
background-color: rgba(0, 0, 0, 0.30); background-color: var(--bg1);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: #F6F6F6; color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size); font-size: var(--medium-size);
word-wrap: break-word; word-wrap: break-word;
@ -180,20 +178,20 @@ button[type=submit] {
#form_phone_number { #form_phone_number {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
background-color: rgba(0, 0, 0, 0.30); background-color: var(--bg1);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: #F6F6F6; color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size); font-size: var(--medium-size);
} }
#form_language{ #form_language{
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
background-color: rgba(0, 0, 0, 0.30); background-color: var(--bg1);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: #F6F6F6; color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size); font-size: var(--medium-size);
} }
@ -203,14 +201,14 @@ select {
appearance: none; appearance: none;
background-image: url("../../icons/drop.svg"); background-image: url("../../icons/drop.svg");
background-size: var(--main-size); background-size: var(--main-size);
background-position: center right; background-position: 95% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.help-text { .help-text {
font-size: var(--medium-size); font-size: var(--medium-size);
font-style: italic; font-style: italic;
color: rgba(246, 246, 246, 0.8); color: var(--fg);
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
} }
@ -233,7 +231,7 @@ select {
} }
button { button {
background-color: #f6f6f6; background-color: var(--fg);
padding: var(--small-size); padding: var(--small-size);
border: none; border: none;
border-radius: var(--small-size); border-radius: var(--small-size);
@ -242,13 +240,13 @@ button {
/* NOTIFICATIONS TABS */ /* NOTIFICATIONS TABS */
/* visual feedback */ /* visual feedback */
ul input[type=radio] + label { ul input[type=radio] + label {
color: #91B9D0; color: var(--accent);
} }
ul input[type=radio]:checked + label { ul input[type=radio]:checked + label {
color: #F6F6F6; color: var(--fg);
} }
ul input[type=radio]:focus + label { ul input[type=radio]:focus + label {
color: #F6F6F6; color: var(--fg);
} }
/* show/hide each tab */ /* show/hide each tab */
@ -282,8 +280,7 @@ input[type=radio] {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border-radius: var(--unit-size); border-radius: var(--unit-size);
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); background-color: var(--bg5);
background-color: #00000050;
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
} }
@ -293,7 +290,7 @@ input[type=radio] {
} }
#tabs { #tabs {
padding: var(--unit-size); padding: var(--medium-size);
text-transform: capitalize; text-transform: capitalize;
font-size: var(--medium-size); font-size: var(--medium-size);
} }

68
public/assets/css/settings/settings_small.css
View File

@ -15,11 +15,10 @@
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
background-color: #2A323B; background-color: var(--bg5);
padding: var(--medium-size); padding: var(--medium-size);
font-size: var(--medium-size); font-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
} }
.set-nav ul { .set-nav ul {
@ -41,11 +40,11 @@
} }
.set-nav a { .set-nav a {
color: #91B9D0; color: var(--accent);
} }
.set-nav a:hover { .set-nav a:hover {
color: #F6F6F6; color: var(--fg);
transition: all 0.8s ease; transition: all 0.8s ease;
} }
@ -55,7 +54,7 @@
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
background-color: #00000050; background-color: var(--bg5);
padding: var(--medium-size); padding: var(--medium-size);
margin-top: var(--unit-size); margin-top: var(--unit-size);
margin-left: 1%; margin-left: 1%;
@ -63,7 +62,6 @@
font-size: var(--medium-size); font-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
border-radius: var(--unit-size) var(--unit-size) 0 0; border-radius: var(--unit-size) var(--unit-size) 0 0;
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
} }
.set-nav2 ul { .set-nav2 ul {
@ -85,44 +83,44 @@
} }
.set-nav2 a { .set-nav2 a {
color: #91B9D0; color: var(--accent);
} }
.set-nav2 a:hover { .set-nav2 a:hover {
color: #F6F6F6; color: var(--fg);
transition: all 0.8s ease; transition: all 0.8s ease;
} }
.active { .active {
color: #F6F6F6 !important; color: var(--fg) !important;
font-weight: 700; font-weight: 700;
} }
.form { .form {
order: 3; order: 3;
background-color: #00000050; background-color: var(--bg5);
padding: calc(2*var(--unit-size)); padding: calc(2*var(--unit-size));
font-size: var(--medium-size); font-size: var(--medium-size);
height: 100%; height: 100%;
margin-left: 1%; margin-left: 1%;
margin-right: 1%; margin-right: 1%;
margin-top: 0; margin-top: 0;
box-shadow: unset; box-shadow: var(--shadow);
border-radius: 0 0 var(--unit-size) var(--unit-size); border-radius: 0 0 var(--unit-size) var(--unit-size);
} }
.form-single { .form-single {
order: 3; order: 3;
background-color: #00000050; background-color: var(--bg5);
padding: calc(2*var(--unit-size)); padding: calc(2*var(--unit-size));
font-size: var(--medium-size); font-size: var(--medium-size);
height: 100%; height: 100%;
width: 100%; width: 100%;
margin-left: 1%; margin-left: 1%;
margin-right: 1%; margin-right: 1%;
margin-top: var(--unit-size); margin-top: calc(2 * var(--unit-size));
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); box-shadow: var(--shadow);
border-radius: var(--unit-size); border-radius: var(--unit-size);
} }
@ -137,10 +135,10 @@ label {
input[type=text] { input[type=text] {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
background-color: rgba(0, 0, 0, 0.30); background-color: var(--bg1);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5);
color: #F6F6F6; color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size); font-size: var(--medium-size);
} }
@ -150,11 +148,11 @@ input[type=text] {
} }
button[type=submit] { button[type=submit] {
background: rgba(0, 0, 0, 0.30); background: var(--bg1);
padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2); padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
color: #F6F6F6; color: var(--fg);
border-style: solid; border-style: solid;
border-color: rgba(144, 185, 208, 0.65); border-color: var(--accent);
border-radius: var(--unit-size); border-radius: var(--unit-size);
border-width: 2px; border-width: 2px;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
@ -165,11 +163,11 @@ button[type=submit] {
#form_bio { #form_bio {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
height: calc(5 * var(--unit-size)); height: calc(10 * var(--unit-size));
background-color: rgba(0, 0, 0, 0.30); background-color: var(--bg1);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: #F6F6F6; color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size); font-size: var(--medium-size);
word-wrap: break-word; word-wrap: break-word;
@ -179,20 +177,20 @@ button[type=submit] {
#form_phone_number { #form_phone_number {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
background-color: rgba(0, 0, 0, 0.30); background-color: var(--bg1);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: #F6F6F6; color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size); font-size: var(--medium-size);
} }
#form_language{ #form_language{
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
background-color: rgba(0, 0, 0, 0.30); background-color: var(--bg1);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: #F6F6F6; color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size); font-size: var(--medium-size);
} }
@ -202,20 +200,19 @@ select {
appearance: none; appearance: none;
background-image: url("../../icons/drop.svg"); background-image: url("../../icons/drop.svg");
background-size: var(--main-size); background-size: var(--main-size);
background-position: center right; background-position: 95% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.help-text { .help-text {
font-size: var(--medium-size); font-size: var(--medium-size);
font-style: italic; font-style: italic;
color: rgba(246, 246, 246, 0.8); color: var(--fg);
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
} }
.form-single input[type=checkbox] { .form-single input[type=checkbox] {
margin-left: var(--unit-size); margin-left: var(--unit-size);
float: right;
} }
/* JS Cropping */ /* JS Cropping */
@ -233,7 +230,7 @@ select {
} }
button { button {
background-color: #f6f6f6; background-color: var(--fg);
padding: var(--small-size); padding: var(--small-size);
border: none; border: none;
border-radius: var(--small-size); border-radius: var(--small-size);
@ -242,13 +239,13 @@ button {
/* NOTIFICATIONS TABS */ /* NOTIFICATIONS TABS */
/* visual feedback */ /* visual feedback */
ul input[type=radio] + label { ul input[type=radio] + label {
color: #91B9D0; color: var(--accent);
} }
ul input[type=radio]:checked + label { ul input[type=radio]:checked + label {
color: #F6F6F6; color: var(--fg);
} }
ul input[type=radio]:focus + label { ul input[type=radio]:focus + label {
color: #F6F6F6; color: var(--fg);
} }
/* show/hide each tab */ /* show/hide each tab */
@ -282,8 +279,7 @@ input[type=radio] {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border-radius: var(--unit-size); border-radius: var(--unit-size);
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); background-color: var(--bg5);
background-color: #00000050;
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
} }
@ -293,7 +289,7 @@ input[type=radio] {
} }
#tabs { #tabs {
padding: var(--unit-size); padding: var(--medium-size);
text-transform: capitalize; text-transform: capitalize;
} }