quasar-ui-danx 0.4.95 → 0.5.0

package/src/styles/themes/danx/markdown.scss

@@ -0,0 +1,241 @@
+// Markdown Content Theme
+// Styles for rendered markdown content
+
+.dx-markdown-content {
+  // Base styling
+  line-height: 1.6;
+  color: inherit;
+
+  // Headings
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    font-weight: 600;
+    line-height: 1.25;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  h1 { font-size: 2em; }
+  h2 { font-size: 1.5em; }
+  h3 { font-size: 1.25em; }
+  h4 { font-size: 1em; }
+  h5 { font-size: 0.875em; }
+  h6 { font-size: 0.85em; }
+
+  // Paragraphs
+  p {
+    margin: 1em 0;
+
+    &:first-child { margin-top: 0; }
+    &:last-child { margin-bottom: 0; }
+  }
+
+  // Inline code
+  code {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+    font-size: 0.9em;
+    font-family: 'Fira Code', 'Monaco', monospace;
+  }
+
+  // Code blocks
+  pre {
+    background: rgba(0, 0, 0, 0.3);
+    padding: 1em;
+    border-radius: 6px;
+    overflow-x: auto;
+    margin: 1em 0;
+
+    code {
+      background: transparent;
+      padding: 0;
+      font-size: 0.875em;
+    }
+  }
+
+  // Blockquotes
+  blockquote {
+    border-left: 4px solid rgba(255, 255, 255, 0.3);
+    margin: 1em 0;
+    padding: 0.5em 1em;
+    color: rgba(255, 255, 255, 0.7);
+
+    p:first-child { margin-top: 0; }
+    p:last-child { margin-bottom: 0; }
+  }
+
+  // Lists
+  ul, ol {
+    margin: 1em 0;
+    padding-left: 2em;
+  }
+
+  li {
+    margin: 0.25em 0;
+  }
+
+  ul {
+    list-style-type: disc;
+
+    ul {
+      list-style-type: circle;
+
+      ul {
+        list-style-type: square;
+      }
+    }
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  // Task lists
+  .task-list {
+    list-style: none;
+    padding-left: 0;
+
+    .task-list-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5em;
+      margin: 0.25em 0;
+
+      input[type="checkbox"] {
+        margin-top: 0.3em;
+        cursor: default;
+      }
+    }
+  }
+
+  // Links
+  a {
+    color: #60a5fa; // blue-400
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  // Images
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  // Horizontal rules
+  hr {
+    border: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    margin: 2em 0;
+  }
+
+  // Bold and italic
+  strong { font-weight: 600; }
+  em { font-style: italic; }
+
+  // Strikethrough
+  del {
+    text-decoration: line-through;
+    opacity: 0.7;
+  }
+
+  // Highlight
+  mark {
+    background: rgba(250, 204, 21, 0.4); // yellow-400 with opacity
+    padding: 0.1em 0.2em;
+    border-radius: 2px;
+  }
+
+  // Subscript/Superscript
+  sub, sup {
+    font-size: 0.75em;
+  }
+
+  sub {
+    vertical-align: sub;
+  }
+
+  sup {
+    vertical-align: super;
+  }
+
+  // Tables
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 1em 0;
+
+    th, td {
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      padding: 0.5em 1em;
+      text-align: left;
+    }
+
+    th {
+      background: rgba(255, 255, 255, 0.1);
+      font-weight: 600;
+    }
+
+    tr:nth-child(even) {
+      background: rgba(255, 255, 255, 0.05);
+    }
+  }
+
+  // Definition lists
+  dl {
+    margin: 1em 0;
+  }
+
+  dt {
+    font-weight: 600;
+    margin-top: 1em;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  dd {
+    margin-left: 2em;
+    margin-top: 0.25em;
+  }
+
+  // Footnotes
+  .footnote-ref {
+    font-size: 0.75em;
+    vertical-align: super;
+    line-height: 0;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  .footnotes {
+    margin-top: 2em;
+    font-size: 0.875em;
+
+    hr {
+      margin-bottom: 1em;
+    }
+
+    .footnote-list {
+      padding-left: 1.5em;
+    }
+
+    .footnote-item {
+      margin: 0.5em 0;
+    }
+
+    .footnote-backref {
+      margin-left: 0.5em;
+      text-decoration: none;
+    }
+  }
+}

package/src/styles/themes/danx/scrollbar.scss

@@ -0,0 +1,125 @@
+// Custom Scrollbar Styles
+// Thin, overlay scrollbar that fades based on hover state
+// Usage: Apply .dx-scrollbar class to any scrollable container
+
+// Scrollbar dimensions
+$scrollbar-width: 4px;
+$scrollbar-width-hover: 8px;
+$scrollbar-track-color: transparent;
+$scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
+$scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.9);
+$scrollbar-transition: all 0.3s ease;
+
+// Mixin for scrollbar styles (reusable)
+@mixin dx-scrollbar-base {
+  // Firefox
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color 0.3s ease;
+
+  // Webkit (Chrome, Safari, Edge)
+  &::-webkit-scrollbar {
+    width: $scrollbar-width;
+    height: $scrollbar-width;
+    transition: $scrollbar-transition;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $scrollbar-track-color;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: $scrollbar-width-hover;
+    transition: $scrollbar-transition;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+
+// Main scrollbar class (light - for dark backgrounds)
+.dx-scrollbar {
+  @include dx-scrollbar-base;
+
+  // Container hovered or focused - show scrollbar at 0.2 opacity
+  &:hover,
+  &:focus,
+  &:focus-within {
+    scrollbar-color: $scrollbar-thumb-color transparent;
+
+    &::-webkit-scrollbar-thumb {
+      background: $scrollbar-thumb-color;
+    }
+  }
+
+  // Scrollbar directly hovered - full opacity and wider
+  &:hover::-webkit-scrollbar,
+  &:focus::-webkit-scrollbar,
+  &:focus-within::-webkit-scrollbar {
+    width: $scrollbar-width;
+    height: $scrollbar-width;
+  }
+
+  &:hover::-webkit-scrollbar-thumb:hover {
+    background: $scrollbar-thumb-hover-color;
+    width: $scrollbar-width-hover;
+  }
+
+  // Make scrollbar wider on hover
+  &::-webkit-scrollbar:hover {
+    width: $scrollbar-width-hover;
+    height: $scrollbar-width-hover;
+  }
+
+  // Active/dragging state
+  &::-webkit-scrollbar-thumb:active {
+    background: $scrollbar-thumb-hover-color;
+  }
+}
+
+// Dark variant (for light backgrounds)
+.dx-scrollbar-dark {
+  @include dx-scrollbar-base;
+
+  &:hover,
+  &:focus,
+  &:focus-within {
+    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  &:hover::-webkit-scrollbar,
+  &:focus::-webkit-scrollbar,
+  &:focus-within::-webkit-scrollbar {
+    width: $scrollbar-width;
+    height: $scrollbar-width;
+  }
+
+  &:hover::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.7);
+  }
+
+  &::-webkit-scrollbar:hover {
+    width: $scrollbar-width-hover;
+    height: $scrollbar-width-hover;
+  }
+
+  &::-webkit-scrollbar-thumb:active {
+    background: rgba(0, 0, 0, 0.7);
+  }
+}
+
+// Utility to hide scrollbar completely but keep scrolling
+.dx-scrollbar-hidden {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}