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
|
|
@ -0,0 +1,223 @@
|
|||
/* Since the UtilityTray overlays the entire screen, we must ensure that it
|
||||
doesn't get displayed until after it has loaded. This class is removed in
|
||||
utility_tray.js. */
|
||||
.utility-tray-loading {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.tray {
|
||||
--tray-invisible-gripper-height: 2rem;
|
||||
--scrollbar-width: 15px;
|
||||
--software-buttons-width-adjustment: 0px;
|
||||
--software-buttons-height-adjustment: 0px;
|
||||
|
||||
position: relative;
|
||||
width: calc(100% + var(--scrollbar-width));
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
pointer-events: none;
|
||||
will-change: scroll-position;
|
||||
}
|
||||
|
||||
/* When using a screen reader, disable the invisible gripper.
|
||||
The invisible gripper is useless with the screen reader and
|
||||
interferes with touching the statusbar. */
|
||||
#screen.screenreader .tray {
|
||||
--tray-invisible-gripper-height: 0px;
|
||||
}
|
||||
|
||||
/* NOTE: csslint treats variable-only rules as "empty" errors, per
|
||||
<https://github.com/CSSLint/csslint/issues/538>. */
|
||||
@media (orientation: portrait) {
|
||||
#screen.software-button-enabled .tray {
|
||||
--software-buttons-height-adjustment: var(--software-home-button-height);
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
#screen.software-button-enabled .tray {
|
||||
--software-buttons-width-adjustment: var(--software-home-button-height);
|
||||
}
|
||||
}
|
||||
|
||||
.tray-dead-area {
|
||||
height: calc(100% - var(--tray-invisible-gripper-height));
|
||||
}
|
||||
|
||||
.tray-content {
|
||||
height: calc(100% - var(--software-buttons-height-adjustment));
|
||||
width: calc(100% - var(--scrollbar-width) - var(--software-buttons-width-adjustment));
|
||||
pointer-events: all;
|
||||
background-color: hsla(0, 0%, 20%, .95);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tray-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#tray-invisible-gripper {
|
||||
height: var(--tray-invisible-gripper-height);
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.tray.open #tray-invisible-gripper {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Special visibility overrides */
|
||||
|
||||
#screen.lockscreen-camera > #utility-tray {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Statusbar */
|
||||
|
||||
#statusbar-tray {
|
||||
background-image: none;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 3rem;
|
||||
filter: none;
|
||||
}
|
||||
html[dir="ltr"] #statusbar-tray { background-position: right; }
|
||||
html[dir="rtl"] #statusbar-tray { background-position: left; }
|
||||
|
||||
#screen.utility-tray-in-transition #statusbar-tray,
|
||||
#screen:-moz-full-screen-ancestor #statusbar-tray,
|
||||
#screen.utility-tray-in-transition #utility-tray #statusbar-tray {
|
||||
background-image: -moz-element(#statusbar-icons);
|
||||
}
|
||||
|
||||
#statusbar-tray > .sb-start-upper {
|
||||
position: absolute;
|
||||
offset-inline-start: 0;
|
||||
line-height: var(--statusbar-height);
|
||||
}
|
||||
|
||||
/* Notifications indicator */
|
||||
|
||||
#ambient-indicator {
|
||||
height: .2rem;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
background-color: #00D3FF;
|
||||
transition: opacity .5s ease .5s;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
#screen:not(.locked) #ambient-indicator.unread {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#ambient-indicator.active {
|
||||
background: none #006e86 repeat;
|
||||
display: block;
|
||||
transition: none;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#ambient-indicator.active > .handle {
|
||||
border-top: 0.2rem #00d3ff solid;
|
||||
border-left: 0.2rem transparent solid;
|
||||
border-right: 0.2rem transparent solid;
|
||||
animation: handle 1s infinite;
|
||||
height: 0.2rem;
|
||||
width: 8.6rem;
|
||||
margin: 0 auto;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#ambient-indicator.active > .handle2 {
|
||||
animation-delay: 0.5ms;
|
||||
margin: -0.4rem auto;
|
||||
}
|
||||
|
||||
@keyframes handle {
|
||||
0% { transform: scaleX(1.0); opacity: 1;}
|
||||
100% { transform: scaleX(4.0); opacity: 0;}
|
||||
}
|
||||
|
||||
#utility-tray-notifications {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Utility Tray Footer (the buttons at the bottom of the tray) */
|
||||
|
||||
#utility-tray-footer {
|
||||
background: hsla(0, 0%, 100%, .05);
|
||||
}
|
||||
|
||||
@keyframes tray-footer-in {
|
||||
0% { transform: scaleY(0.9); opacity: 0; }
|
||||
15% { transform: scaleY(1.08); opacity: 1; }
|
||||
30% { transform: scaleY(0.94); }
|
||||
65% { transform: scaleY(1.03); }
|
||||
100% { transform: scaleY(1); }
|
||||
}
|
||||
|
||||
/* NOTE: We cannot modify transform() on the way out, because the user may be
|
||||
dragging from on top of the footer; changing the transform mid-scroll
|
||||
interrupts the scroll gesture. Fortunately, opacity is fine. */
|
||||
@keyframes tray-footer-out {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
#utility-tray-footer {
|
||||
transform-origin: bottom left;
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
#utility-tray-footer.animate-in {
|
||||
animation: tray-footer-in 200ms;
|
||||
animation-timing-function: ease-in-out;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#utility-tray-footer.animate-out {
|
||||
animation: tray-footer-out 50ms;
|
||||
animation-timing-function: ease-out;
|
||||
opacity: 0;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
/* The _visible_ grippy at the bottom of the utility tray. */
|
||||
|
||||
#utility-tray-grippy {
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
margin: 0;
|
||||
position: relative; /* float above */
|
||||
background: hsla(0, 0%, 20%, 1) image-set(url("images/grippy.png") 1x, url("images/grippy@1.5x.png") 1.5x, url("images/grippy@2x.png") 2x, url("images/grippy@2.25x.png") 2.25x) no-repeat center / 7.2rem;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
|
||||
#utility-tray .utility-tray-notifications [data-icon] {
|
||||
display: inline-block;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 1.5rem auto;
|
||||
}
|
||||
|
||||
#utility-tray .utility-tray-notifications [data-icon]:before {
|
||||
/* The icons should appear 24 x 24px but each glyph only takes 80% of the space
|
||||
So we compensate by adding 20%, that is 30px. */
|
||||
font-size: 3rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
Loading…
Reference in a new issue