From 413941e6423ca8e534a1de354de67adcaf77804a Mon Sep 17 00:00:00 2001
From: girst <tobi@isticktoit.net>
Date: Thu, 8 Oct 2020 16:22:11 +0200
Subject: [PATCH] better <details> css

---
 app/browse/templates/channel.html.j2 |  2 +-
 app/static/style.css                 | 20 ++++++++++++++++++++
 app/youtube/templates/watch.html.j2  | 10 +++++-----
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/app/browse/templates/channel.html.j2 b/app/browse/templates/channel.html.j2
index 6f0303b..1ccc499 100644
--- a/app/browse/templates/channel.html.j2
+++ b/app/browse/templates/channel.html.j2
@@ -7,7 +7,7 @@
 <img height=200 align=left src="{{ channel_img[channel_img.largest] }}" style="margin:.5em">
 -->
 <h1>{{ title | e }} <small>{{ macros.emoji_button("subscribe", channel_id, is_subscribed) if channel_id }}</small></h1>
-<details><summary>About</summary><p style="white-space: pre-wrap">{{ channel_desc }}<hr></details>
+<details><summary>About</summary><p style="white-space: pre-wrap">{{ channel_desc }}</details>
 <div style=clear:both></div>
 <div id="subpages" style="display:flex;margin:1em">
 	<div style="flex:1">
diff --git a/app/static/style.css b/app/static/style.css
index b866085..ec5e3bf 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -231,6 +231,26 @@ ul#submgr{list-style: none}
   margin: 1em 0;
 }
 
+details[open]:not(.advanced) {
+  border: 1px solid #444;
+  border-radius: 3px 3px 0 0;
+  border-top: none
+}
+details:not(.advanced) summary {
+  border-radius: 3px 3px 0 0;
+  padding: .25em;
+}
+details[open]:not(.advanced) summary {
+  background: #444;
+}
+details[open]:not(.advanced) summary:hover,
+details[open]:not(.advanced) summary:active {
+  background: #555;
+}
+details:not(.advanced)>*:not(:first-child) {
+  margin: 1em;
+}
+
 .video_error {
   width: 100%;
   background: #ff3333;
diff --git a/app/youtube/templates/watch.html.j2 b/app/youtube/templates/watch.html.j2
index a89e78f..8add24c 100644
--- a/app/youtube/templates/watch.html.j2
+++ b/app/youtube/templates/watch.html.j2
@@ -70,8 +70,8 @@ var sha256=function a(b){function c(a,b){return a>>>b|a<<32-b}for(var d,e,f=Math
 <small><a href="/channel/{{ channel_id }}/">{{ author | e }}</a></small></h1>
 
 <details><summary>Description</summary>
-	<p style="white-space:pre-wrap">{{ description | e }}
-<hr></details>
+	<p style="white-space:pre-wrap">{{ description | e }}</p>
+</details>
 
 <details><summary>Metadata</summary>
 	<dl>
@@ -99,7 +99,7 @@ var sha256=function a(b){function c(a,b){return a>>>b|a<<32-b}for(var d,e,f=Math
 	<dd>{{ blacklisted | join(', ') }}
 	{% endif %}
 	</dl>
-<hr></details>
+</details>
 
 <details><summary>More Actions</summary>
 	<ul class="more-actions">
@@ -114,7 +114,7 @@ var sha256=function a(b){function c(a,b){return a>>>b|a<<32-b}for(var d,e,f=Math
 	<li><a href="https://invidious.snopyta.org/watch?v={{ video_id }}">watch on invidious</a>
 	<li><a href="https://youtu.be/{{ video_id }}">watch on youtube</a>
 	</ul>
-<hr></details>
+</details>
 
 <details><summary>Info- and Endcards</summary>
 	<div class="cards">
@@ -123,5 +123,5 @@ var sha256=function a(b){function c(a,b){return a>>>b|a<<32-b}for(var d,e,f=Math
 	{% endfor %}
 	{{ macros.dummycard() }}
 	</div>
-<hr></details>
+</details>
 {% endblock %}
-- 
2.39.3