Improved: unread articles counter (#4166)

* Update template.css

* CSS base template

* CSS themes

* white spaces fixed

* Update ansum.rtl.css

* fix themes

* fix css

* fix scss

* theme swage

* Theme Screwdriver

* theme BlueLagoon fine tuning

* theme Parfat tuneing

* Fix merge bugs

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
This commit is contained in:
maTh
2022-02-05 00:02:06 +01:00
committed by GitHub
parent 3938492b8a
commit dc27baa7d6
30 changed files with 317 additions and 285 deletions

View File

@@ -577,15 +577,17 @@ a.btn {
/*=== Aside main page (categories) */
.aside_feed .category .title:not([data-unread="0"])::after {
margin: 10px 0;
padding: 0 10px;
background: inherit;
font-size: 0.9rem;
position: absolute;
right: 0;
line-height: 1.5rem;
}
.aside.aside_feed .category .title:not([data-unread="0"])::after,
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
background-color: #171717;
color: #999;
border-color: #999;
}
/*=== Aside main page (feeds) */
.feed.item.empty.active {
background: #e67e22;

View File

@@ -577,15 +577,17 @@ a.btn {
/*=== Aside main page (categories) */
.aside_feed .category .title:not([data-unread="0"])::after {
margin: 10px 0;
padding: 0 10px;
background: inherit;
font-size: 0.9rem;
position: absolute;
left: 0;
line-height: 1.5rem;
}
.aside.aside_feed .category .title:not([data-unread="0"])::after,
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
background-color: #171717;
color: #999;
border-color: #999;
}
/*=== Aside main page (feeds) */
.feed.item.empty.active {
background: #e67e22;

View File

@@ -79,19 +79,6 @@
color: variables.$sid-font-color;
}
}
.feed .item-title:not([data-unread="0"])::before {
margin: 11px 6px 0 4px;
padding: 3px 4px;
background: variables.$sid-pills;
display: block;
float: left;
font-size: 0.75rem;
border-radius: 12px;
content: attr(data-unread);
text-align: center;
line-height: 0.75rem;
}
}
}
}
@@ -274,15 +261,14 @@
width: calc(100% - 35px - 35px);
}
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
margin: -0.25rem 1rem 0 0;
padding: 0 0.75rem;
background: variables.$sid-pills;
border-radius: 12px;
position: absolute;
right: 0;
line-height: 1.5rem;
text-align: center;
.aside.aside_feed .category .title:not([data-unread="0"])::after {
margin: 1.5em 0 0 0;
background-color: variables.$sid-pills;
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
margin: 0.5em 0 0 0;
background-color: variables.$sid-pills;
}
.feed.item.empty.active {

View File

@@ -583,18 +583,6 @@ form th {
text-decoration: none;
color: #363330;
}
.tree .tree-folder .tree-folder-items .feed .item-title:not([data-unread="0"])::before {
margin: 11px 6px 0 4px;
padding: 3px 4px;
background: rgba(35, 35, 0, 0.15);
display: block;
float: left;
font-size: 0.75rem;
border-radius: 12px;
content: attr(data-unread);
text-align: center;
line-height: 0.75rem;
}
/*=== Buttons */
.stick {
@@ -726,15 +714,14 @@ form th {
width: calc(100% - 35px - 35px);
}
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
margin: -0.25rem 1rem 0 0;
padding: 0 0.75rem;
background: rgba(35, 35, 0, 0.15);
border-radius: 12px;
position: absolute;
right: 0;
line-height: 1.5rem;
text-align: center;
.aside.aside_feed .category .title:not([data-unread="0"])::after {
margin: 1.5em 0 0 0;
background-color: rgba(35, 35, 0, 0.15);
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
margin: 0.5em 0 0 0;
background-color: rgba(35, 35, 0, 0.15);
}
.feed.item.empty.active {

View File

File diff suppressed because one or more lines are too long

View File

@@ -583,18 +583,6 @@ form th {
text-decoration: none;
color: #363330;
}
.tree .tree-folder .tree-folder-items .feed .item-title:not([data-unread="0"])::before {
margin: 11px 4px 0 6px;
padding: 3px 4px;
background: rgba(35, 35, 0, 0.15);
display: block;
float: right;
font-size: 0.75rem;
border-radius: 12px;
content: attr(data-unread);
text-align: center;
line-height: 0.75rem;
}
/*=== Buttons */
.stick {
@@ -726,15 +714,14 @@ form th {
width: calc(100% - 35px - 35px);
}
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
margin: -0.25rem 0 0 1rem;
padding: 0 0.75rem;
background: rgba(35, 35, 0, 0.15);
border-radius: 12px;
position: absolute;
left: 0;
line-height: 1.5rem;
text-align: center;
.aside.aside_feed .category .title:not([data-unread="0"])::after {
margin: 1.5em 0 0 0;
background-color: rgba(35, 35, 0, 0.15);
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
margin: 0.5em 0 0 0;
background-color: rgba(35, 35, 0, 0.15);
}
.feed.item.empty.active {

View File

@@ -602,7 +602,7 @@ a.btn {
}
.tree-folder-items > .item.active {
margin: 0px 8px;
margin: 0px 5px;
background: linear-gradient(180deg, #222 0%, #171717 100%) #171717;
background: -webkit-linear-gradient(top, #222 0%, #171717 100%);
border-radius: 4px;
@@ -702,18 +702,30 @@ a.btn {
}
/*=== Aside main page (categories) */
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
position: absolute;
right: 3px;
padding: 1px 5px;
color: #fff;
text-shadow: 0 1px rgba(255,255,255,0.08);
}
.aside_feed .btn-important {
border: none;
}
.aside.aside_feed .tree-folder-items .item.feed.active {
padding: 0 10px;
}
.aside.aside_feed .category .title:not([data-unread="0"])::after {
background-color: #171717;
color: #ccc;
border-color: #999;
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
background-color: #222;
color: #ccc;
border-color: #999;
}
.aside.aside_feed .feed.active .item-title:not([data-unread="0"])::after {
right: 5px;
}
/*=== Aside main page (feeds) */
.feed.item.empty,
.feed.item.empty > a {

View File

@@ -602,7 +602,7 @@ a.btn {
}
.tree-folder-items > .item.active {
margin: 0px 8px;
margin: 0px 5px;
background: linear-gradient(-180deg, #222 0%, #171717 100%) #171717;
background: -webkit-linear-gradient(top, #222 0%, #171717 100%);
border-radius: 4px;
@@ -702,18 +702,30 @@ a.btn {
}
/*=== Aside main page (categories) */
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
position: absolute;
left: 3px;
padding: 1px 5px;
color: #fff;
text-shadow: 0 1px rgba(255,255,255,0.08);
}
.aside_feed .btn-important {
border: none;
}
.aside.aside_feed .tree-folder-items .item.feed.active {
padding: 0 10px;
}
.aside.aside_feed .category .title:not([data-unread="0"])::after {
background-color: #171717;
color: #ccc;
border-color: #999;
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
background-color: #222;
color: #ccc;
border-color: #999;
}
.aside.aside_feed .feed.active .item-title:not([data-unread="0"])::after {
left: 5px;
}
/*=== Aside main page (feeds) */
.feed.item.empty,
.feed.item.empty > a {

View File

@@ -616,14 +616,18 @@ a.btn {
}
/*=== Aside main page (categories) */
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
margin: 10px 0;
padding: 0 10px;
background: inherit;
font-size: 0.9rem;
position: absolute;
right: 0;
line-height: 1.5rem;
.aside.aside_feed .category .title:not([data-unread="0"])::after {
background-color: #171717;
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
background-color: #222;
color: #888;
}
.aside.aside_feed .feed.active .item-title:not([data-unread="0"])::after {
border-color: #888;
color: #888;
}
/*=== Aside main page (feeds) */

View File

@@ -616,14 +616,18 @@ a.btn {
}
/*=== Aside main page (categories) */
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
margin: 10px 0;
padding: 0 10px;
background: inherit;
font-size: 0.9rem;
position: absolute;
left: 0;
line-height: 1.5rem;
.aside.aside_feed .category .title:not([data-unread="0"])::after {
background-color: #171717;
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
background-color: #222;
color: #888;
}
.aside.aside_feed .feed.active .item-title:not([data-unread="0"])::after {
border-color: #888;
color: #888;
}
/*=== Aside main page (feeds) */

View File

@@ -624,14 +624,12 @@ a.btn {
}
/*=== Aside main page (categories) */
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
margin: 10px 0;
padding: 0 10px;
background: inherit;
font-size: 0.9rem;
position: absolute;
right: 0;
line-height: 1.5rem;
.aside.aside_feed .category .title:not([data-unread="0"])::after {
background-color: #2c3e50;
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
background-color: #34495e;
}
/*=== Aside main page (feeds) */

View File

@@ -624,14 +624,12 @@ a.btn {
}
/*=== Aside main page (categories) */
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
margin: 10px 0;
padding: 0 10px;
background: inherit;
font-size: 0.9rem;
position: absolute;
left: 0;
line-height: 1.5rem;
.aside.aside_feed .category .title:not([data-unread="0"])::after {
background-color: #2c3e50;
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
background-color: #34495e;
}
/*=== Aside main page (feeds) */

View File

@@ -79,19 +79,6 @@
color: variables.$sid-font-color;
}
}
.feed .item-title:not([data-unread="0"])::before {
margin: 11px 6px 0 4px;
padding: 3px 4px;
background: variables.$sid-pills;
display: block;
float: left;
font-size: 0.75rem;
border-radius: 12px;
content: attr(data-unread);
text-align: center;
line-height: 0.75rem;
}
}
}
}
@@ -272,15 +259,14 @@
width: calc(100% - 35px - 35px);
}
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
margin: -0.25rem 1rem 0 0;
padding: 0 0.75rem;
background: variables.$sid-pills;
border-radius: 12px;
position: absolute;
right: 0;
line-height: 1.5rem;
text-align: center;
.aside.aside_feed .category .title:not([data-unread="0"])::after {
margin: 1.5em 0 0 0;
background-color: variables.$sid-pills;
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
margin: 0.5em 0 0 0;
background-color: variables.$sid-pills;
}
.feed.item.empty.active {

View File

@@ -579,18 +579,6 @@ form th {
text-decoration: none;
color: #ffffff;
}
.tree .tree-folder .tree-folder-items .feed .item-title:not([data-unread="0"])::before {
margin: 11px 6px 0 4px;
padding: 3px 4px;
background: rgba(0, 0, 0, 0.25);
display: block;
float: left;
font-size: 0.75rem;
border-radius: 12px;
content: attr(data-unread);
text-align: center;
line-height: 0.75rem;
}
/*=== Buttons */
.stick {
@@ -721,15 +709,14 @@ form th {
width: calc(100% - 35px - 35px);
}
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
margin: -0.25rem 1rem 0 0;
padding: 0 0.75rem;
background: rgba(0, 0, 0, 0.25);
border-radius: 12px;
position: absolute;
right: 0;
line-height: 1.5rem;
text-align: center;
.aside.aside_feed .category .title:not([data-unread="0"])::after {
margin: 1.5em 0 0 0;
background-color: rgba(0, 0, 0, 0.25);
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
margin: 0.5em 0 0 0;
background-color: rgba(0, 0, 0, 0.25);
}
.feed.item.empty.active {

View File

File diff suppressed because one or more lines are too long

View File

@@ -579,18 +579,6 @@ form th {
text-decoration: none;
color: #ffffff;
}
.tree .tree-folder .tree-folder-items .feed .item-title:not([data-unread="0"])::before {
margin: 11px 4px 0 6px;
padding: 3px 4px;
background: rgba(0, 0, 0, 0.25);
display: block;
float: right;
font-size: 0.75rem;
border-radius: 12px;
content: attr(data-unread);
text-align: center;
line-height: 0.75rem;
}
/*=== Buttons */
.stick {
@@ -721,15 +709,14 @@ form th {
width: calc(100% - 35px - 35px);
}
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
margin: -0.25rem 0 0 1rem;
padding: 0 0.75rem;
background: rgba(0, 0, 0, 0.25);
border-radius: 12px;
position: absolute;
left: 0;
line-height: 1.5rem;
text-align: center;
.aside.aside_feed .category .title:not([data-unread="0"])::after {
margin: 1.5em 0 0 0;
background-color: rgba(0, 0, 0, 0.25);
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
margin: 0.5em 0 0 0;
background-color: rgba(0, 0, 0, 0.25);
}
.feed.item.empty.active {

View File

@@ -657,14 +657,16 @@ a.btn,
}
/*=== Aside main page (categories) */
.aside_feed .category .title:not([data-unread="0"])::after {
margin: 10px 0;
padding: 0 10px;
background: inherit;
font-size: 0.8rem;
position: absolute;
right: 0;
line-height: 0.9rem;
.aside.aside_feed .category .title:not([data-unread="0"])::after {
margin: 0.5em 0 0 0;
background-color: #f6f6f6;
color: #444;
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
margin: 0.75em 0 0 0;
background-color: white;
color: #444;
}
/*=== Aside main page (feeds) */

View File

@@ -657,14 +657,16 @@ a.btn,
}
/*=== Aside main page (categories) */
.aside_feed .category .title:not([data-unread="0"])::after {
margin: 10px 0;
padding: 0 10px;
background: inherit;
font-size: 0.8rem;
position: absolute;
left: 0;
line-height: 0.9rem;
.aside.aside_feed .category .title:not([data-unread="0"])::after {
margin: 0.5em 0 0 0;
background-color: #f6f6f6;
color: #444;
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
margin: 0.75em 0 0 0;
background-color: white;
color: #444;
}
/*=== Aside main page (feeds) */

View File

@@ -626,14 +626,14 @@ a.btn {
}
/*=== Aside main page (categories) */
.aside_feed .category .title:not([data-unread="0"])::after {
margin: 10px 0;
padding: 0 10px;
background: inherit;
font-size: 0.9rem;
position: absolute;
right: 0;
line-height: 1.5rem;
.aside.aside_feed .category .title:not([data-unread="0"])::after {
background-color: #f6f6f6;
color: #444;
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
background-color: white;
color: #444;
}
/*=== Aside main page (feeds) */

View File

@@ -626,14 +626,14 @@ a.btn {
}
/*=== Aside main page (categories) */
.aside_feed .category .title:not([data-unread="0"])::after {
margin: 10px 0;
padding: 0 10px;
background: inherit;
font-size: 0.9rem;
position: absolute;
left: 0;
line-height: 1.5rem;
.aside.aside_feed .category .title:not([data-unread="0"])::after {
background-color: #f6f6f6;
color: #444;
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
background-color: white;
color: #444;
}
/*=== Aside main page (feeds) */

View File

@@ -603,13 +603,25 @@ a.signin {
/*=== Aside main page (categories) */
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
padding: 0px 5px;
font-size: 0.8rem;
margin: 0.5em 0 0 0;
background-color: white;
color: #428bca;
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
background-color: #5bc0de;
color: white;
}
.aside.aside_feed .category .title:not([data-unread="0"])::after {
right: 5px;
}
.aside.aside_feed .feed.active .item-title:not([data-unread="0"])::after {
background-color: transparent;
color: white;
border: 1px solid #fff;
border-radius: 3px;
position: absolute;
top: 0.25rem; right: 3px;
line-height: 1.5rem;
font-weight: bold;
}
.aside_feed .tree-folder.all .tree-folder-title {

View File

@@ -603,13 +603,25 @@ a.signin {
/*=== Aside main page (categories) */
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
padding: 0px 5px;
font-size: 0.8rem;
margin: 0.5em 0 0 0;
background-color: white;
color: #428bca;
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
background-color: #5bc0de;
color: white;
}
.aside.aside_feed .category .title:not([data-unread="0"])::after {
left: 5px;
}
.aside.aside_feed .feed.active .item-title:not([data-unread="0"])::after {
background-color: transparent;
color: white;
border: 1px solid #fff;
border-radius: 3px;
position: absolute;
top: 0.25rem; left: 3px;
line-height: 1.5rem;
font-weight: bold;
}
.aside_feed .tree-folder.all .tree-folder-title {

View File

@@ -673,12 +673,14 @@ a.btn {
}
/*=== Aside main page (categories) */
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
position: absolute;
right: 3px;
padding: 1px 5px;
color: #fff;
text-shadow: 0 1px rgba(255,255,255,0.08);
.aside.aside_feed .category .title:not([data-unread="0"])::after {
background-color: #d18114;
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
background-color: #222;
color: #ccc;
border: 1px solid #333;
}
.aside_feed .btn-important {

View File

@@ -673,12 +673,14 @@ a.btn {
}
/*=== Aside main page (categories) */
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
position: absolute;
left: 3px;
padding: 1px 5px;
color: #fff;
text-shadow: 0 1px rgba(255,255,255,0.08);
.aside.aside_feed .category .title:not([data-unread="0"])::after {
background-color: #d18114;
}
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
background-color: #222;
color: #ccc;
border: 1px solid #333;
}
.aside_feed .btn-important {

View File

@@ -614,14 +614,13 @@ form th {
right: 33px;
}
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
margin: 6px 0;
padding: 0 10px;
background: inherit;
font-size: 0.9rem;
position: absolute;
right: 0;
line-height: 1.5rem;
.aside_feed .category .title:not([data-unread="0"])::after {
background-color: #00488b;
color: #fcfcfc;
}
.aside_feed .feed .item-title:not([data-unread="0"])::after {
background-color: #0062be;
color: #fcfcfc;
}
.aside_feed .tree-folder-items .dropdown-menu::after {
left: 2px;

View File

File diff suppressed because one or more lines are too long

View File

@@ -614,14 +614,13 @@ form th {
left: 33px;
}
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
margin: 6px 0;
padding: 0 10px;
background: inherit;
font-size: 0.9rem;
position: absolute;
left: 0;
line-height: 1.5rem;
.aside_feed .category .title:not([data-unread="0"])::after {
background-color: #00488b;
color: #fcfcfc;
}
.aside_feed .feed .item-title:not([data-unread="0"])::after {
background-color: #0062be;
color: #fcfcfc;
}
.aside_feed .tree-folder-items .dropdown-menu::after {
right: 2px;

View File

@@ -780,14 +780,14 @@ form {
}
.aside_feed {
.tree-folder-title > .title:not([data-unread="0"])::after {
margin: 6px 0;
padding: 0 10px;
background: inherit;
font-size: 0.9rem;
position: absolute;
right: 0;
line-height: 1.5rem;
.category .title:not([data-unread="0"])::after {
background-color: #00488b;
color: #fcfcfc;
}
.feed .item-title:not([data-unread="0"])::after {
background-color: #0062be;
color: #fcfcfc;
}
.tree-folder-items .dropdown-menu::after {

View File

@@ -614,6 +614,10 @@ a.btn {
text-overflow: ellipsis;
}
.tree-folder-items .item.feed {
position: relative;
}
.tree-bottom {
visibility: hidden;
margin-bottom: 18em;
@@ -684,7 +688,7 @@ input[type="search"] {
}
.aside_feed .category .title:not([data-unread="0"]) {
width: calc(100% - 35px - 20px);
width: calc(100% - 75px);
}
.aside_feed .tree-folder-title .icon {
@@ -1310,21 +1314,42 @@ input:checked + .slide-container .properties {
/*=== DIVERS */
/*===========*/
.category .title:not([data-unread="0"])::after {
content: attr(data-unread);
}
.category .title.error::before {
content: "⚠ ";
color: #bd362f;
}
.feed .item-title:not([data-unread="0"])::before {
content: "(" attr(data-unread) ") ";
.category .title:not([data-unread="0"])::after,
.feed .item-title:not([data-unread="0"])::after {
margin: 0.75em 0 0 0;
padding: 5px 10px;
min-width: 20px;
display: block;
content: attr(data-unread);
position: absolute;
top: 0;
right: 10px;
text-align: center;
font-size: 0.9em;
border-radius: 12px;
line-height: 1;
font-weight: initial;
}
.feed .item-title:not([data-unread="0"])::after {
margin: 1em 0 0 0;
}
.feed.active .item-title:not([data-unread="0"])::after {
background-color: transparent;
color: white;
border: 1px solid #fff;
font-weight: bold;
}
.feed .item-title:not([data-unread="0"]) {
font-weight: bold;
width: calc(100% - 80px);
}
.state_unread .category:not(.active)[data-unread="0"],

View File

@@ -614,6 +614,10 @@ a.btn {
text-overflow: ellipsis;
}
.tree-folder-items .item.feed {
position: relative;
}
.tree-bottom {
visibility: hidden;
margin-bottom: 18em;
@@ -684,7 +688,7 @@ input[type="search"] {
}
.aside_feed .category .title:not([data-unread="0"]) {
width: calc(100% - 35px - 20px);
width: calc(100% - 75px);
}
.aside_feed .tree-folder-title .icon {
@@ -1310,21 +1314,42 @@ input:checked + .slide-container .properties {
/*=== DIVERS */
/*===========*/
.category .title:not([data-unread="0"])::after {
content: attr(data-unread);
}
.category .title.error::before {
content: "⚠ ";
color: #bd362f;
}
.feed .item-title:not([data-unread="0"])::before {
content: "(" attr(data-unread) ") ";
.category .title:not([data-unread="0"])::after,
.feed .item-title:not([data-unread="0"])::after {
margin: 0.75em 0 0 0;
padding: 5px 10px;
min-width: 20px;
display: block;
content: attr(data-unread);
position: absolute;
top: 0;
left: 10px;
text-align: center;
font-size: 0.9em;
border-radius: 12px;
line-height: 1;
font-weight: initial;
}
.feed .item-title:not([data-unread="0"])::after {
margin: 1em 0 0 0;
}
.feed.active .item-title:not([data-unread="0"])::after {
background-color: transparent;
color: white;
border: 1px solid #fff;
font-weight: bold;
}
.feed .item-title:not([data-unread="0"]) {
font-weight: bold;
width: calc(100% - 80px);
}
.state_unread .category:not(.active)[data-unread="0"],