MaysWind
902 lines
22 KiB
SCSS
902 lines
22 KiB
SCSS
/** Global style **/
|
|
html, body {
|
|
position: fixed;
|
|
}
|
|
|
|
body {
|
|
-ms-user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
/** Common class **/
|
|
.margin-inline-start {
|
|
margin-inline-start: var(--f7-typography-margin) !important;
|
|
}
|
|
|
|
.margin-inline-start-half {
|
|
margin-inline-start: calc(var(--f7-typography-margin) / 2) !important;
|
|
}
|
|
|
|
.margin-inline-end {
|
|
margin-inline-end: var(--f7-typography-margin) !important;
|
|
}
|
|
|
|
.margin-inline-end-half {
|
|
margin-inline-end: calc(var(--f7-typography-margin) / 2) !important;
|
|
}
|
|
|
|
.padding-inline-start {
|
|
padding-inline-start: var(--f7-typography-padding) !important;
|
|
}
|
|
|
|
.padding-inline-start-half {
|
|
padding-inline-start: calc(var(--f7-typography-padding) / 2) !important;
|
|
}
|
|
|
|
.padding-inline-end {
|
|
padding-inline-end: var(--f7-typography-padding) !important;
|
|
}
|
|
|
|
.padding-inline-end-half {
|
|
padding-inline-end: calc(var(--f7-typography-padding) / 2) !important;
|
|
}
|
|
|
|
.no-right-border {
|
|
border-right: 0;
|
|
}
|
|
|
|
.no-bottom-border {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.work-break-all {
|
|
word-break: break-all;
|
|
}
|
|
|
|
.full-line {
|
|
width: 100%;
|
|
}
|
|
|
|
.smaller {
|
|
font-size: var(--ebk-smaller-font-size);
|
|
}
|
|
|
|
.readonly {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.skeleton-text {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.segmented.readonly .button:not(.button-active) > span,
|
|
.list.readonly .item-content .item-title.item-label,
|
|
.list.readonly .item-content .item-title > .item-header {
|
|
opacity: 0.55 !important;
|
|
}
|
|
|
|
/** Replacing the default style of framework7 **/
|
|
:root {
|
|
--f7-toolbar-inner-padding-left: 8px;
|
|
--f7-toolbar-inner-padding-right: 8px;
|
|
--f7-popup-push-offset: 5px;
|
|
--f7-color-gray: #8e8e93;
|
|
--f7-color-gray-rgb: 142, 142, 147;
|
|
--f7-color-gray-shade: #79797f;
|
|
--f7-color-gray-tint: #a3a3a7;
|
|
--f7-notification-title-text-transform: unset;
|
|
}
|
|
|
|
.color-gray {
|
|
--f7-theme-color: var(--f7-color-gray);
|
|
--f7-theme-color-rgb: var(--f7-color-gray-rgb);
|
|
--f7-theme-color-shade: var(--f7-color-gray-shade);
|
|
--f7-theme-color-tint: var(--f7-color-gray-tint);
|
|
}
|
|
|
|
.ios .dark, .ios.dark {
|
|
--f7-list-item-header-text-color: inherit !important;
|
|
}
|
|
|
|
i.icon.la, i.icon.las, i.icon.lab {
|
|
font-size: var(--ebk-icon-font-size);
|
|
}
|
|
|
|
.f7-icons, .framework7-icons {
|
|
font-size: var(--ebk-icon-font-size);
|
|
}
|
|
|
|
.ios .searchbar-icon:after {
|
|
font-size: var(--ebk-searchbar-icon-font-size);
|
|
}
|
|
|
|
.ios .searchbar-disable-button {
|
|
font-size: var(--ebk-searchbar-disable-button-font-size);
|
|
}
|
|
|
|
.ios .toolbar .link {
|
|
padding: 0 6px;
|
|
}
|
|
|
|
.chip.chip-placeholder {
|
|
border: 0;
|
|
}
|
|
|
|
.ios .popover-inner {
|
|
> :not(.list) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.actions-button.disabled {
|
|
--f7-actions-bg-color: rgba(208, 208, 208, 0.95);
|
|
opacity: inherit !important;
|
|
}
|
|
|
|
.actions-button.disabled .actions-button-text {
|
|
opacity: 0.55 !important;
|
|
}
|
|
|
|
.item-input.item-input-outline {
|
|
> .item-inner {
|
|
min-height: calc(var(--f7-input-height) + 6px);
|
|
}
|
|
}
|
|
|
|
/** custom class **/
|
|
:root {
|
|
--default-icon-color: #000;
|
|
--ebk-primary-color: 198, 126, 72;
|
|
--ebk-transaction-tag-chip-bg-color: rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
:root.dark {
|
|
--default-icon-color: #fff;
|
|
--ebk-transaction-tag-chip-bg-color: rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
.pin-codes-input {
|
|
--ebk-pin-code-border-color: var(--f7-input-outline-border-color);
|
|
--ebk-pin-code-focued-color: var(--f7-input-outline-invalid-border-color, var(--f7-theme-color));
|
|
--ebk-pin-code-border-radius: var(--f7-input-outline-border-radius);
|
|
--ebk-pin-code-input-height: 46px;
|
|
}
|
|
|
|
.page-title-bar-icon {
|
|
font-size: var(--ebk-page-title-bar-icon-font-size);
|
|
}
|
|
|
|
.ebk-small-amount {
|
|
--f7-list-item-title-font-size: var(--ebk-amount-small-font-size) !important;
|
|
}
|
|
|
|
.ebk-normal-amount {
|
|
--f7-list-item-title-font-size: var(--ebk-amount-normal-font-size) !important;
|
|
}
|
|
|
|
.ebk-large-amount {
|
|
--f7-list-item-title-font-size: var(--ebk-amount-large-font-size) !important;
|
|
}
|
|
|
|
.ebk-list-item-error-info div.item-footer {
|
|
color: var(--f7-input-error-text-color)
|
|
}
|
|
|
|
.ebk-sheet-title {
|
|
font-size: var(--ebk-sheet-title-font-size);
|
|
}
|
|
|
|
.ebk-hide-icon {
|
|
font-size: var(--ebk-hide-icon-font-size);
|
|
}
|
|
|
|
.separate-icon {
|
|
font-size: var(--ebk-separate-icon-font-size);
|
|
}
|
|
|
|
.transaction-tag-icon {
|
|
font-size: var(--ebk-transaction-tag-icon-font-size);
|
|
align-self: center;
|
|
}
|
|
|
|
.login-page-logo {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.login-page-tile {
|
|
font-size: var(--ebk-login-page-title-font-size);
|
|
}
|
|
|
|
.lang-popover-menu .popover-inner {
|
|
max-height: 350px;
|
|
|
|
> .list {
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
.lang-popover-menu .popover-inner .item-title {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
overflow: inherit;
|
|
text-overflow: inherit;
|
|
}
|
|
|
|
.lang-popover-menu .popover-inner .item-after {
|
|
display: block;
|
|
flex-shrink: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.settings-list .item-truncate-after-text .item-inner {
|
|
> .item-actual-title {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
max-width: 80%;
|
|
|
|
> span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
> .item-after {
|
|
display: block;
|
|
flex-shrink: 1;
|
|
min-width: 0;
|
|
max-width: 70%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.login-page-fixed-bottom {
|
|
height: calc(80px + var(--f7-safe-area-bottom));
|
|
background-color: inherit !important;
|
|
|
|
&::before {
|
|
display: none !important;
|
|
}
|
|
|
|
&::after {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.login-page-fixed-bottom > .toolbar-inner {
|
|
display: inline !important;
|
|
text-align: center;
|
|
font-size: var(--f7-font-size);
|
|
}
|
|
|
|
.login-page-powered-by > span {
|
|
color: var(--f7-block-footer-text-color);
|
|
}
|
|
|
|
.login-page-powered-by > a.link {
|
|
display: inline !important;
|
|
color: var(--f7-theme-color);
|
|
font-size: var(--f7-block-footer-font-size);
|
|
padding: 0 6px;
|
|
}
|
|
|
|
@media (max-height: 629px) {
|
|
.login-screen-content {
|
|
--f7-toolbar-height: 0;
|
|
}
|
|
|
|
.login-page-fixed-bottom {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (min-height: 630px) {
|
|
.login-page-bottom {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
html[dir="rtl"] i.icon.icon-with-direction {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.datetime-picker-alternate-date {
|
|
font-size: var(--ebk-datetime-picker-alternate-date-font-size);
|
|
}
|
|
|
|
/** Replacing the default style of @vuepic/vue-datepicker **/
|
|
.dp__theme_light {
|
|
--dp-primary-color: #c67e48;
|
|
--dp-background-color: inherit;
|
|
--dp-border-color: #aaa;
|
|
--dp-menu-border-color: #aaa;
|
|
|
|
.dp__overlay {
|
|
--dp-background-color: #e1e1e2;
|
|
}
|
|
}
|
|
|
|
.dp__theme_dark {
|
|
--dp-primary-color: #c67e48;
|
|
--dp-background-color: inherit;
|
|
--dp-border-color: #555;
|
|
--dp-menu-border-color: #555;
|
|
|
|
.dp__overlay {
|
|
--dp-background-color: #1f1f1f;
|
|
}
|
|
}
|
|
|
|
/** Common class for replacing the default style of framework7 **/
|
|
.navbar .navbar-compact-icons.right a + a {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
.navbar > .navbar-inner > .navbar-hidden-icon.right {
|
|
box-shadow: inherit;
|
|
background-color: inherit;
|
|
}
|
|
|
|
.toolbar.toolbar-bottom .toolbar-inner {
|
|
padding-bottom: 0 !important;
|
|
gap: 2px;
|
|
|
|
> .link {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.toolbar-item-auto-size .toolbar-inner {
|
|
padding-inline-start: 16px;
|
|
padding-inline-end: 16px;
|
|
justify-content: space-between;
|
|
gap: 4px;
|
|
}
|
|
|
|
.toolbar-item-auto-size .toolbar-inner > .link {
|
|
width: auto;
|
|
min-width: 28px !important;
|
|
}
|
|
|
|
.tabbar-primary-link,
|
|
.tabbar-item-changed {
|
|
color: var(--f7-theme-color);
|
|
}
|
|
|
|
.tabbar-text-with-ellipsis > span {
|
|
display: block;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
word-break: break-all;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.block-title .accordion-item-toggle .icon {
|
|
color: var(--f7-list-chevron-icon-color);
|
|
font-size: var(--f7-list-chevron-icon-font-size);
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.list-item-media-valign-middle .item-media {
|
|
align-self: normal !important;
|
|
}
|
|
|
|
.list-item-no-item-after .item-after {
|
|
display: none;
|
|
}
|
|
|
|
.list-item-with-header-and-title .item-content .item-header {
|
|
margin-bottom: 11px;
|
|
}
|
|
|
|
.list-item-with-header-and-title.list-item-title-hide-overflow .item-content .list-item-custom-title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.list .editing-list-item .item-content .item-inner {
|
|
padding-top: 5px;
|
|
padding-bottom: 7px;
|
|
}
|
|
|
|
.list .item-content .input.list-title-input {
|
|
> input.input-with-value {
|
|
font-size: var(--f7-list-item-title-font-size);
|
|
}
|
|
}
|
|
|
|
.list .item-content .list-item-valign-middle {
|
|
align-self: center;
|
|
}
|
|
|
|
.list .item-content .list-item-showing {
|
|
color: rgba(0, 0, 0, 0.2);
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.dark .list .item-content .list-item-showing {
|
|
color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.accordion-item.list-item-checked > .item-link > .item-content .item-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.list > ul > li.item-in-multiple-selection > .item-content > .item-inner > .item-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.list.list-dividers li.has-child-list-item .item-inner:after {
|
|
content: '';
|
|
position: absolute;
|
|
background-color: var(--f7-list-item-border-color);
|
|
display: block !important;
|
|
z-index: 15;
|
|
top: auto;
|
|
right: auto;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 1px;
|
|
width: 100%;
|
|
transform-origin: 50% 100%;
|
|
transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
|
|
}
|
|
|
|
.list.list-dividers li.list-group-title:first-child,
|
|
.list.list-dividers li.list-group-title.actual-first-child {
|
|
border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
|
|
}
|
|
|
|
.list.list-dividers li.list-group-title:first-child:before,
|
|
.list.list-dividers li.list-group-title.actual-first-child:before {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.list.list-dividers li:last-child > .swipeout-content > .item-content > .item-inner:after,
|
|
.list.list-dividers li:last-child > .swipeout-content > .item-link > .item-content > .item-inner:after,
|
|
.list.list-dividers li.actual-last-child > .swipeout-content > .item-content > .item-inner:after,
|
|
.list.list-dividers li.actual-last-child > .swipeout-content > .item-link > .item-content > .item-inner:after {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.list.inset li.list-group-title:first-child > a.button {
|
|
border-radius: var(--f7-button-border-radius);
|
|
}
|
|
|
|
.list.inset li.swipeout.actual-first-child,
|
|
.list.inset li.actual-first-child > a {
|
|
border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
|
|
}
|
|
|
|
.list.inset li.swipeout.actual-last-child,
|
|
.list.inset li.actual-last-child > a {
|
|
border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
|
|
}
|
|
|
|
.list.inset li.swipeout.actual-first-child.actual-last-child,
|
|
.list.inset li.actual-first-child.actual-last-child > a {
|
|
border-radius: var(--f7-list-inset-border-radius);
|
|
}
|
|
|
|
.list.inset.list-has-group-title li.swipeout.actual-first-child,
|
|
.list.inset.list-has-group-title li.actual-first-child > a {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.list.inset.list-has-group-title li.swipeout:first-child:last-child,
|
|
.list.inset.list-has-group-title li:first-child:last-child > a,
|
|
.list.inset.list-has-group-title li.swipeout.actual-first-child.actual-last-child,
|
|
.list.inset.list-has-group-title li.actual-first-child.actual-last-child > a {
|
|
border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
|
|
}
|
|
|
|
.accordion-item .block-title+.accordion-item-content .list.inset li.swipeout:first-child:not(:last-child),
|
|
.accordion-item .block-title+.accordion-item-content .list.inset li:first-child:not(:last-child) > a {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.accordion-item .block-title+.accordion-item-content .list.inset li.swipeout:first-child:last-child,
|
|
.accordion-item .block-title+.accordion-item-content .list.inset li:first-child:last-child > a,
|
|
.accordion-item .block-title+.accordion-item-content .list.inset li.swipeout.actual-last-child:first-child,
|
|
.accordion-item .block-title+.accordion-item-content .list.inset li.actual-last-child:first-child > a {
|
|
border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
|
|
}
|
|
|
|
.list .item-content .list-item-checked-icon {
|
|
font-size: var(--ebk-list-item-checked-icon-font-size);
|
|
color: var(--f7-radio-active-color, var(--f7-theme-color));
|
|
}
|
|
|
|
html:not([dir="rtl"]) .list .item-content .list-item-checked-icon {
|
|
margin-inline-end: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
|
|
}
|
|
|
|
html[dir="rtl"] .list .item-content .list-item-checked-icon {
|
|
margin-inline-start: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
|
|
}
|
|
|
|
.list .item-content > .item-inner > .item-after .list-item-checked-icon {
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
html[dir="rtl"] .list .item-content > .item-inner > .item-after .list-item-checked-icon {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
.list li.no-margin .item-content.item-input {
|
|
margin: 0;
|
|
}
|
|
|
|
.skeleton-text .list-item-toggle .item-after {
|
|
height: var(--f7-toggle-height);
|
|
}
|
|
|
|
.skeleton-text .list-item-toggle .item-after > span {
|
|
line-height: var(--f7-toggle-height);
|
|
font-size: var(--f7-toggle-height);
|
|
}
|
|
|
|
.popover > .popover-inner > .list .list-group-title {
|
|
--f7-list-group-title-height: var(--ebk-popover-list-group-title-height);
|
|
}
|
|
|
|
.no-sortable > .sortable-handler {
|
|
display: none;
|
|
}
|
|
|
|
.card-header-content {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.icon-after-text {
|
|
margin-inline-start: 6px;
|
|
}
|
|
|
|
.icon-after-text i.icon {
|
|
font-size: var(--ebk-icon-after-text-font-size);
|
|
}
|
|
|
|
.badge.right-bottom-icon {
|
|
margin-inline-start: -12px;
|
|
margin-top: 14px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
html[dir="rtl"] .badge.right-bottom-icon {
|
|
left: unset;
|
|
right: 50%;
|
|
}
|
|
|
|
html[dir="rtl"] .icon.las .badge.right-bottom-icon {
|
|
right: 100%;
|
|
margin-inline-start: -14px;
|
|
}
|
|
|
|
.badge.right-bottom-icon > .icon {
|
|
font-size: var(--ebk-right-bottom-icon-font-size);
|
|
width: var(--ebk-right-bottom-icon-font-size);
|
|
height: var(--ebk-right-bottom-icon-font-size);
|
|
}
|
|
|
|
/** Swipe handler **/
|
|
.swipe-handler {
|
|
height: 26px;
|
|
position: absolute;
|
|
left: 0;
|
|
width: 100%;
|
|
top: 0;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
}
|
|
|
|
.swipe-handler:after {
|
|
content: "";
|
|
width: 36px;
|
|
height: 6px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-inline-start: -18px;
|
|
margin-top: -8px;
|
|
border-radius: 3px;
|
|
background: #666
|
|
}
|
|
|
|
/** list-item-with-multi-item for framework7 **/
|
|
.list-item-with-multi-item .item-content,
|
|
.list-item-with-multi-item .item-inner {
|
|
padding: 0;
|
|
}
|
|
|
|
.list-item-with-multi-item .item-inner > div {
|
|
width: 100%;
|
|
}
|
|
|
|
.list-item-with-multi-item > .item-content > .item-inner:after {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.list-item-with-multi-item .list-item-subitem:first-child .item-content {
|
|
padding-inline-start: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
|
|
}
|
|
|
|
.list-item-with-multi-item .list-item-subitem .item-inner {
|
|
display: block;
|
|
width: 100%;
|
|
padding-inline-start: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
|
|
padding-top: var(--f7-list-item-padding-vertical);
|
|
padding-bottom: var(--f7-list-item-padding-vertical);
|
|
}
|
|
|
|
.list-item-with-multi-item .list-item-subitem:first-child .item-inner {
|
|
padding-inline-start: 0;
|
|
}
|
|
|
|
/** Combination list for framework7 **/
|
|
.combination-list-wrapper {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.combination-list-wrapper .block-title {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.combination-list-wrapper .list.combination-list-header {
|
|
margin: 0;
|
|
}
|
|
|
|
.combination-list-wrapper .list.combination-list-header .item-inner {
|
|
align-content: center;
|
|
}
|
|
|
|
.combination-list-wrapper .list.combination-list-header .item-title {
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
.combination-list-wrapper .list.combination-list-header > ul {
|
|
background-color: var(--f7-list-group-title-bg-color);
|
|
}
|
|
|
|
.combination-list-wrapper .list.combination-list-header.combination-list-opened > ul {
|
|
border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
|
|
}
|
|
|
|
.combination-list-wrapper .list.combination-list-header.combination-list-closed > ul {
|
|
border-radius: var(--f7-list-inset-border-radius);
|
|
}
|
|
|
|
html:not([dir="rtl"]) .combination-list-wrapper .list.combination-list-header .combination-list-chevron-icon {
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
html[dir="rtl"] .combination-list-wrapper .list.combination-list-header .combination-list-chevron-icon {
|
|
margin-inline-end: auto;
|
|
}
|
|
|
|
.combination-list-wrapper .list.combination-list-content.inset > ul {
|
|
border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
|
|
}
|
|
|
|
.combination-list-wrapper.no-accordion-toggle .list.combination-list-content.inset > ul {
|
|
border-radius: var(--f7-list-inset-border-radius);
|
|
}
|
|
|
|
/** Nested List item for framework7 **/
|
|
.nested-list-item .item-title {
|
|
width: 100%;
|
|
}
|
|
|
|
.nested-list-item.has-child-list-item > .swipeout-content > .item-content > .item-inner,
|
|
.nested-list-item.has-child-list-item > .swipeout-content > .item-link > .item-content > .item-inner {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.nested-list-item.has-child-list-item .nested-list-item-child .item-inner {
|
|
padding-bottom: var(--f7-list-item-padding-vertical);
|
|
}
|
|
|
|
.nested-list-item.has-child-list-item .item-link.active-state {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.nested-list-item.has-child-list-item .item-link .item-inner {
|
|
padding-inline-end: 0;
|
|
}
|
|
|
|
.nested-list-item.has-child-list-item .item-link .item-inner:before {
|
|
color: transparent;
|
|
}
|
|
|
|
.nested-list-item.has-child-list-item .item-link.active-state .item-inner .nested-list-item-child .item-link.active-state {
|
|
background-color: var(--f7-list-link-pressed-bg-color);
|
|
}
|
|
|
|
.nested-list-item.has-child-list-item .item-link .item-inner .nested-list-item-child .item-link .item-inner,
|
|
.nested-list-item.has-child-list-item .item-link .item-inner .nested-list-item-inner {
|
|
padding-inline-end: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
|
|
}
|
|
|
|
.nested-list-item.has-child-list-item .item-link .item-inner .nested-list-item-child .item-link .item-inner:before {
|
|
color: var(--f7-list-chevron-icon-color);
|
|
}
|
|
|
|
.nested-list-item .nested-list-item-inner {
|
|
align-items: center;
|
|
}
|
|
|
|
.nested-list-item .nested-list-item-title {
|
|
width: 100%;
|
|
flex-shrink: 1;
|
|
margin-inline-end: var(--f7-list-item-media-margin);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.nested-list-item.has-child-list-item .nested-list-item-title {
|
|
margin-inline-start: var(--f7-list-item-media-margin);
|
|
}
|
|
|
|
.nested-list-item .nested-list-item-after {
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
font-size: var(--f7-list-item-after-font-size);
|
|
color: var(--f7-list-item-after-text-color);
|
|
margin-inline-start: auto;
|
|
padding-inline-start: var(--f7-list-item-after-padding);
|
|
}
|
|
|
|
.nested-list-item.has-child-list-item > .swipeout-content > .item-content > .item-inner:after,
|
|
.nested-list-item.has-child-list-item > .swipeout-content > .item-link > .item-content > .item-inner:after {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.list.inset li.nested-list-item.has-child-list-item .item-inner li.nested-list-item-child,
|
|
.list.inset li.nested-list-item.has-child-list-item .item-inner li.nested-list-item-child > a {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.list.list-dividers li.nested-list-item.has-child-list-item .item-inner .nested-list-item-child .item-inner:after {
|
|
content: '';
|
|
position: absolute;
|
|
background-color: var(--f7-list-item-border-color);
|
|
display: block !important;
|
|
z-index: 15;
|
|
top: auto;
|
|
right: auto;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 1px;
|
|
width: 100%;
|
|
transform-origin: 50% 100%;
|
|
transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
|
|
}
|
|
|
|
.list.list-dividers li.nested-list-item.has-child-list-item:last-child .item-inner .nested-list-item-child:last-child .item-inner:after,
|
|
.list.list-dividers li.nested-list-item.has-child-list-item.actual-last-child .item-inner .nested-list-item-child.actual-last-child .item-inner:after {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.sortable-enabled .nested-list-item .nested-list-item-child .item-inner {
|
|
padding-inline-end: var(--f7-safe-area-right) !important;
|
|
}
|
|
|
|
/** Fix @vuepic/vue-datepicker style issue **/
|
|
.dp__main.dp__flex_display {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dp__main .dp--tp-wrap {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.dp__main .dp__menu_inner {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.dp__main .dp__menu_inner .dp--header-wrap > .dp__month_year_wrap > button {
|
|
width: unset;
|
|
}
|
|
|
|
.dp__main .dp__calendar .dp__calendar_item {
|
|
flex: 1;
|
|
}
|
|
|
|
.dp__main .dp__calendar .dp__calendar_item > .dp__cell_inner {
|
|
width: 100%;
|
|
}
|
|
|
|
html[dir="rtl"] .dp__main .dp__btn.dp--arrow-btn-nav {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
/* statistics-list */
|
|
.statistics-list-item-overview-amount {
|
|
margin-top: 2px;
|
|
font-size: 1.5em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.statistics-list-item-text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.statistics-list-item .item-content {
|
|
margin-top: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.statistics-list-item-non-stacked .item-inner > .item-title {
|
|
width: 100%;
|
|
}
|
|
|
|
.statistics-icon {
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
.statistics-percent {
|
|
font-size: 0.7em;
|
|
opacity: 0.6;
|
|
margin-inline-start: 6px;
|
|
}
|
|
|
|
.statistics-item-end {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.statistics-percent-line {
|
|
margin-inline-end: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
|
|
}
|
|
|
|
.statistics-percent-line .progressbar {
|
|
height: 4px;
|
|
--f7-progressbar-bg-color: #f8f8f8;
|
|
}
|
|
|
|
.dark .statistics-percent-line .progressbar {
|
|
--f7-progressbar-bg-color: #444444;
|
|
}
|
|
|
|
.statistics-multi-percent-line > div > .progressbar {
|
|
border-radius: unset;
|
|
}
|
|
|
|
.statistics-multi-percent-line > div:first-child > .progressbar {
|
|
border-top-left-radius: var(--f7-progressbar-border-radius);
|
|
border-bottom-left-radius: var(--f7-progressbar-border-radius);
|
|
}
|
|
|
|
.statistics-multi-percent-line > div:last-child > .progressbar {
|
|
border-top-right-radius: var(--f7-progressbar-border-radius);
|
|
border-bottom-right-radius: var(--f7-progressbar-border-radius);
|
|
}
|