LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
  
  
CSS
/* VARS */
/* FUNCTIONS */
/* BEGIN CSS RULES */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body.container {
  display: block;
  background-image: url("https://lh3.googleusercontent.com/-l_i87I3euS4/VW5p75ncu8I/AAAAAAAAAuk/3zB9hzHv9QM/w2048-h1280/Papyros%2BWallpaper.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}
.login-container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;
}
.login-container.hidden {
  visibility: hidden;
  pointer-events: none;
}
.login-container>.login-box {
  display: block;
  position: relative;
  background-color: #fff;
  width: 400px;
  border-radius: 3px;
  overflow: hidden;
  -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  -moz-transform: translateX(0) translateY(0);
  -webkit-transform: translateX(0) translateY(0);
  -o-transform: translateX(0) translateY(0);
  -ms-transform: translateX(0) translateY(0);
  -webkit-transform: translateX(0) translateY(0);
  -moz-transform: translateX(0) translateY(0);
  -o-transform: translateX(0) translateY(0);
  -ms-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.login-container>.login-box.dismissing {
  -moz-transform: translateX(50%) translateY(0);
  -webkit-transform: translateX(50%) translateY(0);
  -o-transform: translateX(50%) translateY(0);
  -ms-transform: translateX(50%) translateY(0);
  -webkit-transform: translateX(50%) translateY(0);
  -moz-transform: translateX(50%) translateY(0);
  -o-transform: translateX(50%) translateY(0);
  -ms-transform: translateX(50%) translateY(0);
  transform: translateX(50%) translateY(0);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.login-container>.login-box>.login-cover {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  position: relative;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: relative;
  width: 100%;
  background-color: #455a64;
}
.login-container>.login-box>.login-cover>span {
  font-size: 1.3em;
  font-weight: bold;
  color: #fff;
  margin: 2em 0 4em 0;
}
.login-container>.login-box>.login-cover>.login-pp-container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  -moz-transform: translateX(0) translateY(50%);
  -webkit-transform: translateX(0) translateY(50%);
  -o-transform: translateX(0) translateY(50%);
  -ms-transform: translateX(0) translateY(50%);
  -webkit-transform: translateX(0) translateY(50%);
  -moz-transform: translateX(0) translateY(50%);
  -o-transform: translateX(0) translateY(50%);
  -ms-transform: translateX(0) translateY(50%);
  transform: translateX(0) translateY(50%);
}
.login-container>.login-box>.login-cover>.login-pp-container>img.login-pp {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #f5f5f5;
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.login-container>.login-box>.login-form {
  padding: 70px 20px 20px;
}
.login-container>.login-box>.login-form>.line {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
  width: 100%;
  font-size: 1.1em;
  padding: 1em 0;
  color: #212121;
}
.login-container>.login-box>.login-form>.line.centered {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.login-container>.login-box>.login-form>.line>input {
  font-size: 1.1em;
  padding: 0.5em 0.8em;
  width: 80%;
  border: none;
  border-bottom: 2px solid #727272;
  outline: none;
  -webkit-transition: border-bottom 0.4s ease;
  -moz-transition: border-bottom 0.4s ease;
  -ms-transition: border-bottom 0.4s ease;
  -o-transition: border-bottom 0.4s ease;
  -webkit-transition: border-bottom 0.4s ease;
  -moz-transition: border-bottom 0.4s ease;
  -o-transition: border-bottom 0.4s ease;
  -ms-transition: border-bottom 0.4s ease;
  transition: border-bottom 0.4s ease;
}
.login-container>.login-box>.login-form>.line>input:focus {
  border-bottom: 2px solid #3f51b5;
}
.login-container>.login-box>.login-form>.line>input:hover,
.login-container>.login-box>.login-form>.line>input :focus,
.login-container>.login-box>.login-form>.line>input :active {
  outline: none;
}
.login-container>.login-box>.login-form>.line>img.pp-select {
  width: 40px;
  height: 40px;
  border: 1px solid #f5f5f5;
  border-radius: 50%;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.login-container>.login-box>.login-form>.line>button {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
  width: 150px;
  height: 50px;
  padding: 0 !important;
  background-color: #607d8b;
  color: #fff;
  border: none;
  border-radius: 3px;
  outline: none;
}
.login-container>.login-box>.login-form>.line>button>i {
  display: inline;
  font-size: 1.4em;
  margin-left: 0.5em;
}
.os {
  position: absolute;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  width: 100%;
}
.os.taskbar {
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  bottom: 0;
  left: 0;
  padding: 0.6em 0.3em;
  -moz-transform: translateX(0) translateY(0);
  -webkit-transform: translateX(0) translateY(0);
  -o-transform: translateX(0) translateY(0);
  -ms-transform: translateX(0) translateY(0);
  -webkit-transform: translateX(0) translateY(0);
  -moz-transform: translateX(0) translateY(0);
  -o-transform: translateX(0) translateY(0);
  -ms-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
  -webkit-transition: transform 0.6s ease;
  -moz-transition: transform 0.6s ease;
  -ms-transition: transform 0.6s ease;
  -o-transition: transform 0.6s ease;
  -webkit-transition: -webkit-transform 0.6s ease;
  -moz-transition: -moz-transform 0.6s ease;
  -o-transition: -o-transform 0.6s ease;
  -ms-transition: -ms-transform 0.6s ease;
  transition: transform 0.6s ease;
}
.os.taskbar.hidden {
  -moz-transform: translateX(0) translateY(100%);
  -webkit-transform: translateX(0) translateY(100%);
  -o-transform: translateX(0) translateY(100%);
  -ms-transform: translateX(0) translateY(100%);
  -webkit-transform: translateX(0) translateY(100%);
  -moz-transform: translateX(0) translateY(100%);
  -o-transform: translateX(0) translateY(100%);
  -ms-transform: translateX(0) translateY(100%);
  transform: translateX(0) translateY(100%);
}
.os.taskbar > div {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.os.taskbar > div > * {
  margin: 0em 0.4em;
}
.os.taskbar > .left > button:after {
  content: '';
  display: block;
  position: absolute;
  width: calc(100% + 0.8em);
  height: 2px;
  bottom: calc(-0.6em - 2px);
  left: -0.4em;
  background-color: rgba(255,255,255,0.7);
  -webkit-transition: bottom 0.4s ease;
  -moz-transition: bottom 0.4s ease;
  -ms-transition: bottom 0.4s ease;
  -o-transition: bottom 0.4s ease;
  -webkit-transition: bottom 0.4s ease;
  -moz-transition: bottom 0.4s ease;
  -o-transition: bottom 0.4s ease;
  -ms-transition: bottom 0.4s ease;
  transition: bottom 0.4s ease;
  z-index: 900;
}
.os.taskbar > .left > button.opened:after {
  bottom: -0.6em;
}
.vertical.divider {
  display: block;
  width: 1px;
  height: 40px;
  margin: 0em 10px !important;
  background-color: rgba(255,255,255,0.5);
}
button {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  outline: none;
  cursor: pointer;
}
button:active {
  padding: 0;
}
button.square {
  color: #fff;
  background-color: #212121;
  border: none;
  border-radius: 0.2em;
  font-size: 1.3rem;
  margin: 0em 0.2em !important;
  padding: 0;
}
button.square:hover {
  color: #fff;
  background-color: #212121;
  font-size: 1.3em;
  line-height: normal;
  padding: 0;
}
button.square:active {
  background-color: #121212;
}
button.icon.hangouts {
  border-radius: 50%;
  border: none;
  background-color: #1ea260;
  background-image: url("https://i.imgur.com/0pA4Loz.png");
  background-position: 0px 40px;
}
.right-container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: distribute;
  -moz-box-pack: distribute;
  -o-box-pack: distribute;
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 40px;
  font-size: 1.2em;
  padding: 0 0.3em;
  border: none;
  border-radius: 0.2em;
  color: #fff;
  background-color: #212121;
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.right-container>* {
  margin: 0 0.4em;
}
.right-container>*.waves-circle {
  margin: 0 0.1em;
}
.right-container>.time {
  font-size: 1.1rem;
  text-align: center;
}
.right-container>.user {
  height: 25px;
  width: 25px;
}
.right-container>.user>img {
  height: 25px;
  width: 25px;
  border-radius: 50%;
}
.button {
  cursor: pointer;
}
section.hangouts-container {
  display: block;
  position: absolute;
  width: 350px;
  top: 50%;
  left: 50%;
  background-color: transparent;
  border: none;
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  overflow: hidden;
  -webkit-transition: box-shadow 0.4s ease, opacity 0.4s ease;
  -moz-transition: box-shadow 0.4s ease, opacity 0.4s ease;
  -ms-transition: box-shadow 0.4s ease, opacity 0.4s ease;
  -o-transition: box-shadow 0.4s ease, opacity 0.4s ease;
  -webkit-transition: box-shadow 0.4s ease, opacity 0.4s ease;
  -moz-transition: box-shadow 0.4s ease, opacity 0.4s ease;
  -o-transition: box-shadow 0.4s ease, opacity 0.4s ease;
  -ms-transition: box-shadow 0.4s ease, opacity 0.4s ease;
  transition: box-shadow 0.4s ease, opacity 0.4s ease;
}
section.hangouts-container.visible {
  -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
section.hangouts-container.hidden {
  visibility: hidden;
}
.ripple.window {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  -moz-transform: translateX(-50%) translateY(50%);
  -webkit-transform: translateX(-50%) translateY(50%);
  -o-transform: translateX(-50%) translateY(50%);
  -ms-transform: translateX(-50%) translateY(50%);
  -webkit-transform: translateX(-50%) translateY(50%);
  -moz-transform: translateX(-50%) translateY(50%);
  -o-transform: translateX(-50%) translateY(50%);
  -ms-transform: translateX(-50%) translateY(50%);
  transform: translateX(-50%) translateY(50%);
  width: 0;
  height: 0;
  padding-top: 0;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  z-index: 900;
}
.ripple.window.active {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-animation-name: window-ripple;
  -moz-animation-name: window-ripple;
  -o-animation-name: window-ripple;
  -ms-animation-name: window-ripple;
  animation-name: window-ripple;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  -ms-animation-duration: 1s;
  animation-duration: 1s;
}
.hangouts-global-contents {
  position: relative;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.hangouts-global-contents.visible {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.window-control {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  position: absolute;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  height: 30px;
  padding: 0em 0.5em;
  font-size: 0.9rem;
  color: #fff;
  background-color: rgba(0,0,0,0.13);
  z-index: 200;
}
.window-title h4 {
  font-weight: normal !important;
  margin: 0;
}
.window-control i {
  margin: 0 0.4em;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  -ms-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  -ms-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.window-control i.zmdi-close:hover {
  color: #ff5252;
}
nav.hangouts-top-nav {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -o-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
  width: 100%;
  padding: calc(30px + 0.6em) 1em 0.6em;
  background-color: #1ea260;
  color: #fff;
  font-size: 1.5em;
}
nav.hangouts-top-nav h4 {
  font-size: 0.7em;
  margin: 0em 1em;
  font-weight: normal !important;
}
.hangouts-content-container {
  display: block;
  position: relative;
  width: 100%;
  height: 350px;
  background-color: #fff;
  overflow-x: hidden;
  overflow-y: auto;
}
nav.hangouts-sidebar {
  display: block;
  position: absolute;
  width: 70%;
  max-width: 300px;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  -webkit-transition: transform 0.4s ease;
  -moz-transition: transform 0.4s ease;
  -ms-transition: transform 0.4s ease;
  -o-transition: transform 0.4s ease;
  -webkit-transition: -webkit-transform 0.4s ease;
  -moz-transition: -moz-transform 0.4s ease;
  -o-transition: -o-transform 0.4s ease;
  -ms-transition: -ms-transform 0.4s ease;
  transition: transform 0.4s ease;
  -moz-transform: translateX(-105%) translateY(0);
  -webkit-transform: translateX(-105%) translateY(0);
  -o-transform: translateX(-105%) translateY(0);
  -ms-transform: translateX(-105%) translateY(0);
  -webkit-transform: translateX(-105%) translateY(0);
  -moz-transform: translateX(-105%) translateY(0);
  -o-transform: translateX(-105%) translateY(0);
  -ms-transform: translateX(-105%) translateY(0);
  transform: translateX(-105%) translateY(0);
  z-index: 200;
}
nav.hangouts-sidebar.open {
  -moz-transform: translateX(0) translateY(0);
  -webkit-transform: translateX(0) translateY(0);
  -o-transform: translateX(0) translateY(0);
  -ms-transform: translateX(0) translateY(0);
  -webkit-transform: translateX(0) translateY(0);
  -moz-transform: translateX(0) translateY(0);
  -o-transform: translateX(0) translateY(0);
  -ms-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
}
.hangouts-sidebar-overlay {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  width: 1000%;
  top: 0;
  right: 0;
  -moz-transform: translateX(100%) translateY(0);
  -webkit-transform: translateX(100%) translateY(0);
  -o-transform: translateX(100%) translateY(0);
  -ms-transform: translateX(100%) translateY(0);
  -webkit-transform: translateX(100%) translateY(0);
  -moz-transform: translateX(100%) translateY(0);
  -o-transform: translateX(100%) translateY(0);
  -ms-transform: translateX(100%) translateY(0);
  transform: translateX(100%) translateY(0);
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  background-color: #000;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.hangouts-sidebar-overlay.open {
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -webkit-animation-name: overlay-appear;
  -moz-animation-name: overlay-appear;
  -o-animation-name: overlay-appear;
  -ms-animation-name: overlay-appear;
  animation-name: overlay-appear;
  -webkit-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  -o-animation-duration: 0.4s;
  -ms-animation-duration: 0.4s;
  animation-duration: 0.4s;
}
.sidebar-image-container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  position: relative;
  -webkit-box-align: end;
  -moz-box-align: end;
  -o-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -ms-flex-line-pack: end;
  -webkit-align-content: flex-end;
  align-content: flex-end;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  height: 130px;
  padding: 0.5em;
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url("https://lh5.googleusercontent.com/-k5LefkvFKkI/VPhNE22dhZI/AAAAAAAALoo/MhyQky-wW24/w800-h800/Landscape%2BDesktop.jpg");
  background: -moz-linear-gradient(top, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url("https://lh5.googleusercontent.com/-k5LefkvFKkI/VPhNE22dhZI/AAAAAAAALoo/MhyQky-wW24/w800-h800/Landscape%2BDesktop.jpg");
  background: -o-linear-gradient(top, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url("https://lh5.googleusercontent.com/-k5LefkvFKkI/VPhNE22dhZI/AAAAAAAALoo/MhyQky-wW24/w800-h800/Landscape%2BDesktop.jpg");
  background: -ms-linear-gradient(top, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url("https://lh5.googleusercontent.com/-k5LefkvFKkI/VPhNE22dhZI/AAAAAAAALoo/MhyQky-wW24/w800-h800/Landscape%2BDesktop.jpg");
  background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url("https://lh5.googleusercontent.com/-k5LefkvFKkI/VPhNE22dhZI/AAAAAAAALoo/MhyQky-wW24/w800-h800/Landscape%2BDesktop.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}
.sidebar-user-image-container {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0.6em 0;
}
.sidebar-user-image {
  display: block;
  position: relative;
  width: 45px;
  height: 45px;
  background-image: url("https://semantic-ui.com/images/avatar2/large/matthew.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  border-radius: 50%;
}
.sidebar-user-image:after {
  content: 'SMS';
  display: block;
  position: absolute;
  font-size: 0.45em;
  font-weight: bold;
  color: #212121;
  padding: 0.2em 0.4em;
  bottom: 0;
  right: 0;
  background-color: #fff;
  border-radius: 2px;
}
.sidebar-image-text {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
}
.sidebar-image-text>.left {
  display: block;
  position: relative;
  font-size: 0.85em;
  color: #fff;
}
.sidebar-image-text>.left>.sidebar-image-text-email {
  font-size: 0.9em;
  color: rgba(255,255,255,0.8);
}
.sidebar-image-text>i.zmdi.zmdi-caret-down {
  color: #fff;
  margin-right: 0.8em;
}
.sidebar-content-container {
  display: block;
  position: relative;
  width: 100%;
  height: calc(100% - $sidebar-image-height);
  overflow-x: hidden;
  overflow-y: auto;
}
.sidebar-content-container>.sidebar-content {
  display: block;
  position: relative;
  width: 100%;
}
.sidebar-content-container>.sidebar-content>.item {
  display: block;
  font-size: 1em;
  color: #616161;
  width: 100%;
  padding: 0.7em 1.2em;
}
.sidebar-content-container>.sidebar-content>.item>span {
  padding-left: 1em;
}
.horizontal.divider {
  display: block;
  position: relative;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  background-color: rgba(0,0,0,0.15);
}
/* 
 * Alias of .zmdi-email-open because CodePen
 * blacklists it for some obscure reason <3
 */
i.zmdi.zmdi-email-opened:before {
  content: '\f159';
}
/* Same shit <3 */
i.zmdi.zmdi-mail-sending:before {
  content: '\f194';
}
.hangouts-content-wrapper {
  position: relative;
}
.conversation-view.floating {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-line-pack: stretch;
  -webkit-align-content: stretch;
  align-content: stretch;
  -webkit-box-align: start;
  -moz-box-align: start;
  -o-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -o-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #eaeaea;
  z-index: 700;
  -moz-transform: translateX(0) translateY(20%);
  -webkit-transform: translateX(0) translateY(20%);
  -o-transform: translateX(0) translateY(20%);
  -ms-transform: translateX(0) translateY(20%);
  -webkit-transform: translateX(0) translateY(20%);
  -moz-transform: translateX(0) translateY(20%);
  -o-transform: translateX(0) translateY(20%);
  -ms-transform: translateX(0) translateY(20%);
  transform: translateX(0) translateY(20%);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
  pointer-events: none;
}
.conversation-view.floating.open {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -moz-transform: translateX(0) translateY(0);
  -webkit-transform: translateX(0) translateY(0);
  -o-transform: translateX(0) translateY(0);
  -ms-transform: translateX(0) translateY(0);
  -webkit-transform: translateX(0) translateY(0);
  -moz-transform: translateX(0) translateY(0);
  -o-transform: translateX(0) translateY(0);
  -ms-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
  pointer-events: auto;
}
.conversation-view.floating>.conversation-view-container {
  display: block;
  position: relative;
  height: calc(100% - 50px);
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.conversation-view.floating>.conversation-view-container>.conversation-view-messages {
  display: block;
  position: relative;
  width: 100%;
  min-height: 100%;
}
.conversation-view.floating>.conversation-view-container>.conversation-view-messages>.message {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  position: relative;
  width: 100%;
  padding: 1em;
}
.conversation-view.floating>.conversation-view-container>.conversation-view-messages>.message>img {
  width: 35px;
  height: 35px;
  margin: 5px;
  display: inline-block;
  border-radius: 50%;
}
.conversation-view.floating>.conversation-view-container>.conversation-view-messages>.message>.dummy.img {
  width: 40px;
  height: 40px;
  display: inline-block;
  background-image: url("https://i.imgur.com/0pA4Loz.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}
.conversation-view.floating>.conversation-view-container>.conversation-view-messages>.message>.bubble {
  display: inline-block;
  position: relative;
  text-align: left;
  max-width: 80%;
  font-size: 0.85em;
  padding: 0.5em;
  border-radius: 2px;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
.conversation-view.floating>.conversation-view-container>.conversation-view-messages>.message>.bubble>span {
  display: block;
  color: #212121;
}
.conversation-view.floating>.conversation-view-container>.conversation-view-messages>.message>.bubble>span.text {
  margin: 0.5em 0;
}
.conversation-view.floating>.conversation-view-container>.conversation-view-messages>.message>.bubble>span.time {
  font-size: 0.9em;
  color: #616161;
}
.conversation-view.floating>.conversation-view-container>.conversation-view-messages>.message.in {
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -o-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -moz-box-align: start;
  -o-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.conversation-view.floating>.conversation-view-container>.conversation-view-messages>.message.in>.bubble:after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 10px 10px 0;
  border-color: transparent #fff transparent transparent;
  left: -10px;
  top: 0;
}
.conversation-view.floating>.conversation-view-container>.conversation-view-messages>.message.out {
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -o-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-box-align: end;
  -moz-box-align: end;
  -o-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.conversation-view.floating>.conversation-view-container>.conversation-view-messages>.message.out.hidden {
  -moz-transform: translateX(20%) translateY(0);
  -webkit-transform: translateX(20%) translateY(0);
  -o-transform: translateX(20%) translateY(0);
  -ms-transform: translateX(20%) translateY(0);
  -webkit-transform: translateX(20%) translateY(0);
  -moz-transform: translateX(20%) translateY(0);
  -o-transform: translateX(20%) translateY(0);
  -ms-transform: translateX(20%) translateY(0);
  transform: translateX(20%) translateY(0);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.conversation-view.floating>.conversation-view-container>.conversation-view-messages>.message.out>.bubble {
  background-color: #c8e6c9;
}
.conversation-view.floating>.conversation-view-container>.conversation-view-messages>.message.out>.bubble:after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  right: -10px;
  bottom: 0;
  -webkit-box-shadow: 0 4px 2px -2px rgba(0,0,0,0.24);
  box-shadow: 0 4px 2px -2px rgba(0,0,0,0.24);
  border-style: solid;
  border-width: 10px 0 0px 10px;
  border-color: transparent transparent transparent #c8e6c9;
}
.conversation-view.floating>.conversation-view-container>.conversation-view-messages>.message.out>img {
  float: right;
}
.conversation-view.floating>.conversation-view-input {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: 50px;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  overflow: hidden;
}
.conversation-view.floating>.conversation-view-input>input {
  height: 100%;
  width: 100%;
  border-radius: 0;
  border: none;
  outline: none;
}
.conversation-view.floating>.conversation-view-input>input:hover,
.conversation-view.floating>.conversation-view-input>input :focus,
.conversation-view.floating>.conversation-view-input>input :active {
  border: none;
  outline: none;
}
.conversation-view.floating>.conversation-view-input>.icons-sending {
  width: 50px;
  height: 50px;
  color: #616161;
  float: right;
  -moz-transform: translateX(0) translateY(-50px);
  -webkit-transform: translateX(0) translateY(-50px);
  -o-transform: translateX(0) translateY(-50px);
  -ms-transform: translateX(0) translateY(-50px);
  -webkit-transform: translateX(0) translateY(-50px);
  -moz-transform: translateX(0) translateY(-50px);
  -o-transform: translateX(0) translateY(-50px);
  -ms-transform: translateX(0) translateY(-50px);
  transform: translateX(0) translateY(-50px);
  -webkit-transition: transform 0.4s ease;
  -moz-transition: transform 0.4s ease;
  -ms-transition: transform 0.4s ease;
  -o-transition: transform 0.4s ease;
  -webkit-transition: -webkit-transform 0.4s ease;
  -moz-transition: -moz-transform 0.4s ease;
  -o-transition: -o-transform 0.4s ease;
  -ms-transition: -ms-transform 0.4s ease;
  transition: transform 0.4s ease;
}
.conversation-view.floating>.conversation-view-input>.icons-sending.sending {
  -moz-transform: translateX(0) translateY(0);
  -webkit-transform: translateX(0) translateY(0);
  -o-transform: translateX(0) translateY(0);
  -ms-transform: translateX(0) translateY(0);
  -webkit-transform: translateX(0) translateY(0);
  -moz-transform: translateX(0) translateY(0);
  -o-transform: translateX(0) translateY(0);
  -ms-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
}
.conversation-view.floating>.conversation-view-input>.icons-sending>i {
  display: block;
  position: relative;
  width: 100%;
  height: 50px;
  font-size: 1.6em;
  line-height: 50px;
  text-align: center;
}
.conversation-view.floating>.conversation-view-input>.zmdi.zmdi-mood {
  display: block;
  position: relative;
  width: 50px;
  height: 50px;
  font-size: 1.6em;
  line-height: 50px;
  color: #616161;
  text-align: center;
}
.hangouts-content {
  display: block;
  position: relative;
  width: 100%;
  min-height: 100%;
  background-color: #fff;
}
.conversation {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}
.conversation>.container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  position: relative;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  font-size: 1em;
  padding: 0.7em 1em;
  cursor: pointer;
  background-color: #fff;
  -webkit-transition: background-color 0.4s ease;
  -moz-transition: background-color 0.4s ease;
  -ms-transition: background-color 0.4s ease;
  -o-transition: background-color 0.4s ease;
  -webkit-transition: background-color 0.4s ease;
  -moz-transition: background-color 0.4s ease;
  -o-transition: background-color 0.4s ease;
  -ms-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
}
.conversation>.container:hover {
  background-color: #eaeaea;
}
.conversation>.container>.left {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.conversation-icon {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  margin-right: 0.5em;
  background-image: url("https://i.imgur.com/0pA4Loz.png");
  background-position: 0px 0px;
}
.conversation-content {
  display: block;
  position: relative;
  color: #727272;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
}
text-overflow ellipsis,
.conversation-content > .username {
  font-size: 0.95em;
}
.conversation-content > .last-message {
  font-size: 0.85em;
}
.conversation-content > * {
  margin: 0.2em 0em;
}
.conversation-time {
  font-size: 0.8em;
  color: #212121;
}
nav.hangouts-bottom-nav {
  display: block;
  position: relative;
  width: 100%;
  font-size: 1.6em;
  color: #727272;
  padding: 0;
  overflow: hidden;
}
nav.hangouts-bottom-nav .icon-container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  position: relative;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  cursor: pointer;
  float: left;
  clear: none;
  text-align: inherit;
  width: 33.33333333333333%;
  margin-left: 0%;
  margin-right: 0%;
  height: 50px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-color: #fff;
}
nav.hangouts-bottom-nav .icon-container::after {
  content: '';
  display: table;
  clear: both;
}
nav.hangouts-bottom-nav .icon-container:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0;
  bottom: -4px;
  background-color: #1ea260;
  -webkit-transition: bottom 0.2s ease;
  -moz-transition: bottom 0.2s ease;
  -ms-transition: bottom 0.2s ease;
  -o-transition: bottom 0.2s ease;
  -webkit-transition: bottom 0.2s ease;
  -moz-transition: bottom 0.2s ease;
  -o-transition: bottom 0.2s ease;
  -ms-transition: bottom 0.2s ease;
  transition: bottom 0.2s ease;
}
nav.hangouts-bottom-nav .icon-container.active {
  color: #1ea260;
}
nav.hangouts-bottom-nav .icon-container.active:after {
  bottom: 0;
}
button.hangouts-fab {
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: #1ea260;
  color: #fff;
  font-size: 1.5em;
  outline: none;
  right: 1em;
  bottom: 3em;
  padding: 0;
  -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
button.hangouts-fab:hover {
  color: #fff;
  background-color: #1ea260;
  font-size: 1.5em;
  line-height: normal;
}
button.hangouts-fab:active {
  -webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.waves-effect.waves-classic.waves-green .waves-ripple {
  background: rgba(30,162,96,0.4);
}
.waves-button,
.waves-button:hover,
.waves-button:visited,
.waves-button-input {
  line-height: normal !important;
}
.waves-circle {
  width: 1.6em;
  height: 1.6em;
  line-height: 1.6em;
}
.ui-resizable-handle {
  z-index: 999 !important;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
/* DEBUG
*, *:before, *:after
	outline 1px solid red
*/
/* ANIMATIONS */
@-moz-keyframes window-ripple {
  0% {
    width: 0;
    padding-top: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  70% {
    width: 500%;
    padding-top: 500%;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    width: 500%;
    padding-top: 500%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-webkit-keyframes window-ripple {
  0% {
    width: 0;
    padding-top: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  70% {
    width: 500%;
    padding-top: 500%;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    width: 500%;
    padding-top: 500%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-o-keyframes window-ripple {
  0% {
    width: 0;
    padding-top: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  70% {
    width: 500%;
    padding-top: 500%;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    width: 500%;
    padding-top: 500%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@keyframes window-ripple {
  0% {
    width: 0;
    padding-top: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  70% {
    width: 500%;
    padding-top: 500%;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    width: 500%;
    padding-top: 500%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-moz-keyframes md-ripple {
  from {
    width: 0%;
    height: 0;
    padding-top: 0;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  to {
    width: 200%;
    height: 0;
    padding-top: 200%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-webkit-keyframes md-ripple {
  from {
    width: 0%;
    height: 0;
    padding-top: 0;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  to {
    width: 200%;
    height: 0;
    padding-top: 200%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-o-keyframes md-ripple {
  from {
    width: 0%;
    height: 0;
    padding-top: 0;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  to {
    width: 200%;
    height: 0;
    padding-top: 200%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@keyframes md-ripple {
  from {
    width: 0%;
    height: 0;
    padding-top: 0;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  to {
    width: 200%;
    height: 0;
    padding-top: 200%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-moz-keyframes overlay-appear {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
  }
}
@-webkit-keyframes overlay-appear {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
  }
}
@-o-keyframes overlay-appear {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
  }
}
@keyframes overlay-appear {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
  }
}
JS
$(document).ready(function() {
		var acceptInput = true;

		/* CLASSES */
		var Images = new function() {
				var urls = {
						1: 'https://semantic-ui.com/images/avatar2/large/matthew.png',
						2: 'https://semantic-ui.com/images/avatar2/large/elyse.png',
						3: 'https://semantic-ui.com/images/avatar2/large/kristy.png',
						4: 'https://semantic-ui.com/images/avatar2/large/rachel.png',
						5: 'https://semantic-ui.com/images/avatar2/large/mark.png',
						6: 'https://semantic-ui.com/images/avatar2/large/lena.png',
						7: 'https://semantic-ui.com/images/avatar2/large/eve.png'
				};

				this.get = function(i) {
						return urls[i];
				}
		};

		var Storage = new function() {
				this.put = function(key, value) {
						if (typeof Storage !== "undefined") {
								localStorage.setItem(key, value);
						} else {
								console.warn('localStorage is not supported on your browser!');
								return false;
						}
				}

				this.get = function(key) {
						if (typeof Storage !== "undefined") {
								if (localStorage[key]) {
										return localStorage[key];
								} else {
										console.warn('The requested key "' + key + '" doesn\'t exist in localStorage!');
										return false;
								}
						} else {
								console.warn('localStorage is not supported on your browser!');
								return false;
						}
				}
		};

		var User = new function() {
				this.username = 'Schlipak';
				this.image = 1;
				this.imageURL = Images.get(this.image);

				this.setUsername = function(n) {
						this.username = n;
				}

				this.setImage = function(i) {
						this.image = i;
				}

				this.refreshFromStorage = function() {
						this.username = Storage.get('devwars2_username');
						if (!this.username || this.username == 'false') {
								this.username = '';
						}
						this.image = Storage.get('devwars2_image');
						this.imageURL = Images.get(this.image);
				}

				this.update = function() {
						$('.ls-image').attr('src', this.imageURL);
						$('.sidebar-user-image').css({
								backgroundImage: 'url(' + this.imageURL + ')'
						});

						$('.ls-username').val(this.username).html(this.username);
				}
		};

		var Login = new function() {
				this.container = $('.login-container');
				this.box = $('.login-box');
				this.imageSelector = $('.pp-select');
				this.signIn = $('.signin-confirm');
				this.usernameInput = $('.signin-username');

				this.getInputUsername = function() {
						return this.usernameInput.val();
				}

				this.onImageSelect = function(callback) {
						this.imageSelector.click(callback);
				}

				this.onSignIn = function(callback) {
						this.signIn.click(callback);
				}

				this.setUsernameError = function(b) {
						if (b) {
								this.usernameInput.css({
										borderBottom: ''
								});
						} else {
								this.usernameInput.css({
										borderBottom: '2px solid #F44336'
								});
						}
				}

				this.display = function(t) {
						this.box
								.removeClass('dismissing')
								.parent()
								.animate({
										opacity: 1
								}, t);
				}

				this.dismiss = function(t) {
						this.box
								.addClass('dismissing')
								.parent()
								.animate({
										opacity: 0
								}, t);
				}

				this.hide = function() {
						this.container.addClass('hidden');
				}

				this.show = function() {
						this.container.removeClass('hidden');
				}
		};

		var OS = new function() {
				this.taskbar = $('.os.taskbar');
				this.userLogin = $('.relogin');
				this.hangoutsIcon = $('.icon.hangouts');

				this.hideTaskbar = function() {
						this.taskbar.addClass('hidden');
				}

				this.showTaskbar = function() {
						this.taskbar.removeClass('hidden');
				}

				this.onUserLogin = function(callback) {
						this.userLogin.click(callback);
				}

				this.setHangoutsState = function(b) {
						if (b) {
								this.hangoutsIcon.addClass('opened');
						} else {
								this.hangoutsIcon.removeClass('opened');
						}
				}

				this.toggleHangoutsState = function() {
						this.setHangoutsState(!this.getHangoutsState());
				}

				this.getHangoutsState = function() {
						return this.hangoutsIcon.hasClass('opened');
				}
		};

		var Hangouts = new function() {
				this.acceptInput = true;

				this.container = $('section.hangouts-container');
				this.contents = $('.hangouts-global-contents');
				this.ripple = $('.ripple.window');

				this.hideContainer = function() {
						this.container.addClass('hidden');
				}

				this.showContainer = function() {
						this.container.removeClass('hidden');
				}

				this.setContainerVisible = function() {
						this.container.addClass('visible');
				}

				this.setContainerInvisible = function() {
						this.container.removeClass('visible');
				}

				this.showContents = function() {
						this.contents.addClass('visible');
				}

				this.hideContents = function() {
						this.contents.removeClass('visible');
				}

				this.activateRipple = function() {
						this.ripple.addClass('active');
				}

				this.deactivateRipple = function() {
						this.ripple.removeClass('active');
				}

				this.toggle = function() {
						if (!this.acceptInput) return;

						this.acceptInput = false;
						OS.toggleHangoutsState();

						if (OS.getHangoutsState()) {
								this.showContainer();
								this.activateRipple();

								setTimeout(function() {
										Hangouts.setContainerVisible();
										Hangouts.showContents();

										Hangouts.acceptInput = true;
								}, 400);
						} else {
								this.deactivateRipple();
								this.setContainerInvisible();
								this.hideContents();

								setTimeout(function() {
										Hangouts.hideContainer();
										Hangouts.acceptInput = true;
								}, 400);
						}

				}

				this.close = function() {
						OS.setHangoutsState(false);
						this.deactivateRipple();
						this.setContainerInvisible();
						this.hideContents();

						setTimeout(function() {
								Hangouts.hideContainer();
						}, 400);
				}
		};

		/* SCRIPT */

		(function() {
				User.refreshFromStorage();
				User.update();
		})();

		Login.onImageSelect(function() {
				var imgid = $(this).attr('data-imageid');
				var imgurl = Images.get(imgid);
				Storage.put('devwars2_image', imgid);

				User.refreshFromStorage();
				User.update();
		});

		Login.onSignIn(function() {
				var username = Login.getInputUsername();
				Login.setUsernameError(username.length != 0);

				if (username.length != 0) {
						Storage.put('devwars2_username', username);
						User.refreshFromStorage();
						User.update();

						Login.dismiss(600);

						OS.showTaskbar();

						setTimeout(function() {
								Login.hide();
						}, 600);
				}
		});

		OS.onUserLogin(function() {
				Login.show();
				Login.display(600);

				Hangouts.close();

				OS.hideTaskbar();
		});

		$('.icon.hangouts').click(function() {
				Hangouts.toggle();
		});

		$('.zmdi.zmdi-close.button').click(function() {
				Hangouts.toggle();
		});

		$('.icon-container').click(function(e) {
				$('.icon-container').removeClass('active');
				$(this).addClass('active');
		});

		$('.hangouts-top-nav>i').click(function(e) {
				if ($(this).hasClass('zmdi-menu')) {
						$('.hangouts-sidebar').toggleClass('open');
						if ($('.hangouts-sidebar').hasClass('open')) {
								$('.hangouts-sidebar')
										.append('
') .children('.hangouts-sidebar-overlay') .click(function(e) { $('.hangouts-sidebar').removeClass('open'); $(e.target).removeClass('open'); setTimeout(function() { $(e.target).remove(); }, 400); }); } } else { $('.conversation-view.floating').removeClass('open'); $('.hangouts-top-nav>i') .removeClass('zmdi-arrow-left') .addClass('zmdi-menu'); Waves.attach('.hangouts-top-nav', 'waves-effect waves-classic waves-light'); Waves.ripple('.hangouts-top-nav'); var username = Storage.get('devwars2_username'); if (username) { username = 'Schlipak'; } $('.hangouts-top-nav').find('h4').html(username); setTimeout(function() { $('.hangouts-top-nav') .removeClass('waves-effect waves-classic waves-light') }, 700); } }); function evalWindowPosition() { return { left: $('.icon.hangouts').offset().left + $('.icon.hangouts').width() + 20, top: $('.icon.hangouts').offset().top - $('section.hangouts-container').height() - $('.os.taskbar').height() - 40 }; } $('section.hangouts-container').draggable({ handle: '.window-control', opacity: 0.5, scroll: false }).resizable({ aspectRatio: false, autoHide: false, containment: "document", handles: "n, s, e, w, ne, nw, se, sw", alsoResize: '.hangouts-content-container', minHeight: 350, minWidth: 350 }); $('.window-control').mousedown(function() { $(this).css({ 'cursor': 'grabbing' }); }).mouseup(function() { $(this).css({ 'cursor': 'default' }); }); $('.conversation[id^=msg_]').click(function() { var el = $(this); var id = el.attr('id').split('_')[1]; $('.conversation-view.floating').addClass('open'); $('.hangouts-top-nav>i') .removeClass('zmdi-menu') .addClass('zmdi-arrow-left'); Waves.attach('.hangouts-top-nav', 'waves-effect waves-classic waves-light'); Waves.ripple('.hangouts-top-nav'); $('.hangouts-top-nav') .find('h4') .html($(this).find('.username').html()); setTimeout(function() { $('.hangouts-top-nav') .removeClass('waves-effect waves-classic waves-light') }, 700); }); $('#compose').keyup(function() { var txt = $(this).val(); if (txt.length > 0) { $('.icons-sending').addClass('sending'); } else { $('.icons-sending').removeClass('sending'); } }).keydown(function(e) { if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey) { sendMessage(); } }); function sendMessage() { var compose = $('#compose'); var last = $('.conversation-view-messages') .find('.message') .last(); var txt = compose.val(); if (last.hasClass('out')) { var msg = $('') .addClass('text') .html(txt); last.find('.bubble .text') .last() .after(msg); } else { var msg = $('
'); msg.addClass('message out hidden') .append('
') .children('div') .addClass('bubble') .append('') .children('span') .addClass('text') .html(txt) .end() .append('') .children('span') .eq(1) .addClass('time') .html('Now') .end() .end() .end() .append('') .children('img') .addClass('ls-image') .attr('src', Images.get(1)); var imgid = Storage.get('devwars2_image'); if (imgid) { var imgurl = Images.get(imgid); msg.children('img').attr('src', imgurl); } $('.conversation-view-messages').append(msg); setTimeout(function() { $('.conversation-view-messages') .children('.message.out') .last() .removeClass('hidden'); }, 10); } var msgh = $('.conversation-view-messages').height(); var containerh = $('.conversation-view-container').height(); if (msgh > containerh) { $('.conversation-view-container').stop().animate({ scrollTop: (msgh - containerh) }, 400); } compose.val('').trigger('keyup'); } $('.icons-sending .zmdi-mail-sending').click(function() { sendMessage(); }); (function($) { var pos = evalWindowPosition(); $('section.hangouts-container').css({ top: pos.top, left: pos.left }); })(jQuery); Waves.init({ duration: 600, delay: 0 }); Waves.attach( '.waves-effect' ); });
Host Instantly Drag and Drop Website Builder

 

Description

Pen based on PapyrOS for the DevWars weekly challenge 2.
Term
Wed, 11/29/2017 - 11:25

Related Codes

Pen ID
Pen ID
Pen ID