Redesign code structure
This commit is contained in:
parent
1529096320
commit
a88c7afef0
|
@ -1,33 +1,2 @@
|
|||
@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;
|
||||
|
||||
@import "base-dark";
|
||||
@import "palette/edge-dark";
|
||||
@import "template/dark";
|
||||
|
|
|
@ -1,33 +1,2 @@
|
|||
@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;
|
||||
|
||||
@import "base-dark";
|
||||
@import "palette/gruvbox-dark";
|
||||
@import "template/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);
|
||||
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