Tupambae_Org/friendica_2021-01
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

[frio] Add dynamic CSS property before introducing accented themes

Browse source 
- Introduce variables for font colors
- Set content background transparency on several background colors
- Change radio/checkbox colors depending on the link color
- Prevent post highlighting to end up on static white
This commit is contained in:
Hypolite Petovan 2020-08-15 20:25:33 -04:00
parent 43df577209
commit d5975ff0bc
3 changed files with 74 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
view/theme/frio/css/style.css
View file

@ -10,7 +10,7 @@ body {
background-size: $background_size_img; background-size: $background_size_img;
background-repeat: $background_repeat; background-repeat: $background_repeat;
background-attachment: fixed; background-attachment: fixed;
color: #777; color: $font_color;
font-family: 'Open Sans',sans-serif; font-family: 'Open Sans',sans-serif;
} }
body.minimal { body.minimal {
@ -181,7 +181,7 @@ blockquote {
.btn-default { .btn-default {
background: #ededed; background: #ededed;
color: #7a7a7a; color: $font_color;
} }
.btn-sm { .btn-sm {
padding: 4px 8px; padding: 4px 8px;
@ -416,6 +416,11 @@ nav.navbar .nav > li > button
{ {
color: $nav_icon_color; color: $nav_icon_color;
} }
#topbar-first .nav > .open > a,
#topbar-first .nav > .open > button
{
background-color: $nav_bg;
}
#topbar-first .nav > li > a:hover, #topbar-first .nav > li > a:hover,
#topbar-first .nav > li > a:focus, #topbar-first .nav > li > a:focus,
#topbar-first .nav > li > button:not(#main-menu):hover, #topbar-first .nav > li > button:not(#main-menu):hover,
@ -570,11 +575,11 @@ nav.navbar .nav > li > button:focus
max-height: 400px; max-height: 400px;
} }
#topbar-first #nav-notifications-menu a { #topbar-first #nav-notifications-menu a {
color: #555; color: $font_color_darker;
padding: 0; padding: 0;
} }
#topbar-first #nav-notifications-menu li.notif-entry { #topbar-first #nav-notifications-menu li.notif-entry {
color: #555; color: $font_color_darker;
padding: 10px; padding: 10px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
position: relative; position: relative;
@ -800,7 +805,7 @@ nav.navbar .nav > li > button:focus
background: $menu_background_hover_color; background: $menu_background_hover_color;
} }
#photo-edit-link-wrap { #photo-edit-link-wrap {
color: #555; color: $font_color_darker;
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -817,7 +822,7 @@ nav.navbar .nav > li > button:focus
aside .widget, aside .widget,
.nav-container .widget { .nav-container .widget {
border: none; border: none;
color: #777; color: $font_color;
background-color: rgba(255, 255, 255, $contentbg_transp); background-color: rgba(255, 255, 255, $contentbg_transp);
box-shadow: 0 0 3px #dadada; box-shadow: 0 0 3px #dadada;
-webkit-box-shadow: 0 0 3px #dadada; -webkit-box-shadow: 0 0 3px #dadada;
@ -858,14 +863,14 @@ aside .widget li:hover,
aside .widget li.selected, aside .widget li.selected,
.nav-container .widget li:hover { .nav-container .widget li:hover {
z-index: 2; z-index: 2;
color: #555; color: $font_color_darker;
background-color: rgba(247, 247, 247, $contentbg_transp); background-color: rgba(247, 247, 247, $contentbg_transp);
border-left: 3px solid $link_color !important; border-left: 3px solid $link_color !important;
padding-left: 17px; padding-left: 17px;
} }
aside .widget li a, aside .widget li a,
aside .widget li a:hover { aside .widget li a:hover {
color: #555; color: $font_color_darker;
} }
/* forumlist widget */ /* forumlist widget */
@ -1039,12 +1044,12 @@ aside .vcard #wallmessage-link {
font-weight: bold; font-weight: bold;
} }
#nav-short-info .contact-wrapper .media-heading a { #nav-short-info .contact-wrapper .media-heading a {
color: #555; color: $font_color_darker;
font-size: 14px !important; font-size: 14px !important;
} }
#vcard-short-desc > .vcard-short-addr, #vcard-short-desc > .vcard-short-addr,
#nav-short-info .contact-wrapper #contact-entry-url-network { #nav-short-info .contact-wrapper #contact-entry-url-network {
color: #777; color: $font_color;
font-size: 12px; font-size: 12px;
} }
.network-content-wrapper > #viewcontact_wrapper-network, .network-content-wrapper > #viewcontact_wrapper-network,
@ -1080,16 +1085,16 @@ div#sidebar-group-list {
} }
.group-edit-tool { .group-edit-tool {
color: #555; color: $font_color_darker;
} }
.faded-icon { .faded-icon {
color: #555; color: $font_color_darker;
opacity: 0.3; opacity: 0.3;
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
} }
.faded-icon:hover { .faded-icon:hover {
color: #555; color: $font_color_darker;
opacity: 1; opacity: 1;
} }
.icon-padding { .icon-padding {
@ -1180,7 +1185,7 @@ section #jotOpen {
} }
#jot-modal .modal-header a, #jot-modal .modal-header .btn-link, #jot-modal .modal-header a, #jot-modal .modal-header .btn-link,
#profile-jot-submit-wrapper a, #profile-jot-submit-wrapper .btn-link { #profile-jot-submit-wrapper a, #profile-jot-submit-wrapper .btn-link {
color: #555; color: $font_color_darker;
text-transform: capitalize; text-transform: capitalize;
} }
#jot-modal .modal-header { #jot-modal .modal-header {
@ -1214,7 +1219,7 @@ section #jotOpen {
box-shadow: none; box-shadow: none;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
background: #fff; background: #fff;
color: #555; color: $font_color_darker;
} }
textarea#profile-jot-text:focus + #preview_profile-jot-text, textarea#profile-jot-text:focus + #preview_profile-jot-text,
textarea.comment-edit-text:focus + .comment-edit-form .preview { textarea.comment-edit-text:focus + .comment-edit-form .preview {
@ -1296,7 +1301,7 @@ textarea.comment-edit-text:focus + .comment-edit-form .preview {
padding: 0; padding: 0;
} }
.fbrowser .breadcrumb > li:last-of-type a{ .fbrowser .breadcrumb > li:last-of-type a{
color: #777; color: $font_color;
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;
} }
@ -1326,14 +1331,14 @@ textarea.comment-edit-text:focus + .comment-edit-form .preview {
} }
.fbrowser .folders li:hover { .fbrowser .folders li:hover {
z-index: 2; z-index: 2;
color: #555; color: $font_color_darker;
background-color: rgba(247, 247, 247, $contentbg_transp); background-color: rgba(247, 247, 247, $contentbg_transp);
border-left: 3px solid $link_color; border-left: 3px solid $link_color;
padding-left: 17px; padding-left: 17px;
} }
.fbrowser .folders li a, .fbrowser .folders li a,
.fbrowser .folders li a:hover { .fbrowser .folders li a:hover {
color: #555; color: $font_color_darker;
font-size: 13px; font-size: 13px;
} }
.fbrowser .folders + .list { .fbrowser .folders + .list {
@ -1400,7 +1405,7 @@ aside .panel-body {
.desktop-view .wall-item-container .fakelink, .desktop-view .wall-item-container .fakelink,
.desktop-view .toplevel_item .fakelink, .desktop-view .toplevel_item .fakelink,
.desktop-view .toplevel_item .wall-item-container .wall-item-responses a { .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
color: #555; color: $font_color;
-webkit-transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out;
@ -1514,7 +1519,7 @@ aside .panel-body {
.media .media-body h4.media-heading { .media .media-body h4.media-heading {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #555; color: $font_color_darker;
} }
.media .media-body .addional-info a, .media .media-body h5.media-heading > a { .media .media-body .addional-info a, .media .media-body h5.media-heading > a {
display: block; display: block;
@ -1597,11 +1602,11 @@ aside .panel-body {
border-radius: 3px; border-radius: 3px;
} }
.wall-item-body .body-attach > a { .wall-item-body .body-attach > a {
color: #555; color: $font_color_darker;
display: inline-block; display: inline-block;
} }
.wall-item-body .body-attach > a div { .wall-item-body .body-attach > a div {
color: #555; color: $font_color_darker;
width: 20px; width: 20px;
} }
@ -1691,7 +1696,7 @@ code > .hl-main {
} }
.wall-item-tags a { .wall-item-tags a {
color: #555; color: $font_color_darker;
} }
.wall-item-tags a:hover { .wall-item-tags a:hover {
@ -1714,7 +1719,7 @@ code > .hl-main {
} }
.wall-item-actions a, .wall-item-actions button { .wall-item-actions a, .wall-item-actions button {
font-size: 13px; font-size: 13px;
color: #555; color: $font_color_darker;
} }
.wall-item-actions .active { .wall-item-actions .active {
font-weight: bold; font-weight: bold;
@ -1737,7 +1742,7 @@ code > .hl-main {
text-transform: capitalize; text-transform: capitalize;
} }
.wall-item-actions button:hover { .wall-item-actions button:hover {
color: #555; color: $font_color_darker;
text-decoration: underline; text-decoration: underline;
} }
.wall-item-actions .separator { .wall-item-actions .separator {
@ -1867,7 +1872,7 @@ nav .acpopup {
/** @todo: we schould consider the possebility to overwrite bootstrap dropdowns /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
at the beginning of this file to get rid of the !important */ at the beginning of this file to get rid of the !important */
.textcomplete-item > a { .textcomplete-item > a {
color: #555 !important; color: $font_color_darker !important;
padding: 5px 20px !important; padding: 5px 20px !important;
} }
.textcomplete-item.active > a { .textcomplete-item.active > a {
@ -1987,7 +1992,7 @@ ul.dropdown-menu li:hover {
.media .location, .media .location,
.media .location a { .media .location a {
font-size: 11px; font-size: 11px;
color: #bebebe; color: $font_color_darker;
} }
.media-list > li { .media-list > li {
padding: 10px; padding: 10px;
@ -2012,11 +2017,26 @@ ul.dropdown-menu li:hover {
box-shadow: none; box-shadow: none;
} }
.radio label::before,
.checkbox label::before {
background-color: $background_color;
}
.radio label::after {
background-color: $link_color;
}
.checkbox label::after {
color: $link_color;
}
.checkbox input[type="checkbox"]:focus + label::before, .checkbox input[type="checkbox"]:focus + label::before,
.radio input[type="radio"]:focus + label::before { .radio input[type="radio"]:focus + label::before {
outline-color: $link_hover_color; outline-color: $link_hover_color;
} }
.help-block {
color: $font_color_darker;
}
input[type=range].form-control { input[type=range].form-control {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
@ -2067,7 +2087,7 @@ input[type=range].form-control {
background-color: rgba(255,255,255,$contentbg_transp); background-color: rgba(255,255,255,$contentbg_transp);
border-radius: 4px; border-radius: 4px;
position: relative; position: relative;
color: #555; color: $font_color_darker;
box-shadow: 0 0 3px #dadada; box-shadow: 0 0 3px #dadada;
-webkit-box-shadow: 0 0 3px #dadada; -webkit-box-shadow: 0 0 3px #dadada;
-moz-box-shadow: 0 0 3px #dadada; -moz-box-shadow: 0 0 3px #dadada;
@ -2095,7 +2115,7 @@ section > .generic-page-wrapper, .videos-content-wrapper,
background-color: rgba(255,255,255,$contentbg_transp); background-color: rgba(255,255,255,$contentbg_transp);
border-radius: 4px; border-radius: 4px;
position: relative; position: relative;
color: #555; color: $font_color_darker;
box-shadow: 0 0 3px #dadada; box-shadow: 0 0 3px #dadada;
-webkit-box-shadow: 0 0 3px #dadada; -webkit-box-shadow: 0 0 3px #dadada;
-moz-box-shadow: 0 0 3px #dadada; -moz-box-shadow: 0 0 3px #dadada;
@ -2178,7 +2198,7 @@ ul.viewcontact_wrapper > li {
} }
.contact-entry-desc { .contact-entry-desc {
color: #555; color: $font_color_darker;
} }
.contact-entry-checkbox { .contact-entry-checkbox {
margin-top: -20px; margin-top: -20px;
@ -2195,7 +2215,7 @@ ul.viewcontact_wrapper > li {
.contact-wrapper .contact-action-link:hover, .contact-wrapper .contact-action-link:hover,
.textcomplete-item .contact-wrapper .contact-action-link { .textcomplete-item .contact-wrapper .contact-action-link {
padding: 0 5px; padding: 0 5px;
color: #555; color: $font_color_darker;
border: 0; border: 0;
} }
.contact-wrapper .contact-action-link { .contact-wrapper .contact-action-link {
@ -2228,7 +2248,7 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
} }
#contact-edit-status-wrapper { #contact-edit-status-wrapper {
border: none; border: none;
background-color: #E1F5FE; background-color: rgba(225, 245, 254, $contentbg_transp);
margin: 15px -15px; margin: 15px -15px;
} }
#contact-edit-settings { #contact-edit-settings {
@ -2425,7 +2445,7 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
padding-top: 15px; padding-top: 15px;
} }
#event-nav a { #event-nav a {
color: #555; color: $font_color_darker;
} }
#event-edit-form-wrapper #event-edit-time { #event-edit-form-wrapper #event-edit-time {
padding: 10px 0; padding: 10px 0;
@ -2482,7 +2502,7 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
width: 100%; width: 100%;
padding: 0 5px 0 15px; padding: 0 5px 0 15px;
box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset; box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
color: #777; color: $font_color;
position: relative; position: relative;
} }
.event-card .event-card-content .event-map-btn { .event-card .event-card-content .event-map-btn {
@ -2493,7 +2513,7 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
} }
.event-card .event-card-title { .event-card .event-card-title {
font-size: 14px; font-size: 14px;
color: #555; color: $font_color_darker;
line-height: 15px; line-height: 15px;
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
@ -2573,7 +2593,7 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
position: relative; position: relative;
} }
.photo-comment-wrapper .wall-item-content { .photo-comment-wrapper .wall-item-content {
color: #555; color: $font_color_darker;
font-size: 13px; font-size: 13px;
} }
.photo-comment-wrapper .comment-wwedit-wrapper, .photo-comment-wrapper .comment-wwedit-wrapper,
@ -2640,7 +2660,7 @@ details.profile-jot-net[open] summary:before {
/* Emulates Bootstrap display */ /* Emulates Bootstrap display */
.settings-block { .settings-block {
margin: 0 0 5px; margin: 0 0 5px;
background-color: rgba(255,255,255,0.95); background-color: rgba(255, 255, 255, $contentbg_transp);
border-radius: 4px; border-radius: 4px;
padding: 10px 15px; padding: 10px 15px;
box-shadow: 0 0 3px #dadada; box-shadow: 0 0 3px #dadada;
@ -2725,7 +2745,7 @@ ul.notif-network-list > li {
.intro-wrapper button.intro-action-link:hover { .intro-wrapper button.intro-action-link:hover {
padding-right: 5px; padding-right: 5px;
padding-left: 5px; padding-left: 5px;
color: #555; color: $font_color_darker;
} }
ul li:hover .intro-wrapper button.intro-action-link { ul li:hover .intro-wrapper button.intro-action-link {
opacity: 0.8; opacity: 0.8;
@ -2772,7 +2792,7 @@ ul.notif-network-list li.unseen {
.notif-item .notif-desc-wrapper a { .notif-item .notif-desc-wrapper a {
height: 100%; height: 100%;
display: block; display: block;
color: #555; color: $font_color_darker;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
} }
@ -2793,7 +2813,7 @@ little modifications to emulate a standard page template */
background-color: rgba(255,255,255,$contentbg_transp); background-color: rgba(255,255,255,$contentbg_transp);
border-radius: 4px; border-radius: 4px;
position: relative; position: relative;
color: #555; color: $font_color_darker;
box-shadow: 0 0 3px #dadada; box-shadow: 0 0 3px #dadada;
-webkit-box-shadow: 0 0 3px #dadada; -webkit-box-shadow: 0 0 3px #dadada;
-moz-box-shadow: 0 0 3px #dadada; -moz-box-shadow: 0 0 3px #dadada;
@ -2867,7 +2887,7 @@ section.help-content-wrapper li {
margin-top: 2px; margin-top: 2px;
border: 1px solid #cccccc; border: 1px solid #cccccc;
border-radius: 3px; border-radius: 3px;
background-color: #fff; background-color: $background_color;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
@ -2886,14 +2906,14 @@ section.help-content-wrapper li {
padding-left: 3px; padding-left: 3px;
padding-top: 1px; padding-top: 1px;
font-size: 11px; font-size: 11px;
color: #555555; color: $link_color;
} }
#adminpage .addon .desc { #adminpage .addon .desc {
padding-left: 10px; padding-left: 10px;
} }
.adminpage .admin-settings-action-link, .adminpage .admin-settings-action-link,
.adminpage .admin-settings-action-link:hover { .adminpage .admin-settings-action-link:hover {
color: #555; color: $font_color_darker;
} }
.adminpage .admin-settings-action-link:hover { .adminpage .admin-settings-action-link:hover {
opacity: 1; opacity: 1;
@ -3066,6 +3086,11 @@ body .tread-wrapper .hovercard:hover .hover-card-content a {
display: none; display: none;
} }
.pagination li > a,
.pager li > a {
background-color: rgba(255, 255, 255, $contentbg_transp);
}
/* /*
* some temporary workarounds until this will solved * some temporary workarounds until this will solved
* elsewhere (e.g. new templates) * elsewhere (e.g. new templates)
@ -3256,7 +3281,7 @@ section .profile-match-wrapper {
.fc .fc-event { .fc .fc-event {
background-color: #E3F2FD; background-color: #E3F2FD;
border: 1px solid #BBDEFB; border: 1px solid #BBDEFB;
color: #555; color: $font_color_darker;
} }
.fc .fc-month-view .fc-time, .fc .fc-month-view .fc-time,
.fc .fc-listMonth-view .fc-list-item-time, .fc .fc-listMonth-view .fc-list-item-time,

2
view/theme/frio/js/theme.js
View file

@ -702,7 +702,7 @@ function scrollToItem(elementId) {
scrollTop: itemPos scrollTop: itemPos
}, 400).promise().done( function() { }, 400).promise().done( function() {
// Highlight post/commenent with ID (GUID) // Highlight post/commenent with ID (GUID)
$el.animate(colWhite, 1000).animate(colShiny).animate(colWhite, 600); $el.animate(colWhite, 1000).animate(colShiny).animate({backgroundColor: 'transparent'}, 600);
}); });
} }

6
view/theme/frio/style.php
View file

@ -123,7 +123,7 @@ if (!isset($nav_icon_hover_color)) {
if ($nihc->isLight()) { if ($nihc->isLight()) {
$nav_icon_hover_color = '#' . $nihc->darken(10); $nav_icon_hover_color = '#' . $nihc->darken(10);
} else { } else {
$nav_icon_hover_color = '#' . $nihc->lighten(10); $nav_icon_hover_color = '#' . $nihc->lighten(20);
} }
} }
if (!isset($link_hover_color)) { if (!isset($link_hover_color)) {
@ -184,7 +184,9 @@ $options = [
'$background_size_img' => $background_size_img, '$background_size_img' => $background_size_img,
'$background_repeat' => $background_repeat, '$background_repeat' => $background_repeat,
'$login_bg_image' => $login_bg_image, '$login_bg_image' => $login_bg_image,
'$login_bg_color' => $login_bg_color '$login_bg_color' => $login_bg_color,
'$font_color_darker' => $font_color_darker ?? '#555',
'$font_color' => $font_color ?? '#777',
]; ];
$css_tpl = file_get_contents('view/theme/frio/css/style.css'); $css_tpl = file_get_contents('view/theme/frio/css/style.css');