Badri Sunderarajan
be74fc8e43
I can do this confidently now that I've figured out how to test them live on the phone! (Colours there render pretty differently from the ones on my laptop screen, so I've got to view it directly to make it work.)
712 lines
14 KiB
CSS
712 lines
14 KiB
CSS
:root {
|
|
font-family: "Open Sans", sans-serif;
|
|
font-size: 10px;
|
|
|
|
/* you can edit these variables */
|
|
|
|
/* change to 'none', if there are problems with capitalization */
|
|
--capitalization: capitalize;
|
|
|
|
/* change to 'auto', if you want scrolling */
|
|
--content-overflow: hidden;
|
|
|
|
--app-background: #ffffff;
|
|
|
|
--toast-background: #323232;
|
|
--toast-color: #ffffff;
|
|
|
|
--header-background: #320574;
|
|
--header-color: #ffffff;
|
|
|
|
--softkeys-background: #cccccc;
|
|
--softkeys-color: #323232;
|
|
--softkeys-height: 3rem;
|
|
|
|
--item-background: #ffffff;
|
|
--item-text-color: #323232;
|
|
--item-subtext-color: #6a6a6a;
|
|
|
|
--item-focused-background: #873eff;
|
|
--item-focused-text-color: #ffffff;
|
|
--item-focused-subtext-color: #ffffff;
|
|
|
|
--arrow-color: #000000;
|
|
|
|
--button-background: #cccccc;
|
|
--button-color: #323232;
|
|
|
|
--button-background-focused: #873eff;
|
|
--button-color-focused: #ffffff;
|
|
|
|
--chatbox-indicator-color: #7d7d7d;
|
|
--chatbox-indicator-background-focused: #eaeaea;
|
|
--chatbox-indicator-color-focused: #7d7d7d;
|
|
--chatbox-background: #cccccc;
|
|
--chatbox-background-primary: #873eff;
|
|
--chatbox-color: #323232;
|
|
--chatbox-color-primary: #ffffff;
|
|
|
|
--checkbox-color: #873eff;
|
|
--checkbox-color-focused: #ffffff;
|
|
|
|
--radio-color: #873eff;
|
|
--radio-color-focused: #ffffff;
|
|
|
|
--slider-color: #aaaaaa;
|
|
--slider-color-selected: #873eff;
|
|
|
|
--slider-focused-color: #aaaaaa;
|
|
--slider-focused-selected: #ffffff;
|
|
|
|
--progress-color: #aaaaaa;
|
|
--progress-color-selected: #873eff;
|
|
|
|
--progress-focused-color: #aaaaaa;
|
|
--progress-focused-selected: #ffffff;
|
|
|
|
--separator-background: #e6e6e6;
|
|
--separator-color: #6a6a6a;
|
|
|
|
--textarea-height: 5rem;
|
|
}
|
|
|
|
/* change this to any class your spatial navigation library uses. .dpad-navigation for gauntface/dpad-navigation,.navigable for amanboss9/naviboard.*/
|
|
.focusable:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* color when not focused */
|
|
|
|
.slider-container,
|
|
.list-item-indicator,
|
|
.list-item-icon,
|
|
.list-item,
|
|
.checkbox-container,
|
|
.radio-container,
|
|
.button-container,
|
|
.input-container,
|
|
.textarea-container,
|
|
.progress-container {
|
|
background: var(--item-background);
|
|
}
|
|
|
|
.slider-container__text,
|
|
.list-item-indicator__text,
|
|
.list-item-icon__text,
|
|
.list-item__text,
|
|
.checkbox-container__text,
|
|
.radio-container__text,
|
|
.progress-container__label {
|
|
color: var(--item-text-color);
|
|
}
|
|
|
|
.slider-container__subtext,
|
|
.list-item-indicator__subtext,
|
|
.list-item-icon__subtext,
|
|
.list-item__subtext,
|
|
.checkbox-container__subtext,
|
|
.radio-container__subtext,
|
|
.input-container__label,
|
|
.textarea-container__label {
|
|
color: var(--item-subtext-color);
|
|
}
|
|
|
|
/* color when focused */
|
|
|
|
.selected,
|
|
.list-item:focus,
|
|
.list-item-indicator:focus,
|
|
.list-item-icon:focus,
|
|
.progress-container:focus {
|
|
background: var(--item-focused-background);
|
|
}
|
|
|
|
.progress-container:focus > .progress-container__label,
|
|
.selected > .slider-container__text,
|
|
.list-item-indicator:focus > .list-item-indicator__text,
|
|
.list-item-icon:focus .list-item-icon__text,
|
|
.list-item:focus > .list-item__text,
|
|
.selected > .checkbox-container__text,
|
|
.selected > .radio-container__text {
|
|
color: var(--item-focused-text-color);
|
|
}
|
|
|
|
.selected > .slider-container__subtext,
|
|
.list-item-indicator:focus > .list-item-indicator__subtext,
|
|
.list-item-icon:focus .list-item-icon__subtext,
|
|
.list-item:focus > .list-item__subtext,
|
|
.selected > .checkbox-container__subtext,
|
|
.selected > .radio-container__subtext,
|
|
.selected > .input-container__label,
|
|
.selected > .textarea-container__label {
|
|
color: var(--item-focused-subtext-color);
|
|
}
|
|
|
|
/* ikr, i hate !important too but i dont want to think out other solution. */
|
|
.selected > .radio-container__radio {
|
|
background: var(--radio-color-focused) !important;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
#app {
|
|
background: var(--app-background);
|
|
width: 100vw;
|
|
height: 100%;
|
|
}
|
|
|
|
#content {
|
|
overflow: var(--content-overflow);
|
|
width: 100vw;
|
|
height: calc(100% - 5.8rem - 26px);
|
|
}
|
|
|
|
/* Toast */
|
|
|
|
.toast {
|
|
height: 3.6rem;
|
|
width: 100%;
|
|
font-size: 1.7rem;
|
|
line-height: 3.6rem;
|
|
background: var(--toast-background);
|
|
color: var(--toast-color);
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
position: absolute;
|
|
transform: translateY(-3.6rem);
|
|
transition: transform 1s ease-in-out;
|
|
z-index: 1;
|
|
top: 0;
|
|
}
|
|
|
|
.toast--on {
|
|
transform: translateY(0rem);
|
|
}
|
|
|
|
/* Header */
|
|
|
|
#header {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
line-height: 2.8rem;
|
|
height: 2.8rem;
|
|
padding: 26px 1rem 0 1rem;
|
|
background: var(--header-background);
|
|
color: var(--header-color);
|
|
font-size: 1.7rem;
|
|
font-weight: 400;
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
/* List item */
|
|
|
|
.list-item {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 1rem;
|
|
height: 6rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.list-item__text {
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
font-size: 1.7rem;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
|
|
.list-item__text::first-letter {
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
.list-item__subtext {
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
font-size: 1.4rem;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
|
|
.list-item__subtext::first-letter {
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
/* List item with an indicator */
|
|
|
|
.list-item-indicator {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 1rem 3rem 1rem 1rem;
|
|
height: 6rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.list-item-indicator__text {
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
font-size: 1.7rem;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
|
|
.list-item-indicator__text::first-letter {
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
.list-item-indicator__subtext {
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
font-size: 1.4rem;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
|
|
.list-item-indicator__subtext::first-letter {
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
.list-item-indicator__indicator {
|
|
height: 1rem;
|
|
width: 1rem;
|
|
position: absolute;
|
|
right: 1.5rem;
|
|
border: solid var(--item-subtext-color);
|
|
border-width: 0 0.2rem 0.2rem 0;
|
|
display: inline-block;
|
|
transform: rotate(-45deg) translateY(-50%);
|
|
top: 50%;
|
|
}
|
|
|
|
.list-item-indicator:focus > .list-item-indicator__indicator {
|
|
border-color: var(--item-focused-subtext-color);
|
|
}
|
|
|
|
/* List item with an icon */
|
|
|
|
.list-item-icon {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 1rem;
|
|
height: 6rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.list-item-icon__text-container {
|
|
margin-left: 1rem;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.list-item-icon__text {
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
font-size: 1.7rem;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
|
|
.list-item-icon__text::first-letter {
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
.list-item-icon__subtext {
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
font-size: 1.4rem;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
|
|
.list-item-icon__subtext::first-letter {
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
.list-item-icon__icon {
|
|
height: 3.2rem;
|
|
width: 3.2rem;
|
|
}
|
|
|
|
/* Separator */
|
|
|
|
.separator {
|
|
vertical-align: middle;
|
|
line-height: 2.4rem;
|
|
height: 2.4rem;
|
|
padding: 0 1rem 0 1rem;
|
|
font-size: 1.4rem;
|
|
font-weight: 400;
|
|
background: var(--separator-background);
|
|
color: var(--separator-color);
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
/* List item with radio */
|
|
|
|
.radio-container {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 1rem 3rem 1rem 1rem;
|
|
height: 6rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.radio-container__text {
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
font-size: 1.7rem;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
|
|
.radio-container__text::first-letter {
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
.radio-container__subtext {
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
font-size: 1.4rem;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
|
|
.radio-container__subtext::first-letter {
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
.radio-container__radio,
|
|
.checkbox-container__checkbox {
|
|
box-sizing: border-box;
|
|
height: 3rem;
|
|
width: 3rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
.radio-container__input,
|
|
.checkbox-container__input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
|
|
.radio-container__input + .radio-container__radio {
|
|
background: var(--radio-color);
|
|
/* you can change it to "checkboxes-radios/radio-off-kaios-2.5.svg" */
|
|
mask-image: url("checkboxes-radios/radio-off-kaios-2.5.3.svg");
|
|
}
|
|
|
|
.radio-container__input:checked + .radio-container__radio {
|
|
/* you can change it to "checkboxes-radios/radio-on-kaios-2.5.svg" */
|
|
mask-image: url("checkboxes-radios/radio-on-kaios-2.5.3.svg");
|
|
}
|
|
|
|
/* List item with checkbox */
|
|
|
|
.checkbox-container {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 1rem 3rem 1rem 1rem;
|
|
height: 6rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.checkbox-container__text {
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
font-size: 1.7rem;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
|
|
.checkbox-container__text::first-letter {
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
.checkbox-container__subtext {
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
font-size: 1.4rem;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
|
|
.checkbox-container__subtext::first-letter {
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
/* List item with progress bar */
|
|
|
|
.progress-container {
|
|
box-sizing: border-box;
|
|
padding: 1rem;
|
|
height: 6rem;
|
|
}
|
|
|
|
.progress-container__label {
|
|
overflow: hidden;
|
|
font-size: 1.7rem;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
display: block;
|
|
}
|
|
|
|
.progress-container__label::first-letter {
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
.progress-container__progress {
|
|
-webkit-appearance: none;
|
|
margin: 1rem 0 0 0;
|
|
height: 0.5rem;
|
|
border: none;
|
|
border-radius: 0.5rem;
|
|
width: 100%;
|
|
grid-area: slider;
|
|
background: var(--progress-color);
|
|
}
|
|
|
|
.progress-container__progress::-moz-progress-bar {
|
|
border-top-left-radius: 0.5rem;
|
|
border-bottom-left-radius: 0.5rem;
|
|
background: var(--progress-color-selected);
|
|
border-right: 0.3rem solid var(--item-background);
|
|
height: 0.5rem;
|
|
}
|
|
|
|
.progress-container:focus > .progress-container__progress {
|
|
background: var(--progress-focused-color);
|
|
}
|
|
|
|
.progress-container:focus > .progress-container__progress::-moz-progress-bar {
|
|
background: var(--progress-focused-selected);
|
|
border-right-color: var(--item-focused-background);
|
|
}
|
|
|
|
/* List item with slider */
|
|
|
|
.slider-container {
|
|
box-sizing: border-box;
|
|
padding: 1rem;
|
|
height: 6rem;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"text text subtext"
|
|
"slider slider slider";
|
|
}
|
|
|
|
.slider-container__slider {
|
|
-moz-appearance: none;
|
|
margin: 1rem 0 0 0;
|
|
height: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
width: 100%;
|
|
grid-area: slider;
|
|
background: var(--slider-color);
|
|
}
|
|
|
|
.slider-container__slider::-moz-focus-outer {
|
|
border: 0;
|
|
}
|
|
|
|
.slider-container__text {
|
|
overflow: hidden;
|
|
font-size: 1.7rem;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
display: block;
|
|
grid-area: text;
|
|
}
|
|
|
|
.slider-container__text::first-letter {
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
.slider-container__subtext {
|
|
overflow: hidden;
|
|
font-size: 1.4rem;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: end;
|
|
align-items: center;
|
|
grid-area: subtext;
|
|
}
|
|
|
|
.slider-container__slider::-moz-range-thumb {
|
|
outline: none;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border: 0.3rem solid var(--item-background);
|
|
border-radius: 50%;
|
|
background: var(--slider-color-selected);
|
|
}
|
|
|
|
.slider-container__slider::-moz-range-progress {
|
|
background: var(--slider-color-selected);
|
|
height: 0.5rem;
|
|
border-top-left-radius: 0.5rem;
|
|
border-bottom-left-radius: 0.5rem;
|
|
}
|
|
|
|
.slider-container__slider:focus::-moz-range-thumb {
|
|
border: 0.3rem solid var(--item-focused-background);
|
|
background: var(--slider-focused-selected);
|
|
}
|
|
|
|
.slider-container__slider:focus::-moz-range-progress {
|
|
background: var(--slider-focused-selected);
|
|
}
|
|
|
|
/* Button */
|
|
|
|
.button-container {
|
|
padding: 0 1rem 1rem 1rem;
|
|
}
|
|
|
|
.button-container__button {
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 3.6rem;
|
|
margin-top: 1rem;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 1.7rem;
|
|
font-weight: 400;
|
|
background: var(--button-background);
|
|
color: var(--button-color);
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
.button-container__button:focus {
|
|
background: var(--button-background-focused);
|
|
color: var(--button-color-focused);
|
|
}
|
|
|
|
.button-container__button::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
/* Input */
|
|
|
|
.input-container,
|
|
.textarea-container {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.input-container__input,
|
|
.textarea-container__textarea {
|
|
padding: 0 0.3rem 0 0.3rem;
|
|
margin-top: 0.5rem;
|
|
width: 100%;
|
|
font-size: 1.7rem;
|
|
font-weight: 400;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
}
|
|
|
|
.input-container__input {
|
|
height: 3.6rem;
|
|
}
|
|
|
|
.textarea-container__textarea {
|
|
height: var(--textarea-height);
|
|
}
|
|
|
|
.input-container__label,
|
|
.textarea-container__label {
|
|
font-size: 1.4rem;
|
|
font-weight: 400;
|
|
display: block;
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
/* Software Keys */
|
|
|
|
.softkeys,
|
|
.softkeys-icon {
|
|
box-sizing: border-box;
|
|
padding: 0.5rem;
|
|
column-gap: 0.5rem;
|
|
/* grid-gap is an old way of saying column-gap */
|
|
grid-gap: 0.5rem;
|
|
display: grid;
|
|
height: var(--softkeys-height);
|
|
background: var(--softkeys-background);
|
|
color: var(--softkeys-color);
|
|
}
|
|
|
|
.softkey {
|
|
overflow: hidden;
|
|
vertical-align: middle;
|
|
height: 2rem;
|
|
}
|
|
|
|
.softkey-left {
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
text-align: start;
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
.softkey-center {
|
|
font-size: 1.7rem;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.softkey-right {
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
text-align: end;
|
|
text-transform: var(--capitalization);
|
|
}
|
|
|
|
@media only screen and (orientation: portrait) {
|
|
.softkeys {
|
|
grid-template-columns: 7.2rem 7.6rem 7.2rem;
|
|
}
|
|
}
|
|
|
|
@media only screen and (orientation: portrait) {
|
|
.softkeys-icon {
|
|
grid-template-columns: 9.8rem 2.4rem 9.8rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (orientation: landscape) {
|
|
.softkeys {
|
|
grid-template-columns: 9.6rem 10.8rem 9.6rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (orientation: landscape) {
|
|
.softkeys-icon {
|
|
grid-template-columns: 13.8rem 2.4rem 13.8rem;
|
|
}
|
|
}
|
|
|