catlab-remote-client 1.0.20

package/dist/css/style.css

@@ -0,0 +1,489 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body,
+#remote,
+#app,
+.view {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#catlab-loading {
+    text-align: center;
+    margin: 10px auto;
+}
+
+#catlab-message {
+    text-align: center;
+    margin: 10px auto;
+    color: yellow;
+}
+
+#catlab-token-form, body
+{
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    background:#FFF;
+    top: 0;
+    left: 0;
+    font-family:Arial,Helvetica,sans-serif;
+}
+
+#catlab-token-form #token
+{
+    box-sizing: border-box;
+    font-size: 2em;
+    width: 85%;
+    margin: 10vh auto;
+    padding: 5vmin 2vmin;
+    background:#DBD4D6;
+    text-align: center;
+    border:1px solid #DBD4D6;
+    outline:none;
+    color:#492830;
+    display:block;
+
+    content: 'viewport-units-buggyfill; margin: 10vh auto; padding: 5vmin 2vmin;';
+}
+
+#catlab-token-form button
+{
+    box-sizing: border-box;
+    font-size: 2em;
+    width :85%;
+    margin: 10vh auto;
+    background: #492830;
+    padding: 5vmin 2vmin;
+    border:none;
+    outline: 5px solid #82524e;
+    outline-offset: -10px;
+    color:#FFF;
+    text-transform:uppercase;
+    display:block;
+
+    content: 'viewport-units-buggyfill; margin: 10vh auto; padding: 5vmin 2vmin;';
+}
+
+#catlab-token-form #token:focus {border:1px solid #492830;}
+
+#catlab-token-form #token::-webkit-input-placeholder { color: #492830; }
+#catlab-token-form #token:-moz-placeholder { /* Firefox 18- */ color: #492830; }
+#catlab-token-form #token::-moz-placeholder {  /* Firefox 19+ */ color: #492830; }
+#catlab-token-form #token:-ms-input-placeholder { color: #492830; }
+
+.catlab-popup-container
+{
+    position: absolute;
+    margin: 0 0 0 0;
+    padding: 0 0 0 0;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+}
+
+.catlab-popup-container .overlay
+{
+    position: absolute;
+    margin: 0 0 0 0;
+    padding: 0 0 0 0;
+    background: black;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    opacity: 0.8;
+    top: 0;
+    left: 0;
+}
+
+.catlab-popup-container .popup
+{
+    position: fixed;
+    margin-left: 3%;
+    margin-top: 1%;
+    z-index: 1;
+    background: white;
+    overflow: visible;
+    padding: 10px;
+    border-radius: 10px;
+    box-sizing: border-box;
+    height: 94%;
+    width: 94%;
+    margin-left: 3vw;
+    margin-top: 3vh;
+}
+
+.catlab-popup-container .popup .userlist
+{
+    margin: 20px 0;
+}
+
+.catlab-popup-container .popup div.scrollable {
+    box-sizing: border-box;
+    height: 100%;
+    overflow-y: scroll !important;
+    z-index: 0 !important;
+    position: relative;
+    -webkit-overflow-scrolling: touch;
+}
+
+.catlab-popup-container .popup h2
+{
+    margin-top: 0;
+}
+
+.catlab-popup-container .popup p
+{
+    margin: 0;
+    padding: 0;
+}
+
+.catlab-popup-container p.close
+{
+    position: absolute;
+    right: -15px;
+    top: -15px;
+    z-index: 1000;
+}
+
+.catlab-popup-container p.close a
+{
+    text-decoration: none;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    border: 2px solid black;
+    border-radius: 15px;
+    display: inline-block;
+    background: white;
+}
+
+.catlab-popup-container p.close a:before
+{
+    content: "x";
+    border: 1px solid blue;
+    padding: 5px;
+}
+
+.catlab-popup-container p.close a span
+{
+    display: none;
+}
+
+#authentication .overlay
+{
+    display: block;
+    position: absolute;
+    margin: 0 0 0 0;
+    padding: 0 0 0 0;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    opacity: 0.5;
+    text-decoration:none;
+    border-radius: 15px;
+}
+
+#authentication
+{
+    position: relative;
+    padding: 0;
+    background: white;
+    border-radius: 15px;
+}
+
+#authentication * {
+    padding: 0 0 0 0;
+    margin: 0 0 0 0;
+}
+
+#authentication .content
+{
+    border: 2px solid #000000;
+    box-sizing:border-box;
+    margin: 0 0 0 0;
+    padding: 5px;
+    border-radius: 15px;
+    position: relative;
+    z-index: 1;
+}
+
+#authentication p.catlab-not-loggedin {
+    line-height: 30px;
+    line-height: 10vh;
+    content: 'viewport-units-buggyfill; line-height: 10vh;';
+}
+
+#authentication p.catlab-not-loggedin a {
+    text-transform:uppercase !important;
+    text-decoration:none;
+    border:none;
+}
+
+.clearer
+{
+    clear: both;
+}
+
+#authentication p,
+.catlab-popup-container p,
+#authentication li,
+.catlab-popup-container li
+{
+    content: 'viewport-units-buggyfill;';
+    margin: 0;
+    padding: 0;
+}
+
+#authentication a,
+.catlab-popup-container ul.catlab-actions li a {
+    text-decoration:none;
+    border-style: none;
+    border-bottom:1px solid #000;
+    color:#000;
+    font-weight: normal;
+    border-radius: 0;
+}
+
+.catlab-user {
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+    color: black;
+}
+
+.catlab-user * {
+    line-height: 1.2;
+}
+
+.catlab-user ul
+{
+    list-style-type: none;
+}
+
+.catlab-user .catlab-info,
+#authentication .catlab-user .catlab-info
+{
+    float: left;
+    text-align: left;
+
+    content: 'viewport-units-buggyfill; padding: 2vh 2vh 2vh 0;';
+
+    max-font-size: 3vmin;
+}
+
+.catlab-user .catlab-avatar,
+#authentication .catlab-user .catlab-avatar {
+    display: block;
+
+    width:15vmin;
+    height:15vmin;
+    margin-right: 1vmin;
+    padding: 0;
+
+    overflow:hidden;
+    float: left;
+
+    border-radius: 10px;
+
+    content: 'viewport-units-buggyfill; width: 15vmin; height: 15vmin; padding: 0; margin-right: 1vmin;';
+}
+
+.catlab-user .catlab-avatar img
+{
+    height:100%;
+    display:block;
+    margin:auto;
+}
+
+.catlab-user .catlab-avatar.loading {
+    opacity: 0.2;
+}
+
+.catlab-popup-container h2 {
+    text-align:center;
+    width:100%;
+    display:block;
+    text-transform:uppercase;
+    font-weight:normal;
+    content: 'viewport-units-buggyfill;';
+}
+.catlab-popup-container p.close{font-size:1em;}
+.catlab-popup-container p.close a:before {border:none;padding:0;}
+.catlab-popup-container p.close a {
+    color:#000;
+    opacity:1;
+}
+
+.catlab-popup-container a {
+    color: black;
+}
+
+.catlab-popup-container a .new-user {
+    color:#000;
+    display:block;
+    width:100%;
+    text-align:right;
+    font-style:italic;
+    text-decoration: none;
+    content: 'viewport-units-buggyfill; ';
+}
+
+.catlab-popup-container ul
+{
+    list-style-type: none;
+    float: none;
+}
+
+.catlab-popup-container ul.userlist {
+    max-height: 50vh;
+    float: left;
+    overflow: auto;
+    width: 100%;
+
+    content: 'viewport-units-buggyfill; max-height: 50vh;';
+}
+
+.catlab-popup-container ul.userlist > li
+{
+    float: left;
+    width: 50%;
+}
+
+.popup.thanks h2
+{
+    content: 'viewport-units-buggyfill; ';
+}
+
+.popup.thanks p
+{
+    margin-bottom: 3vh;
+    content: 'viewport-units-buggyfill; ';
+}
+
+.popup.thanks p.description
+{
+    color: gray;
+    content: 'viewport-units-buggyfill; ';
+}
+
+.popup.thanks p.playnow
+{
+    text-align: center;
+}
+
+.smiley-selector {
+    border: 2px dashed #bebebe;
+    display: inline-block;
+    padding: 10px;
+    margin: 15px;
+    border-radius: 5px;
+}
+
+.smiley-view {
+    display: inline-block;
+    padding: 10px;
+    margin: 15px;
+}
+
+.smiley-selector img {
+    display: block;
+}
+
+.smiley-selector .placeholder {
+    display: block;
+    width: 64px;
+    height: 64px;
+}
+
+.smiley-selector p.switch {
+    font-size: 0.8em;
+    margin-top: 10px;
+}
+
+ul.smileys li {
+    float: left;
+    padding: 10px;
+    display: inline-block;
+    box-sizing: border-box;
+    border: 2px solid white;
+    border-radius: 5px;
+}
+
+ul.smileys li img {
+    display: block;
+    width: 64px;
+    height: 64px;
+}
+
+ul.smileys li.selected {
+    border: 2px dashed #bebebe;
+}
+
+ul.smileys li.unavailable {
+    opacity: 0.3;
+}
+
+.smiley-selector .switch a {
+    color: white;
+}
+
+[data-bigtext-length="1"],
+[data-bigtext-length="2"],
+[data-bigtext-length="3"],
+[data-bigtext-length="4"] {
+    font-size: 5em;
+}
+
+[data-bigtext-length="5"],
+[data-bigtext-length="6"],
+[data-bigtext-length="7"],
+[data-bigtext-length="8"],
+[data-bigtext-length="9"],
+[data-bigtext-length="10"] {
+    font-size: 3em;
+}
+
+[data-bigtext-length="11"],
+[data-bigtext-length="12"],
+[data-bigtext-length="13"],
+[data-bigtext-length="14"],
+[data-bigtext-length="15"],
+[data-bigtext-length="16"],
+[data-bigtext-length="17"],
+[data-bigtext-length="18"],
+[data-bigtext-length="19"],
+[data-bigtext-length="20"] {
+    font-size: 2em;
+}
+
+.pulsating {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
+    transform: scale(1);
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
+    }
+
+    70% {
+        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
+    }
+
+    100% {
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+    }
+}