Add styles for .flash-warn class

giscus · Dec 4, 2022 · 5fed4a2 · 5fed4a2
1 parent edb624a
commit 5fed4a2
Show file tree

Hide file tree

Showing 13 changed files with 31 additions and 0 deletions.
diff --git a/styles/base.css b/styles/base.css
@@ -427,6 +427,11 @@ img.emoji {
   border-color: var(--color-danger-muted);
 }
 
+.flash-warn {
+  background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
+  border-color: var(--color-attention-muted);
+}
+
 /*! giscus-specific styles */
 
 .gsc-loading {

diff --git a/styles/themes/custom_example.css b/styles/themes/custom_example.css
@@ -73,6 +73,8 @@ main {
   --color-accent-subtle: rgb(56 139 253 / 15%);
   --color-success-fg: #57ab5a;
   --color-attention-fg: #c69026;
+  --color-attention-muted: rgb(174 124 20 / 40%);
+  --color-attention-subtle: rgb(174 124 20 / 15%);
   --color-danger-fg: #e5534b;
   --color-danger-muted: rgb(229 83 75 / 40%);
   --color-danger-subtle: rgb(229 83 75 / 15%);

diff --git a/styles/themes/dark.css b/styles/themes/dark.css
@@ -72,6 +72,8 @@ main {
   --color-accent-subtle: rgb(56 139 253 / 15%);
   --color-success-fg: #3fb950;
   --color-attention-fg: #d29922;
+  --color-attention-muted: rgb(187 128 9 / 40%);
+  --color-attention-subtle: rgb(187 128 9 / 15%);
   --color-danger-fg: #f85149;
   --color-danger-muted: rgb(248 81 73 / 40%);
   --color-danger-subtle: rgb(248 81 73 / 15%);

diff --git a/styles/themes/dark_dimmed.css b/styles/themes/dark_dimmed.css
@@ -72,6 +72,8 @@ main {
   --color-accent-subtle: rgb(65 132 228 / 15%);
   --color-success-fg: #57ab5a;
   --color-attention-fg: #c69026;
+  --color-attention-muted: rgb(174 124 20 / 40%);
+  --color-attention-subtle: rgb(174 124 20 / 15%);
   --color-danger-fg: #e5534b;
   --color-danger-muted: rgb(229 83 75 / 40%);
   --color-danger-subtle: rgb(229 83 75 / 15%);

diff --git a/styles/themes/dark_high_contrast.css b/styles/themes/dark_high_contrast.css
@@ -72,6 +72,8 @@ main {
   --color-accent-subtle: rgb(64 158 255 / 15%);
   --color-success-fg: #26cd4d;
   --color-attention-fg: #f0b72f;
+  --color-attention-muted: #e09b13;
+  --color-attention-subtle: rgb(224 155 19 / 15%);
   --color-danger-fg: #ff6a69;
   --color-danger-muted: #ff6a69;
   --color-danger-subtle: rgb(255 106 105 / 15%);

diff --git a/styles/themes/dark_protanopia.css b/styles/themes/dark_protanopia.css
@@ -72,6 +72,8 @@ main {
   --color-accent-subtle: rgb(56 139 253 / 15%);
   --color-success-fg: #58a6ff;
   --color-attention-fg: #d29922;
+  --color-attention-muted: rgb(187 128 9 / 40%);
+  --color-attention-subtle: rgb(187 128 9 / 15%);
   --color-danger-fg: #d47616;
   --color-danger-muted: rgb(212 118 22 / 40%);
   --color-danger-subtle: rgb(212 118 22 / 15%);

diff --git a/styles/themes/dark_tritanopia.css b/styles/themes/dark_tritanopia.css
@@ -72,6 +72,8 @@ main {
   --color-accent-subtle: rgb(56 139 253 / 15%);
   --color-success-fg: #58a6ff;
   --color-attention-fg: #d29922;
+  --color-attention-muted: rgb(187 128 9 / 40%);
+  --color-attention-subtle: rgb(187 128 9 / 15%);
   --color-danger-fg: #f85149;
   --color-danger-muted: rgb(248 81 73 / 40%);
   --color-danger-subtle: rgb(248 81 73 / 15%);

diff --git a/styles/themes/light.css b/styles/themes/light.css
@@ -72,6 +72,8 @@ main {
   --color-accent-subtle: #ddf4ff;
   --color-success-fg: #1a7f37;
   --color-attention-fg: #9a6700;
+  --color-attention-muted: rgb(212 167 44 / 40%);
+  --color-attention-subtle: #fff8c5;
   --color-danger-fg: #cf222e;
   --color-danger-muted: rgb(255 129 130 / 40%);
   --color-danger-subtle: #ffebe9;

diff --git a/styles/themes/light_high_contrast.css b/styles/themes/light_high_contrast.css
@@ -72,6 +72,8 @@ main {
   --color-accent-subtle: #dff7ff;
   --color-success-fg: #055d20;
   --color-attention-fg: #744500;
+  --color-attention-muted: #b58407;
+  --color-attention-subtle: #fcf7be;
   --color-danger-fg: #a0111f;
   --color-danger-muted: #ee5a5d;
   --color-danger-subtle: #fff0ee;

diff --git a/styles/themes/light_protanopia.css b/styles/themes/light_protanopia.css
@@ -72,6 +72,8 @@ main {
   --color-accent-subtle: #ddf4ff;
   --color-success-fg: #0969da;
   --color-attention-fg: #9a6700;
+  --color-attention-muted: rgb(212 167 44 / 40%);
+  --color-attention-subtle: #fff8c5;
   --color-danger-fg: #b35900;
   --color-danger-muted: rgb(247 153 57 / 40%);
   --color-danger-subtle: #fff5e8;

diff --git a/styles/themes/light_tritanopia.css b/styles/themes/light_tritanopia.css
@@ -72,6 +72,8 @@ main {
   --color-accent-subtle: #ddf4ff;
   --color-success-fg: #0969da;
   --color-attention-fg: #9a6700;
+  --color-attention-muted: rgb(212 167 44 / 40%);
+  --color-attention-subtle: #fff8c5;
   --color-danger-fg: #cf222e;
   --color-danger-muted: rgb(255 129 130 / 40%);
   --color-danger-subtle: #ffebe9;

diff --git a/styles/themes/preferred_color_scheme.css b/styles/themes/preferred_color_scheme.css
@@ -73,6 +73,8 @@ main {
   --color-accent-subtle: #ddf4ff;
   --color-success-fg: #1a7f37;
   --color-attention-fg: #9a6700;
+  --color-attention-muted: rgb(212 167 44 / 40%);
+  --color-attention-subtle: #fff8c5;
   --color-danger-fg: #cf222e;
   --color-danger-muted: rgb(255 129 130 / 40%);
   --color-danger-subtle: #ffebe9;
@@ -171,6 +173,8 @@ main .gsc-loading-image {
     --color-accent-subtle: rgb(56 139 253 / 15%);
     --color-success-fg: #3fb950;
     --color-attention-fg: #d29922;
+    --color-attention-muted: rgb(187 128 9 / 40%);
+    --color-attention-subtle: rgb(187 128 9 / 15%);
     --color-danger-fg: #f85149;
     --color-danger-muted: rgb(248 81 73 / 40%);
     --color-danger-subtle: rgb(248 81 73 / 15%);

diff --git a/styles/themes/transparent_dark.css b/styles/themes/transparent_dark.css
@@ -74,6 +74,8 @@ main {
   --color-accent-subtle: rgb(56 139 253 / 15%);
   --color-success-fg: #3fb950;
   --color-attention-fg: #c69026;
+  --color-attention-muted: rgb(174 124 20 / 40%);
+  --color-attention-subtle: rgb(174 124 20 / 15%);
   --color-danger-fg: #f85149;
   --color-danger-muted: rgb(229 83 75 / 40%);
   --color-danger-subtle: rgb(229 83 75 / 15%);