diff --git a/assets/checkbox.css b/assets/checkbox.css new file mode 100644 index 0000000..9f96335 --- /dev/null +++ b/assets/checkbox.css @@ -0,0 +1,85 @@ +[type="checkbox"]:not(:checked), +[type="checkbox"]:checked { + position: absolute; + left: 0; + opacity: 0.01; +} + +[type="checkbox"]:not(:checked)+label, +[type="checkbox"]:checked+label { + position: relative; + padding-left: 2.3em; + font-size: 1.05em; + line-height: 1.7; + cursor: pointer; +} + +/* checkbox aspect */ +[type="checkbox"]:not(:checked)+label:before, +[type="checkbox"]:checked+label:before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 1.4em; + height: 1.4em; + border: 1px solid #565656; + background: #4c4c4c; + border-radius: .2em; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 hsla(var(--main-accent), 93%, 48%, 20%); + -webkit-transition: all .275s; + transition: all .275s; +} + +/* checked mark aspect */ +[type="checkbox"]:not(:checked)+label:after, +[type="checkbox"]:checked+label:after { + content: '✕'; + position: absolute; + top: .525em; + left: .18em; + font-size: 1.375em; + font-weight: bolder; + color: hsl(var(--main-accent), 93%, 48%); + line-height: 0; + -webkit-transition: all .2s; + transition: all .2s; +} + +/* checked mark aspect changes */ +[type="checkbox"]:not(:checked)+label:after { + opacity: 0; + -webkit-transform: scale(0) rotate(45deg); + transform: scale(0) rotate(45deg); +} + +[type="checkbox"]:checked+label:after { + opacity: 1; + -webkit-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + translate: -1.5px -1px; +} + +/* Disabled checkbox */ +[type="checkbox"]:disabled:not(:checked)+label:before, +[type="checkbox"]:disabled:checked+label:before { + box-shadow: none; + border-color: #565656; + background-color: #4c4c4c; + cursor: not-allowed; +} + +[type="checkbox"]:disabled:checked+label:after { + color: #777; +} + +[type="checkbox"]:disabled+label { + color: #aaa; + cursor: not-allowed; +} + +/* Accessibility */ +[type="checkbox"]:checked:focus+label:before, +[type="checkbox"]:not(:checked):focus+label:before { + box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 6px hsla(var(--main-accent), 93%, 48%, 20%); +} \ No newline at end of file diff --git a/assets/launcher.css b/assets/launcher.css index 424c962..224c5b6 100644 --- a/assets/launcher.css +++ b/assets/launcher.css @@ -23,6 +23,15 @@ width: 100%; } +.launch-button-section { + display: flex; + flex-direction: column; +} + +.launch-button-section button { + margin-bottom: 10px; +} + .loading-section, .login-section { margin-top: 35px; @@ -48,7 +57,7 @@ } .folder-section { - margin-top: 45px; + margin-top: 13px; display: flex; flex-flow: column; justify-content: center; diff --git a/html/index.html b/html/index.html index dc86598..3d211f6 100644 --- a/html/index.html +++ b/html/index.html @@ -8,6 +8,7 @@ +