Friendica/bookface
1
0
Fork 1
mirror of https://gitlab.com/randompenguin/bookface.git synced 2025-06-07 19:14:26 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'modifications' into 'main'

Browse source 
Improvements for mobile screen

See merge request randompenguin/bookface!1
This commit is contained in:
Engneer 2025-02-04 14:52:06 +00:00
commit c6842278c0
2 changed files with 283 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

157
bookface_dark.css
View file

@ -68,6 +68,9 @@ nav.navbar .nav > li > button:focus {
background-color: transparent !important; background-color: transparent !important;
border-radius: 0 !important; border-radius: 0 !important;
} }
ul.tabs-extended > li.dropdown {
display: flex;
}
ul.tabs li { ul.tabs li {
font-size: 15px !important; font-size: 15px !important;
margin-left: 10px !important; margin-left: 10px !important;
@ -266,6 +269,8 @@ box-sizing: border-box;
color: #ffffff !important; color: #ffffff !important;
border-color: #000 !important; border-color: #000 !important;
box-shadow: none !important; box-shadow: none !important;
padding-right: 4px !important;
padding-left: 10px !important;
} }
#jotOpen:hover, #jotOpen:focus { #jotOpen:hover, #jotOpen:focus {
box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
@ -287,6 +292,55 @@ box-sizing: border-box;
#topbar-second #nav-short-info { #topbar-second #nav-short-info {
margin-top: 10px; margin-top: 10px;
} }
div#back-to-top {
font-size: 35px;
background-color: var(--link-color);
color: var(--nav-bg);
width: 53px;
height: 53px;
line-height: 53px;
text-align: center;
}
li .btn-link,li button.button-browser-share {
font-size: 16px !important;
color: var(--font-color-darker) !important;
width: 100%;
text-align: left;
background: none !important;
}
div.wall-item-tags {
margin: 15px 0px;
}
span.label {
font-size: 12px;
margin-bottom: 10px;
background: rgba(242, 244, 247, 0.1) !important;
color: var(--font-color-darker) !important;
border-radius: 8px;
display: inline-block;
padding: 10px;
text-shadow: none;
box-shadow: none;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
word-break: break-all;
}
span.label a {
color: var(--font-color-darker) !important;
text-shadow: none;
}
span.label > i.fa {
display: none;
}
li.pager_prev a, li.pager_next a {
border-radius: 16px !important;
font-size: 14px;
padding: 15px !important;
font-weight: bold;
width: 52px;
border-width: 0px;
}
/* Make Submit Buttons Pretty */ /* Make Submit Buttons Pretty */
#adminpage a.btn, #adminpage a.btn,
.settings-submit, .settings-submit,
@ -422,6 +476,9 @@ border-radius: 8px !important;
#profile-extra-links .btn { #profile-extra-links .btn {
border-radius: 8px !important; border-radius: 8px !important;
margin-bottom: 10px !important; margin-bottom: 10px !important;
}
div#profile-extra-links > div {
min-width: fit-content;
} }
/* SEARCH RESULTS */ /* SEARCH RESULTS */
#search-save { #search-save {
@ -483,6 +540,9 @@ aside .widget,
box-shadow: 0 0px 1px rgba(0,0,0,.5) !important; box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
border-radius: 10px !important; border-radius: 10px !important;
} }
.wall-item-container {
border: 0px;
}
.wall-item-container .media { .wall-item-container .media {
background-color: rgb(37, 39, 40) !important; background-color: rgb(37, 39, 40) !important;
border-radius: 10px !important; border-radius: 10px !important;
@ -520,25 +580,30 @@ aside .widget,
.media .delivery, .media .location, .media .delivery, .media .location,
.media .location a { .media .location a {
font-size: 13px !important; font-size: 13px !important;
}
div.media > hr {
visibility: hidden;
margin-bottom: 0px;
}
a.wall-item-name-link span, span.fakelink {
font-weight: bold;
font-size: 16px;
} }
.type-link, .type-video { .type-link, .type-video {
padding: 0 !important; padding: 0 !important;
margin: 0 !important; margin: 0 !important;
background-color: rgb(51, 51, 52) !important; background-color: var(--background-color) !important;
border: 1px solid rgb(101, 104, 108) !important; border: 1px solid var(--background-color) !important;
} }
.type-link h4, .type-link blockquote, .type-link sup, .type-link h4, .type-link blockquote, .type-link sup,
.type-video h4, .type-video blockquote, .type-video sup { .type-video h4, .type-video blockquote, .type-video sup {
padding-left: 10px !important; padding-left: 10px !important;
padding-right: 10px !important; padding-right: 10px !important;
} }
/* keep mentions and tags from spilling out */ div.type-link > h4, h4.media-heading {
#profile-page .label, font-size: 16px;
#profile-page .label a, font-weight: bold;
.wall-item-bottom .label, }
.wall-item-bottom .label a {
display: inline-block !important;
}
/* ACTION BUTTON LABELS */ /* ACTION BUTTON LABELS */
.wall-item-actions-row button, .wall-item-actions-row button,
.wall-item-actions-right button { .wall-item-actions-right button {
@ -558,7 +623,11 @@ aside .widget,
} }
.wall-item-response { .wall-item-response {
position: relative; position: relative;
padding-top: 4px; overflow: visible !important;
background-color: rgba(242, 244, 247, 0.05);
border-radius: 16px;
margin-right: 10px;
min-height: 58px;
} }
.button-comments::after { .button-comments::after {
content: 'Comment'; content: 'Comment';
@ -582,13 +651,36 @@ aside .widget,
.more-links .dropdown-toggle::after { .more-links .dropdown-toggle::after {
content: 'More'; content: 'More';
} }
span.more-links {
border-radius: 16px;
min-height: 58px;
}
div.wall-item-actions-row {
gap: 5px;
margin-left: 5px;
}
div.wall-item-actions-row > span, span.wall-item-actions-right > span {
align-items: center !important;
justify-content: center !important;
display: flex;
}
div.wall-item-actions-row > button, div.share-links > button, .more-links > button {
background-color: rgba(242, 244, 247, 0.05) !important;
border-radius: 16px;
min-width: 52px;
text-decoration: none !important;
font-weight: bold;
min-height: 52px;
}
div.wall-item-actions-row button:hover {
text-decoration: none !important;
}
/* engagement counts */ /* engagement counts */
.wall-item-actions-row > button span, .wall-item-actions-row > button span,
.wall-item-response span { .wall-item-response span {
position: absolute; position: absolute;
text-align: center; text-align: center;
display: block; display: block;
background-color: var(--link-color);
box-shadow: -1px 1px 1px #000; box-shadow: -1px 1px 1px #000;
border-radius: 4px; border-radius: 4px;
color: #fff; color: #fff;
@ -859,6 +951,9 @@ aside .widget li:hover {
.wall-item-actions button { .wall-item-actions button {
font-size: 24px !important; font-size: 24px !important;
color: #B0B3B8 !important; color: #B0B3B8 !important;
}
.wall-item-actions button.active {
color: var(--link-color) !important;
} }
.wall-item-actions button:hover { .wall-item-actions button:hover {
color: var(--link-color) !important; color: var(--link-color) !important;
@ -882,9 +977,8 @@ aside .widget li:hover {
} }
/* not obviously clickable or intuitive what it does */ /* not obviously clickable or intuitive what it does */
.plink.u-url { .plink.u-url {
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); border-radius: 8px;
box-shadow: 0 0 1px rgba(255,255,255,.5); background: var(--background-color);
border-radius: 100%;
position: relative; position: relative;
padding: 6px 4px; padding: 6px 4px;
height: 35px; height: 35px;
@ -892,7 +986,6 @@ aside .widget li:hover {
display: block; display: block;
} }
.plink.ul-url:hover { .plink.ul-url:hover {
background-color: rgba(255,255,255,.1) !important;
text-decoration: none !important; text-decoration: none !important;
} }
.plink.u-url::after { .plink.u-url::after {
@ -903,10 +996,25 @@ aside .widget li:hover {
.img-allocated-max-width { .img-allocated-max-width {
margin: 20px auto; margin: 20px auto;
} }
figure.img-allocated-height,
figure.img-allocated-height img,
img.attachment-image,
img.attachment-preview,
img.empty-description {
border-radius: 8px !important;
}
#vcard-short-photo-wrapper img, #vcard-short-photo-wrapper img,
#nav-short-info .contact-wrapper img { #nav-short-info .contact-wrapper img {
border-radius: 100%; border-radius: 100%;
} }
div#vcard-short-desc, div#vcard-short-photo-wrapper {
background: none !important;
}
button.content-filter-button {
font-size: 12px;
padding: 10px;
background-color: rgba(242, 244, 247, 0.1);
}
/* Calendar */ /* Calendar */
.fc-unthemed td.fc-today { .fc-unthemed td.fc-today {
background-color: var(--menu-background-hover-color); background-color: var(--menu-background-hover-color);
@ -1052,6 +1160,11 @@ aside .widget li:hover {
aspect-ratio: 5/4; aspect-ratio: 5/4;
} }
} }
@media screen and (max-width: 600px) {
nav.topbar {
padding-right: 10px !important;
}
}
@media screen and (max-width: 480px){ @media screen and (max-width: 480px){
#topbar-first .navbar-toggle[data-target="#search-mobile"]{ #topbar-first .navbar-toggle[data-target="#search-mobile"]{
left: 10%; left: 10%;
@ -1070,4 +1183,16 @@ aside .widget li:hover {
#search-save .fa-floppy-o::after { #search-save .fa-floppy-o::after {
content: 'Save'; content: 'Save';
} }
} }
@media (max-width: 470px) {
li[role="menuitem"] a {
text-overflow: ellipsis;
overflow: hidden;
}
div.more-links .dropdown-menu {
width: 280px !important;
}
div.wall-item-actions-row button::after {
display: none;
}
}

159
bookface_light.css
View file

@ -70,6 +70,9 @@
background-color: transparent !important; background-color: transparent !important;
border-radius: 0 !important; border-radius: 0 !important;
} }
ul.tabs-extended > li.dropdown {
display: flex;
}
ul.tabs li { ul.tabs li {
font-size: 15px !important; font-size: 15px !important;
margin-left: 10px !important; margin-left: 10px !important;
@ -225,6 +228,8 @@
border-radius: 8px !important; border-radius: 8px !important;
background-color: var(--link-color) !important; background-color: var(--link-color) !important;
color: #ffffff !important; color: #ffffff !important;
padding-right: 4px !important;
padding-left: 10px !important;
} }
#jotOpen:hover, #jotOpen:focus { #jotOpen:hover, #jotOpen:focus {
box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
@ -246,6 +251,55 @@
#topbar-second #nav-short-info { #topbar-second #nav-short-info {
margin-top: 10px; margin-top: 10px;
} }
div#back-to-top {
font-size: 35px;
background-color: var(--link-color);
color: var(--nav-bg);
width: 53px;
height: 53px;
line-height: 53px;
text-align: center;
}
li .btn-link,li button.button-browser-share {
font-size: 16px !important;
color: var(--font-color-darker) !important;
width: 100%;
text-align: left;
background: none !important;
}
div.wall-item-tags {
margin: 15px 0px;
}
span.label {
font-size: 12px;
margin-bottom: 10px;
background: rgba(28, 28, 29, 0.1) !important;
color: var(--font-color-darker) !important;
border-radius: 8px;
display: inline-block;
padding: 10px;
text-shadow: none;
box-shadow: none;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
word-break: break-all;
}
span.label a {
color: var(--font-color-darker) !important;
text-shadow: none;
}
span.label > i.fa {
display: none;
}
li.pager_prev a, li.pager_next a {
border-radius: 16px !important;
font-size: 14px;
padding: 15px !important;
font-weight: bold;
width: 52px;
border-width: 0px;
}
/* Make Submit Buttons Pretty */ /* Make Submit Buttons Pretty */
#adminpage a.btn, #adminpage a.btn,
.settings-submit, .settings-submit,
@ -322,8 +376,8 @@
/* Other people profiles */ /* Other people profiles */
#mention-link { #mention-link {
background-color: var(--link-color) !important; background-color: var(--link-color) !important;
color: white !important;; color: white !important;
border-radius: 8px !important;; border-radius: 8px !important;
padding: 0 16px !important; padding: 0 16px !important;
} }
#mention-link:hover, #mention-link:hover,
@ -355,6 +409,9 @@
border-radius: 8px !important; border-radius: 8px !important;
margin-bottom: 10px !important; margin-bottom: 10px !important;
} }
div#profile-extra-links > div {
min-width: fit-content;
}
/* SEARCH RESULTS */ /* SEARCH RESULTS */
#search-save { #search-save {
background-color: var(--link-color) !important; background-color: var(--link-color) !important;
@ -413,6 +470,9 @@
box-shadow: 0 0px 1px rgba(0,0,0,.5) !important; box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
border-radius: 10px !important; border-radius: 10px !important;
} }
.wall-item-container {
border: 0px;
}
.wall-item-container .media { .wall-item-container .media {
background-color: #ffffff !important; background-color: #ffffff !important;
border-radius: 10px !important; border-radius: 10px !important;
@ -440,25 +500,30 @@
.media .delivery, .media .location, .media .delivery, .media .location,
.media .location a { .media .location a {
font-size: 13px !important; font-size: 13px !important;
}
div.media > hr {
visibility: hidden;
margin-bottom: 0px;
}
a.wall-item-name-link span, span.fakelink {
font-weight: bold;
font-size: 16px;
} }
.type-link, .type-video { .type-link, .type-video {
padding: 0 !important; padding: 0 !important;
margin: 0 !important; margin: 0 !important;
background-color: rgb(240, 242, 245) !important; background-color: var(--background-color) !important;
border: 1px solid rgb(208,211,215) !important; border: 1px solid var(--background-color) !important;
} }
.type-link h4, .type-link blockquote, .type-link sup, .type-link h4, .type-link blockquote, .type-link sup,
.type-video h4, .type-video blockquote, .type-video sup { .type-video h4, .type-video blockquote, .type-video sup {
padding-left: 10px !important; padding-left: 10px !important;
padding-right: 10px !important; padding-right: 10px !important;
} }
/* keep mentions and tags from spilling out */ div.type-link > h4, h4.media-heading {
#profile-page .label, font-size: 16px;
#profile-page .label a, font-weight: bold;
.wall-item-bottom .label, }
.wall-item-bottom .label a {
display: inline-block !important;
}
/* ACTION BUTTON LABELS */ /* ACTION BUTTON LABELS */
.wall-item-actions-row button, .wall-item-actions-row button,
.wall-item-actions-right button { .wall-item-actions-right button {
@ -477,6 +542,10 @@
.wall-item-response { .wall-item-response {
position: relative; position: relative;
overflow: visible !important; overflow: visible !important;
background-color: rgba(28, 28, 29, 0.05);
border-radius: 16px;
margin-right: 10px;
min-height: 58px;
} }
.button-comments::after { .button-comments::after {
content: 'Comment'; content: 'Comment';
@ -500,13 +569,36 @@
.more-links .dropdown-toggle::after { .more-links .dropdown-toggle::after {
content: 'More'; content: 'More';
} }
span.more-links {
border-radius: 16px;
min-height: 58px;
}
div.wall-item-actions-row {
gap: 5px;
margin-left: 5px;
}
div.wall-item-actions-row > span, span.wall-item-actions-right > span {
align-items: center !important;
justify-content: center !important;
display: flex;
}
div.wall-item-actions-row > button, div.share-links > button, .more-links > button {
background-color: rgba(28, 28, 29, 0.05) !important;
border-radius: 16px;
min-width: 52px;
text-decoration: none !important;
font-weight: bold;
min-height: 52px;
}
div.wall-item-actions-row button:hover {
text-decoration: none !important;
}
/* engagement counts */ /* engagement counts */
.wall-item-actions-row > button span, .wall-item-actions-row > button span,
.wall-item-response span { .wall-item-response span {
position: absolute; position: absolute;
text-align: center; text-align: center;
display: block; display: block;
background-color: var(--link-color);
box-shadow: -1px 1px 1px #fff; box-shadow: -1px 1px 1px #fff;
border-radius: 4px; border-radius: 4px;
color: #fff; color: #fff;
@ -791,6 +883,9 @@
.wall-item-actions button { .wall-item-actions button {
font-size: 24px !important; font-size: 24px !important;
color: #65686C !important; color: #65686C !important;
}
.wall-item-actions button.active {
color: var(--link-color) !important;
} }
.wall-item-actions button:hover { .wall-item-actions button:hover {
color: var(--link-color) !important; color: var(--link-color) !important;
@ -814,9 +909,8 @@
} }
/* not obviously clickable or intuitive what it does */ /* not obviously clickable or intuitive what it does */
.plink.u-url { .plink.u-url {
-webkit-box-shadow: 0 0 1px rgba(0,0,0,.5); border-radius: 8px;
box-shadow: 0 0 1px rgba(0,0,0,.5); background: var(--background-color);
border-radius: 100%;
position: relative; position: relative;
padding: 6px 4px; padding: 6px 4px;
height: 35px; height: 35px;
@ -824,7 +918,6 @@
display: block; display: block;
} }
.plink.u-url:hover { .plink.u-url:hover {
background-color: rgba(0,0,0,.1) !important;
text-decoration: none !important; text-decoration: none !important;
} }
.plink.u-url::after { .plink.u-url::after {
@ -835,10 +928,25 @@
.img-allocated-max-width { .img-allocated-max-width {
margin: 20px auto; margin: 20px auto;
} }
figure.img-allocated-height,
figure.img-allocated-height img,
img.attachment-image,
img.attachment-preview,
img.empty-description {
border-radius: 8px !important;
}
#vcard-short-photo-wrapper img, #vcard-short-photo-wrapper img,
#nav-short-info .contact-wrapper img { #nav-short-info .contact-wrapper img {
border-radius: 100%; border-radius: 100%;
} }
div#vcard-short-desc, div#vcard-short-photo-wrapper {
background: none !important;
}
button.content-filter-button {
font-size: 12px;
padding: 10px;
background-color: rgba(28, 28, 29, 0.1);
}
/* Calendar */ /* Calendar */
.fc-unthemed td.fc-today { .fc-unthemed td.fc-today {
background-color: var(--menu-background-hover-color); background-color: var(--menu-background-hover-color);
@ -985,6 +1093,11 @@
aspect-ratio: 5/4; aspect-ratio: 5/4;
} }
} }
@media screen and (max-width: 600px) {
nav.topbar {
padding-right: 10px !important;
}
}
@media screen and (max-width: 480px){ @media screen and (max-width: 480px){
#topbar-first .navbar-toggle[data-target="#search-mobile"]{ #topbar-first .navbar-toggle[data-target="#search-mobile"]{
left: 10%; left: 10%;
@ -1003,4 +1116,16 @@
#search-save .fa-floppy-o::after { #search-save .fa-floppy-o::after {
content: 'Save'; content: 'Save';
} }
} }
@media (max-width: 470px) {
li[role="menuitem"] a {
text-overflow: ellipsis;
overflow: hidden;
}
div.more-links .dropdown-menu {
width: 280px !important;
}
div.wall-item-actions-row button::after {
display: none;
}
}