Lea/forgejo-themes
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases 2 Wiki Activity

Redesign code structure

Browse source
This commit is contained in:
Sainnhe Park 2022-10-31 10:48:11 +08:00
parent 1529096320
commit a88c7afef0
8 changed files with 187 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/edge-dark.less
View file

@ -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";

35
src/gruvbox-dark.less
View file

@ -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
View 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
View 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;

121
src/base-dark.less → src/template/base-dark.less
View file

@ -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
View 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
View file

@ -0,0 +1,3 @@
@import "base-dark";
@import "chroma";
@import "fix";

91
src/template/fix.less Normal file
View 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;
}