Simplify dark scss, some fixes, more convenient dark_mode()

pull/27/head
Ondřej Hruška 6 years ago
parent 3d03727811
commit d870da7e05
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 4
      app/helpers.php
  2. 9
      resources/assets/sass/_block-collapse.scss
  3. 28
      resources/assets/sass/app-dark.scss
  4. 2
      resources/assets/sass/bootstrap-customizations/_card.scss
  5. 2
      resources/views/layouts/app.blade.php
  6. 4
      resources/views/layouts/main-nav.blade.php

@ -32,8 +32,8 @@ function faker() {
return $fac = Faker\Factory::create(); return $fac = Faker\Factory::create();
} }
function dark_mode() { function dark_mode($ifDark=true, $ifLight=false) {
return isset($_COOKIE["dark_mode"]); return isset($_COOKIE["dark_mode"]) ? $ifDark : $ifLight;
} }
/** /**

@ -37,3 +37,12 @@
} }
} }
.card .block-collapse::after{
background: linear-gradient(170deg, rgba($card-bg, 0) 30%, $card-bg 90%),
linear-gradient(to bottom, rgba($card-bg, 0) 80%, $card-bg 100%);
}
.infobox .block-collapse::after{
background: linear-gradient(170deg, rgba($body-bg, 0) 30%, $body-bg 90%),
linear-gradient(to bottom, rgba($body-bg, 0) 80%, $body-bg 100%);
}

@ -1,30 +1,4 @@
// Variables // Variables
$theme: dark; $theme: dark;
@import "bootstrap"; @import "app";
html {
overflow-y: scroll;
}
@import "helpers";
@import "fa-utils";
@import "block-collapse";
@import "form-help";
@import "bootstrap-customizations/paginate";
@import "bootstrap-customizations/card";
@import "bootstrap-customizations/tooltip";
@import "bootstrap-customizations/navbar";
@import "bootstrap-customizations/footer";
@import "bootstrap-customizations/link";
@import "bootstrap-customizations/border";
@import "bootstrap-customizations/button";
@import "bootstrap-customizations/responsive";
@import "bootstrap-customizations/typography";
.bio-table {
td {
padding-top: dist(2);
}
}

@ -41,5 +41,5 @@
} }
.card .auth-footer { .card .auth-footer {
background-color: $body-bg; background-color: transparent; // see through at the card bg
} }

@ -17,7 +17,7 @@
<link <link
rel="stylesheet" rel="stylesheet"
id="theme-style" id="theme-style"
href="{{ dark_mode() ? asset('css/app-dark.css') : asset('css/app.css') }}" href="{{ asset(dark_mode('css/app-dark.css', 'css/app.css')) }}"
data-light-url="{{ asset('css/app.css') }}" data-light-url="{{ asset('css/app.css') }}"
data-dark-url="{{ asset('css/app-dark.css') }}"> data-dark-url="{{ asset('css/app-dark.css') }}">
<link href="{{ asset('fonts/fa-dtbl-1.css') }}" rel="stylesheet"> <link href="{{ asset('fonts/fa-dtbl-1.css') }}" rel="stylesheet">

@ -1,11 +1,11 @@
{{-- Global navbar --}} {{-- Global navbar --}}
<nav class="navbar navbar-expand-md navbar-{{ dark_mode() ? 'dark' : 'light' }} page-navbar"> <nav class="navbar navbar-expand-md navbar-{{ dark_mode('dark', 'light') }} page-navbar">
<div class="container"> <div class="container">
<a class="navbar-brand" href="{{ route('dash') }}" aria-label="Go to Dashboard"> <a class="navbar-brand" href="{{ route('dash') }}" aria-label="Go to Dashboard">
<img <img
id="navbar-logo" id="navbar-logo"
src="/images/logo{{ dark_mode() ? '-dark' : '' }}.svg" src="/images/logo{{ dark_mode('-dark', '') }}.svg"
data-src-light="/images/logo.svg" data-src-light="/images/logo.svg"
data-src-dark="/images/logo-dark.svg" data-src-dark="/images/logo-dark.svg"
aria-hidden=true aria-hidden=true

Loading…
Cancel
Save