Widget:QuestCard: Difference between revisions
From Makerpedia
No edit summary |
No edit summary |
||
| Line 14: | Line 14: | ||
--cc-quest-border: 1em; | --cc-quest-border: 1em; | ||
--cc-quest-title: 5em; | --cc-quest-title: 5em; | ||
--quest-cont-wid: calc(var(--cc-quest-wid) - 2 * var(--cc-quest-border)); | |||
--quest-cont-hgt: calc(var(--cc-quest-hgt) - var(--cc-quest-border) - var(--cc-quest-title)) | |||
position: relative; | position: relative; | ||
background-color: var(--cc-blue); | background-color: var(--cc-blue); | ||
| Line 27: | Line 29: | ||
left: var(--cc-quest-border); | left: var(--cc-quest-border); | ||
top: var(--cc-quest-title); | top: var(--cc-quest-title); | ||
width: | width: var(--quest-cont-wid); | ||
height: | height: var(--quest-cont-hgt); | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
| Line 34: | Line 36: | ||
.bgLogo { | .bgLogo { | ||
position: absolute; | position: absolute; | ||
left: - | left: calc(-.33 * var(--quest-cont-hgt)); | ||
top: | top: calc(.33 * var(--quest-cont-hgt)); | ||
width: | width: var(--quest-cont-hgt); | ||
height: | height: var(--quest-cont-hgt); | ||
filter: opacity(.25); | filter: opacity(.25); | ||
} | } | ||
Revision as of 03:20, 31 March 2025
<script> var app = ()=>{
console.log('test');
}
if(!window.widgets) window.widgets = []; window.widgets.push(app); </script> <style> .questCard{
--cc-quest-wid: 40em; --cc-quest-hgt: 32em; --cc-quest-rad: 2em; --cc-quest-border: 1em; --cc-quest-title: 5em; --quest-cont-wid: calc(var(--cc-quest-wid) - 2 * var(--cc-quest-border)); --quest-cont-hgt: calc(var(--cc-quest-hgt) - var(--cc-quest-border) - var(--cc-quest-title)) position: relative; background-color: var(--cc-blue); width: var(--cc-quest-wid); height: var(--cc-quest-hgt); border-radius: var(--cc-quest-rad);
}
.questContent {
background-color: var(--cc-white); border-radius: calc(var(--cc-quest-rad) - var(--cc-quest-border)); position: absolute; left: var(--cc-quest-border); top: var(--cc-quest-title); width: var(--quest-cont-wid); height: var(--quest-cont-hgt); overflow: hidden;
}
.bgLogo {
position: absolute; left: calc(-.33 * var(--quest-cont-hgt)); top: calc(.33 * var(--quest-cont-hgt)); width: var(--quest-cont-hgt); height: var(--quest-cont-hgt); filter: opacity(.25);
} </style>
<img class='bgLogo' src='images/logos/logoBoW.png'></img>