move and refactor css files

resources/css/datepicker.css

@@ -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...
-----------------------------------------------------------------------------------------*/

resources/css/table.css

@@ -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);
-}

resources/css/animation.css → 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;
 }
 

resources/css/common.css → 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 {

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;
+}

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;
+  }
+}

resources/css/highlight.css → 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,

resources/css/srs_cards.css → 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);
 }
 

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";

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';