pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the UI flatter

Browse Source
This commit is contained in:
Fornax
2022-01-03 14:02:50 +01:00
parent bdec963be0
commit 4f17c71b56
30 changed files with 239 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
res/include/style/layout.css
View File

@@ -7,19 +7,6 @@
--highlight_border: inset 0px 0px 5px 1px var(--highlight_color), 0px 0px 1px 0px var(--highlight_color);
}
/* Fonts */
@font-face {
font-family: 'light';
font-display: fallback;
font-style: normal;
font-weight: normal;
src:
local('Cantarell Light'),
local('Cantarell, Light'),
local('Cantarell-Light'),
url(/res/misc/Cantarell-Light.otf) format("opentype");
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
@@ -65,18 +52,24 @@ body{
font-family: system-ui, sans-serif;
font-size: 17px;
line-height: 1.8em;
color: #b2b2b2; /* Fallback */
color: var(--text_color);
background-color: var(--layer_2_color);
padding: 0;
}
body, .checkers {
.checkers {
background-image: url("{{bgPattern}}");
background-color: #111111; /* Fallback */
background-color: var(--layer_1_color);
background-repeat: repeat;
background-attachment: fixed;
background-blend-mode: luminosity;
}
.inset {
padding-top: 70px;
box-shadow: inset 1px 1px 10px 0 var(--shadow_color);
border-radius: 16px;
text-align: center;
overflow: hidden;
}
/* Page layout elements */
.page_wrapper {
@@ -100,7 +93,7 @@ body, .checkers {
background: var(--input_color);
border-radius: 0;
border-bottom-right-radius: 90%;
box-shadow: 2px 2px 8px -3px var(--shadow_color);
box-shadow: 0 0 6px -2px var(--shadow_color);
}
.button_toggle_navigation:active {
padding: 15px 15px 10px 15px;
@@ -109,23 +102,19 @@ body, .checkers {
.page_navigation {
position: fixed;
backface-visibility: hidden;
z-index: 99;
width: 18em;
height: 100%;
left: 0;
float: left;
background-color: #1c1c1c;
background-color: var(--layer_1_color);
padding: 20px 0 0.5em 0;
background-color: var(--layer_2_color);
padding: 20px 10px 10px 0;
overflow-y: auto;
overflow-x: hidden;
text-align: left;
box-shadow: inset -8px 0px 8px -8px var(--shadow_color);
transition: left 0.5s;
}
.page_body {
position: absolute;
z-index: 200;
right: 0;
height: auto;
left: 18em;
@@ -134,9 +123,8 @@ body, .checkers {
text-align: center; /* Center the header and body */
overflow-y: auto;
overflow-x: hidden;
z-index: 50;
background-color: var(--layer_2_color);
transition: left 0.5s;
padding: 70px 0 100px 0;
}
@media (max-width: 1000px) {
.page_navigation {
@@ -147,18 +135,6 @@ body, .checkers {
width: 100%;
}
}
.page_body > .page_content {
position: relative;
display: inline-block;
width: 100%;
height: auto;
padding: 0 0 20px 0;
background-color: #212121;
background-color: var(--layer_2_color);
box-shadow: 1px 1px 12px 0 var(--shadow_color);
clear: both;
}
.limit_width {
position: relative;
display: inline-block;
@@ -184,8 +160,9 @@ body, .checkers {
text-align: center;
padding: 4px;
margin: 0.3em 15px 0.3em 15px;
font-family: "light", sans-serif;
font-size: 1.6em;
font-family: sans-serif;
font-weight: lighter;
font-size: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
transition: background-color 0.5s;
@@ -200,11 +177,6 @@ body, .checkers {
text-decoration: none;
}
.inset {
box-shadow: inset 1px 1px 20px 0 #000000;
box-shadow: inset 1px 1px 20px 0 var(--shadow_color);
}
.highlight_dark,
.highlight_middle,
.highlight_light,
@@ -223,22 +195,19 @@ body, .checkers {
overflow: hidden;
text-align: center;
padding: 4px;
border-radius: 8px;
}
.highlight_dark, .highlight_1 {
background-color: var(--layer_1_color);
box-shadow: 1px 1px 6px -2px var(--shadow_color);
}
.highlight_middle, .highlight_2 {
background-color: var(--layer_2_color);
box-shadow: 1px 1px 6px -2px var(--shadow_color);
}
.highlight_light, .highlight_3 {
background-color: var(--layer_3_color);
box-shadow: 1px 1px 6px -2px var(--shadow_color);
}
.highlight_lighter, .highlight_4 {
background-color: var(--layer_4_color);
box-shadow: 1px 1px 6px -2px var(--shadow_color);
}
.highlight_green {
background-color: rgba(0, 255, 0, 0.05);
@@ -273,43 +242,40 @@ h1, h2, h3, h4, h5, h6 {
line-height: 1em;
margin: 0.5em 10px;
font-weight: normal;
font-weight: lighter;
font-family: sans-serif;
}
h1 {
font-size: 2.5em;
font-family: "light", sans-serif;
text-align: center;
margin-bottom: 50px;
}
h2 {
font-size: 2em;
font-family: "light", sans-serif;
border-bottom: 1px var(--layer_4_color_border) solid;
}
h3 {
font-size: 1.6em;
font-family: "light", sans-serif;
font-size: 1.75em;
border-bottom: 1px var(--layer_3_color_border) solid;
}
h4 {
font-size: 1.25em;
font-family: "light", sans-serif;
font-size: 1.50em;
border-bottom: 1px var(--layer_2_color_border) solid;
}
h5 {
font-size: 1em;
font-family: sans-serif;
font-size: 1.25em;
border-bottom: 1px var(--layer_1_color_border) solid;
}
h6{
font-size: .75em;
font-family: sans-serif;
h6 {
font-size: 1em;
}
p, .indent {
margin: 10px;
}
hr{
hr {
height: 1px;
border: none;
background-color: var(--input_color);
@@ -513,13 +479,12 @@ select:disabled , select.disabled {
.tab_bar {
display: block;
width: 100%;
margin: 0 0 16px 0;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
text-align: center;
background-color: var(--layer_1_color);
box-shadow: inset 0 -10px 8px -12px var(--shadow_color);
box-shadow: inset 0 -10px 8px -12px var(--shadow_color), 0 0 10px var(--shadow_color);
}
.tab_bar > button,
.tab_bar > .button {