ChenKaiLiuG/life_generators
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: add colors to :root

Browse Source
This commit is contained in:
lifeadventurer
2023-12-23 15:47:25 +08:00
parent c818817a3f
commit ddcede0143
2 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
fortune_generator/index.html
View File

@@ -56,7 +56,7 @@
<p id="ip-to-fortune"></p>
</div>
<div class="row">
<div class="col">
<div class="col left-result">
<div class="row">
<p id="l-1-event"></p>
</div>
@@ -64,7 +64,7 @@
<p id="l-1-desc"></p>
</div>
</div>
<div class="col">
<div class="col right-result">
<div class="row">
<p id="r-1-event"></p>
</div>
@@ -74,7 +74,7 @@
</div>
</div>
<div class="row">
<div class="col">
<div class="col left-result">
<div class="row">
<p id="l-2-event"></p>
</div>
@@ -82,7 +82,7 @@
<p id="l-2-desc"></p>
</div>
</div>
<div class="col">
<div class="col right-result">
<div class="row">
<p id="r-2-event"></p>
</div>

22
fortune_generator/styles.css
View File

@@ -2,12 +2,28 @@
--button-color: #73a3eb;
--button-hover-color: #459aef;
--bg-color: #FFFFFF;
--good-fortune-color: #e74c3c;
--bad-fortune-color: #000000bf;
--middle-fortune-color: #5eb95e;
--desc-color: #7f7f7f;
--date-color: #096e1bC9;
--special-event-color: #3e4fbb;
--days-to-special-event-color: #485ccd;
}
.dark-mode {
--button-color: #5d99f4;
--button-hover-color: #9ac6f1;
--bg-color: #1e1d24;
--good-fortune-color: #e74c3c;
--bad-fortune-color: #dc3939d9;
--middle-fortune-color: #5eb95e;
--desc-color: #7f7f7f;
--date-color: #096e1bC9;
--special-event-color: #3e4fbb;
--days-to-special-event-color: #485ccd;
--dark-mode-icon-color: #ffffff;
}
@@ -40,11 +56,11 @@ body {
}
.left-result {
color: #e74c3c !important;
color: var(--good-fortune-color) !important;
}
.right-result {
color: #000000bf !important;
color: var(--bad-fortune-color) !important;
}
button {
@@ -70,7 +86,7 @@ button:hover {
#dark-mode-icon {
margin-top: 15px;
font-size: 2.4rem;
color: var(--white-color);
color: var(--dark-mode-icon-color);
cursor: pointer;
opacity: 85%;
}