diff --git a/src/plugins/in-app-menu/titlebar.css b/src/plugins/in-app-menu/titlebar.css index 2614a529..259081ff 100644 --- a/src/plugins/in-app-menu/titlebar.css +++ b/src/plugins/in-app-menu/titlebar.css @@ -3,220 +3,6 @@ --menu-bar-height: 32px; } -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: 12px; - padding: 4px 12px 4px var(--offset-left, 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-panel.position-by-bottom { - top: unset; - bottom: calc(100vh - var(--y, 100%)); - max-height: calc(var(--y, 0) - var(--menu-bar-height, 36px) - 16px); -} - -.menu-item { - position: relative; - - -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.badge { - grid-template-columns: 32px 1fr auto minmax(32px, auto); -} -.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); -} - -.menu-item-badge { - display: flex; - justify-content: center; - align-items: center; - - min-width: 16px; - height: 16px; - padding: 0 4px; - margin-left: 8px; - - border-radius: 4px; - background-color: rgba(255, 255, 255, 0.2); - color: #f1f1f1; - font-size: 10px; - font-weight: 500; - line-height: 1; -} - -.menu-item-tooltip { - position: fixed; - - left: var(--x, 0); - top: var(--y, 0); - - display: flex; - justify-content: center; - align-items: center; - - min-width: 32px; - padding: 4px; - - border-radius: 4px; - background-color: rgba(25, 25, 25, 0.8); - color: #f1f1f1; - font-size: 10px; - - pointer-events: none; - z-index: 1000; - - opacity: 0; - scale: 0.9; - - transform-origin: 50% 0; - transition: opacity 0.225s ease-out, scale 0.225s ease-out; -} -.menu-item-tooltip.show { - opacity: 1; - scale: 1.0; -} - -/* classes */ - -.title-bar-icon { - height: calc(100% - 8px); - object-fit: cover; - margin-left: -4px; -} - -/* Window control container */ - -.window-controls-container { - -webkit-app-region: no-drag; - display: flex; - justify-content: flex-end; /* Align to the right end of the title-bar */ - align-items: center; - gap: 4px; /* Add spacing between the window control buttons */ - position: absolute; /* Position it absolutely within title-bar */ - right: 4px; /* Adjust the right position as needed */ -} - -/* Window control buttons */ - -.window-control { - width: 24px; - height: 24px; - background: none; - border: none; - cursor: pointer; - display: flex; - align-items: center; - color: #f1f1f1; - font-size: 14px; - padding: 0; -} - /* youtube-music style */ ytmusic-app-layout {