Skip to content

Instantly share code, notes, and snippets.

@HelloWorld017

HelloWorld017/files-background.less

Created July 7, 2018 14:07
Show Gist options
  • Save HelloWorld017/17bd4418183b28059e7718ef69508f4a to your computer and use it in GitHub Desktop.
Save HelloWorld017/17bd4418183b28059e7718ef69508f4a to your computer and use it in GitHub Desktop.
Download ZIP
Khinenw's Atom theme
Raw
files-background.less
li[is=tree-view-file].file.entry.list-item:before {
position: absolute;
content: '';
top: 0;
left: -100%;
width: 300%;
height: 100%;
z-index: 0;
background-color: #009688;
}
li[is=tree-view-file].file.entry.list-item {
color: #fff;
}
li[is=tree-view-directory].directory.entry.list-nested-item.status-added:before, li[is=tree-view-file].file.entry.list-item.status-added:before{
position: absolute;
content: '';
top: 0;
left: -100%;
width: 300%;
height: 100%;
z-index: 0;
background-color: #8bc34a;
}
li[is=tree-view-directory].directory.entry.list-nested-item div.header:before {
position: absolute;
content: '';
top: 0;
left: -100%;
width: 300%;
height: 100%;
z-index: 0;
background-color: #e3b93c;
}
li[is=tree-view-directory].directory.entry.list-nested-item div.header {
color: #fff;
}
Raw
indent-number.less
.invisible-character.hard-tab::before {
content: '';
}
.indent-number(@counter) when (@counter > 0) {
.indent-number((@counter - 1));
.invisible-character.hard-tab.leading-whitespace:nth-child(@{counter})::before {
content: ~"'@{counter}'";
}
}
.indent-number(10);
Raw
powerline.less
/*
Name: Atom Powerline Style
Version: v2.3
Author: Khinenw (@HelloWorld017)
License: MIT
*/
// ............................................................
// User Variables
// ............................................................
@powerline-skip-left: 0; //Skipping-Linter
@powerline-skip-right: 0;
@linter-patch: false;
// Theme
@theme: "solarized";
@applicator:
status-bar-vim-mode-visual #ffc107,
status-bar-vim-mode-insert #2196f3,
status-bar-vim-mode-normal #8bc34a;
// ............................................................
// Linter-patch
// ............................................................
.linter-patch(@linter-patch) when (@linter-patch = true){
linter-bottom-container {
position: fixed;
top: 0;
right: 0;
}
}
.linter-patch(@linter-patch);
// ............................................................
// Default Theme
// ............................................................
@theme-default-black: #212121;
@theme-default-white: #f5f5f5;
@theme-default-info: #2196f3;
@theme-default-anchor-light: #c0c1c2;
@theme-default-anchor-light-hover: #e0e1e2;
@theme-default-anchor: #455a64;
@theme-default-anchor-hover: #263238;
@theme-default-background: #424242;
//Left Status Background
@theme-default-left: #2196f3, #757575, #616161;
//Right Status Background (From right items to left items)
@theme-default-right: #ffff00, #ffc107, #f9a825, #616161, #424242, #212121;
// ............................................................
// Borealis Theme
// ............................................................
@theme-borealis-black: #212121;
@theme-borealis-white: #f5f5f5;
@theme-borealis-info: #2196f3;
@theme-borealis-anchor-light: #c0c1c2;
@theme-borealis-anchor-light-hover: #e0e1e2;
@theme-borealis-anchor: #455a64;
@theme-borealis-anchor-hover: #263238;
@theme-borealis-background: #f5f5f5;
//Left Status Background
@theme-borealis-left: #2196f3, #1976d2, #0d47a1;
//Right Status Background (From right items to left items)
@theme-borealis-right: #1de9b6, #009688, #00796b, #004d40, #424242, #212121;
// ............................................................
// Solarized Theme
// ............................................................
@theme-solarized-black: #002b36;
@theme-solarized-white: #fdf6e3;
@theme-solarized-info: #268bd2;
@theme-solarized-anchor-light: #eee8d5;
@theme-solarized-anchor-light-hover: #fdf6e3;
@theme-solarized-anchor: #002b36;
@theme-solarized-anchor-hover: #586e75;
@theme-solarized-background: #002b36;
//Left Status Background
@theme-solarized-left: #dc322f, #cb4b16, #b58900;
//Right Status Background (From right items to left items)
@theme-solarized-right: #073642, #094959, #586e75, #657b83, #758085, #839496, #93a1a1, #ccc8b5, #fdf6e3;
// ............................................................
// Sugar Theme
// ............................................................
@theme-sugar-black: #212121;
@theme-sugar-white: #fafafa;
@theme-sugar-info: #268bd2;
@theme-sugar-anchor-light: #eeeeee;
@theme-sugar-anchor-light-hover: #f5f5f5;
@theme-sugar-anchor: #212121;
@theme-sugar-anchor-hover: #303030;
@theme-sugar-background: linear-gradient(to right, #3494e6, #ec6ead);
//Left Status Background
@theme-sugar-left: rgba(0, 0, 0, .5), rgba(0, 0, 0, .4), rgba(0, 0, 0, .3), rgba(0, 0, 0, .2);
//Right Status Background (From right items to left items)
@theme-sugar-right: rgba(0, 0, 0, .1), rgba(0, 0, 0, .15), rgba(0, 0, 0, .2), rgba(0, 0, 0, .25), rgba(0, 0, 0, .3),
rgba(0, 0, 0, .35), rgba(0, 0, 0, .4), rgba(0, 0, 0, .45), rgba(0, 0, 0, .5),
rgba(0, 0, 0, .55);
// ............................................................
// Apply Theme
// ............................................................
@status-bar-left-colors-key: "theme-@{theme}-left";
@status-bar-left-colors: @@status-bar-left-colors-key;
@status-bar-right-colors-key: "theme-@{theme}-right";
@status-bar-right-colors: @@status-bar-right-colors-key;
@background-key: "theme-@{theme}-background";
@background: @@background-key;
@anchor-key: "theme-@{theme}-anchor";
@anchor: @@anchor-key;
@anchor-hover-key: "theme-@{theme}-anchor-hover";
@anchor-hover: @@anchor-hover-key;
@anchor-light-key: "theme-@{theme}-anchor-light";
@anchor-light: @@anchor-light-key;
@anchor-light-hover-key: "theme-@{theme}-anchor-light-hover";
@anchor-light-hover: @@anchor-light-hover-key;
@info-key: "theme-@{theme}-info";
@info: @@info-key;
@white-key: "theme-@{theme}-white";
@white: @@white-key;
@black-key: "theme-@{theme}-black";
@black: @@black-key;
// ............................................................
// Edit default Status Bar
// ............................................................
.footer {
height: 26px !important;
.panel-footer {
border: 0 !important;
padding: 0 !important;
}
}
.status-bar-right, .status-bar-left {
height: 100% !important;
}
status-bar {
background: @background !important;
height: 26px !important;
min-height: 0 !important;
.text-info {
color: @info !important;
}
.flexbox-repaint-hack {
padding: 0 !important;
}
}
// ............................................................
// Define Powerline Mixins
// ............................................................
.powerline-item-common {
height: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
position: relative !important;
overflow: visible !important;
line-height: 26px !important;
vertical-align: top !important;
}
.powerline-item(@type) when (@type = left){
.powerline-item-common;
margin-left: -20px !important;
margin-right: 20px !important;
}
.powerline-item(@type) when (@type = right) {
.powerline-item-common;
margin-left: 20px !important;
margin-right: -20px !important;
&:last-child {
margin-right: 0 !important;
}
}
.powerline-tip-common(@background) {
content: '';
width: 0;
height: 0;
border-style: solid;
line-height: 25px;
//width: 18.5px;
//height: 18.5px;
display: inline-block;
position: absolute;
z-index: 1;
}
.powerline-tip(@type, @background, @next) when (@type = left) {
.powerline-tip-common(@background);
transform: rotate(45deg) translateX(-8.5px);
right: -15px;
bottom: -0.5px;
border-width: 0 18.5px 18.5px 0;
.opacity-test-left()
when (red(@background) = red(@next))
and (green(@background) = green(@next))
and (blue(@background) = blue(@next))
{
border-color: transparent rgba(
red(@background),
green(@background),
blue(@background),
alpha(@background) - alpha(@next)
) transparent transparent;
}
.opacity-test-left() when (default()) {
border-color: transparent rgba(
red(@background),
green(@background),
blue(@background),
alpha(@background)
) transparent transparent;
}
.opacity-test-left()
}
.powerline-tip(@type, @background, @next) when (@type = right) {
.powerline-tip-common(@background);
transform: rotate(45deg) translateX(8.5px);
left: -15px;
top: 0;
border-width: 18.5px 0 0 18.5px;
.opacity-test-right()
when (red(@background) = red(@next))
and (green(@background) = green(@next))
and (blue(@background) = blue(@next))
{
border-color: transparent transparent transparent rgba(
red(@background),
green(@background),
blue(@background),
alpha(@background) - alpha(@next)
);
}
.opacity-test-right() when (default()) {
border-color: transparent transparent transparent rgba(
red(@background),
green(@background),
blue(@background),
alpha(@background)
);
}
.opacity-test-right()
}
.powerline-text(@background) {
color: contrast(@background, @black, @white) !important;
z-index: 2 !important;
}
.powerline-text-tip(@type, @isFirst) when (@type = left) {
.equals(@type, left, 1, -1); .-return(@numType) {
.equals(@isFirst, true, 1, -1); .-return(@numFirst) {
@size: 25px + 5px * @numType * @numFirst;
}
}
padding-@{type}: @size !important;
}
.powerline-text-tip(@type, @isFirst) when (@type = right) {
padding-left: 10px;
padding-right: 10px;
}
.powerline-anchor(@background) {
color: contrast(@background, @anchor, @anchor-light) !important;
&:hover {
color: contrast(@background, @anchor-hover, @anchor-light-hover) !important;
text-decoration: underline !important;
}
}
// ............................................................
// Apply Powerlines
// ............................................................
.set-powerline-content(@type, @background) {
background: @background;
.powerline-item(@type);
a {
.powerline-anchor(@background);
}
&>* {
.powerline-text(@background);
}
&>*:first-child {
.powerline-text-tip(@type, true);
}
&>*:last-child {
.powerline-text-tip(@type, false);
}
}
.set-powerline(@type) {
.status-bar-@{type} {
overflow: visible;
@colors-key: "status-bar-@{type}-colors";
@colors: @@colors-key;
@skip-key: "powerline-skip-@{type}";
@skip: @@skip-key;
.for(length(@colors)); .-each(@i) {
@j: @i + @skip;
@background: extract(@colors, @i);
&>a:nth-child(@{j}) {
.powerline-anchor(@background);
}
&>*:nth-child(@{j}) {
.set-powerline-content(@type, @background);
&::after {
.next-test-left(@i) when (length(@colors) <= (@i + 1)) {
.powerline-tip(@type, @background, rgba(0, 0, 0, 0));
}
.next-test-left(@i) when (default()) {
.powerline-tip(@type, @background, extract(@colors, @i + 1));
}
.next-test-right(@i) when ((@i - 1) <= 0) {
.powerline-tip(@type, @background, rgba(0, 0, 0, 0));
}
.next-test-right(@i) when (default()) {
.powerline-tip(@type, @background, extract(@colors, @i - 1));
}
.next-test(@type) when (@type = left) {
.next-test-left(@i)
}
.next-test(@type) when (@type = right) {
.next-test-right(@i)
}
.next-test(@type);
}
}
}
.for(@applicator); .-each-of(@applicator-item) {
@applicator-name: extract(@applicator-item, 1);
@applicator-color: extract(@applicator-item, 2);
&>a.@{applicator-name} {
.powerline-anchor(@applicator-color);
}
&>*.@{applicator-name} {
.set-powerline-content(@type, @applicator-color);
&::after {
.powerline-tip(@type, @applicator-color, rgba(0, 0, 0, 0));
}
}
}
}
}
.set-powerline(left);
.set-powerline(right);
// ............................................................
// Helper Mixins
// ............................................................
// .for
// From seven-phrases-max/less.curious
.for(@i, @n) {.-each(@i)}
.for(@n) when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n) {
.for((@i + (@n - @i) / abs(@n - @i)), @n);
}
// .for-each
.for(@array) when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1) {.for-impl_((@i - 1))}
.for-impl_(@i) when (@i > 0) {.-each-of(extract(@array, @i))}
// .equals
.equals(@value, @same, @true, @false) when (default()) {.-return(@false)}
.equals(@value, @same, @true, @false) when (@value = @same) {.-return(@true)}
Raw
seti-append.less
.list-group li:not(.list-nested-item), .list-tree li:not(.list-nested-item), .list-group li.list-nested-item > .list-item, .list-tree li.list-nested-item > .list-item {
line-height: 32px;
}
atom-workspace atom-panel-container .entries.list-tree .file.entry.list-item.selected::before {
height: 32px;
}
atom-workspace:not(.seti-icons) atom-panel-container .entries.list-tree .file.entry.list-item.selected::before {
height: 32px !important;
//margin-top: 2px;
}
atom-workspace:not(.seti-icons) atom-panel-container .entries.list-tree .directory.entry.list-nested-item.selected::before {
height: 32px !important;
//margin-top: 2px;
}
atom-dock.left atom-pane .tab-bar.inset-panel[is="atom-tabs"] {
display: none !important;
&+.item-views .tree-view-root, &+.item-views .tree-view-root .list-tree {
//background: #181d22 !important;
}
}
atom-workspace.seti-roboto {
//font-family: 'Noto Sans CJK KR', serif;
font-family: 'NanumSquare';
}
.github-StatusBarTileController {
display: inline-flex;
}
.tab .title {
font-family: 'D2Coding Powerline';
font-weight: 400;
letter-spacing: normal;
}
[is="tree-view-directory"] *, [is="tree-view-file"] *{
font-weight: 100 !important;
}
atom-text-editor .invisible-character {
color: rgba(255, 255, 255, .1);
}
Raw
styles.less
@import './khinenw-theme/powerline.less';
@import './khinenw-theme/titlebar.less';
@import './khinenw-theme/seti-append.less';
@import './khinenw-theme/indent-number.less';
//@import './khinenw-theme/rainbow-indent.less';
// @import './khinenw-theme/file-background.less';
Raw
titlebar.less
.title-bar-replacer {
&::before {
//content: '\f537 nenw*';
//background: #03a9f4;
//background: linear-gradient(to right, #fc5c7d, #6a82fb);
//color: #Fff;
//font-family: 'Exo 2', 'Material Design Icons', sans-serif;
content: '\f70b nenw*';
background: #f1f2f3;
color: #202020;
font-family: 'Material Design Icons', 'Saira', sans-serif;
font-weight: 200;
font-size: 1.2rem;
-webkit-app-region: no-drag;
display: inline-block;
padding-top: 0;
padding-bottom: 0;
padding-left: 10px;
padding-right: 20px;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
margin-right: 10px;
line-height: 30px;
transition: background-color 0.42s ease;
white-space: nowrap;
}
.app-menu {
//margin-top: 1px;
//font-family: 'Noto Sans CJK KR', sans-serif !important;
margin-bottom: 2px;
font-family: 'Titillium Web', sans-serif !important;
&.alt-down u {
text-decoration: overline !important;
}
}
.menu-box {
font-family: 'Roboto', sans-serif;
padding-top: 5px !important;
padding-bottom: 5px !important;
background: #f1f2f3 !important;
border-radius: 0 !important;
}
.app-menu .menu-label .menu-box .menu-item {
color: #606060;
}
.custom-title {
font-family: 'Noto Sans CJK KR', sans-serif !important;
font-size: 12px !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment