Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Light Mode Fixes #33

Merged
merged 5 commits into from
Jul 14, 2024
Merged

Light Mode Fixes #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2cdc177
Fixes for Background Color
smashedr Jul 14, 2024
bb5acc9
Fix Border Width
smashedr Jul 14, 2024
e60a915
Codacy Fixes
smashedr Jul 14, 2024
f38d33e
Update Options BG Display
smashedr Jul 14, 2024
463a3b1
Fix CSS
smashedr Jul 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 13 additions & 8 deletions src/css/options.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,33 @@ body {

#options-wrapper {
width: 100%;
max-width: 800px;
max-width: 767px;
backdrop-filter: blur(6px);
filter: drop-shadow(15px 15px 12px #000000);
}

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

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

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

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

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

[data-bs-theme='light'] #table-wrapper {
background: rgba(255 255 255 / 50%);
background-color: rgba(255 255 255 / 50%);
}
51 changes: 24 additions & 27 deletions src/html/options.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ <h1>ASN Plus</h1>
<!-- <i class="fa-solid fa-circle-info ms-1"></i>-->
<!-- </span>-->
</label>
<select id="speechVoice" class="form-select" aria-label="Speech Voice">
<select id="speechVoice" class="form-select form-control" aria-label="Speech Voice">
<option value="">Browser Default</option>
</select>
<div class="form-text" id="speechVoiceHelp">
Expand Down Expand Up @@ -255,41 +255,38 @@ <h1>ASN Plus</h1>
</label>
</div>

<a id="reset-background" class="float-end align-bottom small" role="button">Reset</a>
<h5 class="mt-3">
Options Page Background
<span class="small" data-bs-toggle="tooltip" data-bs-title="Disabled or Random Picture.">
<span class="small" data-bs-toggle="tooltip" data-bs-title="Disabled, Random/Custom Picture or Video Looping.">
<i class="fa-solid fa-circle-info ms-1"></i>
</span>
</h5>
<div class="d-flex flex-column flex-md-row mb-2 align-items-md-center" style="min-height: 38px;">
<div class="flex-grow-0 mt-md-0">
<div class="ms-2 ms-md-0 mt-auto">
<div class="d-flex">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radioBackground" id="bgNone" value="none">
<label class="form-check-label" for="bgNone">
<i class="fa-regular fa-square"></i> None
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radioBackground" id="bgPicture" value="picture">
<label class="form-check-label" for="bgPicture">
<i class="fa-regular fa-image"></i> Picture
</label>
</div>
</div>
</div>

<div class=" ms-1 ms-sm-3">
<div class="form-check form-check-inline mb-2 mb-sm-0">
<input class="form-check-input" type="radio" name="radioBackground" id="bgNone" value="none">
<label class="form-check-label" for="bgNone">
<i class="fa-regular fa-square"></i> None
</label>
</div>
<div class="form-check form-check-inline mb-2">
<input class="form-check-input" type="radio" name="radioBackground" id="bgPicture" value="picture">
<label class="form-check-label" for="bgPicture">
<i class="fa-regular fa-image"></i> Picture
</label>
</div>
<div class="flex-fill mt-2 mt-md-0 ms-2 ms-md-0">
<div id="bgPictureInput" class="input-group">
<a id="reset-background" class="float-end align-bottom small" role="button">Reset</a>
</div>

<div class="ms-0 ms-sm-3">
<div id="bgPictureInput" class="input-group">
<span class="input-group-text" id="picture-addon" data-bs-toggle="tooltip" data-bs-title="URL to a Web Image or empty for default.">
<i class="fa-solid fa-circle-info"></i></span>
<input type="text" class="form-control" placeholder="Background Picture URL" aria-label="Background Picture URL"
id="pictureURL" name="pictureURL" aria-describedby="picture-addon">
</div>
<input type="text" class="form-control" placeholder="Background Picture URL" aria-label="Background Picture URL"
id="pictureURL" name="pictureURL" aria-describedby="picture-addon">
</div>
</div> <!-- background options -->
</div>

</form>

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