From 07b4b25fe8b637925d2cfd42336cfef9ff2a9f6e Mon Sep 17 00:00:00 2001
From: weru <fromweru@gmail.com>
Date: Sun, 27 Dec 2020 16:56:12 +0000
Subject: [PATCH] edit styles

---
 assets/sass/_syntax.sass |  203 ++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 161 insertions(+), 42 deletions(-)

diff --git a/assets/sass/_syntax.sass b/assets/sass/_syntax.sass
index 0702583..a76e111 100644
--- a/assets/sass/_syntax.sass
+++ b/assets/sass/_syntax.sass
@@ -1,59 +1,112 @@
-code 
-  min-width: 100%
-  max-width: 100%
+@keyframes pulse
+  0%
+    opacity: 1
+  75%
+    opacity: 0.1
+  100%
+    opacity: 1
+
+code
+  font-size: 15px
+  font-weight: 400
+  overflow-y: hidden
+  display: block
+  font-family: 'Monaco', monospace
+  word-break: break-all
   &.noClass
-    color: orange
-pre
+    --inlineColor: darkgoldenrod
+    color: var(--inlineColor)
+    display: inline
+    line-break: anywhere
+.windows .highlight
+  overflow-x: hidden
+  &:hover
+    overflow-x: auto
+
+.highlight
   display: grid
-  padding: 1rem
+  width: 100%
+  border-radius: 0 0.2rem 0.2rem 0
   overflow-x: auto
-.highlight 
-  display: grid
-  margin: 1.25rem 0
-  box-shadow: 0 0 2.5rem rgba(0,0,0,0.12)
-  border-radius: 4px
-  overflow: hidden
+  position: relative
+  &_wrap
+    display: grid
+    background: var(--code-bg) !important
+    border-radius: 0.5rem
+    position: relative
+    padding: 0 1rem
+    margin: 1.5rem auto 1rem auto
+    & + &
+      margin-top: 2.25rem
+    &:hover > div
+      opacity: 1
+    .lang
+      position: absolute
+      top: 0
+      right: 0
+      text-align: right
+      width: 7.5rem
+      padding: 0.5rem 1rem
+      font-style: italic
+      text-transform: uppercase
+      font-size: 67%
+      opacity: 0.5
+      color: var(--light)
+    &:hover .lang
+      opacity: 0.1
+  & &
+    margin: 0
+  pre
+    color: var(--light) !important
+    border-radius: 4px
+    font-family: 'Monaco', monospace
+    padding-top: 1.5rem
+    padding-bottom: 2rem
+
   table
-    margin: 0
-    border-collapse: collapse
-    background-color: var(--overlay)
-  & & 
-    margin: 0
+    display: grid
+    max-width: 100%
+    margin-bottom: 0
+    background: transparent
+  td, th
+    padding: 0
 
-.lntd
-  &:first-child
-    width: 2.75rem
-    background-color: var(--theme)
-    color: var(--light)
-    pre
-      padding: 0
-    code
-      display: flex
-      flex-flow: column
-      align-items: center
-  &:last-child
-    padding-left: 0
+  .lntd
+    width: 100%
+    border: none
+    &:first-child
+      &, pre
+        width: 2.5rem !important
+        padding-left: 0
+        padding-right: 0
+        color: rgba(255,255,255,0.5)
+        user-select: none
 
+      pre
+        width: 100%
+        display: flex
+        align-items: center
+        flex-direction: column
 
 .err
   color: #a61717
   background-color: #e3d2d2
-
 .hl
-  display: block
   width: 100%
-  background-color: #ffffcc
+  background-color: rgba(255,255,255,0.25)
+.ln, .lnt
+  margin-right: 0.75rem
+  padding: 0
+  transition: opacity 0.3s var(--ease)
+  &, span
+    color: hsla(0,0%,100%,0.5)
+    user-select: none
 
-.ln
-  margin-right: 0.4rem
-  padding: 0 0.4em 0 0.4rem
-  color: #666
-
-.k, .kc, .kd, .kn, .kp, .kr, .kt, .nt
+.k, .kc, .kd, .kn, .kp, .kr, .kt, .nt  
   color: #6ab825
   font-weight: 500
 
-.kn , .kp
+.kn, .kp
   font-weight: 400
 
 .nb, .no, .nv
@@ -62,7 +115,7 @@
 .nc, .nf, .nn
   color: #447fcf
 
-.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .s
+.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss
   color: #ed9d13
 
 .m, .mb, .mf, .mh, .mi, .il, .mo
@@ -109,6 +162,72 @@
 
 .gt
   color: #d22323
-
 .w
   color: #666
+
+.hljs
+  &-string
+    color: #6ab825
+  &-attr
+    color: #ed9d13
+  .p &-attr
+    color: var(--light)
+
+.pre
+  &_wrap
+    white-space: pre-wrap
+    white-space: -moz-pre-wrap
+    white-space: -pre-wrap
+    white-space: -o-pre-wrap
+    word-wrap: break-word
+
+  &_nolines.ln
+    display: none
+
+// crayon-like widget styles
+.panel
+  &_box
+    display: inline-flex
+    // grid-template-columns: repeat(3, 1fr)
+    // max-width: 10rem
+    perspective: 300px
+    grid-gap: 0.5rem
+    transition: opacity 0.3s var(--easing)
+    background: var(--code-bg)
+    padding: 0.5rem 1.5rem
+    border-radius: 2rem
+    align-items: center
+    position: absolute
+    right: 0rem
+    top: -2.1rem
+    opacity: 0
+  &_icon
+    display: inline-flex
+    align-items: center
+    justify-content: center
+    cursor: pointer
+    // transition: opacity 0.3s var(--easing)
+    padding: 0.1rem
+    transform-origin: 50% 50%
+    // opacity: 0.7
+    &.active
+      animation: pulse 0.1s linear
+    svg
+      fill: var(--light)
+      width: 1.5rem
+      height: 1.5rem
+  &_hide
+    // hide icon if not needed
+    display: none
+  &_from
+    position: absolute
+    color: var(--theme)
+    bottom: 0
+    font-size: 1.5rem
+    font-weight: 500
+    padding: 0.5rem 0
+    cursor: pointer
+    letter-spacing: 0.1px
+    z-index: 19
+  &_expanded &_from
+    display: none

--
Gitblit v1.10.0