[frio] Add dynamic CSS property before introducing accented themes

- 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

View file

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

View file

@ -702,7 +702,7 @@ function scrollToItem(elementId) {
scrollTop: itemPos
}, 400).promise().done( function() {
// 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);
});
}

View file

@ -123,7 +123,7 @@ if (!isset($nav_icon_hover_color)) {
if ($nihc->isLight()) {
$nav_icon_hover_color = '#' . $nihc->darken(10);
} else {
$nav_icon_hover_color = '#' . $nihc->lighten(10);
$nav_icon_hover_color = '#' . $nihc->lighten(20);
}
}
if (!isset($link_hover_color)) {
@ -184,7 +184,9 @@ $options = [
'$background_size_img' => $background_size_img,
'$background_repeat' => $background_repeat,
'$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');