├── 4corner.png ├── README.md ├── fonts ├── Inconsolata-Black.ttf ├── Inconsolata-Bold.ttf ├── Inconsolata-ExtraBold.ttf ├── Inconsolata-ExtraLight.ttf ├── Inconsolata-Light.ttf ├── Inconsolata-Medium.ttf ├── Inconsolata-Regular.ttf ├── Inconsolata-SemiBold.ttf ├── Inconsolata-VariableFont_wdth,wght.ttf ├── SF-Mono-Bold.otf ├── SF-Mono-BoldItalic.otf ├── SF-Mono-Heavy.otf ├── SF-Mono-HeavyItalic.otf ├── SF-Mono-Light.otf ├── SF-Mono-LightItalic.otf ├── SF-Mono-Medium.otf ├── SF-Mono-MediumItalic.otf ├── SF-Mono-Regular.otf ├── SF-Mono-RegularItalic.otf ├── SF-Mono-Semibold.otf ├── SF-Mono-SemiboldItalic.otf ├── zed-mono-extended.ttf └── zed-mono-extendedlight.ttf ├── my-settings.json ├── preview.png ├── rounded-tab.png └── styles ├── 2lines-animation.css ├── animate-tab-border-line.css ├── border-top-animation.css ├── center-line-gradient.css ├── corner-gradient.css ├── cursor.css ├── custom-tab-gradient.css ├── dracula-author.css ├── evondev-dracula.css ├── general.css ├── neon-line-animation.css ├── rounded-line-neon.css ├── rounded-tab.css └── vertical-scrollbar.css /4corner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/4corner.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # README 2 | 3 | ## Preview 4 | 5 | ### Border gradient 6 | 7 | ![](./preview.png) 8 | 9 | ### 4 corner 10 | 11 | ![](./4corner.png) 12 | 13 | ### rounded 14 | 15 | ![](./rounded-tab.png) 16 | 17 | ## Instruction 18 | 19 | Please install extension [Custom CSS and JS Loader](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css) and follow extension instruction 20 | 21 | Copy code from my css files to your custom css file 22 | 23 | Enjoy 24 | -------------------------------------------------------------------------------- /fonts/Inconsolata-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/Inconsolata-Black.ttf -------------------------------------------------------------------------------- /fonts/Inconsolata-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/Inconsolata-Bold.ttf -------------------------------------------------------------------------------- /fonts/Inconsolata-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/Inconsolata-ExtraBold.ttf -------------------------------------------------------------------------------- /fonts/Inconsolata-ExtraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/Inconsolata-ExtraLight.ttf -------------------------------------------------------------------------------- /fonts/Inconsolata-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/Inconsolata-Light.ttf -------------------------------------------------------------------------------- /fonts/Inconsolata-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/Inconsolata-Medium.ttf -------------------------------------------------------------------------------- /fonts/Inconsolata-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/Inconsolata-Regular.ttf -------------------------------------------------------------------------------- /fonts/Inconsolata-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/Inconsolata-SemiBold.ttf -------------------------------------------------------------------------------- /fonts/Inconsolata-VariableFont_wdth,wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/Inconsolata-VariableFont_wdth,wght.ttf -------------------------------------------------------------------------------- /fonts/SF-Mono-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/SF-Mono-Bold.otf -------------------------------------------------------------------------------- /fonts/SF-Mono-BoldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/SF-Mono-BoldItalic.otf -------------------------------------------------------------------------------- /fonts/SF-Mono-Heavy.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/SF-Mono-Heavy.otf -------------------------------------------------------------------------------- /fonts/SF-Mono-HeavyItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/SF-Mono-HeavyItalic.otf -------------------------------------------------------------------------------- /fonts/SF-Mono-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/SF-Mono-Light.otf -------------------------------------------------------------------------------- /fonts/SF-Mono-LightItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/SF-Mono-LightItalic.otf -------------------------------------------------------------------------------- /fonts/SF-Mono-Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/SF-Mono-Medium.otf -------------------------------------------------------------------------------- /fonts/SF-Mono-MediumItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/SF-Mono-MediumItalic.otf -------------------------------------------------------------------------------- /fonts/SF-Mono-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/SF-Mono-Regular.otf -------------------------------------------------------------------------------- /fonts/SF-Mono-RegularItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/SF-Mono-RegularItalic.otf -------------------------------------------------------------------------------- /fonts/SF-Mono-Semibold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/SF-Mono-Semibold.otf -------------------------------------------------------------------------------- /fonts/SF-Mono-SemiboldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/SF-Mono-SemiboldItalic.otf -------------------------------------------------------------------------------- /fonts/zed-mono-extended.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/zed-mono-extended.ttf -------------------------------------------------------------------------------- /fonts/zed-mono-extendedlight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/fonts/zed-mono-extendedlight.ttf -------------------------------------------------------------------------------- /my-settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.fontFamily": "Dank Mono, Arial, Helvetica, sans-serif", 3 | "files.trimTrailingWhitespace": true, 4 | "editor.cursorWidth": 1, 5 | "explorer.confirmDelete": false, 6 | "editor.minimap.renderCharacters": false, 7 | "emmet.includeLanguages": { 8 | "javascript": "javascriptreact", 9 | "vue-html": "html" 10 | }, 11 | "emmet.triggerExpansionOnTab": true, 12 | "editor.tabSize": 2, 13 | "[javascript]": { 14 | "editor.defaultFormatter": "esbenp.prettier-vscode" 15 | }, 16 | "javascript.updateImportsOnFileMove.enabled": "always", 17 | "gitlens.advanced.messages": { 18 | "suppressGitMissingWarning": true, 19 | "suppressLineUncommittedWarning": true 20 | }, 21 | "debug.console.fontSize": 14, 22 | "explorer.confirmDragAndDrop": false, 23 | "files.autoSaveDelay": 5000, 24 | "editor.fontLigatures": true, 25 | "files.exclude": { 26 | "**/.history": true, 27 | "**/.next": true, 28 | "**/.nuxt": true 29 | }, 30 | "liveServer.settings.donotShowInfoMsg": true, 31 | "liveServer.settings.donotVerifyTags": true, 32 | "terminal.integrated.lineHeight": 1.3, 33 | "eslint.alwaysShowStatus": true, 34 | "[jsonc]": { 35 | "editor.defaultFormatter": "esbenp.prettier-vscode" 36 | }, 37 | "editor.suggestSelection": "first", 38 | "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", 39 | "turboConsoleLog.logMessagePrefix": "", 40 | "turboConsoleLog.addSemicolonInTheEnd": true, 41 | "codesnap.backgroundColor": "transparent", 42 | "editor.defaultFormatter": "esbenp.prettier-vscode", 43 | "workbench.editor.untitled.hint": "hidden", 44 | "security.workspace.trust.untrustedFiles": "open", 45 | "editor.inlineSuggest.enabled": true, 46 | "editor.formatOnSave": true, 47 | "terminal.integrated.defaultProfile.osx": "zsh", 48 | "indentRainbow.colors": [ 49 | "rgba(38, 70, 83,0.2)", 50 | "rgba(42, 157, 143,0.2)", 51 | "rgba(233, 196, 106, 0.2)", 52 | "rgba(244, 162, 97,0.2)", 53 | "rgba(231, 111, 81,0.2)", 54 | "rgba(231, 111, 81,0.15)", 55 | "rgba(231, 111, 81,0.1)", 56 | "rgba(231, 111, 81,0.005)" 57 | ], 58 | "indentRainbow.tabmixColor": "rgba(128,32,96,0)", 59 | "indentRainbow.errorColor": "rgba(128,32,32,0)", 60 | "[html]": { 61 | "editor.matchBrackets": "never" 62 | }, 63 | "[css]": { 64 | "editor.matchBrackets": "never" 65 | }, 66 | "typescript.updateImportsOnFileMove.enabled": "always", 67 | "html.format.wrapLineLength": 70, 68 | "editor.unicodeHighlight.invisibleCharacters": false, 69 | "scss.lint.unknownAtRules": "ignore", 70 | "css.lint.unknownAtRules": "ignore", 71 | "gitlens.codeLens.enabled": false, 72 | "editor.cursorBlinking": "expand", 73 | "editor.inlayHints.enabled": "on", 74 | "editor.quickSuggestions": { 75 | "strings": true 76 | }, 77 | "editor.unicodeHighlight.ambiguousCharacters": false, 78 | "editor.lineHeight": 30, 79 | "glean.showConversionWarning": false, 80 | "glean.useExportDefault": true, 81 | "explorer.compactFolders": false, 82 | "color-highlight.markerType": "underline", 83 | "editor.renderLineHighlight": "none", 84 | "window.zoomLevel": 1.75, 85 | "turboConsoleLog.includeFileNameAndLineNum": false, 86 | "editor.wordWrap": "bounded", 87 | "console-ninja.featureSet": "Pro", 88 | "git.openRepositoryInParentFolders": "never", 89 | "editor.guides.bracketPairs": "active", 90 | "editor.guides.bracketPairsHorizontal": false, 91 | "css.lint.unknownProperties": "ignore", 92 | "workbench.editor.centeredLayoutFixedWidth": true, 93 | "editor.renderWhitespace": "none", 94 | "scss.lint.unknownProperties": "ignore", 95 | "workbench.iconTheme": "symbols", 96 | "workbench.startupEditor": "none", 97 | "terminal.integrated.env.osx": {}, 98 | "tailwindCSS.classAttributes": [ 99 | "class", 100 | "className", 101 | "ngClass", 102 | ".*Class", 103 | ".*ClassName" 104 | ], 105 | "editor.cursorSmoothCaretAnimation": "on", 106 | "workbench.colorTheme": "Moonlight II", 107 | "window.newWindowDimensions": "maximized", 108 | "editor.semanticHighlighting.enabled": true, 109 | "workbench.fontAliasing": "antialiased", 110 | "totalTypeScript.hideAllTips": true, 111 | "editor.linkedEditing": true, 112 | "workbench.colorCustomizations": { 113 | "editor.linkedEditingBackground": "#ffffff00", 114 | "selection.background": "#828bb828" 115 | }, 116 | "symbols.hidesExplorerArrows": false, 117 | "[markdown]": { 118 | "editor.wordWrap": "bounded" 119 | }, 120 | "editor.letterSpacing": 0.5, 121 | "terminal.integrated.fontSize": 14, 122 | "terminal.integrated.letterSpacing": 0.5, 123 | "editor.fontSize": 14 124 | } 125 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/preview.png -------------------------------------------------------------------------------- /rounded-tab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/vscode-custom/0627087ae89fa8d92822920f562afb670538152b/rounded-tab.png -------------------------------------------------------------------------------- /styles/2lines-animation.css: -------------------------------------------------------------------------------- 1 | .tab-border-top-container { 2 | -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 3 | mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 4 | mask-composite: xor; 5 | -webkit-mask-composite: xor; 6 | mask-composite: exclude; 7 | padding: 1px; 8 | width: 100% !important; 9 | height: calc(100% - 3px) !important; 10 | background-color: transparent !important; 11 | } 12 | .tab-border-top-container:before { 13 | content: ""; 14 | width: 500px; 15 | height: 500px; 16 | position: absolute; 17 | left: 50%; 18 | top: 50%; 19 | transform: translate(-50%, -50%); 20 | animation: spinner 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite; 21 | background: conic-gradient( 22 | from 0deg at 50% 51.35%, 23 | rgba(185, 215, 243, 0) 0deg, 24 | rgba(185, 215, 243, 0) 289.4deg, 25 | #ffb86c 318.05deg, 26 | #ff65f2 1turn 27 | ), 28 | conic-gradient( 29 | from 180deg at 50% 51.35%, 30 | rgba(185, 215, 243, 0) 0deg, 31 | rgba(185, 215, 243, 0) 287.46deg, 32 | #20e3b2 325.02deg, 33 | #00aefd 1turn 34 | ); 35 | } 36 | @keyframes spinner { 37 | 100% { 38 | transform: translate(-50%, -50%) rotate(1turn); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /styles/animate-tab-border-line.css: -------------------------------------------------------------------------------- 1 | .tabs-container > .tab.active.tab-border-top > .tab-border-top-container { 2 | height: 1.5px !important; 3 | background-image: linear-gradient( 4 | 90deg, 5 | rgba(25, 26, 46, 1) 0%, 6 | rgba(25, 26, 46, 0.12) 100% 7 | ), 8 | linear-gradient( 9 | 90deg, 10 | rgba(229, 71, 255, 0) 36.27%, 11 | rgb(255, 71, 149) 71.37%, 12 | rgb(255, 204, 71) 92.98% 13 | ) !important; 14 | animation: animate 3.5s linear infinite forwards !important; 15 | } 16 | .tabs-container > .tab { 17 | overflow: hidden !important; 18 | } 19 | @keyframes animate { 20 | from { 21 | transform: translateX(-300px) translateZ(0px); 22 | } 23 | to { 24 | transform: translateX(300px) translateZ(0px); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /styles/border-top-animation.css: -------------------------------------------------------------------------------- 1 | .tabs-container > .tab.active.tab-border-top > .tab-border-top-container { 2 | background-size: 400% 400% !important; 3 | background-image: linear-gradient( 4 | -45deg, 5 | #fc6c8f, 6 | #ff2ced, 7 | #ffb86c, 8 | #2cccff, 9 | #20e3b2, 10 | #ffcc70, 11 | #c850c0, 12 | #4158d0 13 | ) !important; 14 | animation: gradient 5s ease alternate infinite !important; 15 | height: 3px !important; 16 | } 17 | @keyframes gradient { 18 | 0% { 19 | background-position: 0% 50%; 20 | } 21 | 50% { 22 | background-position: 100% 50%; 23 | } 24 | 100% { 25 | background-position: 0% 50%; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /styles/center-line-gradient.css: -------------------------------------------------------------------------------- 1 | .tabs-container > .tab.active.tab-border-top > .tab-border-top-container { 2 | height: 1px !important; 3 | background-image: linear-gradient( 4 | to right, 5 | #00aefd, 6 | #20e3b2, 7 | #fcb564, 8 | #ff65f2, 9 | #ff69cf 10 | ); 11 | width: 50% !important; 12 | left: 50% !important; 13 | transform: translate3d(-50%, 0%, 0) !important; 14 | top: 0 !important; 15 | background-size: 200% 200%; 16 | animation: gradient 5s linear infinite; 17 | } 18 | .tabs-container > .tab { 19 | border-radius: 0; 20 | border-color: rgba(255, 255, 255, 0.12) rgb(25, 26, 33) 21 | rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12); 22 | border-style: solid; 23 | border-width: 0; 24 | -webkit-backdrop-filter: blur(6px); 25 | backdrop-filter: blur(6px); 26 | } 27 | .tabs-container > .tab.active { 28 | box-shadow: inset 0 -7px 11px #a48fff1f; 29 | border-top-width: 1px; 30 | } 31 | .tabs-container > .tab:before { 32 | content: ""; 33 | border-radius: inherit; 34 | background: linear-gradient( 35 | 90.01deg, 36 | rgba(229, 156, 255, 0.24) 0.01%, 37 | rgba(186, 156, 255, 0.24) 50.01%, 38 | rgba(156, 178, 255, 0.24) 100% 39 | ); 40 | inset: 0; 41 | position: absolute; 42 | pointer-events: none; 43 | --mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 44 | -webkit-mask: var(--mask); 45 | mask: var(--mask); 46 | -webkit-mask-composite: xor; 47 | mask-composite: exclude; 48 | } 49 | 50 | @keyframes gradient { 51 | 0% { 52 | background-position: 0% 50%; 53 | } 54 | 50% { 55 | background-position: 100% 50%; 56 | } 57 | 100% { 58 | background-position: 0% 50%; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /styles/corner-gradient.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --size: 5px; 3 | } 4 | .monaco-workbench 5 | .part.editor 6 | > .content 7 | .editor-group-container 8 | > .title 9 | .tabs-container 10 | > .tab.active.tab-border-top 11 | > .tab-border-top-container { 12 | width: 100%; 13 | height: 100% !important; 14 | top: 0; 15 | left: 0; 16 | background-color: transparent !important; 17 | } 18 | .monaco-workbench 19 | .part.editor 20 | > .content 21 | .editor-group-container 22 | > .title 23 | .tabs-container 24 | > .tab.active.tab-border-top 25 | > .tab-border-top-container:before, 26 | .monaco-workbench 27 | .part.editor 28 | > .content 29 | .editor-group-container 30 | > .title 31 | .tabs-container 32 | > .tab.active.tab-border-top 33 | > .tab-border-top-container:after { 34 | content: ""; 35 | width: var(--size); 36 | height: var(--size); 37 | position: absolute; 38 | border: 2px solid; 39 | border-image-slice: 1; 40 | } 41 | .monaco-workbench 42 | .part.editor 43 | > .content 44 | .editor-group-container 45 | > .title 46 | .tabs-container 47 | > .tab.active.tab-border-top 48 | > .tab-border-top-container:before { 49 | top: 0; 50 | left: 0; 51 | border-right: 0; 52 | border-bottom: 0; 53 | border-image-source: linear-gradient(-45deg, #4dd78a, #20e3b2); 54 | } 55 | .monaco-workbench 56 | .part.editor 57 | > .content 58 | .editor-group-container 59 | > .title 60 | .tabs-container 61 | > .tab.active.tab-border-top 62 | > .tab-border-top-container:after { 63 | right: 0; 64 | bottom: 0; 65 | border-top: 0; 66 | border-left: 0; 67 | border-image-source: linear-gradient(-45deg, #6a5af9, #d66efd); 68 | } 69 | .monaco-workbench 70 | .part.editor 71 | > .content 72 | .editor-group-container 73 | > .title 74 | .tabs-container 75 | > .tab.active:before, 76 | .monaco-workbench 77 | .part.editor 78 | > .content 79 | .editor-group-container 80 | > .title 81 | .tabs-container 82 | > .tab.active:after { 83 | content: ""; 84 | width: var(--size); 85 | height: var(--size); 86 | position: absolute; 87 | border: 2px solid; 88 | border-image-slice: 1; 89 | } 90 | .monaco-workbench 91 | .part.editor 92 | > .content 93 | .editor-group-container 94 | > .title 95 | .tabs-container 96 | > .tab.active:before { 97 | left: 0; 98 | bottom: 0; 99 | border-top: 0; 100 | border-right: 0; 101 | border-image-source: linear-gradient(-45deg, #fc6c8f, #ffb86c); 102 | } 103 | .monaco-workbench 104 | .part.editor 105 | > .content 106 | .editor-group-container 107 | > .title 108 | .tabs-container 109 | > .tab.active:after { 110 | top: 0; 111 | right: 0; 112 | border-left: 0; 113 | border-bottom: 0; 114 | border-image-source: linear-gradient(-45deg, #098dff, #2cccff); 115 | } 116 | -------------------------------------------------------------------------------- /styles/cursor.css: -------------------------------------------------------------------------------- 1 | .cursors-layer .cursor { 2 | background-image: linear-gradient( 3 | 245deg, 4 | #fcb564, 5 | #ff65f2, 6 | #d66efd 7 | ) !important; 8 | } 9 | -------------------------------------------------------------------------------- /styles/custom-tab-gradient.css: -------------------------------------------------------------------------------- 1 | .monaco-workbench 2 | .part.editor 3 | > .content 4 | .editor-group-container 5 | > .title 6 | .tabs-container { 7 | padding: 8px; 8 | gap: 8px; 9 | } 10 | .monaco-workbench 11 | .part.editor 12 | > .content 13 | .editor-group-container 14 | > .title 15 | .tabs-container 16 | > .tab.sizing-fit { 17 | background-color: #21222c !important; 18 | border-radius: 4px; 19 | } 20 | .tab.tab-actions-right.sizing-fit.has-icon.tab-border-top.active .tab-label { 21 | position: relative; 22 | } 23 | .tab.tab-actions-right.sizing-fit.has-icon.tab-border-top.active:before { 24 | content: ""; 25 | position: absolute; 26 | background: #21222c; 27 | top: 50%; 28 | left: 50%; 29 | width: calc(100% - 2px); 30 | height: calc(100% - 2px); 31 | border-radius: inherit; 32 | transform: translate(-50.1%, -50.1%); 33 | border-radius: inherit; 34 | } 35 | .monaco-workbench 36 | .part.editor 37 | > .content 38 | .editor-group-container 39 | > .title 40 | .tabs-container 41 | > .tab.sizing-fit.active { 42 | background-image: linear-gradient( 43 | 45deg, 44 | #fcb564, 45 | #ff65f2, 46 | #d66efd, 47 | #6a5af9, 48 | #2cccff, 49 | #20e3b2 50 | ); 51 | } 52 | /* hide border top */ 53 | .monaco-workbench 54 | .part.editor 55 | > .content 56 | .editor-group-container 57 | > .title 58 | .tabs-container 59 | > .tab.active.tab-border-top 60 | > .tab-border-top-container { 61 | display: none !important; 62 | } 63 | -------------------------------------------------------------------------------- /styles/dracula-author.css: -------------------------------------------------------------------------------- 1 | body 2 | > div[class*="Dracula-evondev-author"] 3 | :where(.mtk11, .mtk16, .mtk6, .mtk3, .mtk15) { 4 | color: transparent; 5 | -webkit-background-clip: text; 6 | background-clip: text; 7 | -webkit-text-fill-color: transparent; 8 | } 9 | 10 | body > div[class*="Dracula-evondev-author"] :where(.mtk26) { 11 | color: transparent; 12 | -webkit-background-clip: text; 13 | background-clip: text; 14 | -webkit-text-fill-color: transparent; 15 | background-image: linear-gradient(to right, #ff1bd1, #ff69cf, #ffb86c); 16 | } 17 | 18 | body > div[class*="Dracula-evondev-author"] :where(.mtk11) { 19 | background-image: linear-gradient(to bottom, #fc806c, #ff1bd1); 20 | } 21 | body > div[class*="Dracula-evondev-author"] :where(.mtk6) { 22 | background-image: linear-gradient(-45deg, #4dd78a, #20e3b2); 23 | } 24 | body > div[class*="Dracula-evondev-author"] :where(.mtk16) { 25 | background-image: linear-gradient(to bottom, #00fdff, #2979ff); 26 | } 27 | body > div[class*="Dracula-evondev-author"] :where(.mtk3) { 28 | background-image: linear-gradient(to bottom, #ffb86c, #ff979a); 29 | } 30 | 31 | body > div[class*="Dracula-evondev-author"] :where(.mtk15) { 32 | background-image: linear-gradient(to bottom, #bd98ff, #978df8); 33 | } 34 | body 35 | > div[class*="Dracula-evondev-author"] 36 | :where(.mtk7, .mtk13, .mtk18, .mtk8) { 37 | color: #cbdaff; 38 | } 39 | body > div[class*="Dracula-evondev-author"] .mtkb { 40 | -webkit-font-smoothing: auto; 41 | font-weight: normal; 42 | } 43 | body > div[class*="Dracula-evondev-author"] .view-line { 44 | -webkit-font-smoothing: default; 45 | } 46 | .editor-instance[data-mode-id="markdown"] .view-line, 47 | .editor-instance[data-mode-id="plaintext"] .view-line { 48 | font-family: "SF Mono", Arial, Helvetica, sans-serif; 49 | font-size: 13px; 50 | } 51 | body > div[class*="Dracula-evondev-author"] :where(.mtk14) { 52 | color: #cbdaff; 53 | } 54 | body > div[class*="Dracula-evondev-author"] :where(.mtk26) { 55 | font-family: "SF mono"; 56 | } 57 | body > div[class*="Dracula-evondev-author"] :where(.mtk27) { 58 | font-family: "Zed mono"; 59 | } 60 | -------------------------------------------------------------------------------- /styles/evondev-dracula.css: -------------------------------------------------------------------------------- 1 | /* Dracula theme */ 2 | :root { 3 | --gradient-dir1: to top; 4 | --gradient-dir2: to right; 5 | --gradient-dir3: to left; 6 | --gradient-dir4: to left; 7 | --gradient-dir5: to top left; 8 | --gradient-dir6: to left top; 9 | --size: 5px; 10 | --border-size: 2.5px; 11 | --gradient-primary: #fcb564, #ff65f2, #d66efd; 12 | --gradient-secondary: linear-gradient(245deg, #fcb564, #ff65f2); 13 | } 14 | body 15 | > div[class*="Dracula-"] 16 | :where(.mtk5, .mtk9, .mtk10, .mtk15, .mtk16, .mtk17, .mtk26) { 17 | color: transparent; 18 | -webkit-background-clip: text; 19 | background-clip: text; 20 | -webkit-text-fill-color: transparent; 21 | } 22 | body > div[class*="Dracula-"] :where(.mtk10, .mtk15) { 23 | background-image: linear-gradient(to bottom, #fc806c, #ff1bd1); 24 | } 25 | body > div[class*="Dracula-"] :where(.mtk5, .mtk26) { 26 | background-image: linear-gradient(to right top, #4dd78a, #20e3b2); 27 | } 28 | body > div[class*="Dracula-"] :where(.mtk26) { 29 | font-style: italic; 30 | } 31 | body > div[class*="Dracula-"] :where(.mtk9, .mtk17) { 32 | background-image: linear-gradient(to bottom, #00fdff, #2979ff); 33 | } 34 | body > div[class*="Dracula-"] :where(.mtk16) { 35 | background-image: linear-gradient(to bottom, #9a86fd, #6a5af9); 36 | } 37 | body > div[class*="Dracula-"] :where(.mtk3) { 38 | color: #92b4d5; 39 | } 40 | 41 | body > div[class*="Dracula-"] :where(.mtk18, .mtk7) { 42 | color: #cbdaff; 43 | } 44 | 45 | body > div[class*="Dracula-"] :where(.mtk13) { 46 | color: white; 47 | } 48 | -------------------------------------------------------------------------------- /styles/general.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --tab-gradient1: #407cff 318deg, #da8bff 1turn; 3 | --tab-gradient2: #ff65f2 318deg, #fcb564 1turn; 4 | --size: 1.5px; 5 | --duration: 3s; 6 | --general-gradient-secondary: #fcb564, #ff65f2, #ff69cf; 7 | --ease: cubic-bezier(0.445, 0.05, 0.55, 0.95); 8 | } 9 | 10 | body 11 | > div 12 | .part.editor 13 | > .content 14 | .editor-group-container 15 | > .title 16 | .tabs-container 17 | > .tab { 18 | border-right: 0 !important; 19 | } 20 | 21 | [class*="bracket-highlighting"] { 22 | font: inherit !important; 23 | font-family: "Inconsolata" !important; 24 | font-size: calc(100% + 1px) !important; 25 | font-weight: 400 !important; 26 | } 27 | 28 | .monaco-workbench 29 | .activitybar 30 | > .content 31 | :not(.monaco-menu) 32 | > .monaco-action-bar 33 | .action-item.checked 34 | .active-item-indicator:before { 35 | border: 0; 36 | width: 1.5px; 37 | height: 100%; 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | background-image: linear-gradient( 42 | to bottom, 43 | var(--general-gradient-secondary) 44 | ); 45 | } 46 | 47 | .monaco-workbench 48 | .activitybar 49 | > .content 50 | :not(.monaco-menu) 51 | > .monaco-action-bar 52 | .badge 53 | .badge-content { 54 | background-image: linear-gradient(45deg, var(--general-gradient-secondary)); 55 | } 56 | .monaco-workbench .monaco-editor .cursors-layer .cursor { 57 | background-image: linear-gradient(245deg, var(--general-gradient-secondary)); 58 | } 59 | .monaco-workbench .monaco-editor .inline-folded:after { 60 | content: ""; 61 | } 62 | .tab-border-top-container { 63 | -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 64 | mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 65 | mask-composite: xor; 66 | -webkit-mask-composite: xor; 67 | mask-composite: exclude; 68 | padding: var(--size); 69 | width: calc(100% - 1px) !important; 70 | height: calc(100% - 1px) !important; 71 | background-color: transparent !important; 72 | border-radius: inherit; 73 | box-sizing: border-box; 74 | } 75 | .tab-border-top-container:before { 76 | content: ""; 77 | width: 300px; 78 | height: 300px; 79 | position: absolute; 80 | left: 50%; 81 | top: 50%; 82 | transform: translate(-50%, -50%); 83 | 84 | animation: spinner var(--duration) cubic-bezier(0.445, 0.05, 0.55, 0.95) 85 | infinite; 86 | background: conic-gradient( 87 | from 0deg at 50% 51.35%, 88 | rgba(185, 215, 243, 0) 0deg, 89 | rgba(185, 215, 243, 0) 289.4deg, 90 | var(--tab-gradient1) 91 | ), 92 | conic-gradient( 93 | from 180deg at 50% 51.35%, 94 | rgba(185, 215, 243, 0) 0deg, 95 | rgba(185, 215, 243, 0) 287.46deg, 96 | var(--tab-gradient2) 97 | ); 98 | border-radius: inherit; 99 | } 100 | @keyframes spinner { 101 | 100% { 102 | transform: translate(-50%, -50%) rotate(1turn); 103 | } 104 | } 105 | 106 | .tab { 107 | overflow: hidden; 108 | } 109 | .tab.active { 110 | border-radius: 100px !important; 111 | box-shadow: inset 0 1px 1px 0 rgba(199, 211, 234, 0.12), 112 | inset 0 24px 48px 0 rgba(199, 211, 234, 0.05), 113 | 0 24px 32px 0 rgba(6, 6, 14, 0.7); 114 | } 115 | -------------------------------------------------------------------------------- /styles/neon-line-animation.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --line-width: 1px; 3 | --line-color: #adbbff; 4 | --start-angle: 0deg; 5 | --delay: 0s; 6 | --easing: linear; 7 | --angle: 0deg; 8 | } 9 | @property --angle { 10 | syntax: ""; 11 | inherits: false; 12 | initial-value: 0deg; 13 | } 14 | .tab.active { 15 | border-radius: 20px !important; 16 | box-shadow: inset 0 1px 1px 0 rgba(199, 211, 234, 0.12), 17 | inset 0 24px 48px 0 rgba(199, 211, 234, 0.05), 18 | 0 24px 32px 0 rgba(6, 6, 14, 0.7); 19 | } 20 | .tab-border-top-container { 21 | animation: spinner 6s var(--easing) infinite, 22 | opacityz 3s var(--easing) infinite; 23 | filter: drop-shadow(0 0 10px #adbbff); 24 | width: 100% !important; 25 | height: 100% !important; 26 | background-color: transparent !important; 27 | filter: drop-shadow(0 0 10px var(--line-color)); 28 | border-radius: inherit; 29 | } 30 | 31 | .tab-border-top-container:before { 32 | content: ""; 33 | position: absolute; 34 | inset: 0; 35 | border-radius: inherit; 36 | padding: var(--line-width); 37 | background: conic-gradient( 38 | from calc(var(--angle) + var(--start-angle)), 39 | transparent 0, 40 | var(--line-color) 20%, 41 | transparent 25% 42 | ); 43 | -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 44 | mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 45 | mask-composite: xor; 46 | -webkit-mask-composite: xor; 47 | mask-composite: exclude; 48 | animation: inherit; 49 | } 50 | @keyframes opacityz { 51 | 0% { 52 | opacity: 0.75; 53 | } 54 | 55 | 50% { 56 | opacity: 1; 57 | } 58 | 100% { 59 | opacity: 0.75; 60 | } 61 | } 62 | @keyframes spinner { 63 | 100% { 64 | --angle: 360deg; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /styles/rounded-line-neon.css: -------------------------------------------------------------------------------- 1 | .tab-border-bottom-container, 2 | .tab-border-top-container { 3 | -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 4 | mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 5 | mask-composite: xor; 6 | -webkit-mask-composite: xor; 7 | mask-composite: exclude; 8 | padding: 1.1px; 9 | width: 100% !important; 10 | height: calc(100% - 1px) !important; 11 | background-color: transparent !important; 12 | border-radius: inherit; 13 | box-sizing: border-box; 14 | } 15 | .tab-border-bottom-container:before, 16 | .tab-border-top-container:before { 17 | content: ""; 18 | width: 500px; 19 | height: 500px; 20 | position: absolute; 21 | left: 50%; 22 | top: 50%; 23 | transform: translate(-50%, -50%); 24 | animation: spinner 3s cubic-bezier(0, 0.8, 0.95, 1) infinite; 25 | background: conic-gradient( 26 | from 0deg at 50% 51.35%, 27 | rgba(185, 215, 243, 0) 0deg, 28 | rgba(185, 215, 243, 0) 289.4deg, 29 | #407cff 318deg, 30 | #da8bff 1turn, 31 | #fb7185 2turn 32 | ), 33 | conic-gradient( 34 | from 180deg at 50% 51.35%, 35 | rgba(185, 215, 243, 0) 0deg, 36 | rgba(185, 215, 243, 0) 287.46deg, 37 | #407cff 318deg, 38 | #da8bff 1turn, 39 | #fb7185 2turn 40 | ); 41 | border-radius: inherit; 42 | } 43 | @keyframes spinner { 44 | 100% { 45 | transform: translate(-50%, -50%) rotate(1turn); 46 | } 47 | } 48 | .tab { 49 | overflow: hidden; 50 | } 51 | .tab.active { 52 | border-radius: 100px !important; 53 | box-shadow: inset 0 1px 1px 0 rgba(199, 211, 234, 0.12), 54 | inset 0 24px 48px 0 rgba(199, 211, 234, 0.05), 55 | 0 24px 32px 0 rgba(6, 6, 14, 0.7); 56 | } 57 | -------------------------------------------------------------------------------- /styles/rounded-tab.css: -------------------------------------------------------------------------------- 1 | .tabs-container > .tab { 2 | border-right: 0 !important; 3 | } 4 | .tabs-and-actions-container { 5 | padding: 4px !important; 6 | } 7 | 8 | .tabs-container { 9 | gap: 8px !important; 10 | } 11 | .tabs-container > .tab.active.tab-border-top > .tab-border-top-container { 12 | --general-gradient-secondary: #fcb564, #ff65f2, #ff69cf; 13 | height: 0.5px !important; 14 | background-image: linear-gradient( 15 | to right, 16 | var(--general-gradient-secondary) 17 | ); 18 | width: 50% !important; 19 | left: 50% !important; 20 | transform: translate3d(-50%, 0%, 0) !important; 21 | top: -1px !important; 22 | } 23 | .tabs-container > .tab { 24 | border-radius: 100px; 25 | border-color: rgba(255, 255, 255, 0.12) rgb(25, 26, 33) 26 | rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12); 27 | border-style: solid; 28 | border-width: 1px 0 0 0; 29 | } 30 | -------------------------------------------------------------------------------- /styles/vertical-scrollbar.css: -------------------------------------------------------------------------------- 1 | .editor-container .monaco-scrollable-element > .scrollbar.vertical > .slider { 2 | background-image: linear-gradient(to top, #ffb86c, #ff6bcb); 3 | width: 3px !important; 4 | } 5 | --------------------------------------------------------------------------------