mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-12 14:18:28 +00:00
2d60c0a441
I've fixed issues with innerHTML calls in this release that would normally totally break things if there were changes to index.html. Now, if there is an error, it is handled more gracefully and usually just a single UI element breaks. You should be able to customize the index.html file now without too many hassles. You will also notice that the index.html has the following line: <script type="text/javascript" id="main-js" data-translation="blank" src="./main.js"></script> you can specify different languages or different branding/wording translations by setting the data-translation value to that of the json filename located in the translations folder. You can also create your own json files and specify them that way. By default I am specifying the "blank" translation. I'm trying to steer the app code in the direction of being a bit like a library, for numerous reasons, but please reach out if you have issues with this new release. This release has numerous bug fixes and uses a new handshake server to improve the group-room experience, which I will continue to update. I will continue to work towards allowing greater accessibility in stylizing the application.
798 lines
21 KiB
CSS
798 lines
21 KiB
CSS
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
border:0;
|
|
|
|
}
|
|
#mynetwork {
|
|
width: 600px;
|
|
height: 400px;
|
|
border: 1px solid lightgray;
|
|
}
|
|
.email { unicode-bidi: bidi-override; direction: rtl; user-select: none; }
|
|
|
|
a:link {
|
|
text-decoration: none;
|
|
color: #D9E4EB;
|
|
}
|
|
|
|
/* visited link */
|
|
a:visited {
|
|
text-decoration: none;
|
|
color: #99BFD9;
|
|
}
|
|
|
|
/* mouse over link */
|
|
a:hover {
|
|
color: #048AE8;
|
|
}
|
|
|
|
/* selected link */
|
|
a:active {
|
|
color: #D9E4EB;
|
|
}
|
|
|
|
|
|
|
|
.credits {
|
|
color:black;
|
|
position:absolute;
|
|
bottom:0;
|
|
right:0;
|
|
z-index:-1;
|
|
}
|
|
.credits >a {
|
|
color:black;
|
|
}
|
|
.credits >a:visited{
|
|
color:black;
|
|
}
|
|
.gowebcam {
|
|
font-size:110%;
|
|
padding:10px;
|
|
border:3px solid #DDDDDD;
|
|
cursor:pointer;
|
|
background-color:#DDDDDD;
|
|
}
|
|
|
|
.pressed {
|
|
background: #e3e3e3;
|
|
-webkit-box-shadow: inset 0px 0px 5px #a1a1a1;
|
|
-moz-box-shadow: inset 0px 0px 5px #a1a1a1;
|
|
box-shadow: inset 0px 0px 5px #a1a1a1;
|
|
outline: none;
|
|
}
|
|
.row {
|
|
align-content:center;
|
|
text-align: center;
|
|
margin-top:10px;
|
|
|
|
}
|
|
hr {
|
|
height:2px;border-width:0;color:gray;background-color:gray;
|
|
}
|
|
|
|
#videosource {
|
|
max-width:100%;
|
|
max-height:100%;
|
|
background-color:white;
|
|
}
|
|
/* Clear floats after the columns */
|
|
.row:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
.vidcon {
|
|
max-width:100%;
|
|
max-height:100%;
|
|
border:0;
|
|
}
|
|
.vidcon:nth-of-type(3n) { grid-column: 2; }
|
|
.vidcon:nth-of-type(3n) { grid-row: span ; }
|
|
|
|
.tile {
|
|
object-fit: contain;
|
|
background-color:black;
|
|
width:100%;
|
|
height:100%;
|
|
border:0;
|
|
padding:0;
|
|
margin:0;
|
|
border:0;
|
|
}
|
|
|
|
#gridlayout {
|
|
display: grid;
|
|
width:100%;
|
|
height:100%;
|
|
grid-gap: 0;
|
|
overflow: hidden;
|
|
justify-items: stretch;
|
|
grid-auto-flow: dense;
|
|
grid-auto-columns:minmax(50%, auto);
|
|
grid-auto-rows: minmax(50%, auto);
|
|
border:0;
|
|
margin:0;
|
|
}
|
|
|
|
|
|
|
|
.directorsgrid {
|
|
justify-items: normal;
|
|
grid-auto-columns: minmax(100px,500px);
|
|
grid-auto-rows: minmax(100px, 300px);
|
|
display:block ! important;
|
|
overflow-y: auto !important;
|
|
|
|
}
|
|
.directorsgrid video {
|
|
max-width: 400px;
|
|
max-height: 300px;
|
|
min-width: 300px;
|
|
padding:10px 10px 0px 10px !important;
|
|
}
|
|
.directorsgrid .vidcon {
|
|
display: inline-block !important;
|
|
max-width: 400px !important;
|
|
max-height: 500px !important;
|
|
background: #E3E4EF;
|
|
}
|
|
.directorsgrid .tile {
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
html {
|
|
border:0;
|
|
margin:0;
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
padding: 0 0px;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: #141926;
|
|
background-color: -webkit-linear-gradient(to top, #181925, #141826, #0F2027); /* Chrome 10-25, Safari 5.1-6 */
|
|
background-color: linear-gradient(to top, #181825, #141926, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
display: flex;
|
|
flex-flow: column;
|
|
border:0;
|
|
margin:0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.gowebcam {
|
|
padding:20px;
|
|
background-color:white;
|
|
}
|
|
.infoblob {
|
|
color:white;
|
|
width:100%;
|
|
padding:20px;
|
|
max-width:1280px;
|
|
|
|
}
|
|
|
|
.outer {
|
|
position: relative;
|
|
margin: auto;
|
|
width: 70px;
|
|
margin-top: 0px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.close {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 20px;
|
|
cursor: pointer;
|
|
display: none;
|
|
}
|
|
|
|
@media only screen and (max-height: 650px) {
|
|
body {
|
|
font-size: 0.9em;
|
|
}
|
|
.gowebcam {
|
|
padding:5px;
|
|
}
|
|
|
|
.infoblob {
|
|
color:white;
|
|
width:100%;
|
|
padding:20px;
|
|
max-width:1280px;
|
|
|
|
}
|
|
|
|
#qrcode img {
|
|
max-height:150px;
|
|
}
|
|
.outer {
|
|
width:50px;
|
|
}
|
|
.close {
|
|
top:0px;
|
|
right:0px;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
@media only screen and (max-width: 650px) {
|
|
.outer {
|
|
width:50px;
|
|
}
|
|
.close{
|
|
top:0;
|
|
right:0;
|
|
}
|
|
select {
|
|
height:30px;
|
|
font-size:120%;
|
|
|
|
}
|
|
#reshare{
|
|
max-width:650px !important;
|
|
font-size:96% !important;
|
|
min-width:400px !important;
|
|
|
|
}
|
|
.fa-paperclip {
|
|
display:none;
|
|
}
|
|
#copythisurl {
|
|
color:#DDD;
|
|
display:inline-block;
|
|
font-size:75% !important;
|
|
}
|
|
|
|
#logoname{
|
|
font-size:70%;
|
|
}
|
|
.column {
|
|
float:none !important;
|
|
padding: 15px 10px 1px 10px !important;
|
|
}
|
|
input[type=radio]{
|
|
b
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
h2 {
|
|
color: white;
|
|
}
|
|
|
|
|
|
.inner {
|
|
width: inherit;
|
|
text-align: center;
|
|
}
|
|
|
|
.labelclass {
|
|
opacity: 0;
|
|
font-size: 1.1em;
|
|
line-height: 4em;
|
|
text-transform: uppercase;
|
|
|
|
transition: all .3s ease-in;
|
|
cursor: pointer;
|
|
}
|
|
|
|
label {
|
|
color: #000;
|
|
}
|
|
|
|
|
|
.inner:before, .inner:after {
|
|
position: absolute;
|
|
content: '';
|
|
height: 7px;
|
|
width: inherit;
|
|
background: #000;
|
|
left: 0;
|
|
font-weight: bold;
|
|
transition: all .3s ease-in;
|
|
}
|
|
|
|
.inner:before {
|
|
top: 50%;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.inner:after {
|
|
bottom: 50%;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.outer:hover .labelclass {
|
|
opacity: 1;
|
|
}
|
|
|
|
.outer:hover .inner:before,
|
|
.outer:hover .inner:after {
|
|
transform: rotate(0);
|
|
}
|
|
|
|
.outer:hover .inner:before {
|
|
top: 0;
|
|
}
|
|
|
|
.outer:hover .inner:after {
|
|
bottom: 0;
|
|
}
|
|
.advanced { display: none !important}
|
|
|
|
.fullcolumn {
|
|
float:left;
|
|
display: inline-block;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
text-align: center;
|
|
/* Add shadows to create the "card" effect */
|
|
|
|
}
|
|
|
|
/* Create four equal columns that floats next to each other */
|
|
.column {
|
|
float:left;
|
|
display: inline-block;
|
|
margin: 1.8%;
|
|
min-width: 300px;
|
|
width: 20%;
|
|
padding: 25px;
|
|
height: 220px; /* Should be removed. Only for demonstration */
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
font-size:100%;
|
|
/* Add shadows to create the "card" effect */
|
|
box-shadow: 0 4px 8px 0 rgba(0,0,0,.1);
|
|
|
|
}
|
|
/* On mouse-over, add a deeper shadow */
|
|
.column:hover {
|
|
box-shadow: 0 8px 16px 0 rgba(0,0,0,.3);
|
|
}
|
|
.column > h2 {color:black;}
|
|
|
|
|
|
@media only screen and (max-height: 650px) {
|
|
.column {
|
|
height: 180px;
|
|
|
|
}
|
|
}
|
|
|
|
.columnfade {
|
|
animation:fading 0.2s}@keyframes fading{0%{opacity:0}100%{opacity:1}}
|
|
}
|
|
|
|
|
|
|
|
img {
|
|
border-radius: 5px 5px 0 0;
|
|
margin:5px;
|
|
}
|
|
|
|
button {
|
|
padding:5px 10px 3px 10px;
|
|
margin:10px 0px;
|
|
}
|
|
/* Empty container that will replace the original container */
|
|
#empty-container {
|
|
display: inline-block;
|
|
float:left;
|
|
width: 20%;
|
|
min-width: 300px;
|
|
padding: 28px;
|
|
height: 220px; /* Should be removed. Only for demonstration */
|
|
margin: 1.8%;
|
|
text-align: center;
|
|
}
|
|
|
|
#container-1 {
|
|
background-repeat: no-repeat;
|
|
background-size: 80px;
|
|
background-position: 50% 65%;
|
|
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgogIDxnPgogICAgPGc+CiAgICAgIDxwYXRoIGQ9Im0xMC41LDU4LjloNDQuM2MyLjMsMCA0LjEtMS44IDQuMS00LjF2LTQ0LjNjMC0yLjMtMS44LTQuMS00LjEtNC4xaC00NC4zYy0yLjMsMC00LjEsMS44LTQuMSw0LjF2NDQuM2MwLDIuMiAxLjksNC4xIDQuMSw0LjF6bTQuMS00NC4zaDM2LjF2MzYuMWgtMzYuMXYtMzYuMXoiIGZpbGw9IiMwMDAwMDAiLz4KICAgICAgPHBhdGggZD0ibTEyMi42LDEwLjVjMC0yLjMtMS44LTQuMS00LjEtNC4xaC00NC4zYy0yLjMsMC00LjEsMS44LTQuMSw0LjF2NDQuM2MwLDIuMyAxLjgsNC4xIDQuMSw0LjFoNDQuM2MyLjMsMCA0LjEtMS44IDQuMS00LjF2LTQ0LjN6bS04LjIsNDAuMmgtMzYuMXYtMzYuMWgzNi4xdjM2LjF6IiBmaWxsPSIjMDAwMDAwIi8+CiAgICAgIDxwYXRoIGQ9Im0xMC41LDEyMi42aDQ0LjNjMi4zLDAgNC4xLTEuOCA0LjEtNC4xdi00NC4zYzAtMi4zLTEuOC00LjEtNC4xLTQuMWgtNDQuM2MtMi4zLDAtNC4xLDEuOC00LjEsNC4xdjQ0LjNjMCwyLjIgMS45LDQuMSA0LjEsNC4xem00LjEtNDQuM2gzNi4xdjM2LjFoLTM2LjF2LTM2LjF6IiBmaWxsPSIjMDAwMDAwIi8+CiAgICAgIDxwYXRoIGQ9Im0xMTguNSw3MC4xaC00NC4zYy0yLjMsMC00LjEsMS44LTQuMSw0LjF2NDQuM2MwLDIuMyAxLjgsNC4xIDQuMSw0LjFoNDQuM2MyLjMsMCA0LjEtMS44IDQuMS00LjF2LTQ0LjNjMC0yLjItMS45LTQuMS00LjEtNC4xem0tNC4xLDQ0LjNoLTM2LjF2LTM2LjFoMzYuMXYzNi4xeiIgZmlsbD0iIzAwMDAwMCIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==)
|
|
}
|
|
|
|
#container-2 {
|
|
background-repeat: no-repeat;
|
|
background-size: 80px;
|
|
background-position: 50% 65%;
|
|
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgogIDxnPgogICAgPHBhdGggZD0ibTExOC41LDEwLjVoLTEwOGMtMi4zLDAtNC4xLDEuOC00LjEsNC4xdjUxLjcgMjEuMWMwLDIuMyAxLjgsNC4xIDQuMSw0LjFoNDkuOXYxOC44aC0yMi45Yy0yLjMsMC00LjEsMS44LTQuMSw0LjFzMS44LDQuMSA0LjEsNC4xaDU0YzIuMywwIDQuMS0xLjggNC4xLTQuMXMtMS44LTQuMS00LjEtNC4xaC0yMi45di0xOC44aDQ5LjljMi4zLDAgNC4xLTEuOCA0LjEtNC4xdi0yMS4xLTUxLjdjMC0yLjMtMS44LTQuMS00LjEtNC4xem0tNC4xLDcyLjhoLTk5Ljh2LTEzaDk5Ljh2MTN6bTAtMjEuMWgtOTkuOHYtNDMuNWg5OS44djQzLjV6IiBmaWxsPSIjMDAwMDAwIi8+CiAgPC9nPgo8L3N2Zz4K)
|
|
}
|
|
|
|
#container-3{
|
|
background-repeat: no-repeat;
|
|
background-size: 80px;
|
|
background-position: 50% 65%;
|
|
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgogIDxnPgogICAgPHBhdGggZD0ibTk2LjYsMjYuOGgtODYuMWMtMi4yLDAtNC4xLDEuOC00LjEsNC4xdjY3LjJjMCwyLjIgMS44LDQuMSA0LjEsNC4xaDg2LjFjMi4yLDAgNC4xLTEuOCA0LjEtNC4xdi0xOS40bDE0LjksMTQuOWMwLjgsMC44IDEuOCwxLjIgMi45LDEuMiAwLjUsMCAxLjEtMC4xIDEuNi0wLjMgMS41LTAuNiAyLjUtMi4xIDIuNS0zLjh2LTUyLjVjMC0xLjYtMS0zLjEtMi41LTMuOC0xLjUtMC42LTMuMy0wLjMtNC40LDAuOWwtMTQuOSwxNC45di0xOS4zYy0wLjEtMi4zLTEuOS00LjEtNC4yLTQuMXptLTQuMSwzMy4zdjguOCAyNS4yaC03OHYtNTkuMmg3OHYyNS4yem0yMS45LTEydjMyLjlsLTEzLjctMTMuN3YtNS40bDEzLjctMTMuOHoiIGZpbGw9IiMwMDAwMDAiLz4KICA8L2c+Cjwvc3ZnPgo=)
|
|
}
|
|
|
|
#container-4 {
|
|
background-repeat: no-repeat;
|
|
background-size: 80px;
|
|
background-position: 50% 65%;
|
|
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDkwLjI4MiA0OTAuMjgyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OTAuMjgyIDQ5MC4yODI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0wLjA0MywyNDUuMTk3YzAuNiwxMC4xLDcuMywxOC42LDE3LDIxLjVsMTc5LjYsNTQuM2w2LjYsMTIzLjhjMC4zLDQuOSwzLjYsOS4yLDguMywxMC44YzEuMywwLjUsMi43LDAuNyw0LDAuNw0KCQljMy41LDAsNi44LTEuNCw5LjItNC4xbDYzLjUtNzAuM2w5MCw2Mi4zYzQsMi44LDguNyw0LjMsMTMuNiw0LjNjMTEuMywwLDIxLjEtOCwyMy41LTE5LjJsNzQuNy0zODAuN2MwLjktNC40LTAuOC05LTQuMi0xMS44DQoJCWMtMy41LTIuOS04LjItMy42LTEyLjQtMS45bC00NTksMTg2LjhDNS4xNDMsMjI1Ljg5Ny0wLjU1NywyMzUuMDk3LDAuMDQzLDI0NS4xOTd6IE0yMjYuMDQzLDQxNC4wOTdsLTQuMS03OC4xbDQ2LDMxLjgNCgkJTDIyNi4wNDMsNDE0LjA5N3ogTTM5MS40NDMsNDIzLjU5N2wtMTYzLjgtMTEzLjRsMjI5LjctMjIyLjJMMzkxLjQ0Myw0MjMuNTk3eiBNNDMyLjE0Myw3OC4xOTdsLTIyNy4xLDIxOS43bC0xNzkuNC01NC4yDQoJCUw0MzIuMTQzLDc4LjE5N3oiLz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K)
|
|
|
|
}
|
|
|
|
#container-6 {
|
|
background-repeat: no-repeat;
|
|
background-size: 80px;
|
|
background-position: 50% 65%;
|
|
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgogIDxnPgogICAgPHBhdGggZD0ibTExOC4yLDMzLjVjLTAuMiwwLTI1LjItMC42LTUwLjctMjUuOS0wLjgtMC44LTEuOC0xLjItMi45LTEuMmgtMC40Yy0xLjEsMC0yLjEsMC40LTIuOSwxLjItMjUuMywyNS4zLTUwLjMsMjUuOS01MC41LDI1LjktMi4yLDAtNCwxLjgtNCw0LjF2MjYuNGMwLDAuNSAwLjEsMSAwLjMsMS41IDAuNywxLjggMTgsNDQuNSA1Niw1Ni40IDAuNCwwLjEgMC44LDAuMiAxLjIsMC4yIDAuMSwwIDAuMywwIDAuNCwwIDAuNCwwIDAuOC0wLjEgMS4yLTAuMiAzOC0xMS45IDU1LjMtNTQuNiA1Ni01Ni40IDAuMi0wLjUgMC4zLTEgMC4zLTEuNXYtMjYuNGMwLTIuMi0xLjgtNC00LTQuMXptLTQuMSwyOS43Yy0yLjMsNS4zLTE4LjQsNDAuMi00OS42LDUwLjYtMzEuMi0xMC40LTQ3LjMtNDUuMy00OS42LTUwLjd2LTIxLjhjOC40LTEuMSAyOC41LTUuNyA0OS42LTI1LjQgMjEuMSwxOS43IDQxLjIsMjQuMyA0OS42LDI1LjR2MjEuOXoiIGZpbGw9IiMwMDAwMDAiLz4KICA8L2c+Cjwvc3ZnPgo=)
|
|
}
|
|
.container-inner {
|
|
display: none;
|
|
background-color: rgb(221, 221, 221);
|
|
padding:0 0 80px 0;
|
|
}
|
|
|
|
.float{
|
|
position:fixed;
|
|
width:60px;
|
|
height:60px;
|
|
bottom:80px;
|
|
right:50px;
|
|
background-color:#C23;
|
|
color:#FFF;
|
|
border-radius:50px;
|
|
text-align:center;
|
|
box-shadow: 2px 2px 3px #999;
|
|
z-index:10;
|
|
}
|
|
|
|
.float3{
|
|
position:fixed;
|
|
width:60px;
|
|
height:60px;
|
|
bottom:80px;
|
|
right:52px;
|
|
background-color:#0C2;
|
|
color:#FFF;
|
|
border-radius:50px;
|
|
text-align:center;
|
|
box-shadow: 2px 2px 3px #999;
|
|
z-index:10;
|
|
}
|
|
.float4{
|
|
position:fixed;
|
|
width:60px;
|
|
height:60px;
|
|
bottom:80px;
|
|
right:132px;
|
|
background-color:#399;
|
|
color:#FFF;
|
|
border-radius:50px;
|
|
text-align:center;
|
|
box-shadow: 2px 2px 3px #999;
|
|
z-index:10;
|
|
}
|
|
.float5{
|
|
position:fixed;
|
|
width:60px;
|
|
height:60px;
|
|
bottom:80px;
|
|
right:132px;
|
|
background-color:#C23;
|
|
color:#FFF;
|
|
border-radius:50px;
|
|
text-align:center;
|
|
box-shadow: 2px 2px 3px #999;
|
|
z-index:10;
|
|
}
|
|
.float2{
|
|
position:fixed;
|
|
width:60px;
|
|
height:60px;
|
|
bottom:80px;
|
|
right:212px;
|
|
background-color:#15B;
|
|
color:#FFF;
|
|
border-radius:50px;
|
|
text-align:center;
|
|
box-shadow: 2px 2px 3px #999;
|
|
z-index:10;
|
|
}
|
|
|
|
.my-float{
|
|
margin-top:7px;
|
|
}
|
|
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
|
|
|
|
.in-animation {
|
|
animation: inlightbox 0.8s forwards;
|
|
position: fixed !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.out-animation {
|
|
animation: outlightbox 0.8s forwards;
|
|
}
|
|
|
|
@keyframes inlightbox
|
|
{
|
|
50% {
|
|
width: 100%;
|
|
left: 0;
|
|
height: 220px;
|
|
}
|
|
100% {
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
#gridlayout {
|
|
margin:0;
|
|
border:0;
|
|
padding:0;
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
|
|
|
|
.column_neon {
|
|
color:white;
|
|
animation: neonGlow 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
|
box-shadow:
|
|
0 0 5px rgba(255,255,255,.8),
|
|
0 0 10px rgba(255,255,255,.8),
|
|
0 0 20px rgba(66,220,219,.5),
|
|
0 0 22px rgba(66,220,219,.5)
|
|
}
|
|
|
|
@keyframes neonGlow {
|
|
100% {
|
|
box-shadow:
|
|
0 0 5px rgba(255,255,255,.8),
|
|
0 0 10px rgba(255,255,255,.8),
|
|
0 0 20px rgba(66,220,219,.5),
|
|
0 0 22px rgba(66,220,219,.5)
|
|
|
|
|
|
}
|
|
0% {
|
|
box-shadow: 0 0 2px rgba(255,255,255,.8),
|
|
0 0 3px rgba(255,255,255,.8),
|
|
0 0 4px rgba(66,220,219,.5)
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
padding-top: 50px;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgb(0, 0, 0);
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.modal-content {
|
|
position: relative;
|
|
background-color: white;
|
|
padding: 20px;
|
|
margin: auto;
|
|
max-width: 400px;
|
|
|
|
}
|
|
.close-btn {
|
|
float: right;
|
|
color: lightgray;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
}
|
|
.close-btn:hover {
|
|
color: darkgray;
|
|
}
|
|
@-webkit-keyframes animatetop {
|
|
from {top:-300px; opacity:0}
|
|
to {top:0; opacity:1}
|
|
}
|
|
@keyframes animatetop {
|
|
from {top:-300px; opacity:0}
|
|
to {top:0; opacity:1}
|
|
}
|
|
|
|
video {
|
|
flex: 1 1 auto;
|
|
background-color: transparent !important;
|
|
border:0;
|
|
margin:0;
|
|
background-size: auto 50px;
|
|
background-repeat:no-repeat;
|
|
background-position: center;
|
|
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");
|
|
}
|
|
|
|
/* context menu */
|
|
|
|
.context-menu {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 10 !important;
|
|
padding: 12px 0 !important;
|
|
width: 240px !important;
|
|
background-color: #fff !important;
|
|
border: solid 1px #dfdfdf !important;
|
|
box-shadow: 1px 1px 2px #cfcfcf !important;
|
|
}
|
|
|
|
|
|
.popup-message {
|
|
display: none;
|
|
align-text:center;
|
|
position: absolute;
|
|
z-index: 10 !important;
|
|
padding: 3px 0 !important;
|
|
min-width: 180px !important;
|
|
border-radius: 10px;
|
|
background-color: #fff !important;
|
|
border: solid 1px #dfdfdf !important;
|
|
box-shadow: 1px 1px 2px #cfcfcf !important;
|
|
}
|
|
|
|
|
|
.context-menu--active {
|
|
display: block !important;
|
|
}
|
|
|
|
.context-menu__items {
|
|
list-style: none !important;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.context-menu__item {
|
|
display: block;
|
|
margin-bottom: 4px !important;
|
|
}
|
|
|
|
.context-menu__item:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.context-menu__link {
|
|
display: block;
|
|
padding: 4px 12px;
|
|
color: #0066aa !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.context-menu__link:hover {
|
|
color: #fff !important;
|
|
background-color: #0066aa !important;
|
|
}
|
|
|
|
.multiselect .multiselect-trigger:hover {
|
|
cursor: pointer;
|
|
cursor: hand;
|
|
text-decoration: none;
|
|
}
|
|
.multiselect .multiselect-trigger.open {
|
|
border-bottom: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
.multiselect .multiselect-trigger.closed {
|
|
border-bottom: 1px solid #ccc;
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
div.multiselect {
|
|
background-color:#FFF;
|
|
max-width:550px;
|
|
white-space: nowrap;
|
|
overflow:hidden;
|
|
min-width:100px;
|
|
margin:auto auto;
|
|
border: 1px solid #ccc;
|
|
border-bottom:0;
|
|
}
|
|
|
|
.multiselect .multiselect-contents {
|
|
display: block;
|
|
margin: 0;
|
|
font-size:80%;
|
|
padding: 5px 5px 5px;
|
|
|
|
border-top: 0;
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
text-align:left;
|
|
background-color:#f3f3f3;
|
|
|
|
}
|
|
.multiselect .multiselect-contents li {
|
|
list-style: none;
|
|
font-size:130%;
|
|
padding:2px;
|
|
}
|
|
.select .select-trigger:hover {
|
|
cursor: pointer;
|
|
cursor: hand;
|
|
text-decoration: none;
|
|
}
|
|
.select .select-trigger.open {
|
|
border-bottom: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
.select .select-trigger.closed {
|
|
border-bottom: 1px solid #ccc;
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
.select .select-contents {
|
|
display: none;
|
|
margin: 0;
|
|
padding: 0 24px 24px;
|
|
border: 1px solid #ccc;
|
|
border-top: 0;
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
.select .select-contents li {
|
|
list-style: none;
|
|
}
|
|
|
|
|
|
::-webkit-input-placeholder {
|
|
color: #555 !important;
|
|
}
|
|
::-moz-placeholder {
|
|
color: #555 !important;
|
|
}
|
|
:-ms-input-placeholder {
|
|
color: #555 !important;
|
|
}
|
|
:-moz-placeholder {
|
|
color: #555 !important;
|
|
}
|
|
|
|
|
|
label {
|
|
font-weight: normal;
|
|
}
|
|
|
|
input[type=checkbox]
|
|
{
|
|
/* Double-sized Checkboxes */
|
|
-ms-transform: scale(1.3); /* IE */
|
|
-moz-transform: scale(1.3); /* FF */
|
|
-webkit-transform: scale(1.3); /* Safari and Chrome */
|
|
-o-transform: scale(1.3); /* Opera */
|
|
transform: scale(1.3);
|
|
padding: 5px;
|
|
} |