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

Better global UI

Browse Source
This commit is contained in:
Djeex
2025-08-18 20:05:08 +02:00
parent 305042b365
commit 330e467dcb
5 changed files with 147 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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