imgfloat/server
1
0
Fork 0
mirror of https://github.com/imgfloat/server.git synced 2026-02-05 11:49:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve layout

Browse Source
This commit is contained in:
Andreas Krühlmann
2025-12-10 13:37:17 +01:00
parent d3f34f50d8
commit 8e43ad0ff1
5 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/main/resources/static/css/styles.css
View File

@@ -604,7 +604,7 @@ body {
gap: 12px;
padding: 14px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(59, 130, 246, 0.05));
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(124, 58, 237, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
@@ -696,7 +696,7 @@ body {
}
.panel-section {
margin-top: 16px;
margin-top: 12px;
padding: 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.02);
@@ -948,8 +948,9 @@ body {
.toggle-track {
position: relative;
align-self: flex-start;
width: 52px;
height: 30px;
height: 25px;
display: inline-flex;
align-items: center;
padding: 4px;
@@ -961,8 +962,8 @@ body {
}
.toggle-thumb {
width: 22px;
height: 22px;
width: 17px;
height: 17px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
@@ -971,13 +972,13 @@ body {
}
.checkbox-inline input[type="checkbox"]:checked + .toggle-track {
background: linear-gradient(180deg, #34c759, #28b74b);
border-color: #28b74b;
background: linear-gradient(180deg, #7c3aed, #342366);
border-color: #7c3aed;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(52, 199, 89, 0.35);
}
.checkbox-inline input[type="checkbox"]:checked + .toggle-track .toggle-thumb {
transform: translateX(22px);
transform: translateX(25px);
box-shadow: 0 2px 6px rgba(40, 183, 75, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

17
src/main/resources/templates/admin.html
View File

@@ -59,6 +59,7 @@
<p class="meta-text" id="selected-asset-meta">Pick an asset in the list to adjust its placement and playback.</p>
<div class="badge-row asset-meta-badges" id="selected-asset-badges"></div>
</div>
<!--
<div class="selected-asset-actions">
<button type="button" class="ghost icon-button" id="selected-asset-visibility" title="Toggle visibility">
<i class="fa-solid fa-eye-slash"></i><span class="sr-only">Toggle visibility</span>
@@ -66,7 +67,7 @@
<button type="button" class="ghost danger icon-button" id="selected-asset-delete" title="Delete asset">
<i class="fa-solid fa-trash"></i><span class="sr-only">Delete asset</span>
</button>
</div>
</div>-->
</div>
<div id="asset-controls-placeholder" class="asset-controls-placeholder">
<div id="asset-controls" class="hidden asset-settings">
@@ -83,12 +84,14 @@
Height
<input id="asset-height" class="number-input" type="number" min="10" step="5" />
</label>
<label class="checkbox-inline toggle">
<input id="maintain-aspect" type="checkbox" checked />
<span class="toggle-track" aria-hidden="true">
<span class="toggle-thumb"></span>
</span>
<span class="toggle-label">Maintain aspect</span>
<label>
Maintain AR
<label class="checkbox-inline toggle">
<input id="maintain-aspect" type="checkbox" checked />
<span class="toggle-track" aria-hidden="true">
<span class="toggle-thumb"></span>
</span>
</label>
</label>
</div>
<div class="control-grid condensed">