mirror of
https://gitlab.com/randompenguin/bookface.git
synced 2025-06-07 19:14:26 +02:00
Merge branch 'modifications' into 'main'
Improvements for mobile screen See merge request randompenguin/bookface!1
This commit is contained in:
Engneer
commit
c6842278c0
2 changed files with 283 additions and 33 deletions
|
|
@ -68,6 +68,9 @@ nav.navbar .nav > li > button:focus {
|
|||
background-color: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
ul.tabs-extended > li.dropdown {
|
||||
display: flex;
|
||||
}
|
||||
ul.tabs li {
|
||||
font-size: 15px !important;
|
||||
margin-left: 10px !important;
|
||||
|
|
@ -266,6 +269,8 @@ box-sizing: border-box;
|
|||
color: #ffffff !important;
|
||||
border-color: #000 !important;
|
||||
box-shadow: none !important;
|
||||
padding-right: 4px !important;
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
#jotOpen:hover, #jotOpen:focus {
|
||||
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 {
|
||||
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 */
|
||||
#adminpage a.btn,
|
||||
.settings-submit,
|
||||
|
|
@ -422,6 +476,9 @@ border-radius: 8px !important;
|
|||
#profile-extra-links .btn {
|
||||
border-radius: 8px !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
div#profile-extra-links > div {
|
||||
min-width: fit-content;
|
||||
}
|
||||
/* SEARCH RESULTS */
|
||||
#search-save {
|
||||
|
|
@ -483,6 +540,9 @@ aside .widget,
|
|||
box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
.wall-item-container {
|
||||
border: 0px;
|
||||
}
|
||||
.wall-item-container .media {
|
||||
background-color: rgb(37, 39, 40) !important;
|
||||
border-radius: 10px !important;
|
||||
|
|
@ -520,25 +580,30 @@ aside .widget,
|
|||
.media .delivery, .media .location,
|
||||
.media .location a {
|
||||
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 {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
background-color: rgb(51, 51, 52) !important;
|
||||
border: 1px solid rgb(101, 104, 108) !important;
|
||||
background-color: var(--background-color) !important;
|
||||
border: 1px solid var(--background-color) !important;
|
||||
}
|
||||
.type-link h4, .type-link blockquote, .type-link sup,
|
||||
.type-video h4, .type-video blockquote, .type-video sup {
|
||||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
/* keep mentions and tags from spilling out */
|
||||
#profile-page .label,
|
||||
#profile-page .label a,
|
||||
.wall-item-bottom .label,
|
||||
.wall-item-bottom .label a {
|
||||
display: inline-block !important;
|
||||
}
|
||||
div.type-link > h4, h4.media-heading {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* ACTION BUTTON LABELS */
|
||||
.wall-item-actions-row button,
|
||||
.wall-item-actions-right button {
|
||||
|
|
@ -558,7 +623,11 @@ aside .widget,
|
|||
}
|
||||
.wall-item-response {
|
||||
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 {
|
||||
content: 'Comment';
|
||||
|
|
@ -582,13 +651,36 @@ aside .widget,
|
|||
.more-links .dropdown-toggle::after {
|
||||
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 */
|
||||
.wall-item-actions-row > button span,
|
||||
.wall-item-response span {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background-color: var(--link-color);
|
||||
box-shadow: -1px 1px 1px #000;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
|
|
@ -859,6 +951,9 @@ aside .widget li:hover {
|
|||
.wall-item-actions button {
|
||||
font-size: 24px !important;
|
||||
color: #B0B3B8 !important;
|
||||
}
|
||||
.wall-item-actions button.active {
|
||||
color: var(--link-color) !important;
|
||||
}
|
||||
.wall-item-actions button:hover {
|
||||
color: var(--link-color) !important;
|
||||
|
|
@ -882,9 +977,8 @@ aside .widget li:hover {
|
|||
}
|
||||
/* not obviously clickable or intuitive what it does */
|
||||
.plink.u-url {
|
||||
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
|
||||
box-shadow: 0 0 1px rgba(255,255,255,.5);
|
||||
border-radius: 100%;
|
||||
border-radius: 8px;
|
||||
background: var(--background-color);
|
||||
position: relative;
|
||||
padding: 6px 4px;
|
||||
height: 35px;
|
||||
|
|
@ -892,7 +986,6 @@ aside .widget li:hover {
|
|||
display: block;
|
||||
}
|
||||
.plink.ul-url:hover {
|
||||
background-color: rgba(255,255,255,.1) !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.plink.u-url::after {
|
||||
|
|
@ -903,10 +996,25 @@ aside .widget li:hover {
|
|||
.img-allocated-max-width {
|
||||
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,
|
||||
#nav-short-info .contact-wrapper img {
|
||||
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 */
|
||||
.fc-unthemed td.fc-today {
|
||||
background-color: var(--menu-background-hover-color);
|
||||
|
|
@ -1052,6 +1160,11 @@ aside .widget li:hover {
|
|||
aspect-ratio: 5/4;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
nav.topbar {
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 480px){
|
||||
#topbar-first .navbar-toggle[data-target="#search-mobile"]{
|
||||
left: 10%;
|
||||
|
|
@ -1070,4 +1183,16 @@ aside .widget li:hover {
|
|||
#search-save .fa-floppy-o::after {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,6 +70,9 @@
|
|||
background-color: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
ul.tabs-extended > li.dropdown {
|
||||
display: flex;
|
||||
}
|
||||
ul.tabs li {
|
||||
font-size: 15px !important;
|
||||
margin-left: 10px !important;
|
||||
|
|
@ -225,6 +228,8 @@
|
|||
border-radius: 8px !important;
|
||||
background-color: var(--link-color) !important;
|
||||
color: #ffffff !important;
|
||||
padding-right: 4px !important;
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
#jotOpen:hover, #jotOpen:focus {
|
||||
box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
|
||||
|
|
@ -246,6 +251,55 @@
|
|||
#topbar-second #nav-short-info {
|
||||
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 */
|
||||
#adminpage a.btn,
|
||||
.settings-submit,
|
||||
|
|
@ -322,8 +376,8 @@
|
|||
/* Other people profiles */
|
||||
#mention-link {
|
||||
background-color: var(--link-color) !important;
|
||||
color: white !important;;
|
||||
border-radius: 8px !important;;
|
||||
color: white !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
#mention-link:hover,
|
||||
|
|
@ -355,6 +409,9 @@
|
|||
border-radius: 8px !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
div#profile-extra-links > div {
|
||||
min-width: fit-content;
|
||||
}
|
||||
/* SEARCH RESULTS */
|
||||
#search-save {
|
||||
background-color: var(--link-color) !important;
|
||||
|
|
@ -413,6 +470,9 @@
|
|||
box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
.wall-item-container {
|
||||
border: 0px;
|
||||
}
|
||||
.wall-item-container .media {
|
||||
background-color: #ffffff !important;
|
||||
border-radius: 10px !important;
|
||||
|
|
@ -440,25 +500,30 @@
|
|||
.media .delivery, .media .location,
|
||||
.media .location a {
|
||||
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 {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
background-color: rgb(240, 242, 245) !important;
|
||||
border: 1px solid rgb(208,211,215) !important;
|
||||
background-color: var(--background-color) !important;
|
||||
border: 1px solid var(--background-color) !important;
|
||||
}
|
||||
.type-link h4, .type-link blockquote, .type-link sup,
|
||||
.type-video h4, .type-video blockquote, .type-video sup {
|
||||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
/* keep mentions and tags from spilling out */
|
||||
#profile-page .label,
|
||||
#profile-page .label a,
|
||||
.wall-item-bottom .label,
|
||||
.wall-item-bottom .label a {
|
||||
display: inline-block !important;
|
||||
}
|
||||
div.type-link > h4, h4.media-heading {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* ACTION BUTTON LABELS */
|
||||
.wall-item-actions-row button,
|
||||
.wall-item-actions-right button {
|
||||
|
|
@ -477,6 +542,10 @@
|
|||
.wall-item-response {
|
||||
position: relative;
|
||||
overflow: visible !important;
|
||||
background-color: rgba(28, 28, 29, 0.05);
|
||||
border-radius: 16px;
|
||||
margin-right: 10px;
|
||||
min-height: 58px;
|
||||
}
|
||||
.button-comments::after {
|
||||
content: 'Comment';
|
||||
|
|
@ -500,13 +569,36 @@
|
|||
.more-links .dropdown-toggle::after {
|
||||
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 */
|
||||
.wall-item-actions-row > button span,
|
||||
.wall-item-response span {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background-color: var(--link-color);
|
||||
box-shadow: -1px 1px 1px #fff;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
|
|
@ -791,6 +883,9 @@
|
|||
.wall-item-actions button {
|
||||
font-size: 24px !important;
|
||||
color: #65686C !important;
|
||||
}
|
||||
.wall-item-actions button.active {
|
||||
color: var(--link-color) !important;
|
||||
}
|
||||
.wall-item-actions button:hover {
|
||||
color: var(--link-color) !important;
|
||||
|
|
@ -814,9 +909,8 @@
|
|||
}
|
||||
/* not obviously clickable or intuitive what it does */
|
||||
.plink.u-url {
|
||||
-webkit-box-shadow: 0 0 1px rgba(0,0,0,.5);
|
||||
box-shadow: 0 0 1px rgba(0,0,0,.5);
|
||||
border-radius: 100%;
|
||||
border-radius: 8px;
|
||||
background: var(--background-color);
|
||||
position: relative;
|
||||
padding: 6px 4px;
|
||||
height: 35px;
|
||||
|
|
@ -824,7 +918,6 @@
|
|||
display: block;
|
||||
}
|
||||
.plink.u-url:hover {
|
||||
background-color: rgba(0,0,0,.1) !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.plink.u-url::after {
|
||||
|
|
@ -835,10 +928,25 @@
|
|||
.img-allocated-max-width {
|
||||
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,
|
||||
#nav-short-info .contact-wrapper img {
|
||||
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 */
|
||||
.fc-unthemed td.fc-today {
|
||||
background-color: var(--menu-background-hover-color);
|
||||
|
|
@ -985,6 +1093,11 @@
|
|||
aspect-ratio: 5/4;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
nav.topbar {
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 480px){
|
||||
#topbar-first .navbar-toggle[data-target="#search-mobile"]{
|
||||
left: 10%;
|
||||
|
|
@ -1003,4 +1116,16 @@
|
|||
#search-save .fa-floppy-o::after {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue