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'>
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
|
||||||
|
|
||||||
<!-- OUR SCRIPTS -->
|
<!-- 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="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>
|
</head>
|
||||||
<body>
|
<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>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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="live live-flex">
|
<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 -->
|
<!-- AFTER EVENTS PLACEHOLDER -->
|
||||||
<!-- uncomment after the event to display the iframe below -->
|
|
||||||
|
<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 class="resize-drag" src="https://loading.vvvvvvaria.org" allow="camera; microphone" width="600" height="680" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
|
|
||||||
</iframe>
|
</iframe>
|
||||||
|
|
||||||
|
|
||||||
<!-- CHAT INTERFACE
|
|
||||||
<div class="chat">
|
|
||||||
|
<!-- CHAT -->
|
||||||
|
<div class="chat halfscreen hide" id="showChat">
|
||||||
<iframe src="https://chat.vvvvvvaria.org/"></iframe><br> ↬
|
<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>
|
</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> ↝
|
<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>
|
<a class="windowlinks" href="https://pad.vvvvvvaria.org/read_repair_supreme_connections" target="_blank"> direct to pad </a>
|
||||||
</div> -->
|
</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>
|
<audio id="player" preload="none" src="https://ice.suroh.tk/meander "> </audio>
|
||||||
<p>
|
<p>
|
||||||
Press play (best listened in FireFox). It might take a minute to load.</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>
|
||||||
<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>
|
</div>
|
||||||
<span class="audio-link"> ↬ <a class="windowlinks" href="https://ice.suroh.tk/meander " target="_blank"> direct link to audio</a></span>
|
<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>
|
|
||||||
</div>
|
</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 -->
|
||||||
|
|
||||||
<!--
|
<div class="halfscreen hide" id="showEssay">
|
||||||
<video class="resize-drag" autoplay="" loop="">
|
<iframe src=""></iframe><br> ↬
|
||||||
<source src="https://ia600703.us.archive.org/3/items/vjmorph_pack1/BWdotSphereAVS01_1_640_512kb.mp4"
|
<a class="windowlinks" href="" target="_blank"> direct link to PDF</a>
|
||||||
type="video/mp4">
|
</div>
|
||||||
</video>
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!-- <div class="fullscreen" style="margin: 0% 0% 2% 0%;">
|
|
||||||
<video
|
|
||||||
id="player"
|
<!-- VIDEO -->
|
||||||
class="video-js vjs-default-skin"
|
|
||||||
controls
|
<div class="fullscreen hide" id="showVideo">
|
||||||
preload="none"
|
<video
|
||||||
>
|
id="player"
|
||||||
<source
|
class="video-js vjs-default-skin"
|
||||||
src="https://video.vvvvvvaria.org/test.m3u8"
|
controls
|
||||||
type="application/x-mpegURL"
|
preload="none"
|
||||||
/>
|
>
|
||||||
</video><br>
|
<source
|
||||||
<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>
|
src="https://video.vvvvvvaria.org/test.m3u8"
|
||||||
</div> -->
|
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> -->
|
<!-- <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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
116
narrowscripts.js
116
narrowscripts.js
@ -56,59 +56,88 @@ $(function() {
|
|||||||
fsidemobile(x)
|
fsidemobile(x)
|
||||||
x.addListener(fsidemobile)
|
x.addListener(fsidemobile)
|
||||||
|
|
||||||
// SCRIPT DRAG AND RESIZE
|
|
||||||
|
|
||||||
|
|
||||||
// library: https://interactjs.io/docs/installation#cdn-streamlined
|
function hideshowWelcome() {
|
||||||
// needs embed <script src="interact.min.js"></script>
|
var elwel = document.getElementById("showWel");
|
||||||
// script above same as <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script> -->
|
elwel.classList.toggle("hide");
|
||||||
// also found this other options: https://www.webcomponents.org/element/jifalops/drag-resize and https://codepen.io/zz85/pen/gbOoVP
|
|
||||||
|
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')
|
function hideshowAudio() {
|
||||||
.draggable({
|
var elau = document.getElementById("showAudio");
|
||||||
onmove: window.dragMoveListener
|
elau.classList.toggle("hide");
|
||||||
})
|
|
||||||
.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);
|
|
||||||
|
|
||||||
// update the element's style
|
var bau = document.getElementById("bhide_au");
|
||||||
target.style.width = event.rect.width + 'px';
|
bau.classList.toggle("bhide_chat_off")
|
||||||
target.style.height = event.rect.height + 'px';
|
}
|
||||||
|
|
||||||
// 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);
|
function hideshowJitsi() {
|
||||||
target.setAttribute('data-y', y);
|
var eljit = document.getElementById("showJit");
|
||||||
target.textContent = event.rect.width + '×' + event.rect.height;
|
eljit.classList.toggle("hide");
|
||||||
});
|
|
||||||
|
|
||||||
function dragMoveListener (event) {
|
var bjit = document.getElementById("bhide_jit");
|
||||||
var target = event.target,
|
bjit.classList.toggle("bhide_chat_off")
|
||||||
// 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;
|
|
||||||
|
|
||||||
// translate the element
|
|
||||||
target.style.webkitTransform =
|
|
||||||
target.style.transform =
|
|
||||||
'translate(' + x + 'px, ' + y + 'px)';
|
|
||||||
|
|
||||||
// update the posiion attributes
|
function hideshowEssay() {
|
||||||
target.setAttribute('data-x', x);
|
var eless = document.getElementById("showEssay");
|
||||||
target.setAttribute('data-y', y);
|
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"
|
// src="https://vjs.zencdn.net/7.10.2/video.min.js"
|
||||||
@ -134,3 +163,6 @@ $(function() {
|
|||||||
// myAudio.pause();
|
// myAudio.pause();
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
125
narrowstyle.css
125
narrowstyle.css
@ -86,7 +86,7 @@ p.about {
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin: 1rem;
|
margin: 1%;
|
||||||
color: #ffffe5;
|
color: #ffffe5;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
max-width: 80px;
|
max-width: 80px;
|
||||||
@ -254,14 +254,67 @@ button.minimize:hover {
|
|||||||
padding-bottom: 2rem;
|
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 {
|
.live {
|
||||||
margin-left: 300px;
|
margin-left: 300px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
/* height: 100%;
|
transition: margin-left 2s;
|
||||||
width: 100%; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.live-flex {
|
.live-flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -276,11 +329,22 @@ button.minimize:hover {
|
|||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullscreen, .fullscreen > video, .fullscreen > #player , .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe {
|
.fullscreen, .fullscreen > video, .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe {
|
||||||
width: 100%;
|
margin: 1%;
|
||||||
|
width: 95%;
|
||||||
}
|
}
|
||||||
.fullscreen > * {
|
.fullscreen > * {
|
||||||
height: 60vh;
|
height: 60vh;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullscreen > img, .halfscreen > img, .thirdscreen > img {
|
||||||
|
max-width: 100% !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#showAudio > * {
|
||||||
|
height: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.halfscreen {
|
.halfscreen {
|
||||||
@ -290,48 +354,24 @@ button.minimize:hover {
|
|||||||
|
|
||||||
.halfscreen > * {
|
.halfscreen > * {
|
||||||
height: 60vh;
|
height: 60vh;
|
||||||
|
border-radius: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thirdscreen {
|
.thirdscreen {
|
||||||
|
margin: 1%;
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.thirdscreen > * {
|
||||||
|
height: 60vh;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.live > * {
|
.live > * {
|
||||||
/* touch-action: none;*/
|
/* 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 {
|
@keyframes corners {
|
||||||
0% {
|
0% {
|
||||||
border-radius: 0.1rem 0.1rem 0.2rem 0.1rem;
|
border-radius: 0.1rem 0.1rem 0.2rem 0.1rem;
|
||||||
@ -426,6 +466,15 @@ content: 'PLAY';
|
|||||||
content: 'PAUSE';
|
content: 'PAUSE';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.img-gallery {
|
.img-gallery {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user