From 0e5f7161846615105506bf4de4bce706b96e0da4 Mon Sep 17 00:00:00 2001 From: Ashley Date: Sun, 1 Jan 2023 18:14:35 +0000 Subject: [PATCH] add hover effects!! --- css/poketube.css | 87 ++++++++++++++++++++++++++---------------------- 1 file changed, 47 insertions(+), 40 deletions(-) diff --git a/css/poketube.css b/css/poketube.css index fef7271c..333b7495 100644 --- a/css/poketube.css +++ b/css/poketube.css @@ -61,6 +61,7 @@ #623aa2 100%, #8e6f7e 100% ); + --chip-background-hover: #3f3f3f; --ptd-watch-min-player-height: 360px; --ptd-watch-width-ratio: 16; @@ -126,14 +127,13 @@ a { color: var(--text-link); } - .video > .info > .title { font-family: var(--text-font-primary); width: 10em; } .dropdown__menu > a { - text-decoration: none; + text-decoration: none; } .video-info-panel > .video-title > a { @@ -148,8 +148,7 @@ a { word-break: break-all; font-family: var(--text-font-primary) !important; font-stretch: extra-expanded; - font-weight: 900 !important; - + font-weight: 900 !important; } .video-sub-info.description { @@ -294,7 +293,6 @@ a { font-stretch: expanded; } - .comments-author { margin: 7px; font-family: var(--text-font-primary); @@ -439,62 +437,71 @@ a { border-style: solid; } - .dropdown { - position: relative; - display: flex; + position: relative; + display: flex; } .dropdown > input[type="checkbox"] { - display: none; + display: none; } .dropdown > label { - width: 100%; - height: 100%; - margin: -8px; - padding: 8px; - display: flex; - align-items: center; - justify-content: center; + 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; + 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) + 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; + 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); + background-color: var(--chip-background-hover); } .dropdown__item:active { - background-color: var(--chip-background-active); + background-color: var(--chip-background-active); } .dropdown > input[type="checkbox"]:checked ~ div, .dropdown__menu:target { - display: block; -} \ No newline at end of file + display: block; +} + +.new-button.engagement:hover { + background-color: #0009; +} + +div.new-button:hover { + background-color: #0008; +} + +a.new-button:hover { + background-color: #0008; +}