Skip to content

Instantly share code, notes, and snippets.

@rdnt

rdnt/Atom Stylesheet.less

Last active December 4, 2019 08:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rdnt/c8181edbfc565e871652367d0712e7e6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rdnt/c8181edbfc565e871652367d0712e7e6 to your computer and use it in GitHub Desktop.
Download ZIP
SHT Atom Custom Theme OLD
Raw
Atom Stylesheet.less
// Highlight bracket matchers with blue pulsing color
atom-text-editor .bracket-matcher .region {
border-bottom: 2px solid #528bff;
&:before {
content: '';
bottom: -2px;
display: block;
animation: pulse-bracket .5s infinite alternate;
position: absolute;
width: 100%;
height: 2px;
box-shadow: 0px 0px 10px 2px #528bff;
}
}
@keyframes pulse-bracket {
0% {
opacity: .3;
transform: scaleY(.5);
}
100% {
opacity: .6;
transform: scaleY(.8);
}
}
// Remove git & github icons from footer
status-bar {
.icon-git-commit {
// display: none;
padding: 0 2px;
}
.icon-mark-github:before {
// display: none;
padding: 0 2px;
}
}
// Replace three dot icon with 2 dots inside fold markers
.fold-marker {
position: relative;
&:before {
content: '..';
position: absolute;
width: 11px;
height: 11px;
top: 4px;
left: 0px;
font-weight: bold;
line-height: 14px;
font-size: 9px;
}
&:after {
opacity: 0 !important;
pointer-events: none;
}
}
// Hide icons on treeview
.tree-view-root {
.icon-file-text, .icon-file-binary, .icon-book {
padding-left: 4px;
&:before {
display: none;
}
}
}
// Hide markdown icon from atom tab label
.tab-bar .tab {
max-width: 22em;
min-width: 7em;
}
.tab-bar .tab[data-type='MarkdownPreviewView'] {
max-width: 22em;
min-width: 7em;
.title.icon-markdown {
font-size: 0;
line-height: 0;
&:before {
content: attr(data-name) + ' Preview';
font-size: 13.5px;
line-height: 30px;
font-family: inherit;
display: block;
height: 30px;
margin: 0 0.66em;
}
}
// font-size: 0;
// &:before {
// content: attr(data-name);
// // position: absolute;
// // left: 50%;
// // transform: translateX(-50%);
// display: block;
// height: 100%;
// font-size: 12px;
// line-height: 30px;
// font-family: inherit;
// }
}
// Terminal-tab styling
.terminal.xterm {
padding: 12px 12px !important;
top: 0;
}
.terminal-view-color-elements {
[data-color-key="foreground"] {
color: #21c889;
}
}
.xterm-viewport {
&::-webkit-scrollbar-thumb {
border: 3px solid #282c34;
}
&::-webkit-scrollbar-track {
background: #282c34;
}
}
// Highlight Selected and Find & Replace styling
atom-text-editor .highlights {
.highlight.current-result .region.current-result {
border: none !important;
box-shadow:
inset 0 2px #528bff,
inset 2px 0 #528bff,
inset -2px 0 #528bff,
0 2px #528bff !important;
}
.highlight.find-result .region.find-result {
border: none;
border-radius: 0;
box-shadow:
inset 0 2px #528bff,
inset 2px 0 #528bff,
inset -2px 0 #528bff,
0 2px #528bff !important;
}
.highlight .region {
&:after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #3e4451;
opacity: 0;
z-index: 0;
}
}
.highlight-selected.background .region {
border: none;
&:after {
opacity: 1;
}
}
}
//
// atom-text-editor atom-text-editor-minimap:not([stand-alone]), html atom-text-editor-minimap:not([stand-alone]) {
// flex: 0 0 5% !important;
// }
//
// atom-text-editor .gutter[gutter-name="debugger-breakpoint"] {
// display: none;
// }
// Center line numbers
atom-text-editor .gutter-container {
// Fixes box shadows on indentation lines
background: transparent !important;
.gutter .line-number {
padding-left: 20px;
}
}
//
// .gutter-container {
// padding-left: 0px;
// .gutter[gutter-name="diagnostics-gutter"] {
// // background: #f00;
// // display: none;
// position: absolute;
// z-index: 9999;
// left: 3px;
// .custom-decorations {
// // margin-left: 4px;
// .decoration {
// // padding-left: 2px;
// width: 14px;
// // width: 10px;
// .diagnostics-gutter-ui-item {
// // width: 10px;
// .icon {
// padding: 0 2px;
// }
// }
// }
// }
// }
// }
//
//
atom-text-editor {
.indent-guide, .invisible-character {
color: #282c34;
opacity: .75;
}
.cursor-line .indent-guide, .cursor-line .invisible-character {
color: #454c55;
opacity: .75;
}
.invisible-character.indent-guide {
box-shadow: inset 1px 0 0 0 rgba(171, 178, 191, 0.15);
}
.cursor-line .invisible-character.indent-guide {
box-shadow: none;
}
}
Raw
new.less
atom-text-editor .bracket-matcher .region {
border-bottom: 2px solid #528bff;
&:before {
content: '';
bottom: -2px;
display: block;
animation: pulse .5s infinite alternate;
position: absolute;
width: 100%;
height: 2px;
box-shadow: 0px 0px 15px 3px #528bff;
}
}
@keyframes pulse {
0% {
opacity: .3;
transform: scaleY(.5);
}
100% {
opacity: .6;
transform: scaleY(.8);
}
}
// Fix github status bar icon
atom-panel-container.footer {
height: 30px;
}
status-bar {
.icon-git-commit {
padding-right: 4px;
}
.icon-mark-github:before {
bottom: 1px;
background: url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub icon</title><path fill="#9da5b4" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>') no-repeat;
padding-right: 4px;
}
}
.fold-marker {
position: relative;
&:before {
content: '..';
position: absolute;
width: 11px;
height: 11px;
top: 4px;
left: 0px;
text-shadow: 0 0 10px #fff;
font-weight: bold;
line-height: 14px;
font-size: 9px;
}
&:after {
opacity: 0 !important;
pointer-events: none;
}
}
.tree-view-root {
.icon-file-text, .icon-file-binary {
padding-left: 4px;
&:before {
display: none;
}
}
}
.terminal.xterm {
padding: 15px 12px !important;
top: 0;
}
.terminal-view-color-elements {
[data-color-key="foreground"] {
color: #21c889;
}
}
.title-bar-replacer {
margin: 0;
.tbr-title-bar {
.custom-title {
text-align: left;
padding: 0 15px;
color: #9da5b4;
}
.control-wrap {
margin-top: 2px;
i {
height: 29px;
width: 46px;
cursor: default;
&:before {
transition: none;
cursor: default;
}
&:last-child {
padding-right: 2px;
}
&:active:before {
opacity: .75;
}
}
}
}
}
.tab-bar .tab .close-icon {
line-height: 1.45;
}
atom-text-editor .highlights {
.highlight.current-result .region.current-result {
border: none !important;
border-radius: 0;
box-shadow:
inset 0 2px #528bff,
inset 2px 0 #528bff,
inset -2px 0 #528bff,
0 2px #528bff !important;
}
.highlight.selection.flash .region.selection {
z-index: 0;
}
.highlight.find-result .region.find-result {
border: none;
border-radius: 0;
box-shadow:
inset 0 2px #528bff,
inset 2px 0 #528bff,
inset -2px 0 #528bff,
0 2px #528bff !important;
}
.highlight .region {
&:after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #3e4451;
opacity: 0;
z-index: -1000;
}
}
.highlight-selected.background .region {
border: none;
border-radius: 0;
&:after {
opacity: 1;
}
}
.highlight-selected.background .region {
background: transparent;
}
}
atom-text-editor atom-text-editor-minimap:not([stand-alone]), html atom-text-editor-minimap:not([stand-alone]) {
flex: 0 0 5% !important;
}
atom-text-editor .gutter[gutter-name="debugger-breakpoint"] {
display: none;
}
atom-text-editor .gutter .line-number {
padding-left: 20px;
// padding-right: 0px
}
.gutter-container {
padding-left: 0px;
.gutter[gutter-name="diagnostics-gutter"] {
// background: #f00;
// display: none;
position: absolute;
z-index: 9999;
left: 3px;
.custom-decorations {
// margin-left: 4px;
.decoration {
// padding-left: 2px;
width: 14px;
// width: 10px;
.diagnostics-gutter-ui-item {
// width: 10px;
.icon {
padding: 0 2px;
}
}
}
}
}
}
atom-text-editor {
.indent-guide, .invisible-character {
color: #282c34;
opacity: .5;
}
.cursor-line .indent-guide, .cursor-line .invisible-character {
color: #454c55;
}
.invisible-character.indent-guide {
box-shadow: inset 1px 0 #373b41;
box-shadow: inset 1px 0 rgba(255,255,255,.1);
}
.cursor-line .invisible-character.indent-guide {
box-shadow: none;
}
}
Raw
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
*/
atom-workspace atom-text-editor {
atom-text-editor-minimap {
opacity: .75;
}
}
.atom-clock {
.icon-clock::before {
position: absolute;
content: '';
background-image: url('data:image/svg+xml;utf-8,<?xml version="1.0" encoding="UTF-8"?><svg width="256pt" height="256pt" version="1.0" viewBox="0 0 256.000000 256.000000" xmlns="http://www.w3.org/2000/svg"><metadata>Created by potrace 1.15, written by Peter Selinger 2001-2017</metadata><g transform="translate(0 256) scale(.1 -.1)"><path stroke="#fff" stroke-width="0" fill="#9da5b4" d="m1049 2544c-515-93-929-495-1033-1006-21-104-22-405-1-515 72-378 313-703 654-881 205-108 352-142 606-142 205 0 294 13 433 61 438 154 743 502 837 957 21 101 21 413 0 514-54 258-165 468-345 649-191 191-434 318-697 364-106 19-350 18-454-1zm339-348c94-8 176-32 281-82 331-156 533-472 532-834 0-363-201-678-532-834-111-52-190-74-305-84-170-15-318 11-473 84-635 299-722 1156-160 1575 79 59 229 131 319 154 67 17 207 33 250 29 14-2 53-5 88-8z"/><path fill="#9da5b4" d="m1070 1400v-410h410 410v170 170h-240-240v240 240h-170-170v-410z"/></g></svg>');
background-size: 100% 100%;
transform: scale(.85);
margin: 8px 0;
height: 14px;
width: 14px;
}
.atom-clock-time {
position: relative;
padding-left: 20px;
}
}
.status-bar {
height: 31px;
.inline-block {
height: 31px;
}
}
.status-bar-right {
line-height: 30px;
height: 32px;
}
.icon-radio-tower {
position: relative;
&:before {
transform: scale(.85);
}
}
.icon-mark-github {
position: relative;
margin-right: 4px;
&:before {
transform: scale(.90);
}
}
.github-ChangedFilesCount {
&:before {
transform: scale(.91);
}
}
.icon-git-commit {
position: relative;
top: -1px;
margin-right: 4px;
&:before {
transform: scale(.95);
}
}
.syntax--entity.syntax--name.syntax--tag {
color: #ff6e8e;
}
.tab-bar .tab .close-icon:hover {
background-color: #5e97f6;
}
.tree-view {
font-size: 1em;
background: #20252d;
}
.tab-bar .tab .close-icon {
top: 6px;
height: 1.6em;
}
.scrollbar-corner {
width: 14px !important;
}
.scrollbars-visible-always atom-text-editor ::-webkit-scrollbar-thumb, .scrollbars-visible-always ::-webkit-scrollbar-thumb {
background: #4e5666;
}
.scrollbars-visible-always atom-text-editor::-webkit-scrollbar-thumb {
border-radius: 5px;
border: 3px solid #21252b;
}
.scrollbars-visible-always ::-webkit-scrollbar {
width: 14px;
height: 14px;
background-color: #20252d;
border: none;
padding: 0;
}
.scrollbars-visible-always ::-webkit-scrollbar-corner {
background: #20252d !important;
}
.scrollbars-visible-always atom-text-editor ::-webkit-scrollbar-corner {
height: 14px;
width: 14px;
background: #0f0;
}
.scrollbars-visible-always ::-webkit-scrollbar-track {
background: rgba(32, 37, 45, .8) !important;
}
::-webkit-scrollbar-thumb:active {
background-color: #444b59;
position: relative;
border: 3px solid #20252d !important;
border-radius: 5px !important;
background-color: #444b59 !important;
}
.scrollbars-visible-always atom-text-editor ::-webkit-scrollbar-track {
background: #0f0;
display: none;
}
.scrollbars-visible-always atom-text-editor ::-webkit-scrollbar-thumb {
border-color: #20252d;
}
atom-text-editor {
background-color: #20252d;
}
.tab-bar .tab.active[data-type$="Editor"], .tab-bar .tab.active[data-type$="AboutView"], .tab-bar .tab.active[data-type$="TimecopView"], .tab-bar .tab.active[data-type$="StyleguideView"], .tab-bar .tab.active[data-type="MarkdownPreviewView"] {
background-color: #20252d;
}
.github-CommitView-editor {
background-color: #20252d;
}
.atom-dock-toggle-button.left {
transform: rotate(180deg);
width: 200px;
margin-left: -75px;
height: 100px;
z-index: 1;
pointer-events: none;
}
.atom-dock-toggle-button.right {
transform: rotate(180deg);
width: 200px;
margin-right: -75px;
height: 100px;
z-index: 1;
pointer-events: none;
}
.atom-dock-toggle-button.bottom {
transform: rotate(-90deg);
width: 200px;
margin-bottom: -75px;
margin-left: 50px;
height: 200px;
pointer-events: none;
z-index: 1;
}
.atom-dock-toggle-button .atom-dock-toggle-button-inner.left {
transform: rotate(135deg);
border-radius: 2px;
width: 100px;
height: 100px;
pointer-events: auto;
background-color: #20252d;
}
.atom-dock-toggle-button .atom-dock-toggle-button-inner.right {
transform: rotate(-135deg);
border-radius: 2px;
width: 100px;
height: 100px;
pointer-events: auto;
background-color: #20252d;
}
.atom-dock-toggle-button .atom-dock-toggle-button-inner.bottom {
transform: rotate(45deg);
border-radius: 2px;
width: 100px;
height: 100px;
pointer-events: auto;
position: absolute;
z-index: 1;
}
.atom-dock-toggle-button:not(.atom-dock-toggle-button-visible) .atom-dock-toggle-button-inner.left {
transform: rotate(135deg) translate(-35px, -35px) ;
}
.atom-dock-toggle-button:not(.atom-dock-toggle-button-visible) .atom-dock-toggle-button-inner.right {
transform: rotate(-135deg) translate(35px, -35px) ;
}
.atom-dock-toggle-button:not(.atom-dock-toggle-button-visible) .atom-dock-toggle-button-inner.bottom {
transform: rotate(45deg) translate(-35px, 35px) ;
}
.atom-dock-inner:not(.atom-dock-open) .atom-dock-toggle-button.bottom {
margin-bottom: -75px;
}
atom-panel-container.footer {
z-index: 10;
}
.atom-dock-toggle-button.left .icon{
opacity: 1;
transform: rotate(45deg) translateX(600%) !important;
}
.atom-dock-toggle-button.right .icon {
opacity: 1;
transform: rotate(-45deg) translateX(-600%) !important;
}
.atom-dock-toggle-button.bottom .icon {
opacity: 1;
transform: rotate(45deg) translateY(-200%) !important;
}
.atom-dock-mask {
background-color: #20252d;
z-index: 10;
}
.atom-dock-inner.bottom .atom-dock-mask {
background-color: #21252b;
}
.item-views > atom-text-editor.is-focused .scroll-view {
animation: fade-tab .0s cubic-bezier(0,.5,.5,1);
}
@keyframes fade-tab {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
atom-text-editor .cursor {
border-left: 2px solid rgba(200,200,255,.3);
}
.markdown-preview {
font-size: 1.4em !important;
}
atom-text-editor {
.indent-guide, .invisible-character {
color: #20252d;
opacity: .5;
}
.cursor-line .indent-guide, .cursor-line .invisible-character {
color: #454c55;
}
.invisible-character.indent-guide {
box-shadow: inset 1px 0 #373b41;
box-shadow: inset 1px 0 rgba(255,255,255,.1);
}
.cursor-line .invisible-character.indent-guide {
box-shadow: none;
}
}
atom-text-editor .bracket-matcher .region {
border-bottom: 2px solid #528bff;
box-shadow: 0px 0px 15px 1.2px #528bff;
animation: pulse-blue .5s infinite alternate;
height: 1px !important;
margin-top: 25px;
position: relative;
}
.fold-marker {
animation: pulse-white .5s infinite alternate;
height: 5px !important;
width: 10px;
position: absolute;
display: inline;
margin-left: 3px;
margin-top: 12px;
}
atom-text-editor .fold-marker::after {
font-size: 0.8em;
width: 0.8em;
height: 0.8em;
padding-left: 0.2em;
position: absolute;
left: -3px;
margin-top: -5px;
}
@keyframes pulse-blue {
0% {box-shadow: 0px 0px 15px 1.2px #528bff;}
100% {box-shadow: 0px 0px 15px 5px #528bff;}
}
@keyframes pulse-white {
0% {box-shadow: 0px 0px 10px .1px #a2abff;}
100% {box-shadow: 0px 0px 10px .8px #a2abff;}
}
status-bar a, status-bar a:hover {
color: #9da5b4 !important;
}
atom-text-editor .gutter[gutter-name="debugger-breakpoint"] {
display: none;
}
atom-text-editor .gutter .line-number {
color: #636a79;
-webkit-font-smoothing: antialiased;
}
atom-text-editor .foldable .icon-right {
visibility: visible;
}
atom-text-editor .foldable .icon-right::before {
opacity: .8 !important;
}
atom-text-editor .foldable:hover .icon-right::before {
opacity: 1 !important;
}
atom-text-editor .gutter .line-number.cursor-line {
color: #c3cad9;
}
.inline-block a.text-error span {
color: #df6347 !important;
margin-top: -10px;
position: relative;
margin-right: 23px;
margin-left: -3px;
}
.inline-block a.text-error span::before {
animation: pulse-orange .5s infinite alternate;
border-radius: 50%;
position: relative;
width: 17px !important;
height: 17px !important;
margin-top: -2px;
margin-left: 2px;
position: absolute;
background-color: #df6347;
content: '';
}
.diagnostics-gutter-ui-item .icon::before {
border-radius: 50%;
position: relative;
width: 12px !important;
height: 12px !important;
margin-top: 0px;
margin-left: 2px;
position: absolute;
background-color: #df6347;
content: '';
z-index: 100000;
}
.inline-block .text-error {
color: #df6347 !important;
}
.inline-block:hover .text-error span::before {
color: #ff6347 !important;
animation: pulse-red .5s infinite alternate;
}
@keyframes pulse-red {
0% {box-shadow: 0px 0px 10px .1px #ff6347;}
100% {box-shadow: 0px 0px 10px .8px #ff6347;}
}
@keyframes pulse-orange {
0% {box-shadow: 0px 0px 10px .call_user_method px #af6347;}
100% {box-shadow: 0px 0px 10px .8px #af6347;}
}
@keyframes pulse-white {
0% {box-shadow: 0px 0px 10px .1px #b2bbcc;}
100% {box-shadow: 0px 0px 10px .8px #b2bbcc;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment