added HTML/CSS foundations for:

- blur strength slider
- UI preset selector
- "save new UI preset" button
This commit is contained in:
RossAscends
2023-04-12 17:12:53 +09:00
parent 8ba871101d
commit ead7c02791
2 changed files with 59 additions and 9 deletions

View File

@@ -1141,8 +1141,8 @@
</div> </div>
<hr> <hr>
<div id="color-picker-block" class="flex-container"> <div id="UI-Theme-Block" class="flex-container">
<div class="range-block wide50p"> <div id="color-picker-block" class="range-block wide50p">
<div class="flex-container wide100p flexflowcolumn"> <div class="flex-container wide100p flexflowcolumn">
<div class="range-block-title"> <div class="range-block-title">
<h4>UI Colors</h4> <h4>UI Colors</h4>
@@ -1169,9 +1169,10 @@
</div> </div>
</div> </div>
</div> </div>
<div id="font-scale-block" class="range-block wide50p"> <div id="font-blur-UIpresets-block" class="range-block wide50p">
<div id="font-scale-block" class="range-block">
<div class="range-block-title"> <div class="range-block-title">
<h4>Font Scale</h4> Font Scale
</div> </div>
<div class="range-block-range"> <div class="range-block-range">
<input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05"> <input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05">
@@ -1180,6 +1181,34 @@
<span id="font_scale_counter">select</span> <span id="font_scale_counter">select</span>
</div> </div>
</div> </div>
<div id="blur-strength-block" class="range-block">
<div class="range-block-title">
Blur Strength
</div>
<div class="range-block-range">
<input type="range" id="blur_strength" name="blur_strength" min="0.8" max="1.2" step="0.05">
</div>
<div class="range-block-counter">
<span id="blur_strength_counter">WIP</span>
</div>
</div>
<div id="UI-presets-block" class="range-block">
<div class="range-block-title">
UI Preset
</div>
<div class="flex-container flexnowrap alignitemscenter">
<select id="main_api" class="margin0 margin-r5">
<option value="###">These</option>
<option value="###">Don't Do</option>
<option value="###">Anything Yet</option>
<option value="###">Feature Currently</option>
<option value="###">Under Construction</option>
</select>
<div id="ui-preset-save-button" class="menu_button padding5 margin0">+</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -766,6 +766,7 @@ select {
border: 1px solid var(--white30a); border: 1px solid var(--white30a);
border-radius: 10px; border-radius: 10px;
margin-bottom: 10px; margin-bottom: 10px;
height: min-content;
} }
select option { select option {
@@ -3009,6 +3010,26 @@ toolcool-color-picker {
flex-wrap: wrap; flex-wrap: wrap;
} }
.flexnowrap {
flex-wrap: nowrap;
}
.alignitemscenter {
align-items: center;
}
.padding5 {
padding: 5px;
}
.margin0 {
margin: 0;
}
.margin-r5 {
margin-right: 5px;
}
.flex1 { .flex1 {
flex: 1; flex: 1;
} }