- "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.
This commit is contained in:
oldkid 2025-01-25 08:04:54 +01:00
parent e4b27fddea
commit 584990fe52
2 changed files with 133 additions and 6 deletions

View file

@ -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';
}
}

View file

@ -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';
}
}