[frio] Add dark accented scheme

This commit is contained in:
Hypolite Petovan 2020-08-19 22:58:47 -04:00
parent e4a1ace3ad
commit 907222da53
3 changed files with 355 additions and 0 deletions

View file

@ -140,6 +140,7 @@ function frio_form($arr)
$schemes = [
'light' => DI::l10n()->t('Light (Accented)'),
'dark' => DI::l10n()->t('Dark (Accented)'),
];
$legacy_schemes = [];

View file

@ -0,0 +1,320 @@
/*
Licence : AGPL
Created on : 11.08.2020
Author : Hypolite Petovan <hypolite@friendica.mrpetovan.com>
*/
#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;
}

View file

@ -0,0 +1,34 @@
<?php
/*
* Name: Dark
* Licence: AGPL
* Author: Hypolite Petovan <hypolite@friendica.mrpetovan.com>
* 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';