[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

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index d2fa94e00ce1fcce8056f08755cc569a74f500b2..3f87f01703e2b11d8ca5c60eea41f8b73efb6fa9 100644 (file)
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -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,

diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js
index be814f08393fee6afb5b1b4c9ffa8bcaac898d0c..b7f222c0a25e6d3c21a077f022b0ee44e002d038 100644 (file)
--- a/view/theme/frio/js/theme.js
+++ b/view/theme/frio/js/theme.js
@@ -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);
        });
 }
 

diff --git a/view/theme/frio/style.php b/view/theme/frio/style.php
index 0309daf94a38a0ecfba5edeb41a378d7137cf44b..dadd04580554cb43d6a9f7f4d4bea71f3a186b49 100644 (file)
--- a/view/theme/frio/style.php
+++ b/view/theme/frio/style.php
@@ -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');