mirror of
https://github.com/danbulant/dribbblish-dynamic-theme
synced 2026-06-09 09:42:26 +00:00
Compile Webpack
This commit is contained in:
GitHub Action
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 {
|
:root {
|
||||||
--bar-height: 70px;
|
--bar-height: 70px;
|
||||||
--bar-cover-art-size: 40px;
|
--bar-cover-art-size: 40px;
|
||||||
|
|
@ -735,120 +833,6 @@ li.GlueDropTarget {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
pointer-events: none; }
|
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 */
|
/** Rearrange player bar */
|
||||||
.main-nowPlayingBar-left {
|
.main-nowPlayingBar-left {
|
||||||
order: 1;
|
order: 1;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue