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

Update release-beta to output generated at d69c825

Browse source
This commit is contained in:
SendNukez 2021-12-24 20:52:39 +00:00
parent f8dd6115ca
commit ca5147b2d7
3 changed files with 180 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
VERSION
View file

@ -1 +1 @@
Beta-b55a82b Beta-d69c825

163
dribbblish-dynamic.js
View file

File diff suppressed because one or more lines are too long

114
user.css
View file

@ -397,15 +397,16 @@ input[type=color] {
z-index: 1; z-index: 1;
position: relative; position: relative;
width: clamp(500px, 50%, 650px); width: clamp(500px, 50%, 650px);
background-color: rgba(var(--spice-rgb-main), 0.95);
backdrop-filter: blur(3px);
padding: 20px 15px; padding: 20px 15px;
border-radius: var(--main-corner-radius);
display: flex; display: flex;
gap: 8px; gap: 8px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: rgba(var(--spice-rgb-main), 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light)));
border-radius: var(--main-corner-radius);
box-shadow: 0px 0px 8px rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light))); box-shadow: 0px 0px 8px rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light)));
} }
#dribbblish-config .dribbblish-config-container > h2 { #dribbblish-config .dribbblish-config-container > h2 {
@ -589,7 +590,6 @@ input[type=color] {
position: relative; position: relative;
overflow: visible; overflow: visible;
background-color: transparent !important; background-color: transparent !important;
border: 1px solid rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light)));
border-radius: var(--main-corner-radius); border-radius: var(--main-corner-radius);
padding: 8px; padding: 8px;
} }
@ -598,8 +598,9 @@ input[type=color] {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0px; inset: 0px;
background-color: rgba(var(--spice-rgb-main), calc(0.75 + -0.1 * var(--is_light))) !important; background-color: rgba(var(--spice-rgb-main), calc(0.8 + -0.1 * var(--is_light)));
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light)));
border-radius: var(--main-corner-radius); border-radius: var(--main-corner-radius);
box-shadow: 0px 0px 8px rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light))); box-shadow: 0px 0px 8px rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light)));
} }
@ -682,43 +683,6 @@ input[type=color] {
aspect-ratio: 1/1; aspect-ratio: 1/1;
} }
#dribbblish-loader {
z-index: 999999;
position: fixed;
inset: 0px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity 1s ease-in;
color: var(--spice-subtext);
font-family: var(--glue-font-family);
font-size: 32px;
font-weight: 700;
}
#dribbblish-loader[active] {
opacity: 1;
pointer-events: all;
}
#dribbblish-loader::before {
z-index: -1;
content: "";
position: absolute;
inset: 0px;
background-color: rgba(var(--spice-rgb-main), calc(0.9 + -0.1 * var(--is_light)));
backdrop-filter: blur(10px);
}
#dribbblish-loader > div {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
#dribbblish-loader > div svg {
color: var(--spice-text);
}
.GenericModal__overlay { .GenericModal__overlay {
backdrop-filter: blur(3px) brightness(60%); backdrop-filter: blur(3px) brightness(60%);
background-color: transparent; background-color: transparent;
@ -726,14 +690,15 @@ input[type=color] {
.GenericModal__overlay .GenericModal { .GenericModal__overlay .GenericModal {
z-index: 1; z-index: 1;
position: relative; position: relative;
background-color: rgba(var(--spice-rgb-main), 0.95);
backdrop-filter: blur(3px);
padding: 24px 16px; padding: 24px 16px;
border-radius: var(--main-corner-radius);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: rgba(var(--spice-rgb-main), 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light)));
border-radius: var(--main-corner-radius);
box-shadow: 0px 0px 8px rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light))); box-shadow: 0px 0px 8px rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light)));
} }
generic-modal .GenericModal__overlay .GenericModal { generic-modal .GenericModal__overlay .GenericModal {
@ -776,11 +741,10 @@ generic-modal .GenericModal__overlay .GenericModal {
} }
.connect-device-list-container { .connect-device-list-container {
border: 1px solid rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light)));
border-radius: var(--main-corner-radius);
padding: 8px; padding: 8px;
background-color: rgba(var(--spice-rgb-main), calc(0.75 + -0.1 * var(--is_light))) !important; background-color: rgba(var(--spice-rgb-main), calc(0.8 + -0.1 * var(--is_light)));
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light)));
border-radius: var(--main-corner-radius); border-radius: var(--main-corner-radius);
box-shadow: 0px 0px 8px rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light))); box-shadow: 0px 0px 8px rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light)));
} }
@ -818,6 +782,46 @@ svg[icon-type=dribbblish] {
overflow: visible; overflow: visible;
} }
#dribbblish-overlay {
z-index: 999999;
position: fixed;
inset: 0px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity 1s ease-in;
color: var(--spice-subtext);
font-family: var(--glue-font-family);
font-size: 32px;
font-weight: 700;
}
#dribbblish-overlay[active] {
opacity: 1;
pointer-events: all;
}
#dribbblish-overlay::before {
z-index: -1;
content: "";
position: absolute;
inset: 0px;
background-color: rgba(var(--spice-rgb-main), calc(0.9 + -0.1 * var(--is_light)));
backdrop-filter: blur(10px);
}
#dribbblish-overlay > div {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
#dribbblish-overlay > div > * {
color: var(--color);
}
#dribbblish-overlay > div > *:empty {
display: none;
}
.main-topBar-topbarContent { .main-topBar-topbarContent {
height: 100%; height: 100%;
} }
@ -1404,11 +1408,10 @@ html.sidebar-hide-text .GlueDropTarget span {
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
pointer-events: none; pointer-events: none;
border: 1px solid rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light)));
border-radius: var(--main-corner-radius);
color: var(--spice-subtext); color: var(--spice-subtext);
background-color: rgba(var(--spice-rgb-main), calc(0.75 + -0.1 * var(--is_light))) !important; background-color: rgba(var(--spice-rgb-main), 0.95);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light)));
border-radius: var(--main-corner-radius); border-radius: var(--main-corner-radius);
box-shadow: 0px 0px 8px rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light))); box-shadow: 0px 0px 8px rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light)));
} }
@ -2082,6 +2085,15 @@ html:not(.buddyfeed-visible) .Root__top-container::before {
display: none; display: none;
} }
.main-notificationBubbleContainer-NotificationBubbleContainer .main-notificationBubble-NotificationBubble {
color: var(--spice-subtext);
background-color: rgba(var(--spice-rgb-main), 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light)));
border-radius: var(--main-corner-radius);
box-shadow: 0px 0px 8px rgba(var(--spice-rgb-subtext), calc(0.1 + 0.1 * var(--is_light)));
}
canvas[width="250"][height="250"] { canvas[width="250"][height="250"] {
display: none; display: none;
} }