increase config spacing to make it look a bit better

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

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>
</button>
<h1>Dribbblish Settings</h1>
<div class="dribbblish-config-items"></div>
<div class="dribbblish-config-areas"></div>
</div>
<div class="dribbblish-config-backdrop"></div>
`;
@ -51,19 +51,14 @@ class ConfigMenu {
* @param {DribbblishConfigOptions} options
*/
addInputHTML(options) {
let parent;
if (options.area != null) {
if (!document.querySelector(`.dribbblish-config-area[name="${options.area}"]`)) {
const areaElem = document.createElement("div");
areaElem.classList.add("dribbblish-config-area");
areaElem.setAttribute("name", options.area);
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");
if (!document.querySelector(`.dribbblish-config-area[name="${options.area}"]`)) {
const areaElem = document.createElement("div");
areaElem.classList.add("dribbblish-config-area");
areaElem.setAttribute("name", options.area);
areaElem.innerHTML = `<h2>${options.area}</h2>`;
document.querySelector(".dribbblish-config-areas").appendChild(areaElem);
}
const parent = document.querySelector(`.dribbblish-config-area[name="${options.area}"]`);
const elem = document.createElement("div");
elem.classList.add("dribbblish-config-item");

View file

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