mod-existing-atom-styles.md

Accidental tweaks

Optional Tools To Study

• editor-background ctrl+shift+e to use the wizard

Audio:

• synthwave m3u streaming
• typewriter-sounds

vapor-lofi-future-funk.less

/*
 * My Synth Future Vapor Lo-fi Theme For Atom
 * not sure... but i think the Final is on Github... maybe
 * this is just a replacement for the global style in Atom.io "styles.less"
 * useful link: https://github.com/atom/atom/blob/master/CONTRIBUTING.md#atom-and-packages
 */
// style UI elements inside atom-text-editor
// Too many cooks...
@boogie_down: 'https://thumbs.gfycat.com/UnripeSeveralGoldeneye-max-1mb.gif';
@vaporwave_palms: 'https://media.giphy.com/media/vjsKenoYFAPw4/giphy.gif';
@vaporwave_palms2: 'https://i1.wp.com/www.j3productions.com/wp-content/uploads/2017/01/palmdrive.gif?resize=800%2C800';
@futurefunk_city: 'https://media.giphy.com/media/F9lbLHCE7ZgGc/giphy.gif';
@sunset_drive: 'https://i.imgur.com/yzzGPoL.gif';
@aquarium: 'https://media.giphy.com/media/2dhC3FTquDys8/giphy.gif';
@disco: 'https://media.giphy.com/media/xThuVYIRVVaP3ghJXG/giphy.gif';
@rainy_mood: 'https://levels.io/wp-content/uploads/2015/10/scene1_wall_framed_only-reflection-girl_750px.gif';
@rainy_mood2: 'https://78.media.tumblr.com/6a141d69564a29ac7d4071df5d519808/tumblr_ool7ijML6f1v1aewco1_500.gif';
@night_drive: 'http://images.8tracks.com/imgix/i/009/145/375/tumblr_nmjoeeRUcn1rsdpaso1_540-1750.gif?rect=61,0,417,417&q=65&fit=max&w=320&h=320';
@noir_cig: 'http://data.whicdn.com/images/269929808/original.gif';
@noir_alley: 'https://i.imgur.com/O6nxudm.gif';
@synthwave: 'http://25.media.tumblr.com/0b315c295ba946697538ebad6d02cdc6/tumblr_n1xcy8j32A1rsdpaso1_500.gif';
@wavey: 'http://i.imgur.com/YT2sTLV.gif';
@thinker:'https://cdn.apk-cloud.com/detail/image/com.vaporwave.wallpapershd-w250.png';

atom-text-editor .cursor {
    border-color: cyan;
    border-width: 1px;
}

.tree-view {
    .icon-repo{
        background-color: blue;
        color: white;
        padding:2px;
        border-radius: 2px;
    }
    .icon-file-directory {
        color: purple;
        background-color: #ffe6ff;
        padding:2px;
        border-radius: 2px;
    }
    .icon-file-text, .icon-file-media, .icon-file-code{
        color: magenta;
        background-color: cyan;
        border-radius: 5px;
        padding-right: 100%;
    }
    .icon-book {
        color: white;
        background-color: black;
        padding-right: 4px;
        border-radius: 5px;
        text-align: center;
    }
    .icon-file-binary {
        color: white;
        padding-right: 4px;
        border: solid;
        border-width: 1px;
        border-radius: 5px;
        border-color: gray;
        text-align: center;
    }

    background: url(@vaporwave_palms);
    /* background: url(@synthwave); */ //this is a nice alternate gif
}

.editor:before {
    padding-left: 50px;
    content: "This is 'content' i typed in.. for idk what reason. It just floats here. Its on every tab too.";
    background: url(@wavey) no-repeat center center fixed;
    opacity: 0.1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    background-size: cover;
}

.pane {
    background-color: blue;
    /*background: url(@synthwave) repeat;*/
    background: url(@synthwave) repeat;
    background-size: 100%;
}

.editor {
    background: url(@rainy_mood2) no-repeat;
    background-size: auto 100%;
    text-shadow: 2px 2px black;
    /*background-color: green;*/
    /*
    .cursor-line{
        background-color: black !important;
        color: #419d36 !important;
    }
    */
}

.github-Panel{
    background-color: cyan;
    background: url(@futurefunk_city);
    color: blue;
}
.github-UnstagedChanges{
    background: url(@night_drive);
    background-size: cover;
    color: cyan;
}
.github-StagingView{
    background: url(@noir_alley);
    
    background-size: cover;
    color: orange;
}
.github-CommitView-editor{
    background: black;
    background: url(@noir_cig);
    color: red;
}

// highlighting related
atom-text-editor.editor {
    .selection .region {
        background: rgba(255, 0, 0, 0.3) !important;
    }
    .cursor-line {
        background: rgba(200, 1, 200, .5);
    }
}

.tab-bar{
    background: #d9d9d9;
}