General theme: improve thumbnail-img
This commit is contained in:
parent
5329ecfd08
commit
d899bc2df5
@ -321,6 +321,7 @@ hr {
|
|||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
background-color: var(--primary-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
.length {
|
.length {
|
||||||
@ -356,13 +357,6 @@ hr {
|
|||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail-img {
|
|
||||||
margin: auto;
|
|
||||||
display: block;
|
|
||||||
max-height: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-box {
|
.info-box {
|
||||||
grid-area: info-box;
|
grid-area: info-box;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
@ -4,6 +4,7 @@
|
|||||||
--secondary-hover: #73828c;
|
--secondary-hover: #73828c;
|
||||||
--secondary-focus: #616161;
|
--secondary-focus: #616161;
|
||||||
--secondary-inverse: #FFF;
|
--secondary-inverse: #FFF;
|
||||||
|
--primary-background:#303030;
|
||||||
--secondary-background: #424242;
|
--secondary-background: #424242;
|
||||||
--link: #22aaff;
|
--link: #22aaff;
|
||||||
--link-visited: #7755ff;
|
--link-visited: #7755ff;
|
||||||
|
@ -4,6 +4,7 @@
|
|||||||
--secondary-hover: #73828c;
|
--secondary-hover: #73828c;
|
||||||
--secondary-focus: rgba(115, 130, 140, 0.125);
|
--secondary-focus: rgba(115, 130, 140, 0.125);
|
||||||
--secondary-inverse: #FFF;
|
--secondary-inverse: #FFF;
|
||||||
|
--primary-background:#424242;
|
||||||
--secondary-background: #102027;
|
--secondary-background: #102027;
|
||||||
--link: #22aaff;
|
--link: #22aaff;
|
||||||
--link-visited: #7755ff;
|
--link-visited: #7755ff;
|
||||||
|
@ -4,6 +4,7 @@
|
|||||||
--secondary-hover: #415462;
|
--secondary-hover: #415462;
|
||||||
--secondary-focus: rgba(115, 130, 140, 0.125);
|
--secondary-focus: rgba(115, 130, 140, 0.125);
|
||||||
--secondary-inverse: #FFF;
|
--secondary-inverse: #FFF;
|
||||||
|
--primary-background:#CCC;
|
||||||
--secondary-background: #eeeeee;
|
--secondary-background: #eeeeee;
|
||||||
--link: #22aaff;
|
--link: #22aaff;
|
||||||
--link-visited: #7755ff;
|
--link-visited: #7755ff;
|
||||||
|
@ -291,6 +291,7 @@ hr {
|
|||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
background-color: var(--primary-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
.length {
|
.length {
|
||||||
@ -326,13 +327,6 @@ hr {
|
|||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail-img {
|
|
||||||
margin: auto;
|
|
||||||
display: block;
|
|
||||||
max-height: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-box {
|
.info-box {
|
||||||
grid-area: info-box;
|
grid-area: info-box;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
@ -301,6 +301,7 @@ hr {
|
|||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
background-color: var(--primary-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
.length {
|
.length {
|
||||||
@ -336,13 +337,6 @@ hr {
|
|||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail-img {
|
|
||||||
margin: auto;
|
|
||||||
display: block;
|
|
||||||
max-height: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-box {
|
.info-box {
|
||||||
grid-area: info-box;
|
grid-area: info-box;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
@ -351,6 +351,7 @@ hr {
|
|||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
background-color: var(--primary-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
@ -295,6 +295,7 @@ hr {
|
|||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
background-color: var(--primary-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
.length {
|
.length {
|
||||||
@ -330,13 +331,6 @@ hr {
|
|||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail-img {
|
|
||||||
margin: auto;
|
|
||||||
display: block;
|
|
||||||
max-height: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-box {
|
.info-box {
|
||||||
grid-area: info-box;
|
grid-area: info-box;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
@ -430,6 +430,7 @@ label[for=options-toggle-cbox] {
|
|||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
background-color: var(--primary-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
.length {
|
.length {
|
||||||
|
@ -23,11 +23,11 @@
|
|||||||
<a class="thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
|
<a class="thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
|
||||||
<div class="thumbnail {% if info['type'] == 'channel' %} channel {% endif %}">
|
<div class="thumbnail {% if info['type'] == 'channel' %} channel {% endif %}">
|
||||||
{% if lazy_load %}
|
{% if lazy_load %}
|
||||||
<img class="thumbnail-img lazy" alt="thumbnail" data-src="{{ info['thumbnail'] }}">
|
<img class="thumbnail-img lazy" alt=" " data-src="{{ info['thumbnail'] }}">
|
||||||
{% elif info['type'] == 'channel' %}
|
{% elif info['type'] == 'channel' %}
|
||||||
<img class="thumbnail-img channel" alt="thumbnail" src="{{ info['thumbnail'] }}">
|
<img class="thumbnail-img channel" alt=" " src="{{ info['thumbnail'] }}">
|
||||||
{% else %}
|
{% else %}
|
||||||
<img class="thumbnail-img" alt="thumbnail" src="{{ info['thumbnail'] }}">
|
<img class="thumbnail-img" alt=" " src="{{ info['thumbnail'] }}">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if info['type'] != 'channel' %}
|
{% if info['type'] != 'channel' %}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user