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

increase config spacing to make it look a bit better

Browse source
This commit is contained in:
Send_Nukez 2021-10-09 09:05:49 +02:00
parent 4428c82049
commit 6c88ee761f
2 changed files with 20 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
dribbblish.js
View file

@ -28,7 +28,7 @@ class ConfigMenu {
<svg width="18" height="18" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M31.098 29.794L16.955 15.65 31.097 1.51 29.683.093 15.54 14.237 1.4.094-.016 1.508 14.126 15.65-.016 29.795l1.414 1.414L15.54 17.065l14.144 14.143" fill="currentColor" fill-rule="evenodd"></path></svg> <svg width="18" height="18" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M31.098 29.794L16.955 15.65 31.097 1.51 29.683.093 15.54 14.237 1.4.094-.016 1.508 14.126 15.65-.016 29.795l1.414 1.414L15.54 17.065l14.144 14.143" fill="currentColor" fill-rule="evenodd"></path></svg>
</button> </button>
<h1>Dribbblish Settings</h1> <h1>Dribbblish Settings</h1>
<div class="dribbblish-config-items"></div> <div class="dribbblish-config-areas"></div>
</div> </div>
<div class="dribbblish-config-backdrop"></div> <div class="dribbblish-config-backdrop"></div>
`; `;
@ -51,19 +51,14 @@ class ConfigMenu {
* @param {DribbblishConfigOptions} options * @param {DribbblishConfigOptions} options
*/ */
addInputHTML(options) { addInputHTML(options) {
let parent; if (!document.querySelector(`.dribbblish-config-area[name="${options.area}"]`)) {
if (options.area != null) { const areaElem = document.createElement("div");
if (!document.querySelector(`.dribbblish-config-area[name="${options.area}"]`)) { areaElem.classList.add("dribbblish-config-area");
const areaElem = document.createElement("div"); areaElem.setAttribute("name", options.area);
areaElem.classList.add("dribbblish-config-area"); areaElem.innerHTML = `<h2>${options.area}</h2>`;
areaElem.setAttribute("name", options.area); document.querySelector(".dribbblish-config-areas").appendChild(areaElem);
areaElem.innerHTML = `<h2>${options.area}</h2>`;
document.querySelector(".dribbblish-config-items").appendChild(areaElem);
}
parent = document.querySelector(`.dribbblish-config-area[name="${options.area}"]`);
} else {
parent = document.querySelector(".dribbblish-config-items");
} }
const parent = document.querySelector(`.dribbblish-config-area[name="${options.area}"]`);
const elem = document.createElement("div"); const elem = document.createElement("div");
elem.classList.add("dribbblish-config-item"); elem.classList.add("dribbblish-config-item");

19
user.css
View file

@ -827,20 +827,29 @@ li.GlueDropTarget {
justify-content: center; justify-content: center;
} }
#dribbblish-config .dribbblish-config-items { #dribbblish-config .dribbblish-config-areas {
display: flex;
flex-direction: column;
gap: 16px;
max-height: 60vh; max-height: 60vh;
overflow-y: auto; overflow-y: auto;
padding: 0px 50px; padding: 0px 50px;
} }
#dribbblish-config .dribbblish-config-area {
display: flex;
flex-direction: column;
gap: 16px;
}
.dribbblish-config-area > h2 { .dribbblish-config-area > h2 {
text-align: center; text-align: center;
height: 0.8em;
} }
#dribbblish-config .dribbblish-config-item { #dribbblish-config .dribbblish-config-item {
position: relative; position: relative;
width: 100%; width: 100%;
padding: 5px 0px;
height: min-content; height: min-content;
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
@ -1158,10 +1167,6 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
border-radius: 5px; border-radius: 5px;
} }
.main-buttons-button:not(.main-entityHeader-titleButton) {
color: var(--spice-main);
}
.main-dropDown-dropDown, .main-dropDown-dropDown,
.x-sortBox-sortDropdown { .x-sortBox-sortDropdown {
background-color: rgba(var(--spice-rgb-selected-row), .4) !important; background-color: rgba(var(--spice-rgb-selected-row), .4) !important;
@ -1221,4 +1226,4 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
.main-actionBar-ActionBarRow button:not(.main-playButton-primary) { .main-actionBar-ActionBarRow button:not(.main-playButton-primary) {
color: var(--spice-subtext); color: var(--spice-subtext);
} }