discourse/discourse-rewind
1
0
Fork 0
mirror of https://github.com/discourse/discourse-rewind.git synced 2025-07-07 14:22:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

more testing

Browse Source
This commit is contained in:
Jordan Vidrine 2025-01-10 08:23:31 -06:00
parent 2f7cd88bf2
commit 1aa62c5760
6 changed files with 60 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
assets/javascripts/discourse/components/reports/word-card.gjs
View File

@ -14,11 +14,20 @@ const MYSTERY_EMOJIS = [
];
const BACKGROUND_COLORS = [
"#FBF5AF",
"#28ABE2",
"#F0794A",
"#E84A51",
"#FBF5AF",
[
"251, 245, 175",
"40, 171, 226",
"12, 166, 78",
"240, 121, 74",
"232, 74, 81",
],
[
"197, 193, 140",
"39, 137, 178",
"17, 138, 68",
"188, 105, 65",
"183, 64, 70",
],
];
export default class WordCard extends Component {
@ -29,7 +38,9 @@ export default class WordCard extends Component {
get mysteryData() {
return {
emoji: MYSTERY_EMOJIS[this.args.index],
color: `--mystery-color: ${BACKGROUND_COLORS[this.args.index]}`,
color: `--mystery-color-light: ${
BACKGROUND_COLORS[0][this.args.index]
}; --mystery-color-dark: ${BACKGROUND_COLORS[1][this.args.index]};`,
};
}

1
assets/stylesheets/common/index.scss
View File

@ -1,3 +1,4 @@
@import "variables";
@import "rewind";
@import "report";
@import "card";

5
assets/stylesheets/common/reading-time.scss
View File

@ -87,7 +87,10 @@
padding: 1.5em;
justify-content: space-around;
align-items: center;
background-color: #11be6d;
background-color: rgba(var(--d-green), 1);
@media (prefers-color-scheme: dark) {
background-color: rgba(var(--d-green-dark), 1);
}
--book-color: rgba(var(--primary-rgb), 0.4);
border-radius: 2px;
}

3
assets/stylesheets/common/rewind.scss
View File

@ -44,6 +44,9 @@
.background-1 {
background: url(/plugins/discourse-rewind/images/bg-1.png);
@media (prefers-color-scheme: dark) {
opacity: 0.15;
}
background-size: contain;
position: absolute;
transform: translateY(0px);

12
assets/stylesheets/common/variables.scss Normal file
View File

@ -0,0 +1,12 @@
:root {
--d-yellow: 251, 245, 175;
--d-blue: 40, 171, 226;
--d-green: 12, 166, 78;
--d-orange: 240, 121, 74;
--d-red: 232, 74, 81;
--d-yellow-dark: 197, 193, 140;
--d-blue-dark: 39, 137, 178;
--d-green-dark: 17, 138, 68;
--d-orange-dark: 188, 105, 65;
--d-red-dark: 183, 64, 70;
}

24
assets/stylesheets/common/word-card.scss
View File

@ -14,8 +14,12 @@
transform: rotateZ(calc(var(--ambientAmount) * 10deg));
z-index: 1;
.rewind-card {
box-shadow: 0 0 0 4px var(--mystery-color);
box-shadow: 0 0 0 4px rgba(var(--mystery-color-light), 1);
border: none;
@media (prefers-color-scheme: dark) {
background-color: var(--primary-200);
box-shadow: 0 0 0 4px rgba(var(--mystery-color-light), 0.75);
}
}
.rewind-card__inner {
position: relative;
@ -57,6 +61,24 @@
". . . " 1fr
". . br" 1fr
/ 1fr 3fr 1fr;
background-image: linear-gradient(
45deg,
var(--primary-100) 12.5%,
var(--primary-200) 12.5%,
var(--primary-200) 25%,
var(--primary-100) 25%,
var(--primary-100) 37.5%,
var(--primary-200) 37.5%,
var(--primary-200) 50%,
var(--primary-100) 50%,
var(--primary-100) 62.5%,
var(--primary-200) 62.5%,
var(--primary-200) 75%,
var(--primary-100) 75%,
var(--primary-100) 87.5%,
var(--primary-200) 87.5%,
var(--primary-200)
);
}
.rewind-card__image.tl {
grid-area: tl;