forked from varia/web-narrowcast
toggle hide/show buttons on stream + cleaning files
This commit is contained in:
parent
a98b94715d
commit
194e5c7957
209
index.html
209
index.html
@ -11,9 +11,8 @@
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
|
||||
|
||||
<!-- OUR SCRIPTS -->
|
||||
<script type="text/javascript" src="narrowscripts.js"></script>
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="interact.min.js"></script>
|
||||
<script type="text/javascript" src="narrowscripts.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@ -48,54 +47,75 @@
|
||||
<p>28th March'21: <a href="https://varia.zone/en/rr-sense-full-1.html" target="_blank" >Read & Repair</a></p>
|
||||
|
||||
|
||||
<p>23rd March'21: <a href="http://varia.zone/en/usercond01.html" target="_blank" >User Condition S01E01</a></p>
|
||||
<p>23rd March'21: <a href="http://varia.zone/en/usercond01.html" target="_blank" >User Condition S01E01</a></p>
|
||||
|
||||
<p>13 March'21: <a href="https://varia.zone/en/fhm-servers-migrations.html" target="_blank" >FHM #1 Feminist Hack Meetings: Feminist Servers</a></p>
|
||||
<p>13 March'21: <a href="https://varia.zone/en/fhm-servers-migrations.html" target="_blank" >FHM #1 Feminist Hack Meetings: Feminist Servers</a></p>
|
||||
|
||||
<p>28 February'21: <a href="https://varia.zone/en/rr-wireless-imagination-2.html" target="_blank" >Read & Repair: Wireless Imagination</a></p>
|
||||
<p>28 February'21: <a href="https://varia.zone/en/rr-wireless-imagination-2.html" target="_blank" >Read & Repair: Wireless Imagination</a></p>
|
||||
|
||||
<p>27 June'20: <a href="https://varia.zone/en/corporeal-whispers.html" target="_blank" >RE#SISTER: Corporeal Whispers</a></p>
|
||||
<p>27 June'20: <a href="https://varia.zone/en/corporeal-whispers.html" target="_blank" >RE#SISTER: Corporeal Whispers</a></p>
|
||||
|
||||
<p>19 June'20: <a href="https://varia.zone/en/Groeten_Charlois.html" target="_blank" >Niek Hilkmann - Groeten uit Charlois</a></p>
|
||||
<p>19 June'20: <a href="https://varia.zone/en/Groeten_Charlois.html" target="_blank" >Niek Hilkmann - Groeten uit Charlois</a></p>
|
||||
|
||||
<p>18 April'20: <a href="https://varia.zone/en/we-hope-this-email.html" target="_blank">We hope this email finds you well</a></p>
|
||||
<p>18 April'20: <a href="https://varia.zone/en/we-hope-this-email.html" target="_blank">We hope this email finds you well</a></p>
|
||||
|
||||
<p>14 March'20:<a href="https://varia.zone/en/radio-on-radio.html" target="_blank">Radio on the Radio</a></p>
|
||||
<p>14 March'20:<a href="https://varia.zone/en/radio-on-radio.html" target="_blank">Radio on the Radio</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="live live-flex">
|
||||
|
||||
<!-- INSTRUCTIONS -->
|
||||
<!-- TO ACTIVATE A BELOW SECTION FOR YOUR EVENT -->
|
||||
<!-- REMOVE THE UNCOMMENT " < ! -- " and " - - > " SIGNS -->
|
||||
<!-- AND ADD THE APPROPRIATE URLS -->
|
||||
|
||||
|
||||
<div class="b_allmedia">
|
||||
<button onclick="hideshowWelcome()" class="" id="bhide_wel">WELCOME</button>
|
||||
<button onclick="hideshowChat()" class="bhide_chat_off" id="bhide_chat">CHAT</button>
|
||||
<button onclick="hideshowPad()" class="bhide_chat_off" id="bhide_ether">PAD</button>
|
||||
<button onclick="hideshowAudio()" class="bhide_chat_off" id="bhide_au">AUDIO</button>
|
||||
<button onclick="hideshowJitsi()" class="bhide_chat_off" id="bhide_jit">JITSI</button>
|
||||
<button onclick="hideshowEssay()" class="bhide_chat_off" id="bhide_ess">ESSAY</button>
|
||||
<button onclick="hideshowVideo()" class="bhide_chat_off" id="bhide_vid">VIDEO</button>
|
||||
<button onclick="hideshowIMG()" class="bhide_chat_off" id="bhide_img">IMAGE</button>
|
||||
<button onclick="hideshowGal()" class="bhide_chat_off" id="bhide_gal">GALLERY</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- AFTER EVENTS PLACEHOLDER -->
|
||||
<!-- uncomment after the event to display the iframe below -->
|
||||
|
||||
<iframe class="resize-drag" src="https://loading.vvvvvvaria.org" allow="camera; microphone" width="600" height="680" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
|
||||
|
||||
<iframe class="fullscreen" id="showWel" src="https://loading.vvvvvvaria.org" allow="camera; microphone" width="600" height="680" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
|
||||
</iframe>
|
||||
|
||||
|
||||
<!-- CHAT INTERFACE
|
||||
<div class="chat">
|
||||
|
||||
|
||||
<!-- CHAT -->
|
||||
<div class="chat halfscreen hide" id="showChat">
|
||||
<iframe src="https://chat.vvvvvvaria.org/"></iframe><br> ↬
|
||||
<a class="windowlinks" href="https://chat.vvvvvvaria.org/" target="_blank"> chat.vvvvvvaria.org</a>
|
||||
<a class="windowlinks" href="https://chat.vvvvvvaria.org/" target="_blank"> direct link to chat! </a>
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
<!-- ETHERPAD IFRAME
|
||||
<div class="halfscreen">
|
||||
|
||||
|
||||
<!-- ETHERPAD -->
|
||||
<div class="halfscreen hide" id="showEther">
|
||||
<iframe src="https://pad.vvvvvvaria.org/read_repair_supreme_connections"></iframe><br> ↝
|
||||
<a class="windowlinks" href="https://pad.vvvvvvaria.org/read_repair_supreme_connections" target="_blank"> pad.vvvvvvaria.org/read_repair_supreme_connections</a>
|
||||
</div> -->
|
||||
<a class="windowlinks" href="https://pad.vvvvvvaria.org/read_repair_supreme_connections" target="_blank"> direct to pad </a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ESSAY IFRAME
|
||||
<div class="halfscreen">
|
||||
<iframe src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_intelligent_life_scraps.pdf"></iframe><br> ↬
|
||||
<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_intelligent_life_scraps.pdf" target="_blank">read_supreme_connections_intelligent_life_scraps.pdf</a>
|
||||
</div> -->
|
||||
|
||||
<!-- AUDIO NEW CODE
|
||||
<span class="audio-stream">
|
||||
|
||||
<!-- AUDIO -->
|
||||
|
||||
<div class="audio-stream fullscreen hide" id="showAudio">
|
||||
<audio id="player" preload="none" src="https://ice.suroh.tk/meander "> </audio>
|
||||
<p>
|
||||
Press play (best listened in FireFox). It might take a minute to load.</p>
|
||||
@ -105,78 +125,99 @@
|
||||
<button class="stream-button b-narrow vol" onclick="document.getElementById('player').volume += 0.1">Vol +</button>
|
||||
<button class="stream-button b-narrow vol" onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
|
||||
</div>
|
||||
<span class="audio-link"> ↬ <a class="windowlinks" href="https://ice.suroh.tk/meander " target="_blank"> direct link to audio</a></span>
|
||||
</span>
|
||||
-->
|
||||
|
||||
<!-- IMAGE GALLERY
|
||||
<p class="img-gallery-title"> ⇩ IMAGE ⇊ GALLERY ⇘ </p>
|
||||
<div class="img-gallery">
|
||||
<figure>
|
||||
<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_Wired-Audio-Angle1-Dog2-317_RGB.jpg">
|
||||
<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_Wired-Audio-Angle1-Dog2-317_RGB.jpg" target="_blank">read_supreme_connections_Wired-Audio-Angle1-Dog2-317_RGB.jpg</a>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_anger.png">
|
||||
<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_anger.png" target="_blank">read_supreme_connections_anger</a>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_happiness.png">
|
||||
<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_happiness.png" target="_blank">read_supreme_connections_happiness.png</a>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_the_blonde_composer.jpg">
|
||||
<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_the_blonde_composer.jpg" target="_blank">read_supreme_connections_the_blonde_composer.jpg</a>
|
||||
</figure>
|
||||
<span class="audio-link"> ↬ <a class="windowlinks" href="https://ice.suroh.tk/meander " target="_blank"> direct link to audio! </a></span>
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
|
||||
<!-- TO ACTIVATE A BELOW SECTION FOR YOUR EVENT -->
|
||||
<!-- REMOVE THE UNCOMMENT " < ! -- " and " - - > " SIGNS -->
|
||||
<!-- AND ADD THE APPROPRIATE URLS -->
|
||||
|
||||
|
||||
|
||||
<!-- EXAMPLE JITSI or similar -->
|
||||
<!-- JITSI -->
|
||||
|
||||
<div class="halfscreen hide" id="showJit">
|
||||
<iframe src="https://meet.jit.si/varia.broadcats" allow="camera; microphone" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
|
||||
</iframe>
|
||||
<br> ↬
|
||||
<a class="windowlinks" href="" target="_blank"> direct link to Jitsi</a>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<iframe class="resize-drag" src="https://meet.jit.si/varia.broadcats" allow="camera; microphone" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
|
||||
</iframe>
|
||||
-->
|
||||
|
||||
<!-- EXAMPLE VIDEO FILE -->
|
||||
<!-- ESSAY -->
|
||||
|
||||
<!--
|
||||
<video class="resize-drag" autoplay="" loop="">
|
||||
<source src="https://ia600703.us.archive.org/3/items/vjmorph_pack1/BWdotSphereAVS01_1_640_512kb.mp4"
|
||||
type="video/mp4">
|
||||
</video>
|
||||
-->
|
||||
<div class="halfscreen hide" id="showEssay">
|
||||
<iframe src=""></iframe><br> ↬
|
||||
<a class="windowlinks" href="" target="_blank"> direct link to PDF</a>
|
||||
</div>
|
||||
|
||||
<!-- <div class="fullscreen" style="margin: 0% 0% 2% 0%;">
|
||||
<video
|
||||
id="player"
|
||||
class="video-js vjs-default-skin"
|
||||
controls
|
||||
preload="none"
|
||||
>
|
||||
<source
|
||||
src="https://video.vvvvvvaria.org/test.m3u8"
|
||||
type="application/x-mpegURL"
|
||||
/>
|
||||
</video><br>
|
||||
<a class="windowlinks" href="https://bbb.constantvzw.org/b/ang-twu-g0m-hib" target="_blank">if you want to join the call click here to access direct link of the BBB!</a>
|
||||
</div> -->
|
||||
|
||||
|
||||
<!-- VIDEO -->
|
||||
|
||||
<div class="fullscreen hide" id="showVideo">
|
||||
<video
|
||||
id="player"
|
||||
class="video-js vjs-default-skin"
|
||||
controls
|
||||
preload="none"
|
||||
>
|
||||
<source
|
||||
src="https://video.vvvvvvaria.org/test.m3u8"
|
||||
type="application/x-mpegURL"
|
||||
/>
|
||||
</video>
|
||||
<br> ↬
|
||||
<a class="windowlinks" href="https://bbb.constantvzw.org/b/ang-twu-g0m-hib" target="_blank"> direct link to video </a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly *</p>
|
||||
<!-- IMAGE -->
|
||||
|
||||
<figure class="halfscreen hide" id="showImg">
|
||||
<img src="https://varia.zone/images/de_varia.jpg">
|
||||
<br> ↬
|
||||
<a class="windowlinks" href="https://varia.zone/images/de_varia.jpg" target="_blank" alt=""> caption + link to .jpg</a>
|
||||
</figure>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- IMAGE GALLERY -->
|
||||
|
||||
<div class="img-gallery hide" id="showGal">
|
||||
|
||||
<p class="img-gallery-title"> ⇩ IMAGE ⇊ GALLERY ⇘ </p>
|
||||
|
||||
<figure>
|
||||
<img src="https://varia.zone/images/de_varia.jpg"><br> ↬
|
||||
<a class="windowlinks" href="https://varia.zone/images/de_varia.jpg" target="_blank" alt=""> caption + link to .jpg</a>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://varia.zone/images/de_varia.jpg"><br> ↬
|
||||
<a class="windowlinks" href="https://varia.zone/images/de_varia.jpg" target="_blank" alt=""> caption + link to .jpg</a>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://varia.zone/images/de_varia.jpg"><br> ↬
|
||||
<a class="windowlinks" href="https://varia.zone/images/de_varia.jpg" target="_blank" alt=""> caption + link to .jpg</a>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://varia.zone/images/de_varia.jpg"><br> ↬
|
||||
<a class="windowlinks" href="https://varia.zone/images/de_varia.jpg" target="_blank" alt=""> caption + link to .jpg</a>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly *</p>
|
||||
|
||||
<!-- <p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly. There is the option to open the direct url of each element in a new window.</p> -->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
116
narrowscripts.js
116
narrowscripts.js
@ -56,59 +56,88 @@ $(function() {
|
||||
fsidemobile(x)
|
||||
x.addListener(fsidemobile)
|
||||
|
||||
// SCRIPT DRAG AND RESIZE
|
||||
|
||||
|
||||
// library: https://interactjs.io/docs/installation#cdn-streamlined
|
||||
// needs embed <script src="interact.min.js"></script>
|
||||
// script above same as <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script> -->
|
||||
// also found this other options: https://www.webcomponents.org/element/jifalops/drag-resize and https://codepen.io/zz85/pen/gbOoVP
|
||||
function hideshowWelcome() {
|
||||
var elwel = document.getElementById("showWel");
|
||||
elwel.classList.toggle("hide");
|
||||
|
||||
var bwel = document.getElementById("bhide_wel");
|
||||
bwel.classList.toggle("bhide_chat_off")
|
||||
}
|
||||
|
||||
function hideshowChat() {
|
||||
var elchat = document.getElementById("showChat");
|
||||
elchat.classList.toggle("hide");
|
||||
|
||||
var bchat = document.getElementById("bhide_chat");
|
||||
bchat.classList.toggle("bhide_chat_off")
|
||||
}
|
||||
|
||||
function hideshowPad() {
|
||||
var elether = document.getElementById("showEther");
|
||||
elether.classList.toggle("hide");
|
||||
|
||||
var bether = document.getElementById("bhide_ether");
|
||||
bether.classList.toggle("bhide_chat_off")
|
||||
}
|
||||
|
||||
|
||||
interact('.resize-drag')
|
||||
.draggable({
|
||||
onmove: window.dragMoveListener
|
||||
})
|
||||
.resizable({
|
||||
preserveAspectRatio: true,
|
||||
edges: { left: true, right: true, bottom: true, top: true }
|
||||
})
|
||||
.on('resizemove', function (event) {
|
||||
var target = event.target,
|
||||
x = (parseFloat(target.getAttribute('data-x')) || 0),
|
||||
y = (parseFloat(target.getAttribute('data-y')) || 0);
|
||||
function hideshowAudio() {
|
||||
var elau = document.getElementById("showAudio");
|
||||
elau.classList.toggle("hide");
|
||||
|
||||
// update the element's style
|
||||
target.style.width = event.rect.width + 'px';
|
||||
target.style.height = event.rect.height + 'px';
|
||||
var bau = document.getElementById("bhide_au");
|
||||
bau.classList.toggle("bhide_chat_off")
|
||||
}
|
||||
|
||||
// translate when resizing from top or left edges
|
||||
x += event.deltaRect.left;
|
||||
y += event.deltaRect.top;
|
||||
|
||||
target.style.webkitTransform = target.style.transform =
|
||||
'translate(' + x + 'px,' + y + 'px)';
|
||||
|
||||
target.setAttribute('data-x', x);
|
||||
target.setAttribute('data-y', y);
|
||||
target.textContent = event.rect.width + '×' + event.rect.height;
|
||||
});
|
||||
function hideshowJitsi() {
|
||||
var eljit = document.getElementById("showJit");
|
||||
eljit.classList.toggle("hide");
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target,
|
||||
// keep the dragged position in the data-x/data-y attributes
|
||||
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
|
||||
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
|
||||
var bjit = document.getElementById("bhide_jit");
|
||||
bjit.classList.toggle("bhide_chat_off")
|
||||
}
|
||||
|
||||
// translate the element
|
||||
target.style.webkitTransform =
|
||||
target.style.transform =
|
||||
'translate(' + x + 'px, ' + y + 'px)';
|
||||
|
||||
// update the posiion attributes
|
||||
target.setAttribute('data-x', x);
|
||||
target.setAttribute('data-y', y);
|
||||
}
|
||||
function hideshowEssay() {
|
||||
var eless = document.getElementById("showEssay");
|
||||
eless.classList.toggle("hide");
|
||||
|
||||
var bess = document.getElementById("bhide_ess");
|
||||
bess.classList.toggle("bhide_chat_off")
|
||||
}
|
||||
|
||||
|
||||
function hideshowVideo() {
|
||||
var elvid = document.getElementById("showVideo");
|
||||
elvid.classList.toggle("hide");
|
||||
|
||||
var bvid = document.getElementById("bhide_vid");
|
||||
bvid.classList.toggle("bhide_chat_off")
|
||||
}
|
||||
|
||||
|
||||
|
||||
function hideshowIMG() {
|
||||
var elimg = document.getElementById("showImg");
|
||||
elimg.classList.toggle("hide");
|
||||
|
||||
var bimg = document.getElementById("bhide_img");
|
||||
bimg.classList.toggle("bhide_chat_off")
|
||||
}
|
||||
|
||||
|
||||
|
||||
function hideshowGal() {
|
||||
var elgal = document.getElementById("showGal");
|
||||
elgal.classList.toggle("hide");
|
||||
|
||||
var bgal = document.getElementById("bhide_gal");
|
||||
bgal.classList.toggle("bhide_chat_off")
|
||||
}
|
||||
|
||||
|
||||
// src="https://vjs.zencdn.net/7.10.2/video.min.js"
|
||||
@ -134,3 +163,6 @@ $(function() {
|
||||
// myAudio.pause();
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
125
narrowstyle.css
125
narrowstyle.css
@ -86,7 +86,7 @@ p.about {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 1rem;
|
||||
margin: 1%;
|
||||
color: #ffffe5;
|
||||
z-index: 99;
|
||||
max-width: 80px;
|
||||
@ -254,14 +254,67 @@ button.minimize:hover {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.b_allmedia {
|
||||
top: 100px;
|
||||
margin: 1%;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
opacity: 0;
|
||||
transition: visibility 0s linear 300ms, opacity 300ms;
|
||||
}
|
||||
|
||||
.b_allmedia {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
width: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.b_allmedia button {
|
||||
font-family: "Computer Modern Typewriter Light";
|
||||
color: #ffe4fd;
|
||||
box-shadow: inset 0.3rem 0.2rem 0.3rem #ffe4fd;
|
||||
border-radius: 1.2rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.2rem;
|
||||
align-items: center;
|
||||
background-color: #393c56;
|
||||
margin: 0.5rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.b_allmedia button:hover {
|
||||
box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;
|
||||
}
|
||||
|
||||
.bhide_chat_off {
|
||||
color: #393c56 !important;
|
||||
background-color: #ffe4fd !important;
|
||||
box-shadow: none !important;
|
||||
border: 0.03rem solid #393c56 !important;
|
||||
}
|
||||
|
||||
.bhide_chat_off{
|
||||
background: rgb(242,217,242);
|
||||
background: -moz-linear-gradient(0deg, rgba(242,217,242,1) 33%, rgba(57,60,86,1) 49%, rgba(255,228,253,1) 67%, rgba(255,228,253,1) 100%);
|
||||
background: -webkit-linear-gradient(0deg, rgba(242,217,242,1) 33%, rgba(57,60,86,1) 49%, rgba(255,228,253,1) 67%, rgba(255,228,253,1) 100%);
|
||||
background: linear-gradient(0deg, rgba(242,217,242,1) 33%, rgba(57,60,86,1) 49%, rgba(255,228,253,1) 67%, rgba(255,228,253,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2d9f2",endColorstr="#ffe4fd",GradientType=1);
|
||||
/*content: " OFF";*/
|
||||
}
|
||||
|
||||
.live {
|
||||
margin-left: 300px;
|
||||
display: inline-block;
|
||||
/* height: 100%;
|
||||
width: 100%; */
|
||||
transition: margin-left 2s;
|
||||
}
|
||||
|
||||
|
||||
.live-flex {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
@ -276,11 +329,22 @@ button.minimize:hover {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.fullscreen, .fullscreen > video, .fullscreen > #player , .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe {
|
||||
width: 100%;
|
||||
.fullscreen, .fullscreen > video, .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe {
|
||||
margin: 1%;
|
||||
width: 95%;
|
||||
}
|
||||
.fullscreen > * {
|
||||
height: 60vh;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
.fullscreen > img, .halfscreen > img, .thirdscreen > img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
#showAudio > * {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.halfscreen {
|
||||
@ -290,48 +354,24 @@ button.minimize:hover {
|
||||
|
||||
.halfscreen > * {
|
||||
height: 60vh;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
.thirdscreen {
|
||||
margin: 1%;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.thirdscreen > * {
|
||||
height: 60vh;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
|
||||
.live > * {
|
||||
/* touch-action: none;*/
|
||||
}
|
||||
|
||||
.resize-drag {
|
||||
width: 620px;
|
||||
padding: 0.4rem 1.8rem 1.8rem 0.4rem;
|
||||
margin: 1rem;
|
||||
touch-action: none;
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset -0.6rem 0rem 0.8rem #ffe4fd;
|
||||
border-radius: 0.1rem 0.1rem 0.2rem 0.1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.resize-drag::before {
|
||||
content: "⇱";
|
||||
font-size: 2rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: #393c56;
|
||||
position: absolute !important;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.resize-drag:hover {
|
||||
box-shadow: 0.2rem 0.2rem 0.6rem #ffe4fd;
|
||||
animation: corners 8s infinite alternate;
|
||||
-o-animation: corners 8s infinite alternate;
|
||||
-moz-animation: corners 8s infinite alternate;
|
||||
-webkit-animation: corners 8s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes corners {
|
||||
0% {
|
||||
border-radius: 0.1rem 0.1rem 0.2rem 0.1rem;
|
||||
@ -426,6 +466,15 @@ content: 'PLAY';
|
||||
content: 'PAUSE';
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.2rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.img-gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user