Skip to content

Commit

Permalink
Replacing <dialog> with checkbox-commanded modals
Browse files Browse the repository at this point in the history
  • Loading branch information
@wberube
wberube committed Aug 14, 2024
1 parent cdff3e2 commit 596456a
Showing 1 changed file with 17 additions and 15 deletions.
32 changes: 17 additions & 15 deletions res/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
<style>
*{box-sizing:border-box}*+*{margin:.5em 0}pre{overflow:auto}@media(min-width:50em){.col{display:table-cell}.\31{width:5%}.\33{width:22%}.\34{width:30%}.\35{width:40%}.\32{width:15%}.\36{width:50%}.row{display:table;border-spacing:1em 0;height:fit-content}}.row,.w-100{width:100%}.card:focus,hr{outline:0;border:solid #fa0}.card,pre{padding:1em;border:solid #eee}.btn:hover,a:hover{opacity:.6}.c{padding:1em;margin:auto;font:1em/1.6 sans-serif}h6{font:400 1em sans-serif}h5{font:400 1.2em sans-serif}h3{font:400 2em sans-serif}h4{font:400 1.5em sans-serif}h2{font:400 2.2em sans-serif}h1{font:400 2.5em sans-serif}a{color:#fa0;text-decoration:none}.btn.primary{color:#fff;background:#fa0;border:solid #fa0}td,th{padding:1em;text-align:left;border-bottom:solid #eee}.btn{padding:1em;text-transform:uppercase;background:#fff;border:solid;font:.7em sans-serif}a.btn{display:inline-block}input,select{font-family:sans-serif}
.white{color:#fff}.bg-white{background-color:#fff}.b-white{border-color:#fff}.gray{color:#ccc}.bg-gray{background-color:#ccc}.b-gray{border-color:#ccc}.black{color:#000}.bg-black{background-color:#000}.b-black{border-color:#000}.accent{color:#fa0}.bg-accent{background-color:#fa0}.b-accent{border-color:#fa0}.warning{color:#ffd600}.bg-warning{background-color:#ffd600}.b-warning{border-color:#ffd600}.error{color:#d50000}.bg-error{background-color:#d50000}.b-error{border-color:#d50000}.success{color:#00c853}.bg-success{background-color:#00c853}.b-success{border-color:#00c853}.info{color:#2962ff}.bg-info{background-color:#2962ff}.b-info{border-color:#2962ff}.m0{margin:0}.m1{margin:.5em}.m2{margin:1em}.m3{margin:2em}.m4{margin:4em}.mt0{margin-top:0}.mt1{margin-top:.5em}.mt2{margin-top:1em}.mt3{margin-top:2em}.mt4{margin-top:4em}.mr0{margin-right:0}.mr1{margin-right:.5em}.mr2{margin-right:1em}.mr3{margin-right:2em}.mr4{margin-right:4em}.mb0{margin-bottom:0}.mb1{margin-bottom:.5em}.mb2{margin-bottom:1em}.mb3{margin-bottom:2em}.mb4{margin-bottom:4em}.ml0{margin-left:0}.ml1{margin-left:.5em}.ml2{margin-left:1em}.ml3{margin-left:2em}.ml4{margin-left:4em}.p0{padding:0}.p1{padding:.5em}.p2{padding:1em}.p3{padding:2em}.p4{padding:4em}.pv0{padding-top:0;padding-bottom:0}.pv1{padding-top:.5em;padding-bottom:.5em}.pv2{padding-top:1em;padding-bottom:1em}.pv3{padding-top:2em;padding-bottom:2em}.pv4{padding-top:4em;padding-bottom:4em}.ph0{padding-right:0;padding-left:0}.ph1{padding-right:.5em;padding-left:.5em}.ph2{padding-right:1em;padding-left:1em}.ph3{padding-right:2em;padding-left:2em}.ph4{padding-right:4em;padding-left:4em}.gapless{border-spacing:0}.vc{position:relative;top:40%;transform:perspective(1px) translateY(-45%)}.pill{border-radius:9999px}.rounded{border-radius:4px}.tc{text-align:center}.mega{font-size:3.5em}.large{font-size:1.5em}.small{font-size:.7em}.caps{text-transform:uppercase}.tracked{letter-spacing:.1em}.vh-100{height:100vh}.inline{display:inline-block}.bold{font-weight:700}.normal{font-weight:400}.light{font-weight:300}.dim{opacity:1;transition:opacity .15s ease-in}.dim:focus,.dim:hover{opacity:.5;transition:opacity .15s ease-in}
.box{vertical-align:top}.box input,select{width:100%}.box td{padding:0.5em}.close{position:absolute;right:2em;top:2em}
dialog{display:block;border:0;padding:0!important;z-index:1}dialog:not(:target):not([open]){display:none}
@media(min-width:50em){.box > fieldset{height:100%}.close{right:4em}}
.cont{max-width:64em}.menu .btn{margin:-1em 0;padding:0.75em}.right{float:right}.unl{border-bottom:2px solid}
.box{vertical-align:top}.box input,select{width:100%}.box td{padding:0.5em}.close{position:absolute;right:2em;top:2em}@media(min-width:50em){.box > fieldset{height:100%}.close{right:4em}}
.cont{max-width:64em}.menu .btn{margin:-1em 0;padding:0.75em}.lbl-modal:focus,.lbl-modal:hover{cursor:pointer;opacity:.6}.right{float:right}.unl{border-bottom:2px solid}
.modal{display:none;background:#fff;position:fixed;bottom:0;left:0;right:0;top:0;margin:0;padding:0;z-index:1}
input[type=checkbox]{position:absolute;opacity:0}input[type=checkbox]:checked + .modal{display:block}
</style>
<script>
var ua = window.navigator.userAgent;
Expand Down Expand Up @@ -80,26 +80,28 @@ <h1 class="mega mb0">Divinus</h1>
</div>
</div>
</noscript>
<dialog id="live" class="c vh-100 w-100">
<input type="checkbox" id="live-modal">
<div class="c modal vh-100 w-100">
<div class="c bg-black menu pv2 row">
<div class="col">
<b><a href="#!" class="white ph2">Divinus</a></b>
<b><label for="live-modal" class="lbl-modal ph2 white">Divinus</label></b>
<a href="javascript:setSource('preview', 'video.mp4')" class="ph2">MP4</a>
<a href="javascript:setSource('preview', 'mjpeg')" class="ph2">MJPEG</a>
<a href="javascript:setSource('preview', '')" class="ph2">Stop</a>
<a href="#!" class="btn primary close">Close</a>
<label for="live-modal" class="btn primary close">Close</label>
</div>
</div>
<div class="c cont">
<h2 class="unl">Live</h2>
<div id="preview" width="100%">
<div id="preview" width="100%"></div>
</div>
</dialog>
<dialog id="media" class="c vh-100 w-100">
</div>
<input type="checkbox" id="media-modal">
<div class="c modal vh-100 w-100">
<div class="c bg-black menu pv2 row">
<div class="col">
<b><a href="#!" class="white ph2">Divinus</a></b>
<a href="#!" class="btn primary close">Close</a>
<b><label for="media-modal" class="lbl-modal ph2 white">Divinus</label></b>
<label for="media-modal" class="btn primary close">Close</label>
</div>
</div>
<div class="c cont">
Expand Down Expand Up @@ -237,12 +239,12 @@ <h2 class="unl">Media</h2>
</div>
</div>
</div>
</dialog>
</div>
<div class="c bg-black menu pv2 row">
<div class="col">
<b><a href="./" class="ph2 white">Divinus</a></b>
<a href="#live" class="ph2 white">Live</a>
<a href="#media" class="ph2 white">Media</a>
<label for="live-modal" class="lbl-modal ph2 white">Live</label>
<label for="media-modal" class="lbl-modal ph2 white">Media</label>
<a href="image.jpg" class="ph2 white" target="_blank">Snapshot</a>
</div>
</div>
Expand Down

0 comments on commit 596456a

Please sign in to comment.