b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
118 lines
2.3 KiB
CSS
Executable file
118 lines
2.3 KiB
CSS
Executable file
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 10px;
|
|
background-color: #f4f4f4;
|
|
overflow: hidden;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
section[role="region"] {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
article {
|
|
position: absolute;
|
|
top: 5rem;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
will-change: scroll-position;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
list-style: none;
|
|
}
|
|
|
|
li {
|
|
-moz-padding-start: 1.5rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
.desc {
|
|
/* This keeps our ringtone names from bumping up against the actions button
|
|
in the management UI. */
|
|
-moz-margin-end: 4.5rem;
|
|
}
|
|
|
|
.desc:active:before {
|
|
/* This makes a highlight slightly *bigger* than .desc so that it fills up the
|
|
whole list item (except for the "other actions" button). It causes a
|
|
reflow, but that's not a big deal here. */
|
|
position: absolute;
|
|
left: -2rem;
|
|
width: calc(100% - 1.6rem); /* 1.5rem for the left padding and 0.1rem for the
|
|
right border. */
|
|
height: 5.9rem; /* Subtract 0.1rem for the bottom border. */
|
|
background-color: rgba(0, 213, 255, 0.3);
|
|
z-index: -1;
|
|
content: '';
|
|
}
|
|
|
|
html[dir="rtl"] .desc:active:before {
|
|
left: initial;
|
|
right: -2rem;
|
|
}
|
|
|
|
li .play-icon {
|
|
display: none;
|
|
float: right;
|
|
width: 2.4rem;
|
|
height: 6rem;
|
|
background: url("images/now_playing.png") no-repeat center center / 2.4rem;
|
|
-moz-margin-start: 1.5rem;
|
|
/* We already have a 1rem right margin on the parent node, so we only need to
|
|
add 0.5rem here. */
|
|
-moz-margin-end: 0.5rem;
|
|
}
|
|
|
|
html[dir="rtl"] li .play-icon {
|
|
float: left;
|
|
}
|
|
|
|
li[data-playing="true"] .play-icon {
|
|
display: block;
|
|
}
|
|
|
|
[data-type="list"] aside.pack-end {
|
|
-moz-margin-end: -1.5rem;
|
|
-moz-padding-start: 0.1rem;
|
|
background: -moz-linear-gradient(#e9e9e9, #e9e9e9) no-repeat
|
|
left center / 0.1rem 4rem;
|
|
}
|
|
|
|
html[dir="rtl"] [data-type="list"] aside.pack-end {
|
|
background-position: right center;
|
|
}
|
|
|
|
.actions-button {
|
|
display: block;
|
|
width: 5rem;
|
|
height: 6rem;
|
|
background: url("images/actions_menu.png") no-repeat center center / 3rem;
|
|
}
|
|
|
|
.actions-button:active {
|
|
background-color: rgba(0, 213, 255, 0.3);
|
|
}
|
|
|
|
#dialog-message {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
section[role="status"] {
|
|
transition: opacity var(--transition-duration) ease 0s;
|
|
opacity: 0;
|
|
}
|
|
|
|
section[role="status"].toast-visible {
|
|
opacity: 1;
|
|
}
|