diff --git a/public/assets/css/theme-neogothic.css b/public/assets/css/theme-neogothic.css index b88311c..3903425 100644 --- a/public/assets/css/theme-neogothic.css +++ b/public/assets/css/theme-neogothic.css @@ -1,198 +1,748 @@ -@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;1,400&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&family=Onest:wght@400;500;600&family=Mona+Sans:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap'); gitea-theme-meta-info { --theme-display-name: "neogothic"; + --theme-color-scheme: "dark"; } :root { --is-dark-theme: true; --color-primary: #8A9299; + --color-primary-contrast: #0A0B0D; --color-primary-dark-1: #A3ABB2; --color-primary-dark-2: #BCC3C9; --color-primary-dark-3: #D5DADF; - --color-primary-dark-4: #EEF0F2; + --color-primary-dark-4: #E6E9EC; + --color-primary-dark-5: #EEF0F2; + --color-primary-dark-6: #F5F6F7; + --color-primary-dark-7: #FBFBFC; --color-primary-light-1: #6B757D; --color-primary-light-2: #4E5962; --color-primary-light-3: #3A434A; --color-primary-light-4: #272E33; - --color-primary-alpha-10: rgba(138, 146, 153, 0.10); - --color-primary-alpha-20: rgba(138, 146, 153, 0.20); - --color-primary-alpha-30: rgba(138, 146, 153, 0.30); - --color-primary-alpha-40: rgba(138, 146, 153, 0.40); - --color-primary-alpha-50: rgba(138, 146, 153, 0.50); - --color-primary-alpha-60: rgba(138, 146, 153, 0.60); - - --color-accent: #A89064; - --color-accent-alpha-20: rgba(168, 144, 100, 0.20); - --color-accent-alpha-40: rgba(168, 144, 100, 0.40); - + --color-primary-light-5: #1C2125; + --color-primary-light-6: #121518; + --color-primary-light-7: #0B0D0F; + --color-primary-alpha-10: #8A929919; + --color-primary-alpha-20: #8A929933; + --color-primary-alpha-30: #8A92994b; + --color-primary-alpha-40: #8A929966; + --color-primary-alpha-50: #8A929980; + --color-primary-alpha-60: #8A929999; + --color-primary-alpha-70: #8A9299b3; + --color-primary-alpha-80: #8A9299cc; + --color-primary-alpha-90: #8A9299e1; + --color-primary-hover: var(--color-primary-dark-1); + --color-primary-active: var(--color-primary-dark-2); + --color-secondary: #1E2227; + --color-secondary-dark-1: #262B30; + --color-secondary-dark-2: #2F353B; + --color-secondary-dark-3: #3A4148; + --color-secondary-dark-4: #464E56; + --color-secondary-dark-5: #535B64; + --color-secondary-dark-6: #616971; + --color-secondary-dark-7: #6F777F; + --color-secondary-dark-8: #7E858C; + --color-secondary-dark-9: #8C9399; + --color-secondary-dark-10: #9AA0A6; + --color-secondary-dark-11: #A9AEB3; + --color-secondary-dark-12: #B8BCC0; + --color-secondary-dark-13: #C6C9CD; + --color-secondary-light-1: #181B1F; + --color-secondary-light-2: #131619; + --color-secondary-light-3: #0F1114; + --color-secondary-light-4: #0B0D0F; + --color-secondary-alpha-10: #1E222719; + --color-secondary-alpha-20: #1E222733; + --color-secondary-alpha-30: #1E22274b; + --color-secondary-alpha-40: #1E222766; + --color-secondary-alpha-50: #1E222780; + --color-secondary-alpha-60: #1E222799; + --color-secondary-alpha-70: #1E2227b3; + --color-secondary-alpha-80: #1E2227cc; + --color-secondary-alpha-90: #1E2227e1; + --color-secondary-button: var(--color-secondary-dark-4); + --color-secondary-hover: var(--color-secondary-dark-3); + --color-secondary-active: var(--color-secondary-dark-2); + --color-console-fg: #E2E4E6; + --color-console-fg-subtle: #9BA0A5; + --color-console-bg: #0C0E10; + --color-console-border: #1E2227; + --color-console-hover-bg: #14171B; + --color-console-active-bg: #1A1E22; + --color-console-menu-bg: #0F1114; + --color-console-menu-border: #262B30; + --color-console-link: #9BA0A5; + --color-red: #cc4848; + --color-orange: #cc580c; + --color-yellow: #cc9903; + --color-olive: #91a313; + --color-green: #87ab63; + --color-teal: #00918a; + --color-blue: #3a8ac6; + --color-violet: #906ae1; + --color-purple: #b259d0; + --color-pink: #d22e8b; + --color-brown: #a47252; + --color-black: #16191C; + --color-red-light: #d15a5a; + --color-orange-light: #f6a066; + --color-yellow-light: #eaaf03; + --color-olive-light: #abc016; + --color-green-light: #93b373; + --color-teal-light: #00b6ad; + --color-blue-light: #4e96cc; + --color-violet-light: #9b79e4; + --color-purple-light: #ba6ad5; + --color-pink-light: #d74397; + --color-brown-light: #b08061; + --color-black-light: #262B30; + --color-red-dark-1: #c23636; + --color-orange-dark-1: #f38236; + --color-yellow-dark-1: #b88a03; + --color-olive-dark-1: #839311; + --color-green-dark-1: #7a9e55; + --color-teal-dark-1: #00837c; + --color-blue-dark-1: #347cb3; + --color-violet-dark-1: #7b4edb; + --color-purple-dark-1: #a742c9; + --color-pink-dark-1: #be297d; + --color-brown-dark-1: #94674a; + --color-black-dark-1: #121518; + --color-red-dark-2: #ad3030; + --color-orange-dark-2: #f16e17; + --color-yellow-dark-2: #a37a02; + --color-olive-dark-2: #74820f; + --color-green-dark-2: #6c8c4c; + --color-teal-dark-2: #00746e; + --color-blue-dark-2: #2e6e9f; + --color-violet-dark-2: #6733d6; + --color-purple-dark-2: #9834b9; + --color-pink-dark-2: #a9246f; + --color-brown-dark-2: #835b42; + --color-black-dark-2: #0E1013; + --color-ansi-black: #16191C; + --color-ansi-red: #cc4848; + --color-ansi-green: #87ab63; + --color-ansi-yellow: #cc9903; + --color-ansi-blue: #3a8ac6; + --color-ansi-magenta: #d22e8b; + --color-ansi-cyan: #00918a; + --color-ansi-white: var(--color-console-fg-subtle); + --color-ansi-bright-black: #464E56; + --color-ansi-bright-red: #d15a5a; + --color-ansi-bright-green: #93b373; + --color-ansi-bright-yellow: #eaaf03; + --color-ansi-bright-blue: #4e96cc; + --color-ansi-bright-magenta: #d74397; + --color-ansi-bright-cyan: #00b6ad; + --color-ansi-bright-white: var(--color-console-fg); + --color-series-16-0: #7db233; + --color-series-16-1: #499a37; + --color-series-16-2: #ce4751; + --color-series-16-3: #8f9121; + --color-series-16-4: #ac32a6; + --color-series-16-5: #7445e9; + --color-series-16-6: #c67d28; + --color-series-16-7: #4db392; + --color-series-16-8: #aa4d30; + --color-series-16-9: #2a6f84; + --color-series-16-10: #c45327; + --color-series-16-11: #3d965c; + --color-series-16-12: #792a93; + --color-series-16-13: #439d73; + --color-series-16-14: #103aad; + --color-series-16-15: #982e85; + --color-grey: #2F353B; + --color-grey-light: #7E858C; + --color-gold: #A89064; + --color-white: #ffffff; + --color-diff-added-fg: #7CB05C; + --color-diff-added-linenum-bg: #1C2A1C; + --color-diff-added-row-bg: #141C14; + --color-diff-added-row-border: #26382A; + --color-diff-added-word-bg: #2E4A2E; + --color-diff-moved-row-bg: #5F5A2A; + --color-diff-moved-row-border: #8E8A55; + --color-diff-removed-fg: #E07070; + --color-diff-removed-linenum-bg: #2E1A1A; + --color-diff-removed-row-bg: #1E1414; + --color-diff-removed-row-border: #3E2626; + --color-diff-removed-word-bg: #4E2A2A; + --color-diff-inactive: #141618; + --color-error-border: #5A2B2B; + --color-error-bg: #1F1315; + --color-error-bg-active: #2C1A1C; + --color-error-bg-hover: #261618; + --color-error-text: #E07070; + --color-success-border: #2A4A2A; + --color-success-bg: #131D13; + --color-success-text: #7CB05C; + --color-warning-border: #5A4A2A; + --color-warning-bg: #1F1A10; + --color-warning-text: #C4AB7A; + --color-info-border: #2B3F5A; + --color-info-bg: #121A24; + --color-info-text: #7AA8D6; + --color-priority-border: #4A3A7A; + --color-priority-bg: #1A1524; + --color-priority-text: #A895E0; + --color-red-badge: #db2828; + --color-red-badge-bg: #db28281a; + --color-red-badge-hover-bg: #db28284d; + --color-green-badge: #21ba45; + --color-green-badge-bg: #21ba451a; + --color-green-badge-hover-bg: #21ba454d; + --color-yellow-badge: #fbbd08; + --color-yellow-badge-bg: #fbbd081a; + --color-yellow-badge-hover-bg: #fbbd084d; + --color-orange-badge: #f2711c; + --color-orange-badge-bg: #f2711c1a; + --color-orange-badge-hover-bg: #f2711c4d; + --color-git: #f05133; + --color-logo: #609926; --color-body: #0A0B0D; - --color-box-body: rgba(14, 16, 19, 0.88); - --color-box-header: rgba(10, 12, 14, 0.94); - --color-footer: #08090B; - --color-navbar: rgba(8, 9, 11, 0.97); - --color-menu: #0D0E11; - --color-card: rgba(14, 16, 19, 0.75); - + --color-box-header: #0E1013; + --color-box-body: #0C0E10; + --color-box-body-highlight: #14171B; + --color-text-dark: #F2F3F4; --color-text: #E2E4E6; - --color-text-light: #9BA0A5; - --color-text-light-2: #6D7378; - --color-text-light-3: #484D52; - --color-link: #A3ABB2; - --color-link-hover: #D5DADF; - - --color-border: #1E2227; - --color-border-secondary: #151719; - --color-secondary: #151719; - --color-secondary-alpha-6: rgba(21, 23, 25, 0.6); - + --color-text-light: #B4B9BE; + --color-text-light-1: #9BA0A5; + --color-text-light-2: #7E858B; + --color-text-light-3: #666D73; + --color-footer: var(--color-nav-bg); + --color-timeline: #1E2227; + --color-input-text: var(--color-text-dark); --color-input-background: #0C0D10; - --color-input-text: #E2E4E6; - --color-input-border: #1E2227; - --color-input-border-hover: #8A9299; - + --color-input-toggle-background: #262B30; + --color-input-border: #262B30; + --color-light: #ffffff0a; + --color-light-border: #8A929933; + --color-hover: #8A929914; + --color-hover-opaque: #15181B; + --color-active: #8A929926; + --color-menu: #0D0F12; + --color-card: #0D0F12; + --color-markup-table-row: #8A92990f; + --color-markup-code-block: #8A929914; + --color-markup-code-inline: #8A929926; + --color-button: #101215; --color-code-bg: #1e1f22; + --color-shadow: #00000080; + --color-shadow-opaque: #000000; + --color-secondary-bg: #16191C; + --color-expand-button: #262B30; + --color-placeholder-text: var(--color-text-light-3); + --color-editor-line-highlight: var(--color-primary-alpha-20); + --color-editor-selection: var(--color-primary-alpha-40); + --color-project-column-bg: var(--color-secondary-light-2); + --color-caret: #BFD0E0; + --color-reaction-bg: #8A929914; + --color-reaction-hover-bg: var(--color-primary-light-4); + --color-reaction-active-bg: var(--color-primary-light-5); + --color-tooltip-text: #F2F3F4; + --color-tooltip-bg: #0D0F12f5; + --color-nav-bg: #08090B; + --color-nav-hover-bg: #14171B; + --color-nav-text: var(--color-text); + --color-secondary-nav-bg: #0B0D0F; + --color-label-text: var(--color-text); + --color-label-bg: #8A92994b; + --color-label-hover-bg: #8A9299a0; + --color-label-active-bg: #8A9299; + --color-accent: #BFD0E0; + --color-small-accent: var(--color-primary-light-5); + --color-highlight-fg: #BFD0E0; + --color-highlight-bg: #1F2A35; + --color-overlay-backdrop: #000000c0; + --color-danger: var(--color-red); + --color-transparency-grid-light: #1a1a1a; + --color-transparency-grid-dark: #0f0f0f; + --color-workflow-edge-hover: #6F777F; + --color-syntax-keyword: #cf8e6d; + --color-syntax-bool: #cf8e6d; + --color-syntax-control: #cf8e6d; + --color-syntax-name: #bcbec4; + --color-syntax-type: #bcbec4; + --color-syntax-number: #2aacb8; + --color-syntax-operator: #bcbec4; + --color-syntax-regexp: #6aab73; + --color-syntax-string: #6aab73; + --color-syntax-comment: #7a7e85; + --color-syntax-invalid: #f75464; + --color-syntax-link: var(--color-primary); + --color-syntax-tag: #d5b778; + --color-syntax-attribute: #c77dbb; + --color-syntax-property: #c77dbb; + --color-syntax-variable: #bcbec4; + --color-syntax-string-special: #6aab73; + --color-syntax-escape: #cf8e6d; + --color-syntax-entity: #56a8f5; + --color-syntax-preproc: #b3ae60; + --color-syntax-preproc-file: #6aab73; + --color-syntax-decorator: #b3ae60; + --color-syntax-namespace: #bcbec4; + --color-syntax-name-pseudo: #c77dbb; + --color-syntax-comment-special: #5f826b; + --color-syntax-text: #bcbec4; + --color-syntax-text-alt: #a1a3a8; + --color-syntax-punctuation: #bcbec4; + --color-syntax-whitespace: #4b5059; + --color-syntax-diff-fg: #ffffff; + --color-syntax-deleted-bg: #4E2A2A; + --color-syntax-inserted-bg: #2E4A2E; + --color-syntax-emph: #d5b778; + --color-syntax-strong: #cf8e6d; + --color-syntax-heading: #cf8e6d; + --color-syntax-subheading: #6aab73; + --color-syntax-output: #7a7e85; + --color-syntax-prompt: #cf8e6d; + --color-syntax-traceback: #f75464; + --color-syntax-matching-bracket-bg: #2aacb848; + --color-syntax-nonmatching-bracket-bg: #f7546448; + --color-code-sidebar-bg: #2b2d30; --color-editor-line-number: #4b5059; + --color-border: var(--color-secondary); + --color-border-secondary: #151719; + --color-moon: #BFD0E0; + --color-moon-alpha-15: rgba(191, 208, 224, 0.15); + --color-moon-alpha-30: rgba(191, 208, 224, 0.30); + --color-moon-alpha-50: rgba(191, 208, 224, 0.50); + --glass-bg: rgba(13, 15, 18, 0.62); + --glass-bg-strong: rgba(10, 12, 14, 0.96); + --glass-border: rgba(255, 255, 255, 0.07); + --glass-border-strong: rgba(255, 255, 255, 0.13); + --glass-highlight: rgba(255, 255, 255, 0.10); + --glass-blur: 18px; + --marble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1600'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0032 0.005' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='luminanceToAlpha'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 0 0 0.3 1 0.3 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='0 0 0 0 0.70 0 0 0 0 0.76 0 0 0 0 0.84 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); - --fonts-proportional: 'JetBrains Mono', monospace; - --fonts-monospace: 'JetBrains Mono', monospace; - --fonts-regular: 'JetBrains Mono', monospace; - --font-family-header: 'Cinzel', serif; + --fonts-proportional: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; + --fonts-monospace: 'JetBrains Mono', ui-monospace, monospace; + --fonts-regular: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; + --font-family-header: 'Tenor Sans', 'Optima', 'Candara', sans-serif; + --font-family-prose: 'Mona Sans', 'Onest', system-ui, -apple-system, sans-serif; + + --border-radius: 0; + --border-radius-medium: 0; + --border-radius-full: 0; --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1); - --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); + + accent-color: var(--color-accent); + color-scheme: dark; +} + +.emoji[aria-label="check mark"], +.emoji[aria-label="currency exchange"], +.emoji[aria-label="TOP arrow"], +.emoji[aria-label="END arrow"], +.emoji[aria-label="ON! arrow"], +.emoji[aria-label="SOON arrow"], +.emoji[aria-label="heavy dollar sign"], +.emoji[aria-label="copyright"], +.emoji[aria-label="registered"], +.emoji[aria-label="trade mark"], +.emoji[aria-label="multiply"], +.emoji[aria-label="plus"], +.emoji[aria-label="minus"], +.emoji[aria-label="divide"], +.emoji[aria-label="curly loop"], +.emoji[aria-label="double curly loop"], +.emoji[aria-label="wavy dash"], +.emoji[aria-label="paw prints"], +.emoji[aria-label="musical note"], +.emoji[aria-label="musical notes"] { + filter: invert(100%) hue-rotate(180deg); } body { background-color: var(--color-body); background-image: - radial-gradient(ellipse 80% 50% at 50% -20%, rgba(138, 146, 153, 0.03) 0%, transparent 50%), - linear-gradient(180deg, var(--color-body) 0%, #080909 100%); + radial-gradient(ellipse 70% 45% at 50% -10%, rgba(191, 208, 224, 0.06) 0%, transparent 60%), + linear-gradient(rgba(10, 11, 13, 0.99), rgba(10, 11, 13, 0.99)), + var(--marble); + background-size: auto, auto, 1600px 1600px; background-attachment: fixed; color: var(--color-text); font-family: var(--fonts-regular); font-weight: 400; - font-size: 13px; - letter-spacing: 0.01em; + font-size: 14px; + line-height: 1.5; + letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -h1, h2, h3, h4, h5, h6, .ui.header { +*, +*::before, +*::after { + border-radius: 0 !important; +} + +h1, h2, h3, h4, h5, h6, +.ui.header { font-family: var(--font-family-header) !important; - font-weight: 500; - letter-spacing: 0.12em; - text-transform: uppercase; + font-weight: 400 !important; + letter-spacing: 0.03em; + text-transform: none; + color: var(--color-text-dark); +} + +h1, .ui.header.large { font-size: 2em; } +h2 { font-size: 1.55em; } +h3 { font-size: 1.25em; } +h4, h5, h6 { font-size: 1.1em; } + +h1, +h2, +.page-content.home .hero .ui.header.title, +.repo-header .flex-text-block.tw-text-18 { + text-shadow: 0 0 24px var(--color-moon-alpha-15); +} + +.ui.attached.header, +.ui.header.segment, +.ui.top.attached.header { + font-size: 18px; + padding-top: 11px; + padding-bottom: 11px; +} + +.markup { + font-family: var(--font-family-prose); + font-size: 15px; + line-height: 1.6; color: var(--color-text); } -h1, .ui.header.large { font-size: 1.8em; } -h2 { font-size: 1.4em; } -h3 { font-size: 1.15em; } +.markup h1, +.markup h2, +.markup h3, +.markup h4, +.markup h5, +.markup h6 { + font-family: var(--font-family-header) !important; + font-weight: 400 !important; + letter-spacing: 0.03em; + margin-top: 1.6em; + margin-bottom: 0.6em; +} + +.markup h1 { font-size: 2.1em; } +.markup h2 { font-size: 1.6em; } +.markup h3 { font-size: 1.3em; } + +.markup h1, +.markup h2 { + padding-bottom: 0.25em; + border-bottom: 1px solid var(--glass-border-strong); +} + +.markup p, +.markup li, +.markup td, +.markup th, +.markup blockquote { + font-family: var(--font-family-prose); +} + +.markup table { + font-size: 14px; +} + +.repo-file-cell.name, +.repo-file-cell.message, +.latest-commit .commit-summary, +#commits-table td.message, +.commit-summary, +.commit-body, +.commit-header h3 { + font-family: var(--font-family-prose); +} + +.markup blockquote { + border-left: 1px solid var(--color-secondary-dark-4); + color: var(--color-text-light); + font-style: italic; +} + +.markup code, +.markup pre, +.markup kbd, +.markup tt { + font-family: var(--fonts-monospace); + font-size: 0.86em; +} + +.markup code:not(.chroma):not(pre code), +.markup tt { + background: var(--color-markup-code-inline) !important; + color: var(--color-text-dark) !important; + padding: 1px 5px; +} + +.markup pre { + border: 1px solid var(--glass-border) !important; +} + +.markup table th, +.markup table td { + border-color: var(--glass-border-strong) !important; +} + +.markup table tr:nth-child(2n) { + background: var(--color-markup-table-row) !important; +} a { - color: var(--color-link); + color: var(--color-link, var(--color-primary-dark-1)); text-decoration: none; + text-underline-offset: 3px; transition: color var(--transition-fast); } a:hover { - color: var(--color-link-hover); + color: var(--color-text-dark); + text-decoration: underline; + text-decoration-thickness: 1px; + text-decoration-color: var(--color-moon-alpha-50); } -* { - border-radius: 0px !important; +.ui.button:hover, +.item:hover, +.file-tree-item:hover, +a.ui.label:hover, +a:hover .ui.avatar, +.markup a:hover code { + text-decoration: none; } -.ui.menu, .ui.secondary.menu, .following.bar { - background: var(--color-navbar) !important; - border-bottom: 1px solid var(--color-border); - backdrop-filter: blur(16px) saturate(180%); - -webkit-backdrop-filter: blur(16px) saturate(180%); +:root { + --color-link: var(--color-primary-dark-1); + --color-link-hover: var(--color-text-dark); } -.ui.secondary.menu .item { +:focus-visible { + outline: 2px solid var(--color-moon) !important; + outline-offset: 2px; +} + +.ui.button:focus-visible, +[role="button"]:focus-visible, +.ui.input input:focus-visible, +.ui.form input:focus-visible, +.ui.form textarea:focus-visible { + outline: 2px solid var(--color-moon) !important; + outline-offset: -2px; +} + +#navbar { + background: rgba(8, 9, 11, 0.72); + backdrop-filter: blur(20px) saturate(120%); + -webkit-backdrop-filter: blur(20px) saturate(120%); + border-bottom: 1px solid var(--glass-border); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); +} + +#navbar .item { + font-family: var(--fonts-regular); + font-size: 14px; + font-weight: 500; + letter-spacing: 0; +} + +#navbar .item.active { + box-shadow: inset 0 -2px 0 var(--color-moon); + background: transparent; +} + +.ui.secondary.menu .item, +.ui.tabular.menu .item { color: var(--color-text-light); font-family: var(--fonts-monospace); + font-size: 12px; + font-weight: 500; + letter-spacing: 0.08em; text-transform: uppercase; - font-size: 0.8em; - font-weight: 400; - letter-spacing: 0.1em; border: none !important; - margin: 0 4px; - padding: 14px 8px; + background: transparent !important; transition: color var(--transition-base); position: relative; } -.ui.secondary.menu .item::after { - content: ''; - position: absolute; - bottom: 0; - left: 50%; - width: 0; - height: 1px; - background: var(--color-primary); - transition: all var(--transition-base); - transform: translateX(-50%); +.ui.secondary.menu .item:hover, +.ui.tabular.menu .item:hover { + color: var(--color-text-dark); } -.ui.secondary.menu .item:hover { - color: var(--color-text); -} - -.ui.secondary.menu .item:hover::after { - width: 100%; -} - -.ui.secondary.menu .active.item { - color: var(--color-text) !important; +.ui.secondary.menu .active.item, +.ui.tabular.menu .active.item { + color: var(--color-text-dark) !important; background: transparent !important; - border: none !important; + font-weight: 600; } -.ui.secondary.menu .active.item::after { - width: 100%; - background: var(--color-accent); +.ui.secondary.pointing.menu { + border-bottom: 1px solid var(--glass-border-strong); +} + +.ui.secondary.pointing.menu .item, +.ui.tabular.menu .item { + margin-bottom: -1px; + padding: 12px 14px !important; +} + +.ui.secondary.pointing.menu .item::after, +.ui.tabular.menu .item::after { + content: ''; + display: block !important; + position: absolute; + left: 14px; + right: 14px; + bottom: -1px; height: 2px; + background: var(--color-moon); + transform: scaleX(0); + transform-origin: center; + transition: transform var(--transition-base), box-shadow var(--transition-base); + border: 0; + width: auto; + top: auto; + margin: 0; } -.ui.container.fluid.padded { - border-bottom: 1px solid var(--color-border); - background: transparent; +.ui.secondary.pointing.menu .item:hover::after, +.ui.tabular.menu .item:hover::after { + transform: scaleX(1); + background: var(--color-primary-light-1); } -.ui.button, .ui.basic.button { - background: var(--color-primary-light-4); - border: 1px solid var(--color-primary-alpha-50); - color: var(--color-text); - font-family: var(--fonts-monospace); - text-transform: uppercase; - letter-spacing: 0.08em; - font-size: 0.85em; - transition: all var(--transition-base); +.ui.secondary.pointing.menu .active.item::after, +.ui.tabular.menu .active.item::after { + transform: scaleX(1); + background: var(--color-moon); + box-shadow: 0 0 12px var(--color-moon-alpha-50); +} + +.ui.secondary.pointing.menu .item > .ui.label, +.ui.tabular.menu .item > .ui.label { + margin-left: 6px; + font-size: 11px; + letter-spacing: 0; +} + +.ui.segment.sub-menu.repository-menu, +.repository .ui.segment.sub-menu { + background: rgba(255, 255, 255, 0.015) !important; + border-bottom: 1px solid var(--glass-border); + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; box-shadow: none !important; } -.ui.button:hover { - border-color: var(--color-primary); - color: var(--color-text); - background: var(--color-primary-alpha-30); +.repo-header .flex-text-block.tw-text-18 { + font-family: var(--font-family-header); + font-size: 24px; + font-weight: 400; + letter-spacing: 0.03em; + color: var(--color-text-light-1); } -.ui.primary.button, .ui.green.button, .ui.blue.button { - background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-light-1) 100%) !important; - color: var(--color-body) !important; - border: 1px solid var(--color-primary); +.repo-header .flex-text-block.tw-text-18 a, +.repo-header .flex-text-block.tw-text-18 .tw-font-semibold { + font-weight: 400; +} + +.repo-header .flex-text-block.tw-text-18 a { + color: var(--color-text-dark); +} + +.repo-header .flex-text-block.tw-text-18 a.tw-font-normal { + color: var(--color-text-light-1); +} + +.repo-header .flex-text-block.tw-text-18 a:hover { + color: var(--color-moon); + text-decoration: none; +} + +.ui.button, +.ui.basic.button { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)), #14171B; + border: 1px solid var(--glass-border-strong); + color: var(--color-text-dark); + font-family: var(--fonts-monospace); + text-transform: uppercase; + letter-spacing: 0.06em; + font-size: 12px; font-weight: 500; + transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.5) !important; +} + +.ui.button:hover, +.ui.basic.button:hover { + border-color: rgba(255, 255, 255, 0.24); + color: var(--color-text-dark); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.05)), #14171B !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 14px -6px rgba(191, 208, 224, 0.35) !important; +} + +.ui.button:active, +.ui.basic.button:active { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.06)), #101215 !important; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important; +} + +.ui.primary.button, +.ui.green.button, +.ui.blue.button, +.ui.primary.buttons .button { + background: linear-gradient(180deg, #E9ECEF 0%, #C2C9CF 50%, #A3ACB4 100%) !important; + color: var(--color-primary-contrast) !important; + border: 1px solid #C6CCD1; + font-weight: 600; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 2px 10px -2px rgba(0, 0, 0, 0.6) !important; +} + +.ui.primary.button:hover, +.ui.green.button:hover, +.ui.blue.button:hover, +.ui.primary.buttons .button:hover { + background: linear-gradient(180deg, #F6F8F9 0%, #D5DBE0 50%, #B7BFC7 100%) !important; + border-color: #DDE2E6; + color: var(--color-primary-contrast) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 6px 20px -6px rgba(191, 208, 224, 0.45) !important; +} + +.ui.primary.button:active, +.ui.primary.buttons .button:active { + background: linear-gradient(180deg, #B7BFC7 0%, #D5DBE0 100%) !important; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25) !important; +} + +.ui.red.button, +.ui.negative.button, +.ui.red.buttons .button { + background: linear-gradient(180deg, rgba(224, 112, 112, 0.10), rgba(224, 112, 112, 0.02)), #14171B !important; + border: 1px solid var(--color-error-border); + color: var(--color-error-text) !important; +} + +.ui.red.button:hover, +.ui.negative.button:hover, +.ui.red.buttons .button:hover { + background: linear-gradient(180deg, rgba(224, 112, 112, 0.22), rgba(224, 112, 112, 0.08)), #14171B !important; + border-color: var(--color-error-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } -.ui.primary.button:hover { - background: linear-gradient(180deg, var(--color-primary-dark-1) 0%, var(--color-primary) 100%) !important; - border-color: var(--color-primary-dark-1); +.ui.button.icon, +.ui.icon.button { + letter-spacing: 0; } .ui.buttons { @@ -202,10 +752,6 @@ a:hover { .ui.buttons > .button, .ui.buttons > .ui.button { margin: 0 !important; - font-size: 0.85rem !important; - background: transparent !important; - border: 1px solid var(--color-border) !important; - color: var(--color-text-light) !important; } .ui.buttons > .button:not(:first-child), @@ -214,38 +760,60 @@ a:hover { } .ui.buttons > .button:hover, -.ui.buttons > .ui.button:hover { +.ui.button.active, +.ui.buttons .button.active { + position: relative; z-index: 2; - border-color: var(--color-primary) !important; - color: var(--color-text) !important; } -.ui.buttons .button.active, -.ui.button.active { - background: var(--color-primary-alpha-20) !important; - color: var(--color-text) !important; - border-color: var(--color-primary) !important; - z-index: 3; +.ui.button.active, +.ui.buttons .button.active { + background: linear-gradient(180deg, rgba(191, 208, 224, 0.22), rgba(191, 208, 224, 0.10)), #14171B !important; + color: var(--color-text-dark) !important; + border-color: var(--color-moon-alpha-50) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; +} + +.ui.basic.buttons { + border-color: var(--glass-border-strong); +} + +.ui.basic.buttons .button { + border-left-color: var(--glass-border-strong); +} + +.ui.labeled.button > .label { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)), #111417; + border: 1px solid var(--glass-border-strong); + border-left: 1px solid rgba(0, 0, 0, 0.5); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.5); + color: var(--color-text-dark); + font-family: var(--fonts-monospace); + font-weight: 500; + padding: 0 10px; +} + +.ui.labeled.button > .button:hover + .label { + color: var(--color-moon); } .ui.input input, -.ui.form input[type="text"], -.ui.form input[type="email"], -.ui.form input[type="password"], -.ui.form textarea { - background: var(--color-input-background) !important; - border: 1px solid var(--color-border) !important; - color: var(--color-text) !important; - padding: 12px 14px !important; +.ui.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), +.ui.form textarea, +.ui.selection.dropdown, +.ui.form select { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05)), #121518 !important; + border: 1px solid var(--glass-border-strong) !important; + color: var(--color-input-text) !important; font-family: var(--fonts-regular); - font-size: 0.95em; - transition: all var(--transition-base); + font-size: 14px; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.04) !important; + transition: border-color var(--transition-base), box-shadow var(--transition-base); } -.ui.icon.input > i.icon { - color: var(--color-text-light-2); - opacity: 1; - transition: color var(--transition-base); +.ui.input input, +.ui.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { + padding: 10px 12px !important; } .ui.icon.input input { @@ -254,42 +822,112 @@ a:hover { .ui.left.icon.input input { padding-left: 2.67142857em !important; - padding-right: 14px !important; + padding-right: 12px !important; +} + +.ui.icon.input > i.icon { + color: var(--color-text-light-2); + opacity: 1; + transition: color var(--transition-base); } .ui.input input:focus, .ui.form input:focus, -.ui.form textarea:focus { - border-color: var(--color-primary) !important; - box-shadow: 0 0 0 1px var(--color-primary-alpha-30) !important; - outline: none; +.ui.form textarea:focus, +.ui.selection.dropdown:focus, +.ui.selection.active.dropdown { + border-color: var(--color-moon-alpha-50) !important; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--color-moon-alpha-30), 0 0 18px var(--color-moon-alpha-15) !important; } .ui.input:focus-within > i.icon { - color: var(--color-primary); + color: var(--color-moon); } -.ui.input input::placeholder, -.ui.form input::placeholder, -.ui.form textarea::placeholder { - color: var(--color-text-light-3); +::placeholder { + color: var(--color-placeholder-text) !important; font-style: italic; - font-weight: 300; + opacity: 1; } -.ui.card, .ui.segment, .ui.attached.segment { - background: var(--color-box-body) !important; - border: 1px solid var(--color-border); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - box-shadow: - 0 4px 24px rgba(0, 0, 0, 0.25), - inset 0 1px 0 rgba(255, 255, 255, 0.02) !important; +.ui.action.input .ui.ui.button { + border-color: var(--glass-border-strong); } -.ui.header.segment, .ui.top.attached.header { - background: var(--color-box-header) !important; - border-bottom: 1px solid var(--color-border); +input[type="checkbox"], +input[type="radio"] { + border-color: var(--glass-border-strong); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05)), #121518; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45); +} + +input[type="checkbox"]:checked, +input[type="checkbox"]:indeterminate, +input[type="radio"]:checked { + border-color: var(--color-primary-dark-2); + background: linear-gradient(180deg, #D5DADF, #A3ABB2); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); +} + +input[type="checkbox"]:checked::before { + background: var(--color-primary-contrast); +} + +.ui.card, +.ui.segment, +.ui.attached.segment, +.ui.segments { + background: var(--glass-bg) !important; + border: 1px solid var(--glass-border); + backdrop-filter: blur(var(--glass-blur)) saturate(120%); + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%); + box-shadow: 0 24px 60px -36px rgba(0, 0, 0, 0.9) !important; +} + +.ui.segment:not(.attached), +.ui.card, +.ui.segments, +.ui.top.attached.segment, +.ui.top.attached.header, +.ui.attached.header:first-child { + box-shadow: inset 0 1px 0 var(--glass-highlight), 0 24px 60px -36px rgba(0, 0, 0, 0.9) !important; +} + +.ui.segments > .ui.segment, +.ui.segments > .ui.attached.segment, +.ui.segments > .ui.attached.header { + backdrop-filter: none; + -webkit-backdrop-filter: none; + box-shadow: none !important; +} + +.ui.segments > .ui.attached.header:first-child, +.ui.segments > .ui.top.attached.header { + box-shadow: inset 0 1px 0 var(--glass-highlight) !important; +} + +.ui.header.segment, +.ui.attached.header, +.ui.top.attached.header, +.file-header.ui.top.attached.header, +.diff-file-header, +.ui.modal > .header { + background: rgba(255, 255, 255, 0.03) !important; + border-bottom: 1px solid var(--glass-border); + position: relative; + z-index: 1; +} + +.file-header .file-info { + font-family: var(--fonts-monospace); + font-size: 12px; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--color-text-light); +} + +.file-info-entry + .file-info-entry { + border-left-color: var(--color-secondary-dark-3); } .ui.segment.code-view, .view-code, pre, code, .chroma { @@ -298,6 +936,12 @@ a:hover { border: 0px !important; } +.ui.segment.code-view, +.view-code { + backdrop-filter: none; + -webkit-backdrop-filter: none; +} + .lines-num { background-color: var(--color-code-sidebar-bg) !important; color: var(--color-editor-line-number) !important; @@ -353,34 +997,6 @@ td.lines-code.chroma { .chroma .kc { color: #cf8e6d !important; } .chroma .nn { color: #bcbec4 !important; } -.ui.table { - background: transparent; - border: 1px solid var(--color-border); -} -.ui.table thead th { - background: rgba(138, 146, 153, 0.04); - color: var(--color-text-light); - border-bottom: 1px solid var(--color-border); - font-family: var(--fonts-regular); - text-transform: uppercase; - letter-spacing: 0.08em; - font-size: 0.75em; - font-weight: 500; - padding: 14px 12px; -} -.ui.table tbody tr { - border-bottom: 1px solid var(--color-border-secondary); - transition: background var(--transition-fast); -} - -.ui.table tbody tr:hover { - background: rgba(138, 146, 153, 0.03); -} - -.ui.table td { - padding: 12px; -} - .file-view.code-view td.lines-num { padding: 0 8px !important; text-align: right !important; @@ -390,89 +1006,192 @@ td.lines-code.chroma { padding: 0 1px 0 5px !important; } -.ui.label { +.ui.table { background: transparent; - border: 1px solid var(--color-border); - color: var(--color-text-light); - font-family: var(--fonts-monospace); - font-size: 0.75em; - letter-spacing: 0.05em; - padding: 5px 10px; + border: 1px solid var(--glass-border); } -.ui.label.primary, .ui.label.blue { +.ui.table thead th { + background: rgba(255, 255, 255, 0.03); + color: var(--color-text-light); + border-bottom: 1px solid var(--glass-border); + font-family: var(--fonts-monospace); + text-transform: uppercase; + letter-spacing: 0.08em; + font-size: 11px; + font-weight: 600; + padding: 12px; +} + +.ui.table tbody tr { + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + transition: background var(--transition-fast); +} + +.ui.table tbody tr:hover { + background: var(--color-hover); +} + +.ui.table td { + padding: 10px 12px; +} + +.ui.label { + background: rgba(255, 255, 255, 0.04); + border: 1px solid var(--glass-border-strong); + color: var(--color-text-light); + font-family: var(--fonts-monospace); + font-size: 11px; + font-weight: 500; + letter-spacing: 0.04em; + padding: 3px 8px; +} + +.ui.label.primary, +.ui.label.blue, +.ui.basic.label.primary { background: var(--color-primary-alpha-20); - border-color: var(--color-primary-alpha-40); - color: var(--color-primary-dark-2); + border-color: var(--color-primary-alpha-50); + color: var(--color-primary-dark-3); +} + +.ui.label.circular, +.ui.circular.label { + padding: 2px 7px; + min-width: 0; +} + +a.sha, +.ui.sha.label, +.ui.label.sha, +.ui .sha.label, +.sha.label, +.ui.label.commit-id-short, +.commit-id-short { + background: transparent !important; + border: 0 !important; + box-shadow: none !important; + padding: 0 !important; + margin: 0 !important; + color: var(--color-text-light-2) !important; + font-family: var(--fonts-monospace) !important; + font-size: 12px !important; + letter-spacing: 0.02em; +} + +a.sha:hover, +a.ui.sha.label:hover, +a.commit-id-short:hover { + color: var(--color-text-dark) !important; + text-decoration: underline; } .ui.popup, .ui.tooltip, .tippy-box, -[data-tooltip]:before, -[data-tooltip]:after { - background: var(--color-menu) !important; +[data-tooltip]::before, +[data-tooltip]::after { + background: var(--glass-bg-strong) !important; color: var(--color-text) !important; - border: 1px solid var(--color-border) !important; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; + border: 1px solid var(--glass-border-strong) !important; + box-shadow: inset 0 1px 0 var(--glass-highlight), 0 12px 32px -8px rgba(0, 0, 0, 0.8) !important; font-family: var(--fonts-regular); - font-size: 0.85em; + font-size: 13px; } .tippy-content { - background: var(--color-menu) !important; + background: transparent !important; color: var(--color-text) !important; } .tippy-arrow { - color: var(--color-menu) !important; + color: #0D0F12 !important; } -.ui.popup:before { - background: var(--color-menu) !important; - border: 1px solid var(--color-border) !important; +.ui.popup::before { + background: #0D0F12 !important; + border: 1px solid var(--glass-border-strong) !important; } -.ui.dropdown .menu { - background: var(--color-menu) !important; - border: 1px solid var(--color-border) !important; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); +.ui.dropdown .menu, +.overflow-menu-popup { + background: var(--glass-bg-strong) !important; + border: 1px solid var(--glass-border-strong) !important; + backdrop-filter: blur(24px) saturate(120%); + -webkit-backdrop-filter: blur(24px) saturate(120%); + box-shadow: inset 0 1px 0 var(--glass-highlight), 0 20px 50px -12px rgba(0, 0, 0, 0.9) !important; } .ui.dropdown .menu > .item { background: transparent !important; color: var(--color-text) !important; - border-top: 1px solid var(--color-border-secondary) !important; - padding: 10px 14px !important; + border-top: 1px solid rgba(255, 255, 255, 0.04) !important; + padding: 9px 14px !important; + font-size: 12.5px; } .ui.dropdown .menu > .item:first-child { border-top: none !important; } -.ui.dropdown .menu > .item:hover { - background: var(--color-primary-alpha-10) !important; +.ui.dropdown .menu > .item:hover, +.ui.dropdown .menu > .item.selected, +.overflow-menu-popup > .item:hover { + background: var(--color-hover) !important; + color: var(--color-text-dark) !important; } -footer { - background: var(--color-footer) !important; - border-top: 1px solid var(--color-border); +.ui.dropdown .menu > .item.active { + background: var(--color-active) !important; + color: var(--color-text-dark) !important; + box-shadow: inset 2px 0 0 var(--color-moon); +} + +.ui.segment:has(.ui.dropdown.active), +.ui.segments:has(.ui.dropdown.active), +.ui.attached.header:has(.ui.dropdown.active), +.ui.attached.menu:has(.ui.dropdown.active), +.repo-button-row:has(.ui.dropdown.active), +.file-header:has(.ui.dropdown.active), +.diff-file-header:has(.ui.dropdown.active), +#portfolio-controls:has(.ui.dropdown.active) { + position: relative; + z-index: 30; +} + +.ui.dropdown .menu > .header { + font-family: var(--font-family-header); + font-size: 14px; + letter-spacing: 0.02em; + color: var(--color-text-light); +} + +footer, +.page-footer { + background: rgba(8, 9, 11, 0.72) !important; + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-top: 1px solid var(--glass-border); + font-size: 12px; } ::-webkit-scrollbar { - width: 8px; - height: 8px; + width: 10px; + height: 10px; } + ::-webkit-scrollbar-track { background: transparent; } + ::-webkit-scrollbar-thumb { - background: var(--color-border); - border: 2px solid transparent; + background: var(--color-secondary-dark-2); + border: 3px solid transparent; background-clip: content-box; } + ::-webkit-scrollbar-thumb:hover { - background: var(--color-primary-light-2); + background: var(--color-primary-light-1); background-clip: content-box; } @@ -480,97 +1199,113 @@ footer { background: transparent; } +* { + scrollbar-color: var(--color-secondary-dark-2) transparent; + scrollbar-width: thin; +} + ::selection { - background: rgba(138, 146, 153, 0.35); - color: var(--color-text); + background: var(--color-moon-alpha-30); + color: var(--color-text-dark); } ::-moz-selection { - background: rgba(138, 146, 153, 0.35); - color: var(--color-text); + background: var(--color-moon-alpha-30); + color: var(--color-text-dark); +} + +body, +input, +textarea { + caret-color: var(--color-caret); } .ui.loader::before { - border-color: var(--color-border) !important; + border-color: var(--glass-border-strong) !important; } .ui.loader::after { - border-color: var(--color-primary) transparent transparent !important; + border-color: var(--color-moon) transparent transparent !important; } .ui.message { - background: var(--color-box-body) !important; - border: 1px solid var(--color-border); + background: var(--glass-bg) !important; + border: 1px solid var(--glass-border-strong); color: var(--color-text); - box-shadow: none !important; + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); + box-shadow: inset 0 1px 0 var(--glass-highlight) !important; } .ui.negative.message, .ui.error.message { - background: rgba(139, 58, 58, 0.15) !important; - border-color: rgba(139, 58, 58, 0.4); - color: #E07070; + background: var(--color-error-bg) !important; + border-color: var(--color-error-border); + color: var(--color-error-text); } .ui.positive.message, .ui.success.message { - background: rgba(88, 139, 58, 0.15) !important; - border-color: rgba(88, 139, 58, 0.4); - color: #7CB05C; + background: var(--color-success-bg) !important; + border-color: var(--color-success-border); + color: var(--color-success-text); } .ui.warning.message { - background: rgba(168, 144, 100, 0.15) !important; - border-color: rgba(168, 144, 100, 0.4); - color: var(--color-accent); + background: var(--color-warning-bg) !important; + border-color: var(--color-warning-border); + color: var(--color-warning-text); } -.repository .repo-header { - background: transparent !important; +.ui.info.message { + background: var(--color-info-bg) !important; + border-color: var(--color-info-border); + color: var(--color-info-text); } -.repository .ui.secondary.menu, -.repository .ui.tabular.menu, -.repository .ui.menu { - background: transparent !important; - border-bottom: 1px solid var(--color-border); - backdrop-filter: none !important; +.issue.is-open .issue-state-label, +.ui.label.green { + background: var(--color-success-bg) !important; + border-color: var(--color-success-border) !important; + color: var(--color-success-text) !important; } -.issue.is-open .issue-state-label { - background: rgba(88, 139, 58, 0.2) !important; - color: #7CB05C !important; +.issue.is-closed .issue-state-label, +.ui.label.red { + background: var(--color-error-bg) !important; + border-color: var(--color-error-border) !important; + color: var(--color-error-text) !important; } -.issue.is-closed .issue-state-label { - background: rgba(139, 58, 58, 0.2) !important; - color: #E07070 !important; -} - -.heatmap rect { +.heatmap rect, +#user-heatmap rect { rx: 0 !important; ry: 0 !important; } -.heatmap .ContributionCalendar-day[data-level="0"] { fill: var(--color-border-secondary) !important; } -.heatmap .ContributionCalendar-day[data-level="1"] { fill: rgba(138, 146, 153, 0.25) !important; } -.heatmap .ContributionCalendar-day[data-level="2"] { fill: rgba(138, 146, 153, 0.45) !important; } -.heatmap .ContributionCalendar-day[data-level="3"] { fill: rgba(138, 146, 153, 0.65) !important; } -.heatmap .ContributionCalendar-day[data-level="4"] { fill: var(--color-primary) !important; } +#user-heatmap .ContributionCalendar-day[data-level="0"], +.heatmap .ContributionCalendar-day[data-level="0"] { fill: #15181B !important; } +#user-heatmap .ContributionCalendar-day[data-level="1"], +.heatmap .ContributionCalendar-day[data-level="1"] { fill: #3A434A !important; } +#user-heatmap .ContributionCalendar-day[data-level="2"], +.heatmap .ContributionCalendar-day[data-level="2"] { fill: #5C6670 !important; } +#user-heatmap .ContributionCalendar-day[data-level="3"], +.heatmap .ContributionCalendar-day[data-level="3"] { fill: #8A9299 !important; } +#user-heatmap .ContributionCalendar-day[data-level="4"], +.heatmap .ContributionCalendar-day[data-level="4"] { fill: #BFD0E0 !important; } .ui.modal { - background: var(--color-box-body) !important; - border: 1px solid var(--color-border); - box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5) !important; + background: var(--glass-bg-strong) !important; + border: 1px solid var(--glass-border-strong); + backdrop-filter: blur(24px) saturate(120%); + -webkit-backdrop-filter: blur(24px) saturate(120%); + box-shadow: inset 0 1px 0 var(--glass-highlight), 0 32px 80px -20px rgba(0, 0, 0, 0.9) !important; } .ui.modal > .header { - background: var(--color-box-header) !important; - border-bottom: 1px solid var(--color-border); - color: var(--color-text) !important; + color: var(--color-text-dark) !important; font-family: var(--font-family-header); - letter-spacing: 0.1em; - text-transform: uppercase; + font-size: 20px; } .ui.modal > .content { @@ -579,77 +1314,87 @@ footer { } .ui.modal > .actions { - background: var(--color-box-header) !important; - border-top: 1px solid var(--color-border); + background: rgba(255, 255, 255, 0.02) !important; + border-top: 1px solid var(--glass-border); } .ui.dimmer { - background: rgba(0, 0, 0, 0.75) !important; - backdrop-filter: blur(4px); - -webkit-backdrop-filter: blur(4px); + background: var(--color-overlay-backdrop) !important; + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); } .ui.avatar, .avatar, img.avatar { - border: 1px solid var(--color-border) !important; + border: 1px solid var(--glass-border-strong); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); } .file-tree-item:hover { - background: var(--color-primary-alpha-10) !important; + background: var(--color-hover) !important; } .file-tree-item.selected { - background: var(--color-primary-alpha-20) !important; + background: var(--color-active) !important; + box-shadow: inset 2px 0 0 var(--color-moon); } -.diff-file-header { - background: var(--color-box-header) !important; - border-bottom: 1px solid var(--color-border); +.ui.progress .bar, +.ui.progress.small .bar { + background: linear-gradient(90deg, var(--color-primary-light-1), var(--color-primary-dark-2)) !important; } -.add-code, .diff-line-add { - background: rgba(88, 139, 58, 0.12) !important; +kbd { + font-family: var(--fonts-monospace); + border: 1px solid var(--glass-border-strong); + box-shadow: inset 0 -1px 0 var(--color-secondary-dark-2); + background: rgba(255, 255, 255, 0.05); } -.del-code, .diff-line-del { - background: rgba(139, 58, 58, 0.12) !important; +.timeline-item .badge { + border: 1px solid var(--glass-border-strong); } -.ui.tabular.menu { - border-bottom: 1px solid var(--color-border); +.page-content.home .hero .ui.header.title { + font-size: 3em; + letter-spacing: 0.14em; + text-transform: uppercase; + margin-bottom: 0.2em; } -.ui.tabular.menu .item { - border: none !important; - background: transparent !important; +.page-content.home .hero .ui.large.text { color: var(--color-text-light); - padding: 12px 16px; - margin-bottom: -1px; -} - -.ui.tabular.menu .item:hover { - color: var(--color-text); -} - -.ui.tabular.menu .active.item { - background: transparent !important; - color: var(--color-text) !important; - border-bottom: 2px solid var(--color-accent) !important; + letter-spacing: 0.04em; } #portfolio-controls, #portfolio-controls *, .portfolio-card, .portfolio-card * { - border-radius: 0px !important; + border-radius: 0 !important; +} + +#portfolio-controls { + position: relative; + z-index: 10; + background: var(--glass-bg) !important; + border: 1px solid var(--glass-border) !important; + backdrop-filter: blur(var(--glass-blur)) saturate(120%); + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%); + box-shadow: inset 0 1px 0 var(--glass-highlight); } .portfolio-card { overflow: visible; z-index: 1; --glow-color: var(--color-primary); - transition: border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1); + background: var(--glass-bg) !important; + border: 1px solid var(--glass-border) !important; + backdrop-filter: blur(var(--glass-blur)) saturate(120%); + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%); + box-shadow: inset 0 1px 0 var(--glass-highlight), 0 24px 60px -36px rgba(0, 0, 0, 0.9) !important; + transition: border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1); transform: none !important; } @@ -659,7 +1404,7 @@ img.avatar { inset: 0; background: var(--glow-color, var(--color-primary)); opacity: 0; - filter: blur(12px); + filter: blur(18px); z-index: -1; transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; @@ -667,17 +1412,35 @@ img.avatar { .portfolio-card:hover { transform: none !important; - box-shadow: none !important; - border-color: var(--color-secondary) !important; + border-color: var(--glass-border-strong) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 24px 60px -30px rgba(0, 0, 0, 0.95) !important; } .portfolio-card:hover::before { - opacity: 0.25; + opacity: 0.28; } .portfolio-card .card-content, .portfolio-card .card-footer { - background: var(--color-box-body); + background: transparent; position: relative; z-index: 1; } + +.portfolio-card .card-description { + font-family: var(--font-family-prose); + font-size: 15px; + line-height: 1.55; +} + +.portfolio-card .topic-tag { + text-transform: uppercase; + letter-spacing: 0.08em; + font-size: 10.5px; +} + +.portfolio-card .portfolio-link { + text-transform: uppercase; + letter-spacing: 0.08em; + font-size: 12px; +} diff --git a/public/assets/css/theme-pinkie.css b/public/assets/css/theme-pinkie.css index 9c24d2d..43b4e74 100644 --- a/public/assets/css/theme-pinkie.css +++ b/public/assets/css/theme-pinkie.css @@ -1,60 +1,408 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap'); + +@font-face { + font-family: 'SF Pro Text'; + src: url('../fonts/sf/sf-pro-text-400.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'SF Pro Text'; + src: url('../fonts/sf/sf-pro-text-400i.woff2') format('woff2'); + font-weight: 400; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'SF Pro Text'; + src: url('../fonts/sf/sf-pro-text-500.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'SF Pro Text'; + src: url('../fonts/sf/sf-pro-text-600.woff2') format('woff2'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'SF Pro Text'; + src: url('../fonts/sf/sf-pro-text-700.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'SF Pro Display'; + src: url('../fonts/sf/sf-pro-display-600.woff2') format('woff2'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'SF Pro Display'; + src: url('../fonts/sf/sf-pro-display-700.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} gitea-theme-meta-info { --theme-display-name: "pinkie"; + --theme-color-scheme: "dark"; } :root { --is-dark-theme: true; - --color-primary: #FF82F3; + --color-primary-contrast: #22111E; --color-primary-dark-1: #FF9EF6; - --color-primary-dark-2: #FFBaf9; + --color-primary-dark-2: #FFBAF9; --color-primary-dark-3: #FFD6FC; --color-primary-dark-4: #FFEBFE; + --color-primary-dark-5: #FFF0FE; + --color-primary-dark-6: #FFF6FF; + --color-primary-dark-7: #FFFBFF; --color-primary-light-1: #7C3871; --color-primary-light-2: #6A2F60; --color-primary-light-3: #582650; --color-primary-light-4: #461D40; - --color-primary-alpha-10: rgba(255, 130, 243, 0.1); - --color-primary-alpha-20: rgba(255, 130, 243, 0.2); - --color-primary-alpha-30: rgba(255, 130, 243, 0.3); - --color-primary-alpha-40: rgba(255, 130, 243, 0.4); - --color-primary-alpha-50: rgba(255, 130, 243, 0.5); - --color-primary-alpha-60: rgba(255, 130, 243, 0.6); - + --color-primary-light-5: #361632; + --color-primary-light-6: #2A1226; + --color-primary-light-7: #1F0D1C; + --color-primary-alpha-10: #FF82F319; + --color-primary-alpha-20: #FF82F333; + --color-primary-alpha-30: #FF82F34b; + --color-primary-alpha-40: #FF82F366; + --color-primary-alpha-50: #FF82F380; + --color-primary-alpha-60: #FF82F399; + --color-primary-alpha-70: #FF82F3b3; + --color-primary-alpha-80: #FF82F3cc; + --color-primary-alpha-90: #FF82F3e1; + --color-primary-hover: var(--color-primary-dark-1); + --color-primary-active: var(--color-primary-dark-2); + --color-secondary: #3F293A; + --color-secondary-dark-1: #4A3145; + --color-secondary-dark-2: #553A50; + --color-secondary-dark-3: #61435B; + --color-secondary-dark-4: #6D4C66; + --color-secondary-dark-5: #795571; + --color-secondary-dark-6: #855F7C; + --color-secondary-dark-7: #916988; + --color-secondary-dark-8: #9D7393; + --color-secondary-dark-9: #A97E9F; + --color-secondary-dark-10: #B58AAA; + --color-secondary-dark-11: #C196B6; + --color-secondary-dark-12: #CDA3C2; + --color-secondary-dark-13: #D9B0CE; + --color-secondary-light-1: #341D2F; + --color-secondary-light-2: #2C1B29; + --color-secondary-light-3: #271626; + --color-secondary-light-4: #22111E; + --color-secondary-alpha-10: #3F293A19; + --color-secondary-alpha-20: #3F293A33; + --color-secondary-alpha-30: #3F293A4b; + --color-secondary-alpha-40: #3F293A66; + --color-secondary-alpha-50: #3F293A80; + --color-secondary-alpha-60: #3F293A99; + --color-secondary-alpha-70: #3F293Ab3; + --color-secondary-alpha-80: #3F293Acc; + --color-secondary-alpha-90: #3F293Ae1; + --color-secondary-button: var(--color-secondary-dark-4); + --color-secondary-hover: var(--color-secondary-dark-3); + --color-secondary-active: var(--color-secondary-dark-2); + --color-console-fg: #F5F5F5; + --color-console-fg-subtle: #C8B6C4; + --color-console-bg: #22111E; + --color-console-border: #3F293A; + --color-console-hover-bg: #341D2F; + --color-console-active-bg: #3F293A; + --color-console-menu-bg: #2C1B29; + --color-console-menu-border: #4A3145; + --color-console-link: #C8B6C4; + --color-red: #cc4848; + --color-orange: #cc580c; + --color-yellow: #cc9903; + --color-olive: #91a313; + --color-green: #87ab63; + --color-teal: #00918a; + --color-blue: #3a8ac6; + --color-violet: #906ae1; + --color-purple: #b259d0; + --color-pink: #d22e8b; + --color-brown: #a47252; + --color-black: #22111E; + --color-red-light: #d15a5a; + --color-orange-light: #f6a066; + --color-yellow-light: #eaaf03; + --color-olive-light: #abc016; + --color-green-light: #93b373; + --color-teal-light: #00b6ad; + --color-blue-light: #4e96cc; + --color-violet-light: #9b79e4; + --color-purple-light: #ba6ad5; + --color-pink-light: #d74397; + --color-brown-light: #b08061; + --color-black-light: #4A3145; + --color-red-dark-1: #c23636; + --color-orange-dark-1: #f38236; + --color-yellow-dark-1: #b88a03; + --color-olive-dark-1: #839311; + --color-green-dark-1: #7a9e55; + --color-teal-dark-1: #00837c; + --color-blue-dark-1: #347cb3; + --color-violet-dark-1: #7b4edb; + --color-purple-dark-1: #a742c9; + --color-pink-dark-1: #be297d; + --color-brown-dark-1: #94674a; + --color-black-dark-1: #1C0D19; + --color-red-dark-2: #ad3030; + --color-orange-dark-2: #f16e17; + --color-yellow-dark-2: #a37a02; + --color-olive-dark-2: #74820f; + --color-green-dark-2: #6c8c4c; + --color-teal-dark-2: #00746e; + --color-blue-dark-2: #2e6e9f; + --color-violet-dark-2: #6733d6; + --color-purple-dark-2: #9834b9; + --color-pink-dark-2: #a9246f; + --color-brown-dark-2: #835b42; + --color-black-dark-2: #160A14; + --color-ansi-black: #22111E; + --color-ansi-red: #cc4848; + --color-ansi-green: #87ab63; + --color-ansi-yellow: #cc9903; + --color-ansi-blue: #3a8ac6; + --color-ansi-magenta: #FF82F3; + --color-ansi-cyan: #00918a; + --color-ansi-white: var(--color-console-fg-subtle); + --color-ansi-bright-black: #6D4C66; + --color-ansi-bright-red: #d15a5a; + --color-ansi-bright-green: #93b373; + --color-ansi-bright-yellow: #eaaf03; + --color-ansi-bright-blue: #4e96cc; + --color-ansi-bright-magenta: #FF9EF6; + --color-ansi-bright-cyan: #00b6ad; + --color-ansi-bright-white: var(--color-console-fg); + --color-series-16-0: #7db233; + --color-series-16-1: #499a37; + --color-series-16-2: #ce4751; + --color-series-16-3: #8f9121; + --color-series-16-4: #ac32a6; + --color-series-16-5: #7445e9; + --color-series-16-6: #c67d28; + --color-series-16-7: #4db392; + --color-series-16-8: #aa4d30; + --color-series-16-9: #2a6f84; + --color-series-16-10: #c45327; + --color-series-16-11: #3d965c; + --color-series-16-12: #792a93; + --color-series-16-13: #439d73; + --color-series-16-14: #103aad; + --color-series-16-15: #982e85; + --color-grey: #3F293A; + --color-grey-light: #9D7393; + --color-gold: #b1983b; + --color-white: #ffffff; + --color-diff-added-fg: #93b373; + --color-diff-added-linenum-bg: #2A3A2A; + --color-diff-added-row-bg: #243026; + --color-diff-added-row-border: #364A3A; + --color-diff-added-word-bg: #3F6A42; + --color-diff-moved-row-bg: #818044; + --color-diff-moved-row-border: #bcca6f; + --color-diff-removed-fg: #FB6B67; + --color-diff-removed-linenum-bg: #4A2228; + --color-diff-removed-row-bg: #3A1D24; + --color-diff-removed-row-border: #5E3440; + --color-diff-removed-word-bg: #74333F; + --color-diff-inactive: #2A1A27; + --color-error-border: #763232; + --color-error-bg: #3A1F27; + --color-error-bg-active: #4C262E; + --color-error-bg-hover: #43232B; + --color-error-text: #FF6E6E; + --color-success-border: #2C5A3A; + --color-success-bg: #21332A; + --color-success-text: #5FD07A; + --color-warning-border: #6A4E1C; + --color-warning-bg: #3A2E20; + --color-warning-text: #F0B73C; + --color-info-border: #2E4C82; + --color-info-bg: #24283C; + --color-info-text: #6FA6FF; + --color-priority-border: #4a268d; + --color-priority-bg: #2E1C3D; + --color-priority-text: #B08CFF; + --color-red-badge: #db2828; + --color-red-badge-bg: #db28281a; + --color-red-badge-hover-bg: #db28284d; + --color-green-badge: #21ba45; + --color-green-badge-bg: #21ba451a; + --color-green-badge-hover-bg: #21ba454d; + --color-yellow-badge: #fbbd08; + --color-yellow-badge-bg: #fbbd081a; + --color-yellow-badge-hover-bg: #fbbd084d; + --color-orange-badge: #f2711c; + --color-orange-badge-bg: #f2711c1a; + --color-orange-badge-hover-bg: #f2711c4d; + --color-git: #f05133; + --color-logo: #609926; --color-body: #22111E; - --color-box-body: #2C1B29; --color-box-header: #341D2F; - --color-footer: #22111E; - --color-navbar: #2C1B29; - --color-menu: #2C1B29; - --color-card: #2C1B29; - + --color-box-body: #2C1B29; + --color-box-body-highlight: #3A2335; + --color-text-dark: #FFFFFF; --color-text: #F5F5F5; --color-text-light: #877384; + --color-text-light-1: #A08A9C; --color-text-light-2: #877384; --color-text-light-3: #90708B; + --color-footer: #22111E; + --color-timeline: #4A3145; + --color-input-text: #F5F5F5; + --color-input-background: #3F293A; + --color-input-toggle-background: #553A50; + --color-input-border: #341D2F; + --color-input-border-hover: #FF82F3; + --color-light: #ffffff0c; + --color-light-border: #FF82F333; + --color-hover: #FF82F314; + --color-hover-opaque: #35202F; + --color-active: #FF82F326; + --color-menu: #2C1B29; + --color-card: #2C1B29; + --color-markup-table-row: #FF82F30f; + --color-markup-code-block: #FF82F314; + --color-markup-code-inline: #FF82F326; + --color-button: #3F293A; + --color-code-bg: #1e1f22; + --color-shadow: #0D050B80; + --color-shadow-opaque: #0D050B; + --color-secondary-bg: #3F293A; + --color-expand-button: #4A3145; + --color-placeholder-text: var(--color-text-light-3); + --color-editor-line-highlight: var(--color-primary-alpha-20); + --color-editor-selection: var(--color-primary-alpha-40); + --color-project-column-bg: var(--color-secondary-light-2); + --color-caret: #FF82F3; + --color-reaction-bg: #FF82F314; + --color-reaction-hover-bg: var(--color-primary-light-4); + --color-reaction-active-bg: var(--color-primary-light-3); + --color-tooltip-text: #FFFFFF; + --color-tooltip-bg: #1C0D19f5; + --color-nav-bg: #2C1B29; + --color-nav-hover-bg: #3F293A; + --color-nav-text: var(--color-text); + --color-secondary-nav-bg: #2A1926; + --color-label-text: var(--color-text); + --color-label-bg: #7C387166; + --color-label-hover-bg: #7C3871a0; + --color-label-active-bg: #7C3871; + --color-accent: var(--color-primary); + --color-small-accent: var(--color-primary-light-3); + --color-highlight-fg: #F0B73C; + --color-highlight-bg: #4D3A1E; + --color-overlay-backdrop: #150A12c0; + --color-danger: var(--color-red); + --color-transparency-grid-light: #3A2335; + --color-transparency-grid-dark: #2C1B29; + --color-workflow-edge-hover: #9D7393; + --color-syntax-keyword: #cf8e6d; + --color-syntax-bool: #cf8e6d; + --color-syntax-control: #cf8e6d; + --color-syntax-name: #bcbec4; + --color-syntax-type: #bcbec4; + --color-syntax-number: #2aacb8; + --color-syntax-operator: #bcbec4; + --color-syntax-regexp: #6aab73; + --color-syntax-string: #6aab73; + --color-syntax-comment: #7a7e85; + --color-syntax-invalid: #f75464; + --color-syntax-link: var(--color-primary); + --color-syntax-tag: #d5b778; + --color-syntax-attribute: #c77dbb; + --color-syntax-property: #c77dbb; + --color-syntax-variable: #bcbec4; + --color-syntax-string-special: #6aab73; + --color-syntax-escape: #cf8e6d; + --color-syntax-entity: #56a8f5; + --color-syntax-preproc: #b3ae60; + --color-syntax-preproc-file: #6aab73; + --color-syntax-decorator: #b3ae60; + --color-syntax-namespace: #bcbec4; + --color-syntax-name-pseudo: #c77dbb; + --color-syntax-comment-special: #5f826b; + --color-syntax-text: #bcbec4; + --color-syntax-text-alt: #a1a3a8; + --color-syntax-punctuation: #bcbec4; + --color-syntax-whitespace: #4b5059; + --color-syntax-diff-fg: #ffffff; + --color-syntax-deleted-bg: #5f3737; + --color-syntax-inserted-bg: #3a523a; + --color-syntax-emph: #d5b778; + --color-syntax-strong: #cf8e6d; + --color-syntax-heading: #cf8e6d; + --color-syntax-subheading: #6aab73; + --color-syntax-output: #7a7e85; + --color-syntax-prompt: #cf8e6d; + --color-syntax-traceback: #f75464; + --color-syntax-matching-bracket-bg: #2aacb848; + --color-syntax-nonmatching-bracket-bg: #f7546448; + + --color-code-sidebar-bg: #2b2d30; + --color-editor-line-number: #4b5059; + --color-border: var(--color-secondary); + --color-border-secondary: #341D2F; --color-link: #FF82F3; --color-link-hover: #FF9EF6; - --color-border: #3F293A; - --color-border-secondary: #341D2F; - --color-secondary: #341D2F; - --color-secondary-alpha-6: rgba(52, 29, 47, 0.6); + --fonts-proportional: 'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif; + --fonts-monospace: 'JetBrains Mono', ui-monospace, monospace; + --fonts-regular: 'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif; + --fonts-display: 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; - --color-input-background: #3F293A; - --color-input-text: #F5F5F5; - --color-input-border: #341D2F; - --color-input-border-hover: #FF82F3; + --border-radius: 10px; + --border-radius-medium: 14px; + --border-radius-full: 99999px; + --radius-control: 10px; + --radius-surface: 14px; + --radius-pill: 99999px; - --color-code-bg: #1e1f22; - --color-code-sidebar-bg: #2b2d30; - --color-editor-line-number: #4b5059; + accent-color: var(--color-primary); + color-scheme: dark; +} - --fonts-proportional: 'Inter', sans-serif; - --fonts-monospace: 'JetBrains Mono', monospace; - --fonts-regular: 'Inter', sans-serif; +.emoji[aria-label="check mark"], +.emoji[aria-label="currency exchange"], +.emoji[aria-label="TOP arrow"], +.emoji[aria-label="END arrow"], +.emoji[aria-label="ON! arrow"], +.emoji[aria-label="SOON arrow"], +.emoji[aria-label="heavy dollar sign"], +.emoji[aria-label="copyright"], +.emoji[aria-label="registered"], +.emoji[aria-label="trade mark"], +.emoji[aria-label="multiply"], +.emoji[aria-label="plus"], +.emoji[aria-label="minus"], +.emoji[aria-label="divide"], +.emoji[aria-label="curly loop"], +.emoji[aria-label="double curly loop"], +.emoji[aria-label="wavy dash"], +.emoji[aria-label="paw prints"], +.emoji[aria-label="musical note"], +.emoji[aria-label="musical notes"] { + filter: invert(100%) hue-rotate(180deg); } body { @@ -62,113 +410,289 @@ body { color: var(--color-text); font-family: var(--fonts-regular); -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -*:not(i):not(.icon):not(svg):not(path):not(.octicon):not(.lines-num):not(.lines-num span):not(.lines-code):not(.chroma):not(.chroma *):not(tr):not(td):not(th) { - border-radius: 12px !important; +h1, h2, h3, h4, h5, h6, +.ui.header { + font-family: var(--fonts-regular); + font-weight: 600; + letter-spacing: -0.015em; + color: var(--color-text-dark); } -i.icon, svg, path, .octicon { - border-radius: 0 !important; +h1, +h2, +.markup h1, +.markup h2, +.page-content.home .hero .ui.header.title { + font-family: var(--fonts-display); + letter-spacing: -0.02em; } -.ui.button, .ui.button.icon, .ui.icon.button, .ui.dropdown.icon.button { - border-radius: 12px !important; +a { + color: var(--color-link); + text-decoration: none; + text-underline-offset: 3px; + transition: color 0.15s ease; } -.ui.buttons { - gap: 4px !important; +a:hover { + color: var(--color-link-hover); + text-decoration: underline; + text-decoration-thickness: 1px; } -.ui.buttons > .button, -.ui.buttons > .ui.button { - margin: 0 !important; +.ui.button:hover, +.item:hover, +.file-tree-item:hover, +a.ui.label:hover, +a:hover .ui.avatar { + text-decoration: none; } -.file-info, -.file-info-entry, -.file-info-entry * { - background: transparent !important; - background-color: transparent !important; - border-radius: 0 !important; +:focus-visible { + outline: 2px solid var(--color-primary) !important; + outline-offset: 2px; } -.file-info-entry::before, -.file-info-entry::after, -.file-info::before, -.file-info::after { - color: var(--color-text-light) !important; - background: transparent !important; +.ui.button:focus-visible, +[role="button"]:focus-visible, +.ui.input input:focus-visible, +.ui.form input:focus-visible, +.ui.form textarea:focus-visible { + outline-offset: -2px; } -.ui.button, .ui.input, .ui.segment, .ui.card { - isolation: isolate; +#navbar { + background: var(--color-nav-bg); + border-bottom: 1px solid var(--color-secondary); } -.ui.menu, .ui.secondary.menu, .following.bar, footer { - border-radius: 0 !important; +#navbar .item { + border-radius: var(--radius-control); + margin: 6px 0; } -.ui.menu, .ui.secondary.menu, .following.bar { - background: var(--color-navbar) !important; - border-bottom: 1px solid var(--color-border); - backdrop-filter: blur(10px); +#navbar .item.active { + background: var(--color-primary-alpha-20); + color: var(--color-primary-dark-2); } .ui.secondary.menu .item { - color: var(--color-text-light); + color: var(--color-text-light-1); font-family: var(--fonts-regular); + font-weight: 500; border: none !important; } +.ui.secondary.menu .item:hover { + color: var(--color-text); +} + +.ui.secondary.pointing.menu { + border-bottom: 1px solid var(--color-secondary); + gap: 2px; +} + +.ui.secondary.pointing.menu .item, +.ui.tabular.menu .item { + border-radius: var(--radius-pill) !important; + margin: 4px 0 !important; + padding: 7px 14px !important; + align-self: center; + border: none !important; + color: var(--color-text-light-1); + transition: background 0.15s ease, color 0.15s ease; +} + +.ui.secondary.pointing.menu .item:hover, +.ui.tabular.menu .item:hover { + background: var(--color-hover) !important; + color: var(--color-text-dark); +} + +.ui.secondary.pointing.menu .active.item, +.ui.tabular.menu .active.item, +.ui.tabular.menu .active.item:hover { + background: var(--color-primary-alpha-20) !important; + color: var(--color-primary-dark-2) !important; + border: none !important; + box-shadow: none !important; + margin-bottom: 4px !important; +} + +.ui.tabular.menu { + border-bottom: 1px solid var(--color-secondary); + gap: 2px; +} + +.ui.secondary.pointing.menu .item > .ui.label, +.ui.tabular.menu .item > .ui.label { + margin-left: 6px; +} + .ui.secondary.menu .active.item { color: var(--color-primary); background: transparent !important; - box-shadow: inset 0 -2px 0 0 var(--color-primary) !important; - border-radius: 0 !important; } -.ui.button, .ui.basic.button { - background: #7C3871; - border: 1px solid var(--color-primary-alpha-50); +.ui.segment.sub-menu.repository-menu, +.repository .ui.segment.sub-menu { + background: var(--color-secondary-nav-bg) !important; + border-radius: 0 !important; + border-bottom: 1px solid var(--color-secondary); +} + +.ui.button, +.ui.basic.button { + background: var(--color-secondary-dark-1); + border: 1px solid var(--color-secondary-dark-3); color: var(--color-text); font-family: var(--fonts-regular); - transition: all 0.2s ease; + font-weight: 500; + border-radius: var(--radius-control) !important; + transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; box-shadow: none !important; } -.ui.button:hover { - background: var(--color-primary); - color: #22111E; - border-color: var(--color-primary); - box-shadow: 0 0 10px var(--color-primary-alpha-40) !important; +.ui.button:hover, +.ui.basic.button:hover { + background: var(--color-primary-light-1) !important; + color: var(--color-text-dark); + border-color: var(--color-primary-light-1); } -.ui.primary.button, .ui.green.button, .ui.blue.button { +.ui.button:active, +.ui.basic.button:active { + background: var(--color-primary-dark-1) !important; + border-color: var(--color-primary-dark-1); +} + +.ui.primary.button, +.ui.green.button, +.ui.blue.button, +.ui.primary.buttons .button { background: var(--color-primary) !important; - color: #22111E !important; + color: var(--color-primary-contrast) !important; border: 1px solid var(--color-primary); font-weight: 600; } -.ui.primary.button:hover { - background: #FF9EF6 !important; - box-shadow: 0 0 15px var(--color-primary) !important; +.ui.primary.button:hover, +.ui.green.button:hover, +.ui.blue.button:hover, +.ui.primary.buttons .button:hover { + background: var(--color-primary-dark-1) !important; + border-color: var(--color-primary-dark-1); } -.ui.input input, .ui.form input[type="text"], .ui.form input[type="email"], .ui.form input[type="password"] { +.ui.red.button, +.ui.negative.button, +.ui.red.buttons .button { + background: transparent !important; + border: 1px solid var(--color-error-border); + color: var(--color-error-text) !important; +} + +.ui.red.button:hover, +.ui.negative.button:hover, +.ui.red.buttons .button:hover { + background: var(--color-error-bg-hover) !important; + border-color: var(--color-error-text); +} + +.ui.buttons { + gap: 0 !important; + border: none !important; + border-radius: var(--radius-control); +} + +.ui.buttons > .button, +.ui.buttons > .ui.button { + margin: 0 !important; + border-radius: 0 !important; +} + +.ui.buttons > .button:not(:first-child), +.ui.buttons > .ui.button:not(:first-child) { + margin-left: -1px !important; +} + +.ui.buttons > .button:first-child, +.ui.buttons > .ui.button:first-child { + border-radius: var(--radius-control) 0 0 var(--radius-control) !important; +} + +.ui.buttons > .button:last-child, +.ui.buttons > .ui.button:last-child { + border-radius: 0 var(--radius-control) var(--radius-control) 0 !important; +} + +.ui.buttons .button.active, +.ui.button.active { + background: var(--color-primary-light-1) !important; + color: var(--color-text-dark) !important; + border-color: var(--color-primary-light-1) !important; + position: relative; + z-index: 1; +} + +.ui.basic.buttons { + border: none; +} + +.ui.labeled.button > .button { + border-radius: var(--radius-control) 0 0 var(--radius-control) !important; +} + +.ui.labeled.button > .label { + border-radius: 0 var(--radius-control) var(--radius-control) 0 !important; + border: 1px solid var(--color-secondary-dark-3); + border-left: 1px solid var(--color-secondary-dark-3); + margin-left: 0 !important; + background: var(--color-secondary-dark-1); + color: var(--color-text); + padding: 0 10px; +} + +.ui.labeled.button > .button:hover + .label { + border-color: var(--color-primary-light-1); +} + +.ui.input input, +.ui.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), +.ui.form textarea, +.ui.selection.dropdown, +.ui.form select { background: var(--color-input-background) !important; - border: 1px solid var(--color-input-border) !important; + border: 1px solid var(--color-secondary-dark-2) !important; color: var(--color-input-text) !important; - padding: 10px !important; + border-radius: var(--radius-control) !important; + transition: border-color 0.2s ease, box-shadow 0.2s ease; } -.ui.input input:focus, .ui.form input:focus { +.ui.input input, +.ui.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { + padding: 10px 12px !important; +} + +.ui.input input:focus, +.ui.form input:focus, +.ui.form textarea:focus, +.ui.selection.dropdown:focus, +.ui.selection.active.dropdown { border-color: var(--color-primary) !important; + box-shadow: 0 0 0 3px var(--color-primary-alpha-20) !important; } .ui.icon.input > i.icon { - color: var(--color-text-light); + color: var(--color-text-light-1); + opacity: 1; +} + +.ui.input:focus-within > i.icon { + color: var(--color-primary); } .ui.icon.input input { @@ -177,80 +701,170 @@ i.icon, svg, path, .octicon { .ui.left.icon.input input { padding-left: 2.67142857em !important; - padding-right: 10px !important; + padding-right: 12px !important; } -.ui.card, .ui.segment, .ui.attached.segment { +::placeholder { + color: var(--color-placeholder-text) !important; + opacity: 1; +} + +.ui.action.input > *, +.ui.action.input > .ui.button, +.ui.action.input > .ui.selection.dropdown, +.ui.action.input > .ui.dropdown, +.ui.action.input > .ui.input > input { + border-radius: 0 !important; +} + +.ui.action.input > :first-child, +.ui.action.input > .ui.input:first-child > input, +.ui.action.input > input:first-child { + border-radius: var(--radius-control) 0 0 var(--radius-control) !important; +} + +.ui.action.input > :last-child, +.ui.action.input > .ui.button:last-child, +.ui.action.input > .ui.selection.dropdown:last-child { + border-radius: 0 var(--radius-control) var(--radius-control) 0 !important; +} + +.ui.action.input > .ui.button, +.ui.action.input > .ui.dropdown { + border-color: var(--color-secondary-dark-2) !important; + margin-left: -1px; +} + +.ui.action.input > .ui.button:hover { + border-color: var(--color-primary-light-1) !important; + z-index: 1; +} + +.ui.action.input > .ui.selection.dropdown { + background: var(--color-primary-light-4) !important; + min-height: 0; +} + +input[type="checkbox"], +input[type="radio"] { + border-color: var(--color-secondary-dark-4); + background: var(--color-input-background); +} + +input[type="checkbox"] { + border-radius: 5px; +} + +input[type="checkbox"]:checked, +input[type="checkbox"]:indeterminate, +input[type="radio"]:checked { + border-color: var(--color-primary); +} + +.ui.card, +.ui.segment, +.ui.attached.segment, +.ui.segments { background: var(--color-box-body) !important; - border: 1px solid var(--color-border); + border: 1px solid var(--color-secondary); box-shadow: none !important; } -.ui.header.segment, .ui.top.attached.header { - background: var(--color-box-header) !important; - border-bottom: 1px solid var(--color-border); +.ui.segment:not(.attached):not(.vertical):not(.basic), +.ui.card, +.ui.segments { + border-radius: var(--radius-surface) !important; +} + +.ui.attached.segment, +.ui.attached.header, +.ui.attached.table, +.ui.attached.menu { + border-radius: 0 !important; +} + +.ui.top.attached.segment, +.ui.top.attached.header, +.ui.top.attached.table, +.ui.top.attached.menu, +.ui.segments > .ui.attached:first-child { + border-radius: var(--radius-surface) var(--radius-surface) 0 0 !important; +} + +.ui.bottom.attached.segment, +.ui.bottom.attached.table, +.ui.segments > .ui.attached:last-child { + border-radius: 0 0 var(--radius-surface) var(--radius-surface) !important; +} + +.ui.segments > .ui.attached:first-child:last-child { + border-radius: var(--radius-surface) !important; +} + +.ui.header.segment, +.ui.attached.header, +.ui.top.attached.header, +.file-header.ui.top.attached.header, +.diff-file-header { + background: var(--color-box-header) !important; + border-bottom: 1px solid var(--color-secondary); +} + +.file-header .file-info { + color: var(--color-text-light-1); +} + +.file-info-entry + .file-info-entry { + border-left-color: var(--color-secondary-dark-3); } .ui.segment.code-view, .view-code, pre, code, .chroma { background-color: var(--color-code-bg) !important; color: #bcbec4 !important; border: 0px !important; - border-radius: 6px !important; +} + +.ui.segment.code-view, +.view-code { + border-radius: 0 0 var(--radius-surface) var(--radius-surface) !important; + overflow: hidden; } .lines-num { - background-color: var(--color-code-sidebar-bg) !important; - color: var(--color-editor-line-number) !important; - border-radius: 0 !important; -} - -.file-view.code-view, -.file-view.code-view table, -.file-view.code-view tbody, -.file-view.code-view tr, -.file-view.code-view td, -.file-view.code-view .lines-num, -.file-view.code-view .lines-code, -.file-view.code-view .chroma, -.file-view.code-view .chroma *, -.lines-num, -.lines-num span, -.lines-code, -.lines-code.chroma, -.lines-code.chroma * { - border-radius: 0 !important; + background-color: var(--color-code-sidebar-bg) !important; + color: var(--color-editor-line-number) !important; } .file-view.code-view table, .file-view.code-view tbody, .file-view.code-view tr { - background: transparent !important; - background-color: transparent !important; - border-collapse: collapse !important; - border-spacing: 0 !important; - border: 0 !important; - border-bottom: 0 !important; - border-bottom-color: transparent !important; + background: transparent !important; + background-color: transparent !important; + border-collapse: collapse !important; + border-spacing: 0 !important; + border: 0 !important; + border-bottom: 0 !important; + border-bottom-color: transparent !important; } .file-view.code-view .lines-num, td.lines-num { - background: var(--color-code-sidebar-bg) !important; - background-color: var(--color-code-sidebar-bg) !important; + background: var(--color-code-sidebar-bg) !important; + background-color: var(--color-code-sidebar-bg) !important; } .file-view.code-view .lines-code, .file-view.code-view .lines-code.chroma, td.lines-code, td.lines-code.chroma { - background: var(--color-code-bg) !important; - background-color: var(--color-code-bg) !important; + background: var(--color-code-bg) !important; + background-color: var(--color-code-bg) !important; } .lines-code.chroma span, .chroma span { - background: transparent !important; - background-color: transparent !important; + background: transparent !important; + background-color: transparent !important; } .chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt { color: #cf8e6d !important; } @@ -271,59 +885,389 @@ td.lines-code.chroma { .chroma .kc { color: #cf8e6d !important; } .chroma .nn { color: #bcbec4 !important; } +.file-view.code-view td.lines-num { + padding: 0 8px !important; + text-align: right !important; +} + +.file-view.code-view td.lines-code { + padding: 0 1px 0 5px !important; +} + +.markup code:not(.chroma):not(pre code), +.markup tt { + background: var(--color-markup-code-inline) !important; + color: var(--color-primary-dark-3) !important; + border-radius: 6px; + padding: 1px 6px; +} + +.markup pre { + border-radius: var(--radius-control) !important; +} + .ui.table { - background: transparent; - border: 1px solid var(--color-border); + background: transparent; + border: 1px solid var(--color-secondary); + border-radius: var(--radius-control); + overflow: hidden; } + .ui.table thead th { - background: rgba(255,255,255,0.05); - color: var(--color-text); - border-bottom: 1px solid var(--color-border-secondary); + background: var(--color-box-header); + color: var(--color-text); + border-bottom: 1px solid var(--color-secondary); + font-weight: 600; } + .ui.table tbody tr { - border-bottom: 1px solid var(--color-border-secondary); + border-bottom: 1px solid var(--color-border-secondary); +} + +.ui.table tbody tr:hover { + background: var(--color-hover); +} + +.markup table tr:nth-child(2n) { + background: var(--color-markup-table-row) !important; } .ui.label { - background: transparent; - border: 1px solid var(--color-border); - color: var(--color-text-light); + background: var(--color-label-bg); + border: 1px solid transparent; + color: var(--color-text); + border-radius: var(--radius-pill) !important; + padding: 3px 10px; + font-weight: 500; +} + +.ui.basic.label { + background: transparent; + border-color: var(--color-secondary-dark-2); + color: var(--color-text-light-1); +} + +.ui.label.primary, +.ui.label.blue { + background: var(--color-primary-alpha-20); + border-color: var(--color-primary-alpha-40); + color: var(--color-primary-dark-2); +} + +.ui.circular.label { + padding: 2px 8px; + min-width: 0; +} + +.repo-topic, +.ui.label.repo-topic { + background: var(--color-primary-alpha-20); + color: var(--color-primary-dark-2); +} + +a.sha, +.ui.sha.label, +.ui.label.sha, +.ui .sha.label, +.sha.label, +.ui.label.commit-id-short, +.commit-id-short { + background: transparent !important; + border: 0 !important; + box-shadow: none !important; + padding: 0 !important; + margin: 0 !important; + color: var(--color-text-light-2) !important; + font-family: var(--fonts-monospace) !important; + font-size: 12px !important; + letter-spacing: 0.02em; +} + +a.sha:hover, +a.ui.sha.label:hover, +a.commit-id-short:hover { + color: var(--color-text-dark) !important; + text-decoration: underline; } .ui.popup, .ui.tooltip, .tippy-box, -[data-tooltip]:before, -[data-tooltip]:after { +[data-tooltip]::before, +[data-tooltip]::after { background: var(--color-menu) !important; color: var(--color-text) !important; - border: 1px solid var(--color-border) !important; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; + border: 1px solid var(--color-secondary-dark-1) !important; + border-radius: var(--radius-control) !important; + box-shadow: 0 12px 32px -8px var(--color-shadow) !important; } .tippy-content { background: var(--color-menu) !important; color: var(--color-text) !important; + border-radius: var(--radius-control); } -.ui.dropdown .menu { +.tippy-arrow { + color: var(--color-menu) !important; +} + +.ui.dropdown .menu, +.overflow-menu-popup { background: var(--color-menu) !important; - border: 1px solid var(--color-border) !important; + border: 1px solid var(--color-secondary-dark-1) !important; + border-radius: var(--radius-control) !important; + box-shadow: 0 16px 40px -12px var(--color-shadow) !important; + padding: 4px !important; + overflow: hidden; } -.ui.dropdown .menu > .item { +.ui.dropdown .menu > .item, +.overflow-menu-popup > .item { color: var(--color-text) !important; - border-top: 1px solid var(--color-border-secondary) !important; + border-top: none !important; + border-radius: 7px !important; } .ui.dropdown .menu > .item:hover, .ui.dropdown .menu > .item.selected, -.ui.dropdown .menu > .item.active { +.overflow-menu-popup > .item:hover { background: var(--color-primary-alpha-20) !important; - color: var(--color-primary) !important; + color: var(--color-primary-dark-2) !important; } -footer { - background: var(--color-footer) !important; - border-top: 1px solid var(--color-border); +.ui.dropdown .menu > .item.active { + background: var(--color-primary-alpha-30) !important; + color: var(--color-primary-dark-2) !important; +} + +.ui.dropdown .menu > .header { + color: var(--color-text-light-1); +} + +footer, +.page-footer { + background: var(--color-footer) !important; + border-top: 1px solid var(--color-secondary); + border-radius: 0 !important; +} + +::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: var(--color-secondary-dark-2); + border: 3px solid var(--color-body); + border-radius: var(--radius-pill); + background-clip: content-box; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--color-primary-light-1); + background-clip: content-box; +} + +::-webkit-scrollbar-corner { + background: transparent; +} + +* { + scrollbar-color: var(--color-secondary-dark-2) transparent; + scrollbar-width: thin; +} + +::selection { + background: var(--color-primary-alpha-40); + color: var(--color-text-dark); +} + +::-moz-selection { + background: var(--color-primary-alpha-40); + color: var(--color-text-dark); +} + +body, +input, +textarea { + caret-color: var(--color-caret); +} + +.ui.loader::before { + border-color: var(--color-secondary) !important; +} + +.ui.loader::after { + border-color: var(--color-primary) transparent transparent !important; +} + +.ui.message { + background: var(--color-box-body) !important; + border: 1px solid var(--color-secondary); + border-radius: var(--radius-control) !important; + color: var(--color-text); + box-shadow: none !important; +} + +.ui.negative.message, +.ui.error.message { + background: var(--color-error-bg) !important; + border-color: var(--color-error-border); + color: var(--color-error-text); +} + +.ui.positive.message, +.ui.success.message { + background: var(--color-success-bg) !important; + border-color: var(--color-success-border); + color: var(--color-success-text); +} + +.ui.warning.message { + background: var(--color-warning-bg) !important; + border-color: var(--color-warning-border); + color: var(--color-warning-text); +} + +.ui.info.message { + background: var(--color-info-bg) !important; + border-color: var(--color-info-border); + color: var(--color-info-text); +} + +.ui.modal { + background: var(--color-box-body) !important; + border: 1px solid var(--color-secondary-dark-1); + border-radius: var(--radius-surface) !important; + box-shadow: 0 24px 64px -16px var(--color-shadow) !important; + overflow: hidden; +} + +.ui.modal > .header { + background: var(--color-box-header) !important; + border-bottom: 1px solid var(--color-secondary); + color: var(--color-text-dark) !important; +} + +.ui.modal > .content { + background: transparent !important; + color: var(--color-text); +} + +.ui.modal > .actions { + background: var(--color-box-header) !important; + border-top: 1px solid var(--color-secondary); +} + +.ui.dimmer { + background: var(--color-overlay-backdrop) !important; + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(3px); +} + +.ui.avatar, +.avatar, +img.avatar { + border-radius: var(--radius-control) !important; +} + +.ui.avatar.tiny, +.avatar.tiny, +img.avatar[width="20"], +img.avatar[width="24"], +img.avatar[width="28"] { + border-radius: 7px !important; +} + +.file-tree-item { + border-radius: 8px; +} + +.file-tree-item:hover { + background: var(--color-hover) !important; +} + +.file-tree-item.selected { + background: var(--color-primary-alpha-20) !important; + color: var(--color-primary-dark-2); +} + +.ui.progress .bar, +.ui.progress.small .bar { + background: var(--color-primary) !important; + border-radius: var(--radius-pill); +} + +#user-heatmap .ContributionCalendar-day[data-level="0"], +.heatmap .ContributionCalendar-day[data-level="0"] { fill: #341D2F !important; } +#user-heatmap .ContributionCalendar-day[data-level="1"], +.heatmap .ContributionCalendar-day[data-level="1"] { fill: #6A2F60 !important; } +#user-heatmap .ContributionCalendar-day[data-level="2"], +.heatmap .ContributionCalendar-day[data-level="2"] { fill: #A8509C !important; } +#user-heatmap .ContributionCalendar-day[data-level="3"], +.heatmap .ContributionCalendar-day[data-level="3"] { fill: #FF82F3 !important; } +#user-heatmap .ContributionCalendar-day[data-level="4"], +.heatmap .ContributionCalendar-day[data-level="4"] { fill: #FFD6FC !important; } + +#user-heatmap rect, +.heatmap rect { + rx: 2 !important; + ry: 2 !important; +} + +kbd { + border-radius: 6px; + border: 1px solid var(--color-secondary-dark-3); + background: var(--color-secondary-dark-1); +} + +.issue.is-open .issue-state-label, +.ui.label.green { + background: var(--color-success-bg) !important; + border-color: var(--color-success-border) !important; + color: var(--color-success-text) !important; +} + +.issue.is-closed .issue-state-label, +.ui.label.red { + background: var(--color-error-bg) !important; + border-color: var(--color-error-border) !important; + color: var(--color-error-text) !important; +} + +.page-content.home .hero .ui.header.title { + font-size: 2.6em; + letter-spacing: -0.02em; +} + +#portfolio-controls { + border-radius: var(--radius-surface); + border-color: var(--color-secondary) !important; +} + +#portfolio-controls .ui.dropdown, +#portfolio-controls select { + border-radius: var(--radius-control) !important; +} + +#search-input { + border-color: var(--color-input-border) !important; +} + +.portfolio-card { + border-radius: var(--radius-surface); + border-color: var(--color-secondary) !important; +} + +.portfolio-card:hover { + border-color: var(--color-secondary-dark-2) !important; +} + +.portfolio-card .topic-tag { + color: var(--color-text-light-1); } diff --git a/public/assets/fonts/sf/sf-pro-display-600.woff2 b/public/assets/fonts/sf/sf-pro-display-600.woff2 new file mode 100644 index 0000000..a8fb58f Binary files /dev/null and b/public/assets/fonts/sf/sf-pro-display-600.woff2 differ diff --git a/public/assets/fonts/sf/sf-pro-display-700.woff2 b/public/assets/fonts/sf/sf-pro-display-700.woff2 new file mode 100644 index 0000000..5b29146 Binary files /dev/null and b/public/assets/fonts/sf/sf-pro-display-700.woff2 differ diff --git a/public/assets/fonts/sf/sf-pro-text-400.woff2 b/public/assets/fonts/sf/sf-pro-text-400.woff2 new file mode 100644 index 0000000..e8639cb Binary files /dev/null and b/public/assets/fonts/sf/sf-pro-text-400.woff2 differ diff --git a/public/assets/fonts/sf/sf-pro-text-400i.woff2 b/public/assets/fonts/sf/sf-pro-text-400i.woff2 new file mode 100644 index 0000000..47e0430 Binary files /dev/null and b/public/assets/fonts/sf/sf-pro-text-400i.woff2 differ diff --git a/public/assets/fonts/sf/sf-pro-text-500.woff2 b/public/assets/fonts/sf/sf-pro-text-500.woff2 new file mode 100644 index 0000000..747e9d7 Binary files /dev/null and b/public/assets/fonts/sf/sf-pro-text-500.woff2 differ diff --git a/public/assets/fonts/sf/sf-pro-text-600.woff2 b/public/assets/fonts/sf/sf-pro-text-600.woff2 new file mode 100644 index 0000000..8c2a438 Binary files /dev/null and b/public/assets/fonts/sf/sf-pro-text-600.woff2 differ diff --git a/public/assets/fonts/sf/sf-pro-text-700.woff2 b/public/assets/fonts/sf/sf-pro-text-700.woff2 new file mode 100644 index 0000000..326c4ee Binary files /dev/null and b/public/assets/fonts/sf/sf-pro-text-700.woff2 differ diff --git a/templates/custom/portfolio.tmpl b/templates/custom/portfolio.tmpl index a783b48..9785076 100644 --- a/templates/custom/portfolio.tmpl +++ b/templates/custom/portfolio.tmpl @@ -5,7 +5,7 @@ {{AppName}}

- hi there. explore our projects below. + hi there. explore our projects below. or change theme to "pinkie" if you don't like skeuomorphism.

@@ -107,6 +107,12 @@ width: 100%; } + @media (max-width: 1100px) { + #portfolio-grid { + grid-template-columns: repeat(2, 1fr); + } + } + @media (max-width: 768px) { #portfolio-grid { grid-template-columns: 1fr; @@ -489,6 +495,12 @@ document.addEventListener('DOMContentLoaded', async () => { const titleEl = card.querySelector('.barcode-title'); fitText(titleEl); }); + + if (document.fonts && document.fonts.load) { + document.fonts.load("60px 'Libre Barcode 39 Text'").then(() => { + grid.querySelectorAll('.barcode-title').forEach(fitText); + }); + } } searchInput.addEventListener('input', applySortAndFilter);