From 392af71516a524b508a11e43296b1c2283a01929 Mon Sep 17 00:00:00 2001
From: Ashley <iamashley@duck.com>
Date: Sat, 31 Dec 2022 14:07:55 +0000
Subject: [PATCH] add dropdown menu

---
 css/poketube.css | 65 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/css/poketube.css b/css/poketube.css
index d777cab2..47ae59b4 100644
--- a/css/poketube.css
+++ b/css/poketube.css
@@ -126,11 +126,16 @@ a {
   color: var(--text-link);
 }
 
+
 .video > .info > .title {
   font-family: var(--text-font-primary);
   width: 10em;
 }
 
+.dropdown__menu > a {
+ text-decoration: none;
+}
+
 .video-info-panel > .video-title > a {
   white-space: nowrap;
 }
@@ -416,3 +421,63 @@ a {
   border: var(--div-border-color);
   border-style: solid;
 }
+
+ 
+.dropdown {
+	position: relative;
+	display: flex;
+}
+
+.dropdown > input[type="checkbox"] {
+	display: none;
+}
+
+.dropdown > label {
+	width: 100%;
+	height: 100%;
+	margin: -8px;
+	padding: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+  
+
+.dropdown__menu {
+	position: absolute;
+	z-index: 999;
+	display: none;
+  margin-right: 4em;
+	top: 40px;
+	padding: 6px 0;
+	margin: 0;
+	width: 300px;
+	border-radius: 8px;
+	box-shadow: var(--border-color) 0 0 5px;
+	background-color: var(--context-menu-background)
+}
+
+
+.dropdown__item {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 0 16px;
+	height: 40px;
+	column-gap: 16px;
+	color: var(--text-primary);
+	text-decoration: none;
+}
+
+.dropdown__item:hover {
+	background-color: var(--chip-background-hover);
+}
+
+.dropdown__item:active {
+	background-color: var(--chip-background-active);
+}
+
+.dropdown > input[type="checkbox"]:checked ~ div,
+.dropdown__menu:target {
+	display: block;
+}
\ No newline at end of file