Skip to content

Stylus Code Editor Settings by konieckropka

Screenshot of Stylus Code Editor Settings

Details

Authorkonieckropka

LicenseNo license

Categorystylus

Created

Updated

Size11 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Full-width CSS editor - hide left panel to maximize your code writing experience. Change font size, style and weight. Use monospace font or fonts with ligatures

Notes

Support & buy me a coffe:
โ˜• www.buymeacoffee.com/konieckropka


๐Ÿญ. ๐—™๐—จ๐—Ÿ๐—Ÿ ๐—ช๐—œ๐——๐—ง๐—› ๐—–๐—ข๐——๐—œ๐—ก๐—š ๐—˜๐——๐—œ๐—ง๐—ข๐—ฅ ๐—ช๐—œ๐—ก๐——๐—ข๐—ช

Give yourself 99.9% width for coding hiding editor sidebar to the left. You can access all options - simply moving the mouse to the left side of editor.

๐Ÿฎ. ๐—–๐—›๐—”๐—ก๐—š๐—˜ ๐—™๐—ข๐—ก๐—ง๐—ฆ

You can set font family, style, weight and stretch.

๐Ÿฏ. ๐—ฉ๐—”๐—ฅ๐—œ๐—”๐—•๐—Ÿ๐—˜ ๐—™๐—ข๐—ก๐—ง๐—ฆ

Carefully selected variable fonts for dynamic range of font-weight and font-stretch

๐Ÿฐ. ๐— ๐—ข๐—ก๐—ข๐—ฆ๐—ฃ๐—”๐—–๐—˜๐—— ๐—™๐—ข๐—ก๐—ง๐—ฆ

Monospaced fonts are great for coding.
Choose between Roboto Mono, Martian Mono, and other...

๐Ÿฑ. ๐—Ÿ๐—œ๐—š๐—”๐—ง๐—จ๐—ฅ๐—˜๐—ฆ

Choose font with ligatures that will enhance your coding experience changing characters like == or != <= => to coding ligatures.

๐Ÿ’™ Every software, script or userstyle I write I do just for fun of it. If you feel my work helped you and made your experience better and want to say "thanks" you can buy me a beer using this page:

๐Ÿบ www.buymeacoffee.com/konieckropka

I hope you like this piece of code and find it useful (ยฌโ€ฟยฌ)

---- AUTHOR ----
konieckropka
Support: https://www.buymeacoffee.com/konieckropka

---- AUTHOR ----

Check out my other userstyles:
https://userstyles.world/user/konieckropka

And also my scripts (greasemonkey/violentmonkey/tampermonkey)
https://greasyfork.org/en/users/1019550-konieckropka

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Stylus Editor - full width editor and hide sidebar
@version        1.1.0

@description    ๐Ÿ’™ Every software, script or userstyle I write I do that just for fun of it.
@description    ๐Ÿ’™ If you feel my work helped you and made your experience better and want to say "thanks"
@description    ๐Ÿบ you can buy me a beer using this page: 


@description    ๐Ÿ’ฒ www.buymeacoffee.com/konieckropka 


@description    ๐Ÿ’™ I hope you like it and find it useful (ยฌโ€ฟยฌ) ๐Ÿ’™

---- AUTHOR ----

@author         konieckropka <konieckropka@konieckropka.eu>
@homepageURL    https://www.buymeacoffee.com/konieckropka
@supportURL     https://www.buymeacoffee.com/konieckropka

---- AUTHOR ----


@description    If you want full-width Stylus editor to maximize your code writing experience, here you go.

@description    This Style will give you 99.5% width for coding hiding editor sidebar to the left. 
@description    You can still access all editing options - simply moving the mouse to the left side of editor.

@description    Check out my other userstyles: 
@description    https://userstyles.world/user/konieckropka

@description    And also my scripts for greasemonkey, violentmonkey or tampermonkey
@description    https://greasyfork.org/en/users/1019550-konieckropka

@preprocessor   stylus
@namespace      userstyles.world/user/konieckropka 
@license        No License


//                  https://lingojam.com/BoldTextGenerator
//                  https://lingojam.com/SmallTextGenerator                                                      

@var select    fontFamily       `font-family` {

                                                    "____ Fแดษดแด›s แดกษชแด›สœ Lษชษขแด€แด›แดœส€แด‡s ____":"default",
                                                    "๐—™๐—ถ๐—ฟ๐—ฎ ๐—–๐—ผ๐—ฑ๐—ฒ / Ligatures / Variable (weight 300..700)":"Fira Code",
                                                    
                                                    " ":"default",
                                                    "____ Vแด€ส€ษชแด€ส™สŸแด‡ า“แดษดแด›s ____":"default",
                                                    "๐—ฅ๐—ผ๐—ฏ๐—ผ๐˜๐—ผ ๐—™๐—น๐—ฒ๐˜… / ":"Roboto Flex",
                                                    "Inconsolata / weight 200..900 | width: 50%..200%":"Inconsolata",
                                                    "Source Code Pro / weight 200..900":"Source Code Pro",
                                                    
                                                    "  ":"default",
                                                    "____ Oแด›สœแด‡ส€ Mแดษดแดsแด˜แด€แด„แด‡แด… Fแดษดแด›s ____":"default",
                                                    "๐—ฅ๐—ผ๐—ฏ๐—ผ๐˜๐—ผ ๐— ๐—ผ๐—ป๐—ผ / (weight)":"Roboto Mono",

                                                    "   ":"default",
                                                    "____ Oแด›สœแด‡ส€ Lแด‡ss EสŸแด‡ษขแด€ษดแด› Fแดษดแด›s ____":"default",
                                                    "๐—–๐—ฟ๐—ถ๐—บ๐˜€๐—ผ๐—ป ๐—ฃ๐—ฟ๐—ผ / (weight 300..700)":"Crimson Pro",
                                                    "๐——๐—ฒ๐—ฐ๐—ผ๐˜ƒ๐—ฎ๐—ฟ ๐—ฅ๐—ฒ๐—ด๐˜‚๐—น๐—ฎ๐—ฟ๐Ÿฎ๐Ÿฐ / (weight 300..700)":"Decovar Regular24",
                                                    "๐— ๐—ฎ๐—ฟ๐˜๐—ถ๐—ฎ๐—ป ๐— ๐—ผ๐—ป๐—ผ / (weight, width)":"Martian Mono",
                                                    "๐— ๐—ผ๐—ป๐˜๐˜€๐—ฒ๐—ฟ๐—ฟ๐—ฎ๐˜ / Not monospace / (weight 100..900)":"Montserrat",
                                                    
                                                    "    ":"default",
                                                    "____ Dแด‡า“แด€แดœสŸแด› Fแดษดแด›s ____":"default",
                                                    "Stylus default font":"default",
                                                    "monospace (your system default font)":"monospace"
                                                }
@var range      fontSize            `font-size`               [14, 1, 100, 1, 'px']
@var range      fontWeight      `font-weight`             [400, 100, 900, 5, '']
@var range      fontStretch     `font-stretch`            [100, 25, 200, 0.1, '%']


@var checkbox   enableHidingMenu   `Full width editor - enable hiding menu`                 1

@var checkbox   overflowMenu       `Menu over editor`                              1
@var checkbox   useAnimations      `Use animations to slide in and slide out sidebar`       1   `
@var range          slideInTime        `Slide in animation time`                                [50, 0, 1000, 10, 'ms']
@var range          slideOutTime       `Slide out animation time`                               [100, 0, 1000, 10, 'ms']
@var range          slideOutDelay      `Slide out delay`                                        [0.1, 0, 10, 0.1, 's']



==/UserStyle== */
@-moz-document  url-prefix("http"), url-prefix("moz-extension://"), url-prefix("chrome-extension://")
{
    
}

@-moz-document  url-prefix("chrome-extension://clngdbkpkpeebahjckkjfobafhncgmne"), url-prefix("http"), url-prefix("moz-extension://"), url-prefix("chrome-extension://")
{
    if(fontFamily != "default")
    {
        @import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700&display=swap");

        @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100..800&display=swap");
        @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wdth,wght@120,100..800&display=swap');
        @import url('https://github.com/googlefonts/roboto-flex/raw/main/fonts/RobotoFlex%5BGRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght%5D.ttf');
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');
        
        
        @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200..900&display=swap');

        //:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

        
        
        @font-face
        {
          font-family:'Roboto Flex'; 
          src:url('https://github.com/googlefonts/roboto-flex/raw/main/fonts/RobotoFlex%5BGRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght%5D.ttf');
        }
        
        @font-face
        {
          font-family:'Decovar Regular24'; 
          src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Decovar-VF.ttf');
        }

        #sections > div.single-editor > div
        {
            font-family: fontFamily, sans-serif!important;
            font-weight: fontWeight!important;
            font-size: fontSize!important;
            font-stretch: fontStretch!important;


            font-variation-settings: "wght" fontWeight!important;
            font-variation-settings: "wdth" fontStretch!important;

            font-variation-settings: 'INLN' 400, 'SWRM' 1000;

            font-optical-sizing: auto;
            font-variation-settings: 'opsz' 123; /* optical sizing */  
        }
    }

    body#stylus-edit section#sections div.single-editor div.CodeMirror > div.CodeMirror-vscrollbar::-webkit-scrollbar
    {
      width: 1.6em!important;
    }
    
    body#stylus-edit section#sections div.single-editor div.CodeMirror > div.CodeMirror-vscrollbar::-webkit-scrollbar-track
    {
      background-color: rgba(53, 51, 51, .8)!important;
      box-shadow: inset 3px 0px 7px rgba(0, 0, 0, 0.3)!important;
    }
    body#stylus-edit section#sections div.single-editor div.CodeMirror > div.CodeMirror-vscrollbar::-webkit-scrollbar-thumb
    {
      width: 20px!important;
      margin: 10px!important;
      padding: 20px!important;

      min-height: 80px!important;
      
      opacity: 1;
      background-color: rgb(217, 218, 220)!important;
      box-shadow:   inset 0.6em 0px 6px rgba(255, 255, 255, 0.7), 
                    inset -0.6em 0px 3px rgba(0, 0, 0, 0.1),
                    0px 4px 14px 10px rgba(0, 0, 0, 0.3)
                    0px -4px 14px 10px rgba(0, 0, 0, 0.3)
                    
                    !important;
      border: 2px solid rgb(151, 151, 151);
      border: 2px solid #353535!important;
      border-radius: 4px;
    }
    
    if(enableHidingMenu == 1)
    {
        :root
        {
            if(useAnimations == 1)
            {
              --kk-stylus-editor-sidebar-transition-left-slide-in: left slideInTime ease-out;
              --kk-stylus-editor-sidebar-transition-left-slide-out: left slideOutTime ease-out slideOutDelay;
              --kk-stylus-editor-sidebar-transition-margin-left-slide-in: margin-left slideInTime ease-out;
              --kk-stylus-editor-sidebar-transition-margin-left-slide-out: margin-left slideOutTime ease-out slideOutDelay;   
            }
            else
            {
              --kk-stylus-editor-sidebar-transition-left-slide-in: none;
              --kk-stylus-editor-sidebar-transition-left-slide-out: none;
              --kk-stylus-editor-sidebar-transition-margin-left-slide-in: none;
              --kk-stylus-editor-sidebar-transition-margin-left-slide-out: none; 
            }
        }


        body#stylus-edit div#header
        {
            background: var(--bg);
            padding-left: 10px;
            position: absolute !important;
            left: calc(var(--header-width) * -0.95);
            transition: var(--kk-stylus-editor-sidebar-transition-left-slide-out);
        }

        body#stylus-edit div#header:hover
        {
            left: 0;
            transition: var(--kk-stylus-editor-sidebar-transition-left-slide-in);
        }

        #sections
        {
            margin-left: calc(var(--header-width) * -0.95);
        }



        if(overflowMenu == 1)
        { 
            #sections
            {
        ...

Reviews

No reviews yet.