forked from ruangrupa/lumbung.space
Merge branch 'main' of ssh://git.autonomic.zone:2222/ruangrupa/living-room into main
This commit is contained in:
cellarspoon
commit
36d5d2c976
|
|
@ -1,4 +1,5 @@
|
||||||
*.lock
|
*.lock
|
||||||
.env
|
.env
|
||||||
|
.venv/
|
||||||
/content/
|
/content/
|
||||||
/public/
|
/public/
|
||||||
|
|
|
||||||
|
|
@ -41,85 +41,84 @@ body {
|
||||||
font-family: ZenMaruGothic;
|
font-family: ZenMaruGothic;
|
||||||
color: maroon;
|
color: maroon;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #1B4C8A;
|
color: #1B4C8A;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
margin: 2em auto;
|
margin: 2em auto;
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card{
|
.card {
|
||||||
|
border: 2px solid var(--border-color);
|
||||||
|
box-shadow:1em 1em 0 #d2d1c8;
|
||||||
|
background-color: #fff09d;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
flex: auto;
|
||||||
|
margin: 0 3em 3em 0;
|
||||||
|
align-self: start;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
border: 2px solid var(--border-color);
|
.card {
|
||||||
box-shadow:1em 1em 0 #d2d1c8;
|
background-color: peachpuff;
|
||||||
background-color: #fff09d;
|
}
|
||||||
max-width: 600px;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
flex: auto;
|
|
||||||
margin: 0 3em 3em 0;
|
|
||||||
align-self: start;
|
|
||||||
|
|
||||||
}
|
.side-bar {
|
||||||
|
border: 2px solid var(--border-color);
|
||||||
.card{
|
max-width: 400px;
|
||||||
background-color: peachpuff;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.side-bar {
|
|
||||||
border: 2px solid var(--border-color);
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.card:nth-child(even){
|
.card:nth-child(even) {
|
||||||
transform: rotate(-1deg);
|
transform: rotate(-1deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:nth-child(odd){
|
.card:nth-child(odd) {
|
||||||
transform: rotate(1deg);
|
transform: rotate(1deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:nth-child(5){
|
.card:nth-child(5) {
|
||||||
transform: rotate(2deg);
|
transform: rotate(2deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.video.box{
|
.video.box {
|
||||||
margin-top:3em;
|
margin-top:3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar{
|
.bar {
|
||||||
border: 2px solid var(--border-color);
|
border: 2px solid var(--border-color);
|
||||||
box-shadow: 0.6em 0.6em 0 #d2d1c8;
|
box-shadow: 0.6em 0.6em 0 #d2d1c8;
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
margin-top:3em;
|
margin-top:3em;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: #fff09d;
|
background-color: #fff09d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-feed{
|
.h-feed {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.entries{
|
.entries {
|
||||||
padding-top: 10%;
|
padding-top: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* base header & menu */
|
/* base header & menu */
|
||||||
|
|
||||||
#top-menu{
|
#top-menu {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 5%;
|
left: 5%;
|
||||||
transform: translate(-50%);
|
transform: translate(-50%);
|
||||||
|
|
@ -153,10 +152,10 @@ body {
|
||||||
border-top: 2px solid var(--border-color);
|
border-top: 2px solid var(--border-color);
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu ul{
|
.menu ul {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -176,7 +175,7 @@ body {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-entry header h2{
|
.h-entry header h2 {
|
||||||
padding: 0.2em;
|
padding: 0.2em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-right: 0.3em;
|
padding-right: 0.3em;
|
||||||
|
|
@ -185,9 +184,9 @@ body {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-entry header h2:hover{
|
.h-entry header h2:hover {
|
||||||
box-shadow: inset 4px 4px 0px tomato;
|
box-shadow: inset 4px 4px 0px tomato;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-entry header h2 a {
|
.h-entry header h2 a {
|
||||||
|
|
@ -196,7 +195,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.h-entry header .header-metadata{
|
.h-entry header .header-metadata {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column wrap;
|
flex-flow: column wrap;
|
||||||
|
|
@ -232,17 +231,17 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-image > img {
|
.summary-image > img {
|
||||||
/* height: 100%;
|
/* height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
max-width: 100%;*/
|
max-width: 100%;*/
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-image > a {
|
.summary-image > a {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-image{
|
.summary-image {
|
||||||
border-right: 2px solid var(--border-color);
|
border-right: 2px solid var(--border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -255,6 +254,7 @@ footer.post-footer {
|
||||||
border-top: 2px solid var(--border-color);
|
border-top: 2px solid var(--border-color);
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.read-more {
|
.read-more {
|
||||||
border-top: 2px solid var(--border-color);
|
border-top: 2px solid var(--border-color);
|
||||||
border-left: 2px solid var(--border-color);
|
border-left: 2px solid var(--border-color);
|
||||||
|
|
@ -265,18 +265,17 @@ footer.post-footer {
|
||||||
|
|
||||||
/* network cards */
|
/* network cards */
|
||||||
|
|
||||||
.card.network{
|
.card.network {
|
||||||
|
border: 2px solid darkcyan;
|
||||||
border: 2px solid darkcyan;
|
box-shadow:1em 1em 0 #d2d1c8;
|
||||||
box-shadow:1em 1em 0 #d2d1c8;
|
background-color: lightgreen;
|
||||||
background-color: lightgreen;
|
max-width: min-content;
|
||||||
max-width: min-content;
|
margin-bottom: 2em;
|
||||||
margin-bottom: 2em;
|
flex: auto;
|
||||||
flex: auto;
|
margin: 0 3em 3em 0;
|
||||||
margin: 0 3em 3em 0;
|
align-self: start;
|
||||||
align-self: start;
|
color: darkcyan;
|
||||||
color: darkcyan;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.h-entry.network header {
|
.h-entry.network header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -284,15 +283,15 @@ footer.post-footer {
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-entry.network header h2{
|
.h-entry.network header h2 {
|
||||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-entry.network header h2:hover{
|
.h-entry.network header h2:hover {
|
||||||
box-shadow: inset 4px 4px 0px darkcyan;
|
box-shadow: inset 4px 4px 0px darkcyan;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-entry.network header h2 a {
|
.h-entry.network header h2 a {
|
||||||
|
|
@ -305,7 +304,7 @@ footer.post-footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
.network .header-metadata .dt-published{
|
.network .header-metadata .dt-published{
|
||||||
|
|
||||||
border-bottom: 2px solid darkcyan;
|
border-bottom: 2px solid darkcyan;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -344,7 +343,7 @@ footer.post-footer {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.network-source{
|
div.network-source {
|
||||||
padding: 0.5em 1em 0.5em 1em;
|
padding: 0.5em 1em 0.5em 1em;
|
||||||
border-bottom: 2px solid darkcyan;
|
border-bottom: 2px solid darkcyan;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
@ -357,12 +356,12 @@ div.network-source{
|
||||||
color: darkcyan;
|
color: darkcyan;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network .footer-filler{
|
.network .footer-filler {
|
||||||
border-left: 2px solid darkcyan;
|
border-left: 2px solid darkcyan;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network footer.post-footer{
|
.network footer.post-footer {
|
||||||
border-top: 2px solid darkcyan;
|
border-top: 2px solid darkcyan;
|
||||||
flex-flow: row;
|
flex-flow: row;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
|
|
@ -380,32 +379,32 @@ div.network-source{
|
||||||
|
|
||||||
/* shouts cards */
|
/* shouts cards */
|
||||||
|
|
||||||
.card.shout{
|
.card.shout {
|
||||||
border-color: steelblue;
|
border-color: steelblue;
|
||||||
border: 2px solid;
|
border: 2px solid;
|
||||||
box-shadow:1em 1em 0 #d2d1c8;
|
box-shadow:1em 1em 0 #d2d1c8;
|
||||||
background-color: aliceblue;
|
background-color: aliceblue;
|
||||||
max-width: min-content;
|
max-width: min-content;
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
flex: auto;
|
flex: auto;
|
||||||
margin: 0 3em 3em 0;
|
margin: 0 3em 3em 0;
|
||||||
align-self: start;
|
align-self: start;
|
||||||
color: steelblue;
|
color: steelblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* calendar cards */
|
/* calendar cards */
|
||||||
|
|
||||||
.card.calendar {
|
.card.calendar {
|
||||||
border: 2px solid cornflowerblue;
|
border: 2px solid cornflowerblue;
|
||||||
box-shadow:1em 1em 0 #d2d1c8;
|
box-shadow:1em 1em 0 #d2d1c8;
|
||||||
background-color: lightblue;
|
background-color: lightblue;
|
||||||
max-width: 360px;
|
max-width: 360px;
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
flex: auto;
|
flex: auto;
|
||||||
margin: 0 3em 3em 0;
|
margin: 0 3em 3em 0;
|
||||||
align-self: start;
|
align-self: start;
|
||||||
color: royalblue;
|
color: royalblue;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.calendar.past {
|
.card.calendar.past {
|
||||||
|
|
@ -421,15 +420,15 @@ div.network-source{
|
||||||
border-bottom: 2px solid cornflowerblue;
|
border-bottom: 2px solid cornflowerblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-event.calendar header h2{
|
.h-event.calendar header h2 {
|
||||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-event.calendar header h2:hover{
|
.h-event.calendar header h2:hover {
|
||||||
box-shadow: inset 4px 4px 0px royalblue;
|
box-shadow: inset 4px 4px 0px royalblue;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-event.calendar header h2 a {
|
.h-event.calendar header h2 a {
|
||||||
|
|
@ -438,17 +437,17 @@ div.network-source{
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-filler {
|
.header-filler {
|
||||||
min-width: 10%;
|
min-width: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendar-location{
|
.calendar-location {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
min-width: 20%;
|
min-width: 20%;
|
||||||
padding: 0.5em 0.9em 0.5em 0.9em;
|
padding: 0.5em 0.9em 0.5em 0.9em;
|
||||||
border-left: 2px solid cornflowerblue;
|
border-left: 2px solid cornflowerblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendar-duration{
|
.calendar-duration {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
border-right: 2px solid cornflowerblue;
|
border-right: 2px solid cornflowerblue;
|
||||||
padding: 0.5em 0.9em 0.5em 0.9em;
|
padding: 0.5em 0.9em 0.5em 0.9em;
|
||||||
|
|
@ -499,13 +498,13 @@ div.network-source{
|
||||||
}
|
}
|
||||||
|
|
||||||
input + label +.calendar-location+.description{
|
input + label +.calendar-location+.description{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:checked + label +.calendar-location+.description {
|
input:checked + label +.calendar-location+.description {
|
||||||
display: block;
|
display: block;
|
||||||
transition: ease .5s;
|
transition: ease .5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metadata label {
|
.metadata label {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -521,7 +520,7 @@ label:hover {
|
||||||
box-shadow: inset 2px 2px 0px #95948c;
|
box-shadow: inset 2px 2px 0px #95948c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description{
|
.description {
|
||||||
padding: 0.5em 0.7em 0.7em 0.5em;
|
padding: 0.5em 0.7em 0.7em 0.5em;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
|
|
@ -535,59 +534,58 @@ label:hover {
|
||||||
|
|
||||||
/* Paginator */
|
/* Paginator */
|
||||||
|
|
||||||
nav.pagination{
|
nav.pagination {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.pagination{
|
ul.pagination {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly; /* align horizontal */
|
justify-content: space-evenly; /* align horizontal */
|
||||||
align-items: center; /* align vertical */
|
align-items: center; /* align vertical */
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-item{
|
.page-item {
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
|
||||||
font-size: 38px;
|
font-size: 38px;
|
||||||
border: 2px solid #1B4C8A;
|
border: 2px solid #1B4C8A;
|
||||||
box-shadow:0.4em 0.4em 0 #d2d1c8;
|
box-shadow:0.4em 0.4em 0 #d2d1c8;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
li.page-item{
|
li.page-item {
|
||||||
background-color: lightblue;
|
background-color: lightblue;
|
||||||
padding: 0.4em;
|
padding: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
li.page-item.active{
|
li.page-item.active {
|
||||||
background-color: peachpuff;
|
background-color: peachpuff;
|
||||||
border: 2px solid tomato;
|
border: 2px solid tomato;
|
||||||
padding: 0.4em;
|
padding: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
li.page-item.disabled{
|
li.page-item.disabled {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
li.page-item:nth-child(even){
|
li.page-item:nth-child(even) {
|
||||||
transform: rotate(-1deg);
|
transform: rotate(-1deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
li.page-item:nth-child(odd){
|
li.page-item:nth-child(odd) {
|
||||||
transform: rotate(1deg);
|
transform: rotate(1deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
li.page-item:nth-child(5){
|
li.page-item:nth-child(5) {
|
||||||
transform: rotate(2deg);
|
transform: rotate(2deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
li.page-item:nth-child(8){
|
li.page-item:nth-child(8) {
|
||||||
transform: rotate(-3deg);
|
transform: rotate(-3deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,122 +2,122 @@
|
||||||
--video-border-color: burlywood;
|
--video-border-color: burlywood;
|
||||||
--video-background-color: antiquewhite;
|
--video-background-color: antiquewhite;
|
||||||
}
|
}
|
||||||
.video-box {
|
.video-box {
|
||||||
border:2px solid var(--video-border-color);
|
border:2px solid var(--video-border-color);
|
||||||
max-width:560px;
|
max-width:560px;
|
||||||
margin:auto;
|
margin:auto;
|
||||||
box-shadow:1em 1em 0 #d2d1c8;
|
box-shadow:1em 1em 0 #d2d1c8;
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
color: chocolate;
|
color: chocolate;
|
||||||
}
|
|
||||||
|
|
||||||
.video-box:nth-child(even){
|
|
||||||
transform: rotate(-1deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-box:nth-child(odd){
|
|
||||||
transform: rotate(1deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-box:nth-child(5){
|
|
||||||
transform: rotate(3deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.video-box img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-box iframe {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-box .media {
|
.video-box:nth-child(even){
|
||||||
line-height: 0;
|
transform: rotate(-1deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.video {
|
.video-box:nth-child(odd){
|
||||||
background-color: var(--video-background-color);
|
transform: rotate(1deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.video .metadata{
|
.video-box:nth-child(5){
|
||||||
font-size:0.9rem;
|
transform: rotate(3deg);
|
||||||
justify-content: space-between;
|
}
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metadata .title{
|
|
||||||
margin-top:0;
|
|
||||||
border-top: 2px solid var(--video-border-color);
|
|
||||||
border-bottom: 2px solid var(--video-border-color);
|
|
||||||
padding:0.5em;
|
|
||||||
font-weight:700;
|
|
||||||
font-size:1.3rem;
|
|
||||||
flex-basis: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video.channel{
|
.video-box img {
|
||||||
border-right: 2px solid var(--video-border-color);
|
max-width: 100%;
|
||||||
padding: 0.5em 0.9em 0.5em 0.9em;
|
}
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video.date {
|
.video-box iframe {
|
||||||
float:right;
|
max-width: 100%;
|
||||||
border-left: 2px solid var(--video-border-color);
|
}
|
||||||
padding: 0.5em 0.9em 0.5em 0.9em;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video.description {
|
.video-box .media {
|
||||||
border-top: 2px solid var(--video-border-color);
|
line-height: 0;
|
||||||
padding: 0.8em 0.8em 0.8em 0.8em;
|
}
|
||||||
|
|
||||||
}
|
.video {
|
||||||
.descr_button a {
|
background-color: var(--video-background-color);
|
||||||
color:inherit;
|
}
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
input.descr_button {
|
.video .metadata{
|
||||||
display: none;
|
font-size:0.9rem;
|
||||||
}
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
input + label + .video.date + .description{
|
.metadata .title{
|
||||||
display: none;
|
margin-top:0;
|
||||||
}
|
border-top: 2px solid var(--video-border-color);
|
||||||
|
border-bottom: 2px solid var(--video-border-color);
|
||||||
|
padding:0.5em;
|
||||||
|
font-weight:700;
|
||||||
|
font-size:1.3rem;
|
||||||
|
flex-basis: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
input:checked + label + .video.date +.description {
|
.video.channel{
|
||||||
display: block;
|
border-right: 2px solid var(--video-border-color);
|
||||||
}
|
padding: 0.5em 0.9em 0.5em 0.9em;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
.play-icon {
|
.video.date {
|
||||||
width: 0;
|
float:right;
|
||||||
height: 0;
|
border-left: 2px solid var(--video-border-color);
|
||||||
position: absolute;
|
padding: 0.5em 0.9em 0.5em 0.9em;
|
||||||
left: 50%;
|
font-size: 0.8rem;
|
||||||
top: 50%;
|
}
|
||||||
transform: translate(-50%,-50%) scale(.5);
|
|
||||||
border-top: 13px solid transparent;
|
.video.description {
|
||||||
border-bottom: 13px solid transparent;
|
border-top: 2px solid var(--video-border-color);
|
||||||
border-left: 18px solid hsla(0,0%,100%,.95);
|
padding: 0.8em 0.8em 0.8em 0.8em;
|
||||||
}
|
|
||||||
|
}
|
||||||
|
.descr_button a {
|
||||||
|
color:inherit;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.descr_button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input + label + .video.date + .description{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + label + .video.date +.description {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-icon {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%,-50%) scale(.5);
|
||||||
|
border-top: 13px solid transparent;
|
||||||
|
border-bottom: 13px solid transparent;
|
||||||
|
border-left: 18px solid hsla(0,0%,100%,.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-thumbnail {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.video-thumbnail {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #ececec;
|
||||||
|
transition: filter .2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
.video-thumbnail {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
.video-thumbnail {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: #ececec;
|
|
||||||
transition: filter .2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-thumbnail-duration-overlay {
|
.video-thumbnail-duration-overlay {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: var(--video-background-color);
|
background-color: var(--video-background-color);
|
||||||
|
|
@ -130,26 +130,26 @@
|
||||||
right: 5px;
|
right: 5px;
|
||||||
bottom: 5px;
|
bottom: 5px;
|
||||||
border: 2px solid var(--video-border-color);
|
border: 2px solid var(--video-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.play-overlay {
|
.play-overlay {
|
||||||
transition: all .2s ease;
|
transition: all .2s ease;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
background-color: rgba(0,0,0,.3);
|
background-color: rgba(0,0,0,.3);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-thumbnail:hover {
|
.video-thumbnail:hover {
|
||||||
text-decoration:none!important
|
text-decoration:none !important;
|
||||||
}
|
}
|
||||||
.video-thumbnail:hover .play-overlay {
|
.video-thumbnail:hover .play-overlay {
|
||||||
opacity:1
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.video-thumbnail:hover .play-overlay .play-icon {
|
.video-thumbnail:hover .play-overlay .play-icon {
|
||||||
transform:translate(-50%,-50%) scale(1)
|
transform:translate(-50%,-50%) scale(1);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue