Redesign code structure
This commit is contained in:
Sainnhe Park
parent
1529096320
commit
a88c7afef0
|
|
@ -1,33 +1,2 @@
|
||||||
@primary: #6cb6eb; // primary color used in main texts
|
@import "palette/edge-dark";
|
||||||
@secondary: #d38aea; // secondary color used in some texts and text based buttons
|
@import "template/dark";
|
||||||
@tertiary: #a0c980; // tertiary color used in other colored texts
|
|
||||||
@fg: #c5cdd9;
|
|
||||||
@bg0: #2b2d37;
|
|
||||||
@bg1: #333644;
|
|
||||||
@bg2: #363a49;
|
|
||||||
@bg3: #3a3e4e;
|
|
||||||
@bg4: #404455;
|
|
||||||
@red: #ec7279;
|
|
||||||
@orange: #deb974;
|
|
||||||
@yellow: #deb974;
|
|
||||||
@green: #a0c980;
|
|
||||||
@cyan: #5dbbc1;
|
|
||||||
@blue: #6cb6eb;
|
|
||||||
@purple: #d38aea;
|
|
||||||
@grey: #758094;
|
|
||||||
@red-bg: #55393d;
|
|
||||||
@green-bg: #394634;
|
|
||||||
@blue-bg: #354157;
|
|
||||||
@yellow-bg: #4e432f;
|
|
||||||
@button1: #6cb6eb;
|
|
||||||
@button2: #a0c980;
|
|
||||||
@button-red: #ec7279;
|
|
||||||
@key: @red;
|
|
||||||
@operator: @purple;
|
|
||||||
@string: @green;
|
|
||||||
@value: @green;
|
|
||||||
@type: @yellow;
|
|
||||||
@function: @blue;
|
|
||||||
@special: @cyan;
|
|
||||||
|
|
||||||
@import "base-dark";
|
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,2 @@
|
||||||
@primary: #b8bb26; // primary color used in main texts
|
@import "palette/gruvbox-dark";
|
||||||
@secondary: #fe8019; // secondary color used in some texts and text based buttons
|
@import "template/dark";
|
||||||
@tertiary: #fabd2f; // tertiary color used in other colored texts
|
|
||||||
@fg: #ebdbb2;
|
|
||||||
@bg0: #282828;
|
|
||||||
@bg1: #32302f;
|
|
||||||
@bg2: #3a3735;
|
|
||||||
@bg3: #45403d;
|
|
||||||
@bg4: #504945;
|
|
||||||
@red: #fb4934;
|
|
||||||
@orange: #fe8019;
|
|
||||||
@yellow: #fabd2f;
|
|
||||||
@green: #b8bb26;
|
|
||||||
@cyan: #8ec07c;
|
|
||||||
@blue: #83a598;
|
|
||||||
@purple: #d3869b;
|
|
||||||
@grey: #928374;
|
|
||||||
@red-bg: #4c3432;
|
|
||||||
@green-bg: #3b4439;
|
|
||||||
@blue-bg: #374141;
|
|
||||||
@yellow-bg: #4f422e;
|
|
||||||
@button1: #8ec07c;
|
|
||||||
@button2: #fe8019;
|
|
||||||
@button-red: #fb4934;
|
|
||||||
@key: @red;
|
|
||||||
@operator: @orange;
|
|
||||||
@string: @cyan;
|
|
||||||
@value: @purple;
|
|
||||||
@type: @yellow;
|
|
||||||
@function: @green;
|
|
||||||
@special: @blue;
|
|
||||||
|
|
||||||
@import "base-dark";
|
|
||||||
|
|
|
||||||
31
src/palette/edge-dark.less
Normal file
31
src/palette/edge-dark.less
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
@primary: #6cb6eb; // primary color used in main texts
|
||||||
|
@secondary: #d38aea; // secondary color used in some texts and text based buttons
|
||||||
|
@tertiary: #a0c980; // tertiary color used in other colored texts
|
||||||
|
@fg: #c5cdd9;
|
||||||
|
@bg0: #2b2d37;
|
||||||
|
@bg1: #333644;
|
||||||
|
@bg2: #363a49;
|
||||||
|
@bg3: #3a3e4e;
|
||||||
|
@bg4: #404455;
|
||||||
|
@red: #ec7279;
|
||||||
|
@orange: #deb974;
|
||||||
|
@yellow: #deb974;
|
||||||
|
@green: #a0c980;
|
||||||
|
@cyan: #5dbbc1;
|
||||||
|
@blue: #6cb6eb;
|
||||||
|
@purple: #d38aea;
|
||||||
|
@grey: #758094;
|
||||||
|
@red-bg: #55393d;
|
||||||
|
@green-bg: #394634;
|
||||||
|
@blue-bg: #354157;
|
||||||
|
@yellow-bg: #4e432f;
|
||||||
|
@button1: #6cb6eb;
|
||||||
|
@button2: #a0c980;
|
||||||
|
@button-red: #ec7279;
|
||||||
|
@key: @red;
|
||||||
|
@operator: @purple;
|
||||||
|
@string: @green;
|
||||||
|
@value: @green;
|
||||||
|
@type: @yellow;
|
||||||
|
@function: @blue;
|
||||||
|
@special: @cyan;
|
||||||
31
src/palette/gruvbox-dark.less
Normal file
31
src/palette/gruvbox-dark.less
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
@primary: #b8bb26; // primary color used in main texts
|
||||||
|
@secondary: #fe8019; // secondary color used in some texts and text based buttons
|
||||||
|
@tertiary: #fabd2f; // tertiary color used in other colored texts
|
||||||
|
@fg: #ebdbb2;
|
||||||
|
@bg0: #282828;
|
||||||
|
@bg1: #32302f;
|
||||||
|
@bg2: #3a3735;
|
||||||
|
@bg3: #45403d;
|
||||||
|
@bg4: #504945;
|
||||||
|
@red: #fb4934;
|
||||||
|
@orange: #fe8019;
|
||||||
|
@yellow: #fabd2f;
|
||||||
|
@green: #b8bb26;
|
||||||
|
@cyan: #8ec07c;
|
||||||
|
@blue: #83a598;
|
||||||
|
@purple: #d3869b;
|
||||||
|
@grey: #928374;
|
||||||
|
@red-bg: #4c3432;
|
||||||
|
@green-bg: #3b4439;
|
||||||
|
@blue-bg: #374141;
|
||||||
|
@yellow-bg: #4f422e;
|
||||||
|
@button1: #8ec07c;
|
||||||
|
@button2: #fe8019;
|
||||||
|
@button-red: #fb4934;
|
||||||
|
@key: @red;
|
||||||
|
@operator: @orange;
|
||||||
|
@string: @cyan;
|
||||||
|
@value: @purple;
|
||||||
|
@type: @yellow;
|
||||||
|
@function: @green;
|
||||||
|
@special: @blue;
|
||||||
|
|
@ -155,124 +155,3 @@
|
||||||
accent-color: var(--color-accent);
|
accent-color: var(--color-accent);
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* code theme */
|
|
||||||
.chroma .nx {
|
|
||||||
color: @fg;
|
|
||||||
}
|
|
||||||
.chroma .c, .chroma .c1, .chroma .ch {
|
|
||||||
color: @grey;
|
|
||||||
}
|
|
||||||
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr {
|
|
||||||
color: @key;
|
|
||||||
}
|
|
||||||
.chroma .o, .chroma .ow {
|
|
||||||
color: @operator;
|
|
||||||
}
|
|
||||||
.chroma .s, .chroma .si, .chroma .sa, .chroma .se, .chroma .sr, .chroma .s1, .chroma .s2, .chroma .nt, .chroma .cpf {
|
|
||||||
color: @string;
|
|
||||||
}
|
|
||||||
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo {
|
|
||||||
color: @value;
|
|
||||||
}
|
|
||||||
.chroma .kt, .chroma .nc, .chroma .nn, .chroma .nv {
|
|
||||||
color: @type;
|
|
||||||
}
|
|
||||||
.chroma .nf, .chroma .nb, .chroma .na {
|
|
||||||
color: @function;
|
|
||||||
}
|
|
||||||
.chroma .bp, .chroma .cp, .chroma .ne, .chroma .nd {
|
|
||||||
color: @special;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* primary buttons */
|
|
||||||
.ui.primary.button, .ui.primary.buttons .button {
|
|
||||||
background: @button1;
|
|
||||||
background-color: @button1 !important;
|
|
||||||
color: @bg0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.primary.button:hover, .ui.primary.buttons .button:hover {
|
|
||||||
background: fade(@button1, 80%);
|
|
||||||
background-color: fade(@button1, 80%) !important;
|
|
||||||
color: @bg0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* secondary buttons */
|
|
||||||
.ui.green.buttons .button, .ui.green.button {
|
|
||||||
background: @button2;
|
|
||||||
background-color: @button2;
|
|
||||||
color: @bg0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.green.buttons .button:hover, .ui.green.button:hover {
|
|
||||||
background: fade(@button2, 80%);
|
|
||||||
background-color: fade(@button2, 80%);
|
|
||||||
color: @bg0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* red buttons */
|
|
||||||
.ui.red.labels .label, .ui.ui.ui.red.label, .ui.red.button, .ui.red.buttons .button {
|
|
||||||
background: @button-red;
|
|
||||||
background-color: @button-red;
|
|
||||||
color: @bg0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.red.labels .label:hover, .ui.ui.ui.red.label:hover, .ui.red.button:hover, .ui.red.buttons .button:hover {
|
|
||||||
background: fade(@button-red, 80%);
|
|
||||||
background-color: fade(@button-red, 80%);
|
|
||||||
color: @bg0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* text based buttons (purple) */
|
|
||||||
.ui.labeled.button.disabled>.button, .ui.basic.buttons .button, .ui.basic.button {
|
|
||||||
color: @secondary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.labeled.button.disabled>.button:hover, .ui.basic.buttons .button:hover, .ui.basic.button:hover {
|
|
||||||
color: @secondary;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* repo title && header */
|
|
||||||
.repo-title {
|
|
||||||
color: @secondary;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* star number && fork number */
|
|
||||||
.repo-buttons button[disabled] ~ .label,
|
|
||||||
.repo-buttons .ui.labeled.button.disabled > .label {
|
|
||||||
color: @primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.basic.labels .label, .ui.basic.label {
|
|
||||||
color: @primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* hover on commits, branch, tags in project home page */
|
|
||||||
.repository .ui.segment.sub-menu .list .item a:hover,
|
|
||||||
.ui.tabular.menu .item:hover {
|
|
||||||
color: var(--color-text-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* scroll bar */
|
|
||||||
* {
|
|
||||||
scrollbar-color: @secondary transparent !important;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
box-shadow: inset 0 0 0 6px @secondary !important;
|
|
||||||
border: 2px solid transparent;
|
|
||||||
border-radius: 5px !important;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb:window-inactive {
|
|
||||||
box-shadow: inset 0 0 0 6px @secondary !important;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
box-shadow: inset 0 0 0 6px @secondary !important;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-corner {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
27
src/template/chroma.less
Normal file
27
src/template/chroma.less
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
.chroma .nx {
|
||||||
|
color: @fg;
|
||||||
|
}
|
||||||
|
.chroma .c, .chroma .c1, .chroma .ch {
|
||||||
|
color: @grey;
|
||||||
|
}
|
||||||
|
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr {
|
||||||
|
color: @key;
|
||||||
|
}
|
||||||
|
.chroma .o, .chroma .ow {
|
||||||
|
color: @operator;
|
||||||
|
}
|
||||||
|
.chroma .s, .chroma .si, .chroma .sa, .chroma .se, .chroma .sr, .chroma .s1, .chroma .s2, .chroma .nt, .chroma .cpf {
|
||||||
|
color: @string;
|
||||||
|
}
|
||||||
|
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo {
|
||||||
|
color: @value;
|
||||||
|
}
|
||||||
|
.chroma .kt, .chroma .nc, .chroma .nn, .chroma .nv {
|
||||||
|
color: @type;
|
||||||
|
}
|
||||||
|
.chroma .nf, .chroma .nb, .chroma .na {
|
||||||
|
color: @function;
|
||||||
|
}
|
||||||
|
.chroma .bp, .chroma .cp, .chroma .ne, .chroma .nd {
|
||||||
|
color: @special;
|
||||||
|
}
|
||||||
3
src/template/dark.less
Normal file
3
src/template/dark.less
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
@import "base-dark";
|
||||||
|
@import "chroma";
|
||||||
|
@import "fix";
|
||||||
91
src/template/fix.less
Normal file
91
src/template/fix.less
Normal file
|
|
@ -0,0 +1,91 @@
|
||||||
|
/* primary buttons */
|
||||||
|
.ui.primary.button, .ui.primary.buttons .button {
|
||||||
|
background: @button1;
|
||||||
|
background-color: @button1 !important;
|
||||||
|
color: @bg0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.primary.button:hover, .ui.primary.buttons .button:hover {
|
||||||
|
background: fade(@button1, 80%);
|
||||||
|
background-color: fade(@button1, 80%) !important;
|
||||||
|
color: @bg0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* secondary buttons */
|
||||||
|
.ui.green.buttons .button, .ui.green.button {
|
||||||
|
background: @button2;
|
||||||
|
background-color: @button2;
|
||||||
|
color: @bg0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.green.buttons .button:hover, .ui.green.button:hover {
|
||||||
|
background: fade(@button2, 80%);
|
||||||
|
background-color: fade(@button2, 80%);
|
||||||
|
color: @bg0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* red buttons */
|
||||||
|
.ui.red.labels .label, .ui.ui.ui.red.label, .ui.red.button, .ui.red.buttons .button {
|
||||||
|
background: @button-red;
|
||||||
|
background-color: @button-red;
|
||||||
|
color: @bg0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.red.labels .label:hover, .ui.ui.ui.red.label:hover, .ui.red.button:hover, .ui.red.buttons .button:hover {
|
||||||
|
background: fade(@button-red, 80%);
|
||||||
|
background-color: fade(@button-red, 80%);
|
||||||
|
color: @bg0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* text based buttons (purple) */
|
||||||
|
.ui.labeled.button.disabled>.button, .ui.basic.buttons .button, .ui.basic.button {
|
||||||
|
color: @secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.labeled.button.disabled>.button:hover, .ui.basic.buttons .button:hover, .ui.basic.button:hover {
|
||||||
|
color: @secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* repo title && header */
|
||||||
|
.repo-title {
|
||||||
|
color: @secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* star number && fork number */
|
||||||
|
.repo-buttons button[disabled] ~ .label,
|
||||||
|
.repo-buttons .ui.labeled.button.disabled > .label {
|
||||||
|
color: @primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.basic.labels .label, .ui.basic.label {
|
||||||
|
color: @primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* hover on commits, branch, tags in project home page */
|
||||||
|
.repository .ui.segment.sub-menu .list .item a:hover,
|
||||||
|
.ui.tabular.menu .item:hover {
|
||||||
|
color: var(--color-text-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* scroll bar */
|
||||||
|
* {
|
||||||
|
scrollbar-color: @secondary transparent !important;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
box-shadow: inset 0 0 0 6px @secondary !important;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
border-radius: 5px !important;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:window-inactive {
|
||||||
|
box-shadow: inset 0 0 0 6px @secondary !important;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
box-shadow: inset 0 0 0 6px @secondary !important;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue