dotfiles/atom/styles.less

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */


/*
 * Examples
 * (To see them, uncomment and save)
 */

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
}

// style UI elements inside atom-text-editor
atom-text-editor .cursor {
  // border-color: red;
}

// MY STYLES

atom-ternjs-type {
    border: 1px solid rgba(116, 124, 128, 0.9);
    background: rgba(240, 248, 252, 0.9);       // for light themes
    // background: rgba(42, 63, 75, 0.9);       // for dark themes
}

atom-pane {
    .term3 .terminal {
        font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier;
        -webkit-font-smoothing: none;
        opacity: 0.8;
        -webkit-filter: sepia(25%);
    }
    &.active .term3 .terminal {
        opacity: 1.0;
        -webkit-filter: none;
    }
}

// make only active pane
// atom-pane {
//     opacity: 0.8;
//     &.active {
//         opacity: 1.0;
//     }
// }

atom-notifications {
    opacity: 0.7;
}
atom-notifications:hover {
    opacity: 1.0;
}

#linter-inline {
    //TODO: dark theme
    //TODO: make light theme more like the ternjs one
    background: rgba(160, 160, 160, 1);       // for light themes
    border: 1px solid rgba(42, 63, 75, 0.5);
    opacity: 0.2;
    &:hover {
        opacity: 1.0;
    }
    linter-message {
        .badge {
            border: 1px solid rgba(42, 63, 75, 0.3);
            color: white;
        }
        text-shadow: 0 0 2px rgba(42, 63, 75, 0.7);
    }
}

autocomplete-suggestion-list .suggestion-description .suggestion-description-content {
    display: block;
    overflow: scroll;
    max-height: 20em;
}

atom-panel.modal.overlay.from-top:after {
    // background:rgba(.3,.3,.3,.3);
    background: radial-gradient(at 50% 5%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
    // -webkit-backdrop-filter: blur(5px); /*TODO: enable experimental*/
}

// @keyframes pulsating {
//     0% {
//         opacity:1.0;
//     }
//     50% {
//         opacity:0.8;
//     }
// }
// animation: pulsating 10s steps(500) infinite alternate;
// animation: pulsating 10s steps(50) infinite alternate;

atom-text-editor.editor .cursor {

    .syntax--variable.syntax--language {
        opacity: 0.6;
    }

}