b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
461 lines
11 KiB
CSS
Executable file
461 lines
11 KiB
CSS
Executable file
.appWindow:not(.bar) > .chrome {
|
|
pointer-events: none;
|
|
top: 0;
|
|
height: calc(4.4rem);
|
|
transform: scaleY(var(--rocketbar-scale)) translateY(0);
|
|
transform-origin: top left;
|
|
transition: transform 0.2s ease-in-out, background-color 0.5s ease;
|
|
|
|
background-color: black;
|
|
background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1));
|
|
color: white;
|
|
}
|
|
|
|
.appWindow.light > .chrome {
|
|
background-image: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05));
|
|
background-color: white;
|
|
color: #4d4d4d;
|
|
}
|
|
|
|
.appWindow:not(.bar) > .chrome.maximized {
|
|
transform: scaleY(1) translateY(0);
|
|
}
|
|
|
|
.appWindow.fullscreen-app:not(.bar) > .chrome:not(.maximized) {
|
|
height: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.appWindow:not(.bar).fullscreen-app > .chrome.maximized {
|
|
top: 0;
|
|
transform: scaleY(1) translateY(-7.6rem);
|
|
}
|
|
|
|
.controls {
|
|
pointer-events: auto;
|
|
background-color: transparent;
|
|
position: absolute;
|
|
bottom: 0.1rem;
|
|
width: 100%;
|
|
font-size: 0;
|
|
}
|
|
|
|
.chrome .controls .windows-button {
|
|
display: none;
|
|
}
|
|
|
|
[data-manifest-name="FTU"]:not(.bar) > .chrome .controls,
|
|
[data-manifest-name="FTU"]:not(.bar) > .chrome .progress,
|
|
.lockScreenWindow:not(.bar) > .chrome .controls,
|
|
.lockScreenWindow:not(.bar) > .chrome gaia-progress,
|
|
.homescreen:not(.bar) > .chrome .controls,
|
|
.homescreen:not(.bar) > .chrome gaia-progress {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.lockScreenWindow:not(.bar) > .chrome {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.homescreen:not(.bar) > .chrome {
|
|
background-image: none;
|
|
}
|
|
|
|
#screen.attention .lockScreenWindow:not(.bar) > .chrome {
|
|
background-color: black;
|
|
}
|
|
|
|
/* Special cases for Rocketbar in apps with browser chrome */
|
|
.appWindow:not(.browser) .chrome .controls .menu-button {
|
|
display: none;
|
|
}
|
|
|
|
.appWindow.fullscreen-app:not(.browser) .chrome .controls .urlbar,
|
|
.appWindow:not(.browser):not(.search-app) .chrome.maximized .controls .urlbar {
|
|
width: calc(100% - 1rem);
|
|
}
|
|
|
|
/* Special cases for rocketbar on the Top Sites view */
|
|
.search-app .menu-button,
|
|
.search-app .controls .reload-button,
|
|
.search-app .controls .stop-button
|
|
.chrome .controls .windows-button {
|
|
display: none;
|
|
}
|
|
|
|
.appWindow.search-app .chrome .controls .urlbar {
|
|
width: calc(100% - 4.5rem);
|
|
}
|
|
|
|
.search-app .chrome .controls .windows-button {
|
|
display: inline;
|
|
}
|
|
|
|
/* URL bar */
|
|
.chrome .controls .urlbar {
|
|
width: calc(100% - 4.5rem);
|
|
height: 3.4rem;
|
|
line-height: 3.4rem;
|
|
margin: 0 0 0.5rem;
|
|
border-radius: 1.8rem;
|
|
color: inherit;
|
|
overflow: hidden;
|
|
background-color: transparent;
|
|
float: left;
|
|
-moz-margin-start: 0.5rem;
|
|
}
|
|
|
|
.collapsible .chrome .controls button:not([disabled]) + button[disabled] + .urlbar,
|
|
.collapsible .chrome .controls button:not([disabled]) + .urlbar {
|
|
-moz-margin-start: 0;
|
|
}
|
|
|
|
.maximized .controls .urlbar {
|
|
background-color: rgba(204,204,204,0.2);
|
|
}
|
|
|
|
.appWindow.light .maximized .controls .urlbar {
|
|
background-color: rgba(204,204,204,0.4);
|
|
}
|
|
|
|
.chrome .controls .urlbar .title {
|
|
width: calc(100% - 3.2rem);
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
-moz-padding-start: 1.45rem;
|
|
-moz-padding-end: 0.8rem;
|
|
box-sizing: padding-box;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
font-weight: 300;
|
|
font-size: 1.8rem;
|
|
float: none;
|
|
background-color: rgba(204,204,204,0.2);
|
|
border-radius: 1.8rem;
|
|
text-overflow: ellipsis;
|
|
font-style: italic;
|
|
}
|
|
|
|
.search-app .chrome.maximized .controls .urlbar:after {
|
|
content: '';
|
|
width: 2rem;
|
|
height: 100%;
|
|
top: 0;
|
|
right: 0.8rem;
|
|
position: absolute;
|
|
background-image: url('images/search.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 2rem auto;
|
|
background-position: center right;
|
|
}
|
|
|
|
.appWindow.light .chrome:not(.maximized) .controls .urlbar .title {
|
|
background-color: rgba(204,204,204,0.4);
|
|
}
|
|
|
|
.maximized .controls .urlbar .title {
|
|
background-color: transparent;
|
|
}
|
|
|
|
|
|
.controls .forward-button:not([disabled]) + .urlbar {
|
|
width: calc(100% - 8rem);
|
|
}
|
|
|
|
.controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
|
|
width: calc(100% - 8rem);
|
|
}
|
|
|
|
.controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
|
|
width: calc(100% - 12rem);
|
|
}
|
|
|
|
.appWindow:not(.browser) .controls .forward-button:not([disabled]) + .urlbar {
|
|
width: calc(100% - 4.5rem);
|
|
}
|
|
|
|
.appWindow:not(.browser) .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
|
|
width: calc(100% - 4.5rem);
|
|
}
|
|
|
|
.appWindow:not(.browser) .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
|
|
width: calc(100% - 8.5rem);
|
|
}
|
|
|
|
.controls .urlbar {
|
|
transform: scaleX(var(--rocketbar-scale)) translateY(0.1rem);
|
|
transform-origin: top left;
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.appWindow.fullscreen-app .chrome:not(.maximized) .controls .urlbar {
|
|
transform: scale(var(--rocketbar-scale)) translateY(0.3rem);
|
|
transform-origin: bottom left;
|
|
}
|
|
|
|
.maximized .controls .urlbar {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.chrome.maximized .title[data-ssl="secure"] {
|
|
-moz-padding-start: 3rem;
|
|
background: url("images/light/ssl.png") no-repeat 0.1rem center / 3rem 3rem;
|
|
background-position: 5rem;
|
|
}
|
|
|
|
.chrome.maximized .title[data-ssl="broken"] {
|
|
-moz-padding-start: 3rem;
|
|
background: url("images/light/ssl_broken.png") no-repeat 0.1rem center / 3rem 3rem;
|
|
}
|
|
|
|
.collapsible .chrome:not(.maximized) .back-button:not([disabled]) + .forward-button[disabled] + .urlbar,
|
|
.collapsible .chrome:not(.maximized) .forward-button:not([disabled]) + .urlbar {
|
|
transform: scaleX(var(--rocketbar-scale)) translateX(-5.5rem);
|
|
}
|
|
|
|
.collapsible .chrome:not(.maximized) .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
|
|
transform: scaleX(var(--rocketbar-scale)) translateX(-12rem);
|
|
}
|
|
|
|
|
|
/* Buttons */
|
|
.controls button {
|
|
-moz-appearance: none;
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
min-width: 4rem;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
line-height: 4rem;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-color: transparent;
|
|
background-size: contain;
|
|
opacity: 1;
|
|
float: left;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.controls .reload-button,
|
|
.controls .stop-button {
|
|
background-size: 3rem auto;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
bottom: 0.3rem;
|
|
right: 0;
|
|
padding: 0 0.3rem;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
|
|
.controls .reload-button::before,
|
|
.controls .stop-button::before {
|
|
content: '';
|
|
position: relative;
|
|
right: 0.2rem;
|
|
display: block;
|
|
height: 2.4rem;
|
|
border-left: 1px solid rgba(0,0,0,0.05);
|
|
}
|
|
|
|
/* Vertically align butons outside of urlbar. */
|
|
.controls > button {
|
|
position: relative;
|
|
top: -0.2rem;
|
|
}
|
|
|
|
.loading .controls .reload-button {
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.controls .stop-button {
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.loading .controls .stop-button {
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.controls .back-button[disabled],
|
|
.controls .forward-button[disabled] {
|
|
display: none;
|
|
}
|
|
|
|
.chrome.maximized .controls .menu-button[disabled] {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.appWindow:not(.bar) > .chrome button {
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease-in;
|
|
}
|
|
|
|
.appWindow:not(.bar) > .chrome.maximized button {
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
/* Default (dark) theme button styles */
|
|
.controls .back-button {
|
|
background-image: url("images/dark/back.png");
|
|
}
|
|
|
|
.controls .back-button:active {
|
|
background-image: url("images/dark/back_active.png");
|
|
}
|
|
|
|
.controls .forward-button {
|
|
background-image: url("images/dark/forward.png");
|
|
}
|
|
|
|
.controls .forward-button:active {
|
|
background-image: url("images/dark/forward_active.png");
|
|
}
|
|
|
|
.controls .menu-button {
|
|
background-image: url("images/dark/options.png");
|
|
}
|
|
|
|
.controls .menu-button:active {
|
|
background-image: url("images/dark/options_active.png");
|
|
}
|
|
|
|
.controls .reload-button {
|
|
background-image: url("images/dark/reload.png");
|
|
}
|
|
|
|
.controls .reload-button:active {
|
|
background-image: url("images/dark/reload_active.png");
|
|
}
|
|
|
|
.controls .stop-button {
|
|
background-image: url("images/dark/stop.png");
|
|
}
|
|
|
|
.controls .stop-button:active {
|
|
background-image: url("images/dark/stop_active.png");
|
|
}
|
|
|
|
.controls .windows-button {
|
|
background-image: url('images/dark/windows.png');
|
|
}
|
|
|
|
.controls .windows-button:active {
|
|
background-image: url('images/dark/windows_active.png');
|
|
}
|
|
|
|
/* Light theme button styles */
|
|
.light .controls .menu-button:active {
|
|
background-image: url("images/light/overflow_active.png");
|
|
}
|
|
|
|
.light .controls .back-button {
|
|
background-image: url("images/light/back.png");
|
|
}
|
|
|
|
.light .controls .back-button:active {
|
|
background-image: url("images/light/back_active.png");
|
|
}
|
|
|
|
.light .controls .forward-button {
|
|
background-image: url("images/light/forward.png");
|
|
}
|
|
|
|
.light .controls .forward-button:active {
|
|
background-image: url("images/light/forward_active.png");
|
|
}
|
|
|
|
.light .controls .menu-button {
|
|
background-image: url("images/light/options.png");
|
|
}
|
|
|
|
.light .controls .menu-button:active {
|
|
background-image: url("images/light/options_active.png");
|
|
}
|
|
|
|
.light .controls .reload-button {
|
|
background-image: url("images/light/reload.png");
|
|
}
|
|
|
|
.light .controls .reload-button:active {
|
|
background-image: url("images/light/reload_active.png");
|
|
}
|
|
|
|
.light .controls .stop-button {
|
|
background-image: url("images/light/stop.png");
|
|
}
|
|
|
|
.light .controls .stop-button:active {
|
|
background-image: url("images/light/stop_active.png");
|
|
}
|
|
|
|
.light .controls .windows-button {
|
|
background-image: url('images/light/windows.png');
|
|
}
|
|
|
|
.light .controls .windows-button:active {
|
|
background-image: url('images/light/windows_active.png');
|
|
}
|
|
|
|
.light .controls .menu-button:active {
|
|
background-image: url("images/light/overflow_active.png");
|
|
}
|
|
|
|
/* Overflow menu */
|
|
|
|
gaia-overflow-menu button#new-window {
|
|
background-image: url("images/menu_new_window.png");
|
|
}
|
|
|
|
gaia-overflow-menu button#add-to-home {
|
|
background-image: url("images/menu_add_to_homescreen.png");
|
|
}
|
|
|
|
gaia-overflow-menu button#share {
|
|
background-image: url("images/menu_share.png");
|
|
}
|
|
|
|
/* Progress */
|
|
.appWindow:not(.bar).collapsible > .chrome gaia-progress {
|
|
top: 7.3rem;
|
|
}
|
|
|
|
/* App specifics */
|
|
.appWindow:not(.collapsible) > .chrome:not(.maximized) .controls button {
|
|
display: none;
|
|
}
|
|
|
|
.appWindow:not(.collapsible) > .chrome:not(.maximized) .controls .forward-button:not([disabled]) + .urlbar,
|
|
.appWindow:not(.collapsible) > .chrome:not(.maximized) .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar,
|
|
.appWindow:not(.collapsible) > .chrome:not(.maximized) .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar,
|
|
.appWindow:not(.collapsible) > .chrome:not(.maximized) .controls .urlbar {
|
|
width: calc(100% - 8rem);
|
|
}
|
|
|
|
.appWindow:not(.collapsible) > .chrome .controls .urlbar .title {
|
|
width: calc(100%);
|
|
}
|
|
|
|
/* RTL View */
|
|
html[dir="rtl"] .appWindow:not(.bar) > .chrome {
|
|
transform-origin: top right;
|
|
}
|
|
|
|
html[dir="rtl"] .chrome .controls .urlbar {
|
|
float: right;
|
|
}
|
|
|
|
html[dir="rtl"] .search-app .chrome.maximized .controls .urlbar:after {
|
|
left: 0.8rem;
|
|
right: unset;
|
|
background-position: center left;
|
|
}
|
|
|
|
html[dir="rtl"] .controls .urlbar {
|
|
transform-origin: top right;
|
|
}
|