Skip to content

Commit 61f719d

Browse files
smashedrsmashedr
authored
Light Mode Fixes (#63)
* Light Mode Fixes * Fix Background CSS * Copy BS Card Border * Fix Border Width * Codacy Fixes * Tweak Breakpoints * Tweak Options Background Display * Cleanup * Fix CSS
1 parent 2f580bc commit 61f719d

File tree

2 files changed

+46
-47
lines changed

2 files changed

+46
-47
lines changed

‎src/css/options.css‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,31 +16,33 @@ video {
1616

1717
#options-wrapper {
1818
width: 100%;
19-
max-width: 800px;
19+
max-width: 767px;
2020
backdrop-filter: blur(6px);
21-
filter: drop-shadow(15px 15px 12px #000000);
2221
}
2322

2423
[data-bs-theme='dark'] #options-wrapper {
25-
background: rgba(0 0 0 / 50%);
24+
background-color: rgba(0 0 0 / 50%);
25+
border: 1px solid rgba(255 255 255 / 15%);
26+
filter: drop-shadow(15px 15px 12px #000);
2627
}
2728

2829
[data-bs-theme='light'] #options-wrapper {
29-
background: rgba(255 255 255 / 60%);
30+
background-color: rgba(255 255 255 / 60%);
31+
border: 1px solid rgba(0 0 0 / 17.5%);
3032
}
3133

3234
[data-bs-theme='dark'] .form-control {
33-
background: rgba(0 0 0 / 50%);
35+
background-color: rgba(0 0 0 / 50%);
3436
}
3537

3638
[data-bs-theme='light'] .form-control {
37-
background: rgba(255 255 255 / 50%);
39+
background-color: rgba(255 255 255 / 50%);
3840
}
3941

4042
[data-bs-theme='dark'] #table-wrapper {
41-
background: rgba(0 0 0 / 50%);
43+
background-color: rgba(0 0 0 / 50%);
4244
}
4345

4446
[data-bs-theme='light'] #table-wrapper {
45-
background: rgba(255 255 255 / 50%);
47+
background-color: rgba(255 255 255 / 50%);
4648
}

‎src/html/options.html‎

Lines changed: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -71,17 +71,17 @@ <h2>Django Files Options</h2>
7171
</div>
7272

7373
<div class="row g-2 mb-2">
74-
<div class="col-md-4 col-12 mb-2">
74+
<div class="col-sm-4 col-12 mb-2">
7575
<label for="recentFiles" class="form-label"><i class="fa-solid fa-list-ol me-2"></i> Recent Files</label>
7676
<input id="recentFiles" aria-describedby="recentFilesHelp" type="number" class="form-control" autocomplete="off">
7777
<div class="form-text" id="recentFilesHelp">Popup Recent Files. <span class="d-inline-block">0 to Disable.</span></div>
7878
</div>
79-
<div class="col-md-4 col-12 mb-2 non-mobile">
79+
<div class="col-sm-4 col-12 mb-2 non-mobile">
8080
<label for="popupWidth" class="form-label"><i class="fa-solid fa-arrows-left-right-to-line me-2"></i> Popup Width</label>
8181
<input id="popupWidth" aria-describedby="popupWidthHelp" type="number" class="form-control" autocomplete="off" step="10">
8282
<div class="form-text" id="popupWidthHelp">Popup Width in Pixels. <span class="d-inline-block">320-600.</span></div>
8383
</div>
84-
<div class="col-md-4 col-12 mb-2">
84+
<div class="col-sm-4 col-12 mb-2">
8585
<label for="popupTimeout" class="form-label"><i class="fa-regular fa-clock me-2"></i> Preview Timeout</label>
8686
<input id="popupTimeout" aria-describedby="popupTimeoutHelp" type="number" class="form-control" autocomplete="off">
8787
<div class="form-text" id="popupTimeoutHelp">Popup Preview Timeout in Seconds.</div>
@@ -211,52 +211,49 @@ <h2>Django Files Options</h2>
211211
</label>
212212
</div>
213213

214-
<h5 class="mb-2">
214+
<h5 class="mt-3">
215215
Options Page Background
216-
<span class="small" data-bs-toggle="tooltip" data-bs-title="Disabled, Random Picture or Video Loop.">
216+
<span class="small" data-bs-toggle="tooltip" data-bs-title="Disabled, Random/Custom Picture or Video Looping.">
217217
<i class="fa-solid fa-circle-info ms-1"></i>
218218
</span>
219219
</h5>
220-
<div class="d-flex flex-column flex-md-row mb-2 align-items-md-center" style="min-height: 38px;">
221-
<div class="flex-grow-0 mt-md-0">
222-
<div class="ms-2 ms-md-0 mt-auto">
223-
<div class="d-grid d-sm-flex">
224-
<div class="form-check form-check-inline">
225-
<input class="form-check-input" type="radio" name="radioBackground" id="bgNone" value="none">
226-
<label class="form-check-label" for="bgNone">
227-
<i class="fa-regular fa-square"></i> None
228-
</label>
229-
</div>
230-
<div class="form-check form-check-inline">
231-
<input class="form-check-input" type="radio" name="radioBackground" id="bgPicture" value="picture">
232-
<label class="form-check-label" for="bgPicture">
233-
<i class="fa-regular fa-image"></i> Picture
234-
</label>
235-
</div>
236-
<div class="form-check form-check-inline">
237-
<input class="form-check-input" type="radio" name="radioBackground" id="bgVideo" value="video">
238-
<label class="form-check-label" for="bgVideo">
239-
<i class="fa-solid fa-video"></i> Video
240-
</label>
241-
</div>
242-
</div>
243-
</div>
220+
221+
<div class="d-flex flex-column flex-sm-row ms-1 ms-sm-3">
222+
<div class="form-check form-check-inline mb-2 mb-sm-0">
223+
<input class="form-check-input" type="radio" name="radioBackground" id="bgNone" value="none">
224+
<label class="form-check-label" for="bgNone">
225+
<i class="fa-regular fa-square"></i> None
226+
</label>
227+
</div>
228+
<div class="form-check form-check-inline mb-2 mb-sm-0">
229+
<input class="form-check-input" type="radio" name="radioBackground" id="bgPicture" value="picture">
230+
<label class="form-check-label" for="bgPicture">
231+
<i class="fa-regular fa-image"></i> Picture
232+
</label>
233+
</div>
234+
<div class="form-check form-check-inline mb-2">
235+
<input class="form-check-input" type="radio" name="radioBackground" id="bgVideo" value="video">
236+
<label class="form-check-label" for="bgVideo">
237+
<i class="fa-solid fa-video"></i> Video
238+
</label>
244239
</div>
245-
<div class="flex-fill mt-2 mt-md-0 ms-2 ms-md-0">
246-
<div id="bgPictureInput" class="input-group d-none">
240+
</div>
241+
242+
<div class="ms-0 ms-sm-3">
243+
<div id="bgPictureInput" class="input-group d-none">
247244
<span class="input-group-text" id="picture-addon" data-bs-toggle="tooltip" data-bs-title="URL to a Web Image or empty for default.">
248245
<i class="fa-solid fa-circle-info"></i></span>
249-
<input type="text" class="form-control" placeholder="Background Picture URL" aria-label="Background Picture URL"
250-
id="pictureURL" name="pictureURL" aria-describedby="picture-addon">
251-
</div>
252-
<div id="bgVideoInput" class="input-group d-none">
246+
<input type="text" class="form-control" placeholder="Background Picture URL" aria-label="Background Picture URL"
247+
id="pictureURL" name="pictureURL" aria-describedby="picture-addon">
248+
</div>
249+
<div id="bgVideoInput" class="input-group d-none">
253250
<span class="input-group-text" id="video-addon" data-bs-toggle="tooltip" data-bs-title="URL to a Web Video or empty for default.">
254251
<i class="fa-solid fa-circle-info"></i></span>
255-
<input type="text" class="form-control" placeholder="Background Video URL" aria-label="Background Video URL"
256-
id="videoURL" name="videoURL" aria-describedby="video-addon">
257-
</div>
252+
<input type="text" class="form-control" placeholder="Background Video URL" aria-label="Background Video URL"
253+
id="videoURL" name="videoURL" aria-describedby="video-addon">
258254
</div>
259-
</div> <!-- background options -->
255+
</div>
256+
260257
</form> <!-- options-form -->
261258

262259
<p class="fst-italic small mt-3">

0 commit comments

Comments
 (0)