diff --git a/resources/assets/sass/appdark.scss b/resources/assets/sass/appdark.scss index d88a375e5..f6f60287c 100644 --- a/resources/assets/sass/appdark.scss +++ b/resources/assets/sass/appdark.scss @@ -19,18 +19,66 @@ background: #ADAFAE !important; } +.border-top { + border-top: 1px solid #282828 !important; +} + +.border-bottom { + border-bottom: 1px solid #282828 !important; +} + .btn-outline-light { border-color: #E2E8F0 !important; color: #E2E8F0 !important; } +.modal-content, +.card, +.dropdown-menu, .bg-white, +.list-group-item, +.autocomplete-result-list, .postPresenterContainer, .postComponent .card-body.flex-grow-0.py-1, .postComponent .reactions, .postComponent .status-comments, .navbar-laravel { - background: #2D3748 !important; + background: #000 !important; +} + +.autocomplete-result-list { + z-index: 99999; +} + +.pill-to { + background: #282828 !important; +} + +.dropdown-item:hover, +.tt-suggestion:hover, +.dropdown-item:focus, +.tt-suggestion:focus, +.chat-msg:hover, +.result-card .media:hover { + background: #181818 !important; +} + +.notification-card .contents { + scrollbar-color: dark; +} + +body, html { + scrollbar-color: dark; +} + +.modal-content, +.form-control, +.img-thumbnail { + border: 1px solid #282828 !important; +} + +.navbar.border-bottom { + border-color: #282828 !important; } .postComponent .border-left { @@ -44,7 +92,7 @@ input, textarea { color: #E2E8F0 !important; - background: #4A5568 !important; + background: #000 !important; } .far, .fas, @@ -55,15 +103,42 @@ textarea { color: #ADAFAE !important; } -.form-control.search-form-input { - color: #E2E8F0 !important; - background: #4A5568 !important; -} - .btn-outline-primary { border-color: #4A5568 !important; } +.postComponent .status-comments { + border-top: 1px solid #282828 !important; + border-bottom: 1px solid #282828 !important; +} + +.messages-page .card-header { + border-bottom: 1px solid #282828; +} + +hr { + border-color: #282828 !important; +} + +::-webkit-scrollbar { + width: 15px; +} + +::-webkit-scrollbar-track { + background: #202020; + border-left: 1px solid #2c2c2c; +} + +::-webkit-scrollbar-thumb { + background: #3e3e3e; + border: solid 3px #202020; + border-radius: 7px; +} + +::-webkit-scrollbar-thumb:hover { + background: white; +} + @import "components/filters"; @import "components/typeahead"; @@ -74,6 +149,8 @@ textarea { @import "moment"; +@import '~animate.css/animate.min.css'; + .border { - border: 1px solid #4A5568 !important; -} + border-color: #282828 !important; +} \ No newline at end of file diff --git a/resources/assets/sass/dark.scss b/resources/assets/sass/dark.scss index 044ad6fe1..fd2d9173a 100644 --- a/resources/assets/sass/dark.scss +++ b/resources/assets/sass/dark.scss @@ -1,4 +1,4 @@ -// Cyborg 4.2.1 +// Cyborg 4.5.3 // Bootswatch // @@ -9,24 +9,24 @@ $white: #fff !default; $gray-100: #f8f9fa !default; $gray-200: #e9ecef !default; $gray-300: #dee2e6 !default; -$gray-400: #ADAFAE !default; +$gray-400: #adafae !default; $gray-500: #888 !default; $gray-600: #555 !default; -$gray-700: #2D3748 !default; +$gray-700: #282828 !default; $gray-800: #222 !default; $gray-900: #212529 !default; $black: #000 !default; -$blue: #2A9FD6 !default; +$blue: #2a9fd6 !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; $pink: #e83e8c !default; -$red: #CC0000 !default; +$red: #c00 !default; $orange: #fd7e14 !default; -$yellow: #FF8800 !default; -$green: #77B300 !default; +$yellow: #f80 !default; +$green: #77b300 !default; $teal: #20c997 !default; -$cyan: #9933CC !default; +$cyan: #93c !default; $primary: $blue !default; $secondary: $gray-600 !default; @@ -42,27 +42,28 @@ $yiq-contrasted-threshold: 175 !default; // Body -$body-bg: #1A202C !default; -$body-color: $gray-500 !default; +$body-bg: #060606 !default; +$body-color: $gray-400 !default; // Fonts $font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; $font-size-base: 0.9rem; +$font-weight-lighter: 300; +$line-height-base: 1.6; - -$headings-color: $white !default; +$font-size-lg: ($font-size-base * 1.25); +$font-size-sm: ($font-size-base * .875); +$headings-color: $white !default; // Tables -$table-accent-bg: rgba($white,.05) !default; -$table-hover-bg: rgba($white,.075) !default; - +$table-color: $white !default; +$table-accent-bg: rgba($white, .05) !default; +$table-hover-bg: rgba($white, .075) !default; $table-border-color: $gray-700 !default; - -$table-dark-bg: $gray-500 !default; -$table-dark-border-color: darken($gray-500, 7.5%) !default; -$table-dark-color: $body-bg !default; +$table-dark-bg: $gray-500 !default; +$table-dark-border-color: darken($gray-500, 7.5%) !default; // Buttons @@ -70,13 +71,11 @@ $input-btn-padding-x: 1rem !default; // Forms -$input-disabled-bg: $gray-400 !default; - -$input-border-color: transparent !default; - +$input-disabled-bg: $gray-400 !default; +$input-border-color: $white !default; $input-group-addon-color: $white !default; $input-group-addon-bg: $gray-700 !default; - +$input-group-addon-border-color: transparent !default; $custom-file-color: $white !default; $custom-file-border-color: $gray-700 !default; @@ -84,7 +83,6 @@ $custom-file-border-color: $gray-700 !default; $dropdown-bg: $gray-700 !default; $dropdown-divider-bg: $gray-800 !default; - $dropdown-link-color: $white !default; $dropdown-link-hover-color: $white !default; $dropdown-link-hover-bg: $primary !default; @@ -106,62 +104,65 @@ $navbar-dark-hover-color: $white !default; $pagination-color: $white !default; $pagination-bg: $gray-700 !default; $pagination-border-color: transparent !default; - $pagination-hover-color: $white !default; $pagination-hover-bg: $primary !default; $pagination-hover-border-color: $pagination-border-color !default; - $pagination-disabled-bg: $pagination-bg !default; $pagination-disabled-border-color: $pagination-border-color !default; // Jumbotron -$jumbotron-bg: $gray-700 !default; +$jumbotron-bg: $gray-700 !default; // Cards -$card-bg: $gray-700 !default; +$card-bg: $gray-700 !default; // Tooltips -$tooltip-bg: $gray-700 !default; -$tooltip-opacity: 1 !default; +$tooltip-bg: $gray-700 !default; +$tooltip-opacity: 1 !default; // Popovers -$popover-bg: $gray-700 !default; +$popover-bg: $gray-700 !default; + +// Toasts + +$toast-color: $white !default; +$toast-background-color: $gray-800 !default; +$toast-border-color: $gray-700 !default; +$toast-header-color: $body-color !default; +$toast-header-background-color: $toast-background-color !default; +$toast-header-border-color: $toast-border-color !default; // Modals -$modal-content-bg: $gray-800 !default; - -$modal-header-border-color: $gray-700 !default; +$modal-content-bg: $gray-800 !default; +$modal-header-border-color: $gray-700 !default; // Progress bars -$progress-bg: $gray-700 !default; +$progress-bg: $gray-700 !default; // List group -$list-group-bg: $gray-800 !default; -$list-group-border-color: $gray-700 !default; - -$list-group-hover-bg: $primary !default; - -$list-group-disabled-bg: $gray-700 !default; - -$list-group-action-active-bg: $primary !default; +$list-group-bg: $gray-800 !default; +$list-group-border-color: $gray-700 !default; +$list-group-hover-bg: $primary !default; +$list-group-disabled-bg: $gray-700 !default; +$list-group-action-active-bg: $primary !default; // Breadcrumbs -$breadcrumb-bg: $gray-700 !default; +$breadcrumb-bg: $gray-700 !default; // Close -$close-color: $white !default; -$close-text-shadow: none !default; +$close-color: $white !default; +$close-text-shadow: none !default; // Code -$pre-color: inherit !default; \ No newline at end of file +$pre-color: inherit !default;