Fix date issue in mobile view (#6385)

* font-size: 0.7rem; in frss.css

* fix date issue in mobile view

* better CSS for date in header and footer

* RTL

* padding in mobile view
This commit is contained in:
maTh 2024-04-26 13:11:38 +02:00 committed by GitHub
parent c47b785235
commit d656896a95
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 61 additions and 53 deletions

View File

@ -794,9 +794,9 @@ kbd {
filter: grayscale(0.8) brightness(1.7);
}
.flux .item.date {
.flux .flux_header .date,
.flux .flux_content .bottom .date {
color: var(--font-color-light);
font-size: 0.7rem;
}
.flux .bottom {

View File

@ -794,9 +794,9 @@ kbd {
filter: grayscale(0.8) brightness(1.7);
}
.flux .item.date {
.flux .flux_header .date,
.flux .flux_content .bottom .date {
color: var(--font-color-light);
font-size: 0.7rem;
}
.flux .bottom {

View File

@ -51,7 +51,7 @@
}
}
.item.date {
.item .date {
color: color.scale(variables.$unread-font-color, $alpha: -50%);
}
}
@ -77,7 +77,8 @@
}
}
.item.date {
.flux_header .date,
.flux_content .bottom .date {
color: color.scale(variables.$main-font-color, $alpha: -50%);
font-size: 0.85rem;
}

View File

@ -1011,7 +1011,7 @@ main.prompt {
.flux.not_read .item.website a {
color: #161a38;
}
.flux.not_read .item.date {
.flux.not_read .item .date {
color: rgba(22, 26, 56, 0.5);
}
.flux.favorite {
@ -1028,7 +1028,8 @@ main.prompt {
color: #363330;
opacity: 0.75;
}
.flux .item.date {
.flux .flux_header .date,
.flux .flux_content .bottom .date {
color: rgba(54, 51, 48, 0.5);
font-size: 0.85rem;
}

View File

@ -1011,7 +1011,7 @@ main.prompt {
.flux.not_read .item.website a {
color: #161a38;
}
.flux.not_read .item.date {
.flux.not_read .item .date {
color: rgba(22, 26, 56, 0.5);
}
.flux.favorite {
@ -1028,7 +1028,8 @@ main.prompt {
color: #363330;
opacity: 0.75;
}
.flux .item.date {
.flux .flux_header .date,
.flux .flux_content .bottom .date {
color: rgba(54, 51, 48, 0.5);
font-size: 0.85rem;
}

View File

@ -456,7 +456,8 @@ button.as-link[disabled] {
color: var(--dark-font-color8);
}
.flux .item.date {
.flux .flux_header .date,
.flux .flux_content .bottom .date {
color: var(--dark-font-color6);
}

View File

@ -456,7 +456,8 @@ button.as-link[disabled] {
color: var(--dark-font-color8);
}
.flux .item.date {
.flux .flux_header .date,
.flux .flux_content .bottom .date {
color: var(--dark-font-color6);
}

View File

@ -729,9 +729,9 @@ th {
font-size: 0.9rem;
}
.flux .item.date {
.flux .flux_header .date,
.flux .flux_content .bottom .date {
color: #666;
font-size: 0.7rem;
}
.flux .bottom {

View File

@ -729,9 +729,9 @@ th {
font-size: 0.9rem;
}
.flux .item.date {
.flux .flux_header .date,
.flux .flux_content .bottom .date {
color: #666;
font-size: 0.7rem;
}
.flux .bottom {

View File

@ -47,7 +47,7 @@
}
}
.item.date {
.item .date {
color: color.scale(variables.$unread-font-color, $alpha: -50%);
}
}
@ -73,7 +73,8 @@
}
}
.item.date {
.flux_header .date,
.flux_content .bottom .date {
color: color.scale(variables.$main-font-color, $alpha: -50%);
font-size: 0.85rem;
}

View File

@ -1026,7 +1026,7 @@ main.prompt {
.flux.not_read .item.website a {
color: #36c;
}
.flux.not_read .item.date {
.flux.not_read .item .date {
color: rgba(51, 102, 204, 0.5);
}
.flux.favorite {
@ -1043,7 +1043,8 @@ main.prompt {
color: #303136;
opacity: 0.75;
}
.flux .item.date {
.flux .flux_header .date,
.flux .flux_content .bottom .date {
color: rgba(48, 49, 54, 0.5);
font-size: 0.85rem;
}

View File

@ -1026,7 +1026,7 @@ main.prompt {
.flux.not_read .item.website a {
color: #36c;
}
.flux.not_read .item.date {
.flux.not_read .item .date {
color: rgba(51, 102, 204, 0.5);
}
.flux.favorite {
@ -1043,7 +1043,8 @@ main.prompt {
color: #303136;
opacity: 0.75;
}
.flux .item.date {
.flux .flux_header .date,
.flux .flux_content .bottom .date {
color: rgba(48, 49, 54, 0.5);
font-size: 0.85rem;
}

View File

@ -791,10 +791,6 @@ li.item.active {
padding: 0.25rem;
}
.flux .item.date {
font-size: 0.7rem;
}
.flux .bottom {
font-size: 0.8rem;
text-align: center;

View File

@ -791,10 +791,6 @@ li.item.active {
padding: 0.25rem;
}
.flux .item.date {
font-size: 0.7rem;
}
.flux .bottom {
font-size: 0.8rem;
text-align: center;

View File

@ -849,9 +849,9 @@ a.signin {
padding: 0.425rem;
}
.flux .item.date {
.flux .flux_header .date,
.flux .flux_content .bottom .date {
color: var(--font-color-grey);
font-size: 0.7rem;
}
.flux .bottom {

View File

@ -849,9 +849,9 @@ a.signin {
padding: 0.425rem;
}
.flux .item.date {
.flux .flux_header .date,
.flux .flux_content .bottom .date {
color: var(--font-color-grey);
font-size: 0.7rem;
}
.flux .bottom {

View File

@ -767,9 +767,9 @@ form th {
.flux.not_read:not(.current):hover .item .title {
background-color: var(--color-background-unread);
}
.flux .item.date {
.flux .flux_header .date,
.flux .flux_content .bottom .date {
color: var(--color-text-light-darker);
font-size: 0.7rem;
}
.flux .bottom {
font-size: 0.8rem;

View File

@ -767,9 +767,9 @@ form th {
.flux.not_read:not(.current):hover .item .title {
background-color: var(--color-background-unread);
}
.flux .item.date {
.flux .flux_header .date,
.flux .flux_content .bottom .date {
color: var(--color-text-light-darker);
font-size: 0.7rem;
}
.flux .bottom {
font-size: 0.8rem;

View File

@ -990,11 +990,9 @@ form {
}
}
.item {
&.date {
color: var(--color-text-light-darker);
font-size: 0.7rem;
}
.flux_header .date,
.flux_content .bottom .date {
color: var(--color-text-light-darker);
}
.bottom {

View File

@ -555,10 +555,6 @@ th {
padding: 5px;
}
.flux .item.date {
font-size: 0.7rem;
}
.flux:not(.current):hover .item.title {
}

View File

@ -555,10 +555,6 @@ th {
padding: 5px;
}
.flux .item.date {
font-size: 0.7rem;
}
.flux:not(.current):hover .item.title {
}

View File

@ -1411,6 +1411,11 @@ a.website:hover .favicon {
overflow: hidden;
}
.flux .flux_header .date,
.flux .flux_content .bottom .date {
font-size: 0.7rem;
}
.item.query > a {
display: list-item;
list-style-position: inside;
@ -2205,7 +2210,7 @@ html.slider-active {
}
.flux_header .item.website span,
.item.date, .day .date,
.item .date, .day .date,
.dropdown-menu > .no-mobile,
.no-mobile {
display: none;
@ -2248,6 +2253,10 @@ html.slider-active {
text-align: center;
}
.flux .flux_header .item .title:has(~.date) {
padding-right: 1rem;
}
#overlay .close {
position: relative;
}

View File

@ -1411,6 +1411,11 @@ a.website:hover .favicon {
overflow: hidden;
}
.flux .flux_header .date,
.flux .flux_content .bottom .date {
font-size: 0.7rem;
}
.item.query > a {
display: list-item;
list-style-position: inside;
@ -2205,7 +2210,7 @@ html.slider-active {
}
.flux_header .item.website span,
.item.date, .day .date,
.item .date, .day .date,
.dropdown-menu > .no-mobile,
.no-mobile {
display: none;
@ -2248,6 +2253,10 @@ html.slider-active {
text-align: center;
}
.flux .flux_header .item .title:has(~.date) {
padding-left: 1rem;
}
#overlay .close {
position: relative;
}