b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
522 lines
13 KiB
CSS
522 lines
13 KiB
CSS
html, body {
|
|
padding: 0;
|
|
border: 0;
|
|
margin: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
color: #FFF;
|
|
font-size: 10px;
|
|
}
|
|
|
|
/**
|
|
* 1. No content inside the app
|
|
* should be user-selectable.
|
|
*/
|
|
* {
|
|
-moz-user-select: none; /* 1 */
|
|
}
|
|
|
|
a {
|
|
outline: 0 none;
|
|
text-decoration: none;
|
|
color: #FFF;
|
|
}
|
|
|
|
a:active {
|
|
color: #000;
|
|
background-color: #00ABCD;
|
|
}
|
|
|
|
.hidden-block {
|
|
visibility: hidden;
|
|
}
|
|
|
|
#container {
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: #2F3337;
|
|
}
|
|
|
|
#container > div {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/****** styles for frequency view *******/
|
|
#frequency-bar {
|
|
border-bottom: 1px solid #24292E;
|
|
box-sizing: border-box;
|
|
top: 0;
|
|
height: 10rem;
|
|
width: 100%;
|
|
text-align: center;
|
|
background-color: #353A41;
|
|
overflow: hidden;
|
|
transition: background-color 680ms ease;
|
|
}
|
|
|
|
#frequency-bar.dim {
|
|
background-color: #232323;
|
|
}
|
|
|
|
#frequency-bar > div {
|
|
text-align: center;
|
|
}
|
|
|
|
#frequency-bar a {
|
|
position: absolute;
|
|
z-index: 1;
|
|
line-height: 4rem;
|
|
width: 3.8rem;
|
|
height: 3.8rem;
|
|
font-size: 1.4rem;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-top: 3rem;
|
|
box-shadow: 0 -.1rem .1rem #111;
|
|
}
|
|
|
|
#frequency-display {
|
|
position: relative;
|
|
transition: opacity 680ms ease;
|
|
}
|
|
|
|
.dim #frequency-display {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
#bookmark-button {
|
|
top: 0;
|
|
right: 2rem;
|
|
}
|
|
|
|
#frequency {
|
|
font-size: 6rem;
|
|
font-weight: 300;
|
|
color: #fff;
|
|
padding-top: 1.5rem;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 10rem;
|
|
display: block;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
#frequency small {
|
|
font-size: 1.5rem;
|
|
padding-left: 0.3rem;
|
|
}
|
|
|
|
#bookmark-button {
|
|
background: image-set(url("images/toggle-fav-star-off.png") 1x, url("images/toggle-fav-star-off@1.5x.png") 1.5x, url("images/toggle-fav-star-off@2x.png") 2x, url("images/toggle-fav-star-off@2.25x.png") 2.25x) no-repeat center center / 4rem;
|
|
}
|
|
|
|
#bookmark-button:focus {
|
|
border-color: #888;
|
|
}
|
|
|
|
#bookmark-button:active,
|
|
#bookmark-button[data-bookmarked="true"]:active {
|
|
background: #00ABCD image-set(url("images/toggle-fav-star-pressed.png") 1x, url("images/toggle-fav-star-pressed@1.5x.png") 1.5x, url("images/toggle-fav-star-pressed@2x.png") 2x, url("images/toggle-fav-star-pressed@2.25x.png") 2.25x) no-repeat center center / 4rem;
|
|
}
|
|
|
|
#bookmark-button[data-bookmarked="true"] {
|
|
background: image-set(url("images/toggle-fav-star-on.png") 1x, url("images/toggle-fav-star-on@1.5x.png") 1.5x, url("images/toggle-fav-star-on@2x.png") 2x, url("images/toggle-fav-star-on@2.25x.png") 2.25x) no-repeat center center / 4rem;
|
|
}
|
|
|
|
#speaker-switch {
|
|
top: 0;
|
|
left: 2rem;
|
|
background: image-set(url("images/speaker-off.png") 1x, url("images/speaker-off@1.5x.png") 1.5x, url("images/speaker-off@2x.png") 2x, url("images/speaker-off@2.25x.png") 2.25x) no-repeat center center / 4rem;
|
|
}
|
|
|
|
#speaker-switch:focus {
|
|
border-color: #888;
|
|
}
|
|
|
|
#speaker-switch:active,
|
|
#speaker-switch[data-speaker-on="true"]:active {
|
|
background: #00ABCD image-set(url("images/speaker-pressed.png") 1x, url("images/speaker-pressed@1.5x.png") 1.5x, url("images/speaker-pressed@2x.png") 2x, url("images/speaker-pressed@2.25x.png") 2.25x) no-repeat center center / 4rem;
|
|
}
|
|
|
|
#speaker-switch[data-speaker-on="true"] {
|
|
background: image-set(url("images/speaker-on.png") 1x, url("images/speaker-on@1.5x.png") 1.5x, url("images/speaker-on@2x.png") 2x, url("images/speaker-on@2.25x.png") 2.25x) no-repeat center center / 4rem;
|
|
}
|
|
/***** end *****/
|
|
|
|
/**** styles for frequency dialer *****/
|
|
#dialer-bar {
|
|
top: 10rem;
|
|
font-size: 1.4rem;
|
|
font-weight: 400;
|
|
height: 9rem;
|
|
overflow: hidden;
|
|
background: #2F3337;
|
|
color: #FFF;
|
|
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
#dialer-container {
|
|
box-shadow: inset 0 0.05rem 0 #3A3F44;
|
|
position: relative;
|
|
padding-left: 50%;
|
|
margin: 0 2rem;
|
|
height: 100%;
|
|
}
|
|
|
|
#dialer-container:before,
|
|
#dialer-container:after {
|
|
content: "";
|
|
background-color: #474E57;
|
|
box-shadow: inset 0 0.05rem 0 #585E65;
|
|
position: absolute;
|
|
width: 2rem;
|
|
height: 100%;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#dialer-container:before {
|
|
border-right: 0.1rem solid #24292E;
|
|
left: -2rem;
|
|
}
|
|
|
|
#dialer-container:after {
|
|
border-left: 0.1rem solid #24292E;
|
|
right: -2rem;
|
|
}
|
|
|
|
#frequency-indicator {
|
|
border-radius: 50%/0.1rem;
|
|
height: 8.6rem;
|
|
width: 1.6rem;
|
|
margin: 0.6rem 0 0 -0.8rem;
|
|
position: absolute;
|
|
z-index: 1;
|
|
background: image-set(url("images/selector.png") 1x, url("images/selector@1.5x.png") 1.5x, url("images/selector@2x.png") 2x, url("images/selector@2.25x.png") 2.25x) no-repeat center center / 1.6rem;
|
|
top: 0;
|
|
left: 50%;
|
|
}
|
|
|
|
div.animation-on > div {
|
|
transition: -moz-transform var(--transition-duration) ease 0s;
|
|
}
|
|
|
|
#frequency-dialer {
|
|
display: inline-block;
|
|
display: -moz-inline-box;
|
|
-moz-user-select: none;
|
|
width: 100%;
|
|
margin-left: -2.2rem;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
#frequency-dialer .dialer-unit-mark-box {
|
|
background: image-set(url("images/dial-notches.png") 1x, url("images/dial-notches@1.5x.png") 1.5x, url("images/dial-notches@2x.png") 2x, url("images/dial-notches@2.25x.png") 2.25x) no-repeat 0 3.4rem / 32rem;
|
|
overflow: hidden;
|
|
height: 5.5rem;
|
|
}
|
|
|
|
#frequency-dialer .dialer-unit {
|
|
text-align: left;
|
|
height: 7.5rem;
|
|
position: absolute;
|
|
width: 32rem;
|
|
}
|
|
|
|
/* The beginning and end of the dial are masked to hide notches that
|
|
are out of range. */
|
|
.dialer-unit-mark-mask-start,
|
|
.dialer-unit-mark-mask-end {
|
|
background-color: #2F3337;
|
|
display: block;
|
|
height: 5.5rem;
|
|
position: absolute;
|
|
}
|
|
/* The mask at the end should be jogged left by 0.3rem, since the
|
|
mask is intended to cover everything except the first notch. */
|
|
.dialer-unit-mark-mask-end {
|
|
margin-left: .3rem;
|
|
}
|
|
|
|
#frequency-dialer .dialer-unit-floor {
|
|
color: #AAA;
|
|
float: left;
|
|
}
|
|
/**** end *******/
|
|
|
|
/***** styles for favorites list ******/
|
|
div#fav-list {
|
|
overflow: auto;
|
|
top: 19rem;
|
|
bottom: 9rem;
|
|
}
|
|
|
|
div#fav-list-container {
|
|
max-height: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
div#fav-list-container > div:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 2rem;
|
|
right: 2rem;
|
|
width: calc(100% - 4rem);
|
|
height: .1rem;
|
|
background-color: #3D4045;
|
|
}
|
|
|
|
div#fav-list-container > div {
|
|
position: relative;
|
|
font-size: 2.3rem;
|
|
font-weight: 300;
|
|
height: 4.4rem;
|
|
padding-bottom: 0.2rem;
|
|
clear: both;
|
|
}
|
|
|
|
div#fav-list-container > div:active {
|
|
background-color: rgba(52,140,158, .6);
|
|
}
|
|
|
|
div#fav-list-container > div:active:before,
|
|
div#fav-list-container > div:active + div:before {
|
|
background-color: transparent;
|
|
}
|
|
|
|
div#fav-list-container div.fav-list-remove-button {
|
|
height: 100%;
|
|
width: 4rem;
|
|
margin-left: 2rem;
|
|
float: right;
|
|
cursor: pointer;
|
|
background: image-set(url("images/fav-star.png") 1x, url("images/fav-star@1.5x.png") 1.5x, url("images/fav-star@2x.png") 2x, url("images/fav-star@2.25x.png") 2.25x) no-repeat center center / 1.4rem;
|
|
}
|
|
|
|
div#fav-list-container div.selected div.fav-list-remove-button {
|
|
background: image-set(url("images/fav-star-selected.png") 1x, url("images/fav-star-selected@1.5x.png") 1.5x, url("images/fav-star-selected@2x.png") 2x, url("images/fav-star-selected@2.25x.png") 2.25x) no-repeat center center / 1.4rem;
|
|
}
|
|
|
|
div#fav-list-container div.fav-list-frequency {
|
|
float: right;
|
|
padding: 0.8rem -moz-calc(50% - 2.4rem) 0 0;
|
|
text-align: right;
|
|
width: 6rem;
|
|
}
|
|
|
|
div#fav-list-container div.fav-list-frequency small {
|
|
font-size: 1.5rem;
|
|
position: absolute;
|
|
padding: .6rem .2rem 0 1rem;
|
|
}
|
|
/***** end *****/
|
|
|
|
/***** styles for status bars *****/
|
|
#action-bar {
|
|
bottom: 0;
|
|
border-top: .1rem solid #3A3E46;
|
|
box-shadow: 0 0 .2rem #111;
|
|
height: 9rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Styles for action bar */
|
|
/* FIX: it doesn't hide itself */
|
|
#action-bar[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
#action-bar > div {
|
|
text-align: center;
|
|
padding: 1rem 0 0;
|
|
width: 33.333%;
|
|
float: left;
|
|
}
|
|
|
|
#action-bar > div:first-child {
|
|
text-align: right;
|
|
}
|
|
|
|
#action-bar > div:last-child {
|
|
text-align: left;
|
|
}
|
|
|
|
#action-bar a {
|
|
display: inline-block;
|
|
border: none;
|
|
font-size: 2.5rem;
|
|
width: 7rem;
|
|
height: 7rem;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
box-shadow: 0 .1rem .1rem #A8A8A8 inset, 0 .2rem 0 #1e2226;
|
|
}
|
|
|
|
#action-bar a:active {
|
|
color: #FFF;
|
|
background-color: #00ABCD;
|
|
box-shadow: 0 .1rem .1rem #3F6978 inset, 0 .2rem 0 #1e2226;
|
|
}
|
|
|
|
#power-switch, #power-switch span {
|
|
background-image: image-set(url("images/play.png") 1x, url("images/play@1.5x.png") 1.5x, url("images/play@2x.png") 2x, url("images/play@2.25x.png") 2.25x), image-set(url("images/reflection-72.png") 1x, url("images/reflection-72@1.5x.png") 1.5x, url("images/reflection-72@2x.png") 2x, url("images/reflection-72@2.25x.png") 2.25x);
|
|
background-repeat: no-repeat, no-repeat;
|
|
background-color: transparent;
|
|
background-position: center center, 0 0;
|
|
background-size: 7.2rem;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
#power-switch:active {
|
|
background-image: image-set(url("images/play.png") 1x, url("images/play@1.5x.png") 1.5x, url("images/play@2x.png") 2x, url("images/play@2.25x.png") 2.25x);
|
|
}
|
|
|
|
#power-switch[data-enabled="true"] {
|
|
background-image: image-set(url("images/stop.png") 1x, url("images/stop@1.5x.png") 1.5x, url("images/stop@2x.png") 2x, url("images/stop@2.25x.png") 2.25x), image-set(url("images/reflection-72.png") 1x, url("images/reflection-72@1.5x.png") 1.5x, url("images/reflection-72@2x.png") 2x, url("images/reflection-72@2.25x.png") 2.25x);
|
|
}
|
|
|
|
#power-switch[data-enabled="true"]:active {
|
|
background-image: image-set(url("images/stop.png") 1x, url("images/stop@1.5x.png") 1.5x, url("images/stop@2x.png") 2x, url("images/stop@2.25x.png") 2.25x);
|
|
}
|
|
|
|
#power-switch span {
|
|
background-image: image-set(url("images/spinner-FMRadio.png") 1x, url("images/spinner-FMRadio@1.5x.png") 1.5x, url("images/spinner-FMRadio@2x.png") 2x, url("images/spinner-FMRadio@2.25x.png") 2.25x);
|
|
background-size: 6.6rem;
|
|
display: none;
|
|
height: 6.6rem;
|
|
left: 0.2rem;
|
|
position: absolute;
|
|
top: 0.2rem;
|
|
width: 6.6rem;
|
|
}
|
|
|
|
#power-switch[data-enabling="true"] span,
|
|
#power-switch[data-seeking="true"] span {
|
|
animation: 0.9s spinner-animation infinite steps(30);
|
|
display: block;
|
|
}
|
|
|
|
@keyframes spinner-animation {
|
|
from {
|
|
transform: rotate(1deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
a#frequency-op-seekdown {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
margin: 1rem 0;
|
|
background-image: image-set(url("images/seekdown.png") 1x, url("images/seekdown@1.5x.png") 1.5x, url("images/seekdown@2x.png") 2x, url("images/seekdown@2.25x.png") 2.25x), image-set(url("images/reflection-56.png") 1x, url("images/reflection-56@1.5x.png") 1.5x, url("images/reflection-56@2x.png") 2x, url("images/reflection-56@2.25x.png") 2.25x);
|
|
background-repeat: no-repeat, no-repeat;
|
|
background-color: transparent;
|
|
background-position: center center;
|
|
background-size: 5.6rem;
|
|
}
|
|
|
|
a#frequency-op-seekdown:active {
|
|
background-image: image-set(url("images/seekdown.png") 1x, url("images/seekdown@1.5x.png") 1.5x, url("images/seekdown@2x.png") 2x, url("images/seekdown@2.25x.png") 2.25x);
|
|
}
|
|
|
|
a#frequency-op-seekup {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
margin: 1rem 0;
|
|
background-image: image-set(url("images/seekup.png") 1x, url("images/seekup@1.5x.png") 1.5x, url("images/seekup@2x.png") 2x, url("images/seekup@2.25x.png") 2.25x), image-set(url("images/reflection-56.png") 1x, url("images/reflection-56@1.5x.png") 1.5x, url("images/reflection-56@2x.png") 2x, url("images/reflection-56@2.25x.png") 2.25x);
|
|
background-repeat: no-repeat, no-repeat;
|
|
background-color: transparent;
|
|
background-position: center center;
|
|
background-size: 5.6rem;
|
|
}
|
|
|
|
a#frequency-op-seekup:active {
|
|
background-image: image-set(url("images/seekup.png") 1x, url("images/seekup@1.5x.png") 1.5x, url("images/seekup@2x.png") 2x, url("images/seekup@2.25x.png") 2.25x);
|
|
}
|
|
/**** end ****/
|
|
|
|
/*** styles for warning box ****/
|
|
.warning {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
color: #FFF;
|
|
background-color: #2d2d2d;
|
|
}
|
|
|
|
.warning .warning-header {
|
|
padding: 1rem 3rem 1rem 3rem;
|
|
font-weight: normal;
|
|
font-size: 1.9rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.warning .warning-body {
|
|
font-weight: 300;
|
|
font-size: 2.5rem;
|
|
padding: .5rem;
|
|
border-top: .1rem solid #686868;
|
|
margin: 0 2.5rem;
|
|
}
|
|
|
|
/* Press (default & recommend) */
|
|
.warning .menu button:active {
|
|
border-color: #008aaa;
|
|
color: #333;
|
|
}
|
|
/**** end ****/
|
|
|
|
/*** styles for antenna warning box ****/
|
|
#antenna-warning {
|
|
z-index: 2;
|
|
}
|
|
|
|
#antenna-warning:not([hidden]) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#antenna-warning > div:first-child {
|
|
height: 60%;
|
|
background: image-set(url("images/headset.png") 1x, url("images/headset@1.5x.png") 1.5x, url("images/headset@2x.png") 2x, url("images/headset@2.25x.png") 2.25x) no-repeat center center / 18.4rem;
|
|
}
|
|
|
|
#antenna-warning .warning-header {
|
|
margin-top: -2.5rem;
|
|
}
|
|
/******* end *******/
|
|
|
|
/*** styles for airplane mode warning box ****/
|
|
#airplane-mode-warning {
|
|
z-index: 3;
|
|
}
|
|
|
|
#airplane-mode-warning .warning-header {
|
|
margin-top: 50%;
|
|
}
|
|
/******* end *******/
|
|
|
|
/*** styles for RTL languages ****/
|
|
/* The scrollbar should be on the left.
|
|
* But direction is explicitly set to LTR on #container
|
|
So we force #fav-list to be RTL, while keeping the children LTR
|
|
*/
|
|
html[dir=rtl] #fav-list {
|
|
direction: rtl;
|
|
}
|
|
|
|
html[dir=rtl] #fav-list > * {
|
|
direction: ltr;
|
|
}
|
|
/******* end *******/
|