Djeex/lumeex
1
1
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 8 Wiki Activity

2.0 - WebUI builder ("Cielight" merge) #9

Merged
Djeex merged 43 commits from beta into main 2025-08-26 10:52:13 +02:00
Conversation 0 Commits 43 Files Changed 38 +2210 -5
23 changed files with 2210 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 330e467dcb - Show all commits

18
src/py/webui/webui.py
View File

@ -197,6 +197,24 @@ def remove_thumbnail():
yaml.safe_dump(data, f, sort_keys=False, allow_unicode=True) yaml.safe_dump(data, f, sort_keys=False, allow_unicode=True)
return jsonify({"status": "ok"}) return jsonify({"status": "ok"})
@app.route("/api/theme/upload", methods=["POST"])
def upload_theme():
themes_dir = Path(__file__).resolve().parents[3] / "config" / "themes"
files = request.files.getlist("files")
if not files:
return jsonify({"error": "No files provided"}), 400
# Get folder name from first file's webkitRelativePath
first_path = files[0].filename
folder_name = first_path.split("/")[0] if "/" in first_path else "custom"
theme_folder = themes_dir / folder_name
theme_folder.mkdir(parents=True, exist_ok=True)
for file in files:
rel_path = Path(file.filename)
dest_path = theme_folder / rel_path.relative_to(folder_name)
dest_path.parent.mkdir(parents=True, exist_ok=True)
file.save(dest_path)
return jsonify({"status": "ok", "theme": folder_name})
# --- Run server --- # --- Run server ---
if __name__ == "__main__": if __name__ == "__main__":
logging.info("Starting WebUI at http://127.0.0.1:5000") logging.info("Starting WebUI at http://127.0.0.1:5000")

2
src/webui/index.html
View File

@ -31,7 +31,7 @@
</div> </div>
<div class="nav-links"> <div class="nav-links">
<ul class="nav-list"> <ul class="nav-list">
<li class="nav-item appear2"><a href="#">Site info</a> <li class="nav-item appear2"><a href="/site-info">Site info</a>
<li class="nav-item appear2"><a href="#">Theme info</a> <li class="nav-item appear2"><a href="#">Theme info</a>
<li class="nav-item appear2"><a href="#">Gallery</a> <li class="nav-item appear2"><a href="#">Gallery</a>
</ul> </ul>

72
src/webui/js/site-info.js
View File

@ -13,12 +13,14 @@ function showToast(message, type = "success", duration = 3000) {
} }
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
// Form and menu logic
const form = document.getElementById("site-info-form"); const form = document.getElementById("site-info-form");
const menuList = document.getElementById("menu-items-list"); const menuList = document.getElementById("menu-items-list");
const addMenuBtn = document.getElementById("add-menu-item"); const addMenuBtn = document.getElementById("add-menu-item");
let menuItems = []; let menuItems = [];
// Render menu items
function renderMenuItems() { function renderMenuItems() {
menuList.innerHTML = ""; menuList.innerHTML = "";
menuItems.forEach((item, idx) => { menuItems.forEach((item, idx) => {
@ -28,13 +30,14 @@ document.addEventListener("DOMContentLoaded", () => {
div.style.marginBottom = "6px"; div.style.marginBottom = "6px";
div.innerHTML = ` div.innerHTML = `
<input type="text" placeholder="Label" value="${item.label || ""}" style="flex:1;" data-idx="${idx}" data-type="label"> <input type="text" placeholder="Label" value="${item.label || ""}" style="flex:1;" data-idx="${idx}" data-type="label">
<input type="text" placeholder="?=tag1,tag2" value="${item.href || ""}" style="flex:2;" data-idx="${idx}" data-type="href"> <input type="text" placeholder="?tag=tag1,tag2" value="${item.href || ""}" style="flex:2;" data-idx="${idx}" data-type="href">
<button type="button" class="remove-menu-item" data-idx="${idx}">🗑</button> <button type="button" class="remove-menu-item" data-idx="${idx}">🗑</button>
`; `;
menuList.appendChild(div); menuList.appendChild(div);
}); });
} }
// Update menu items from inputs
function updateMenuItemsFromInputs() { function updateMenuItemsFromInputs() {
const inputs = menuList.querySelectorAll("input"); const inputs = menuList.querySelectorAll("input");
const items = []; const items = [];
@ -46,10 +49,12 @@ document.addEventListener("DOMContentLoaded", () => {
menuItems = items; menuItems = items;
} }
// Intellectual property paragraphs logic
const ipList = document.getElementById("ip-list"); const ipList = document.getElementById("ip-list");
const addIpBtn = document.getElementById("add-ip-paragraph"); const addIpBtn = document.getElementById("add-ip-paragraph");
let ipParagraphs = []; let ipParagraphs = [];
// Render IP paragraphs
function renderIpParagraphs() { function renderIpParagraphs() {
ipList.innerHTML = ""; ipList.innerHTML = "";
ipParagraphs.forEach((item, idx) => { ipParagraphs.forEach((item, idx) => {
@ -65,6 +70,7 @@ document.addEventListener("DOMContentLoaded", () => {
}); });
} }
// Update IP paragraphs from textareas
function updateIpParagraphsFromInputs() { function updateIpParagraphsFromInputs() {
const textareas = ipList.querySelectorAll("textarea"); const textareas = ipList.querySelectorAll("textarea");
ipParagraphs = Array.from(textareas).map(textarea => ({ ipParagraphs = Array.from(textareas).map(textarea => ({
@ -72,27 +78,27 @@ document.addEventListener("DOMContentLoaded", () => {
})).filter(item => item.paragraph !== ""); })).filter(item => item.paragraph !== "");
} }
// --- Build checkboxes --- // Build options
const convertImagesCheckbox = document.getElementById("convert-images-checkbox"); const convertImagesCheckbox = document.getElementById("convert-images-checkbox");
const resizeImagesCheckbox = document.getElementById("resize-images-checkbox"); const resizeImagesCheckbox = document.getElementById("resize-images-checkbox");
// --- Theme select --- // Theme select
const themeSelect = document.getElementById("theme-select"); const themeSelect = document.getElementById("theme-select");
// --- Thumbnail upload & modal logic --- // Thumbnail upload and modal logic
const thumbnailInput = form?.elements["social.thumbnail"]; const thumbnailInput = form?.elements["social.thumbnail"];
const thumbnailUpload = document.getElementById("thumbnail-upload"); const thumbnailUpload = document.getElementById("thumbnail-upload");
const chooseThumbnailBtn = document.getElementById("choose-thumbnail-btn"); const chooseThumbnailBtn = document.getElementById("choose-thumbnail-btn");
const thumbnailPreview = document.getElementById("thumbnail-preview"); const thumbnailPreview = document.getElementById("thumbnail-preview");
const removeThumbnailBtn = document.getElementById("remove-thumbnail-btn"); const removeThumbnailBtn = document.getElementById("remove-thumbnail-btn");
// Modal elements // Modal elements for delete confirmation
const deleteModal = document.getElementById("delete-modal"); const deleteModal = document.getElementById("delete-modal");
const deleteModalClose = document.getElementById("delete-modal-close"); const deleteModalClose = document.getElementById("delete-modal-close");
const deleteModalConfirm = document.getElementById("delete-modal-confirm"); const deleteModalConfirm = document.getElementById("delete-modal-confirm");
const deleteModalCancel = document.getElementById("delete-modal-cancel"); const deleteModalCancel = document.getElementById("delete-modal-cancel");
// Show/hide remove button, preview, and choose button // Show/hide thumbnail preview, remove button, and choose button
function updateThumbnailPreview(src) { function updateThumbnailPreview(src) {
if (thumbnailPreview) { if (thumbnailPreview) {
thumbnailPreview.src = src || ""; thumbnailPreview.src = src || "";
@ -106,10 +112,12 @@ document.addEventListener("DOMContentLoaded", () => {
} }
} }
// Choose thumbnail button triggers file input
if (chooseThumbnailBtn && thumbnailUpload) { if (chooseThumbnailBtn && thumbnailUpload) {
chooseThumbnailBtn.addEventListener("click", () => thumbnailUpload.click()); chooseThumbnailBtn.addEventListener("click", () => thumbnailUpload.click());
} }
// Handle thumbnail upload and refresh preview (with cache busting)
if (thumbnailUpload) { if (thumbnailUpload) {
thumbnailUpload.addEventListener("change", async (e) => { thumbnailUpload.addEventListener("change", async (e) => {
const file = e.target.files[0]; const file = e.target.files[0];
@ -128,14 +136,14 @@ document.addEventListener("DOMContentLoaded", () => {
}); });
} }
// Attach modal logic to remove button // Remove thumbnail button triggers modal
if (removeThumbnailBtn) { if (removeThumbnailBtn) {
removeThumbnailBtn.addEventListener("click", () => { removeThumbnailBtn.addEventListener("click", () => {
deleteModal.style.display = "flex"; deleteModal.style.display = "flex";
}); });
} }
// Modal logic // Modal logic for thumbnail deletion
if (deleteModal && deleteModalClose && deleteModalConfirm && deleteModalCancel) { if (deleteModal && deleteModalClose && deleteModalConfirm && deleteModalCancel) {
deleteModalClose.onclick = deleteModalCancel.onclick = () => { deleteModalClose.onclick = deleteModalCancel.onclick = () => {
deleteModal.style.display = "none"; deleteModal.style.display = "none";
@ -159,6 +167,40 @@ document.addEventListener("DOMContentLoaded", () => {
}; };
} }
// Theme upload logic (custom theme folder)
const themeUpload = document.getElementById("theme-upload");
const chooseThemeBtn = document.getElementById("choose-theme-btn");
if (chooseThemeBtn && themeUpload) {
chooseThemeBtn.addEventListener("click", () => themeUpload.click());
themeUpload.addEventListener("change", async (e) => {
const files = Array.from(e.target.files);
if (files.length === 0) return;
const formData = new FormData();
files.forEach(file => {
formData.append("files", file, file.webkitRelativePath || file.name);
});
const res = await fetch("/api/theme/upload", { method: "POST", body: formData });
const result = await res.json();
if (result.status === "ok") {
showToast("Theme uploaded!", "success");
// Refresh theme select after upload
fetch("/api/themes")
.then(res => res.json())
.then(themes => {
themeSelect.innerHTML = "";
themes.forEach(theme => {
const option = document.createElement("option");
option.value = theme;
option.textContent = theme;
themeSelect.appendChild(option);
});
});
} else {
showToast("Error uploading theme", "error");
}
});
}
// Fetch theme list and populate select // Fetch theme list and populate select
if (themeSelect) { if (themeSelect) {
fetch("/api/themes") fetch("/api/themes")
@ -180,7 +222,7 @@ document.addEventListener("DOMContentLoaded", () => {
}); });
} }
// Load config // Load config from server and populate form
if (form) { if (form) {
fetch("/api/site-info") fetch("/api/site-info")
.then(res => res.json()) .then(res => res.json())
@ -206,9 +248,9 @@ document.addEventListener("DOMContentLoaded", () => {
themeSelect.value = data.build?.theme || ""; themeSelect.value = data.build?.theme || "";
} }
form.elements["legals.hoster_name"].value = data.legals?.hoster_name || ""; form.elements["legals.hoster_name"].value = data.legals?.hoster_name || "";
form.elements["legals.hoster_adress"].value = data.legals?.hoster_adress || ""; form.elements["legals.hoster_address"].value = data.legals?.hoster_address || "";
form.elements["legals.hoster_contact"].value = data.legals?.hoster_contact || ""; form.elements["legals.hoster_contact"].value = data.legals?.hoster_contact || "";
// --- Build checkboxes --- // Build checkboxes
if (convertImagesCheckbox) { if (convertImagesCheckbox) {
convertImagesCheckbox.checked = !!data.build?.convert_images; convertImagesCheckbox.checked = !!data.build?.convert_images;
} }
@ -262,7 +304,7 @@ document.addEventListener("DOMContentLoaded", () => {
updateIpParagraphsFromInputs(); updateIpParagraphsFromInputs();
}); });
// Save config // Save config to server
if (form) { if (form) {
form.addEventListener("submit", async (e) => { form.addEventListener("submit", async (e) => {
e.preventDefault(); e.preventDefault();
@ -298,7 +340,7 @@ document.addEventListener("DOMContentLoaded", () => {
build, build,
legals: { legals: {
hoster_name: form.elements["legals.hoster_name"].value, hoster_name: form.elements["legals.hoster_name"].value,
hoster_adress: form.elements["legals.hoster_adress"].value, hoster_address: form.elements["legals.hoster_address"].value,
hoster_contact: form.elements["legals.hoster_contact"].value, hoster_contact: form.elements["legals.hoster_contact"].value,
intellectual_property: ipParagraphs intellectual_property: ipParagraphs
} }
@ -310,9 +352,9 @@ document.addEventListener("DOMContentLoaded", () => {
}); });
const result = await res.json(); const result = await res.json();
if (result.status === "ok") { if (result.status === "ok") {
showToast("Site info saved!", "success"); showToast("✅ Site info saved!", "success");
} else { } else {
showToast("Error saving site info", "error"); showToast("❌ Error saving site info", "error");
} }
}); });
} }

23
src/webui/site-info/index.html
View File

@ -31,7 +31,7 @@
</div> </div>
<div class="nav-links"> <div class="nav-links">
<ul class="nav-list"> <ul class="nav-list">
<li class="nav-item appear2"><a href="#">Site info</a></li> <li class="nav-item appear2"><a href="/site-info">Site info</a></li>
<li class="nav-item appear2"><a href="#">Theme info</a></li> <li class="nav-item appear2"><a href="#">Theme info</a></li>
<li class="nav-item appear2"><a href="#">Gallery</a></li> <li class="nav-item appear2"><a href="#">Gallery</a></li>
</ul> </ul>
@ -80,12 +80,12 @@
<div class="input-field"> <div class="input-field">
<label>Instagram URL</label> <label>Instagram URL</label>
<input type="text" name="social.instagram_url" placeholder="https://instagram.com/yourprofile"> <input type="text" name="social.instagram_url" placeholder="https://instagram.com/yourprofile">
<label class="thumbnail-form-label">Upload Thumbnail</label> <label class="thumbnail-form-label">Thumbnail</label>
<input type="file" id="thumbnail-upload" accept="image/png,image/jpeg,image/webp" style="display:none;"> <input type="file" id="thumbnail-upload" accept="image/png,image/jpeg,image/webp" style="display:none;">
<button type="button" id="choose-thumbnail-btn" class="up-btn">Choose a photo</button> <button type="button" id="choose-thumbnail-btn" class="up-btn">📸 Upload a photo</button>
<div class="thumbnail-form"> <div class="thumbnail-form">
<img id="thumbnail-preview" src="" alt="Thumbnail preview" style="max-width:100px;display:none;"> <img id="thumbnail-preview" src="" alt="Thumbnail preview" style="max-width:100px;display:none;">
<button type="button" id="remove-thumbnail-btn" class="up-btn danger" style="display:none;">Remove</button> <button type="button" id="remove-thumbnail-btn" class="remove-btn up-btn danger" style="display:none;">Remove</button>
</div> </div>
</div> </div>
</div> </div>
@ -120,15 +120,15 @@
<div class="fields"> <div class="fields">
<div class="input-field"> <div class="input-field">
<label>Hoster Name</label> <label>Hoster Name</label>
<input type="text" name="legals.hoster_name"> <input type="text" name="legals.hoster_name" placeholder="Name">
</div> </div>
<div class="input-field"> <div class="input-field">
<label>Hoster Address</label> <label>Hoster Address</label>
<input type="text" name="legals.hoster_adress"> <input type="text" name="legals.hoster_address" placeholder="Street, Postal Code, City, Country">
</div> </div>
<div class="input-field"> <div class="input-field">
<label>Hoster Contact</label> <label>Hoster Contact</label>
<input type="text" name="legals.hoster_contact"> <input type="text" name="legals.hoster_contact" placeholder="Email or/and Phone">
</div> </div>
<div class="input-field" style="flex: 1 1 100%;"> <div class="input-field" style="flex: 1 1 100%;">
<label>Intellectual Property</label> <label>Intellectual Property</label>
@ -144,8 +144,11 @@
<div class="input-field"> <div class="input-field">
<label>Theme</label> <label>Theme</label>
<select name="build.theme" id="theme-select"></select> <select name="build.theme" id="theme-select"></select>
<input type="file" id="theme-upload" webkitdirectory directory multiple style="display:none;">
<button type="button" id="choose-theme-btn" class="up-btn">📂 Upload custom theme folder</button>
<label class="thumbnail-form-label">Images processing</label>
<label> <label>
<input type="checkbox" name="build.convert_images" id="convert-images-checkbox"> <input class="thumbnail-form-label" type="checkbox" name="build.convert_images" id="convert-images-checkbox">
Convert images Convert images
</label> </label>
<label> <label>
@ -163,9 +166,9 @@
<div class="modal-content"> <div class="modal-content">
<span id="delete-modal-close" class="modal-close">&times;</span> <span id="delete-modal-close" class="modal-close">&times;</span>
<h3>Confirm Deletion</h3> <h3>Confirm Deletion</h3>
<p id="delete-modal-text">Are you sure you want to delete this image?</p> <p id="delete-modal-text">Are you sure you want to remove this thumbnail?</p>
<div class="modal-actions"> <div class="modal-actions">
<button id="delete-modal-confirm" class="modal-btn danger">Delete</button> <button id="delete-modal-confirm" class="modal-btn danger">Remove</button>
<button id="delete-modal-cancel" class="modal-btn">Cancel</button> <button id="delete-modal-cancel" class="modal-btn">Cancel</button>
</div> </div>
</div> </div>

80
src/webui/style/style.css
View File

@ -2,7 +2,8 @@
body { body {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
margin: 20px; margin: 20px;
background:radial-gradient(ellipse at bottom center, #002a30, #000000bd), radial-gradient(ellipse at top center, #0558a8, #000000fa); background: #111010;
/* background:radial-gradient(ellipse at bottom center, #002a30, #000000bd), radial-gradient(ellipse at top center, #0558a8, #000000fa); */
color: #FBFBFB; color: #FBFBFB;
min-height: 100vh; min-height: 100vh;
margin:0px; margin:0px;
@ -40,6 +41,11 @@ h1, h2 {
/* --- Upload Section --- */ /* --- Upload Section --- */
.upload-section { .upload-section {
margin-bottom: 30px; margin-bottom: 30px;
background-color: rgb(67 67 67 / 26%);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border: 1px solid #2f2e2e80;
border-radius: 8px;
padding: 0px 20px;
} }
.upload-section label { .upload-section label {
@ -242,6 +248,8 @@ h1, h2 {
/* --- Top Bar & Navigation --- */ /* --- Top Bar & Navigation --- */
.nav { .nav {
height: 100%; height: 100%;
max-width: 1140px;
padding: 0 40px;
} }
.nav-bar { .nav-bar {
@ -307,6 +315,10 @@ h1, h2 {
color: #00b0f0; color: #00b0f0;
} }
.nav > .nav-links > .nav-list > .nav-item > a:active {
color: #00b0f0;
}
.nav > #nav-check { .nav > #nav-check {
display: none; display: none;
} }
@ -355,7 +367,7 @@ h1, h2 {
/* --- Custom Upload Buttons --- */ /* --- Custom Upload Buttons --- */
.up-btn { .up-btn {
display: inline-block; display: inline-block;
background: #09A0C1; background: #00000000;
color: #fff; color: #fff;
padding: 0.5em 1em; padding: 0.5em 1em;
border-radius: 30px; border-radius: 30px;
@ -366,11 +378,11 @@ h1, h2 {
user-select: none; user-select: none;
/* box-shadow: 0 4px 10px rgba(0,0,0,0.25);*/ /* box-shadow: 0 4px 10px rgba(0,0,0,0.25);*/
font-size: 14px; font-size: 14px;
border: none; border: 1px solid #585858;
} }
.up-btn:hover { .up-btn:hover {
background: #55c3ec; background: #2d2d2d;
} }
/* --- Modal Styles --- */ /* --- Modal Styles --- */
@ -384,7 +396,7 @@ h1, h2 {
} }
.modal-content { .modal-content {
background: #ffffff29; background: #131313;
color: #fff; color: #fff;
padding: 2rem 2.5rem; padding: 2rem 2.5rem;
border-radius: 10px; border-radius: 10px;
@ -393,7 +405,6 @@ h1, h2 {
max-width: 90vw; max-width: 90vw;
position: relative; position: relative;
text-align: center; text-align: center;
backdrop-filter: blur(20px);
} }
.modal-close { .modal-close {
@ -447,14 +458,14 @@ h1, h2 {
/* Remove All Buttons */ /* Remove All Buttons */
#remove-all-hero, #remove-all-gallery { #remove-all-hero, #remove-all-gallery {
background: rgb(121, 26, 19); background: #2d2d2d;
color: white; color: white;
display: none; display: none;
} }
#remove-all-gallery:hover, #remove-all-gallery:hover,
#remove-all-hero:hover { #remove-all-hero:hover {
background: #d32f2f; background: rgb(121, 26, 19);
} }
/* Responsive: stack buttons vertically on small screens */ /* Responsive: stack buttons vertically on small screens */
@ -474,7 +485,7 @@ h1, h2 {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
max-width: 1140px; max-width: 1140px;
padding-bottom: 40px; padding: 0 40px 40px 40px;
} }
@ -490,6 +501,16 @@ h1, h2 {
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
} }
#site-info-form fieldset {
background-color: rgb(67 67 67 / 26%);
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border: 1px solid #2f2e2e80;
margin-bottom: 28px;
padding: 32px 28px;
margin: 32px auto;
}
#site-info-form legend { #site-info-form legend {
font-size: 1.2em; font-size: 1.2em;
font-weight: 700; font-weight: 700;
@ -517,7 +538,7 @@ h1, h2 {
#site-info-form label { #site-info-form label {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #b8eaff; color: #e3e3e3;
margin-bottom: 6px; margin-bottom: 6px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
@ -525,9 +546,10 @@ h1, h2 {
#site-info-form input, #site-info-form input,
#site-info-form textarea, #site-info-form textarea,
#site-info-form select { #site-info-form select {
background: rgba(4, 44, 60, 0.55); /* background: rgba(4, 44, 60, 0.55);*/
background: #1f2223;
color: #fff; color: #fff;
border: 1px solid #26c4ff33; border: 1px solid #585858;
border-radius: 8px; border-radius: 8px;
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;
@ -540,17 +562,16 @@ h1, h2 {
#site-info-form input::placeholder, #site-info-form input::placeholder,
#site-info-form textarea::placeholder { #site-info-form textarea::placeholder {
color: #83a8b7be; color: #585858;
font-style: italic; font-style: italic;
} }
#site-info-form input:focus, #site-info-form input:focus,
#site-info-form textarea:focus, #site-info-form textarea:focus,
#site-info-form select:focus { #site-info-form select:focus {
border-color: #26c4ff; border-color: #585858;
background: rgba(38, 196, 255, 0.09); background: #161616;
} }
#site-info-form textarea { #site-info-form textarea {
min-height: 60px; min-height: 60px;
resize: vertical; resize: vertical;
@ -567,8 +588,7 @@ h1, h2 {
#site-info-form img#thumbnail-preview { #site-info-form img#thumbnail-preview {
margin-top: 8px; margin-top: 8px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 8px rgba(38,196,255,0.12); border: 1px solid #585858;
border: 1px solid #26c4ff33;
} }
#site-info-form button[type="submit"] { #site-info-form button[type="submit"] {
@ -590,7 +610,7 @@ h1, h2 {
} }
#site-info-form button[type="button"] { #site-info-form button[type="button"] {
background: #074053; background: #00000000;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 18px; border-radius: 18px;
@ -599,11 +619,12 @@ h1, h2 {
margin-top: 8px; margin-top: 8px;
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: background 0.2s;
border: 1px solid #585858;
} }
#site-info-form button[type="button"]:hover { #site-info-form button[type="button"]:hover {
background: #26c4ff; background: #2d2d2d;
color: #002a30; color: #fff;
} }
@media (max-width: 900px) { @media (max-width: 900px) {
@ -621,10 +642,25 @@ h1, h2 {
} }
} }
#site-info-form button.remove-menu-item{ #site-info-form button.remove-menu-item, #site-info-form button.remove-ip-paragraph {
margin-top: 0px; margin-top: 0px;
margin-bottom: 4px; margin-bottom: 4px;
border-radius: 30px; border-radius: 30px;
background: #2d2d2d;
}
#site-info-form button.remove-menu-item:hover, #site-info-form button.remove-ip-paragraph:hover {
background: rgb(121, 26, 19);
}
#site-info-form button.remove-btn {
border-radius: 30px;
background: #2d2d2d;
}
#site-info-form button.remove-btn:hover{
background: rgb(121, 26, 19);
} }
#site-info-form .thumbnail-form-label { #site-info-form .thumbnail-form-label {