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

Fix settings style

Browse Source
This commit is contained in:
Andreas Krühlmann
2026-01-10 00:53:26 +01:00
parent 2b08baf375
commit b1dd57da82
2 changed files with 45 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -81,7 +81,7 @@ body {
.channels-shell, .channels-shell,
.settings-shell { .settings-shell {
width: min(760px, 100%); width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
@@ -110,6 +110,8 @@ body {
.settings-main { .settings-main {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column;
gap: 14px;
} }
.error-main { .error-main {
@@ -204,23 +206,15 @@ body {
} }
.settings-hero { .settings-hero {
display: grid; display: flex;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); flex-direction: column;
gap: 20px; gap: 16px;
align-items: center;
} }
.settings-layout { .settings-stack {
display: grid; display: flex;
grid-template-columns: 2fr minmax(260px, 1fr); flex-direction: column;
gap: 18px; gap: 18px;
align-items: start;
}
@media (max-width: 900px) {
.settings-layout {
grid-template-columns: 1fr;
}
} }
.settings-panel { .settings-panel {
@@ -229,12 +223,6 @@ body {
gap: 18px; gap: 18px;
} }
.settings-sidebar {
display: flex;
flex-direction: column;
gap: 14px;
}
.hero-copy h1 { .hero-copy h1 {
margin: 8px 0 6px; margin: 8px 0 6px;
} }

80
src/main/resources/templates/settings.html
View File

@@ -39,11 +39,6 @@
Configure overlay performance and audio guardrails for every channel using Imgfloat. These Configure overlay performance and audio guardrails for every channel using Imgfloat. These
settings are applied globally. settings are applied globally.
</p> </p>
<div class="badge-row">
<span class="badge soft"><i class="fa-solid fa-gauge-high"></i> Performance tuned</span>
<span class="badge"><i class="fa-solid fa-cloud"></i> Server-wide</span>
<span class="badge subtle"><i class="fa-solid fa-gear"></i> Admin only</span>
</div>
</div> </div>
<div class="stat-grid compact"> <div class="stat-grid compact">
<div class="stat"> <div class="stat">
@@ -69,7 +64,7 @@
</div> </div>
</section> </section>
<div class="settings-layout"> <div class="settings-stack">
<section class="settings-card settings-panel"> <section class="settings-card settings-panel">
<div class="section-heading"> <div class="section-heading">
<div> <div>
@@ -236,50 +231,47 @@
</button> </button>
</div> </div>
</form> </form>
</section>
<div class="form-section"> <section class="settings-card">
<div class="form-heading"> <div class="form-heading">
<p class="eyebrow subtle">Access</p> <p class="eyebrow subtle">Access</p>
<h3>System administrators</h3> <h3>System administrators</h3>
<p class="muted tiny"> <p class="muted tiny">
Invite teammates who can manage global defaults and other system-wide actions. Invite teammates who can manage global defaults and other system-wide actions.
</p> </p>
</div> </div>
<div class="inline-form"> <div class="inline-form">
<input id="new-sysadmin" placeholder="Twitch username" /> <input id="new-sysadmin" placeholder="Twitch username" />
<button id="add-sysadmin-button" class="button" type="button">Add system admin</button> <button id="add-sysadmin-button" class="button" type="button">Add system admin</button>
</div> </div>
<div class="card-section"> <div class="card-section">
<div class="section-header"> <div class="section-header">
<h4 class="list-title">Current system admins</h4> <h4 class="list-title">Current system admins</h4>
<p class="muted">These users can access the settings page and APIs.</p> <p class="muted">These users can access the settings page and APIs.</p>
</div>
<ul id="sysadmin-list" class="stacked-list"></ul>
</div> </div>
<ul id="sysadmin-list" class="stacked-list"></ul>
</div> </div>
</section> </section>
<aside class="settings-sidebar"> <section class="settings-card info-card">
<section class="settings-card info-card"> <p class="eyebrow subtle">Checklist</p>
<p class="eyebrow subtle">Checklist</p> <h3>Before you save</h3>
<h3>Before you save</h3> <ul class="hint-list">
<ul class="hint-list"> <li>Match canvas dimensions to the OBS browser source you embed.</li>
<li>Match canvas dimensions to the OBS browser source you embed.</li> <li>Use 30–60 FPS for smoother overlays without overwhelming viewers.</li>
<li>Use 30–60 FPS for smoother overlays without overwhelming viewers.</li> <li>Keep playback and pitch bounds between 0 and 1 to avoid distortion.</li>
<li>Keep playback and pitch bounds between 0 and 1 to avoid distortion.</li> <li>Lower the minimum volume if alerts feel too loud on stream.</li>
<li>Lower the minimum volume if alerts feel too loud on stream.</li> </ul>
</ul> </section>
</section>
<section class="settings-card info-card subtle"> <section class="settings-card info-card subtle">
<p class="eyebrow subtle">Heads up</p> <p class="eyebrow subtle">Heads up</p>
<h3>Global impact</h3> <h3>Global impact</h3>
<p class="muted tiny"> <p class="muted tiny">
Changes here update every channel immediately. Save carefully and confirm with your Changes here update every channel immediately. Save carefully and confirm with your team.
team. </p>
</p> </section>
</section>
</aside>
</div> </div>
</main> </main>
</div> </div>