diff --git a/index.html b/index.html index 70a1f89..e29b5f1 100644 --- a/index.html +++ b/index.html @@ -1337,114 +1337,123 @@ + + + + + + - - - diff --git a/lib.js b/lib.js index d147e58..74e8e2f 100644 --- a/lib.js +++ b/lib.js @@ -11909,8 +11909,8 @@ function remoteLowerhands(UUID) { session.sendRequest(msg, UUID); try{ - getById("hands_"+UUID).style.display="none"; - session.rpcs[UUID].remoteRaisedHandElement.style.display = "none"; + getById("hands_"+UUID).classList.add("hidden"); + session.rpcs[UUID].remoteRaisedHandElement.classList.add("hidden"); } catch(e){} return true; } @@ -11923,11 +11923,11 @@ function remoteMute(ele, event=false, skipSend=false) { if (val == 1){ ele.value = 0; ele.classList.remove("pressed"); - ele.innerHTML = ' mute guest'; + ele.innerHTML = ''; } else { ele.value = 1; ele.classList.add("pressed"); - ele.innerHTML = ' un-mute guest'; + ele.innerHTML = ''; } miniTranslate(ele); } diff --git a/main.css b/main.css index 139a293..7a8cdb8 100644 --- a/main.css +++ b/main.css @@ -22,7 +22,6 @@ --myvideo-height:auto; --myvideo-background: #FFF1; --video-background-image: url("data:image/svg+xml,%3Csvg viewBox='-42 0 512 512.002' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m210.351562 246.632812c33.882813 0 63.222657-12.152343 87.195313-36.128906 23.972656-23.972656 36.125-53.304687 36.125-87.191406 0-33.875-12.152344-63.210938-36.128906-87.191406-23.976563-23.96875-53.3125-36.121094-87.191407-36.121094-33.886718 0-63.21875 12.152344-87.191406 36.125s-36.128906 53.308594-36.128906 87.1875c0 33.886719 12.15625 63.222656 36.132812 87.195312 23.976563 23.96875 53.3125 36.125 87.1875 36.125zm0 0'/%3E%3Cpath d='m426.128906 393.703125c-.691406-9.976563-2.089844-20.859375-4.148437-32.351563-2.078125-11.578124-4.753907-22.523437-7.957031-32.527343-3.308594-10.339844-7.808594-20.550781-13.371094-30.335938-5.773438-10.15625-12.554688-19-20.164063-26.277343-7.957031-7.613282-17.699219-13.734376-28.964843-18.199219-11.226563-4.441407-23.667969-6.691407-36.976563-6.691407-5.226563 0-10.28125 2.144532-20.042969 8.5-6.007812 3.917969-13.035156 8.449219-20.878906 13.460938-6.707031 4.273438-15.792969 8.277344-27.015625 11.902344-10.949219 3.542968-22.066406 5.339844-33.039063 5.339844-10.972656 0-22.085937-1.796876-33.046874-5.339844-11.210938-3.621094-20.296876-7.625-26.996094-11.898438-7.769532-4.964844-14.800782-9.496094-20.898438-13.46875-9.75-6.355468-14.808594-8.5-20.035156-8.5-13.3125 0-25.75 2.253906-36.972656 6.699219-11.257813 4.457031-21.003906 10.578125-28.96875 18.199219-7.605469 7.28125-14.390625 16.121094-20.15625 26.273437-5.558594 9.785157-10.058594 19.992188-13.371094 30.339844-3.199219 10.003906-5.875 20.945313-7.953125 32.523437-2.058594 11.476563-3.457031 22.363282-4.148437 32.363282-.679688 9.796875-1.023438 19.964844-1.023438 30.234375 0 26.726562 8.496094 48.363281 25.25 64.320312 16.546875 15.746094 38.441406 23.734375 65.066406 23.734375h246.53125c26.625 0 48.511719-7.984375 65.0625-23.734375 16.757813-15.945312 25.253906-37.585937 25.253906-64.324219-.003906-10.316406-.351562-20.492187-1.035156-30.242187zm0 0'/%3E%3C/svg%3E"); - --advanced-mode: inline-block; --background-main-image: unset; --show-codirectors: inline-block; --full-screen-button: inherit; @@ -57,15 +56,6 @@ table { margin:10px; } -.hideDropMenu{ - user-select: none; - grid-column: 1; - width:100%; - margin:5px 0; - font-size:80%; - cursor: pointer; -} - #audioSource3{ background-color: #FFF; } @@ -607,15 +597,6 @@ body.darktheme .credits>a:visited { color: #FFF; } -.pressed { - background: #1e0000; - -webkit-box-shadow: inset 0px 0px 1px #b90000; - -moz-box-shadow: inset 0px 0px 1px #b90000; - box-shadow: inset 0px 0px 1px #b90000; - outline: none; - color: white; -} - .altpress { background: #673100 !important; -webkit-box-shadow: inset 0px 0px 1px #b90000; @@ -625,11 +606,16 @@ body.darktheme .credits>a:visited { color: white; } -.row { +#mainmenu .row { align-content: center; text-align: center; margin-top: 10px; } +#mainmenu .row:after { + content: ""; + display: table; + clear: both; +} hr { height: 2px; @@ -638,23 +624,6 @@ hr { background-color: gray; } -.orderspan{ - font-size: 50%; - display: inline-block; - margin: auto; - text-align: center; - width: 49px; - height: 22px; - top: 5px; - position: relative; - user-select: none; -} - -.row:after { - content: ""; - display: table; - clear: both; -} .vidcon { max-width: 100%; @@ -2098,14 +2067,20 @@ label { animation: greyout 3s; opacity: 0.3!important; } +.graphSection{ + max-width:50%; +} .graphSection>span { font-size: 10px; - display: block; - margin: 5.5px; - margin-top: 3px; - min-height: 9px; + display: block; + margin: 5px; + margin-top: 0px; + margin-right: 0px; + height: 50px; +} +.graphSection>span:last-child{ + margin-bottom: 0px; } - span[data-action-type="stats-graphs-details-container"]>span{ padding: 1px; display:block; @@ -2184,9 +2159,12 @@ span[data-action-type="stats-graphs-details-container"]>span{ } .canvasStats{ background-color: black; - width: calc(100% - 10px); + width: calc(100%); height: 50px; - margin: 5px; + margin: 0 5px 5px 0; +} +.canvasStats:last-child{ + margin: 0 5px 0 0; } .manualInput{ width: 55px; @@ -2211,8 +2189,10 @@ span[data-action-type="stats-graphs-details-container"]>span{ .lowerRaisedHand{ margin: auto; - margin-bottom:10px; - background-color:yellow; + margin-left: 5px; + margin-bottom: 10px; + background-color: yellow; + width: calc(100% - 10px); } .float { opacity: 0.8; @@ -2309,24 +2289,6 @@ iframe { margin-right: 0; text-align: right; } -.director-message-box{ - display: flex; - flex: 1 100%; - flex-wrap: wrap; -} -.director-message-box textarea { - margin: 5px; - flex: 1 100%; - padding: 5px; -} -.director-message-box > button { - margin: 5px; - text-align: right; -} -.director-message-box > span { - top: 5px; - position: relative; -} img { max-width: 100%; @@ -2929,10 +2891,10 @@ button.toggleSettings{ } .hidden { - display:none!important; + display: none !important; visibility: hidden; - width:0px; - height:0px; + width: 0px; + height: 0px; opacity: 0; } .grabLinks a:visited { @@ -3464,40 +3426,148 @@ div#roomnotes2 { .directorsgrid button { text-transform: lowercase; } + + + + + + +/* ---- DIRECTORS PAGE - Guest Controls Box ---- */ .controlsGrid { display: flex; flex-wrap: wrap; } -.controlsGrid button { - margin: 5px; - text-align: right; - flex: 0 1 calc(50% - 10px); -} -.controlsGrid > div { +.controlsGrid .group { width: 100%; display: flex; + flex-direction: column; } -.controlsGrid input { - margin: 5px; +.controlsGrid .row { + width: 100%; + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 5px; + margin-bottom: 5px; +} +.controlsGrid .row > .row { + margin: 0; +} +.controlsGrid .row.two > * { + flex: 1 33%; +} +.controlsGrid .row.three > * { + flex: 1 25%; +} +.controlsGrid .row.four > * { + flex: 1 20%; +} +.controlsGrid .row.six > * { + flex: 1 13%; } -button[data-action-type="messaging-box-close"] { - flex: 0 1 25%; +.controlsGrid button { + margin: 0; + text-align: right; } -button[data-action-type="messaging-box-send"] { - flex: 1 0 50% +.controlsGrid button.center { + display: flex; + align-self: center; + justify-content: center; + padding: 0 5px; + padding-top: 7px; + padding-bottom: 6px; } -.controlsGrid > span.tooltip { +.controlsGrid .spacer { + width: 100%; + height: 5px; +} +.controlsGrid .spacer.big { + height: 15px; +} + +/* Specitic CSS for different elements inside the guest control-buttons */ +.controlsGrid .director-message-box { + flex: 1 100% !important; + padding: 10px; + + background: rgba(0, 0, 0, .15); + + display: flex; + flex-wrap: wrap; + gap: 5px; +} +.controlsGrid .director-message-box textarea { + flex: 1 100%; + padding: 5px; +} +.controlsGrid .director-message-box .message-close { + flex: 1; +} +.controlsGrid .director-message-box .message-send { + flex: 1 33%; +} + +.controlsGrid .tooltip { + flex: 1 calc(50% - 10px); display: flex; - flex: 1 calc(50% - 10px); align-items: center; } - -.advanced { - display: var(--advanced-mode); +.controlsGrid .tooltip input[type=range] { + margin: 0; } +.controlsGrid .tooltip .tooltiptext { + top: -25px; +} + +.controlsGrid .hideDropMenu{ + user-select: none; + grid-column: 1; + width: 100%; + margin-top: 10px; + margin-bottom: 5px; + font-size: 80%; + cursor: pointer; +} +.controlsGrid .orderspan { + font-size: 50%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + text-align: center; + position: relative; + user-select: none; +} +.controlsGrid .orderspan .order-label { + width: max-content; +} + +/* Hightlights for buttons in the guest control-buttons */ +.controlsGrid .btn-HL-yellow { + background: rgb(255, 235, 154); +} +.controlsGrid .btn-HL-peach { + background: rgb(243, 197, 242); +} +.controlsGrid .btn-HL-green { + background: rgb(130, 223, 128); +} +.controlsGrid .btn-HL-blue { + background: rgb(170, 204, 248); +} + +/* Hides buttons that are supposed to be hidden when &novice is added to URL */ +.controlsGrid .advanced.hide { + display: none; +} + + + + #widget { position: absolute; @@ -3516,11 +3586,9 @@ button[data-action-type="messaging-box-send"] { top: 8px; right: 10px; } -.advanced { - display: var(--advanced-mode); -} .controlCenterBox{ margin-top:2px; + padding: 0 5px; } .contolboxLabel { @@ -4809,4 +4877,17 @@ body.darktheme .startupWarning>.las { } body.darktheme .invite_setting_group_links a { color:#d2e5ff!important; +} + + + + +/* ---- BASIC CSS CLASSES ---- */ +.pressed { + background: #1e0000 !important; + -webkit-box-shadow: inset 0px 0px 1px #b90000; + -moz-box-shadow: inset 0px 0px 1px #b90000; + box-shadow: inset 0px 0px 1px #b90000; + outline: none; + color: white; } \ No newline at end of file diff --git a/main.js b/main.js index 6d2b45c..bf97b60 100644 --- a/main.js +++ b/main.js @@ -242,7 +242,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s } if (urlParams.has('novice') ) { - document.documentElement.style.setProperty('--advanced-mode', "none"); // hide advanced items + // Hiding advanced items + document.querySelectorAll(".advanced").forEach(element => { + element.classList.add("hide"); + }) } if (urlParams.has('avatarimg') || urlParams.has('bgimage') || urlParams.has('bgimg')) { // URL or data:base64 image. Becomes local to this viewer only. This is like &avatar, but slightly different. Just CSS in this case @@ -5032,9 +5035,15 @@ async function main(){ // main asyncronous thread; mostly initializes the user s if ("advancedMode" in e.data){ if (e.data.advancedMode){ - document.documentElement.style.setProperty('--advanced-mode', "inline-block"); // show advanced items + // Un-hiding advanced items + document.querySelectorAll(".advanced").forEach(element => { + element.classList.remove("hide"); + }) } else { - document.documentElement.style.setProperty('--advanced-mode', "none"); // hide advanced items + // Hiding advanced items + document.querySelectorAll(".advanced").forEach(element => { + element.classList.add("hide"); + }) } }