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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user