feat(light-theme): add nested embed colors

2026-06-01 19:01:22 +00:00 · 2020-12-07 17:57:54 -08:00
parent 7795a51244
commit 728f04a16d
4 changed files with 190 additions and 108 deletions
--- a/src/main/frontend/components/block.cljs
+++ b/src/main/frontend/components/block.cljs
@@ -282,6 +282,10 @@
  [html-export? s config label]
  (let [contents-page? (= "contents" (string/lower-case (str (:id config))))]
    [:span.page-reference
+     (when (and (not html-export?)
+                (not (= (:id config) "contents"))
+                (not (= (:id config) "Contents")))
+       [:span.text-gray-500 "[["])
     (if (string/ends-with? s ".excalidraw")
       [:a.page-ref
        {:href (rfe/href :draw nil {:file (string/replace s (str config/default-draw-directory "/") "")})
@@ -292,7 +296,11 @@
         (string/capitalize (draw/get-file-title s))]]
       (page-cp (assoc config
                       :label (mldoc/plain->text label)
-                       :contents-page? contents-page?) {:page/name s}))]))
+                       :contents-page? contents-page?) {:page/name s}))
+     (when (and (not html-export?)
+                (not (= (:id config) "contents"))
+                (not (= (:id config) "Contents")))
+       [:span.text-gray-500 "]]"])]))

 (defn- latex-environment-content
  [name option content]
@@ -308,7 +316,7 @@
 (rum/defc block-embed < rum/reactive db-mixins/query
  [config id]
  (let [blocks (db/get-block-and-children (state/get-current-repo) id)]
-    [:div.embed-block.bg-base-2 {:style {:z-index 2}}
+    [:div.embed.embed-block.bg-base-2 {:style {:z-index 2}}
     [:div.px-3.pt-1.pb-2
      (blocks-container blocks (assoc config
                                      :embed? true
@@ -319,9 +327,9 @@
  (let [page-name (string/lower-case page-name)
        page-original-name (:page/original-name (db/entity [:page/name page-name]))
        current-page (state/get-current-page)]
-    [:div.embed-page.py-2.my-2.px-3.bg-base-2
+    [:div.embed.embed-page.py-2.my-2.px-3.bg-base-2
     [:div.flex.items-center.py-1
-      [:div.mr-4 svg/page]
+      [:div.mr-2 svg/page]
      (page-cp config {:page/name page-name})]
     (when (and
            (not= (string/lower-case (or current-page ""))
@@ -359,6 +367,7 @@
                     (db/pull-block (uuid id)))]
      (if block
        [:span
+         [:span.text-gray-500 "(("]
         [:a {:href (rfe/href :page {:name id})
              :on-click (fn [e]
                          (util/stop e)
@@ -371,7 +380,8 @@

          (->elem
           :span.block-ref
-           (map-inline config (:block/title block)))]]
+           (map-inline config (:block/title block)))]
+         [:span.text-gray-500 "))"]]
        [:span.warning.mr-1 {:title "Block ref invalid"}
         (util/format "((%s))" id)]))))

@@ -936,8 +946,9 @@
          (when (and marker
                     (not (string/blank? marker))
                     (not= "nil" marker))
-            {:class (str (string/lower-case marker) " "
-                         "flex flex-row items-center")})
+            {:class (str (string/lower-case marker)
+                         ; " flex flex-row items-center"
+                         )})
          (when bg-color
            {:style {:background-color bg-color
                     :padding-left 6
@@ -1314,7 +1325,7 @@
                                 (when-let [parent (gdom/getElement block-id)]
                                   (when-let [node (.querySelector parent ".bullet-container")]
                                     (d/add-class! node "hide-inner-bullet")))))}]
-    [:div.ls-block.flex.flex-col.pt-1
+    [:div.ls-block.flex.flex-col.mt-1
     (cond->
      {:id block-id
       :style {:position "relative"}
--- a/src/main/frontend/components/block.css
+++ b/src/main/frontend/components/block.css
@@ -12,4 +12,142 @@

 .block-content img {
  width: 100%;
+}
+
+/* copied from https://github.com/drdogbot7/tailwindcss-responsive-embed */
+.embed-responsive {
+  position: relative;
+  display: block;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+
+  .embed-responsive-item,
+  iframe,
+  embed,
+  object,
+  video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    border: 0;
+  }
+
+}
+
+.embed {
+  border-radius: var(--border-radius-low);
+}
+
+.embed-page, .embed-block {
+  
+}
+
+.dark-theme {
+  --embed-level-1: var(--ls-secondary-background-color); 
+  --embed-level-2: var(--ls-tertiary-background-color);
+  --embed-level-3: var(--ls-quaternary-background-color);
+  --embed-level-4: #195D6C;
+  --embed-level-5: #266C7D;
+  --embed-level-6: #3A7E8E;
+}
+
+.white-theme {
+  --embed-level-1: var(--ls-secondary-background-color); 
+  --embed-level-2: var(--ls-tertiary-background-color);
+  --embed-level-3: var(--ls-quaternary-background-color);
+  --embed-level-4: #b7d7c9;
+  --embed-level-5: #a5cdbc;
+  --embed-level-6: #92c2af;
+}
+
+.embed {
+  background-color: var(--embed-level-1);
+}
+.embed .embed {
+  background-color: var(--embed-level-2);
+}
+.embed .embed .embed {
+  background-color: var(--embed-level-3);
+}
+.embed .embed .embed .embed {
+  background-color: var(--embed-level-4);
+}
+.embed .embed .embed .embed .embed {
+  background-color: var(--embed-level-5);
+}
+.embed .embed .embed .embed .embed .embed{
+  background-color: var(--embed-level-3);
+}
+.embed .embed .embed .embed .embed .embed .embed {
+  background-color: var(--embed-level-4);
+}
+.embed .embed .embed .embed .embed .embed .embed .embed {
+  background-color: var(--embed-level-5);
+}
+.embed .embed .embed .embed .embed .embed .embed .embed .embed {
+  background-color: var(--embed-level-3);
+}
+.embed .embed .embed .embed .embed .embed .embed .embed .embed .embed {
+  background-color: var(--embed-level-4);
+}
+.embed .embed .embed .embed .embed .embed .embed .embed .embed .embed .embed {
+  background-color: var(--embed-level-5);
+}
+.embed .embed .embed .embed .embed .embed .embed .embed .embed .embed .embed .embed {
+  background-color: var(--embed-level-3);
+}
+
+.ls-block {
+  min-height: 24px;
+}
+
+.ls-block, .foldable-title {
+  max-width: 700px;
+}
+
+.ls-block, .editor-wrapper {
+margin-right: auto;
+margin-left: auto;
+}
+
+.ls-block img {
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
+}
+
+
+.ls-block h1 {
+  font-size: 2em;
+  margin: .67em 0
+}
+
+.ls-block h2 {
+  font-size: 1.5em;
+  margin: .75em 0
+}
+
+.ls-block h3 {
+  font-size: 1.17em;
+  margin: .83em 0
+}
+
+.ls-block h4 {
+  margin: 1.12em 0
+}
+
+.ls-block h5 {
+  font-size: .83em;
+  margin: 1.5em 0
+}
+
+.ls-block h6 {
+  font-size: .75em;
+  margin: 1.67em 0
+}
+
+.ls-block h1, .ls-block h2, .ls-block h3, .ls-block h4, .ls-block h5, .ls-block h6 {
+  font-weight: 600
 }
--- a/src/main/frontend/extensions/slide.css
+++ b/src/main/frontend/extensions/slide.css
@@ -0,0 +1,17 @@
+.reveal {
+  color: var(--ls-primary-text-color)
+}
+
+.slide .reveal 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);
+}