From 47c0becd00df3b451ae4cc57cbdb9c76c3fe8dc8 Mon Sep 17 00:00:00 2001
From: skullbocks <dgikille@gmail.com>
Date: Mon, 21 Jul 2014 17:07:14 +0200
Subject: [PATCH] [WebUI #7] Splitted css file

---
 assets/public/css/isotope.css    |  52 +++++++
 assets/public/css/login.css      | 133 ++++++++++++++++
 assets/public/css/style.css      | 259 +++++++++++--------------------
 assets/public/css/user-panel.css |  22 +++
 4 files changed, 300 insertions(+), 166 deletions(-)
 create mode 100644 assets/public/css/isotope.css
 create mode 100644 assets/public/css/login.css
 create mode 100644 assets/public/css/user-panel.css

diff --git a/assets/public/css/isotope.css b/assets/public/css/isotope.css
new file mode 100644
index 0000000..163f28e
--- /dev/null
+++ b/assets/public/css/isotope.css
@@ -0,0 +1,52 @@
+#iso {
+    margin: 0 auto;
+    width: 100%;
+}
+
+/* Browser Support of ':first-of-type' pseudo-class
+Chrome     Safari     Firefox  Opera     IE     Android   iOS
+Works      3.2+      Works       9.5+     9+      Works      Works
+*/
+#iso .row:first-of-type {
+  margin: 0;
+}
+
+.post {
+    margin: 10px 0;
+    max-width: 100%;
+    padding: 0;
+}
+
+.post .content {
+    padding: 20px;
+}
+
+/*
+* PAGINATION
+*/
+.pagination {
+    display: none;
+    visibility: hidden;
+}
+
+/*
+* MEDIA QUERIES
+*/
+
+@media (min-width: 768px) and (max-width: 980px) {
+  #iso .col-md-3, #iso .col-lg-3 {
+    width: 300px;
+  }
+}
+
+@media (min-width: 980px) and (max-width: 1300px) {
+  #iso .col-md-3, #iso .col-lg-3 {
+    width: 350px;
+  }
+}
+
+@media (min-width: 1300px) {
+  #iso .col-md-3, #iso .col-lg-3 {
+    width: 400px;
+  }
+}
\ No newline at end of file
diff --git a/assets/public/css/login.css b/assets/public/css/login.css
new file mode 100644
index 0000000..89697bf
--- /dev/null
+++ b/assets/public/css/login.css
@@ -0,0 +1,133 @@
+/*
+  Custom login Style
+*/
+.login-container{
+    position: relative;
+    width: 300px;
+    margin: 80px auto;
+    padding: 20px 40px 40px;
+    text-align: center;
+    background: #fff;
+    border: 1px solid #ccc;
+}
+
+#output{
+    position: absolute;
+    width: 300px;
+    top: -75px;
+    left: 0;
+    color: #fff;
+}
+
+#output.alert-success{
+    background: rgb(25, 204, 25);
+}
+
+#output.alert-danger{
+    background: rgb(228, 105, 105);
+}
+
+
+.login-container::before,.login-container::after{
+    content: "";
+    position: absolute;
+    width: 100%;height: 100%;
+    top: 3.5px;left: 0;
+    background: #fff;
+    z-index: -1;
+    -webkit-transform: rotateZ(4deg);
+    -moz-transform: rotateZ(4deg);
+    -ms-transform: rotateZ(4deg);
+    border: 1px solid #ccc;
+
+}
+
+.login-container::after{
+    top: 5px;
+    z-index: -2;
+    -webkit-transform: rotateZ(-2deg);
+     -moz-transform: rotateZ(-2deg);
+      -ms-transform: rotateZ(-2deg);
+
+}
+
+.avatar{
+    width: 100px;height: 100px;
+    margin: 10px auto 30px;
+    border-radius: 100%;
+    border: 2px solid #aaa;
+    background-size: cover;
+}
+
+.form-box input{
+    width: 100%;
+    padding: 10px;
+    text-align: center;
+    height:40px;
+    border: 1px solid #ccc;;
+    background: #fafafa;
+    transition:0.2s ease-in-out;
+
+}
+
+.form-box input:focus{
+    outline: 0;
+    background: #eee;
+}
+
+.form-box input[type="text"]{
+    border-radius: 5px 5px 0 0;
+    text-transform: lowercase;
+}
+
+.form-box input[type="password"]{
+    border-radius: 0 0 5px 5px;
+    border-top: 0;
+}
+
+.form-box button.login{
+    margin-top:15px;
+    padding: 10px 20px;
+}
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+@-webkit-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    -ms-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInUp {
+  -webkit-animation-name: fadeInUp;
+  animation-name: fadeInUp;
+}
\ No newline at end of file
diff --git a/assets/public/css/style.css b/assets/public/css/style.css
index 61b1b7e..4eb161b 100644
--- a/assets/public/css/style.css
+++ b/assets/public/css/style.css
@@ -1,209 +1,136 @@
-#iso {
-    margin: 0 auto;
-    width: 100%;
-}
-
-/* Browser Support of ':first-of-type' pseudo-class
-Chrome     Safari     Firefox  Opera     IE     Android   iOS
-Works      3.2+      Works       9.5+     9+      Works      Works
-*/
-#iso .row:first-of-type {
-  margin: 0;
-}
-
-.post {
-    margin: 10px 0;
-    max-width: 100%;
-    padding: 0;
-}
-
-.post .content {
-    padding: 20px;
-}
-
 /*
-* PAGINATION
+  Global css style
 */
-.pagination {
-    display: none;
-    visibility: hidden;
-}
 
-/*
-* MEDIA QUERIES
-*/
+.caption> .container{
+  position:absolute;
+  bottom:0;
 
-@media (min-width: 768px) and (max-width: 980px) {
-  #iso .col-md-3, #iso .col-lg-3 {
-    width: 300px;
-  }
 }
 
-@media (min-width: 980px) and (max-width: 1300px) {
-  #iso .col-md-3, #iso .col-lg-3 {
-    width: 350px;
-  }
+.left-display{
+  position:absolute;left:0;
 }
-
-@media (min-width: 1300px) {
-  #iso .col-md-3, #iso .col-lg-3 {
-    width: 400px;
-  }
+.right-display{
+  position:absolute;right:0;
 }
 
-/*
-  Custom login Style
-*/
-.login-container{
-    position: relative;
-    width: 300px;
-    margin: 80px auto;
-    padding: 20px 40px 40px;
-    text-align: center;
-    background: #fff;
-    border: 1px solid #ccc;
+.tile{
+  margin:0;
+  width:260px; /* XXX: As image dimensions */
 }
-
-#output{
-    position: absolute;
-    width: 300px;
-    top: -75px;
-    left: 0;
-    color: #fff;
-}
-
-#output.alert-success{
-    background: rgb(25, 204, 25);
-}
-
-#output.alert-danger{
-    background: rgb(228, 105, 105);
+.caption {
+    position:absolute;
+    top:0;
+    left:0;
+    background:  rgba(0,0,0,0.8);
+    width:260px; /* XXX: As image dimensions */
+    height:100%;
+    display: none;
+    text-align:center;
+    color:#fff !important;
+    z-index:2;
 }
 
 
-.login-container::before,.login-container::after{
-    content: "";
-    position: absolute;
-    width: 100%;height: 100%;
-    top: 3.5px;left: 0;
-    background: #fff;
-    z-index: -1;
-    -webkit-transform: rotateZ(4deg);
-    -moz-transform: rotateZ(4deg);
-    -ms-transform: rotateZ(4deg);
-    border: 1px solid #ccc;
+.tile_detail,.thumbnail{
+text-overflow: ellipsis;
+overflow: hidden;
+position:relative;
 
 }
 
-.login-container::after{
-    top: 5px;
-    z-index: -2;
-    -webkit-transform: rotateZ(-2deg);
-     -moz-transform: rotateZ(-2deg);
-      -ms-transform: rotateZ(-2deg);
-
+.banner-footer{
+  text-align: center;
 }
 
-.avatar{
-    width: 100px;height: 100px;
-    margin: 10px auto 30px;
-    border-radius: 100%;
-    border: 2px solid #aaa;
-    background-size: cover;
+.tile_detail > .col-lg-12,.col-md-12,.col-xs-12 {
+padding-left: 1%;
+padding-right: 3%;
 }
 
-.form-box input{
-    width: 100%;
-    padding: 10px;
-    text-align: center;
-    height:40px;
-    border: 1px solid #ccc;;
-    background: #fafafa;
-    transition:0.2s ease-in-out;
-
+.rooms-menu{
+  overflow-y:auto;
+  overflow-x:hidden;
+  width:100%;
+  height: 500px;
 }
 
-.form-box input:focus{
-    outline: 0;
-    background: #eee;
+.wrap-word{
+  overflow: hidden; /* "overflow" value must be different from "visible" */
+  text-overflow: ellipsis;
 }
 
-.form-box input[type="text"]{
-    border-radius: 5px 5px 0 0;
-    text-transform: lowercase;
+.img-wrap {
+  height: 140px;
+  min-width: 100px;
+  display: block;
+  float: left;
+  list-style: none;
+  margin: 0 5px 5px 0;
+  background-color: black;
+  background-position: center center;
+  background-repeat: no-repeat;
 }
 
-.form-box input[type="password"]{
-    border-radius: 0 0 5px 5px;
-    border-top: 0;
+.is-loading {
+  background-color: black;
+  background-image: url('img/loading.gif');
 }
 
-.form-box button.login{
-    margin-top:15px;
-    padding: 10px 20px;
+.is-broken {
+  background-image: url('img/broken.png');
+  background-color: #be3730;
 }
 
-.animated {
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
+.is-loading img,
+.is-broken img {
+  opacity: 0;
 }
 
-@-webkit-keyframes fadeInUp {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateY(20px);
-    transform: translateY(20px);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translateY(0);
-    transform: translateY(0);
-  }
+.is-hidden{
+    display:none;
 }
 
-@keyframes fadeInUp {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateY(20px);
-    -ms-transform: translateY(20px);
-    transform: translateY(20px);
-  }
 
-  100% {
-    opacity: 1;
-    -webkit-transform: translateY(0);
-    -ms-transform: translateY(0);
-    transform: translateY(0);
-  }
+hr.message-inner-separator
+{
+    clear: both;
+    margin-top: 10px;
+    margin-bottom: 13px;
+    border: 0;
+    height: 1px;
+    background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0));
+    background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
+    background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
+    background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
 }
 
-.fadeInUp {
-  -webkit-animation-name: fadeInUp;
-  animation-name: fadeInUp;
+.panel-info{
+  border-color:#8c5b5c;
 }
 
-/*
-  User Panel
-*/
-
-.navbar-login
-{
-    width: 305px;
-    padding: 10px;
-    padding-bottom: 0px;
+.panel-heading{
+  border-color:#8c5b5c;
+  background-color: #d690a6;
+  color: #8c5b5c;
 }
 
-.navbar-login-session
-{
-    padding: 10px;
-    padding-bottom: 0px;
-    padding-top: 0px;
+.panel-info>.panel-heading{
+  border-color:#8c5b5c;
+  background-color: #d690a6;
+  color: #8c5b5c;
 }
 
-.icon-size
-{
-    font-size: 87px;
-}
\ No newline at end of file
+/* Comments */
+
+.widget .panel-body { padding:0px; }
+.widget .list-group { margin-bottom: 0; }
+.widget .panel-title { display:inline }
+.widget .label-info { float: right; }
+.widget li.list-group-item {border-radius: 0;border: 0;border-top: 1px solid #ddd;}
+.widget li.list-group-item:hover { background-color: rgba(86,61,124,.1); }
+.widget .mic-info { color: #666666;font-size: 11px; }
+.widget .action { margin-top:5px; }
+.widget .comment-text { font-size: 12px; }
+.widget .btn-block { border-top-left-radius:0px;border-top-right-radius:0px; }
\ No newline at end of file
diff --git a/assets/public/css/user-panel.css b/assets/public/css/user-panel.css
new file mode 100644
index 0000000..b97324a
--- /dev/null
+++ b/assets/public/css/user-panel.css
@@ -0,0 +1,22 @@
+/*
+  User Panel
+*/
+
+.navbar-login
+{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+
+.navbar-login-session
+{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+
+.icon-size
+{
+    font-size: 87px;
+}
\ No newline at end of file