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

[UI] Fixed top header spacing issue, hamburger menu weird rendering

This commit is contained in:
rainydaysavings 2020-07-21 17:42:16 +01:00 committed by Hugo Sales
parent d0b04b6084
commit 5a53915f80
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
10 changed files with 34 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/assets/css/base.css
View File

@ -69,7 +69,8 @@ b {
right: 0;
background-color: #272E36;
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
padding: var(--unit-size);
padding: var(--main-size);
height: var(--main-size);
}
#top {
@ -98,7 +99,8 @@ b {
#instance b {
margin: 0;
padding: 0;
vertical-align: top;
vertical-align: middle;
margin-left: calc(0.2 * var(--unit-size));
}
.icon-logo {
@ -110,6 +112,7 @@ b {
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
vertical-align: middle;
}
#left-panel {
@ -126,6 +129,7 @@ b {
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
align-self: center;
}
/*-------------------------------------*/
@ -135,7 +139,7 @@ b {
height: calc(100vh - (3 * var(--unit-size)));
position: fixed;
background-color: rgba(0, 0, 0, 0.40);
margin-top: calc(2 * var(--unit-size) + var(--main-size));
margin-top: calc(3 * var(--main-size));
}
.navbar {

15
public/assets/css/base_mid.css
View File

@ -65,12 +65,14 @@ b {
right: 0;
background-color: #272E36;
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
padding: var(--medium-size);
padding: var(--main-size);
height: var(--main-size);
}
#top {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
@ -83,14 +85,12 @@ b {
height: var(--unit-size);
cursor: pointer;
transition: all .5s ease-in-out;
background-color: #272E36;
}
.icon-menu label {
width: var(--unit-size);
height: 2px;
background: #F6F6F6;
transition: all .5s ease-in-out;
z-index: 1;
}
.icon-menu label::before,
.icon-menu label::after {
@ -124,7 +124,8 @@ b {
#instance b {
margin: 0;
padding: 0;
vertical-align: top;
vertical-align: middle;
margin-left: calc(0.2 * var(--unit-size));
}
.icon-logo {
@ -136,6 +137,7 @@ b {
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
vertical-align: middle;
}
#left-panel {
@ -155,6 +157,7 @@ b {
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
align-self: center;
}
/*-------------------------------------*/
@ -168,7 +171,7 @@ b {
background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em);
margin-top: calc(3 * var(--main-size));
}
.navbar {
@ -194,7 +197,7 @@ b {
transition: all 0.8s ease;
}
label {
.icon-menu label {
display: block;
cursor: pointer
}

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

@ -65,7 +65,8 @@ b {
right: 0;
background-color: #272E36;
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
padding: var(--medium-size);
padding: var(--main-size);
height: var(--main-size);
}
#top {
@ -73,24 +74,19 @@ b {
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
align-items: center;
}
.icon-menu {
position: relative;
display: flex;
align-items: center;
width: var(--unit-size);
height: var(--unit-size);
cursor: pointer;
transition: all .5s ease-in-out;
background-color: #272E36;
}
.icon-menu label {
width: var(--unit-size);
height: 2px;
background: #F6F6F6;
transition: all .5s ease-in-out;
z-index: 1;
}
.icon-menu label::before,
.icon-menu label::after {
@ -124,7 +120,8 @@ b {
#instance b {
margin: 0;
padding: 0;
vertical-align: top;
vertical-align: middle;
margin-left: calc(0.2 * var(--unit-size));
}
.icon-logo {
@ -136,6 +133,7 @@ b {
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
vertical-align: middle;
}
#left-panel {
@ -168,7 +166,7 @@ b {
background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em);
margin-top: calc(3 * var(--main-size));
}
.navbar {

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

@ -1,7 +1,7 @@
.content {
display: flex;
flex-wrap: wrap;
margin-top: calc(2 * var(--unit-size) + var(--main-size));
margin-top: calc(3 * var(--main-size));
justify-content: center;
align-items: center;
margin-left: var(--nav-size);

2
public/assets/css/faq/faq_mid.css
View File

@ -1,7 +1,7 @@
.content {
display: flex;
flex-wrap: wrap;
margin-top: calc(2 * var(--medium-size) + var(--main-size));
margin-top: calc(3 * var(--main-size));
justify-content: center;
align-items: center;
margin-left: 0;

2
public/assets/css/faq/faq_small.css
View File

@ -1,7 +1,7 @@
.content {
display: flex;
flex-wrap: wrap;
margin-top: calc(2 * var(--medium-size) + var(--main-size));
margin-top: calc(3 * var(--main-size));
justify-content: center;
align-items: center;
margin-left: 0;

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

@ -1,7 +1,7 @@
.content {
display: flex;
flex-wrap: wrap;
margin-top: calc(2 * var(--unit-size) + var(--main-size));
margin-top: calc(3 * var(--main-size));
justify-content: center;
align-items: center;
margin-left: var(--nav-size);

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

@ -1,7 +1,7 @@
.content {
display: flex;
flex-wrap: wrap;
margin-top: calc(2 * var(--medium-size) + var(--main-size));
margin-top: calc(3 * var(--main-size));
justify-content: center;
align-items: center;
margin-left: 0;
@ -114,16 +114,16 @@
/* FORMS ------------------------------*/
label {
.form label {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
label:nth-child() {
.form label:nth-child() {
margin-top: var(--medium-size);
}
input[type=text] {
.form 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);
@ -134,7 +134,7 @@ input[type=text] {
font-size: var(--medium-size);
}
button[type=submit] {
.form button[type=submit] {
background: rgba(0, 0, 0, 0.30);
padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
color: #F6F6F6;

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

@ -1,7 +1,7 @@
.content {
display: flex;
flex-wrap: wrap;
margin-top: calc(2 * var(--medium-size) + var(--main-size));
margin-top: calc(3 * var(--main-size));
justify-content: center;
align-items: center;
margin-left: 0;

3
templates/base.html.twig
View File

@ -94,8 +94,7 @@
<a href="#">
<svg class="icon icon-logo">
<use xlink:href="#icon-logo"></use>
</svg>
<b>GNU social</b>
</svg><b>GNU social</b>
</a>
</nav>
<svg id='search' class="icon icon-search">