refactor: separated css modules from common style

resources/css/animation.css

@@ -0,0 +1,88 @@
+/* make keyframes that tell the start state and the end state of our object */
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.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: 2s;
+  -moz-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+.fade-in.one {
+  -webkit-animation-delay: 0.5s;
+  -moz-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.fade-in.two {
+  -webkit-animation-delay: 1s;
+  -moz-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.fade-in.three {
+  -webkit-animation-delay: 1.5s;
+  -moz-animation-delay: 1.5s;
+  animation-delay: 1.5s;
+}
+
+.fade-in.four {
+  -webkit-animation-delay: 2s;
+  -moz-animation-delay: 2s;
+  animation-delay: 2s;
+}
+
+/* page transition */
+.fade-enter {
+  opacity: 0;
+}
+
+.fade-enter.fade-enter-active {
+  opacity: 1;
+  transition: opacity 500ms ease-in;
+}
+
+.fade-exit {
+  opacity: 1;
+}
+
+.fade-exit.fade-exit-active {
+  opacity: 0;
+  transition: opacity 300ms ease-in;
+}

resources/css/style.css

@@ -6,6 +6,7 @@
 @import "../../static/css/tailwind.build.css"; /* Build by gulp. Check `_buildTailwind` for more detail */
 @import "./codemirror.min.css";
 @import "./common.css";
+@import "./animation.css";
 @import "./datepicker.css";
 @import "./highlight.css";
 @import "./table.css";

src/main/frontend/components/block.cljs

@@ -841,8 +841,7 @@
 
 (defn list-checkbox
   [checked?]
-  (ui/checkbox {:style {:margin-right 6
-                        :margin-top -1}
+  (ui/checkbox {:style {:margin-right 6}
                 :checked checked?}))
 
 (defn marker-switch
@@ -1013,7 +1012,7 @@
   [block]
   (let [properties (apply dissoc (:block/properties block) text/hidden-properties)]
     (when (seq properties)
-      [:div.blocks__properties.text-sm.opacity-80.my-1.p-2
+      [:div.blocks-properties.text-sm.opacity-80.my-1.p-2
        (for [[k v] properties]
          [:div.my-1
           [:b k]

src/main/frontend/components/block.css

@@ -12,63 +12,49 @@
   }
 }
 
-.block-children {
-}
-
-.embed-page {
-  @apply py-2 my-2 px-2;
-
-  > section {
-    margin-bottom: 5px;
+.block-body {
+  blockquote:first-child,
+  pre:first-child {
+    margin-top: 8px;
+    margin-bottom: 8px;
   }
-
-  &.in-sidebar {
-    background-color: var(--ls-tertiary-background-color);
-  }
-}
-
-.color-level {
-  background-color: var(--color-level-1);
 }
 
-.color-level .color-level {
-  background-color: var(--color-level-2);
-}
-
-.color-level .color-level .color-level {
-  background-color: var(--color-level-3);
+.block-children {
+  border-left: 2px solid;
+  border-left-color: var(--ls-guideline-color, #ddd);
 }
 
-.color-level .color-level .color-level .color-level {
-  background-color: var(--color-level-4);
-}
+.block-ref {
+  color: var(--ls-link-text-color);
 
-.color-level .color-level .color-level .color-level .color-level {
-  background-color: var(--color-level-5);
+  &:hover {
+    color: var(--ls-link-text-hover-color)
+  }
 }
 
-.color-level .color-level .color-level .color-level .color-level .color-level {
-  background-color: var(--color-level-3);
-}
+.page-ref {
+  color: var(--ls-link-ref-text-color);
 
-.color-level .color-level .color-level .color-level .color-level .color-level .color-level {
-  background-color: var(--color-level-4);
+  &:hover {
+    color: var(--ls-link-ref-text-hover-color);
+  }
 }
 
-.color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level {
-  background-color: var(--color-level-5);
-}
+.embed-page {
+  @apply py-2 my-2 px-2;
 
-.color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level {
-  background-color: var(--color-level-3);
-}
+  > section {
+    margin-bottom: 5px;
+  }
 
-.color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level {
-  background-color: var(--color-level-4);
+  &.in-sidebar {
+    background-color: var(--ls-tertiary-background-color);
+  }
 }
 
-.color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level {
-  background-color: var(--color-level-5);
+.blocks-properties {
+  background-color: var(--ls-block-properties-background-color, #f0f8ff);
 }
 
 .ls-block {
@@ -128,6 +114,86 @@
   font-weight: 600
 }
 
+.color-level {
+  background-color: var(--color-level-1);
+}
+
+.color-level .color-level {
+  background-color: var(--color-level-2);
+}
+
+.color-level .color-level .color-level {
+  background-color: var(--color-level-3);
+}
+
+.color-level .color-level .color-level .color-level {
+  background-color: var(--color-level-4);
+}
+
+.color-level .color-level .color-level .color-level .color-level {
+  background-color: var(--color-level-5);
+}
+
+.color-level .color-level .color-level .color-level .color-level .color-level {
+  background-color: var(--color-level-3);
+}
+
+.color-level .color-level .color-level .color-level .color-level .color-level .color-level {
+  background-color: var(--color-level-4);
+}
+
+.color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level {
+  background-color: var(--color-level-5);
+}
+
+.color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level {
+  background-color: var(--color-level-3);
+}
+
+.color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level {
+  background-color: var(--color-level-4);
+}
+
+.color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level {
+  background-color: var(--color-level-5);
+}
+
+.bullet-container {
+  display: flex;
+  height: 13px;
+  width: 13px;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+
+  .bullet-heading {
+    background-color: var(--ls-block-bullet-color, #8fbc8f);
+  }
+
+  .bullet {
+    border-radius: 50%;
+    width: 5px;
+    height: 5px;
+    background-color: var(--ls-block-bullet-color, #394b59);
+  }
+
+  &.bullet-closed {
+    background-color: var(--ls-block-bullet-border-color, #ced9e0);
+  }
+}
+
+.doc-mode {
+  margin-left: -16px;
+
+  .block-children {
+    border-left: none;
+  }
+
+  .hide-inner-bullet .bullet {
+    display: none;
+  }
+}
+
 /* copied from https://github.com/drdogbot7/tailwindcss-responsive-embed */
 .embed-responsive {
   position: relative;

src/main/frontend/components/content.css

@@ -0,0 +1,12 @@
+/* Is this required? */
+.content p a:hover {
+  text-decoration: none;
+  border-bottom: 1px solid;
+  border-bottom-color: var(--ls-link-text-hover-color, black);
+}
+
+.content a.initial-color,
+.content a.initial-color:hover {
+  color: initial;
+  text-decoration: none;
+}

src/main/frontend/components/diff.css

@@ -1,22 +1,29 @@
+#diffs-body {
+  textarea {
+    color: var(--ls-primary-text-color, #a4b5b6);
+  }
+}
+
 .cp__diff-file {
-    @apply mb-3;
-    border: 1px solid #ddd;
-    border-radius: 3px;
+  @apply mb-3;
+  border: 1px solid #ddd;
+  border-radius: 3px;
 }
 
 .cp__diff-file-header {
-    background-color: var(--ls-secondary-background-color);
-    padding: 5px 10px;
-    border-bottom: 1px solid #e1e4e8;
-    border-radius: 3px 3px 0 0;
-    display: flex;
-    align-items: center;
+  background-color: var(--ls-secondary-background-color);
+  padding: 5px 10px;
+  border-bottom: 1px solid #e1e4e8;
+  border-radius: 3px 3px 0 0;
+  display: flex;
+  align-items: center;
 }
 
 .cp__diff-file-header-content {
-    @apply truncate
+  @apply truncate
+
 }
 
 .cp__diff-file-header-type {
-    @apply text-sm font-medium ml-2 border rounded px-1;
+  @apply text-sm font-medium ml-2 border rounded px-1;
 }

src/main/frontend/components/draw.css

@@ -0,0 +1,23 @@
+#draw {
+  -webkit-app-region: no-drag;
+  overflow: hidden;
+}
+
+#draw iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.draw {
+  display: flex;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.excalidraw-embed .draw {
+  position: relative;
+}

src/main/frontend/components/editor.css

@@ -1,5 +1,23 @@
-.editor-wrapper {
+#mobile-editor-toolbar {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  left: 0;
+  justify-content: center;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  z-index: 9999;
+
+  transition: top 0.3s;
+
+  > button {
+    padding: 5px;
+  }
+}
 
+.editor-wrapper {
+  margin: 0 auto;
 }
 
 .editor-inner {
@@ -7,6 +25,10 @@
   display: flex;
 }
 
+.absolute-modal {
+  background: var(--ls-primary-background-color);
+}
+
 .editor-inner textarea {
   border: none;
   border-radius: 0;

src/main/frontend/components/file.css

@@ -0,0 +1,5 @@
+.file {
+  textarea, pre {
+    margin: 0;
+  }
+}

src/main/frontend/components/header.css

@@ -1,9 +1,15 @@
 .cp__header {
   @apply shadow z-10 h-12 pr-4;
-  position: relative;
+
   display: flex;
   align-items: center;
   flex: 0 0 auto;
+  background-color: var(--ls-primary-background-color, #fff);
+
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
 }
 
 .cp__header-left-menu {

src/main/frontend/components/journal.cljs

@@ -106,7 +106,7 @@
   [:div#journals
    (ui/infinite-list
     (for [[journal-name format] latest-journals]
-      [:div.journal.content {:key journal-name}
+      [:div.journal-item.content {:key journal-name}
        (journal-cp [journal-name format])])
     {:on-load (fn []
                 (page-handler/load-more-journals!))})])

src/main/frontend/components/journal.css

@@ -0,0 +1,21 @@
+#journals {
+  margin-bottom: 70vh;
+
+  textarea {
+    word-break: break-word;
+    overflow: hidden;
+  }
+
+  .journal-item {
+    border-top: 1px solid;
+    border-top-color: var(--ls-border-color, #738694);
+    padding: 48px 0;
+    margin: 24px 0 128px 0;
+
+    &:first-child {
+      border-top: none;
+      padding: 0;
+      min-height: 500px;
+    }
+  }
+}

src/main/frontend/components/onboarding.cljs

@@ -188,7 +188,7 @@
 (defn help
   []
   (rum/with-context [[t] i18n/*tongue-context*]
-    [:div.help.ml-2.mt-1
+    [:div.help.cp__sidebar-help-docs
      [:ul
       [:li
        [:a {:href "https://logseq.com/blog/about"

src/main/frontend/components/onboarding.css

@@ -0,0 +1,52 @@
+#intro {
+  h1,
+  h2 {
+    margin: 2.5em 0 0.5em;
+  }
+
+  h2 {
+    font-size: 1.4em;
+  }
+
+  h3 {
+    font-size: 1.275em;
+    margin: 1.5em 0 0.5em;
+  }
+
+  h4 {
+    font-size: 1.175em;
+    margin: 1em 0 0.5em;
+  }
+
+  img {
+    margin: 5em 0;
+    max-width: 100%;
+  }
+
+  p {
+    margin: 15px 0;
+  }
+
+  .content {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.intro-docs {
+  max-width: var(--ls-main-content-max-width, 100%)
+}
+
+.video-wrapper {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

src/main/frontend/components/page.css

@@ -0,0 +1,3 @@
+.page-references h2 {
+  color: var(--ls-title-text-color);
+}

src/main/frontend/components/repo.css

@@ -2,5 +2,9 @@
   .sync-content {
     max-height: 80vh;
     overflow: auto;
+
+    p {
+      margin: 0.25rem 0;
+    }
   }
 }

src/main/frontend/components/search.css

@@ -0,0 +1,16 @@
+#search p {
+  margin: 0;
+}
+
+#search-wrapper svg {
+  color: var(--ls-search-icon-color, #9fa6b2);
+}
+
+#search-wrapper:focus-within svg {
+  color: var(--ls-link-text-hover-color, #4b5563);
+}
+
+#search_field {
+  background-color: var(--ls-search-background-color, #fff);
+  color: var(--ls-secondary-text-color, #161e2e);
+}

src/main/frontend/components/sidebar.cljs

@@ -87,7 +87,7 @@
               "-translate-x-full")
      :style {:background-color "#002b36"}}
     (if @open?
-      [:div.absolute.top-0.right-0.-mr-14.p-1
+      [:div.absolute.top-0.right-0.p-1
        [:button#close-left-bar.flex.items-center.justify-center.h-12.w-12.rounded-full.focus:outline-none.focus:bg-gray-600
         {:on-click close-fn}
         [:svg.h-6.w-6.text-white
@@ -237,7 +237,7 @@
   (when-not (state/sub :ui/sidebar-open?)
     ;; TODO: remove with-context usage
     (rum/with-context [[t] i18n/*tongue-context*]
-      [:div.cp__sidebar-help
+      [:div.cp__sidebar-help-btn
        {:title (t :help-shortcut-title)
         :on-click (fn []
                     (state/sidebar-add-block! (state/get-current-repo) "help" :help nil))}

src/main/frontend/components/sidebar.css

@@ -1,3 +1,19 @@
+#app-container {
+  background-color: var(--ls-primary-background-color, #fff);
+  position: relative;
+}
+
+#root {
+  > div {
+    color: var(--ls-primary-text-color, #24292e);
+    font-size: var(--ls-page-text-size);
+  }
+}
+
+#main-content-container {
+  font-size: 1em;
+}
+
 #left-sidebar {
   width: 240px;
   height: 100%;
@@ -20,6 +36,10 @@
   .left-sidebar-inner {
     padding-right: 15px;
   }
+
+  a {
+    color: var(--ls-icon-color);
+  }
 }
 
 .cp__sidebar-layout {
@@ -57,14 +77,24 @@
 }
 
 .cp__sidebar-help {
-  @apply font-bold fixed bottom-4
+  &-docs {
+    @apply ml-2 mt-1;
+
+    td {
+      word-break: break-all;
+    }
+  }
+
+  &-btn {
+    @apply font-bold fixed bottom-4
     rounded-full h-8 w-8 flex items-center justify-center font-bold
     opacity-70 hover:opacity-100;
 
-  user-select: none;
-  cursor: help;
-  right: 24px;
-  background-color: var(--ls-secondary-background-color);
+    user-select: none;
+    cursor: help;
+    right: 24px;
+    background-color: var(--ls-secondary-background-color);
+  }
 }
 
 .cp__right-sidebar {

src/main/frontend/components/svg.cljs

@@ -118,7 +118,7 @@
 (def plus (hero-icon "M12 4v16m8-8H4"))
 
 (def plus-circle
-  [:svg.addButton
+  [:svg.add-button
    {:viewBox "0 0 20 20"}
    [:circle.circle {:fill "#dce0e2", :r "9", :cy "10.5", :cx "10.5"}]
    [:line

src/main/frontend/components/svg.css

@@ -0,0 +1,20 @@
+.add-button-link:hover {
+  svg.add-button > .circle {
+    opacity: 1;
+  }
+}
+
+svg.add-button {
+  display: block;
+  margin-left: 12px;
+  margin-top: 6.5px;
+  width: 20px;
+  height: 20px;
+  opacity: 0.5;
+
+  > .circle {
+    opacity: 0;
+  }
+}
+
+

src/main/frontend/components/theme.css

@@ -23,6 +23,8 @@ html:not(.is-mac)[data-theme=dark] {
 }
 
 html[data-theme=dark] {
+  background-color: var(--ls-primary-background-color);
+
   input {
     color: var(--ls-secondary-text-color);
   }
@@ -38,3 +40,31 @@ html[data-theme=dark] {
     border: none;
   }
 }
+
+html[data-theme=light] {
+  .form-checkbox:focus {
+    border-color: var(--ls-page-checkbox-border-color);
+  }
+
+  .cp__header a {
+    color: var(--ls-primary-text-color);
+  }
+
+  a.right-sidebar-button {
+    color: var(--ls-primary-text-color);
+  }
+
+  a.right-sidebar-button:hover {
+    color: var(--ls-link-text-hover-color);
+  }
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.hide-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none !important; /* Firefox */
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

src/main/frontend/dicts.cljs

@@ -47,7 +47,7 @@ some changes on the right sidebar, those referenced blocks will be changed too!
 ### NOW [#A] A dummy tutorial on \"How to take dummy notes?\"
 ### LATER [#A] Check out this awesome video by [:a {:href \"https://twitter.com/EdTravelling\" :target \"_blank\"} \"@EdTravelling\"], which shows how to install logseq app on your GitHub repo and other cool features like graph view.
 
-[:div.videoWrapper.mb-4
+[:div.video-wrapper.mb-4
         [:iframe
          {:allowFullScreen \"allowfullscreen\"
           :allow

src/main/frontend/extensions/code.css

@@ -1,14 +1,17 @@
 .extensions__code {
-    @apply relative;
-    z-index: 0;
-}
+  @apply relative;
+  z-index: 0;
 
-.extensions__code-lang {
+  &-lang {
     @apply absolute top-0 right-0 p-1 text-sm text-gray-500;
     z-index: 1;
     background: white;
-}
+  }
 
-.extensions__code > .CodeMirror {
+  > .CodeMirror {
     z-index: 0;
-}
+    height: auto;
+    margin: 6px 0 0 0;
+    font-family: Fira Code, Monaco, Menlo, Consolas, 'COURIER NEW', monospace;
+  }
+}

src/main/frontend/extensions/slide.css

@@ -1,17 +1,27 @@
 .reveal {
-  color: var(--ls-primary-text-color)
-}
+  //color: var(--ls-primary-text-color);
+  color: #f7f7f7;
+  background: var(--ls-slide-background-color);
 
-.slide .reveal section img {
-  margin: 1rem auto;
-}
+  pre.code {
+    background: transparent;
+  }
+
+  .hljs {
+    background: none;
+  }
+
+  section img {
+    margin: 1rem auto;
+  }
 
-.reveal .progress span {
-  display: block;
-  height: 100%;
-  width: 100%;
-  background-color: currentColor;
-  transition: transform .8s cubic-bezier(.26, .86, .44, .985);
-  transform-origin: 0 0;
-  transform: scaleX(0);
+  .progress span {
+    display: block;
+    height: 100%;
+    width: 100%;
+    background-color: currentColor;
+    transition: transform 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985);
+    transform-origin: 0 0;
+    transform: scaleX(0);
+  }
 }

src/main/frontend/graph.css

@@ -0,0 +1,9 @@
+#global-graph,
+#page-graph {
+  min-height: 100% !important;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  z-index: 4;
+}

src/main/frontend/ui.css

@@ -20,8 +20,8 @@
 
   &-content {
     @apply inset-0 flex items-end justify-center px-4 py-3
-      pointer-events-none sm:px-6 sm:py-3 sm:items-start
-      sm:justify-end;
+    pointer-events-none sm:px-6 sm:py-3 sm:items-start
+    sm:justify-end;
   }
 
   .notification-area {
@@ -29,3 +29,60 @@
     color: var(--ls-primary-text-color);
   }
 }
+
+.dropdown-wrapper {
+  background-color: var(--ls-primary-background-color, #fff);
+  min-width: 12rem;
+}
+
+.dropdown-caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: middle;
+  content: "";
+  border-top-style: solid;
+  border-top-width: 4px;
+  border-right: 4px solid transparent;
+  border-bottom: 0 solid transparent;
+  border-left: 4px solid transparent;
+}
+
+.form-checkbox {
+  color: var(--ls-page-checkbox-color, #137cbd);
+  background-color: transparent;
+  border-radius: 0;
+  border: 2px solid;
+  border-color: var(--ls-page-checkbox-border-color);
+  appearance: none
+}
+
+.form-checkbox {
+  &:checked {
+    border: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  &:not(:checked):focus {
+    box-shadow: none;
+  }
+}
+
+.form-select {
+  background-color: var(--ls-primary-background-color, transparent);
+  background-repeat: no-repeat;
+  border-width: 1px;
+  border-color: var(--ls-border-color);
+}
+
+.form-input {
+  border-width: 1px;
+  border-color: var(--ls-border-color);
+
+  &:focus {
+    box-shadow: 0 0 0 2px rgba(164, 202, 254, 0.45);
+  }
+}