ruffle/web/packages/extension/build/settings.htm

117 lines
3.5 KiB
HTML
Raw Normal View History

2020-05-28 17:19:41 +00:00
<!DOCTYPE html>
<html>
2020-11-28 22:14:09 +00:00
<head>
<title>Ruffle Settings</title>
<script type="text/javascript" src="dist/popup.js"></script>
<style>
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
font-size: 14px;
margin: 0;
background-color: #37528C;
}
a {
color: #FFAD33;
font-weight: bold;
margin: 0 12px;
}
.Ruffle-logo {
text-align: center;
padding: 16px 0;
background-color: #184778;
box-shadow: 0 0 15px #0008;
}
.Ruffle-user_settings {
width: 384px;
color: #FFF;
text-align: left;
margin: 16px auto;
}
.Ruffle-user_setting {
display: flex;
padding: 12px;
}
.Ruffle-checkbox_with_slider {
display: none;
}
.Ruffle-user_setting_text {
flex-grow: 1;
}
.Ruffle-checkbox_slider {
display: inline-block;
position: relative;
flex-shrink: 0;
width: 30px;
height: 7px;
border-radius: 5px;
margin: 4px 0px auto 15px;
background-color: #966214;
box-shadow: 0 2px 1px #0008;
}
.Ruffle-checkbox_slider:after {
content: "";
display: block;
position: absolute;
left: 20%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #FFAD33;
box-shadow: 0 1px 1px #0008;
width: 15px;
height: 15px;
border-radius: 100%;
transition: left 0.1s;
}
.Ruffle-checkbox_with_slider:checked ~ .Ruffle-checkbox_slider:after {
left: 80%;
}
.Ruffle-links {
position: absolute;
text-align: center;
width: 100%;
bottom: 24px;
}
</style>
</head>
<body>
<div class="Ruffle-logo">
<a href="https://ruffle.rs/"><img src="logo/328.png" alt="Ruffle" width="224"></a>
</div>
<form class="Ruffle-user_settings">
<label class="Ruffle-user_setting" for="ruffle_enable">
<input class="Ruffle-checkbox_with_slider" type="checkbox" name="ruffle_enable" id="ruffle_enable">
<span class="Ruffle-user_setting_text"></span>
<div class="Ruffle-checkbox_slider"></div>
</label>
<label class="Ruffle-user_setting" for="ignore_optout">
<input class="Ruffle-checkbox_with_slider" type="checkbox" name="ignore_optout" id="ignore_optout">
<span class="Ruffle-user_setting_text"></span>
<div class="Ruffle-checkbox_slider"></div>
</label>
</form>
<div class="Ruffle-links">
<a href="https://github.com/ruffle-rs/ruffle">GitHub</a>
<a href="https://ruffle.rs/">Ruffle.rs</a>
</div>
</body>
</html>