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
377
gaia/apps/email/style/folder_cards.css
Executable file
377
gaia/apps/email/style/folder_cards.css
Executable file
|
|
@ -0,0 +1,377 @@
|
|||
cards-folder-picker .fld-header-placeholder {
|
||||
height: 5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
cards-folder-picker.card .fld-header-placeholder .fld-header-back {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
html[dir="ltr"] cards-folder-picker.card .fld-header-placeholder .fld-header-back {
|
||||
left: 0;
|
||||
}
|
||||
html[dir="rtl"] cards-folder-picker.card .fld-header-placeholder .fld-header-back {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
cards-folder-picker .fld-acct-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
clear: both;
|
||||
padding: 0.6rem 0;
|
||||
padding-inline-start: 3rem;
|
||||
font-size: 1.7rem;
|
||||
line-height: 3.8rem;
|
||||
color: #5f5f5f;
|
||||
background: white;
|
||||
border-bottom: 0.1rem solid #dfdfdf;
|
||||
}
|
||||
|
||||
cards-folder-picker.one-account .fld-acct-header,
|
||||
cards-folder-picker.one-account .fld-accountlist-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
cards-folder-picker.one-account .fld-folders-container {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.fld-content-container {
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
width: 100%;
|
||||
/* Our goal is to leave the bottom toolbar visible, so 5rem for the header
|
||||
from the message_list, and 4.5rem so that the bottom toolbar from the
|
||||
message_list is viewable through the translucent shield div to help indicate
|
||||
the drawer is overlaid in front of the message list. */
|
||||
height: calc(100% - 9.5rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fld-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
transform: translateY(-100%);
|
||||
transition-property: transform;
|
||||
transition-duration: var(--transition-duration);
|
||||
transition-timing-function: ease;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
cards-folder-picker.opened .fld-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.fld-shield {
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
width: 100%;
|
||||
/* Height is -5rem so that it only covers the message_list area below the
|
||||
message_list's 5rem header, and this div's top is at 5rem. */
|
||||
height: calc(100% - 5rem);
|
||||
background-color: black;
|
||||
|
||||
opacity: 0;
|
||||
transition-property: opacity;
|
||||
transition-duration: var(--transition-duration);
|
||||
transition-timing-function: ease;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
cards-folder-picker.opened .fld-shield {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.fld-shield.transparent,
|
||||
.fld-shield.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
cards-folder-picker .fld-acct-scrollouter {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
/* Like with .fld-content-container, be short enough to show the bottom
|
||||
toolbar from the message_list. Since this is inside .fld-content-container,
|
||||
it only needs to account for the toolbar area, not the header, as this
|
||||
div is already below the header. */
|
||||
height: calc(100% - 4.5rem);
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
.fld-acct-scrollinner {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fld-acct-container {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
|
||||
.fld-acct-container.animated {
|
||||
transition-property: transform;
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: ease;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.fld-accountlist-container {
|
||||
background: #e7e7e7;
|
||||
}
|
||||
|
||||
/*.fld-accountlist-container.closed {
|
||||
display: none;
|
||||
}*/
|
||||
|
||||
.fld-folders-container {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
/*.fld-folders-container.closed {
|
||||
transform: translateY(0);
|
||||
}
|
||||
*/
|
||||
cards-folder-picker.one-account .fld-folders-container {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
cards-folder-picker.card {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fld-nav-toolbar.bottom-toolbar {
|
||||
text-align: center;
|
||||
background: white;
|
||||
color: black;
|
||||
bottom: 0;
|
||||
height: 4.5rem;
|
||||
line-height: 4.5rem;
|
||||
}
|
||||
|
||||
.fld-accounts-header-label {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.fld-account-item,
|
||||
.fld-folder-item,
|
||||
.fld-folder-list-header {
|
||||
position: relative;
|
||||
display: block;
|
||||
line-height: 3.5rem;
|
||||
padding: 0.6rem 2rem;
|
||||
border-bottom: 0.1rem solid #333b41;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #5f5f5f;
|
||||
}
|
||||
|
||||
.fld-folder-item {
|
||||
color: #5f5f5f;
|
||||
background-color: #eeeeee;
|
||||
border-bottom: 0.1rem solid #dfdfdf;
|
||||
}
|
||||
|
||||
.fld-account-item {
|
||||
padding-inline-start: 2rem;
|
||||
border-bottom: 0.1rem solid #dfdfdf;
|
||||
color: #5f5f5f;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.fld-account-name {
|
||||
direction: ltr;
|
||||
font-size: 1.7rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.fld-account-lastsync {
|
||||
color: #c7c7c7;
|
||||
font-size: 150%;
|
||||
font-weight: normal;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.fld-accounts-btn {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.fld-acct-header-account-header,
|
||||
.fld-acct-header-account-label {
|
||||
flex-grow: 2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/**
|
||||
* this element contains the mail address, which needs to be displayed with a
|
||||
* LTR direction */
|
||||
.fld-acct-header-account-label {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.fld-acct-header .fld-acct-header-account-label,
|
||||
.fld-acct-header.closed .fld-acct-header-account-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fld-acct-header.closed .fld-acct-header-account-label,
|
||||
.fld-acct-header .fld-acct-header-account-header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fld-account-switch-arrow {
|
||||
width: 3rem;
|
||||
height: 3.8rem;
|
||||
margin: 0 1rem;
|
||||
border: 0;
|
||||
color: #5F5F5F;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-color: transparent;
|
||||
background-size: 2rem auto;
|
||||
}
|
||||
|
||||
/* TODO these could be added to gaia-icons font */
|
||||
.fld-account-switch-arrow {
|
||||
background-image: url(images/icons/arrow_up.png);
|
||||
}
|
||||
|
||||
.fld-acct-header:active .fld-account-switch-arrow {
|
||||
background-image: url(images/icons/arrow_up_press.png);
|
||||
}
|
||||
|
||||
.fld-acct-header.closed .fld-account-switch-arrow {
|
||||
background-image: url(images/icons/arrow_down.png);
|
||||
}
|
||||
|
||||
.fld-acct-header.closed:active .fld-account-switch-arrow {
|
||||
background-image: url(images/icons/arrow_down_press.png);
|
||||
}
|
||||
|
||||
.fld-folder-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.fld-folder-item .selected-indicator,
|
||||
.fld-account-item .selected-indicator {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
display: none;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
border-radius: 0.8rem;
|
||||
background-color: #ff8019;
|
||||
}
|
||||
html[dir="ltr"] .fld-folder-item .selected-indicator,
|
||||
html[dir="ltr"] .fld-account-item .selected-indicator {
|
||||
left: 1.1rem;
|
||||
}
|
||||
html[dir="rtl"] .fld-folder-item .selected-indicator,
|
||||
html[dir="rtl"] .fld-account-item .selected-indicator {
|
||||
right: 1.1rem;
|
||||
}
|
||||
|
||||
.fld-folder-item.fld-folder-selected .selected-indicator,
|
||||
.fld-account-item.fld-account-selected .selected-indicator {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fld-folders-container .fld-folder-depth0 {
|
||||
padding-inline-start: 3rem;
|
||||
}
|
||||
.fld-folders-container .fld-folder-depth1 {
|
||||
padding-inline-start: 3rem;
|
||||
}
|
||||
.fld-folders-container .fld-folder-depth2 {
|
||||
padding-inline-start: 4.5rem;
|
||||
}
|
||||
.fld-folders-container .fld-folder-depth3 {
|
||||
padding-inline-start: 6rem;
|
||||
}
|
||||
.fld-folders-container .fld-folder-depth4 {
|
||||
padding-inline-start: 7.5rem;
|
||||
}
|
||||
.fld-folders-container .fld-folder-depth5 {
|
||||
padding-inline-start: 9rem;
|
||||
}
|
||||
.fld-folders-container .fld-folder-depthmax {
|
||||
padding-inline-start: 10.5rem;
|
||||
}
|
||||
|
||||
.fld-acct-header:active,
|
||||
.fld-account-item:active,
|
||||
.fld-folder-item:active,
|
||||
.fld-folder-list-header:active,
|
||||
.fld-settings-link:active,
|
||||
.fld-nav-toolbar:active,
|
||||
.fld-nav-toolbar:active .fld-settings-link {
|
||||
color: white;
|
||||
border-color: #00caf2;
|
||||
background: #00caf2;
|
||||
}
|
||||
.fld-folder-name {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
.fld-folder-unread {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
There are fld-folder-depth* styles in common.css because they are
|
||||
also used in value_selector.
|
||||
*/
|
||||
|
||||
.fld-folder-depthnonzero .fld-folder-name {
|
||||
background: url('images/icons/folder_icon.png') no-repeat;
|
||||
background-size: 1.6rem auto;
|
||||
}
|
||||
/**
|
||||
* Explicitly using right/left, since text is dir=auto, and want to add the
|
||||
* spacing based on overall UI direction choice, not specific text item
|
||||
* direction, so that the folder icons appear correctly. */
|
||||
html[dir="ltr"] .fld-folder-depthnonzero .fld-folder-name {
|
||||
padding-left: 2.2rem;
|
||||
background-position: left center;
|
||||
}
|
||||
html[dir="rtl"] .fld-folder-depthnonzero .fld-folder-name {
|
||||
padding-right: 2.2rem;
|
||||
background-position: right center;
|
||||
}
|
||||
|
||||
.fld-folder-depthnonzero .fld-folder-name:active,
|
||||
.fld-folder-depthnonzero:active .fld-folder-name {
|
||||
background-image: url('images/icons/folder_icon_press.png');
|
||||
}
|
||||
|
||||
.fld-settings-link {
|
||||
color: #858585;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.fld-settings-link:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4.5rem;
|
||||
background: url("images/icons/settings_icon.png") no-repeat 50% 50% / 3rem auto;
|
||||
}
|
||||
|
||||
.fld-settings-link:active:after {
|
||||
background-image: url("images/icons/settings_icon_press.png");
|
||||
}
|
||||
Loading…
Reference in a new issue