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

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

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

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

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