/* global reset */
html,body,button,li,ul,img,form,h1,h2,h3,h4,h5,h6,hr,table
{
margin: 0px;
padding: 0px;
}
html,body
{
/* font-family: Arial, Helvetica, sans-serif;*/
font-family: sans-serif;
/* font-family: verdana;*/
color: white;
}
body
{
background-color: rgb(30,30,30);
overflow-y: scroll;
overflow-x: hidden;
}
button
{
outline: 0;
border-style: none;
}
form
{
display:inline;
margin:0;
padding:0;
}
.textMono
{
font-family: Courier New;
}
textarea:not(.adminForms):not(.adminFormsAlt)
{
font-family: sans-serif;
background-color: rgb(30,30,30);
outline: 0;
border-width: 0 0 2px;
border-color: rgb(100,100,100);
width: 100%;
height: 0.5rem;
resize: none;
padding: 0;
margin: 0;
/* flex-grow: 1;*/
}
hr
{
display: block;
height: 1px;
border: 0;
border-top: 1px solid grey;
margin: 0.5em 0;
padding: 0;
}
.hrWhite
{
display: block;
width: 100%;
height: 1px;
border: 0;
border-top: 1px solid white;
margin: 0.5em 0;
padding: 0;
}
.hrGrey
{
display: block;
width: 100%;
height: 1px;
border: 0;
border-top: 1px solid grey;
margin: 0.5em 0;
padding: 0;
}
/* hrA
{
display: block;
height: 1px;
border: 0;
border-top: 1px solid grey;
padding: 0;
margin: 0.5em 0.5em 0 0;
}
*/ /* hrA { color: gray; border-style: inset; border-bottom: 1px; margin: 0.5em auto; }*/
.adminForms
{
background-color: white;
outline: 0;
border-width: 0 0 2px;
border-color: rgb(100,100,100);
width: 100%;
padding: 0;
margin: 0;
}
.adminFormsAlt
{
background-color: white;
outline: 0;
border-width: 0 0 2px;
border-color: rgb(100,100,100);
width: 80%;
padding: 0;
margin: 0;
}
textarea:focus
{
border-color: white;
}
a, a:visited
{
color: white;
}
.highlight-orange
{
background-color: rgb(200,120,70);
}
.breakLongLinks
{
/* overflow-wrap: break-word;
word-break: break-all;
white-space: normal;*/
/*display: inline-block;*/
word-break: break-word;
}
.breakAll
{
/* overflow-wrap: break-word;
word-break: break-all;
white-space: normal;*/
/*display: inline-block;*/
word-break: break-all;
}
.linksForEditPage
{
display: inline-block;
text-overflow: initial;
white-space: normal;
overflow: visible;
overflow-wrap: normal;
text-align: left;
line-height: 1.2;
/* max-height: 150px;
max-width: 138px;
min-height: 150px;
min-width: 138px;
*/ }
.parentForLinks
{
max-height: 150px;
max-width: 138px; /*had to go 10px bigger than as shown on watch page; fix later so they can match*/
min-height: 150px;
min-width: 138px; /*had to go 10px bigger than as shown on watch page; fix later so they can match*/
}
.linkNoUnderline
{
text-decoration: none;
}
.db-tables
{
width: 100%
max-width: 100%;
margin: 1rem;
color: white;
}
.db-tables a
{
color: white;
}
.db-tables > a
{
color: white;
}
.db-grid
{
display: grid;
grid-template-columns: 0.5fr repeat(9, 1fr); /* 10 columns, smaller first column */
/* grid-template-columns: 0.5fr 0.5fr 1fr 1fr 1fr 2fr 1fr 1fr 1.5fr 1.5fr; */ /* optional specific fractions for columns */
gap: 10px;
width: 100%;
box-sizing: border-box;
padding: 5px 10px;
border-bottom: 1px solid #ccc;
}
.db-rows
{
display: flex;
flex-direction: row;
}
.db-fields
{
font-size: 1rem;
padding: 0.5rem;
text-align: right;
background-color: rgb(50,50,50);
word-break: break-word; /* ensures long strings wrap */
}
.overflow-wrap
{
overflow-x: wrap;
overflow-wrap: break-word;
text-overflow: ellipsis;
}
.overflowE
{
overflow-x: hidden;
text-overflow: ellipsis;
}
td
{
text-align: left;
}
.admin-fields-xtraLrgAlt
{
width: 25%;
overflow: hidden;
}
.admin-fields-xtraLrg
{
width: 16%;
overflow: hidden;
}
.admin-fields-lrg
{
width: 12%;
overflow: hidden;
}
.admin-fields-med
{
width: 6.25%;
overflow: hidden;
}
.admin-fields-medAlt
{
width: 6.25%;
}
.admin-fields-medLrg
{
width: 8.25%;
}
.admin-fields-medSmall
{
width: 4.25%;
}
.admin-fields-small
{
width: 2%;
overflow: hidden;
}
/* tests */
/* borders */
.solidBox
{
width: 60px;
height: 20px;
border: 1px solid white;
border-radius: 10px;
}
.borderLineOnly-white
{
border: 1px solid white;
}
.border-white-all
{
border: 1px solid white;
border-radius: 10px;
}
.border-white-topLine
{
border-top: 1px solid grey;
width: 99%;
}
.border-bottom
{
border-bottom: 1px solid grey;
}
.border-bottomDark
{
border-bottom: 1px solid rgb(60,60,60);
}
.border-bottomWhite
{
border-bottom: 1px solid white;
}
.border-topGrey
{
border-top: 1px solid grey;
}
.border-bottomGrey
{
border-bottom: 1px solid grey;
}
.border-LnRwhite
{
border-left: 1px solid white;
border-right: 1px solid white;
}
.border-001
{
border: 1px solid grey;
}
.border-002
{
border: 1px solid rgb(60,60,60);
}
.border-003
{
border: 2px solid white;
}
.border-white-editing
/* {
border: 1px solid grey;
border-radius: 5px;
}
*/
.border-white
/* {
border: 1px solid grey;
border-radius: 10px;
}
*/
.border-white-optional
/* {
border: 1px solid grey;
border-radius: 10px;
}
*/
.border-pink-editing, #video-parent-of-Grid1fLayers,
/* {
border: 2px solid pink;
border-radius: 2px;
}
*/
#border-pink-editing
/* {
border: 2px solid pink;
}
*/
.border-cyan-editing
/* {
border: 1px solid cyan;
border-radius: 2px;
}
*/
.border-cyan-editingA
/* {
border: 1px solid cyan;
border-radius: 2px;
}
*/
.border-dodgerblue-editing
/* {
border: 1px solid yellow;
border-radius: 2px;
}
*/
.border-red-editing
/* {
border: 1px solid red;
border-radius: 2px;
}
*/ .border-yellow-editing
/* {
border: 1px solid yellow;
border-radius: 2px;
}
*/
/* header */
.header
{
width: 100%;
max-width: 100%;
}
.logo
{
width: 11em;
height: auto;
}
#search-form-column-mobile
{
/* z-index: 0;*/ /* //// why is this 0 */
display: flex;
flex-direction: column;
flex-grow: 1;
max-width: 75%;
}
#search-form-row-mobile
{
/* width: 75%;*/
/* flex-grow: 1;*/
}
.search-box-div-mobile
{
display: inline;
/* width: 75%;*/
}
#search-box-mobile
{
width: 90%;
font-size: 2em;
}
#search-phrase-loop-parent-mobile
{
overflow: hidden;
}
#search-form-column
{
display: none;
}
.search-box-div
{
display: none;
}
#search-box
{
font-size: 2em;
}
#id-search-center, #id-search-center-mobile
{
font-size: 2em;
display: none;
}
#id-search-right
{
font-size: 3em;
}
#id_mobileMenuIcon /* //// may not be needed */
{
display: grid;
}
#id_mobileMenuIconBars
{
display: flex;
flex-direction: column;
gap: 0.5rem;
align-self: center;
}
.hamb-line
{
width: 3rem;
height: 0.5rem;
background-color: white;
}
.relative
{
position: relative;
}
#id_avatarMenuIcon
{
display: none;
}
#id_avatarMenuList
{
display: none;
position: absolute;
right: 0;
top: 50px;
left: auto;
/* margin-left: 0;
margin-right: 0;
margin-top: 0;*/
background-color: rgb(30,30,30);
padding: 0.3em;
border-radius: 10px;
border: 1px solid white;
}
#id_mobileMenuList, #id_mobileSearch
{
display: none;
align-self: center;
justify-self: center;
background-color: rgb(30,30,30);
padding: 0.3em;
}
/* :not(.iconTop) */
#id_avatarMenuListItems > a > div
{
font-size: 1rem;
padding: 0.3rem 2rem; /* top btm, right left */
}
#id_avatarMenuListItems > div
{
font-size: 1rem;
padding: 0.3rem 1rem; /* top btm, right left */
color: white;
font-weight: bold;
cursor: none;
}
#id_mobileMenuListItems > a > div
{
font-size: 1.5rem;
padding: 0.3rem 2rem; /* top btm right left */
min-height: 40px;
}
.sidebar-menu-left > a > div
{
font-size: 1rem;
/* font-size: 1.2rem;*/
padding: 0.25rem 1rem; /* top btm / right left */
}
.sidebar-menu-left > a > div > div
{
margin-left: 0.3rem;
}
#id_mobileMenuListItems > a, .sidebar-menu-left > a, #id_avatarMenuListItems > a
{
text-decoration: none;
color: rgb(190,190,190);
}
#id_mobileMenuListItems > a > div, .sidebar-menu-left > a > div, #id_avatarMenuListItems > a > div, #id_avatarMenuListItems > div
{
display: flex;
flex-direction: row;
gap: 0.5rem;
justify-content: left;
align-items: center;
/* text-align: center;*/
/* align-content: center;*/
}
.sidebar-menu-left
{
display: none;
flex-direction: column;
gap: 0.2rem;
/* width: 9rem;
min-width: 9rem;
max-width: 9rem;
*/
margin-top: 2rem;
margin-bottom: 2rem;
/* margin-left: 0.5rem;
margin-right: 0.5rem;*/
}
.divider
{
margin-top: 1rem;
margin-bottom: 1rem;
background-color: lightgrey;
width: 200px;
height: 2px;
}
.sidebar-menu-left > a, #id_mobileMenuListItems > a, #id_avatarMenuListItems > a, #id_avatarMenuListItems > div
{
justify-content: left;
text-align: left;
}
.categ-img-root
{
width: 3em;
border: 1px solid rgb(40,40,40);
border-radius: 10px;
overflow: hidden;
aspect-ratio: 16 / 9;
}
.sidebar-menu-left > a > div > div > img, #id_mobileMenuListItems > a > div > div > img:not(.avatar-inner)
{
width: 3em;
aspect-ratio: 16/9;
/* height: auto;*/
}
#id_mobileMenuListItems > a > div:hover:not(.lines), .sidebar-menu-left > a > div:hover, #id_avatarMenuListItems > a > div:hover:not(.lines)
{
background-color: rgb(70,70,70);
border-radius: 6px;
}
.justifySelfCenter
{
justify-self: center;
}
.justifySelfLeft
{
justify-self: left;
}
#links
{
display: none;
font-size: 1em;
color: white;
white-space: nowrap;
}
.middle
{
width: 100%;
min-width: 100%;
justify-content: center;
}
/* divs menus etc */
.td-grey
{
background-color: rgb(50,50,50);
}
.list
{
justify-content: left;
text-align: left;
}
ul, li
{
margin-left: 10px;
}
#id_globalAudioVolIconDiv, #id_globalFadeIconDiv, #id_videoFadeIconDiv, #id_vidBrightnessIcon
{
display: grid;
grid-template-columns: 1fr;
}
.parentGrid1f
{
display: grid;
grid-template-columns: 1fr;
` }
.flex-child-1fnoGrow
{
grid-row-start: 1;
grid-column-start: 1;
}
.flex-child-1f
{
flex-grow: 1; /*fill remaining space not forced by menus*/
grid-row-start: 1;
grid-column-start: 1;
}
#id_globalAudioVolIconMsg, #id_globalFadeIconMsg
{
color: cyan;
font-size: 0.6em;
white-space: nowrap;
line-height: 1.1;
z-index: 500;
text-shadow: 0.1em 0.1em 0.1em black;
}
#id_videoFadeIconMsg, #id_videoPlayModeIconMsg
{
color: orange;
font-size: 0.6em;
white-space: nowrap;
line-height: 1.1;
z-index: 500;
text-shadow: 0.1em 0.1em 0.1em black;
}
#video-parent-of-Grid1fLayers
{
/* background-color: pink;*/
background-color: rgb(30,30,30);
/* justify-self: center;
justify-content: center;
align-items: center;
text-align: center;*/
}
.thumbOverlay
{
flex-grow: 1;
aspect-ratio: 16 / 9;
grid-row-start: 1;
grid-column-start: 1;
z-index: 100;
}
#zt-av-content-root
{
/* text-align: center;
align-self: center;
justify-self: center;*/
display: grid;
grid-template-columns: 1fr;
flex-grow: 1; /*fill remaining space not forced by menus*/
/* these 2 used to be on but were causing issues and seems to work fine with them off*/
/*max-height: 80vh;*/ /* max height is 80% of viewport height */
/*max-width: 150vh;*/ /* 150% of viewport height */
/*maybe move to inside media query below*/
width: 100%;
min-width: 100%;
aspect-ratio: 16/9;
height: auto;
/* margin: 0;*/
padding: 0;
}
.center-zt-av-content-root /* js adds this class on fullscreen */
{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.revert-zt-av-content-root /* js adds this class on fullscreen */
{
position: static;
left: 0;
top: 0;
transform: translate(0, 0);
}
/*
@media all and (max-width: 767px) {
.the-class-name {
}
}
*/
.menus-test
{
z-index: 800;
align-self: center;
justify-self: center;
flex-grow: 1;
aspect-ratio: 16 / 9;
grid-row-start: 1;
grid-column-start: 1;
}
#vid-test
{
z-index: 800;
border: 2px solid yellow;
width: 50px;
height: 50px;
pointer-events: none;
align-self: center;
justify-self: center;
}
.overlayView
{
flex-grow: 1;
aspect-ratio: 16 / 9;
grid-row-start: 1;
grid-column-start: 1;
}
#outerMenuDiv
{
/* position: relative;*/
display: grid;
z-index: 150; /* not sure why cover boxes still can fade this */
grid-template-columns: 1fr;
flex-grow: 1;
width: 100%;
min-width: 100%;
aspect-ratio: 16/9;
margin: 0;
padding: 0;
/* border: 2px solid pink;*/
grid-row-start: 1;
grid-column-start: 1;
visibility: hidden;
/* z-index: 6;*/
/* display: flex;
flex-direction: column;*/
}
#zt-av-menus-justify /* the global parent div that surrounds all menus */
{
/* visibility: hidden;*/
z-index: 40;
display: flex;
justify-content: flex-end;
flex-direction: column;
/*fill remaining space not forced by menus*/
flex-grow: 1;
grid-row-start: 1;
grid-column-start: 1;
width: 100%;
aspect-ratio: 16/9;
}
#zt-video
{
z-index: 0;
}
#zt-menu-overlay /* the overall parent div that is justified to the bottom of the video */
{
/* opacity: 0;*/
z-index: 40;
/* visibility: hidden;*/ /* note that this is set to visible in menu..js file; perhaps can just remove it in both places */
padding: 0;
bottom: 0;
}
/* #zt-video:hover ~ #zt-menu-overlay {
opacity: 100;
}
*/
/* #zt-menu-overlay:hover
{
opacity: 100;
}
*/
.audio-columns
{
width: 100%;
display: flex;
justify-content: space-between;
}
.belowAmbMusBtns
{
padding: 0.2em 0.5em 0.5em 0.5em;
}
.pad
{
padding: 0.5em 0.3em 0.3em 0.3em;
}
.padLrgBoxA
{
padding: 1em 2em 1em 2em;
}
.pad1em
{
padding: 1em;
}
.padp75em
{
padding: 0.75em;
}
.padp5em
{
padding: 0.5em;
}
.padp25em
{
padding: 0.25em;
}
.padP15em
{
padding: 0.15em;
}
.padP1em
{
padding: 0.1em;
}
.padA
{
padding: 0em 0.5em; /* top-btm, left-right */
}
.padB
{
padding: 1em 0.25em; /* top-btm, left-right */
}
.padC
{
padding: 0em 0.7em; /* top-btm, left-right */
}
.margin3
{
margin: 3em;
}
.margin0
{
margin: 0;
}
.marginTB0
{
margin-bottom: 0;
margin-top: 0;
}
.marginAu
{
margin: auto;
}
.marginLauto
{
margin-left: auto;
}
.marginRauto
{
margin-right: auto;
}
.flex
{
display: flex;
}
.flexEnd
{
justify-content: flex-end;
}
.alignFlexStart
{
align-self: flex-start;
}
.alignFlexEnd
{
align-self: flex-end;
}
.alignFlexCenter
{
align-self: center;
}
.flexStart
{
justify-content: flex-start;
}
.flexRow
{
flex-direction: row;
}
.flexCol
{
flex-direction: column;
}
.nowrap
{
white-space: nowrap;
}
.pointer
{
cursor: pointer;
}
.noPointer
{
pointer-events: none;
}
.noHighlight
{
outline-style:none;
}
.cursorDefault
{
cursor: default;
}
.space-around
{
justify-content: space-around;
}
.zen-mixes-text
{
color: rgb(60,180,255);
margin-left: 0.2em;
font-size: 1.0em;
white-space: nowrap;
line-height: 1.1;
}
.text-orange
{
color: orange;
}
.text-grey
{
color: lightgrey;
}
.text-darkgrey
{
color: grey;
}
.text-medgrey
{
color: rgb(160,160,160);
}
.text-black
{
color: black;
}
.text-blue
{
color: rgb(60,180,255);
}
#nagRegisterForForcedBlue, #nagSignInForForcedBlue, #nagLinkA /*this is the force the links to grab the color because for some reason the class won't*/
{
color: rgb(60,180,255);
}
.text-green
{
color: rgb(95,235,0);
}
.text-red
{
color: rgb(235,20,20);
}
.amb-active-link
{
color: rgb(60,180,255);
}
.amb-active-row
{
background-color: rgb(30,90,200);
}
.amb-updated-row
{
border: 2px solid red;
border-radius: 5px;
}
.LegendA
{
font-size: 0.8rem;
height: 1rem;
border: 2px solid red;
border-radius: 5px;
}
.LegendB
{
font-size: 0.8rem;
height: 1rem;
background-color: rgb(30,90,200);
}
.underline
{
text-decoration: underline;
}
.audio-entry
{
display: flex;
text-align: center;
align-items: center;
justify-content: center;
width: 100%;
white-space: nowrap;
}
#audio-music-column, #audio-ambience-column, .audio-ambience-entries
{
padding: 0.15em;
row-gap: 0.3em;
column-gap: 0.3em;
}
#id_musMenuOverride
{
gap: 1.5em;
}
#id_ambMenuOverride
{
gap: 1.5em;
}
.center-popup-menus /* this is just a parent to justify btm the pop-up menus */
{
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.AbsPresetList
{
font-size: 0.9em;
white-space: nowrap;
line-height: 1.2;
max-height: 150px;
max-width: 130px;
min-width: 50px;
overflow: hidden;
}
.chgMaxWidthA
{
/* flex: 1;*/
/* flex: 1 1 auto;*/
/* max-width: 350px;
min-width: 350px;*/
padding-left: 0.25em;
padding-right: 0.25em;
}
.popup-menusAlt /*parent*/
{
/* flex: 1;*/
background-color: black;
border-radius: 10px;
background: rgba(0, 0, 0, .75);
padding: 0.3em;
max-width: 350px;
/* max-height: 230px;*/
/* overflow: auto;*/
}
.popup-menus
{
background-color: black;
border-radius: 10px;
background: rgba(0, 0, 0, .75);
padding: 0.3em;
z-index: 800;
}
.popupA
{
background-color: black;
border-radius: 10px;
background: rgba(0, 0, 0, .75);
z-index: 980;
}
#popup-center-area, #popup-left, #popup-right
{
flex-grow: 1;
}
.fadeOutCoverSlow {
animation: fadeOutValues 5s linear forwards;
}
.fadeInCoverFast {
animation: fadeInValues 1s linear forwards;
}
.fadeOutCoverFast {
animation: fadeOutValues 1s linear forwards;
}
.fadeOutCoverMed {
animation: fadeOutValues 3s linear forwards;
}
@keyframes fadeOutValues {
0% { opacity:1; }
100% { opacity:0; }
}
@keyframes fadeInValues {
0% { opacity:0; }
100% { opacity:1; }
}
.fadeIn
{
animation: fadeInOut 0.4s linear forwards;
}
.fadeOut
{
animation: fadeInOut 0.4s linear backwards;
}
@keyframes fadeInOut
{
0% { opacity:0; }
100% { opacity:1; }
}
.cursor
{
cursor: pointer;
}
.hoverHighlight:hover
{
background-color: dimgray;
}
.liveOdChoice:hover
{
font-weight: bold;
}
.popup-param
{
color: white;
z-index: 500;
}
.popup-setting
{
color: lightgrey;
z-index: 500;
}
.popup-arrow
{
color: white;
}
.inline
{
display: inline;
}
.flexGap2em
{
gap: 2em;
}
.flexGap1em
{
gap: 1em;
}
.flexGap1p5em
{
gap: 1.5em;
}
.flexGapP8em
{
gap: 0.8em;
}
.flexGapP5em
{
gap: 0.5em;
}
.flexGapP3em
{
gap: 0.3em;
}
.flexGapP25em
{
gap: 0.25em;
}
.flexGapP1em
{
gap: 0.1em;
}
.globalAudio-container
{
display: flex;
flex-direction: column;
}
.globalVideo-container
{
display: flex;
flex-direction: column;
}
.space-between
{
justify-content: space-between;
}
.space-between-center-cross
{
justify-content: space-between;
align-items: center;
}
.space-around-center-cross
{
justify-content: space-around;
align-items: center;
}
#vid-fade
{
background-color: dimgrey;
}
.vid-buttons-div
{
display: flex;
column-gap: 0.5em;
align-items: center;
}
.vid-buttons-tightDiv
{
margin: 0;
padding: 0;
}
.marginA
{
margin-top: 0.51em;
margin-bottom: 0.51em;
}
#arrows-etc
{
/* display: none;*/
visibility: hidden; /*hiding until video starts to play, then it unhides; happens within video-inner-data.php */
justify-content: center;
transform: scale(1.35);
/*these were added to center the arrow for the new idea*/
grid-row-start: 1;
grid-column-start: 1;
align-self: center;
justify-self: center;
position: relative;
/* margin-bottom: 3em;*/
}
#arrows-etc-lower /* this is for the wide view > 900 vw */
{
/* display: none;*/
visibility: hidden; /*hiding until video starts to play, then it unhides; happens within video-inner-data.php */
justify-content: center;
align-self: center;
justify-self: center;
position: absolute; /* this must be here so it wont force video too wide when it's not showing in a narrow view, so this takes it out of the flow*/
/* i have to do it this way because i can't set display to none or it will mess up js */
}
.zindex950 /* there's always something that might go on top, so never do 999 */
{
z-index: 950;
}
.zindex850 /* there's always something that might go on top, so never do 999 */
{
z-index: 850;
}
.zindex200
{
z-index: 200;
}
.zindex70
{
z-index: 70;
}
.zindex30
{
z-index: 30;
}
.zindexA
{
z-index: 15;
}
.arrows-etc-mus
{
display: flex;
justify-content: center;
gap: 0.6em;
margin: 0 0 0.35em 0;
}
.arrow-groups-mus
{
display: flex;
cursor: pointer;
}
.arrow-groups
{
display: flex;
margin: 0.3em 1em 0 1em;
cursor: pointer;
}
.zt-arrow-left
{
width: 0;
height: 0;
border-top: 0.75em solid transparent;
border-right: 2.5em solid white;
border-bottom: 0.5em solid transparent;
}
.zt-play-div
{
display: none;
margin: 0 20px 0 20px;
}
.zt-arrow-play
{
background-color: white;
width: 2em;
height: 1.2em;
clip-path: polygon(5% 100%,
95% 50%,
5% 0%
);
}
.zt-arrow-play-mus
{
width: 0;
height: 0;
border-top: 0.75em solid transparent;
border-left: 1.9em solid grey;
border-bottom: 0.5em solid transparent;
margin: 0;
}
.zt-dubArrow
{
background-color: white;
width: 2.25em;
height: 1.2em;
clip-path: polygon(18% 50%,
65% 85%,
65% 65%,
95% 85%,
95% 15%,
65% 35%,
65% 15%
);
}
.zt-playMus-div
{
cursor: pointer;
min-width: 2em;
}
.zt-pause-div
{
margin: 0 22px 0 22px;
width: 1.7em;
}
.zt-pauseMus-div
{
display: flex;
justify-content: space-around;
margin: 0;
width: 2em;
cursor: pointer;
}
#playPauseMusDiv
{
min-width: 2em;
max-width: 2em;
display: inline;
}
#audio-fade-tri
{
background-color: cyan;
width: 40px;
height: 20px;
clip-path: polygon(0% 0%,
0% 100%,
100% 100%
);
}
.zt-dubArrow-left, .zt-dubArrow-right
{
background-color: white;
width: 2.25em;
height: 1.2em;
clip-path: polygon(0% 50%,
65% 100%,
65% 75%,
100% 100%,
100% 0%,
65% 25%,
65% 0%
);
}
#video-fade-tri
{
background-color: orange;
width: 40px;
height: 20px;
clip-path: polygon(0% 0%,
0% 100%,
100% 100%
);
}
.zt-arrow-right
{
width: 0;
height: 0;
border-top: 0.75em solid transparent;
border-left: 2.5em solid white;
border-bottom: 0.5em solid transparent;
}
.zt-arrow-left-mus
{
width: 0;
height: 0;
border-top: 0.75em solid transparent;
border-right: 2em solid grey;
border-bottom: 0.5em solid transparent;
}
.zt-arrow-right-mus
{
width: 0;
height: 0;
border-top: 0.75em solid transparent;
border-left: 2em solid grey;
border-bottom: 0.5em solid transparent;
}
.zt-pause
{
height: 1.4em;
width: 0.6em;
background-color: white;
}
.zt-pauseMus
{
height: 1.2em;
width: 0.6em;
background-color: grey;
}
.loader
{
border: 0.325em solid white;
border-radius: 50%;
border-top: 0.325em solid rgb(75,190,0);
width: 0.65em;
height: 0.65em;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
#audioWaiting
{
min-width: 2em;
max-width: 2em;
pointer-events: none;
display: none;
}
/* this is for horizontal small menu - if using it */
.small-menu-hor
{
color: white;
padding: 0;
margin: 0;
}
/* this is for vertical small menu - if using it */
.small-menu
{
display: flex;
flex-direction: column;
justify-content: space-around;
color: white;
text-align: center;
padding: 0;
margin: 0 0 0 1em;
}
#id_settingsMenu
{
min-width: 10em;
}
.av-menus-container
{
flex-grow:1;
}
.av-menus-outerContainer
{
width: 100%;
display: flex;
}
/* Safari */
@-webkit-keyframes spin
{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin
{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.zt-square
{
height: 1.4em;
width: 0.2em;
background-color: white;
}
.zt-square-mus
{
height: 1.2em;
width: 0.2em;
background-color: grey;
}
.zt-vid-fadetype
{
display: flex;
justify-content: flex-end;
column-gap: 0.5em;
}
.zt-vid-playnextChoices
{
display: flex;
justify-content: flex-end;
column-gap: 0.5em;
}
#autonext-choice
{
font-size: 0.7em;
margin: 0;
padding: 0;
color: lightgrey;
line-height: 1.2;
text-align: right;
white-space: nowrap;
}
.marginLp5
{
margin-left: 0.5em;
}
.marginL1
{
margin-left: 1em;
}
.marginRp5
{
margin-right: 0.5em;
}
.marginRp25
{
margin-right: 0.2em;
}
.marginR1
{
margin-right: 1em;
}
.marginR2em
{
margin-right: 2em;
}
.marginLRp5
{
margin-left: 0.5em;
margin-right: 0.5em;
}
.marginLRp15
{
margin-left: 0.15em;
margin-right: 0.15em;
}
.marginLR1
{
margin-left: 1em;
margin-right: 1em;
}
.marginLR1p5
{
margin-left: 1.5em;
margin-right: 1.5em;
}
.marginLR2
{
margin-left: 2em;
margin-right: 2em;
}
.marginBTp5
{
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.marginBT1
{
margin-bottom: 1em;
margin-top: 1em;
}
.marginB
{
margin-bottom: 1em;
margin-top: 2em;
}
.marginC
{
margin-right: 5em;
}
.marginD
{
margin-bottom: 0.5em;
margin-top: 1em;
}
.marginE
{
margin-bottom: 4em;
}
.marginBp5
{
margin-bottom: 0.5em;
}
.marginB1
{
margin-bottom: 1em;
}
.marginBp25
{
margin-bottom: 0.25em;
}
.marginTp5
{
margin-top: 0.5em;
}
.marginT1
{
margin-top: 1rem;
}
.marginT2
{
margin-top: 2rem;
}
.paddingP25
{
padding: 0.25em;
}
.paddingP5em
{
padding: 0.5em;
}
.padding2em
{
padding: 2em;
}
.paddingLp5
{
padding-left: 0.5em;
}
.paddingLRp25
{
padding-left: 0.25em;
padding-right: 0.25em;
}
.paddingLRp4
{
padding-left: 0.4em;
padding-right: 0.4em;
}
.paddingLRp5
{
padding-left: 0.5em;
padding-right: 0.5em;
}
.paddingLR1
{
padding-left: 1em;
padding-right: 1em;
}
.paddingLR3
{
padding-left: 3em;
padding-right: 3em;
}
.paddingLRp8-p4
{
padding-left: 0.8em;
padding-right: 0.4em;
}
.paddingTB
{
padding-top: 0.2em;
padding-bottom: 0.2em;
}
.paddingTBp1
{
padding-top: 0.1em;
padding-bottom: 0.1em;
}
.zt-vid-radioBtns
{
display: flex;
flex-direction: column;
align-items: top; /* //// this should probably be 'start', not 'top' */
}
.tightDiv
{
margin: 0;
padding: 0;
}
.zt-vid-fadeOut-div
{
width: 8em;
margin-left: 0.5em;
margin-right: 0.5em;
}
.zt-vid-fadeEndingOpac-div
{
width: 10em;
margin-left: 0.5em;
margin-right: 0.5em;
}
#id_vidBrightnessTop
{
width: 10em;
margin-left: 0.0em;
margin-right: 0.5em;
}
.zt-vid-fadeEndingOpac-div-upper
{
color: white;
font-size: 0.7em;
white-space: nowrap;
line-height: 1.1;
}
.zt-font-p7
{
font-size: 0.7em;
white-space: nowrap;
line-height: 1.1;
}
.zt-font-p85
{
font-size: 0.85em;
white-space: nowrap;
/* line-height: 1.1;*/
}
.zt-vid-fadeEndingOpac-div-lower
{
color: yellow;
font-size: 0.6em;
white-space: nowrap;
line-height: 1.1;
}
.zt-justify-center
{
display: flex;
justify-content: center;
}
.justifyContCenter
{
justify-content: center;
}
.center
{
text-align: center;
align-items: center;
align-content: center;
justify-content: center;
}
.centerVert
{
align-items: center;
align-content: center;
/* justify-content: center;*/
}
.offsetSlider
{
position: relative;
height: 1.8em;
z-index: 50;
margin-top: -0.5em;
}
.offsetArrow
{
position: relative;
height: 0.5em;
z-index: 50;
margin-top: 0.4em;
}
.offsetArrowA
{
position: relative;
height: 0.5em;
z-index: 50;
margin-top: -0.07em;
}
.slider
{
position: relative;
height: 1.0em;
z-index: 50;
}
.offsetSliderLess
{
position: relative;
height: 1.8em;
z-index: 50;
margin-top: -0.3em;
}
.offsetSliderMinMax
{
position: relative;
z-index: 60;
margin-top: -0.5em;
pointer-events: none;
}
.top-margin-p2em
{
margin-top: 0.2em;
}
.top-margin-p4em
{
margin-top: 0.4em;
}
.top-margin-1em
{
margin-top: 1em;
}
.flexWrap
{
flex-wrap: wrap;
}
.flexNoWrap
{
flex-wrap: nowrap;
}
/* video overlays */
#watchTime
{
z-index: 20;
}
#vid-fade-txtParams
{
display: none;
}
#vid-cover, #vid-coverA, #vid-coverB
{
background: black;
mix-blend-mode: soft-light;
pointer-events: none;
z-index: 20;
}
#vid-coverC
{
background: black;
pointer-events: none;
z-index: 20;
}
#vid-coverHue
{
background: black;
mix-blend-mode: hue;
pointer-events: none;
z-index: 20;
}
#blurredImg
{
filter: blur(4px);
mix-blend-mode: screen;
pointer-events: none;
opacity: 50%;
}
#vid-whiteTestCover
{
background: white;
pointer-events: none;
z-index: 30;
}
#vid-coverFade
{
background: black;
pointer-events: none;
/* z-index: 400;*/
z-index: 20;
}
#id_newUserMsg, #id_newUserMsgA, #id_newUserMsgB
{
position: absolute;
top: 10%;
text-align: center;
z-index: 600;
background-color: black;
color: white;
/* width: 50%;*/
}
#id_clickToPlayText
{
z-index: 960;
color: white;
font-size: 2em;
display: none;
/* visibility: hidden;*/
border-radius: 0.5em;
background-color: rgb(30,30,30);
grid-row-start: 1;
grid-column-start: 1;
align-self: center;
justify-self: center;
/* text-shadow: 0.1em 0.1em 0.1em black;*/
}
#id_clickToPlayBtn
{
/* display: none;*/
z-index: 950;
font-size: 10em;
visibility: hidden;
/* color: red;*/
/* color: white;*/
/* color: lightgrey;*/
color: rgba(100,100,100,1);
grid-row-start: 1;
grid-column-start: 1;
align-self: center;
justify-self: center;
}
#id_clickToPlayBtnBG
{
z-index: 940;
/* font-size: 15em;*/
width: 5em;
height: 5em;
visibility: hidden;
/* display: none;*/
background-color: rgb(30,30,30);
/* background-color: rgba(0,0,0,.7);*/
border-radius: 500px;
grid-row-start: 1;
grid-column-start: 1;
align-self: center;
justify-self: center;
}
#id_clickToPlayBtnBox
{
z-index: 940;
/* font-size: 15em;*/
width: 8em;
height: 2em;
visibility: hidden;
/* display: none;*/
background-color: rgb(30,30,30);
/* background-color: rgba(0,0,0,.7);*/
border-radius: 0.5em;
grid-row-start: 1;
grid-column-start: 1;
align-self: center;
justify-self: center;
}
#id_clickArea
{
z-index: 970;
display: none;
/* visibility: hidden;*/
color: rgba(120,120,120,0);
grid-row-start: 1;
grid-column-start: 1;
align-self: center;
justify-self: center;
width: 100%;
height: 100%;
}
#id_cookieMsgClickArea
{
position: fixed;
display: flex;
z-index: 980;
color: rgba(120,120,120,0.5);
/* align-self: center;
justify-self: center;*/
width: 100%;
height: 100%;
}
#id_nagMsgBG
{
z-index: 890;
align-self: center;
justify-self: center;
background-color: rgba(0,0,0,0.5);
/* position: fixed;*/
/* display: flex;*/
/* align-self: center;
justify-self: center;*/
width: 100%;
height: 100%;
}
#id_cookieMsg
{
position: absolute;
/* display: none;*/
top: 10%;
z-index: 975;
color: white;
font-size: 1em;
border-radius: 0.5em;
background-color: rgb(30,30,30);
/* margin: auto;*/
/* width: 100%;
height: 100%;*/
/* align-self: center;
justify-self: center;*/
/* text-shadow: 0.1em 0.1em 0.1em black;*/
}
/* images */
img
{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.zt-still-img
{
width: 100%;
min-width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
.avatarLrg
{
width: 45px;
min-width: 45px;
height: 45px;
background-color: rgb(70,100,180);
text-align: center;
border-radius: 50%;
/* max-width: 2ch;*/
}
.avatar
{
width: 35px;
min-width: 35px;
height: 35px;
background-color: rgb(70,100,180);
text-align: center;
border-radius: 50%;
/* max-width: 2ch;*/
}
.avatar-inner
{
width: 30px;
min-width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 20px;
font-family: Courier New;
/* background-color: purple;*/
overflow: hidden;
border-radius: 50%;
overflow-wrap: break-word;
}
.avatar-inner:first-letter
{
text-transform: uppercase;}
}
#commentsLive-wrapper
{
overflow-y: auto;
}
#comment_form .profile_pic, #commentLive_form .profile_pic
{
width: 35px;
height: 35px;
margin-right: 5px;
float: left;
border-radius: 50%;
}
.comment .profile_pic, .commentLive .profile_pic
{
width: 35px;
height: 35px;
margin-right: 5px;
float: left;
border-radius: 50%;
}
/* infos */
.audio_textTesting, .audio_fadeInfo
{
display: inline;
}
.info
{
border: 1px solid white;
padding: 0.3em;
}
/* buttons */
.form-btns
{
border-radius: 500px;
padding: 0.1em;
font-size: 1rem;
width: 6.0em;
color: white;
height: max-content;
justify-content: center;
text-align: center;
white-space: nowrap;
/* text-shadow: 0.1em 0.1em 0.1em black;*/
}
.form-btns-admin-edit
{
border-radius: 500px;
padding: 0.1em;
font-size: 1rem;
width: 4.0em;
color: white;
height: max-content;
justify-content: center;
text-align: center;
white-space: nowrap;
/* text-shadow: 0.1em 0.1em 0.1em black;*/
}
#submit_comment, #cancel_comment, #submit_commentLive, #cancel_commentLive
{
visibility: hidden;
}
.input-btns
{
background-color: dimgrey;
}
.cancel-btns
{
background-color: rgb(30,30,30);
}
.cancel-btns:hover
{
background-color: rgb(70,70,70);
}
#id_func_globalVolFadeTimeoutButton, #id_func_videoFadeTimeoutButton
{
background-color: dimgrey;
}
#id_resetButton, #id_stopitButton
{
background-color: lightseagreen;
color: white;
}
#id_stopitButtonVideo
{
background-color: chocolate;
color: white;
}
.ambience_controls
{
/* this class only exists to enable global fade to hide them */
/* it's only listed here so you won't remove it from the ambience template page */
}
.audioPlayButton-ambiences
{
background: rgba(127,127,127,1.0);
display: inline;
}
.audioPlayButton-music
{
background: rgba(128,128,128,1.0);
display: inline;
}
#button-video-play
{
background-color: orange;
display: inline;
}
.zt-bu /* amb and mus buttons */
{
border-radius: 500px;
padding: 0.1em;
font-size: 0.75em;
width: 7.0em;
color: white;
height: max-content;
justify-content: center;
text-align: center;
white-space: nowrap;
text-shadow: 0.1em 0.1em 0.1em black;
overflow: hidden;
}
.categ-bu /* amb and mus buttons */
{
padding: 0.1em;
font-size: 0.75em;
width: 12.0em;
color: white;
height: max-content;
justify-content: center;
text-align: center;
white-space: nowrap;
text-shadow: 0.1em 0.1em 0.1em black;
overflow: hidden;
background: black;
border: 1px solid grey;
border-radius: 5px;
}
.categ-global-bu /* amb and mus buttons */
{
padding: 0.1em;
font-size: 0.75em;
width: 6em;
color: white;
height: max-content;
justify-content: center;
text-align: center;
white-space: nowrap;
text-shadow: 0.1em 0.1em 0.1em black;
overflow: hidden;
background: black;
border: 1px solid royalblue;
border-radius: 5px;
}
.categSelected
{
/* background: lightskyblue;*/
background: rgba(123,104,238,0.5);
font-weight: bold;
border: 1px solid royalblue;
}
.xformA
{
transform:scale(0.95,1);
}
.zt-bu-vid, .zt-bu-aud /* aud and vid fade buttons */
{
border-radius: 500px;
/* border-radius: 0.3em;*/
padding: 0.1em 0.5em 0.1em 0.5em;
font-size: 0.75em;
height: max-content;
color: white;
justify-content: center;
text-align: center;
white-space: nowrap;
text-shadow: 0.1em 0.1em 0.1em black;
}
.bu-ambMusNames /* amb and mus form inputting */
{
border-radius: 500px;
padding: 0.1em;
font-size: 0.75em;
width: 6.7em;
color: white;
height: max-content;
justify-content: center;
text-align: center;
white-space: nowrap;
background: rgb(90,90,90);
overflow hidden;
}
.bu-color-pick /* forms submit buttons */
{
border-radius: 500px;
/* border-radius: 0.3em;*/
padding: 0.15em 0.6em 0.15em 0.6em;
font-size: 1rem;
height: max-content;
color: white;
justify-content: center;
text-align: center;
white-space: nowrap;
background-color: black;
border: 1px solid white;
}
.bu-forms /* forms submit buttons */
{
border-radius: 500px;
/* border-radius: 0.3em;*/
padding: 0.15em 0.6em 0.15em 0.6em;
font-size: 1.25rem;
height: max-content;
color: white;
justify-content: center;
text-align: center;
white-space: nowrap;
text-shadow: 0.1em 0.1em 0.1em black;
background-color: rgb(60,180,255);
}
.bu-forms-small /* forms submit buttons */
{
border-radius: 500px;
/* border-radius: 0.3em;*/
padding: 0.15em 0.6em 0.15em 0.6em;
font-size: 1rem;
height: max-content;
color: white;
justify-content: center;
text-align: center;
white-space: nowrap;
text-shadow: 0.1em 0.1em 0.1em black;
background-color: rgb(60,180,255);
}
.editBtn
{
background: lightslategray;
display: inline;
}
.width5em
{
width: 5.0em;
}
.submitA
{
width: 7em;
}
.submitB
{
width: 4em;
}
#vid-live-mode
{
background-color: dimgrey;
}
#vid-start-over
{
background-color: dimgrey;
}
#vid-play-4ever
{
background-color: orange;
}
#vid-play-next
{
background-color: grey;
}
.text-white
{
color: white;
}
.text-2rem
{
font-size: 2rem;
}
.text-1rem
{
font-size: 1rem;
}
.text-1p15rem
{
font-size: 1.15rem;
}
.text-1p25rem
{
font-size: 1.25rem;
}
.text-1p5rem
{
font-size: 1.5rem;
}
.text-p7rem
{
font-size: 0.7rem;
}
.text-p8rem
{
font-size: 0.8rem;
}
.text-p85rem
{
font-size: 0.85rem;
}
.text-p9rem
{
font-size: 0.9rem;
}
.text-p95rem
{
font-size: 0.95rem;
}
.text-p7rem
{
font-size: 0.7rem;
}
.text-p6rem
{
font-size: 0.6rem;
}
.text-p5rem
{
font-size: 0.5rem;
}
.text-bold
{
font-weight: bold;
}
.cols3
{
grid-template-columns: 1fr 1fr 1fr;
}
.cols4
{
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.cols2
{
grid-template-columns: 1fr 1fr;
}
.music-buttons
{
display: grid;
column-gap: 0.3em;
row-gap: 0.3em;
border-radius: 5px;
justify-items: center;
}
.music-buttons-narrow
{
display: grid;
column-gap: 0em;
row-gap: 0.4em;
border-radius: 5px;
justify-items: center;
}
.music_controls_grouping
{
text-align: center;
}
#pause, #prev-font, #next-font
{
font-size: 2em;
transform:scale(1.5,.8);
}
.prev-pause-next
{
display: inline-block;
}
.audioPauseButton, .previousButton, .nextButton
{
display:inline-block;
border-radius: 10px;
width: 70px;
margin: 3px;
padding: 0px;
color: darkgrey;
background-color: grey;
text-align: center;
}
/* misc */
li
{
cursor: pointer;
}
.div_overrides, .heading
{
display: inline;
}
.height-minA
{
min-height: 5rem;
}
.height-maxA
{
max-height: 13rem;
overflow: auto;
}
.heightB
{
height: 25rem;
overflow: auto;
}
/* text */
.box-shdw
{
box-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.6);
}
.text-shdw
{
text-shadow: 0.1em 0.1em 0.1em black;
}
.text-shdwA
{
text-shadow: 0.07em 0.07em 0.2em black;
}
.font-tiny
{
font-size: .8em;
}
.font-alt
{
/* font-family: verdana;*/
font-family: Open Sans;
}
.font-roboto
{
/* font-family: Roboto;*/
/* font-family: Droid Sans;*/
font-family: 'Roboto', sans-serif;
}
.noSelect
{
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
#id_fadeStatus, #id_fadeMsg, #id_fadeEndVolTmp, #id_fadeStatusVideo, #id_fadeMsgVideo
{
display: none;
}
#id_globalVoltextReducing, #id_fadeStartsIn, #id_TimeRemainingAndStatusMsg
{
color: white;
text-align: center;
min-width: 2em;
background-color: darkcyan;
}
#id_brightnessReducing, #id_videoTimeRemainingAndStatusMsg, #id_fadeStartsInVideo
{
color: white;
text-align: center;
min-width: 2em;
background-color: chocolate;
}
.line-height-1
{
line-height: 1.0;
}
.line-height-1p5
{
line-height: 1.5;
}
.scale1p2
{
transform: scale(1.2);
}
.scaleP9
{
transform: scale(0.9);
}
.scalePx
{
transform: scale(3);
}
.av-heading
{
font-size: 1.2em;
font-weight: bold;
line-height: 1.5;
text-shadow: 0em 0em 0.2em black;
white-space: nowrap;
}
.av-label
{
font-size: 0.8em;
text-shadow: 0em 0em 0.2em black;
}
.flexContentsCenter
{
justify-content: center;
align-items: center;
}
/*
.centerHor
{
text-align:center
}
.centerText
{
text-align:center
}
*/
.centerAlignTop
{
display: flex;
justify-content: center;
align-items: top; /* //// this should probably be 'start', not 'top' */
}
#label-bright
{
color: white;
margin-left: 1.5em;
margin-right: 0.0em;
}
#heading-audio
{
color: cyan;
margin-left: 0.7em;
}
#heading-video
{
color: orange;
margin-left: 0.7em;
margin-right: 0.3em;
}
#heading-music
{
color: rgb(95,235,0);
text-align: center;
}
#heading-ambience
{
color: rgb(60,180,255);
}
#track_descr
{
visibility: hidden;
color: white;
min-height: 1em;
font-size: 0.7em;
white-space: nowrap;
}
.rotate270
{
transform: rotate(270deg);
}
.rotate90
{
transform: rotate(90deg);
}
.rotate180
{
transform: rotate(180deg);
}
/* dyntube */
.dyt-ppnotifier
{
display: none!important;
}
.dyt-loading-dots
{
display: none !important;
}
.dyt-time-control
{
display: none !important;
}
/* sliders */
/* misc */
.volbars
{
background-color: transparent;
-webkit-appearance: none;
}
.volbars:focus
{
outline: none;
}
.range-rotate
{
transform: rotateY(180deg);
}
/* thumb colors */
.range-vid-brightness::-webkit-slider-thumb {
background: orange;
}
.range-vid-brightness::-moz-range-thumb {
background: orange;
}
.range-vid-brightness::-ms-thumb {
background: orange;
}
.range-vid-black::-webkit-slider-thumb {
background: black;
}
.range-vid-black::-moz-range-thumb {
background: black;
}
.range-vid-black::-ms-thumb {
background: black;
}
.range-vid-cyan::-webkit-slider-thumb {
background: cyan;
}
.range-vid-cyan::-moz-range-thumb {
background: cyan;
}
.range-vid-cyan::-ms-thumb {
background: cyan;
}
.volbars-ambience-blue::-webkit-slider-thumb {
background: dodgerblue;
}
.volbars-ambience-blue::-moz-range-thumb {
background: dodgerblue;
}
.volbars-ambience-blue::-ms-thumb {
background: dodgerblue;
}
.volbars-ambience-grey::-webkit-slider-thumb {
background: darkgrey;
}
.volbars-ambience-grey::-moz-range-thumb {
background: darkgrey;
}
.volbars-ambience-grey::-ms-thumb {
background: darkgrey;
}
.volbars-music::-webkit-slider-thumb {
background: rgb(75,190,0);
}
.volbars-music::-moz-range-thumb {
background: rgb(75,190,0);
}
.volbars-music::-ms-thumb {
background: rgb(75,190,0);
}
/* track lengths */
.volbars-vid-long {
width: 9.1em;
}
.volbars-vid-long::-webkit-slider-runnable-track {
width: 9.1em;
}
.volbars-vid-long::-moz-range-track {
width: 9.1em;
}
.volbars-vid-long::-ms-track {
width: 9.1em;
}
.volbars-vid-med {
width: 7.1em;
}
.volbars-vid-med::-webkit-slider-runnable-track {
width: 7.1em;
}
.volbars-vid-med::-moz-range-track {
width: 7.1em;
}
.volbars-vid-med::-ms-track {
width: 7.1em;
}
.volbars-vid-short {
width: 5.6em;
}
.volbars-vid-short::-webkit-slider-runnable-track {
width: 5.6em;
}
.volbars-vid-short::-moz-range-track {
width: 5.6em;
}
.volbars-vid-short::-ms-track {
width: 5.6em;
}
.volbars-ambience {
width: 5.6em;
}
.volbars-ambience::-webkit-slider-runnable-track {
width: 5.6em;
}
.volbars-ambience::-moz-range-track {
width: 5.6em;
}
.volbars-ambience::-ms-track {
width: 5.6em;
}
.volbars-music {
width: 7.6em;
}
.volbars-music::-webkit-slider-runnable-track {
width: 7.6em;
}
.volbars-music::-moz-range-track {
width: 7.6em;
}
.volbars-music::-ms-track {
width: 7.6em;
}
/* thumb sizes */
.volbars::-moz-range-thumb { /* firefox */
width: 1.25em;
height: 1.25em;
border: 2px solid white;
border-radius: 1.25em;
/* width: 1.16em;
height: 0.76em;
border: 1.5px solid white;
border-radius: 0.32em;
*/ cursor: pointer;
}
.volbars::-webkit-slider-thumb { /* chrome */
margin-top: -0.55em;
width: 1.25em;
height: 1.25em;
border: 2px solid white;
border-radius: 1.25em;
cursor: pointer;
-webkit-appearance: none;
}
.volbars::-ms-thumb { /* ms */
width: 1.25em;
height: 1.25em;
border: 2px solid white;
border-radius: 1.25em;
cursor: pointer;
margin-top: 0px;
/*Needed to keep the Edge thumb centred*/
}
/* tracks */
.volbars::-webkit-slider-runnable-track {
background: rgb(100,100,100);
border: 0px solid #010101;
border-radius: 3.7px;
height: 2px;
cursor: pointer;
}
.volbars:focus::-webkit-slider-runnable-track {
background: #aeadaf;
}
.volbars::-moz-range-track {
background: rgb(100,100,100);
border: 0px solid #010101;
border-radius: 3.7px;
height: 2px;
cursor: pointer;
}
.volbars::-ms-track {
background: transparent;
border-color: transparent;
border-width: 0px 0;
color: transparent;
height: 2px;
cursor: pointer;
}
.volbars::-ms-fill-lower {
background: #8a898b;
border: 1.5px solid #010101;
border-radius: 7.4px;
}
.volbars::-ms-fill-upper {
background: rgb(100,100,100);
border: 1.5px solid #010101;
border-radius: 7.4px;
}
.volbars:focus::-ms-fill-lower {
background: rgb(100,100,100);
}
.volbars:focus::-ms-fill-upper {
background: #aeadaf;
}
@supports (-ms-ime-align:auto)
{
.volbars
{
margin: 0;
}
}
.hide
{
display: none;
}
.hideA
{
display: none;
}
.visibilityHidden
{
visibility: hidden;
}
.visibilityVisible
{
visibility: visible;
}
.visibilityCollapse
{
visibility: collapse;
}
/* box widths */
.width100perc
{
width: 100%;
}
.width75perc
{
width: 75%;
}
.width33perc
{
width: 33%;
}
.width50perc
{
width: 50%;
}
.width31perc
{
width: 31%;
}
.width38perc
{
width: 38%;
}
.width100
{
width: 100px;
}
.width75
{
width: 75px;
}
.width60
{
width: 60px;
}
.widthA
{
width: 250px;
}
.widthB
{
width: 50px;
}
/* 2 dyntube styles used 2b here */
.pvid-menu
{
z-index: 20;
position: relative;
}
.pvid-content {
z-index: 0;
}
.toolbar-right {
display: none !important;
}
.audio-placeholder {
visibility: hidden !important;
}
.dyt-paused
{
}
.dyt-show-big-play-button-on-pause, .dyt-big-play-button, .dyt-big-touch-play-button, .dyt-play
{
display: none !important;
}
/* hide menus while i edit */
.cactus-sidebar-content
{
display: none !important;
}
.widget-inner
{
display: none !important;
}
.post-list-in-single
{
display: none !important;
}
/* colors */
.btnGrnBrdr
{
border: 1px solid rgba(75,190,0,0.5);
border-radius: 5px;
}
.btnBluBrdr
{
border: 1px solid rgba(60,180,255,0.5);
border-radius: 5px;
}
.BGgreen
{
background: rgba(0,0,0,0.2);
border: 1px solid rgba(75,190,0,0.5);
border-radius: 10px;
}
.BGblue
{
background: rgba(0,0,0,0.2);
border: 1px solid rgba(60,180,255,0.5);
border-radius: 10px;
}
.BGzenblue
{
background: dodgerblue;
}
.redBG
{
background: rgba(255,0,0,0.5);
border-radius: 500px;
}
.blueBG
{
background: rgba(0,0,255,0.5);
border-radius: 500px;
}
.redBGmode
{
background: rgba(255,0,0,0.3);
}
.blueBGmode
{
background: rgba(0,0,255,0.3);
}
.blue
{
color: blue;
}
.buttonSleekWhite
{
border: 1px solid rgba(255,255,255,0.5);
}
.BGdimgrey, .BGdimgray
{
background-color: dimgrey;
}
.BGdarkgrey, .BGdarkgray
{
background-color: rgb(60,60,60);
}
.BGdeepGrey
{
background-color: rgb(40,40,40);
}
.BGorange
{
background-color: orange;
}
.BGdkOrange
{
background-color: chocolate;
}
.vidQualAutoOn
{
/* background-color: rgba(255,160,0,0.5);*/
border-radius: 5px;
border: 1px solid orange;
}
.BGredOnly
{
background-color: red;
}
.BGgreenOnly
{
background-color: green;
}
.BGlightseagreen
{
background-color: lightseagreen;
}
/* opacities */
.opacP75
{
background: rgba(0, 0, 0, .75);
border-radius: 5px;
}
.opacP5
{
background: rgba(0, 0, 0, .5);
border-radius: 5px;
}
/* radiuses */
.radiusP7
{
border-radius: 0.7rem;
}
.radiusP5
{
border-radius: 0.5rem;
/* border-radius: 5px;*/
}
.radiusMax
{
border-radius: 500px;
}
/* font sizes for google fonts - only ID works, but not class */
.menu-call-arrow-size, #id_videoFadeCallXbtn, #id_videoFadeCallArrow, #id_audioFadeCallArrow, #id_audioFadeCallXbtn, #id_videoFadeCallXbtnx, #id_videoFadeCallArrowx, #id_audioFadeCallArrowx
{
font-size: 1.2em;
}
#id_audioMusIcon
{
font-size: 1.95em;
color: rgb(95,235,0);
}
/* these used to be in the list below: #id_nagMsgXbtnHidden, #id_nagMsgXbtn */
#id_vidSpeedXbtn, #id_vidQualityXbtn, #id_prefsXbtn, #id_audioEqXbtn, #id_newUserXbtn, #id_newUserXbtnA, #id_newUserXbtnHidden, #id_newUserXbtnHiddenA, #id_globalAudioVolXbtn, #id_vidBrightnessXbtn, #id_audioAmbIcon, #id_audioFadeCallXbtnActualX, #id_videoFadeCallXbtnActualX, #id_audioAmbXbtn, #id_audioMusXbtn, #id_liveOdXbtn
{
font-size: 2em;
}
#id_nagMsgXbtn
{
background-color: dodgerblue;
z-index: 500;
font-size: 1.3em;
padding: 0em 0.5em;
border: 1px solid white;
border-radius: 500px;
width: 4em;
color: white;
text-shadow: 0.1em 0.1em 0.1em black;
}
#id_nagMsgXbtnDummy
{
background-color: rgb(60,60,60);
z-index: 500;
font-size: 1.3em;
padding: 0em 0.5em;
border: 1px solid grey;
border-radius: 500px;
width: 4em;
color: rgb(120,120,120);
text-shadow: 0.1em 0.1em 0.1em black;
}
.font-size-2em
{
font-size: 2em;
}
#id_audioAmbIcon
{
color: rgb(60,180,255);
}
#id_audioEqBtn, #id_prefsBtn, #id_fullscreenBtn, #id_vidSpeedBtn, #id_vidQualityBtn, #id_liveOdBtn
{
cursor: pointer;
padding: 0;
margin: 0;
text-align: center;
font-size: 2.1em;
}
/* video thumbs */
.thumbs-container-parent
{
/* display: flex;
flex-direction: column;*/
width: 88%;
}
.thumbs-container
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* margin: 0 auto;*/
margin: 1rem auto;
justify-content: center;
align-items: top;
padding: 0 0.5em;
max-width: 1920px;
}
.thumbs-container-topBar
{
/* width: 88%;*/
margin: 0 0;
justify-content: end;
align-content: end;
align-items: end;
padding: 0 0.65em;
max-width: 1920px;
}
/*this may not be needed at all*/
.thumbs-view {
min-width: 310px;
flex-grow: 1;
width: 22%;
margin: 0.4em;
}
.thumbs-index-view {
min-width: 310px; /*was 310*/
flex-grow: 1;
width: 22%;
margin: 0.4em;
aspect-ratio: 16 / 9;
}
.thumbs-menu-right {
width: 100%;
margin: 0.4em;
}
/*this may not be needed at all*/
.thumbs-view-blank {
/* some of this probaly doesnt need to be here */
min-width: 310px;
flex-grow: 1;
width: 22%;
margin: 0.2em;
}
.thumb-index-view-img
{
width: 100%;
min-width: 100%;
border: 2px solid rgb(40,40,40);
color: white;
border-radius: 10px/10px;
overflow: hidden;
aspect-ratio: 16 / 9;
}
.thumb-admin-view-img
{
color: white;
aspect-ratio: 16 / 9;
}
.thumb-image
{
width: 100%;
}
.thumb-view-img
{
border: 2px solid rgb(40,40,40);
color: white;
border-radius: 10px/10px;
overflow: hidden;
aspect-ratio: 16 / 9;
}
.thumb-w-summary
{
display: none;
}
.thumb-w-overlay
{
display: flex;
}
.thumb-img-width
{
width: 100%;
min-width: 100%;
}
.thumb-view-img:hover, .thumb-index-view-img:hover
{
border: 2px solid rgb(120,120,120);
}
.floatRight
{
float: right;
}
.floatLeft
{
float: left;
}
.text-right
{
text-align: right;
}
.text-left
{
text-align: left;
}
.sidebar-menu-right
{
display: none;
float: right;
color: white;
font-size: 1.0rem;
margin-left: 0.5rem;
}
.forms-overall
{
margin: 2rem;
min-width: 30%;
/* align-self: center;*/
justify-self: center;
}
.space2em
{
width: 2em;
}
.flexGrow1
{
flex-grow: 1;
}
.flexShrink1
{
flex-shrink: 1;
}
.inline-flex
{
display: inline-flex;
}
.grid
{
display: grid;
}
.grid-form
{
display: grid;
gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
.aspectTall
{
aspect-ratio: 20 / 14; /* was 17 */
}
.title
{
padding: 0.5rem;
}
.viewsRatingsDate
{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: 0.5rem;
background-color: rgb(40,40,40);
border-radius: 0.7rem;
}
.text-center
{
text-align: center;
}
.description
{
border-radius: 0.7rem;
padding: 0.5rem;
background-color: rgb(60,60,60);
}
.line-clamp-1
{
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:1;
}
.line-clamp-2
{
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.line-clamp-3
{
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
}
#id-rightSpace
{
display: none;
}
.super-wide
{
display: none;
}
.not-super-wide
{
display: flex;
}
/* these 2 classes below are not currently assigned to anything */
.super-wide-fadeMenus
{
display: none;
}
.not-super-wide-fadeMenus, #id_globalAudioSliderHeader, #id_vidBrightnessGrpHeader /* #id_vidBrightnessIcon used to be in here, but now 'grid' */
{
display: flex;
}
#id_videoFadeMenus, #id_audioFadeMenus, #audio-music-column, #audio-ambience-column
{
z-index: 500;
}
#id_audioFadeCallDivColor, #id_videoFadeCallDivColor, #id_globalAudioSliderWinfo, #id_vidBrightnessGrp, #label-bright, #id_audioFadeCallXbtnArrow, #id_videoFadeCallXbtnArrow
{
display: none;
}
#id_globalFadeIconDiv, #id_videoFadeIconDiv
{
display: grid;
}
#id_globalVolumeSliderAreaTop, #id_vidBrightnessTop
{
margin-top: 0.5rem;
}
#id_audioAmbCallMenuDivWide, #id_audioAmbCallXbtnWide, #id_audioMusCallMenuDivWide, #id_audioMusCallXbtnWide, .bulletPost
{
display: none;
}
#id_audioAmbCallMenuDivNrrw, #id_audioAmbCallXbtnNrrw, #id_audioMusCallMenuDivNrrw, #id_audioMusCallXbtnNrrw, #id_audioFadeCallXbtnActual, #id_videoFadeCallXbtnActual, #id_audioAmbXbtnDiv, #id_audioMusXbtnDiv
{
display: flex;
}
.ambColWidth-whenNotAbs
{
width: 11.5em;
}
.ambColWidth-EditPage
{
width: 185px;
max-width: 185px;
}
.selfCenter
{
align-self: center;
}
.selfJustifyEnd
{
align-self: end;
}
.widthMax70
{
max-width: 70%;
}
.width288
{
width: 288px;
}
.widthMax80
{
max-width: 80%;
}
.widthMax100
{
max-width: 100%;
}
.widthMin288px
{
min-width: 288px;
}
.widthMin100perc
{
min-width: 100%;
}
.widthMin90perc
{
min-width: 90%;
}
#id_vidSpeedMenu, #id_vidQualityMenu, #id_prefsMenu, #id_audioEqMenu, #id_liveOdMenu
{
visibility: hidden;
grid-row-start: 1;
grid-column-start: 1;
z-index: 800;
align-self: center;
justify-self: center;
}
#id_nagMsg
{
grid-row-start: 1;
grid-column-start: 1;
z-index: 900;
align-self: center;
justify-self: center;
}
.bulletVidParams
{
display: inline;
}
#id_liveOd_live
{
color: white;
}
#id_liveOd_onDemand
{
color: white;
white-space: nowrap;
}
#id_liveOd_live:hover, #live-msg
{
background: rgba(255,0,0,0.75);
}
#id_liveOd_onDemand:hover, #od-msg
{
background: rgba(0,0,255,0.75);
}
.noClick
{
pointer-events: none;
}
.allowClick
{
pointer-events: auto;
}
.smallMsgBox
{
color: white;
font-size: 0.65em;
border: 1px solid rgba(255,255,255,0.5);
}
#id_min555pxWidth, #id_min900pxWidth, #id_min1023pxWidth, #id_min1594pxWidth, #id_min1684pxWidth
{
width: 0;
height: 0;
margin: 0;
padding: 0;
position: absolute;
opacity: 0;
}
@media (hover: hover) {
.ttip:hover:after, .ttipRt:hover:after, .ttipLf:hover:after, .ttipRtX:hover:after, .ttipRtXX:hover:after, .ttipRtXcustomA:hover:after
{
content: '';
position: absolute;
margin: 0 0 0 0;
width: 0;
height: 0;
pointer-events: none;
}
.ttip:hover:before, .ttipRt:hover:before, .ttipLf:hover:before, .ttipRtX:hover:before, .ttipRtXX:hover:before
{
content: attr(data-tooltip);
position: absolute;
padding: 3px;
margin-bottom: 55px;
background: rgb(40,40,40);
color: white;
border-radius: 3px;
white-space: nowrap;
z-index: 930;
font-size: 0.8rem;
pointer-events: none;
}
.ttipRt:hover:before
{
margin-right: 50px;
}
.ttipRtX:hover:before
{
margin-left: -30px;
}
.ttipRtXX:hover:before
{
margin-left: -35px;
}
.ttipLf:hover:before
{
margin-left: 50px;
}
.ttipRtXcustomA:hover:before
{
content: attr(data-tooltip);
position: absolute;
padding: 3px;
background: rgb(40,40,40);
color: white;
border-radius: 3px;
white-space: nowrap;
z-index: 50;
font-size: 0.8rem;
margin-top: -22px;
margin-left: -30px;
pointer-events: none;
}
}
.child1f-noGrow
{
grid-row-start: 1;
grid-column-start: 1;
align-self: center;
justify-self: center;
z-index: 800;
}
#id_videoTopRow
{
display: flex;
flex-direction: row;
justify-content: space-between;
}
#id_vidUprRtIcons
{
justify-content: flex-end;
}
#video-data
{
width: 100%;
display: flex;
/* align-self: start;*/
/* align-items: start;*/
}
.alignSelfStart /* keeps child elements from stretching to fill a container; or basically they will only expand to fit their contents */
{
align-self: start;
}
#video-column
{
align-items: start;
}
#video-column-admin
{
align-items: start;
}
.hideContent
{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
}
.showContent
{
/* line-height: 1em;*/
height: auto;
overflow-y: hidden;
}
.show-more
{
padding: 10px 0;
text-align: center;
}
#comment_edit, #reply_edit, #commentLive_edit, #replyLive_edit
{
text-align: right;
}
.gapCancel
{
margin-top: -0.15em;
margin-bottom: -0.15em;
}
.overflowH
{
overflow: hidden;
}
.transformA
{
transform: scale(0.5);
}
.spaceA
{
min-width: 65%;
flex-grow: 1;
}
.spaceB
{
min-height: 2em;
}
.width10perc
{
width: 10%;
min-width: 10%;
}
.width25perc
{
width: 25%;
min-width: 25%;
}
.notSeen
{
position: absolute;
margin-top: -100px;
margin-left: -100px;
line-height:0;
height: 0;
width: 0;
overflow: hidden;
}
.absCustomA
{
position: absolute;
margin-top: 420px;
margin-left: 50px;
}
.usedAmbsCounts
{
background-color: rgb(30,30,30);
height: 1em;
width: 1em;
}
.mixLink
{
padding: 3px;
border-radius: 3px;
background-color: rgba(40,40,40,0.5);
}
@media (hover: hover)
{
.mixLink:hover
{
background-color: rgb(60,180,255);
color: white;
}
}
.noOutlineFocus:focus
{
outline: none;
}
.thumbMusicFlag
{
font-size: 0.7rem;
color: lightgrey;
border-radius: 2px;
border: 1px solid lightgrey;
background-color: rgba(0,0,0,0.5);
/* background-color: rgba(95,235,0,0.3);*/
}
/*
.thumbLiveFlag
{
font-size: 0.7rem;
color: lightgrey;
border-radius: 2px;
border: 1px solid lightgrey;
background-color: rgba(235,0,0,0.5);
width: 2rem;
}
*/
.thumbLiveFlag
{
font-size: 0.7rem;
color: lightgrey;
border-radius: 2px;
background-color: rgba(235,0,0,0.5);
/* width: 2.8rem;*/
/* margin-right: 7px;
margin-left: auto;
margin-top: auto;
margin-bottom: 10px;*/
border: 1px solid lightgrey;
}
.noParentFlex
{
flex: 0 0 100%;
}
.faqParent
{
display: flex;
flex-direction: column;
/* flex-grow: 1;*/
gap: 1em;
background-color: rgb(50,50,50);
padding: 0.5em;
border-radius: 0.5em;
}
.faqQ
{
color: white;
font-weight: bold;
}
.faqA
{
line-height: 1.2;
color: lightgrey;
padding-top: 0.25em;
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
}
.faqB
{
padding-top: 1em;
padding-bottom: 0em;
}
.videoVis
{
border-radius: 4px;
border: 1px solid grey;
color: grey;
}
.videoVisPrivate
{
background-color: rgba(20,140,255,0.3);
border: 3px solid lightgrey;
font-weight: bold;
color: white;
}
.videoVisPublic
{
background-color: rgba(95,235,0,0.3);
border: 3px solid lightgrey;
font-weight: bold;
color: white;
}
.regMsgWide
{
display: none;
}
.regMsgNarrow
{
display: table-row;
}
.input-group
{
overflow: hidden;
}
.maxWidthA
{
max-width: 170px;
}
.appAudioScreenshots
{
width: 100px;
height: auto;
}
.env
{
width: 18px;
height: auto;
z-index: 910;
}
.Zguest
{
width: 40px;
height: auto;
z-index: 905;
}
.ZguestSmall
{
width: 35px;
height: auto;
z-index: 905;
}
.gridLeft
{
justify-self: start;
align-self: start;
/* place-self: left;*/
}
.gridCenter
{
place-self: center;
/* justify-content: center;*/
/* align-items: center;*/
}
.grid1fparent
{
grid-template-columns: 1fr;
}
.clickBlock
{
z-index: 80;
background-color: rgba(255,0,0,0); /*was 0.5 for testing*/
width: 100%;
height: 100%;
}
.offsetB
{
justify-self: left;
align-self: left;
}
.mode-shared
{
padding: .1rem .45rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
line-height: 1.1;
font-size: 0.9rem;
/* width: 6rem;*/
/* border-radius: 6px;*/
white-space: nowrap;
}
.mode-btn-sel
{
color: white;
font-weight: bold;
}
.mode-btn-unsel
{
color: lightgrey;
/* border: 1px solid red;*/
background-color: rgb(40,40,40);
}
.mode-right
{
border-left: 1px solid grey;
}
.move-left
{
padding: .1rem .85rem;
}
.mode-parent
{
border-radius: 6px;
border: 1px solid grey;
overflow: hidden;
justify-content: center;
align-items: center;
}
@media (hover: hover)
{
.mode-btn-sel:hover, .mode-btn-unsel:hover
{
background-color: rgb(100,100,100);
color: white;
}
}
.displayInh
{
display: inherit;
}
/* end of list */
/*amb bars*/
.amb-bars {
width: 20px;
height: 20px;
/* padding-left: 0.5em;*/
transform: translateZ(0);
/* display: none;*/
}
.amb-bar1, .amb-bar2, .amb-bar3
{
width: 5px;
background: rgb(60,180,255);
margin-top: auto;
}
.amb-bar1 {
height: 10px;
}
.amb-bar2 {
height: 20px;
}
.amb-bar3 {
height: 14px;
}
.amb-bar1anim {
animation: anim-bar 5.5s .1s ease-out alternate infinite;
}
.amb-bar2anim {
animation: anim-bar 5s .2s ease-out alternate infinite;
}
.amb-bar3anim {
animation: anim-bar 6.5s .3s ease-out alternate infinite;
}
/*mus bars*/
.mus-bars {
width: 20px;
height: 20px;
padding-left: 0.5em;
transform: translateZ(0);
}
.mus-bar1, .mus-bar2, .mus-bar3
{
width: 5px;
color: green;
background: rgb(95,235,0);
margin-top: auto;
}
.mus-bar1 {
height: 10px;
}
.mus-bar2 {
height: 20px;
}
.mus-bar3 {
height: 14px;
}
.mus-bar1anim {
animation: anim-bar 5.5s 0.1s ease-out alternate infinite;
}
.mus-bar2anim {
animation: anim-bar 6s .2s ease-out alternate infinite;
}
.mus-bar3anim {
animation: anim-bar 4.5s .3s ease-out alternate infinite;
}
@keyframes anim-bar{
0% {
height: 5px;}
10% {
height: 9px;}
20% {
height: 10px;}
30% {
height: 6px;}
40% {
height: 14px;}
50% {
height: 18px;}
60% {
height: 7px;}
70% {
height: 16px;}
80% {
height: 10px;}
90% {
height: 8px;}
100% {
height: 5px;}
}
.scale0
{
transform:scale(0);
}
.narrowFormat
{
display: inline;
}
.wideFormat
{
display: none;
}
.comment-name, .reply-name, .commentLive-name, .replyLive-name
{
max-width: 40%;
}
.delete-comment-prompt, .delete-commentLive-prompt
{
max-width: 30%;
}
/* media width setting */
/* so up above, need to set all stuff to be cell phone mode -or- the default that is set once the below condition is no longer true */
/* then below.. min-width changes it for wider widths */
@media (min-width: 450px) /* at least 450 wide */
{
.comment-name, .reply-name, .commentLive-name, .replyLive-name
{
max-width: 60%;
}
}
@media (min-width: 555px) /* at least 555 wide */
{
.comment-name, .reply-name, .commentLive-name, .replyLive-name
{
max-width: 80%;
}
.delete-comment-prompt, .delete-commentLive-prompt
{
max-width: 50%;
}
.narrowFormat
{
display: none;
}
.wideFormat
{
display: inline;
}
#id_audioAmbCallMenuDivWide, #id_audioAmbCallXbtnWide, #id_audioMusCallMenuDivWide, #id_audioMusCallXbtnWide
{
display: flex;
}
#id_audioAmbCallMenuDivNrrw, #id_audioAmbCallXbtnNrrw, #id_audioMusCallMenuDivNrrw, #id_audioMusCallXbtnNrrw
{
display: none;
}
#id_min555pxWidth
{
opacity: 1;
}
.bulletVidParams
{
display: none;
}
.regMsgWide
{
display: table-cell;
}
.regMsgNarrow
{
display: none;
}
}
/* activate medium width items */
@media (min-width: 900px) /*and (max-width: 1200em)*/ /* at least 900 wide */
{
.middle
{
justify-content: space-between;
}
#arrows-etc-lower /* this is for the wide view > 900 vw */
{
position: static; /* this changes it back to it's position; up above it's set to abs so it wont force video too wide when in a narrow view */
/* i have to do it this way because i can't set display to none or it will mess up js */
}
#id_videoTopRow
{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
#id_min900pxWidth
{
opacity: 1;
}
.zt-play-div
{
margin: 0 10px 0 10px;
}
.zt-pause-div
{
margin: 0 12px 0 12px;
}
#id_audioFadeCallDivColor, #id_videoFadeCallDivColor, #label-bright, #id_avatarMenuIcon
{
display: flex;
}
#id_vidBrightnessIcon, #id_globalFadeIconDiv, #id_videoFadeIconDiv
{
display: none;
}
#id_globalVolumeSliderAreaTop, #id_vidBrightnessTop
{
margin-top: 0rem;
}
#id_globalAudioSliderWinfo, #id_vidBrightnessGrp
{
display: flex;
}
#id-rightSpace
{
display: inline;
}
#search-box
{
font-size: 1em;
}
#id-search-center
{
display: inline;
}
#links
{
display: inline;
}
/* used to also have #id_mobileSearch */
.sidebar-menu-left
{
display: flex;
}
#id_mobileMenuIcon, #id_mobileMenuList, #id-search-right, #id_globalAudioVolIconDiv, #id_globalAudioSliderHeader, #id_vidBrightnessGrpHeader, #id_avatarMenuList
{
display: none;
}
#search-form-column-mobile, .search-box-div-mobile
{
display: none;
}
#search-form-column
{
/* z-index: 0;*/ /* //// why is this 0 */
display: flex;
flex-direction: column;
flex-grow: 1;
max-width: 75%;
}
#search-form-row
{
width: 75%;
flex-grow: 1;
}
.search-box-div
{
display: inline;
width: 100%;
}
#search-box
{
width: 95%;
}
#search-phrase-loop-parent
{
overflow: hidden;
}
#category-button
{
color: grey;
border: 1px solid grey;
border-radius: 6px;
padding: 0.18rem;
background-color: rgb(40,40,40);
white-space: nowrap;
}
#search-button
{
color: grey;
border: 1px solid grey;
border-radius: 6px;
padding: 0.18rem;
background-color: rgb(40,40,40);
white-space: nowrap;
}
@media (hover: hover)
{
#search-button:hover
{
background-color: rgb(100,100,100);
color: white;
}
}
#search-phrases
{
flex-shrink: 1;
min-width: 0;
overflow: hidden;
max-width: 75%;
}
}
/* activate WIDE width items */ /* note that this is still called 1023 in menu_global_controls.js */
@media (min-width: 1175px) /* at least 1200 wide */ /*was 932, 1201, 1024*/
{
#id_min1023pxWidth
{
opacity: 1;
}
#id_audioAmbXbtnDiv, #id_audioMusXbtnDiv
{
display: none;
}
.bulletPost
{
/*was 'inline'*/
display: none;
}
}
@media (min-width: 1384px)
{
.sidebar-menu-right
{
display: flex;
width: 12rem;
min-width: 12rem;
max-width: 12rem;
}
}
/* activate SUPER wide width items */
@media (min-width: 1468px) /* at least 1684 wide */
{
.super-wide
{
display: flex;
}
.not-super-wide
{
display: none;
}
}
/* activate EXTREME wide width items */
@media (min-width: 1594px) /* at least 1590 wide */
{
#id_min1594pxWidth
{
opacity: 1;
}
.thumb-img-width
{
width: 50%;
min-width: 50%;
}
.thumb-w-summary
{
display: flex;
}
.thumb-w-overlay
{
display: none;
}
.sidebar-menu-right
{
display: flex;
width: 25rem;
min-width: 25rem;
max-width: 25rem;
}
}
/* activate MAXIMUM wide width items */
@media (min-width: 1715px) /* at least 1684 wide; used to be 1684 */
{
#id_min1684pxWidth
{
opacity: 1;
}
/* these 2 classes below are not currently assigned to anything */
.super-wide-fadeMenus
{
display: flex;
}
.not-super-wide-fadeMenus
{
display: none;
}
#id_audioFadeCallXbtnArrow, #id_videoFadeCallXbtnArrow
{
display: flex;
}
#id_audioFadeCallXbtnActual, #id_videoFadeCallXbtnActual
{
display: none;
}
}
/*not currently in use*/
/* #darken-entire-viewport
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
min-height: 100%;
background-color:black;
opacity: 0.50;
z-index: 550;
overflow-x: hidden;
overflow-y: hidden;
}
*/
/* #darken-entire-viewport
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color:black;
opacity: 0.50;
z-index: 550;
}
*/
/* orientation */
/* @media only screen and (orientation: landscape)
{
}
*/