From 584990fe528244c6e93d8d50e9cc60f1de85c939 Mon Sep 17 00:00:00 2001 From: oldkid Date: Sat, 25 Jan 2025 08:04:54 +0100 Subject: [PATCH] - "Save Search" buttons styled - Open Compose Page button styled to match other roundy buttons - Root fonts and close button color. Robot & Helvetica Neue caused layout issues, switched to Open Sans. --- bookface_dark.css | 69 +++++++++++++++++++++++++++++++++++++++++++-- bookface_light.css | 70 ++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 133 insertions(+), 6 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index d8d80e1..a3f790c 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -7,7 +7,7 @@ */ :root { - --global-font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif, Noto Color Emoji; + --global-font-family: 'Open Sans', Arial, sans-serif, Noto Color Emoji; --nav-bg: $nav_bg; --link-color: $link_color; --nav-icon-color: $nav_icon_color; @@ -391,6 +391,52 @@ border-radius: 8px !important; border-radius: 8px !important; margin-bottom: 10px !important; } + /* SEARCH RESULTS */ + #search-save { + background-color: var(--link-color) !important; + color: white !important; + border-radius: 8px !important; + padding: 6px 8px !important; + } + #search-save:hover, + #search-save:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; + } + #search-save .fa-plus::before{ + content: '\f292' !important; + } + #search-save .fa-floppy-o::before { + content: '\f00e' !important; + } + #search-save .fa-floppy-o::before, + #search-save .fa-plus::before { + display: inline-block; + margin-top: 2px; + } + #search-save .fa-floppy-o::after, + #search-save .fa-plus::after{ + content: 'Save Search'; + font-family: 'Open Sans', Arial, sans-serif; + font-size: 15px; + float: left; + margin-right: 10px; + line-height: 32px; + position: relative; + display: block; + top: -2px; + font-weight: 700; + } + + #search-save .fa-floppy-o::after { + content: 'Save Search'; + } + #search-save .fa-plus::before { + display: inline-block; + margin-top: 2px; + } + #search-save .fa-plus::after { + content: 'Follow Tag'; + } /* sidebar widgets */ aside .widget, .nav-container .widget { @@ -556,11 +602,16 @@ aside .widget, width: 36px; font-size: 27px !important; padding: 0 6px !important; - } + background-color: rgba(255,255,255,.2); + } + #jot-modal .modal-header .compose-link:hover, + #jot-modal .modal-header .compose-link:focus { + background-color: rgba(255,255,255,.1); + } .close { height: 36px; width: 36px; - background-color: #0066FF !important; + background-color: var(--link-color) !important; opacity: 1 !important; color: #fff !important; border-radius: 100%; @@ -851,6 +902,9 @@ aside .widget li:hover { #search-box { width: 18% !important; } + #search-save { + width: 140px !important; + } } @media screen and (max-width: 991px){ #search-box { @@ -882,4 +936,13 @@ aside .widget li:hover { left: 10% !important; margin-left: 0!important; } + #search-save { + width: 100px !important; + } + #search-save .fa-plus::after { + content: 'Follow'; + } + #search-save .fa-floppy-o::after { + content: 'Save'; + } } diff --git a/bookface_light.css b/bookface_light.css index 71ab76a..86d44f4 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -8,7 +8,7 @@ :root { - --global-font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif, Noto Color Emoji; + --global-font-family: 'Open Sans', Arial, sans-serif, Noto Color Emoji; --nav-bg: $nav_bg; --link-color: $link_color; --nav-icon-color: $nav_icon_color; @@ -341,6 +341,52 @@ border-radius: 8px !important; margin-bottom: 10px !important; } + /* SEARCH RESULTS */ + #search-save { + background-color: var(--link-color) !important; + color: white !important; + border-radius: 8px !important; + padding: 6px 8px !important; + } + #search-save:hover, + #search-save:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; + } + #search-save .fa-plus::before{ + content: '\f292' !important; + } + #search-save .fa-floppy-o::before { + content: '\f00e' !important; + } + #search-save .fa-floppy-o::before, + #search-save .fa-plus::before { + display: inline-block; + margin-top: 2px; + } + #search-save .fa-floppy-o::after, + #search-save .fa-plus::after{ + content: 'Save Search'; + font-family: 'Open Sans', Arial, sans-serif; + font-size: 15px; + float: left; + margin-right: 10px; + line-height: 32px; + position: relative; + display: block; + top: -2px; + font-weight: 700; + } + + #search-save .fa-floppy-o::after { + content: 'Save Search'; + } + #search-save .fa-plus::before { + display: inline-block; + margin-top: 2px; + } + #search-save .fa-plus::after { + content: 'Follow Tag'; + } /* sidebar widgets */ aside .widget, .nav-container .widget { @@ -487,15 +533,21 @@ /* Compose and Reply */ #jot-modal .modal-header .compose-link { border-radius: 100% !important; + border-radius: 100% !important; height: 36px; width: 36px; font-size: 27px !important; padding: 0 6px !important; - } + background-color: rgba(0,0,0,.1); + } + #jot-modal .modal-header .compose-link:hover, + #jot-modal .modal-header .compose-link:focus { + background-color: rgba(0,0,0,.2); + } .close { height: 36px; width: 36px; - background-color: #0066FF !important; + background-color: var(--link-color) !important; opacity: 1 !important; color: #fff !important; border-radius: 100%; @@ -795,6 +847,9 @@ #search-box { width: 18% !important; } + #search-save { + width: 140px !important; + } } @media screen and (max-width: 991px){ #search-box { @@ -826,4 +881,13 @@ left: 10% !important; margin-left: 0!important; } + #search-save { + width: 100px !important; + } + #search-save .fa-plus::after { + content: 'Follow'; + } + #search-save .fa-floppy-o::after { + content: 'Save'; + } }