eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Improve badges and work on a more unified color scheme for random colors (#756)

Browse Source
This commit is contained in:
Prospector
2022-11-20 13:57:44 -08:00
committed by GitHub
parent 9849bc055c
commit 88fa103acb
19 changed files with 148 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/images/utils/archive.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="4" width="20" height="5" rx="2"></rect>
<path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"></path>
<path d="M10 13h4"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 335 B

6
assets/images/utils/box.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
<polyline points="3.29 7 12 12 20.71 7"></polyline>
<line x1="12" y1="22" x2="12" y2="12"></line>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 433 B

39
assets/styles/components.scss
View File

@@ -27,35 +27,6 @@
}
}
.badge {
max-height: 1rem;
border-radius: 1rem;
font-size: var(--font-size-xs);
font-weight: bold;
letter-spacing: 0.02rem;
padding: 0.25rem 0.5rem;
&.gray {
background-color: var(--color-badge-gray-bg);
color: var(--color-badge-gray-text);
}
&.red {
background-color: var(--color-badge-red-bg);
color: var(--color-badge-red-text);
}
&.green {
background-color: var(--color-badge-green-bg);
color: var(--color-badge-green-text);
}
&.yellow {
background-color: var(--color-badge-yellow-bg);
color: var(--color-badge-yellow-text);
}
}
.text-link {
color: var(--color-link);
text-decoration: underline;
@@ -532,7 +503,7 @@ tr.button-transparent {
}
.danger-button {
--background-color: var(--color-badge-red-bg);
--background-color: var(--color-special-red);
--text-color: var(--color-brand-inverted);
}
@@ -554,7 +525,7 @@ tr.button-transparent {
}
.known-error .multiselect__tags {
border-color: var(--color-badge-red-bg) !important;
border-color: var(--color-special-red) !important;
background-color: var(--color-warning-bg) !important;
&::placeholder {
@@ -898,7 +869,7 @@ tr.button-transparent {
.text-input-wrapper.known-error,
input.known-error,
textarea.known-error {
outline: 2px solid var(--color-badge-red-bg);
outline: 2px solid var(--color-special-red);
background-color: var(--color-warning-bg) !important;
&::placeholder {
@@ -907,7 +878,7 @@ textarea.known-error {
}
.known-errors {
color: var(--color-badge-red-bg);
color: var(--color-special-red);
ul {
margin: 0;
@@ -1017,7 +988,7 @@ h1 {
font-weight: bold;
.required {
color: var(--color-badge-red-bg);
color: var(--color-special-red);
}
}
.label__description {

36
assets/styles/global.scss
View File

@@ -19,7 +19,8 @@ html {
--color-text-inverted: var(--color-bg);
--color-bg-inverted: var(--color-text);
--color-brand: #00af5c;
--color-brand-green: #00af5c;
--color-brand: var(--color-brand-green);
--color-brand-highlight: rgba(0, 175, 92, 0.25);
--color-brand-shadow: rgba(0, 175, 92, 0.7);
--color-brand-inverted: #ffffff;
@@ -56,14 +57,12 @@ html {
--color-link-hover: #1a76e7;
--color-link-active: #146fd7;
--color-badge-gray-text: #646161;
--color-badge-gray-bg: #c8c1c1;
--color-badge-red-text: #6e1931;
--color-badge-red-bg: #db3162;
--color-badge-green-text: #184e38;
--color-badge-green-bg: #24a54e;
--color-badge-yellow-text: #755920;
--color-badge-yellow-bg: #f7bb43;
--color-special-red: #cb2245;
--color-special-orange: #e08325;
--color-special-green: var(--color-brand-green);
--color-special-blue: #1f68c0;
--color-special-purple: #8e32F3;
--color-special-gray: #595B61;
--color-warning-bg: hsl(355, 70%, 88%);
--color-warning-text: hsl(342, 70%, 35%);
@@ -107,7 +106,15 @@ html {
--color-text-inverted: var(--color-bg);
--color-bg-inverted: var(--color-text);
--color-brand: #1bd96a;
--color-special-red: #ff496e;
--color-special-orange: #ffa347;
--color-special-green: var(--color-brand-green);
--color-special-blue: #4F9CFF;
--color-special-purple: #C78AFF;
--color-special-gray: #9FA4B3;
--color-brand-green: #1bd96a;
--color-brand: var(--color-brand-green);
--color-brand-highlight: rgba(27, 217, 106, 0.25);
--color-brand-shadow: rgba(27, 217, 106, 0.7);
--color-brand-inverted: #000;
@@ -141,15 +148,6 @@ html {
--color-link-hover: #92c0f5;
--color-link-active: #b5d5fd;
--color-badge-gray-bg: #646161;
--color-badge-gray-text: #c8c1c1;
--color-badge-red-text: #bd1a48;
--color-badge-red-bg: #db3162;
--color-badge-green-text: #1ebb7b;
--color-badge-green-bg: #24a54e;
--color-badge-yellow-text: #dba22d;
--color-badge-yellow-bg: #f7bb43;
--color-warning-bg: hsl(355, 70%, 20%);
--color-warning-text: hsl(342, 70%, 75%);