b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
377 lines
8.2 KiB
CSS
Executable file
377 lines
8.2 KiB
CSS
Executable file
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");
|
|
}
|