From 907222da53ae598a79b06a25ec6b414b0cf2a3a9 Mon Sep 17 00:00:00 2001 From: Hypolite Petovan Date: Wed, 19 Aug 2020 22:58:47 -0400 Subject: [PATCH] [frio] Add dark accented scheme --- view/theme/frio/config.php | 1 + view/theme/frio/scheme/dark.css | 320 ++++++++++++++++++++++++++++++++ view/theme/frio/scheme/dark.php | 34 ++++ 3 files changed, 355 insertions(+) create mode 100644 view/theme/frio/scheme/dark.css create mode 100644 view/theme/frio/scheme/dark.php diff --git a/view/theme/frio/config.php b/view/theme/frio/config.php index b93848cfe0..5b3c77a50c 100644 --- a/view/theme/frio/config.php +++ b/view/theme/frio/config.php @@ -140,6 +140,7 @@ function frio_form($arr) $schemes = [ 'light' => DI::l10n()->t('Light (Accented)'), + 'dark' => DI::l10n()->t('Dark (Accented)'), ]; $legacy_schemes = []; diff --git a/view/theme/frio/scheme/dark.css b/view/theme/frio/scheme/dark.css new file mode 100644 index 0000000000..308e318878 --- /dev/null +++ b/view/theme/frio/scheme/dark.css @@ -0,0 +1,320 @@ +/* + Licence : AGPL + Created on : 11.08.2020 + Author : Hypolite Petovan +*/ +#topbar-first { + background-color: $background_color; +} +#topbar-first .dropdown.account > a, +#topbar-first .dropdown.account.open > a, +#topbar-first .dropdown.account > button, +#topbar-first .dropdown.account.open > button { + background: none; +} + +#topbar-first #nav-notifications-menu li.notif-entry:hover { + background-color: $nav_bg; +} + + +#topbar-second { + background-color: $nav_bg; + border-color: $link_color; +} +#topbar-second ul.tabs li { + border_color: $link_color; +} + +.dropdown-menu, .account .dropdown-menu { + background-color: $background_color; +} +.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover { + color: $link_color; +} +.account .dropdown-menu li { + border-color: $background_color; +} + +.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover { + background-image: none; + background-color: rgba(232, 232, 232, $contentbg_transp); +} + +.breadcrumb, +.panel-footer, +.list-group-item { + background-color: rgba(245, 245, 245, $contentbg_transp); +} +.panel-group .panel-footer { + border-top: 1px solid $nav_bg; +} + +.well { + background-image: none; + background-color: $nav_bg; + box-shadow: 0 0 3px #dadada; + -webkit-box-shadow: 0 0 3px #dadada; +} + +input[type=text], +input[type=submit], +button[type=submit]:not(.btn), +select, +textarea, +.form-control { + border: none; + background-color: $nav_bg; + color: $font_color; + box-shadow: 0 0 3px #dadada; + -webkit-box-shadow: 0 0 3px #dadada; +} +.form-control[disabled], +.form-control[readonly], +.ieldset[disabled] .form-control { + background-color: $background_color; + color: $font_color_darker; +} + +.nav-tabs>li.active>a, +.nav-tabs>li.active>a:focus, +.nav-tabs>li.active>a:hover, +main .nav-tabs>li.active>a, +main .nav-tabs>li.active>a:focus, +main .nav-tabs>li.active>a:hover { + background-color: $nav_bg; + color: $font_color_darker; +} + +.nav > li > a:focus, +.nav > li > a:hover { + background-color: rgba(238, 238, 238, $contentbg_transp); +} + +.modal-content { + background-color: $background_color; +} + +.pagination > .active > a, +.pagination > .active > a:focus, +.pagination > .active > a:hover, +.pagination > .active > span, +.pagination > .active > span:focus, +.pagination > .active > span:hover { + border-color: $link_color; + background-color: $nav_bg; + color: $font_color; +} + +.pagination>li>a:hover, +.pagination>li>span:hover { + background-color: $nav_bg; +} + +#jotOpen { + border: none; + background-color: $background_color; +} + +.close { + color: $font_color; + text-shadow: 0 1px 0 $nav_bg; +} +.close:focus, +.close:hover { + color: $link_color; +} + +.input-group-addon { + color: $font_color; + background-color: $nav_bg; + box-shadow: 0 0 3px #dadada; + -webkit-box-shadow: 0 0 3px #dadada; + border: none; +} + +#topbar-first #nav-notifications-menu li.notif-entry, +.panel-footer, +.panel-group .panel-heading + .panel-collapse > .list-group, +.panel-group .panel-heading + .panel-collapse > .panel-body, +.wall-item-container, +.comment-fake-form { + border-color: $nav_bg; +} + +.wall-item-comment-wrapper { + border: 0; +} + +.badge { + background-color: $nav_bg; +} + +.btn { + box-shadow: 0 0 2px #dadada; + -webkit-box-shadow: 0 0 2px #dadada; + background: none; + color: $font_color_darker; +} +.btn.focus, +.btn:focus, +.btn:hover { + color: $font_color; +} +.btn-default:focus, +.btn-default:hover { + background: $nav_bg; +} +.btn-default.active, +.btn-default:active { + background-color: $nav_bg; + color: $font_color; +} + +button[type=submit]:not(.btn), +input[type=submit], +.btn.btn-primary { + border: 1px solid $link_color; +} + +.label-primary { + background-color: $background_color; + color: $link_color; +} + +.panel-default>.panel-heading { + background: none; + background-color: $nav_bg; + color: $font_color; +} + +.btn-success, +.label-success, +.alert-success, +.panel-success > .panel-heading { + background: rgba(60, 118, 61, 0.4); + color: #dff0d8; +} + +.fc .fc-event, +.btn-info, +.label-info, +.alert-info, +.panel-info > .panel-heading, +.table > tbody > tr.info > td, +.table > tbody > tr.info > th, +.table > tbody > tr > td.info, +.table > tbody > tr > th.info, +.table > tfoot > tr.info > td, +.table > tfoot > tr.info > th, +.table > tfoot > tr > td.info, +.table > tfoot > tr > th.info, +.table > thead > tr.info > td, +.table > thead > tr.info > th, +.table > thead > tr > td.info, +.table > thead > tr > th.info { + background: rgba(49, 112, 143, 0.4); + color: #d9edf7; +} + +.btn-warning, +.label-warning, +.alert-warning, +.panel-warning > .panel-heading { + background: rgba(139, 109, 59, 0.4); + color: #fcf8e3; +} + +.btn-danger, +.label-danger, +.alert-danger, +.panel-danger > .panel-heading { + background: rgba(169, 68, 66, 0.4); + color: #f2dede; +} + +.wall-item-actions a, +.wall-item-actions button { + color: $link_color; +} + +@media (min-width: 768px) { + .wall-item-container .wall-item-links, + .wall-item-container .wall-item-actions button, + .wall-item-container .body-attach > a { + opacity: 0.3; + -webkit-transition: all 0.25s ease-in-out; + -moz-transition: all 0.25s ease-in-out; + -o-transition: all 0.25s ease-in-out; + -ms-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; + color: $font_color; + } + .wall-item-container:hover .wall-item-links, + .wall-item-container:hover .wall-item-actions button, + .wall-item-container:hover .body-attach > a { + opacity: 1; + -webkit-transition: all 0.25s ease-in-out; + -moz-transition: all 0.25s ease-in-out; + -o-transition: all 0.25s ease-in-out; + -ms-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; + color: $link_color; + } + .wall-item-container .wall-item-body .body-attach > a:hover { + opacity: 1; + } +} + +.fc-unthemed td.fc-today { + background-color: $nav_bg; +} + +.nav .open > .btn-link { + background-color: $nav_bg; +} + +.hovercard { + box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5); +} +.hovercard, +.hover-card-footer { + background-color: $nav_bg; +} +.hovercard.top > .arrow:after { + border-top-color: $nav_bg; +} +.hovercard.right > .arrow:after { + border-right-color: $nav_bg; +} +.hovercard.bottom > .arrow:after { + border-bottom-color: $nav_bg; +} +.hovercard.left > .arrow:after { + border-left-color: $nav_bg; +} + +.friendica-tagsinput .tag { + color: inherit; +} + + +code { + color: $font_color; + background-color: rgba(255, 255, 255, .2); +} +pre { + color: $font_color_darker; + background-color: rgba(255, 255, 255, .05); +} + +legend { + color: $font_color; +} + +.table-striped>tbody>tr:nth-of-type(odd), +.table-hover > tbody > tr:hover, +.adminpage .table-hover > tbody > tr:hover + tr.details { + background-color: $nav_bg; +} diff --git a/view/theme/frio/scheme/dark.php b/view/theme/frio/scheme/dark.php new file mode 100644 index 0000000000..507d9552b0 --- /dev/null +++ b/view/theme/frio/scheme/dark.php @@ -0,0 +1,34 @@ + + * Overwrites: nav_bg, nav_icon_color, link_color, background_color, contentbg_transp + * Accented: yes + */ + +require_once 'view/theme/frio/php/PHPColors/Color.php'; + +$accentColor = new Color($scheme_accent); + +$menu_background_hover_color = '#' . $accentColor->darken(20); +switch ($scheme_accent) { + default: + $link_color = '#' . $accentColor->lighten(25); +} +$nav_icon_color = $scheme_accent; +$nav_icon_hover_color = '#' . $accentColor->darken(20); +switch ($scheme_accent) { + case FRIO_SCHEME_ACCENT_GREEN: + case FRIO_SCHEME_ACCENT_RED: + $nav_bg = '#' . $accentColor->darken(25); + $background_color = '#' . $accentColor->darken(27); + break; + default: + $nav_bg = '#' . $accentColor->darken(30); + $background_color = '#' . $accentColor->darken(33); +} + +$contentbg_transp = 4; +$font_color = '#e4e4e4'; +$font_color_darker = '#dcdcdc';