diff --git a/resources/css/datepicker.css b/resources/css/datepicker.css deleted file mode 100644 index 8ff530cab2..0000000000 --- a/resources/css/datepicker.css +++ /dev/null @@ -1,230 +0,0 @@ -/*---------------------------------------------------------------------------------------- - Stylesheet for re-com.date Date Picker variants inline-picker & dropdown-picker - Day8 variation loosely based on: - Copyright 2013 Dan Grossman ( http://www.dangrossman.info ) - Licensed under the Apache License v2.0 - http://www.apache.org/licenses/LICENSE-2.0 - Built for http://www.improvely.com - http://eternicode.github.io/bootstrap-datepicker - - START OF DATE PICKER SECTION... -----------------------------------------------------------------------------------------*/ -.noselect { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.datepicker.single .calendar { - float: none; -} - -.datepicker .calendar { - display: none; - max-width: 200px; -} - -.datepicker .calendar.single .calendar-date { - border: none; -} - -.datepicker .calendar th, .datepicker .calendar td { - white-space: nowrap; - text-align: center; - min-width: 32px; -} - -.datepicker .calendar-date { - border: 1px solid #ddd; - padding: 4px; - border-radius: 4px; - /* background: #fff; */ -} - -.datepicker .calendar-time { - text-align: center; - margin: 8px auto 0 auto; - line-height: 30px; -} - -.datepicker { - position: absolute; - top: 100px; - left: 20px; - padding: 10px; - margin-top: 1px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - line-height: 16px; - border-radius: 4px; - background: #efefef; -} - -.datepicker table { - width: 100%; - margin: 0; - border-collapse: separate; - border-spacing: 0; - background: transparent; - border: none; -} - -.datepicker td, .datepicker th { - text-align: center; - width: 27px; - height: 26px; - max-width: 27px; - max-height: 26px; - min-width: 27px; - min-height: 26px; - padding: 4px; - cursor: default; - white-space: nowrap; - font-weight: normal; -} - -.datepicker td.off { - padding: 4px; - color: #999; -} - -.datepicker td.disabled { - color: #999; -} - -.datepicker th.disabled { - color: #999; -} - -.datepicker td.available:hover, .datepicker th.available:hover { - background: #357ebd; - cursor: pointer; - color: #FFF; - border-radius: 4px; -} - -.datepicker td.in-range { - background: #ebf4f8; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; -} - -.datepicker td.start-date { - -webkit-border-radius: 4px 0 0 4px; - -moz-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; -} - -.datepicker td.end-date { - -webkit-border-radius: 0 4px 4px 0; - -moz-border-radius: 0 4px 4px 0; - border-radius: 0 4px 4px 0; -} - -.datepicker td.start-date.end-date { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} - -.datepicker td.active, .datepicker td.active:hover { - background-color: #357ebd; - border-color: #3071a9; - color: #fff; -} - -/* Introduced by Day8 from http://eternicode.github.io/bootstrap-datepicker */ -.datepicker td.today, .datepicker td.today:hover { - background-color: #ffcd70; - border-color: #f59e00; - border-radius: 18px; - color: #fff; -} - -.datepicker th.day-enabled, label.day-enabled { - font-weight: normal; - font-size: 10px; - color: #333; -} - -.datepicker th.selectable { - font-weight: normal; - color: #357ebd; -} - -.datepicker th.day-disabled { - font-weight: normal; - font-size: 10px; - color: #999; -} - -.datepicker td.week, .datepicker th.week { - font-size: 80%; - color: #ccc; -} - -.datepicker th.month { - width: auto; - font-size: 14px; - color: var(--ls-title-text-color); -} - -.dropdown-button { - cursor: pointer; - height: 32px; - font-size: 13px; - font-weight: normal; -} - -.dropdown-button.activator { - width: 40px; - color: #777; - /* background-color: #F7F7F7 */ -} - -.table-condensed > thead > tr > th, -.table-condensed > tbody > tr > th, -.table-condensed > tfoot > tr > th, -.table-condensed > thead > tr > td, -.table-condensed > tbody > tr > td, -.table-condensed > tfoot > tr > td { - padding: 5px; -} - -.dark-theme .datepicker { - background: var(--ls-secondary-background-color); -} - -.dark-theme .datepicker th.day-disabled, .dark-theme .datepicker th.disabled, .dark-theme .datepicker td.disabled, .dark-theme .datepicker td.off { - color: #666; -} - -.dark-theme .datepicker th.day-enabled, .dark-theme label.day-enabled { - color: currentColor; -} - -.dark-theme .datepicker td.active, .dark-theme .datepicker td.active:hover { - background-color: var(--ls-block-properties-background-color); - border-color: var(--ls-block-properties-background-color); -} - -.dark-theme .datepicker th.selectable { - color: var(--ls-primary-text-color); -} - -.dark-theme .datepicker td.available:hover, .dark-theme .datepicker th.available:hover { - background: var(--ls-block-properties-background-color); -} - -.datepicker tr:nth-child(odd), .datepicker tr:nth-child(even), .dark-theme .datepicker tr:nth-child(odd), .dark-theme .datepicker tr:nth-child(even) { - background: transparent; -} - -.datepicker th, .datepicker tr, .datepicker td, .dark-theme .datepicker th, .dark-theme .datepicker tr, .dark-theme .datepicker td { - border-bottom: none; -} -/*---------------------------------------------------------------------------------------- - END OF DATE PICKER SECTION... -----------------------------------------------------------------------------------------*/ diff --git a/resources/css/table.css b/resources/css/table.css deleted file mode 100644 index c2b65dd9ab..0000000000 --- a/resources/css/table.css +++ /dev/null @@ -1,47 +0,0 @@ -div.table-wrapper { - overflow: auto; -} - -table { - width: 100%; - border-collapse: collapse; - text-align: left; - margin: 1rem 0; -} - -th { - font-size: 14px; - font-weight: 400; - color: var(--ls-primary-text-color); - border-bottom: 2px solid var(--ls-border-color); - padding: 10px 8px; -} - -td { - padding: 6px 8px; - text-align: left; -} - -tr:nth-child(even) {background: var(--ls-table-tr-even-background-color);} -tr:nth-child(odd) {background: var(--ls-primary-background-color);} - -caption.t-above {caption-side:top} -caption.t-bottom {caption-side:bottom} -caption {margin-bottom:.3em} -figcaption{margin-top:.3em} -.org-right{text-align:right} -.org-left{text-align:left} -.org-center{text-align:center} - -.dark-theme th { - color: var(--ls-primary-text-color); -} - -.dark-theme tr:nth-child(even) {background: var(--ls-table-tr-even-background-color);} -.dark-theme tr:nth-child(odd) {background: var(--ls-primary-background-color);} -.dark-theme td, .dark-theme tr { - border-bottom: none; -} -.dark-theme th { - border-bottom: 2px solid var(--ls-border-color); -} diff --git a/resources/css/animation.css b/src/main/frontend/animations.css similarity index 57% rename from resources/css/animation.css rename to src/main/frontend/animations.css index 0c5b074857..d1e69886e7 100644 --- a/resources/css/animation.css +++ b/src/main/frontend/animations.css @@ -31,22 +31,12 @@ .fade-in { opacity: 0; /* make things invisible upon start */ - -webkit-animation: fadein ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ - -moz-animation: fadein ease-in 1; - animation: fadeIn ease-in 1; - - -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1) */ - -moz-animation-fill-mode: forwards; - animation-fill-mode: forwards; - - -webkit-animation-duration: 1s; - -moz-animation-duration: 1s; + animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ + animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1) */ animation-duration: 1s; } .faster-fade-in { - -webkit-animation-duration: 0.3s; - -moz-animation-duration: 0.3s; animation-duration: 0.3s; } diff --git a/resources/css/common.css b/src/main/frontend/common.css similarity index 94% rename from resources/css/common.css rename to src/main/frontend/common.css index d49ca8b72b..e507613c80 100644 --- a/resources/css/common.css +++ b/src/main/frontend/common.css @@ -51,7 +51,7 @@ html[data-theme='dark'] { --ls-block-ref-link-text-color: #1a6376; --ls-border-color: #0e5263; --ls-secondary-border-color: #126277; - --ls-tertiary-border-color: rgba(0, 2, 0, 0.10); + --ls-tertiary-border-color: rgba(0, 2, 0, 0.1); --ls-guideline-color: #0b4a5a; --ls-menu-hover-color: var(--ls-secondary-background-color); --ls-primary-text-color: #a4b5b6; @@ -129,7 +129,7 @@ html[data-theme='light'] { --ls-block-ref-link-text-color: #d8e1e8; --ls-border-color: #ccc; --ls-secondary-border-color: #e2e2e2; - --ls-tertiary-border-color: rgba(200, 200, 200, 0.30); + --ls-tertiary-border-color: rgba(200, 200, 200, 0.3); --ls-guideline-color: rgba(46, 27, 5, 0.08); --ls-menu-hover-color: var(--ls-a-chosen-bg); --ls-primary-text-color: #433f38; @@ -190,10 +190,9 @@ html[data-theme='light'] { } html:not(.is-native-android) { - font-family: var(--ls-font-family), sans-serif, system-ui, - -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', - Arial, 'Noto Sans', serif, Apple Color Emoji, Segoe UI Emoji, - Segoe UI Symbol !important; + font-family: var(--ls-font-family), sans-serif, system-ui, -apple-system, + BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', + serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important; } /* region Reset top elements */ @@ -305,7 +304,8 @@ blockquote { font-size: 1rem; } -input[type=text], input[type=password] { +input[type='text'], +input[type='password'] { color: var(--ls-primary-text-color); background: transparent; font-size: inherit; @@ -352,7 +352,10 @@ li p:first-child, } li p:last-child, -.block-body p:last-child, .block-body ul:last-child, .block-body ol:last-child, .block-body dl:last-child { +.block-body p:last-child, +.block-body ul:last-child, +.block-body ol:last-child, +.block-body dl:last-child { margin-bottom: 0; } @@ -368,7 +371,6 @@ li p:last-child, background-color: var(--ls-tertiary-background-color); } - .pre-white-space { white-space: pre; } @@ -570,7 +572,8 @@ button.menu:focus { background-color: var(--ls-menu-hover-color, #f4f5f7); } -.menu-links-wrapper, .menu-links-outer { +.menu-links-wrapper, +.menu-links-outer { @apply py-2 rounded-md shadow-lg overflow-y-auto; max-height: calc(100vh - 100px) !important; @@ -593,7 +596,7 @@ button.menu:focus { .menu-separator { @apply my-1; - opacity: .5; + opacity: 0.5; border-top-width: 1px; border-color: var(--ls-border-color, #ccc); } @@ -622,7 +625,9 @@ a.chosen { } a.warning, -span.warning, div.warning:not(.admonitionblock), p.warning { +span.warning, +div.warning:not(.admonitionblock), +p.warning { background: var(--ls-warning-background-color); padding: 0.1em 0.4em; border-radius: var(--ls-border-radius-low); @@ -639,10 +644,10 @@ span.warning, div.warning:not(.admonitionblock), p.warning { a.error, span.error { - background: var(--ls-error-background-color); - padding: 0.1em 0.4em; - border-radius: var(--ls-border-radius-low); - color: var(--ls-error-text-color); + background: var(--ls-error-background-color); + padding: 0.1em 0.4em; + border-radius: var(--ls-border-radius-low); + color: var(--ls-error-text-color); } .text-error { @@ -661,7 +666,6 @@ span.error { background: var(--ls-success-background-color); } - img.small { display: inline; width: 20px; @@ -742,8 +746,8 @@ a.fade-link:hover { } .svg-small svg { - transform: scale(0.6); - display: inline; + transform: scale(0.6); + display: inline; } /* < > buttons */ @@ -854,7 +858,7 @@ a.page-op svg { } .search-more { - background: var(--ls-a-chosen-bg); + background: var(--ls-a-chosen-bg); } .keyboard-shortcut > code { @@ -870,7 +874,8 @@ html[data-theme='light'] .keyboard-shortcut > code { } html[data-theme='dark'] .keyboard-shortcut > code { - box-shadow: inset 0 -1px 0 var(--ls-primary-background-color), 0 0 1px 1px rgba(255, 255, 255,.2); + box-shadow: inset 0 -1px 0 var(--ls-primary-background-color), + 0 0 1px 1px rgba(255, 255, 255, 0.2); } .ui__modal-panel { @@ -878,22 +883,22 @@ html[data-theme='dark'] .keyboard-shortcut > code { } .overflow-y-scroll { - overflow-y: scroll; + overflow-y: scroll; } .text-ellipsis-wrapper { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .lazy-visibility { - min-width: 1px; - min-height: 1px; + min-width: 1px; + min-height: 1px; } .katex .tag { - overflow-x: clip; + overflow-x: clip; } html.is-mobile { @@ -907,10 +912,10 @@ html.is-mobile { } @layer base { - .ls-grid-cols { - @apply grid grid-flow-col auto-cols-max; - place-items: center; - } + .ls-grid-cols { + @apply grid grid-flow-col auto-cols-max; + place-items: center; + } /* fixes an html2canvas issue */ img { diff --git a/src/main/frontend/components/datepicker.css b/src/main/frontend/components/datepicker.css new file mode 100644 index 0000000000..4273f9205b --- /dev/null +++ b/src/main/frontend/components/datepicker.css @@ -0,0 +1,233 @@ +/*---------------------------------------------------------------------------------------- + Stylesheet for re-com.date Date Picker variants inline-picker & dropdown-picker + Day8 variation loosely based on: + Copyright 2013 Dan Grossman ( http://www.dangrossman.info ) + Licensed under the Apache License v2.0 + http://www.apache.org/licenses/LICENSE-2.0 + Built for http://www.improvely.com + http://eternicode.github.io/bootstrap-datepicker +----------------------------------------------------------------------------------------*/ + +.noselect { + user-select: none; +} + +.datepicker.single .calendar { + float: none; +} + +.datepicker .calendar { + display: none; + max-width: 200px; +} + +.datepicker .calendar.single .calendar-date { + border: none; +} + +.datepicker .calendar th, +.datepicker .calendar td { + white-space: nowrap; + text-align: center; + min-width: 32px; +} + +.datepicker .calendar-date { + border: 1px solid #ddd; + padding: 4px; + border-radius: 4px; +} + +.datepicker .calendar-time { + text-align: center; + margin: 8px auto 0 auto; + line-height: 30px; +} + +.datepicker { + position: absolute; + top: 100px; + left: 20px; + padding: 10px; + margin-top: 1px; + line-height: 16px; + border-radius: 4px; + background: #efefef; +} + +.datepicker table { + width: 100%; + margin: 0; + border-collapse: separate; + border-spacing: 0; + background: transparent; + border: none; +} + +.datepicker td, +.datepicker th { + text-align: center; + width: 27px; + height: 26px; + max-width: 27px; + max-height: 26px; + min-width: 27px; + min-height: 26px; + padding: 4px; + cursor: default; + white-space: nowrap; + font-weight: normal; +} + +.datepicker td.off { + padding: 4px; + color: #999; +} + +.datepicker td.disabled { + color: #999; +} + +.datepicker th.disabled { + color: #999; +} + +.datepicker td.available:hover, +.datepicker th.available:hover { + background: #357ebd; + cursor: pointer; + color: #fff; + border-radius: 4px; +} + +.datepicker td.in-range { + background: #ebf4f8; + border-radius: 0; +} + +.datepicker td.start-date { + border-radius: 4px 0 0 4px; +} + +.datepicker td.end-date { + border-radius: 0 4px 4px 0; +} + +.datepicker td.start-date.end-date { + border-radius: 4px; +} + +.datepicker td.active, +.datepicker td.active:hover { + background-color: #357ebd; + border-color: #3071a9; + color: #fff; +} + +/* Introduced by Day8 from http://eternicode.github.io/bootstrap-datepicker */ +.datepicker td.today, +.datepicker td.today:hover { + background-color: #ffcd70; + border-color: #f59e00; + border-radius: 18px; + color: #fff; +} + +.datepicker th.day-enabled, +label.day-enabled { + font-weight: normal; + font-size: 10px; + color: #333; +} + +.datepicker th.selectable { + font-weight: normal; + color: #357ebd; +} + +.datepicker th.day-disabled { + font-weight: normal; + font-size: 10px; + color: #999; +} + +.datepicker td.week, +.datepicker th.week { + font-size: 80%; + color: #ccc; +} + +.datepicker th.month { + width: auto; + font-size: 14px; + color: var(--ls-title-text-color); +} + +.dropdown-button { + cursor: pointer; + height: 32px; + font-size: 13px; + font-weight: normal; +} + +.dropdown-button.activator { + width: 40px; + color: #777; + /* background-color: #F7F7F7 */ +} + +.table-condensed > thead > tr > th, +.table-condensed > tbody > tr > th, +.table-condensed > tfoot > tr > th, +.table-condensed > thead > tr > td, +.table-condensed > tbody > tr > td, +.table-condensed > tfoot > tr > td { + padding: 5px; +} + +.dark-theme .datepicker { + background: var(--ls-secondary-background-color); +} + +.dark-theme .datepicker th.day-disabled, +.dark-theme .datepicker th.disabled, +.dark-theme .datepicker td.disabled, +.dark-theme .datepicker td.off { + color: #666; +} + +.dark-theme .datepicker th.day-enabled, +.dark-theme label.day-enabled { + color: currentColor; +} + +.dark-theme .datepicker td.active, +.dark-theme .datepicker td.active:hover { + background-color: var(--ls-block-properties-background-color); + border-color: var(--ls-block-properties-background-color); +} + +.dark-theme .datepicker th.selectable { + color: var(--ls-primary-text-color); +} + +.dark-theme .datepicker td.available:hover, +.dark-theme .datepicker th.available:hover { + background: var(--ls-block-properties-background-color); +} + +.datepicker tr:nth-child(odd), +.datepicker tr:nth-child(even), +.dark-theme .datepicker tr:nth-child(odd), +.dark-theme .datepicker tr:nth-child(even) { + background: transparent; +} + +.datepicker th, +.datepicker tr, +.datepicker td, +.dark-theme .datepicker th, +.dark-theme .datepicker tr, +.dark-theme .datepicker td { + border-bottom: none; +} diff --git a/src/main/frontend/components/table.css b/src/main/frontend/components/table.css new file mode 100644 index 0000000000..95a632c4cb --- /dev/null +++ b/src/main/frontend/components/table.css @@ -0,0 +1,79 @@ +div.table-wrapper { + overflow: auto; +} + +table { + width: 100%; + border-collapse: collapse; + text-align: left; + margin: 1rem 0; +} + +th { + font-size: 14px; + font-weight: 400; + color: var(--ls-primary-text-color); + border-bottom: 2px solid var(--ls-border-color); + padding: 10px 8px; +} + +td { + padding: 6px 8px; + text-align: left; +} + +tr:nth-child(even) { + background: var(--ls-table-tr-even-background-color); +} + +tr:nth-child(odd) { + background: var(--ls-primary-background-color); +} + +caption { + margin-bottom: 0.3em; + + &.t-above { + caption-side: top; + } + + &.t-bottom { + caption-side: bottom; + } +} + +figcaption { + margin-top: 0.3em; +} + +.org-right { + text-align: right; +} + +.org-left { + text-align: left; +} + +.org-center { + text-align: center; +} + +.dark-theme { + th { + color: var(--ls-primary-text-color); + border-bottom: 2px solid var(--ls-border-color); + } + + tr:nth-child(even) { + background: var(--ls-table-tr-even-background-color); + } + + tr:nth-child(odd) { + background: var(--ls-primary-background-color); + } + + td, + tr { + border-bottom: none; + } +} diff --git a/resources/css/highlight.css b/src/main/frontend/extensions/highlight.css similarity index 95% rename from resources/css/highlight.css rename to src/main/frontend/extensions/highlight.css index c9a8ed1ca9..6201214577 100644 --- a/resources/css/highlight.css +++ b/src/main/frontend/extensions/highlight.css @@ -11,7 +11,7 @@ } .dark-theme .hljs { - background: transparent; + background: transparent; } .hljs-keyword, @@ -76,7 +76,7 @@ } .hljs-selector-class { - color: #A082BD + color: #a082bd; } .hljs-keyword, diff --git a/resources/css/srs_cards.css b/src/main/frontend/extensions/srs.css similarity index 92% rename from resources/css/srs_cards.css rename to src/main/frontend/extensions/srs.css index 870c03d199..e21e1ef635 100644 --- a/resources/css/srs_cards.css +++ b/src/main/frontend/extensions/srs.css @@ -11,7 +11,8 @@ padding: 4px 6px; } -.cp__right-sidebar .cards-title, .ui__modal .cards-title { +.cp__right-sidebar .cards-title, +.ui__modal .cards-title { background: var(--color-level-2); } diff --git a/tailwind.all.css b/tailwind.all.css index bc6aaa1863..368cc8af43 100644 --- a/tailwind.all.css +++ b/tailwind.all.css @@ -14,11 +14,5 @@ @import "codemirror/theme/solarized.css"; @import "codemirror/addon/hint/show-hint.css"; @import "react-tippy/dist/tippy.css"; -@import "resources/css/animation.css"; -@import "resources/css/table.css"; -@import "resources/css/datepicker.css"; -@import "resources/css/highlight.css"; -@import "resources/css/common.css"; -@import "resources/css/srs_cards.css"; @import "resources/css/tabler-extension.css"; @import-glob "src/main/frontend/**/[!_]*.css"; diff --git a/tldraw/demo/src/logseq-styles.css b/tldraw/demo/src/logseq-styles.css index b64f903839..64511f3da1 100644 --- a/tldraw/demo/src/logseq-styles.css +++ b/tldraw/demo/src/logseq-styles.css @@ -1,7 +1,2 @@ -@import '../../../resources/css/inter.css'; -@import '../../../resources/css/animation.css'; -@import '../../../resources/css/table.css'; -@import '../../../resources/css/tooltip.css'; -@import '../../../resources/css/common.css'; @import '../../../resources/css/tabler-extension.css'; @import '../../apps/tldraw-logseq/src/styles.css';