From 63962b4160e1f8a0c06ac7201648eacf2d8718a0 Mon Sep 17 00:00:00 2001
From: Davide <davide@suma-ev.de>
Date: Tue, 20 Oct 2020 14:00:31 +0200
Subject: [PATCH] major design changes (dark mode)
---
app/Http/Controllers/StartpageController.php | 8 +++++++-
resources/less/metager/general/base.less | 4 ++--
.../metager/pages/resultpage/result-page.less | 5 +++--
resources/less/metager/parts/searchbar.less | 7 +++++--
resources/less/metager/parts/sidebar.less | 3 +++
resources/less/metager/startpage-only.less | 13 +++++++-----
resources/less/metager/variables-dark.less | 20 +++++++++++++------
resources/less/metager/variables.less | 11 +++++++++-
resources/views/index.blade.php | 2 +-
resources/views/layouts/resultPage.blade.php | 8 ++++----
.../layouts/resultpage/resources.blade.php | 7 +++++--
resources/views/layouts/staticPages.blade.php | 3 +--
webpack.mix.js | 2 +-
13 files changed, 64 insertions(+), 29 deletions(-)
diff --git a/app/Http/Controllers/StartpageController.php b/app/Http/Controllers/StartpageController.php
index c5e4ff612..6f7d66fc8 100644
--- a/app/Http/Controllers/StartpageController.php
+++ b/app/Http/Controllers/StartpageController.php
@@ -43,6 +43,11 @@ class StartpageController extends Controller
$lang = 'all';
}
+ if(Cookie::get('dark_mode') === "2")
+ $css = mix('css/themes/startpage-only-dark.css');
+ else
+ $css = mix('css/themes/startpage-only-light.css');
+
return view('index')
->with('title', trans('titles.index'))
->with('homeIcon')
@@ -53,7 +58,8 @@ class StartpageController extends Controller
->with('request', $request->input('request', 'GET'))
->with('option_values', $option_values)
->with('autocomplete', $autocomplete)
- ->with('pluginmodal', $request->input('plugin-modal', 'off'));
+ ->with('pluginmodal', $request->input('plugin-modal', 'off'))
+ ->with('css', [$css]);
}
public function loadPage($subpage)
diff --git a/resources/less/metager/general/base.less b/resources/less/metager/general/base.less
index 50f241c54..2c542869c 100644
--- a/resources/less/metager/general/base.less
+++ b/resources/less/metager/general/base.less
@@ -259,8 +259,8 @@ summary {
top: 100%;
left: 0;
z-index: 1;
- color: black;
- background-color: white;
+ color: @text-color;
+ background-color: @body-background-color;
border: 2px solid @metager-orange;
border-radius: 6px;
padding: 3px 8px;
diff --git a/resources/less/metager/pages/resultpage/result-page.less b/resources/less/metager/pages/resultpage/result-page.less
index a54a8f2fd..985b981aa 100644
--- a/resources/less/metager/pages/resultpage/result-page.less
+++ b/resources/less/metager/pages/resultpage/result-page.less
@@ -142,7 +142,7 @@ nav .input-group {
}
#helpButton {
- color: black;
+ color: @text-color;
}
a {
@@ -355,7 +355,8 @@ a {
grid-area: searchbar;
padding-top: @padding-small-default;
background-color: @resultpage-background-color;
- box-shadow: 0px 1px 3px 2px white, 1px 0px 1px 2px white;
+ border: solid @metager-orange;
+ border-width: 0px 0px 2px 0px;
position: sticky;
}
#foki {
diff --git a/resources/less/metager/parts/searchbar.less b/resources/less/metager/parts/searchbar.less
index c546cef27..969bf687b 100644
--- a/resources/less/metager/parts/searchbar.less
+++ b/resources/less/metager/parts/searchbar.less
@@ -1,6 +1,5 @@
@searchbar-border-color: #585858;
@searchbar-border-color-light: #777777;
-@searchbar-background-color: white;
.searchbar {
display: -webkit-box;
display: -moz-box;
@@ -69,6 +68,7 @@
-webkit-box-shadow: none;
box-shadow: none;
background-color: transparent;
+ color:@text-color;
}
#search-delete-btn {
position: absolute;
@@ -78,12 +78,14 @@
height: calc(100% - 4px);
margin: 2px 2px 2px 0;
border: none;
- background-color: white;
+ background-color: transparent;
font-size: 1.8em;
font-weight: normal;
display: none;
+ filter: invert(@icon-color);
&:hover {
color: red;
+ filter: invert(0);
}
}
}
@@ -95,6 +97,7 @@
background-color: transparent;
padding: 0;
color: #585858;
+ filter: invert(@icon-color);
}
}
}
diff --git a/resources/less/metager/parts/sidebar.less b/resources/less/metager/parts/sidebar.less
index f80e03453..462a61df0 100644
--- a/resources/less/metager/parts/sidebar.less
+++ b/resources/less/metager/parts/sidebar.less
@@ -47,6 +47,9 @@
text-align: center;
margin-right: 7px;
}
+ &>img {
+ filter: invert(@icon-color);
+ }
}
&>label {
font-size: 1.1em;
diff --git a/resources/less/metager/startpage-only.less b/resources/less/metager/startpage-only.less
index 8fdae69b6..aaeee14cd 100644
--- a/resources/less/metager/startpage-only.less
+++ b/resources/less/metager/startpage-only.less
@@ -171,7 +171,7 @@ footer {
#story-container > section > p { // sets all paragraphs for all sections
grid-area: paragraph;
font-size: 30px;
- color: #474747;
+ color: @story-font-color;
max-width: 1100px;
padding-right: 50px;
}
@@ -194,6 +194,9 @@ footer {
#story-privacy {
margin-bottom: 0;
background-color: @story-privacy-background;
+ .story-icon{
+ filter: invert(@icon-color);
+ }
}
#story-ngo {
@@ -203,7 +206,7 @@ footer {
}
#story-ngo > h1 {
- color:#AD1A00;
+ color:@story-ngo-color;
}
#story-diversity {
@@ -213,7 +216,7 @@ footer {
}
#story-diversity > h1 {
- color: #0c4690;
+ color: @story-diversity-color;
}
#story-eco {
@@ -223,14 +226,14 @@ footer {
}
#story-eco > h1 {
- color:#0c621a;
+ color: @story-eco-color;
}
#story-container #story-plugin > h1 {
font-size:60px;
}
#story-container #story-plugin {
min-height: 60vh;
- background-color: white;
+ background-color: @story-plugin-background;
clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%);
}
diff --git a/resources/less/metager/variables-dark.less b/resources/less/metager/variables-dark.less
index aec4e5feb..ea43ab34d 100644
--- a/resources/less/metager/variables-dark.less
+++ b/resources/less/metager/variables-dark.less
@@ -5,7 +5,7 @@
@background-color: @color-almost-black;
@background-color-mobile: @color-almost-black;
// General text color.
-@text-color: @color-white;
+@text-color: @color-almost-white;
// Default textual link color.
@link-color: #FF8000;
// Sidebar styles
@@ -15,9 +15,17 @@
// Default Borde Color
@border-color: #727272;
-@background-color:black;
+// Story coloring
+@story-privacy-background: @color-strong-grey;
+@story-privacy-color: @color-almost-white;
+@story-ngo-background:#200000;
+@story-ngo-color:#ffaaaa;
+@story-diversity-background:#000020;
+@story-diversity-color:#aaaaff;
+@story-eco-background:#002000;
+@story-eco-color:#aaffaa;
+@story-plugin-background: @color-almost-black;
+@story-font-color: @color-almost-white;
+@icon-color:1;
-@story-privacy-background: #111111;
-@story-ngo-background:#000000;
-@story-diversity-background:#000030;
-@story-eco-background:#003000;
\ No newline at end of file
+@searchbar-background-color: @color-almost-black;
\ No newline at end of file
diff --git a/resources/less/metager/variables.less b/resources/less/metager/variables.less
index c8b85e4b9..90be249ac 100644
--- a/resources/less/metager/variables.less
+++ b/resources/less/metager/variables.less
@@ -64,6 +64,15 @@ sans-serif;
@spruch-author-color: @color-strong-grey;
@story-privacy-background: @color-almost-white;
+@story-privacy-color:@color-almost-black;
@story-ngo-background:white;
+@story-ngo-color:#AD1A00;
@story-diversity-background:#edfdff;
-@story-eco-background:#e3ffe9;
\ No newline at end of file
+@story-diversity-color:#0c4690;
+@story-eco-background:#e3ffe9;
+@story-eco-color:#0c621a;
+@story-plugin-background:white;
+@story-font-color:#474747;
+@icon-color:0;
+
+@searchbar-background-color: white;
\ No newline at end of file
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 5e080dacd..3af21c8c3 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.staticPages', ['page' => 'startpage', 'css' => [mix('css/themes/startpage-only.css')]])
+@extends('layouts.staticPages', ['page' => 'startpage'])
@section('title', $title )
diff --git a/resources/views/layouts/resultPage.blade.php b/resources/views/layouts/resultPage.blade.php
index ebd100298..8b63a3b37 100644
--- a/resources/views/layouts/resultPage.blade.php
+++ b/resources/views/layouts/resultPage.blade.php
@@ -15,18 +15,18 @@
<link rel="apple-touch-icon" sizes="152x152" href="/img/apple/touch-icon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple/touch-icon-180.png">
@if(empty(Cookie::get('key')))
- <link rel="search" type="application/opensearchdescription+xml" title="{{ trans('staticPages.opensearch') }}" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), action('StartpageController@loadPlugin')) }}">
+ <link rel="search" type="application/opensearchdescription+xml" title="{{ trans('staticPages.opensearch') }}" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), action('StartpageController@loadPlugin')) }}">
@else
- <link rel="search" type="application/opensearchdescription+xml" title="{{ trans('staticPages.opensearch') }}" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), action('StartpageController@loadPlugin', ['key' => Cookie::get('key')])) }}">
+ <link rel="search" type="application/opensearchdescription+xml" title="{{ trans('staticPages.opensearch') }}" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), action('StartpageController@loadPlugin', ['key' => Cookie::get('key')])) }}">
@endif
<link href="/fonts/liberationsans/stylesheet.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="{{ mix('css/fontawesome.css') }}" />
<link type="text/css" rel="stylesheet" href="{{ mix('css/fontawesome-solid.css') }}" />
@if(Cookie::get('dark_mode') === "2")
- <link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager-dark.css') }}" title="MetaGer Dark"/>
+ <link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager-dark.css') }}" title="MetaGer Dark"/>
@else
- <link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager.css') }}" title="MetaGer"/>
+ <link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager.css') }}" title="MetaGer"/>
@endif
@endif
diff --git a/resources/views/layouts/resultpage/resources.blade.php b/resources/views/layouts/resultpage/resources.blade.php
index 05173510d..f0300a4cc 100644
--- a/resources/views/layouts/resultpage/resources.blade.php
+++ b/resources/views/layouts/resultpage/resources.blade.php
@@ -17,5 +17,8 @@
<link href="/fonts/liberationsans/stylesheet.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="{{ mix('css/fontawesome.css') }}" />
<link type="text/css" rel="stylesheet" href="{{ mix('css/fontawesome-solid.css') }}" />
- <link type="text/css" rel="stylesheet alternate" href="{{ mix('css/themes/metager-dark.css') }}" title="MetaGer Dark"/>
- <link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager.css') }}" title="MetaGer"/>
+ @if(Cookie::get('dark_mode') === "2")
+ <link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager-dark.css') }}" title="MetaGer Dark"/>
+ @else
+ <link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager.css') }}" title="MetaGer"/>
+ @endif
diff --git a/resources/views/layouts/staticPages.blade.php b/resources/views/layouts/staticPages.blade.php
index 9dd9b9c86..bcad68ca9 100644
--- a/resources/views/layouts/staticPages.blade.php
+++ b/resources/views/layouts/staticPages.blade.php
@@ -28,11 +28,10 @@
@endif
@if(Cookie::get('dark_mode') === "2")
- <link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager-dark.css') }}" title="MetaGer Dark"/>
+ <link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager-dark.css') }}" title="MetaGer Dark"/>
@else
<link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager.css') }}" title="MetaGer"/>
@endif
-
<link type="text/css" rel="stylesheet" href="{{ mix('css/utility.css') }}" />
<link href="/fonts/liberationsans/stylesheet.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="{{ mix('css/fontawesome.css') }}" />
diff --git a/webpack.mix.js b/webpack.mix.js
index 0288185da..0eecdfda1 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -22,7 +22,7 @@ mix
.less("resources/less/metager/metager.less", "public/css/themes/metager.css", {
strictMath: true
})
- .less("resources/less/metager/startpage-only-light.less", "public/css/themes/startpage-only.css", {
+ .less("resources/less/metager/startpage-only-light.less", "public/css/themes/startpage-only-dark.css", {
strictMath: true
})
.less("resources/less/metager/startpage-only-dark.less", "public/css/themes/startpage-only-dark.css", {
--
GitLab