Widget:QuestCard: Difference between revisions

From Makerpedia

No edit summary
No edit summary
Line 44: Line 44:
}
}


.questContent > div:has(> .questQR){
.questContent > .questImg{
   --cc-quest-qr: calc(var(--cc-quest-hgt) / 2 - 2 * var(--cc-quest-border));
   --cc-quest-qr: calc(var(--cc-quest-hgt) / 2 - 2 * var(--cc-quest-border));
   position: absolute;
   position: absolute;
  left: var(--cc-quest-border);
   top: var(--cc-quest-border);
   top: var(--cc-quest-border);
   width: var(--cc-quest-qr);
   width: var(--cc-quest-qr);
Line 54: Line 53:
}
}


.questQR {
.questContent > div:has(> .questQR){
  left: var(--cc-quest-border);
}
 
.questContent > div:has(> .questPic){
  right: var(--cc-quest-border);
}
 
.questQR, .questPic {
   position: absolute;
   position: absolute;
   left: var(--cc-quest-border);
   left: var(--cc-quest-border);
Line 68: Line 75:
   <div class='questContent'>
   <div class='questContent'>
     <img class='bgLogo' src='images/logos/logoBoW.png'></img>
     <img class='bgLogo' src='images/logos/logoBoW.png'></img>
     <div>
     <div class='questImg'>
       <img class='questQR' src="https://quickchart.io/qr?text=<!--{$link|escape:'url'}-->&centerImageUrl=http://makerspace.cc/images/logos/logoBoW.png&size=400x400&dark=003069&light=FFFFFF"></img>
       <img class='questQR' src="https://quickchart.io/qr?text=<!--{$link|escape:'url'}-->&centerImageUrl=http://makerspace.cc/images/logos/logoBoW.png&size=400x400&dark=003069&light=FFFFFF"></img>
    </div>
    <div class='questImg'>
      <img class='questPic' src="https://makerspace.cc/images/icons/questColor.png"></img>
     </div>
     </div>
   </div>
   </div>
</div>
</div>

Revision as of 18:00, 31 March 2025

<script> var app = ()=>{

 console.log('test');

}

if(!window.widgets) window.widgets = []; window.widgets.push(app); </script> <style> .questCard{

 --cc-unit: calc(2 * .75vw);
 --cc-quest-wid: calc(var(--cc-unit) * 50);
 --cc-quest-hgt: calc(var(--cc-unit) * 40);
 --cc-quest-rad: calc(var(--cc-unit) * 2);
 --cc-quest-border: calc(var(--cc-unit) * 1);
 --cc-quest-title: calc(var(--cc-unit) * 5);
 --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);

}

.questContent > .questImg{

 --cc-quest-qr: calc(var(--cc-quest-hgt) / 2 - 2 * var(--cc-quest-border));
 position: absolute;
 top: var(--cc-quest-border);
 width: var(--cc-quest-qr);
 height: var(--cc-quest-qr);
 padding: var(--cc-quest-border);

}

.questContent > div:has(> .questQR){

 left: var(--cc-quest-border);

}

.questContent > div:has(> .questPic){

 right: var(--cc-quest-border);

}

.questQR, .questPic {

 position: absolute;
 left: var(--cc-quest-border);
 top: var(--cc-quest-border);
 width: calc(var(--cc-quest-qr) - 2 * var(--cc-quest-border));
 height: calc(var(--cc-quest-qr) - 2 * var(--cc-quest-border));
 border-radius: var(--cc-border-rad);

}


</style>

   <img class='bgLogo' src='images/logos/logoBoW.png'></img>
     <img class='questPic' src="questColor.png"></img>