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
269
gaia/apps/calendar/style/settings.css
Executable file
269
gaia/apps/calendar/style/settings.css
Executable file
|
|
@ -0,0 +1,269 @@
|
|||
body[data-path^='/event'] #time-views,
|
||||
body[data-path^='/month'] #time-views,
|
||||
body[data-path^='/day'] #time-views,
|
||||
body[data-path^='/week'] #time-views {
|
||||
z-index: 200;
|
||||
transform: translateX(0%);
|
||||
transition: transform var(--transition-duration) ease-in-out;
|
||||
}
|
||||
|
||||
body[data-path^='/settings'] #settings {
|
||||
z-index: 300;
|
||||
}
|
||||
|
||||
/*
|
||||
Do not show pending candy stripe on settings drawer, since the
|
||||
sync icon already spins and having both animations hurts the
|
||||
animation performance.
|
||||
*/
|
||||
body[data-path^='/settings'].pending-operation #progress-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#settings {
|
||||
font-size: 1.7rem;
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#settings gaia-header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
The text in the back button is just for accessibility concerns,
|
||||
not actually shown since the top header should be transparent.
|
||||
*/
|
||||
#settings .settings-back {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
#settings .settings-shield {
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
|
||||
opacity: 0;
|
||||
transition-property: opacity;
|
||||
transition-duration: var(--transition-duration);
|
||||
transition-timing-function: ease;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.settings-drawer-visible #settings .settings-shield {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
#settings .settings-drawer-container {
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
width: 100%;
|
||||
min-height: calc(100% - 19rem);
|
||||
max-height: calc(100% - 9.5rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#settings .settings-drawer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
color: #5f5f5f;
|
||||
background-color: #f4f4f4;
|
||||
|
||||
transform: translateY(-100%);
|
||||
transition-property: transform;
|
||||
transition-duration: var(--transition-duration);
|
||||
transition-timing-function: ease;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.settings-drawer-visible #settings .settings-drawer {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
#settings .calendars li:active,
|
||||
#settings li:active {
|
||||
color: white;
|
||||
background-color: #00caf2;
|
||||
}
|
||||
|
||||
#settings ol.calendars {
|
||||
height: calc(100% - 4.5rem);
|
||||
overflow-y: scroll;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
#settings .calendars label.name {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: calc(100% - 2rem);
|
||||
height: 100%;
|
||||
/* !important needed to override component scoped style to match legacy styles */
|
||||
font-size: 1.7rem !important;
|
||||
/* TODO: Migrate to gaia-theme */
|
||||
color: #606060;
|
||||
}
|
||||
|
||||
#settings .calendars .error label {
|
||||
background: transparent url('icons/accountwarning.png') no-repeat;
|
||||
background-size: 2rem auto;
|
||||
}
|
||||
html[dir="ltr"] #settings .calendars .error label {
|
||||
background-position: left 2.3rem center;
|
||||
padding-left: 4.5rem;
|
||||
}
|
||||
html[dir="rtl"] #settings .calendars .error label {
|
||||
background-position: right 2.3rem center;
|
||||
padding-right: 4.5rem;
|
||||
}
|
||||
|
||||
#settings .calendars label {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 3rem;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
#settings .calendars li {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
line-height: 5rem;
|
||||
border-bottom: 0.1rem solid #dfdfdf;
|
||||
}
|
||||
|
||||
#settings .calendars .icon-calendar-dot:before {
|
||||
font-size: 5rem;
|
||||
line-height: 5rem;
|
||||
margin-inline-start: -1rem;
|
||||
}
|
||||
|
||||
#settings > menu {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 4rem;
|
||||
padding: 0.5rem 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#settings [role="tablist"] {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#settings [role="tablist"] li {
|
||||
border-inline-start: 0.1rem solid #e5e5e5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#settings [role="tablist"] li:first-child {
|
||||
border-inline-start: 0;
|
||||
}
|
||||
|
||||
#settings [role="tablist"].noaccount .settings {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#settings [role="tablist"] .settings:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4.5rem;
|
||||
background: url("icons/settings_icon.png") no-repeat 50% 50% / 3rem auto;
|
||||
}
|
||||
|
||||
#settings [role="tablist"] .settings:active:after {
|
||||
background-image: url("icons/settings_icon_press.png");
|
||||
}
|
||||
|
||||
#settings [role="tablist"] .sync:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4.5rem;
|
||||
}
|
||||
|
||||
#settings [role="tablist"] .sync .icon {
|
||||
display: block;
|
||||
width: 3rem;
|
||||
height: 4.5rem;
|
||||
margin: 0 auto;
|
||||
background: url("icons/refresh.png") no-repeat 50% 50% / 3rem auto;
|
||||
}
|
||||
|
||||
#settings [role="tablist"] .sync:active .icon {
|
||||
background-image: url("icons/refresh_press.png");
|
||||
}
|
||||
|
||||
.pending-operation #settings [role="tablist"] .sync .icon {
|
||||
animation: 0.9s msg-refresh-rotate infinite steps(30);
|
||||
}
|
||||
|
||||
@keyframes msg-refresh-rotate {
|
||||
from { transform: rotate(1deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.sync-progress {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.sync-progress.syncing {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#settings [role="tablist"].noaccount .sync {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#settings .calendars > li label {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
#settings .calendars gaia-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#settings .calendars gaia-checkbox label,
|
||||
#settings .calendars gaia-checkbox[checked] label:after {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
#settings .calendars gaia-checkbox[checked] label:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 2.2rem;
|
||||
height: 1.9rem;
|
||||
background: transparent url('/style/icons/check_mark_on.png') no-repeat center 1.2rem / 1.4rem;
|
||||
}
|
||||
|
||||
#settings .calendars li:active gaia-checkbox[checked] label:after {
|
||||
background: transparent url('/style/icons/check_mark_press.png') no-repeat center 1.2rem / 1.4rem;
|
||||
}
|
||||
|
||||
#settings .calendars gaia-checkbox label:after {
|
||||
top: 0.7rem;
|
||||
background: none;
|
||||
margin: 0;
|
||||
}
|
||||
html[dir="ltr"] #settings .calendars gaia-checkbox label:after {
|
||||
left: auto;
|
||||
right: 1.3rem;
|
||||
}
|
||||
html[dir="rtl"] #settings .calendars gaia-checkbox label:after {
|
||||
left: 1.3rem;
|
||||
right: auto;
|
||||
}
|
||||
Loading…
Reference in a new issue