|
|
@@ -5,39 +5,15 @@
|
|
|
|
|
|
:root {
|
|
|
--ls-page-title-size: 26px;
|
|
|
- --silk-tabbar-bottom-padding: 12px;
|
|
|
- --silk-100-lvh-dvh-pct: max(100%, 100vh);
|
|
|
--safe-area-inset-top: 40px;
|
|
|
--safe-area-inset-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
html.is-native-ios {
|
|
|
- --silk-tabbar-bottom-padding: 2px;
|
|
|
--safe-area-inset-top: 58px;
|
|
|
--safe-area-inset-bottom: 24px;
|
|
|
}
|
|
|
|
|
|
-html.is-native-android {
|
|
|
- --silk-topbar-inner-padding-top: 14px;
|
|
|
- --silk-topbar-inner-padding-bottom: 6px;
|
|
|
-
|
|
|
- --silk-tabbar-bottom-padding: 22px;
|
|
|
-
|
|
|
- .app-silk-index-container {
|
|
|
- padding-top: calc(var(--safe-area-inset-top) + 22px);
|
|
|
- }
|
|
|
-
|
|
|
- .app-silk-search-page {
|
|
|
- > .hd {
|
|
|
- padding-top: calc(var(--safe-area-inset-top) + 14px);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .SheetWithDepth-content {
|
|
|
- height: calc(100% - max(calc(var(--safe-area-inset-top) + 1.3vh), 2.6vh));
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
html.has-mobile-keyboard {
|
|
|
body {
|
|
|
@apply overflow-hidden
|
|
|
@@ -47,13 +23,7 @@ html.has-mobile-keyboard {
|
|
|
@apply opacity-100;
|
|
|
}
|
|
|
|
|
|
- .block-modal-page {
|
|
|
- .app-silk-scroll-content-inner {
|
|
|
- padding-bottom: calc(var(--ls-native-kb-height, 0px) + 64px);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .app-silk-popup-content-inner {
|
|
|
+ .app-popup {
|
|
|
padding-bottom: calc(var(--ls-native-kb-height, 0px) + 24px);
|
|
|
}
|
|
|
}
|
|
|
@@ -145,89 +115,10 @@ ul {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.block-modal-page {
|
|
|
- &-header {
|
|
|
- @apply pt-5 pb-1 px-4 flex justify-between bg-gray-01
|
|
|
- absolute top-0 left-0 w-full z-[10] overflow-hidden;
|
|
|
-
|
|
|
- border-radius: 26px 26px 0 0;
|
|
|
- }
|
|
|
-
|
|
|
- &-content {
|
|
|
- @apply pt-14;
|
|
|
-
|
|
|
- #app-container-wrapper {
|
|
|
- @apply relative px-6;
|
|
|
- }
|
|
|
-
|
|
|
- .ls-view-body {
|
|
|
- @apply max-w-[90vw];
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .app-silk-depth-sheet-content {
|
|
|
- }
|
|
|
-
|
|
|
- .app-silk-scroll-content {
|
|
|
- @apply min-h-screen;
|
|
|
- padding-bottom: 200px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
.block-content-or-editor-inner {
|
|
|
@apply min-h-[25px];
|
|
|
}
|
|
|
|
|
|
-.app-silk-popup-sheet-view {
|
|
|
- .ls-property-dialog {
|
|
|
- .ls-property-input, .property-key {
|
|
|
- @apply w-full;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .property-select, .ls-property-key {
|
|
|
- @apply w-full;
|
|
|
-
|
|
|
- .cp__select-main {
|
|
|
- @apply w-full;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .cp__emoji-icon-picker {
|
|
|
- @apply w-full;
|
|
|
- }
|
|
|
-
|
|
|
- &.as-action-sheet {
|
|
|
- .app-silk-popup-content-inner {
|
|
|
- > h2 {
|
|
|
- @apply text-center pb-3 text-sm;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-link {
|
|
|
- @apply border-b -mx-2 py-3;
|
|
|
-
|
|
|
- span {
|
|
|
- @apply inline-block w-full text-center;
|
|
|
- }
|
|
|
-
|
|
|
- .ui__icon {
|
|
|
- @apply hidden;
|
|
|
- }
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- @apply border-t;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- @apply -mb-4;
|
|
|
-
|
|
|
- padding-bottom: calc(env(safe-area-inset-bottom) + 6px);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
.blocks-container {
|
|
|
.block-main-container {
|
|
|
&[data-has-heading] {
|
|
|
@@ -310,162 +201,8 @@ ul {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-.app-silk-popup-content-inner {
|
|
|
- &:has(.ls-quick-add) {
|
|
|
- @apply min-h-[80vh] max-h-[90vh] overflow-y-auto overflow-x-hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .ls-debug-log {
|
|
|
- @apply h-[80vh] overflow-y-auto overflow-x-hidden pb-8;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* silk styles */
|
|
|
-.app-silk-index-scroll-view {
|
|
|
- /* NOTE: fix for the depth sheet view style? */
|
|
|
- padding-top: 2px;
|
|
|
-}
|
|
|
-
|
|
|
-.app-silk-index-scroll-content {
|
|
|
- @apply bg-gray-01 min-h-[100svh] overflow-hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.app-silk-depth-sheet-content {
|
|
|
- display: grid;
|
|
|
-}
|
|
|
-
|
|
|
-.BottomSheet-bleedingBackground,
|
|
|
-.SheetWithDepth-bleedingBackground {
|
|
|
- @apply bg-gray-01;
|
|
|
-}
|
|
|
-
|
|
|
-.app-silk-scroll-view {
|
|
|
- grid-area: 1 / 1;
|
|
|
- min-height: 0;
|
|
|
- width: 100%;
|
|
|
- overflow: clip;
|
|
|
- border-radius: 24px 24px 0 0;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-.app-silk-scroll-content {
|
|
|
- overflow: hidden;
|
|
|
- overflow: clip;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
|
|
|
- & > div:first-child {
|
|
|
- height: var(--ls-full-screen-height, "auto") !important;
|
|
|
- overflow-y: auto !important;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.app-silk-index-container {
|
|
|
- @apply p-4 flex flex-col gap-3 bg-gray-01;
|
|
|
-
|
|
|
- padding-top: env(safe-area-inset-top);
|
|
|
- padding-bottom: 120px;
|
|
|
-
|
|
|
- #journals {
|
|
|
- @apply -mt-4 px-1;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.app-silk-tabs {
|
|
|
- @apply fixed flex border-t overflow-hidden select-none
|
|
|
- bg-gray-02 left-0 -bottom-0 w-full z-[1] dark:bg-gray-01;
|
|
|
-
|
|
|
- padding-top: 4px;
|
|
|
- padding-bottom: calc(env(safe-area-inset-bottom) + var(--silk-tabbar-bottom-padding));
|
|
|
-
|
|
|
- > .as-item {
|
|
|
- @apply flex flex-1 flex-col items-center pb-1 transition-opacity opacity-60;
|
|
|
-
|
|
|
- > small {
|
|
|
- @apply text-[9px] -mt-2;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .as-item.active {
|
|
|
- @apply opacity-90 text-accent-10;
|
|
|
- small {
|
|
|
- @apply font-semibold;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.app-silk-search-page {
|
|
|
- > .hd {
|
|
|
- @apply fixed top-0 left-0 px-4 py-2.5 w-full bg-gray-01;
|
|
|
-
|
|
|
- padding-top: calc(env(safe-area-inset-top, 0px) + 4px);
|
|
|
- z-index: 1;
|
|
|
- transition: padding 0.1s ease-in-out;
|
|
|
-
|
|
|
- .ls-icon-search {
|
|
|
- @apply absolute left-2.5 top-[11px] opacity-60;
|
|
|
- }
|
|
|
-
|
|
|
- .cancel {
|
|
|
- @apply absolute right-0.5 opacity-0 text-base;
|
|
|
-
|
|
|
- bottom: 11px;
|
|
|
- }
|
|
|
-
|
|
|
- &.input-focused {
|
|
|
- padding-right: 80px;
|
|
|
-
|
|
|
- .cancel {
|
|
|
- opacity: .6;
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- .ls-icon-search {
|
|
|
- @apply opacity-90;
|
|
|
- }
|
|
|
-
|
|
|
- > .x {
|
|
|
- right: 88px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .ui__input {
|
|
|
- @apply border-none dark:bg-gray-02 bg-gray-04 pl-9 outline-none ring-0 text-base rounded-full;
|
|
|
-
|
|
|
- height: 40px;
|
|
|
- outline-offset: 0;
|
|
|
- box-shadow: none;
|
|
|
- }
|
|
|
-
|
|
|
- > .x {
|
|
|
- @apply absolute right-6 w-[16px] h-[16px] bg-gray-10 overflow-hidden
|
|
|
- rounded-full flex items-center justify-center text-gray-02 opacity-50;
|
|
|
-
|
|
|
- bottom: 22px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- > .bd {
|
|
|
- @apply -mx-4 mt-8;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.app-silk-action-sheet-modal {
|
|
|
- &-content {
|
|
|
- > h2 {
|
|
|
- @apply leading-tight opacity-40 w-full py-2 px-4;
|
|
|
- }
|
|
|
-
|
|
|
- > .as-list-container {
|
|
|
- @apply w-full max-h-[420px] overflow-auto px-4 pb-3;
|
|
|
-
|
|
|
- a.as-item-btn {
|
|
|
- @apply select-none py-2 flex justify-start w-full text-lg;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+.app-popup {
|
|
|
+ @apply w-full overflow-y-auto overflow-x-hidden;
|
|
|
}
|
|
|
|
|
|
.app-audio-recorder {
|
|
|
@@ -565,8 +302,8 @@ body, #root {
|
|
|
padding-bottom: 48px;
|
|
|
}
|
|
|
|
|
|
-.cp__select-main {
|
|
|
- width: 100%;
|
|
|
+.cp__select-main, .cp__emoji-icon-picker, .ls-property-key {
|
|
|
+ @apply w-full;
|
|
|
}
|
|
|
|
|
|
.cp__select {
|
Tienson Qin