Widget:QuestCard: Difference between revisions
From Makerpedia
No edit summary |
No edit summary |
||
| Line 9: | Line 9: | ||
<style> | <style> | ||
.questCard{ | .questCard{ | ||
--cc-quest-wid: 40em; | |||
--cc-quest-hgt: 32em; | |||
--cc-quest-rad: 2em; | |||
--cc-quest-border: 1em; | |||
--cc-quest-title: 5em; | |||
position: relative; | position: relative; | ||
background-color: var(--cc-blue); | background-color: var(--cc-blue); | ||
width: | width: var(--cc-quest-wid); | ||
height: | height: var(--cc-quest-hgt); | ||
border-radius: | border-radius: var(--cc-quest-rad); | ||
} | } | ||
.questContent { | .questContent { | ||
background-color: var(--cc-white); | background-color: var(--cc-white); | ||
border-radius: | border-radius: calc(var(--cc-quest-rad) - var(--cc-quest-border)); | ||
position: absolute; | position: absolute; | ||
left: | left: var(--cc-quest-border); | ||
top: | top: var(--cc-quest-title); | ||
width: | width: calc(var(--cc-quest-wid) - 2 * var(--cc-quest-border)); | ||
height: | height: calc(var(--cc-quest-hgt) - var(--cc-quest-border) - var(--cc-quest-title)); | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
Revision as of 03:16, 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; 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: calc(var(--cc-quest-wid) - 2 * var(--cc-quest-border)); height: calc(var(--cc-quest-hgt) - var(--cc-quest-border) - var(--cc-quest-title)); overflow: hidden;
}
.bgLogo {
position: absolute; left: -100px; top: 100px; width: 330px; height: 330px; filter: opacity(.25);
} </style>
<img class='bgLogo' src='images/logos/logoBoW.png'></img>