wamo/gnu-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[UI] Responsive settings CSS work

Browse Source
This commit is contained in:
rainydaysavings 2020-08-15 01:07:19 +01:00 committed by Hugo Sales
parent ea61109932
commit 5d859b6459
No known key found for this signature in database
GPG Key ID: 7D0C7EAFC9D835A0
4 changed files with 91 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/css/base_small.css
View File

@ -5,7 +5,7 @@
/* font and margin sizes */ /* font and margin sizes */
--main-size: 1.2em; --main-size: 1.2em;
--medium-size: 0.85em; --medium-size: 0.8em;
--small-size: 0.65em; --small-size: 0.65em;
--unit-size: 1em; --unit-size: 1em;
--side-margin: 2em; --side-margin: 2em;

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

@ -46,11 +46,6 @@
font-weight: 700; font-weight: 700;
} }
.active {
color: var(--fg) !important;
font-weight: 700;
}
.set-nav a { .set-nav a {
color: var(--accent); color: var(--accent);
} }

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

@ -1,7 +1,7 @@
.content { .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(3 * var(--main-size)); margin-top: calc(4 * var(--main-size));
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: 0; margin-left: 0;
@ -9,13 +9,21 @@
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
} }
.main {
width: 100%;
margin-left: var(--unit-size);
margin-right: var(--unit-size);
box-shadow: var(--shadow);
border-radius: 0 0 var(--unit-size) var(--unit-size);
}
.set-nav { .set-nav {
order: 1; order: 1;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; flex: 1;
background-color: var(--bg5); background-color: var(--bg1);
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);
@ -48,83 +56,40 @@
transition: all 0.8s ease; transition: all 0.8s ease;
} }
.set-nav2 {
order: 2;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
background-color: var(--bg5);
padding: var(--medium-size);
margin-top: calc(2 * var(--unit-size));
margin-left: var(--side-margin);
margin-right: var(--side-margin);
font-size: var(--medium-size);
font-family: var(--head-font);
border-radius: var(--unit-size) var(--unit-size) 0 0;
}
.set-nav2 ul {
display: flex;
align-items: stretch;
justify-content: space-evenly;
width: 100%;
margin-left: var(--side-margin);
margin-right: var(--side-margin);
padding: 0;
}
.set-nav2 li {
display: block;
flex: 0 1 auto;
list-style-type: none;
font-weight: 700;
font-size: var(--medium-size);
}
.set-nav2 a {
color: var(--accent);
}
.set-nav2 a:hover {
color: var(--fg);
transition: all 0.8s ease;
}
.active { .active {
color: var(--fg) !important; color: var(--fg) !important;
font-weight: 700; font-weight: 700;
} }
.secundary {
display: flex;
flex-wrap: wrap;
border-radius: 0 0 var(--unit-size) var(--unit-size);
background-color: var(--bg3);
padding: var(--unit-size);
}
.form { .form {
order: 3; order: 3;
background-color: var(--bg5); background-color: var(--bg3);
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-right: var(--side-margin);
box-shadow: var(--shadow); 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: 2;
background-color: var(--bg5); background-color: var(--bg3);
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-right: var(--side-margin);
margin-top: calc(2 * var(--unit-size));
box-shadow: var(--shadow); box-shadow: var(--shadow);
border-radius: var(--unit-size); border-radius: var(--unit-size);
} }
/* FORMS ------------------------------*/ /* FORMS ------------------------------*/
label { label {
display: inline-block; display: inline-block;
@ -136,7 +101,8 @@ 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: var(--bg1); background-color: var(--bg4);
box-shadow: var(--shadow);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5);
color: var(--fg); color: var(--fg);
@ -165,7 +131,8 @@ 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: var(--bg1); background-color: var(--bg4);
box-shadow: var(--shadow);
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: var(--fg); color: var(--fg);
@ -178,7 +145,8 @@ 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: var(--bg1); background-color: var(--bg4);
box-shadow: var(--shadow);
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: var(--fg); color: var(--fg);
@ -188,7 +156,8 @@ button[type=submit] {
#form_language{ #form_language{
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
background-color: var(--bg1); background-color: var(--bg4);
box-shadow: var(--shadow);
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: var(--fg); color: var(--fg);
@ -216,6 +185,13 @@ select {
margin-left: var(--unit-size); margin-left: var(--unit-size);
} }
button {
background-color: var(--fg);
padding: var(--small-size);
border: none;
border-radius: var(--small-size);
}
/* JS Cropping */ /* JS Cropping */
#img-cropped { #img-cropped {
display: block; display: block;
@ -230,13 +206,6 @@ select {
border-radius: 50%; border-radius: 50%;
} }
button {
background-color: var(--fg);
padding: var(--small-size);
border: none;
border-radius: var(--small-size);
}
/* NOTIFICATIONS TABS */ /* NOTIFICATIONS TABS */
/* visual feedback */ /* visual feedback */
ul input[type=radio] + label { ul input[type=radio] + label {
@ -270,17 +239,14 @@ input[type=radio] {
#form-tabs { #form-tabs {
order: 2; order: 2;
margin-top: var(--unit-size);
margin-left: var(--side-margin);
margin-right: var(--side-margin);
width: 100%; width: 100%;
font-size: var(--medium-size); font-size: var(--medium-size);
} }
#form-tabs ul { #form-tabs ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border-radius: var(--unit-size); border-radius: 0 0 var(--unit-size) var(--unit-size);
background-color: var(--bg5); background-color: var(--bg1);
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
} }
@ -292,13 +258,12 @@ input[type=radio] {
#tabs { #tabs {
padding: var(--medium-size); padding: var(--medium-size);
text-transform: capitalize; text-transform: capitalize;
font-size: var(--medium-size);
} }
#form-tabs ul .form { #form-tabs ul .form {
order: 2; order: 2;
padding: calc(2*var(--unit-size)); padding: calc(2*var(--unit-size));
background-color: #00000000 !important; background-color: var(--bg3) !important;
height: 100%; height: 100%;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;

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

@ -1,7 +1,7 @@
.content { .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(3 * var(--main-size)); margin-top: calc(3 * var(--main-size) + 2%);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: 0; margin-left: 0;
@ -9,13 +9,21 @@
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
} }
.main {
width: 100%;
margin-left: 1%;
margin-right: 1%;
box-shadow: var(--shadow);
border-radius: 0 0 var(--unit-size) var(--unit-size);
}
.set-nav { .set-nav {
order: 1; order: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; flex: 1;
background-color: var(--bg5); background-color: var(--bg1);
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);
@ -48,94 +56,54 @@
transition: all 0.8s ease; transition: all 0.8s ease;
} }
.set-nav2 {
order: 2;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
background-color: var(--bg5);
padding: var(--medium-size);
margin-top: var(--unit-size);
margin-left: 1%;
margin-right: 1%;
font-size: var(--medium-size);
font-family: var(--head-font);
border-radius: var(--unit-size) var(--unit-size) 0 0;
}
.set-nav2 ul {
display: flex;
align-items: stretch;
justify-content: space-evenly;
width: 100%;
margin-left: var(--side-margin);
margin-right: var(--side-margin);
padding: 0;
}
.set-nav2 li {
display: block;
flex: 0 1 auto;
list-style-type: none;
font-weight: 700;
font-size: var(--medium-size);
}
.set-nav2 a {
color: var(--accent);
}
.set-nav2 a:hover {
color: var(--fg);
transition: all 0.8s ease;
}
.active { .active {
color: var(--fg) !important; color: var(--fg) !important;
font-weight: 700; font-weight: 700;
} }
.form { .secundary {
order: 3; display: flex;
background-color: var(--bg5); flex-wrap: wrap;
padding: calc(2*var(--unit-size));
font-size: var(--medium-size);
height: 100%;
margin-left: 1%;
margin-right: 1%;
margin-top: 0;
box-shadow: var(--shadow);
border-radius: 0 0 var(--unit-size) var(--unit-size); border-radius: 0 0 var(--unit-size) var(--unit-size);
background-color: var(--bg3);
padding: 2%;
} }
.form-single { .form {
order: 3; order: 3;
background-color: var(--bg5); background-color: var(--bg3);
padding: calc(2*var(--unit-size)); padding: var(--unit-size);
font-size: var(--medium-size);
height: 100%;
width: 100%;
box-shadow: var(--shadow);
border-radius: 0 0 var(--unit-size) var(--unit-size);
}
.form-single {
order: 2;
background-color: var(--bg3);
padding: 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-right: 1%;
margin-top: calc(2 * var(--unit-size));
box-shadow: var(--shadow); box-shadow: var(--shadow);
border-radius: var(--unit-size); border-radius: var(--unit-size);
} }
/* FORMS ------------------------------*/ /* FORMS ------------------------------*/
label { label {
display: inline-block; display: inline-block;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 700; font-weight: 700;
font-size: var(--medium-size);
width: 100%;
} }
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: var(--bg1); background-color: var(--bg4);
box-shadow: var(--shadow);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5);
color: var(--fg); color: var(--fg);
@ -164,7 +132,8 @@ 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: var(--bg1); background-color: var(--bg4);
box-shadow: var(--shadow);
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: var(--fg); color: var(--fg);
@ -177,7 +146,8 @@ 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: var(--bg1); background-color: var(--bg4);
box-shadow: var(--shadow);
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: var(--fg); color: var(--fg);
@ -187,7 +157,8 @@ button[type=submit] {
#form_language{ #form_language{
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
background-color: var(--bg1); background-color: var(--bg4);
box-shadow: var(--shadow);
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: var(--fg); color: var(--fg);
@ -215,6 +186,13 @@ select {
margin-left: var(--unit-size); margin-left: var(--unit-size);
} }
button {
background-color: var(--fg);
padding: var(--small-size);
border: none;
border-radius: var(--small-size);
}
/* JS Cropping */ /* JS Cropping */
#img-cropped { #img-cropped {
display: block; display: block;
@ -229,13 +207,6 @@ select {
border-radius: 50%; border-radius: 50%;
} }
button {
background-color: var(--fg);
padding: var(--small-size);
border: none;
border-radius: var(--small-size);
}
/* NOTIFICATIONS TABS */ /* NOTIFICATIONS TABS */
/* visual feedback */ /* visual feedback */
ul input[type=radio] + label { ul input[type=radio] + label {
@ -269,17 +240,14 @@ input[type=radio] {
#form-tabs { #form-tabs {
order: 2; order: 2;
margin-top: var(--main-size);
margin-left: 1%;
margin-right: 1%;
width: 100%; width: 100%;
font-size: var(--medium-size); font-size: var(--medium-size);
} }
#form-tabs ul { #form-tabs ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border-radius: var(--unit-size); border-radius: 0 0 var(--unit-size) var(--unit-size);
background-color: var(--bg5); background-color: var(--bg1);
justify-content: space-evenly; justify-content: space-evenly;
width: 100%; width: 100%;
} }
@ -295,8 +263,8 @@ input[type=radio] {
#form-tabs ul .form { #form-tabs ul .form {
order: 2; order: 2;
padding: calc(2*var(--unit-size)); padding: var(--unit-size);
background-color: #00000000 !important; background-color: var(--bg3) !important;
height: 100%; height: 100%;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;