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

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

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

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

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