mirror of
https://github.com/danbulant/dribbblish-dynamic-theme
synced 2026-05-26 05:22:05 +00:00
Compile Webpack
This commit is contained in:
parent
f2e123314d
commit
a44e0f91da
2 changed files with 244 additions and 245 deletions
277
dist/dribbblish-dynamic.js
vendored
277
dist/dribbblish-dynamic.js
vendored
File diff suppressed because one or more lines are too long
212
dist/user.css
vendored
212
dist/user.css
vendored
|
|
@ -1,3 +1,101 @@
|
|||
#dribbblish-config {
|
||||
display: none;
|
||||
z-index: 99999;
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--spice-text); }
|
||||
#dribbblish-config[active] {
|
||||
display: flex; }
|
||||
#dribbblish-config .dribbblish-config-container {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
width: clamp(500px, 50%, 650px);
|
||||
background-color: rgba(var(--spice-rgb-main), 0.9);
|
||||
backdrop-filter: blur(3px);
|
||||
padding: 20px 15px;
|
||||
border-radius: var(--main-corner-radius);
|
||||
box-shadow: 0 0 10px 3px #0000003b;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center; }
|
||||
#dribbblish-config .dribbblish-config-container .dribbblish-config-close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px; }
|
||||
#dribbblish-config .dribbblish-config-container .dribbblish-config-areas {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding: 0px 50px; }
|
||||
#dribbblish-config .dribbblish-config-container .dribbblish-config-areas .dribbblish-config-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px; }
|
||||
#dribbblish-config .dribbblish-config-container .dribbblish-config-areas .dribbblish-config-area[collapsed] {
|
||||
overflow: hidden;
|
||||
min-height: 38px;
|
||||
height: 38px; }
|
||||
#dribbblish-config .dribbblish-config-container .dribbblish-config-areas .dribbblish-config-area[collapsed] > h2 svg {
|
||||
transform: rotate(270deg); }
|
||||
#dribbblish-config .dribbblish-config-container .dribbblish-config-areas .dribbblish-config-area:empty {
|
||||
display: none; }
|
||||
#dribbblish-config .dribbblish-config-container .dribbblish-config-areas .dribbblish-config-area .dribbblish-config-area-header {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 38px; }
|
||||
#dribbblish-config .dribbblish-config-container .dribbblish-config-areas .dribbblish-config-area .dribbblish-config-area-header svg {
|
||||
position: absolute;
|
||||
margin-left: 10px;
|
||||
bottom: -2px;
|
||||
color: var(--spice-text);
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
stroke-width: 2px;
|
||||
transform: rotate(90deg); }
|
||||
#dribbblish-config .dribbblish-config-container .dribbblish-config-areas .dribbblish-config-area .dribbblish-config-area-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px; }
|
||||
#dribbblish-config .dribbblish-config-container .dribbblish-config-areas .dribbblish-config-area .dribbblish-config-area-items .dribbblish-config-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: min-content;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 5px 10px;
|
||||
grid-template-areas: "header input" "description input"; }
|
||||
#dribbblish-config .dribbblish-config-container .dribbblish-config-areas .dribbblish-config-area .dribbblish-config-area-items .dribbblish-config-item[parent] {
|
||||
padding-left: 16px; }
|
||||
#dribbblish-config .dribbblish-config-container .dribbblish-config-areas .dribbblish-config-area .dribbblish-config-area-items .dribbblish-config-item[hidden="true"] {
|
||||
display: none; }
|
||||
#dribbblish-config .dribbblish-config-container .dribbblish-config-areas .dribbblish-config-area .dribbblish-config-area-items .dribbblish-config-item > .x-settings-title {
|
||||
grid-area: header;
|
||||
margin: 0px;
|
||||
height: min-content;
|
||||
position: relative;
|
||||
bottom: 0px; }
|
||||
#dribbblish-config .dribbblish-config-container .dribbblish-config-areas .dribbblish-config-area .dribbblish-config-area-items .dribbblish-config-item > .x-settings-title.no-desc {
|
||||
bottom: -10px; }
|
||||
#dribbblish-config .dribbblish-config-container .dribbblish-config-areas .dribbblish-config-area .dribbblish-config-area-items .dribbblish-config-item > .main-type-mesto {
|
||||
grid-area: description;
|
||||
height: min-content;
|
||||
color: var(--spice-subtext); }
|
||||
#dribbblish-config .dribbblish-config-container .dribbblish-config-areas .dribbblish-config-area .dribbblish-config-area-items .dribbblish-config-item > .x-settings-secondColumn {
|
||||
grid-area: input; }
|
||||
#dribbblish-config .dribbblish-config-backdrop {
|
||||
position: absolute;
|
||||
content: "";
|
||||
inset: 0px;
|
||||
backdrop-filter: blur(3px) brightness(60%); }
|
||||
|
||||
:root {
|
||||
--bar-height: 70px;
|
||||
--bar-cover-art-size: 40px;
|
||||
|
|
@ -735,120 +833,6 @@ li.GlueDropTarget {
|
|||
z-index: 2;
|
||||
pointer-events: none; }
|
||||
|
||||
#dribbblish-config {
|
||||
display: none;
|
||||
z-index: 99999;
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--spice-text); }
|
||||
|
||||
#dribbblish-config[active] {
|
||||
display: flex; }
|
||||
|
||||
.dribbblish-config-container {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
width: clamp(500px, 50%, 650px);
|
||||
background-color: rgba(var(--spice-rgb-main), 0.9);
|
||||
backdrop-filter: blur(3px);
|
||||
padding: 20px 15px;
|
||||
border-radius: var(--main-corner-radius);
|
||||
box-shadow: 0 0 10px 3px #0000003b;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center; }
|
||||
|
||||
.dribbblish-config-areas {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding: 0px 50px; }
|
||||
|
||||
.dribbblish-config-area,
|
||||
.dribbblish-config-area-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px; }
|
||||
|
||||
.dribbblish-config-area[collapsed] {
|
||||
overflow: hidden;
|
||||
min-height: 38px;
|
||||
/* for some reason height alone isn't enough */
|
||||
height: 38px; }
|
||||
|
||||
.dribbblish-config-area:empty {
|
||||
display: none; }
|
||||
|
||||
.dribbblish-config-area > h2 {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 38px; }
|
||||
|
||||
.dribbblish-config-area > h2 svg {
|
||||
position: absolute;
|
||||
margin-left: 10px;
|
||||
bottom: -2px;
|
||||
color: var(--spice-text);
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
stroke-width: 2px;
|
||||
transform: rotate(90deg); }
|
||||
|
||||
.dribbblish-config-area[collapsed] > h2 svg {
|
||||
transform: rotate(270deg); }
|
||||
|
||||
.dribbblish-config-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: min-content;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 5px 10px;
|
||||
grid-template-areas: "header input" "description input"; }
|
||||
|
||||
.dribbblish-config-item[parent] {
|
||||
padding-left: 16px; }
|
||||
|
||||
.dribbblish-config-item[hidden="true"] {
|
||||
display: none; }
|
||||
|
||||
.dribbblish-config-item > .x-settings-title {
|
||||
grid-area: header;
|
||||
margin: 0px;
|
||||
height: min-content;
|
||||
position: relative;
|
||||
bottom: 0px; }
|
||||
|
||||
.dribbblish-config-item > .x-settings-title.no-desc {
|
||||
bottom: -10px; }
|
||||
|
||||
.dribbblish-config-item > .main-type-mesto {
|
||||
grid-area: description;
|
||||
height: min-content;
|
||||
color: var(--spice-subtext); }
|
||||
|
||||
.dribbblish-config-item > .x-settings-secondColumn {
|
||||
grid-area: input; }
|
||||
|
||||
.dribbblish-config-close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px; }
|
||||
|
||||
.dribbblish-config-backdrop {
|
||||
position: absolute;
|
||||
content: "";
|
||||
inset: 0px;
|
||||
backdrop-filter: blur(3px) brightness(60%); }
|
||||
|
||||
/** Rearrange player bar */
|
||||
.main-nowPlayingBar-left {
|
||||
order: 1;
|
||||
|
|
|
|||
Loading…
Reference in a new issue