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
397
gaia/apps/email/style/common.css
Executable file
397
gaia/apps/email/style/common.css
Executable file
|
|
@ -0,0 +1,397 @@
|
|||
/* Common/framework styling */
|
||||
|
||||
.collapsed {
|
||||
display: none !important;
|
||||
}
|
||||
.hidden {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
* {
|
||||
/* By default do not allow any user text selection, only enable for certain
|
||||
parts on a per-element/region area */
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
/* Enforce default alignment for everything, even with dir="auto" and unicode-bidi: -moz-plaintext */
|
||||
html[dir="ltr"] { text-align: left; }
|
||||
html[dir="rtl"] { text-align: right; }
|
||||
|
||||
/* Allow inputs to be selectable, and to allow cut/copy operations. Copy/paste
|
||||
select all could reach across the whole DOM so only scope the selection to the
|
||||
center "active" card. Bug 1152172. */
|
||||
.center input[type="email"],
|
||||
.center input[type="password"],
|
||||
.center input[type="search"],
|
||||
.center input[type="text"],
|
||||
.center input[type="url"] {
|
||||
-moz-user-select: text;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Using white because of bug 1077605, but only want to do this once we have
|
||||
content, to avoid a flash of white for showing too long on initial load. */
|
||||
body.content-visible {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#cardContainer,
|
||||
#cards {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Set an explicit z-index of 0 so that #cardContainer gets its own stacking
|
||||
context. Without this, the z-index usage inside it by .card nodes could lead
|
||||
to a z-index that is quite high and may hide other elements like dialogs,
|
||||
that could be placed outside #cardContainer at a z-index value, but not with
|
||||
as high of value as the topmost card. Creating a stacking context for
|
||||
#cardContainer avoids that by keeping the stacking context for the .card
|
||||
elements as a child context of this one. */
|
||||
#cardContainer {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
transition-property: transform;
|
||||
transition-duration: var(--transition-duration);
|
||||
transition-timing-function: ease;
|
||||
transition-delay: 0s;
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Temp shim because building blocks target a section element for some styles,
|
||||
* where we now use a custom element instead. Ideally bb would use a class
|
||||
* target instead.
|
||||
*/
|
||||
.card > section.bbshim {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card.anim-fade {
|
||||
transition-property: opacity;
|
||||
transition-duration: .3s;
|
||||
transition-timing-function: ease;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.card.no-anim {
|
||||
transition-property: none;
|
||||
}
|
||||
|
||||
.card.center {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.card.center.anim-vertical {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.card.center.anim-fade {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .card.before { transform: translateX(-100%); }
|
||||
html[dir="rtl"] .card.before { transform: translateX(100%); }
|
||||
|
||||
.card.before.anim-vertical {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.card.before.anim-fade {
|
||||
transform: translateX(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.card.before.upflow.anim-vertical {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
html[dir="ltr"] .card.after { transform: translateX(100%); }
|
||||
html[dir="rtl"] .card.after { transform: translateX(-100%); }
|
||||
|
||||
.card.after.anim-vertical {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.card.after.upflow.anim-vertical {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.card.after.anim-fade {
|
||||
transform: translateX(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.header-label {
|
||||
color: white;
|
||||
line-height: 5.2rem;
|
||||
margin: 0;
|
||||
margin-inline-start: 4rem;
|
||||
font-size: 2.2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.header-btn, .header-start-btn, .header-end-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 5.2rem;
|
||||
width: 3.2rem;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
.header-start-btn {
|
||||
offset-inline-start: 0;
|
||||
background: url("images/ui/separator-large.png") no-repeat scroll transparent;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
html[dir="ltr"] .header-start-btn { background-position: left 3rem center; }
|
||||
html[dir="rtl"] .header-start-btn { background-position: right 3rem center; }
|
||||
|
||||
.header-end-btn {
|
||||
offset-inline-end: 0;
|
||||
background: url("images/ui/separator.png") no-repeat scroll transparent;
|
||||
width: 5rem;
|
||||
}
|
||||
html[dir="ltr"] .header-end-btn { background-position: left 0 center; }
|
||||
html[dir="rtl"] .header-end-btn { background-position: right 0 center; }
|
||||
|
||||
.scrollregion {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.scrollregion-below-header {
|
||||
overflow-x: hidden;
|
||||
height: calc(100% - 5rem);
|
||||
will-change: scroll-position;
|
||||
}
|
||||
|
||||
.scrollregion-below-header.scrollregion-horizontal-too {
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
|
||||
.bottom-toolbar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.bottom-btn {
|
||||
height: 4rem;
|
||||
border: none;
|
||||
width: 6rem;
|
||||
background: transparent no-repeat center / 3rem !important;
|
||||
margin: 0 calc((100% - 25rem) / 8);
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
.popup-mask {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 26rem;
|
||||
padding: 0.8rem;
|
||||
border: 0.1rem solid black;
|
||||
border-radius: 0.6rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 0.4rem;
|
||||
font-size: 160%;
|
||||
border-bottom: 0.1rem solid gray;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: #ffe3d6;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.icon-download {
|
||||
background: url("images/icons/download.png") no-repeat center / 3rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon-view {
|
||||
background: url("images/icons/view.png") no-repeat center / 3rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
/*Disabled a tag style extend*/
|
||||
section[role="region"] > header:first-child menu[type="toolbar"] a[aria-disabled="true"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Toaster */
|
||||
section[role="status"].toaster {
|
||||
bottom: 4.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
color: white;
|
||||
background: #5F5F5F;
|
||||
}
|
||||
section[role="status"].toaster p {
|
||||
margin: 1.5rem;
|
||||
flex: 1;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
section[role="status"].toaster-action-target {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
section[role="status"].toaster button {
|
||||
display: inline-block;
|
||||
margin: 1rem 1.5rem;
|
||||
width: 4rem;
|
||||
height: 3rem;
|
||||
font-size: 0;
|
||||
background-color: #00c9f1;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 2.4rem;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
section[role="status"].toaster button.undo {
|
||||
background-image: url("images/icons/undo.png");
|
||||
}
|
||||
|
||||
|
||||
section[role="status"].toaster button:disabled {
|
||||
display: none;
|
||||
}
|
||||
section[role="status"].fadeout {
|
||||
transition: opacity 500ms ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* General helpers for opacity transition */
|
||||
.anim-opacity {
|
||||
transition-property: opacity;
|
||||
transition-duration: var(--transition-duration);
|
||||
transition-timing-function: ease;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.transparent {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
These folder-depth* styles are here instead of folder_cards.css
|
||||
because they are also used by the value_selector for showing
|
||||
the list of folders.
|
||||
*/
|
||||
.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth0,
|
||||
.fld-folder-depth0 {
|
||||
padding-inline-start: 1.5rem;
|
||||
}
|
||||
.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth1,
|
||||
.fld-folder-depth1 {
|
||||
padding-inline-start: 3rem;
|
||||
}
|
||||
.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth2,
|
||||
.fld-folder-depth2 {
|
||||
padding-inline-start: 4.5rem;
|
||||
}
|
||||
.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth3,
|
||||
.fld-folder-depth3 {
|
||||
padding-inline-start: 6rem;
|
||||
}
|
||||
.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth4,
|
||||
|
||||
.fld-folder-depth4 {
|
||||
padding-inline-start: 7.5rem;
|
||||
}
|
||||
.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth5,
|
||||
.fld-folder-depth5 {
|
||||
padding-inline-start: 9rem;
|
||||
}
|
||||
.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth6,
|
||||
.fld-folder-depth6,
|
||||
.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depthmax,
|
||||
.fld-folder-depthmax {
|
||||
padding-inline-start: 10.5rem;
|
||||
}
|
||||
|
||||
.email-value-selector[role="dialog"][data-type="value-selector"] menu {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
/* Styles for errors that could appear at any time. */
|
||||
.error-card h2 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.error-card .scrollregion-below-header {
|
||||
margin: 1rem 2rem;
|
||||
}
|
||||
|
||||
.error-card .actions {
|
||||
margin-top: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-card .sup-bad-password-account {
|
||||
margin: 1.4rem 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
cards-setup-fix-gmail .sup-gmail-account {
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
Loading…
Reference in a new issue