From a8eb96309aade2602ac5b6d5daf74ca750bf2c77 Mon Sep 17 00:00:00 2001 From: Aadil Ayub Date: Thu, 6 Jan 2022 15:50:04 +0500 Subject: [PATCH] change video card colors &remove shadow --- themes/lumbung-theme/static/css/main.css | 7 ++--- themes/lumbung-theme/static/css/video-box.css | 26 +++++++++---------- 2 files changed, 15 insertions(+), 18 deletions(-) diff --git a/themes/lumbung-theme/static/css/main.css b/themes/lumbung-theme/static/css/main.css index 946d70f..2446b87 100644 --- a/themes/lumbung-theme/static/css/main.css +++ b/themes/lumbung-theme/static/css/main.css @@ -73,7 +73,6 @@ a { .card { border: 2px solid var(--border-color); - box-shadow:1em 1em 0 #d2d1c8; background-color: #fff09d; max-width: 600px; margin-bottom: 2em; @@ -294,7 +293,7 @@ footer.post-footer { .card.network { border: 2px solid darkcyan; - box-shadow:1em 1em 0 #d2d1c8; + background-color: lightgreen; max-width: min-content; margin-bottom: 2em; @@ -409,7 +408,7 @@ div.network-source { .card.shout { border-color: steelblue; border: 2px solid; - box-shadow:1em 1em 0 #d2d1c8; + background-color: aliceblue; max-width: min-content; margin-bottom: 2em; @@ -423,7 +422,6 @@ div.network-source { .card.calendar { border: 2px solid cornflowerblue; - box-shadow:1em 1em 0 #d2d1c8; background-color: lightblue; max-width: 360px; margin-bottom: 2em; @@ -431,7 +429,6 @@ div.network-source { margin: 0 3em 3em 0; align-self: start; color: royalblue; - } .card.calendar.past { diff --git a/themes/lumbung-theme/static/css/video-box.css b/themes/lumbung-theme/static/css/video-box.css index fb6ac4a..89565f8 100644 --- a/themes/lumbung-theme/static/css/video-box.css +++ b/themes/lumbung-theme/static/css/video-box.css @@ -1,14 +1,14 @@ :root { - --video-border-color: burlywood; - --video-background-color: antiquewhite; + --tv-dark: #237D0F; + --tv-light: #E2FAD7; } + .video-box { - border:2px solid var(--video-border-color); + border:2px solid var(--tv-dark); max-width:560px; margin:auto; - box-shadow:1em 1em 0 #d2d1c8; margin-bottom: 2em; - color: chocolate; + color: var(--tv-dark); } .video-box:nth-child(even){ @@ -37,7 +37,7 @@ } .video { - background-color: var(--video-background-color); + background-color: var(--tv-light); } .video .metadata{ @@ -48,8 +48,8 @@ .metadata .title{ margin-top:0; - border-top: 2px solid var(--video-border-color); - border-bottom: 2px solid var(--video-border-color); + border-top: 2px solid var(--tv-dark); + border-bottom: 2px solid var(--tv-dark); padding:0.5em; font-weight:700; font-size:1.3rem; @@ -57,20 +57,20 @@ } .video.channel{ - border-right: 2px solid var(--video-border-color); + border-right: 2px solid var(--tv-dark); padding: 0.5em 0.9em 0.5em 0.9em; font-size: 0.8rem; } .video.date { float:right; - border-left: 2px solid var(--video-border-color); + border-left: 2px solid var(--tv-dark); padding: 0.5em 0.9em 0.5em 0.9em; font-size: 0.8rem; } .video.description { - border-top: 2px solid var(--video-border-color); + border-top: 2px solid var(--tv-dark); padding: 0.8em 0.8em 0.8em 0.8em; } @@ -120,7 +120,7 @@ input:checked + label + .video.date +.description { .video-thumbnail-duration-overlay { display: inline-block; - background-color: var(--video-background-color); + background-color: var(--tv-light); color: chocolate; font-size: 14px; line-height: 1.1; @@ -129,7 +129,7 @@ input:checked + label + .video.date +.description { padding: 1px 3px 1px 3px; right: 5px; bottom: 5px; - border: 2px solid var(--video-border-color); + border: 2px solid var(--tv-dark); } .play-overlay {