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:500px;
   width: var(--cc-quest-wid);
   height: 400px;
   height: var(--cc-quest-hgt);
   border-radius: 20px;
   border-radius: var(--cc-quest-rad);
}
}


.questContent {
.questContent {
   background-color: var(--cc-white);
   background-color: var(--cc-white);
   border-radius: 15px;
   border-radius: calc(var(--cc-quest-rad) - var(--cc-quest-border));
   position: absolute;
   position: absolute;
   left: 10px;
   left: var(--cc-quest-border);
   top: 60px;
   top: var(--cc-quest-title);
   width: 480px;
   width: calc(var(--cc-quest-wid) - 2 * var(--cc-quest-border));
   height: 330px;
   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>