Widget:QuestCard: Difference between revisions
From Makerpedia
No edit summary |
No edit summary |
||
| Line 9: | Line 9: | ||
<style> | <style> | ||
.questCard{ | .questCard{ | ||
--cc-quest-wid: | --cc-quest-wid: 42em; | ||
--cc-quest-hgt: | --cc-quest-hgt: 33em; | ||
--cc-quest-rad: | --cc-quest-rad: 2em; | ||
--cc-quest-border: | --cc-quest-border: 1em; | ||
--cc-quest-title: | --cc-quest-title: 5em; | ||
--quest-cont-wid: calc(var(--cc-quest-wid) - 2 * var(--cc-quest-border)); | --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)); | --quest-cont-hgt: calc(var(--cc-quest-hgt) - var(--cc-quest-border) - var(--cc-quest-title)); | ||
Revision as of 03:30, 31 March 2025
<script> var app = ()=>{
console.log('test');
}
if(!window.widgets) window.widgets = []; window.widgets.push(app); </script> <style> .questCard{
--cc-quest-wid: 42em; --cc-quest-hgt: 33em; --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>