mirror of
https://github.com/SerenityOS/serenity
synced 2024-09-16 06:30:41 +00:00
107 lines
3.9 KiB
HTML
107 lines
3.9 KiB
HTML
<style>
|
|
.big {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
.color-light {
|
|
accent-color: wheat;
|
|
}
|
|
.color-dark {
|
|
accent-color: rebeccapurple
|
|
}
|
|
</style>
|
|
|
|
<div>
|
|
<b>System color</b><br>
|
|
<form>
|
|
<input type="checkbox" checked></input>
|
|
<input type="checkbox" ></input>
|
|
<input class="indeterminate" type="checkbox"></input>
|
|
<input type="checkbox" checked disabled></input>
|
|
<input type="checkbox" disabled></input>
|
|
<input class="indeterminate" type="checkbox" disabled></input>
|
|
|
|
<input class="big" type="checkbox" checked></input>
|
|
<input class="big" type="checkbox" ></input>
|
|
<input class="big indeterminate" type="checkbox"></input>
|
|
<input class="big" type="checkbox" checked disabled></input>
|
|
<input class="big" type="checkbox" disabled></input>
|
|
<input class="big indeterminate" type="checkbox" disabled></input>
|
|
</form>
|
|
<form>
|
|
<input name="radio-small" type="radio" checked></input>
|
|
<input name="radio-small" type="radio"></input>
|
|
<input type="radio" checked disabled></input>
|
|
<input type="radio" disabled></input>
|
|
<input name="radio-big" class="big" type="radio" checked></input>
|
|
<input name="radio-big" class="big" type="radio"></input>
|
|
<input class="big" type="radio" checked disabled></input>
|
|
<input class="big" type="radio" disabled></input>
|
|
</form>
|
|
</div>
|
|
<br>
|
|
<div class="color-dark">
|
|
<b>Dark accent color</b><br>
|
|
<form>
|
|
<input type="checkbox" checked></input>
|
|
<input type="checkbox" ></input>
|
|
<input class="indeterminate" type="checkbox"></input>
|
|
<input type="checkbox" checked disabled></input>
|
|
<input type="checkbox" disabled></input>
|
|
<input class="indeterminate" type="checkbox" disabled></input>
|
|
|
|
<input class="big" type="checkbox" checked></input>
|
|
<input class="big" type="checkbox" ></input>
|
|
<input class="big indeterminate" type="checkbox"></input>
|
|
<input class="big" type="checkbox" checked disabled></input>
|
|
<input class="big" type="checkbox" disabled></input>
|
|
<input class="big indeterminate" type="checkbox" disabled></input>
|
|
</form>
|
|
<form>
|
|
<input name="radio-small" type="radio" checked></input>
|
|
<input name="radio-small" type="radio"></input>
|
|
<input type="radio" checked disabled></input>
|
|
<input type="radio" disabled></input>
|
|
<input name="radio-big" class="big" type="radio" checked></input>
|
|
<input name="radio-big" class="big" type="radio"></input>
|
|
<input class="big" type="radio" checked disabled></input>
|
|
<input class="big" type="radio" disabled></input>
|
|
</form>
|
|
</div>
|
|
<br>
|
|
<div class="color-light">
|
|
<b>Light accent color</b><br>
|
|
<form>
|
|
<input type="checkbox" checked></input>
|
|
<input type="checkbox" ></input>
|
|
<input class="indeterminate" type="checkbox"></input>
|
|
<input type="checkbox" checked disabled></input>
|
|
<input type="checkbox" disabled></input>
|
|
<input class="indeterminate" type="checkbox" disabled></input>
|
|
|
|
<input class="big" type="checkbox" checked></input>
|
|
<input class="big" type="checkbox" ></input>
|
|
<input class="big indeterminate" type="checkbox"></input>
|
|
<input class="big" type="checkbox" checked disabled></input>
|
|
<input class="big" type="checkbox" disabled></input>
|
|
<input class="big indeterminate" type="checkbox" disabled></input>
|
|
</form>
|
|
<form>
|
|
<input name="radio-small" type="radio" checked></input>
|
|
<input name="radio-small" type="radio"></input>
|
|
<input type="radio" checked disabled></input>
|
|
<input type="radio" disabled></input>
|
|
<input name="radio-big" class="big" name="c" type="radio" checked></input>
|
|
<input name="radio-big" class="big" name="c" type="radio"></input>
|
|
<input class="big" type="radio" checked disabled></input>
|
|
<input class="big" type="radio" disabled></input>
|
|
</form>
|
|
</div>
|
|
<br>
|
|
<script>
|
|
document.querySelectorAll(".indeterminate").forEach(checkbox => {
|
|
checkbox.indeterminate = true;
|
|
});
|
|
|
|
</script>
|