Skip to content
Snippets Groups Projects
Commit 63962b41 authored by Davide's avatar Davide
Browse files

major design changes (dark mode)

parent 04f00fdd
No related branches found
No related tags found
3 merge requests!1739Development,!1717Resolve "Major Startpage Redesign",!1713Resolve "Add setting to enable darkmode"
Hide whitespace changes
Inline Side-by-side
Showing
with 64 additions and 29 deletions
app/Http/Controllers/StartpageController.php
+ 7
− 1
View file @ 63962b41
......@@ -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)
......
resources/less/metager/general/base.less
+ 2
− 2
View file @ 63962b41
......@@ -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;
......
resources/less/metager/pages/resultpage/result-page.less
+ 3
− 2
View file @ 63962b41
......@@ -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 {
......
resources/less/metager/parts/searchbar.less
+ 5
− 2
View file @ 63962b41
@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);
}
}
}
......
resources/less/metager/parts/sidebar.less
+ 3
− 0
View file @ 63962b41
......@@ -47,6 +47,9 @@
text-align: center;
margin-right: 7px;
}
&>img {
filter: invert(@icon-color);
}
}
&>label {
font-size: 1.1em;
......
resources/less/metager/startpage-only.less
+ 8
− 5
View file @ 63962b41
......@@ -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%);
}
......
resources/less/metager/variables-dark.less
+ 14
− 6
View file @ 63962b41
......@@ -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
resources/less/metager/variables.less
+ 10
− 1
View file @ 63962b41
......@@ -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
resources/views/index.blade.php
+ 1
− 1
View file @ 63962b41
@extends('layouts.staticPages', ['page' => 'startpage', 'css' => [mix('css/themes/startpage-only.css')]])
@extends('layouts.staticPages', ['page' => 'startpage'])
@section('title', $title )
......
resources/views/layouts/resultPage.blade.php
+ 4
− 4
View file @ 63962b41
......@@ -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
......
resources/views/layouts/resultpage/resources.blade.php
+ 5
− 2
View file @ 63962b41
......@@ -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
resources/views/layouts/staticPages.blade.php
+ 1
− 2
View file @ 63962b41
......@@ -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') }}" />
......
webpack.mix.js
+ 1
− 1
View file @ 63962b41
......@@ -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", {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment