Fixed HR rule on posts [Issue #13 (closed)]
Fixed notifcation profile pics so they are round [Issue #14 (closed)] Fixed Post and Comment background colors [Issue #15 (closed)] Made Post and Comment background colors configurable with CSS variables. Fixed Post-in-Groups/Mention button alignment [Issue #16] Fixed double underline on Compose active tab [Issue #17 (closed)]
This commit is contained in:
parent
27e4f629c5
commit
1d638dde42
4 changed files with 74 additions and 41 deletions
|
|
@ -1,6 +1,6 @@
|
|||
BOOKFACE FOR FRIENDICA
|
||||
======================
|
||||
Version 1.5
|
||||
Version 1.5.5
|
||||
|
||||
**Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover.
|
||||
|
||||
|
|
@ -260,6 +260,13 @@ And then use it in your stylesheet like so:
|
|||
I figured out how the "Frio" theme worked by looking at the code. I may not be 100% correct about it since I did not create the theme. If someone knows more and I'm wrong about any of this please correct this document at https://gitlab.com/randompenguin/bookface
|
||||
|
||||
## CHANGELOG:
|
||||
* Fixed HR rule on posts [Issue #13]
|
||||
* Fixed notifcation profile pics so they are round [Issue #14]
|
||||
* Fixed Post and Comment background colors [Issue #15]
|
||||
* Made Post and Comment background colors configurable with CSS variables.
|
||||
* Fixed Post-in-Groups/Mention button alignment [Issue #16]
|
||||
* Fixed double underline on Compose active tab [Issue #17]
|
||||
|
||||
1.5 (27 Feb 2025)
|
||||
* fixed browser "Share to.." button display and sizing [Issue #3]
|
||||
* fixed wrong sized menu items in action button drop-downs on mobile [related to Issue #3]
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
Name : Bookface Auto Color Mode
|
||||
Version : 1.5
|
||||
Version : 1.5.5
|
||||
Licence : AGPL
|
||||
Created on : 27 Feb 2025
|
||||
Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml
|
||||
|
|
@ -12,6 +12,8 @@
|
|||
--link-color: $link_color;
|
||||
--nav-icon-color: $nav_icon_color;
|
||||
--background-color: $background_color;
|
||||
--content-bg: var(--nav-bg);
|
||||
--comment-bg: var(--background-color);
|
||||
--font-color: $font_color;
|
||||
--font-color-darker: $font_color_darker;
|
||||
--menu-background-hover-color: color-mix(in oklab, var(--link-color) 15%, white);
|
||||
|
|
@ -104,6 +106,10 @@
|
|||
content: '\f0f3';
|
||||
color: var(--link-color);
|
||||
}
|
||||
.notif-item img.notif-image,
|
||||
.intro-photo-wrapper img.intro-photo {
|
||||
border-radius: 100%;
|
||||
}
|
||||
ul.nav-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -444,7 +450,7 @@
|
|||
.tos-content-wrapper,
|
||||
.fsuggest-content-wrapper,
|
||||
.shared-wrapper {
|
||||
background-color: var(--nav-bg) !important;
|
||||
background-color: var(--content-bg) !important;
|
||||
background-image: none;
|
||||
/* frio light border-color */
|
||||
}
|
||||
|
|
@ -655,7 +661,7 @@
|
|||
}
|
||||
/* POSTS */
|
||||
.tread-wrapper {
|
||||
/* frio background-color */
|
||||
background-color: var(--content-bg) !important;
|
||||
box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
|
@ -663,7 +669,7 @@
|
|||
border-top: none;
|
||||
}
|
||||
.wall-item-container .media {
|
||||
background-color: #ffffff !important;
|
||||
background-color: var(--content-bg) !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
.wall-item-container iframe {
|
||||
|
|
@ -716,7 +722,7 @@
|
|||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
.media hr, aside hr, section hr {
|
||||
.media hr:first-of-type, aside hr, section hr {
|
||||
border-color: var(--nav-bg);
|
||||
}
|
||||
/* keep mentions and tags from spilling out */
|
||||
|
|
@ -966,7 +972,6 @@
|
|||
.jot-nav .active a {
|
||||
background-color: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border-bottom: 3px solid var(--link-color) !important;
|
||||
}
|
||||
.jot-nav .active a:hover, .jot-nav .active a:focus {
|
||||
background-color: transparent !important;
|
||||
|
|
@ -1087,7 +1092,7 @@
|
|||
}
|
||||
.comment-fake-form textarea {
|
||||
border-radius: 50px !important;
|
||||
/* frio background-color */
|
||||
background-color: var(--comment-bg) !important;
|
||||
/* frio -webkit-box-shadow */
|
||||
/* frio box-shadow */
|
||||
}
|
||||
|
|
@ -1103,7 +1108,7 @@
|
|||
}
|
||||
.comment .media-body {
|
||||
padding: 10px;
|
||||
background-color: var(--background-color);
|
||||
background-color: var(--comment-bg);
|
||||
border-radius: 20px;
|
||||
}
|
||||
.wall-item-actions-row .wall-item-emoji {
|
||||
|
|
@ -1750,8 +1755,11 @@ a.tag.label,
|
|||
content: '';
|
||||
margin: 0;
|
||||
}
|
||||
#mention-link {
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
#mention-link span:last-of-type {
|
||||
margin-right: 42px;
|
||||
display: none;
|
||||
}
|
||||
.offcanvas-right-overlay,
|
||||
aside::before {
|
||||
|
|
@ -2170,7 +2178,6 @@ a.tag.label,
|
|||
#mention-link span:first-of-type {
|
||||
float: none;
|
||||
position: relative;
|
||||
left: -5px;
|
||||
top: 2px;
|
||||
}
|
||||
#search-save .fa-plus::after,
|
||||
|
|
@ -2679,6 +2686,10 @@ nav.navbar .nav > li > button:focus {
|
|||
content: '\f0f3';
|
||||
color: var(--link-color);
|
||||
}
|
||||
.notif-item img.notif-image,
|
||||
.intro-photo-wrapper img.intro-photo {
|
||||
border-radius: 100%;
|
||||
}
|
||||
ul.nav-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -3029,7 +3040,7 @@ header #banner {
|
|||
.tos-content-wrapper,
|
||||
.fsuggest-content-wrapper,
|
||||
.shared-wrapper {
|
||||
background-color: var(--nav-bg) !important;
|
||||
background-color: var(--content-bg) !important;
|
||||
background-image: none;
|
||||
border-color: #333;
|
||||
}
|
||||
|
|
@ -3240,7 +3251,7 @@ aside .widget,
|
|||
}
|
||||
/* POSTS */
|
||||
.tread-wrapper {
|
||||
background-color: rgb(37, 39, 40) !important;
|
||||
background-color: var(--content-bg) !important;
|
||||
box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
|
@ -3248,7 +3259,7 @@ aside .widget,
|
|||
border-top: none;
|
||||
}
|
||||
.wall-item-container .media {
|
||||
background-color: rgb(37, 39, 40) !important;
|
||||
background-color: var(--content-bg) !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
.wall-item-container iframe {
|
||||
|
|
@ -3337,7 +3348,7 @@ p.wall-item-announce,
|
|||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
.media hr, aside hr, section hr {
|
||||
.media hr:first-of-type, aside hr, section hr {
|
||||
border-color: var(--nav-bg);
|
||||
}
|
||||
/* keep mentions and tags from spilling out */
|
||||
|
|
@ -3593,7 +3604,6 @@ p.wall-item-announce,
|
|||
.jot-nav .active a {
|
||||
background-color: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border-bottom: 3px solid var(--link-color) !important;
|
||||
}
|
||||
.jot-nav .active a:hover, .jot-nav .active a:focus {
|
||||
background-color: transparent !important;
|
||||
|
|
@ -3731,7 +3741,7 @@ aside .widget li:hover {
|
|||
}
|
||||
.comment-fake-form textarea {
|
||||
border-radius: 50px !important;
|
||||
background-color: rgb(51, 51, 52) !important;
|
||||
background-color: var(--comment-bg) !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
|
@ -3747,7 +3757,7 @@ aside .widget li:hover {
|
|||
}
|
||||
.comment .media-body {
|
||||
padding: 10px;
|
||||
background-color: var(--background-color);
|
||||
background-color: var(--comment-bg);
|
||||
border-radius: 20px;
|
||||
}
|
||||
.wall-item-actions-row .wall-item-emoji {
|
||||
|
|
@ -4388,8 +4398,11 @@ a.tag.label,
|
|||
content: '';
|
||||
margin: 0;
|
||||
}
|
||||
#mention-link {
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
#mention-link span:last-of-type {
|
||||
margin-right: 42px;
|
||||
display: none;
|
||||
}
|
||||
aside {
|
||||
background-color: var(--background-color);
|
||||
|
|
@ -4811,7 +4824,6 @@ a.tag.label,
|
|||
#mention-link span:first-of-type {
|
||||
float: none;
|
||||
position: relative;
|
||||
left: -5px;
|
||||
top: 2px;
|
||||
}
|
||||
#search-save .fa-plus::after,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
Name : Bookface Dark
|
||||
Version : 1.5
|
||||
Version : 1.5.5
|
||||
Licence : AGPL
|
||||
Created on : 27 Feb 2025
|
||||
Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml
|
||||
|
|
@ -12,6 +12,8 @@
|
|||
--link-color: $link_color;
|
||||
--nav-icon-color: $nav_icon_color;
|
||||
--background-color: $background_color;
|
||||
--content-bg: var(--nav-bg);
|
||||
--comment-bg: var(--background-color);
|
||||
--font-color: $font_color;
|
||||
--font-color-darker: $font_color_darker;
|
||||
--menu-background-hover-color: $menu_background_hover_color;
|
||||
|
|
@ -104,6 +106,10 @@ nav.navbar .nav > li > button:focus {
|
|||
content: '\f0f3';
|
||||
color: var(--link-color);
|
||||
}
|
||||
.notif-item img.notif-image,
|
||||
.intro-photo-wrapper img.intro-photo {
|
||||
border-radius: 100%;
|
||||
}
|
||||
ul.nav-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -443,7 +449,7 @@ header #banner {
|
|||
.tos-content-wrapper,
|
||||
.fsuggest-content-wrapper,
|
||||
.shared-wrapper {
|
||||
background-color: var(--nav-bg) !important;
|
||||
background-color: var(--content-bg) !important;
|
||||
background-image: none;
|
||||
border-color: #333;
|
||||
}
|
||||
|
|
@ -654,7 +660,7 @@ aside .widget,
|
|||
}
|
||||
/* POSTS */
|
||||
.tread-wrapper {
|
||||
background-color: rgb(37, 39, 40) !important;
|
||||
background-color: var(--content-bg) !important;
|
||||
box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
|
@ -662,7 +668,7 @@ aside .widget,
|
|||
border-top: none;
|
||||
}
|
||||
.wall-item-container .media {
|
||||
background-color: rgb(37, 39, 40) !important;
|
||||
background-color: var(--content-bg) !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
.wall-item-container iframe {
|
||||
|
|
@ -715,7 +721,7 @@ aside .widget,
|
|||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
.media hr, aside hr, section hr {
|
||||
.media hr:first-of-type, aside hr, section hr {
|
||||
border-color: var(--nav-bg);
|
||||
}
|
||||
/* keep mentions and tags from spilling out */
|
||||
|
|
@ -965,7 +971,6 @@ aside .widget,
|
|||
.jot-nav .active a {
|
||||
background-color: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border-bottom: 3px solid var(--link-color) !important;
|
||||
}
|
||||
.jot-nav .active a:hover, .jot-nav .active a:focus {
|
||||
background-color: transparent !important;
|
||||
|
|
@ -1083,7 +1088,7 @@ aside .widget li:hover {
|
|||
}
|
||||
.comment-fake-form textarea {
|
||||
border-radius: 50px !important;
|
||||
background-color: rgb(51, 51, 52) !important;
|
||||
background-color: var(--comment-bg) !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
|
@ -1099,7 +1104,7 @@ aside .widget li:hover {
|
|||
}
|
||||
.comment .media-body {
|
||||
padding: 10px;
|
||||
background-color: var(--background-color);
|
||||
background-color: var(--comment-bg);
|
||||
border-radius: 20px;
|
||||
}
|
||||
.wall-item-actions-row .wall-item-emoji {
|
||||
|
|
@ -1746,8 +1751,11 @@ a.tag.label,
|
|||
content: '';
|
||||
margin: 0;
|
||||
}
|
||||
#mention-link {
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
#mention-link span:last-of-type {
|
||||
margin-right: 42px;
|
||||
display: none;
|
||||
}
|
||||
.offcanvas-right-overlay,
|
||||
aside::before {
|
||||
|
|
@ -2166,7 +2174,6 @@ a.tag.label,
|
|||
#mention-link span:first-of-type {
|
||||
float: none;
|
||||
position: relative;
|
||||
left: -5px;
|
||||
top: 2px;
|
||||
}
|
||||
#search-save .fa-plus::after,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
Name : Bookface Light
|
||||
Version : 1.5
|
||||
Version : 1.5.5
|
||||
Licence : AGPL
|
||||
Created on : 27 Feb 2025
|
||||
Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml
|
||||
|
|
@ -12,6 +12,8 @@
|
|||
--link-color: $link_color;
|
||||
--nav-icon-color: $nav_icon_color;
|
||||
--background-color: $background_color;
|
||||
--content-bg: var(--nav-bg);
|
||||
--comment-bg: var(--background-color);
|
||||
--font-color: $font_color;
|
||||
--font-color-darker: $font_color_darker;
|
||||
--menu-background-hover-color: $menu_background_hover_color;
|
||||
|
|
@ -104,6 +106,10 @@
|
|||
content: '\f0f3';
|
||||
color: var(--link-color);
|
||||
}
|
||||
.notif-item img.notif-image,
|
||||
.intro-photo-wrapper img.intro-photo {
|
||||
border-radius: 100%;
|
||||
}
|
||||
ul.nav-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -443,7 +449,7 @@ ul.nav-tabs {
|
|||
.tos-content-wrapper,
|
||||
.fsuggest-content-wrapper,
|
||||
.shared-wrapper {
|
||||
background-color: var(--nav-bg) !important;
|
||||
background-color: var(--content-bg) !important;
|
||||
background-image: none;
|
||||
/* frio light border-color */
|
||||
}
|
||||
|
|
@ -654,7 +660,7 @@ ul.nav-tabs {
|
|||
}
|
||||
/* POSTS */
|
||||
.tread-wrapper {
|
||||
/* frio background-color */
|
||||
background-color: var(--content-bg);
|
||||
box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
|
@ -662,7 +668,7 @@ ul.nav-tabs {
|
|||
border-top: none;
|
||||
}
|
||||
.wall-item-container .media {
|
||||
background-color: #ffffff !important;
|
||||
background-color: var(--content-bg) !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
.wall-item-container iframe {
|
||||
|
|
@ -715,7 +721,7 @@ ul.nav-tabs {
|
|||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
.media hr, aside hr, section hr {
|
||||
.media hr:first-of-type, aside hr, section hr {
|
||||
border-color: var(--nav-bg);
|
||||
}
|
||||
/* keep mentions and tags from spilling out */
|
||||
|
|
@ -875,7 +881,7 @@ ul.nav-tabs {
|
|||
.modal-content,
|
||||
#jot-modal-content,
|
||||
.wall-item-comment-wrapper {
|
||||
background-color: #fff !important;
|
||||
background-color: var(--content-bg) !important;
|
||||
border-radius: 15px !important;
|
||||
background-image: none;
|
||||
}
|
||||
|
|
@ -965,7 +971,6 @@ ul.nav-tabs {
|
|||
.jot-nav .active a {
|
||||
background-color: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border-bottom: 3px solid var(--link-color) !important;
|
||||
}
|
||||
.jot-nav .active a:hover, .jot-nav .active a:focus {
|
||||
background-color: transparent !important;
|
||||
|
|
@ -1083,7 +1088,7 @@ ul.nav-tabs {
|
|||
}
|
||||
.comment-fake-form textarea {
|
||||
border-radius: 50px !important;
|
||||
/* frio background-color */
|
||||
background-color: var(--comment-bg) !important;
|
||||
/* frio -webkit-box-shadow */
|
||||
/* frio box-shadow */
|
||||
}
|
||||
|
|
@ -1099,7 +1104,7 @@ ul.nav-tabs {
|
|||
}
|
||||
.comment .media-body {
|
||||
padding: 10px;
|
||||
background-color: var(--background-color);
|
||||
background-color: var(--comment-bg);
|
||||
border-radius: 20px;
|
||||
}
|
||||
.wall-item-actions-row .wall-item-emoji {
|
||||
|
|
@ -1746,8 +1751,11 @@ a.tag.label,
|
|||
content: '';
|
||||
margin: 0;
|
||||
}
|
||||
#mention-link {
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
#mention-link span:last-of-type {
|
||||
margin-right: 42px;
|
||||
display: none;
|
||||
}
|
||||
.offcanvas-right-overlay,
|
||||
aside::before {
|
||||
|
|
@ -2166,7 +2174,6 @@ a.tag.label,
|
|||
#mention-link span:first-of-type {
|
||||
float: none;
|
||||
position: relative;
|
||||
left: -5px;
|
||||
top: 2px;
|
||||
}
|
||||
#search-save .fa-plus::after,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue