mirror of
https://github.com/th-ch/youtube-music.git
synced 2026-01-10 10:11:46 +00:00
158 lines
3.2 KiB
CSS
158 lines
3.2 KiB
CSS
:root {
|
|
--titlebar-background-color: #030303;
|
|
--menu-bar-height: 36px;
|
|
}
|
|
|
|
title-bar {
|
|
-webkit-app-region: drag;
|
|
box-sizing: border-box;
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 10000000;
|
|
|
|
width: 100%;
|
|
height: var(--menu-bar-height, 36px);
|
|
|
|
display: flex;
|
|
flex-flow: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
gap: 4px;
|
|
|
|
color: #f1f1f1;
|
|
font-size: 14px;
|
|
padding: 4px 12px;
|
|
background-color: var(--titlebar-background-color, #030303);
|
|
user-select: none;
|
|
|
|
transition: opacity 200ms ease 0s, background-color 300ms cubic-bezier(0.2, 0, 0.6, 1) 0s;
|
|
}
|
|
|
|
menu-button {
|
|
-webkit-app-region: none;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-self: stretch;
|
|
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
|
|
cursor: pointer;
|
|
}
|
|
menu-button:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
menu-panel {
|
|
position: fixed;
|
|
top: var(--y, 0);
|
|
left: var(--x, 0);
|
|
|
|
max-height: calc(100vh - var(--menu-bar-height, 36px) - 16px - var(--y, 0));
|
|
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
|
|
overflow: auto;
|
|
padding: 4px;
|
|
border-radius: 8px;
|
|
pointer-events: none;
|
|
background-color: color-mix(in srgb, var(--titlebar-background-color, #030303) 50%, rgba(0, 0, 0, 0.1));
|
|
backdrop-filter: blur(8px);
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
|
|
z-index: 0;
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
transform-origin: top left;
|
|
|
|
transition: opacity 200ms ease 0s, transform 200ms ease 0s;
|
|
}
|
|
menu-panel[open="true"] {
|
|
pointer-events: all;
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
menu-item {
|
|
-webkit-app-region: none;
|
|
min-height: 32px;
|
|
height: 32px;
|
|
|
|
display: grid;
|
|
grid-template-columns: 32px 1fr minmax(32px, auto);
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
menu-item:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
menu-item > menu-icon {
|
|
height: 32px;
|
|
padding: 4px;
|
|
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
menu-separator {
|
|
min-height: 1px;
|
|
height: 1px;
|
|
margin: 4px 0;
|
|
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* classes */
|
|
|
|
.title-bar-icon {
|
|
height: calc(100% - 8px);
|
|
object-fit: cover;
|
|
margin-left: -4px;
|
|
}
|
|
|
|
/* youtube-music style */
|
|
|
|
ytmusic-app-layout {
|
|
margin-top: var(--menu-bar-height, 36px) !important;
|
|
}
|
|
|
|
ytmusic-app-layout>[slot=nav-bar], #nav-bar-background.ytmusic-app-layout {
|
|
top: var(--menu-bar-height, 36px) !important;
|
|
}
|
|
#nav-bar-divider.ytmusic-app-layout {
|
|
top: calc(var(--ytmusic-nav-bar-height) + var(--menu-bar-height, 36px)) !important;
|
|
}
|
|
ytmusic-app[is-bauhaus-sidenav-enabled] #guide-spacer.ytmusic-app,
|
|
ytmusic-app[is-bauhaus-sidenav-enabled] #mini-guide-spacer.ytmusic-app {
|
|
margin-top: calc(var(--ytmusic-nav-bar-height) + var(--menu-bar-height, 36px)) !important;
|
|
}
|
|
|
|
|
|
html::-webkit-scrollbar {
|
|
width: 12px !important;
|
|
}
|
|
|
|
html::-webkit-scrollbar-thumb {
|
|
border: solid 2px var(--titlebar-background-color, #030303) !important;
|
|
border-radius: 100px !important;
|
|
}
|
|
|
|
html::-webkit-scrollbar-track {
|
|
background: var(--titlebar-background-color, #030303) !important;
|
|
}
|
|
|
|
html::-webkit-scrollbar-track-piece:start {
|
|
background: transparent;
|
|
margin-top: var(--menu-bar-height, 36px);
|
|
}
|