Publish Vulpes Preview 15 sources for desktop, Android and Tundra
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
This commit is contained in:
OverSu
parent
93e3a48004
commit
b38dea0597
25901 changed files with 9982925 additions and 369 deletions
522
assets/webapps/fm.gaiamobile.org/style/fm.css
Normal file
522
assets/webapps/fm.gaiamobile.org/style/fm.css
Normal file
|
|
@ -0,0 +1,522 @@
|
|||
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: url("images/toggle-fav-star-off.png") no-repeat center center / 4rem;
|
||||
}
|
||||
|
||||
#bookmark-button:focus {
|
||||
border-color: #888;
|
||||
}
|
||||
|
||||
#bookmark-button:active,
|
||||
#bookmark-button[data-bookmarked="true"]:active {
|
||||
background: #00ABCD url("images/toggle-fav-star-pressed.png") no-repeat center center / 4rem;
|
||||
}
|
||||
|
||||
#bookmark-button[data-bookmarked="true"] {
|
||||
background: url("images/toggle-fav-star-on.png") no-repeat center center / 4rem;
|
||||
}
|
||||
|
||||
#speaker-switch {
|
||||
top: 0;
|
||||
left: 2rem;
|
||||
background: url("images/speaker-off.png") no-repeat center center / 4rem;
|
||||
}
|
||||
|
||||
#speaker-switch:focus {
|
||||
border-color: #888;
|
||||
}
|
||||
|
||||
#speaker-switch:active,
|
||||
#speaker-switch[data-speaker-on="true"]:active {
|
||||
background: #00ABCD url("images/speaker-pressed.png") no-repeat center center / 4rem;
|
||||
}
|
||||
|
||||
#speaker-switch[data-speaker-on="true"] {
|
||||
background: url("images/speaker-on.png") 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: url(images/selector.png) 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: url(images/dial-notches.png) 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: url("images/fav-star.png") no-repeat center center / 1.4rem;
|
||||
}
|
||||
|
||||
div#fav-list-container div.selected div.fav-list-remove-button {
|
||||
background: url("images/fav-star-selected.png") 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: url(images/play.png), url(images/reflection-72.png);
|
||||
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: url(images/play.png);
|
||||
}
|
||||
|
||||
#power-switch[data-enabled="true"] {
|
||||
background-image: url(images/stop.png), url(images/reflection-72.png);
|
||||
}
|
||||
|
||||
#power-switch[data-enabled="true"]:active {
|
||||
background-image: url(images/stop.png);
|
||||
}
|
||||
|
||||
#power-switch span {
|
||||
background-image: url(images/spinner-FMRadio.png);
|
||||
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: url(images/seekdown.png), url(images/reflection-56.png);
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
background-color: transparent;
|
||||
background-position: center center;
|
||||
background-size: 5.6rem;
|
||||
}
|
||||
|
||||
a#frequency-op-seekdown:active {
|
||||
background-image: url(images/seekdown.png);
|
||||
}
|
||||
|
||||
a#frequency-op-seekup {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin: 1rem 0;
|
||||
background-image: url(images/seekup.png), url(images/reflection-56.png);
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
background-color: transparent;
|
||||
background-position: center center;
|
||||
background-size: 5.6rem;
|
||||
}
|
||||
|
||||
a#frequency-op-seekup:active {
|
||||
background-image: url(images/seekup.png);
|
||||
}
|
||||
/**** 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: url(images/headset.png) 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 *******/
|
||||
Loading…
Reference in a new issue