dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-07-07 12:11:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improved user menu hover style

Browse source
This commit is contained in:
Send_Nukez 2021-11-08 00:27:57 +01:00
parent c5a1dd3f16
commit 2f706ed347
3 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -20,3 +20,4 @@ Improved:
- Better install script for MacOs/Linux - Better install script for MacOs/Linux
- `About` settings area is always open now - `About` settings area is always open now
- Context menus are now glassy - Context menus are now glassy
- User menu hover state

2
src/js/main.js
View file

@ -28,7 +28,7 @@ DribbblishShared.config.register({
name: "Round Sidebar Icons", name: "Round Sidebar Icons",
description: "If the Sidebar Icons should be round instead of square", description: "If the Sidebar Icons should be round instead of square",
defaultValue: false, defaultValue: false,
onChange: (val) => $("html").css("--sidebar-icons-border-radius", val ? "50%" : "var(--image-radius)") onChange: (val) => $("html").css("--sidebar-icons-border-radius", val ? "50vh" : "var(--image-radius)")
}); });
DribbblishShared.config.register({ DribbblishShared.config.register({

15
src/styles/main.scss
View file

@ -18,7 +18,7 @@
--cover-border-radius: 8px; --cover-border-radius: 8px;
--playbar-movement-anim-speed: 0.5s; --playbar-movement-anim-speed: 0.5s;
--image-radius: 10px; --image-radius: 10px;
--sidebar-icons-border-radius: 50%; --sidebar-icons-border-radius: 50vh; // 50vh = round / pill
--song-transition-speed: 3s; --song-transition-speed: 3s;
} }
@ -292,14 +292,13 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
} }
.cover-art, .cover-art,
.main-userWidget-box.update-avail,
.view-homeShortcutsGrid-shortcut, .view-homeShortcutsGrid-shortcut,
:not(.view-homeShortcutsGrid-imageWrapper) > .main-image-image:not(.main-avatar-image) { :not(.view-homeShortcutsGrid-imageWrapper) > .main-image-image:not(.main-avatar-image) {
border-radius: var(--image-radius) !important; border-radius: var(--image-radius) !important;
} }
.main-avatar-image, .main-avatar-image,
.main-userWidget-box:not(.update-avail), .main-userWidget-box,
.main-avatar-userIcon, .main-avatar-userIcon,
.view-homeShortcutsGrid-shortcutLink { .view-homeShortcutsGrid-shortcutLink {
border-radius: var(--sidebar-icons-border-radius) !important; border-radius: var(--sidebar-icons-border-radius) !important;
@ -310,8 +309,14 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
} }
.main-userWidget-box.update-avail { .main-userWidget-box.update-avail {
backdrop-filter: invert(0.1);
padding-right: 10px; padding-right: 10px;
background-color: spiceColor("subtext", 0.1) !important;
&:hover,
&:active,
&[data-context-menu-open="true"] {
background-color: spiceColor("subtext", 0.15) !important;
}
} }
.main-avatar-avatar.main-avatar-withBadge:after { .main-avatar-avatar.main-avatar-withBadge:after {
@ -812,7 +817,7 @@ li.GlueDropTarget {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 11px; font-size: 12px;
font-weight: 400; font-weight: 400;
letter-spacing: normal; letter-spacing: normal;
line-height: 16px; line-height: 16px;