simplify theming

2020-03-10 17:06:52 +01:00
parent b4524ded62
commit 75486d62d8
14 changed files with 202 additions and 274 deletions
--- a/res/include/style/file_manager.css
+++ b/res/include/style/file_manager.css
@@ -3,6 +3,8 @@
 	padding: 0;
 }

+/* Override the menu button so it doesn't overlap the file manager when the menu
+is collapsed */
 #button_toggle_navigation {
 	display: none;
 }
@@ -10,24 +12,12 @@
 .file_manager {
 	position:         absolute;
 	padding:          0;
-	background-color: var(--layer_1_color);
-	box-shadow:       #000000 8px 8px 50px 5px;
-	left:             24px;
-	top:              24px;
-	right:            24px;
-	bottom:           24px;
+	background-color: var(--layer_2_color);
+	width:            100%;
+	height:           100%;
 	display:          flex;
 	flex-direction:   column;
 }
-@media (max-width: 1000px) {
-	.file_manager {
-		left: 0;
-		top: 0;
-		right: 0;
-		bottom: 0;
-	}
-}
-
 .file_manager > .nav_bar {
 	flex-shrink: 0;
 	display: flex;
@@ -55,13 +45,14 @@
 	overflow: hidden;
 	top: 0;
 	z-index: 1;
-	background-color: var(--layer_1_color);
+	background-color: var(--layer_2_color);
+	min-width: 750px; /* Sum of all columns */
 }
 .file_manager > .directory_area > .directory_sorters > div {
-	flex-shrink: 0;
-	flex-grow: 1;
 	display: inline-block;
 	margin: 4px 10px;
+	padding: 4px;
+	box-sizing: border-box;
 	border-bottom: 1px solid var(--input_color);
 	cursor: pointer;
 }
@@ -76,12 +67,6 @@
 	flex-shrink: 0;
 	flex-grow: 0;
 }
-@media (max-width: 1000px) {
-	.file_manager > .directory_area > .directory_sorters > :not(:first-child),
-	.node > :not(:first-child) {
-		display: none;
-	}
-}

 .file_manager > .directory_area {
 	flex-shrink: 1;
@@ -97,7 +82,7 @@
 	above are out of view*/
 	box-sizing: border-box;
 	display: block;
-	overflow: hidden;
+	min-width: 750px; /* Sum of all columns */
 }

 .file_manager > .status_bar {
@@ -117,7 +102,6 @@
 	control over the size.
 	Check out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing*/
 	margin: 0;
-	padding: 4px;
 	box-sizing: border-box;
 	color: var(--text_color);

@@ -136,6 +120,8 @@
 	height: 100%;
 	overflow: hidden;
 	margin: auto 10px;
+	padding: 4px;
+	box-sizing: border-box;
 	display: inline-block;
 	text-overflow: ellipsis;
 	white-space: nowrap;
--- a/res/include/style/layout.css
+++ b/res/include/style/layout.css
@@ -54,7 +54,7 @@ html, body {
 }
 body{
 	background-color: #111111; /* Fallback */
-	background-color: var(--body_color);
+	background-color: var(--layer_2_color);
 	background-repeat: repeat;
 	margin: 0;
 	font-family: system-ui, sans-serif;
@@ -123,7 +123,7 @@ body{
 	transition: left 0.5s;
 	padding: 50px 0 50px 0;
 }
-@media (max-width: 600px) {
+@media (max-width: 800px) {
 	.page_navigation {
 		left: -250px;
 	}
@@ -210,43 +210,44 @@ body, .checkers {
 .highlight_dark,
 .highlight_middle,
 .highlight_light,
-.highlight_headerbar,
 .highlight_green,
 .highlight_blue,
 .highlight_red,
 .highlight_1,
 .highlight_2,
-.highlight_3,
-.highlight_4 {
+.highlight_3{
 	position: relative;
 	width: auto;
 	height: auto;
 	box-sizing: border-box;
 	overflow: hidden;
 	text-align: center;
-	padding: .5em;
+	padding: 8px;
 }
 .highlight_dark, .highlight_1 {
 	background-color: var(--layer_1_color);
-	box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color);}
+	box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color);
+}
 .highlight_middle, .highlight_2 {
 	background-color: var(--layer_2_color);
-	box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color);}
+	box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color);
+}
 .highlight_light, .highlight_3 {
 	background-color: var(--layer_3_color);
-	box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);}
-.highlight_headerbar, .highlight_4 {
-	background-color: var(--layer_4_color);
-	box-shadow: 1px 1px var(--layer_4_shadow) 0 var(--shadow_color);}
-.highlight_green  {
+	box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);
+}
+.highlight_green {
 	background-color: rgba(0, 255, 0, 0.05);
-	border-color: #00d000;}
-.highlight_blue   {
+	border-color: #00d000;
+}
+.highlight_blue {
 	background-color: rgba(32, 32, 255, 0.2);
-	border-color: rgb(54, 54, 255);}
-.highlight_red    {
+	border-color: rgb(54, 54, 255);
+}
+.highlight_red {
 	background-color: rgba(255, 0, 0, 0.1);
-	border-color: #B00000;}
+	border-color: #B00000;
+}

 .highlight_green,
 .highlight_blue,
@@ -264,13 +265,15 @@ h1, h2, h3, h4, h5, h6 {
 	margin-left: 10px;
 	margin-right: 10px;
 }
-h1{font-size: 2em;    font-family: "light", sans-serif; font-weight: normal;}
-h2{font-size: 1.75em; font-family: "light", sans-serif; font-weight: normal;}
+h2, h3{ /* Differentiate it a bit, else it just looks like bold text */
+	border-bottom: 1px var(--layer_3_color_border) solid;
+}
+h1{font-size: 2.25em;    font-family: "light", sans-serif; font-weight: normal;}
+h2{font-size: 2em; font-family: "light", sans-serif; font-weight: normal;}
 h3{font-size: 1.5em;  font-family: "light", sans-serif; font-weight: normal;}
 h4{font-size: 1.25em; font-family: sans-serif; font-weight: normal;}
 h5{font-size: 1em;    font-family: sans-serif; font-weight: normal;}
 h6{font-size: .75em;  font-family: sans-serif; font-weight: normal;}
-h2, h3{border-bottom: 1px var(--layer_3_color_border) solid;} /* Differentiate it a bit, else it just looks like bold text */

 p, .indent {
 	margin: 10px;
@@ -335,7 +338,7 @@ pre{
 	overflow: hidden;
 	border-radius: 2px;
 	box-shadow: 2px 2px 8px -3px var(--shadow_color);
-	background-color: var(--file_background_color);
+	background-color: var(--input_color_dark);
 	color: #bfbfbf; /* Fallback */
 	color: var(--text_color);
 	word-break: break-all;
--- a/res/include/style/viewer.css
+++ b/res/include/style/viewer.css
@@ -22,7 +22,6 @@
 	display: flex;
 	flex-direction: row;
 	text-align: left;
-	padding: 8px;
 	z-index: 10;
 	box-shadow: none;
 }
@@ -31,8 +30,8 @@
 .file_viewer > .file_viewer_headerbar > * {
 	flex-grow: 0;
 	flex-shrink: 0;
-	margin-left: .4em;
-	margin-right: .4em;
+	margin-left: 6px;
+	margin-right: 6px;
 	display: inline-flex;
 }
 .file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title {
@@ -148,7 +147,7 @@
 	overflow-x: hidden;
 	float: left;
 	background-color: var(--layer_1_color);
-	box-shadow: inset 1px 1px 6px var(--shadow_color);
+	box-shadow: inset 1px 1px var(--layer_1_shadow) var(--shadow_color);
 	text-align: center;
 	z-index: 48;
 	overflow: hidden;
@@ -193,8 +192,8 @@
 	transform: translateY(-50%);
 }

-.pannable{ cursor: move; }
-.drop-shadow{ box-shadow: var(--shadow_color) 10px 10px 50px; }
+.pannable    { cursor: move; }
+.drop_shadow { box-shadow: 1px 1px var(--layer_3_shadow) var(--shadow_color); }

 /* ========================
   || TOOLBAR COMPONENTS ||