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

[CSS] Fixed incorrect Chromium based browsers improper main content view. Flex item order (shouldn't be a problem, but it was) and padding for the container class was the root issue.

Browse Source 
Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>
This commit is contained in:
Eliseu Amaro 2021-07-21 23:13:20 +01:00 committed by Hugo Sales
parent 1c4568d064
commit 0620923ac6
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
3 changed files with 15 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -108,8 +108,11 @@ a:active {
}
hr {
color: var(--bg3) !important;
border-radius: var(--main-size);
all: unset;
display: block;
height: 1px;
background-image: linear-gradient(var(--bg1), var(--bg2));
margin-top: var(--unit-size);
margin-bottom: var(--main-size);
}
@ -132,7 +135,6 @@ html {
}
#header {
order: 1;
display: flex;
justify-content: center;
position: fixed;
@ -170,18 +172,18 @@ html {
/* CONTAINS ALL ELEMENTS BESIDES HEADER */
.container {
order: 2;
display: flex;
justify-content: space-evenly;
width: 100%;
margin-top: calc(3 * var(--small-size) + var(--main-size));
}
/* THE FOCUSED (middle) DIV */
.content {
order: 2;
display: flex;
flex-direction: column;
width: calc(3 * (100%/5));
padding: calc(2 * var(--main-size)) var(--small-size) var(--small-size) var(--small-size);
}
/* NAVIGATION */
@ -193,7 +195,6 @@ html {
}
.navigation nav {
padding: var(--small-size);
background: radial-gradient(ellipse at 50% 100%, var(--bg1), transparent 35%);
}
.navigation a {
font-family: var(--display-font);
@ -203,12 +204,15 @@ html {
.active {
color: var(--white) !important;
}
.main-nav {
background: radial-gradient(ellipse at 50% 100%, var(--bg1), transparent 30%);
}
.sec-nav {
background: radial-gradient(ellipse at 50% 100%, var(--bg1), transparent 50%);
}
.sec-nav ul {
display: flex;
justify-content: space-around;
padding-left: 20%;
padding-right: 20%;
}
.sec-nav a {
font-size: var(--medium-size);

6
public/assets/css/left/left.css
View File

@ -17,18 +17,14 @@
height: auto;
}
#right-container {
order: 1;
}
#left-container[open] > div {
opacity: 100%;
}
#left-container[open] {
order: 1;
width: calc(100vw / 4);
border-right: solid 1px var(--bg2);
margin-right: var(--main-size);
}
#left-container[open] > #left-panel {

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

@ -12,10 +12,6 @@
vertical-align: middle;
}
#right-container {
order: 3;
}
#right-container[open] > div {
opacity: 100%;
}
@ -23,6 +19,7 @@
#right-container[open] {
width: calc(100vw / 4);
border-left: solid 1px var(--bg2);
margin-left: var(--main-size);
}
#right-panel {