nitweb/ng: enhance search results display

[nit.git] / share / nitweb / stylesheets / nitweb.css

diff --git a/share/nitweb/stylesheets/nitweb.css b/share/nitweb/stylesheets/nitweb.css
index 2baad72..23facdf 100644 (file)
--- a/share/nitweb/stylesheets/nitweb.css
+++ b/share/nitweb/stylesheets/nitweb.css
@@ -29,28 +29,66 @@ a {
        border: 1px solid #1E9431;
 }
 
-.card, .card-body { overflow: hidden; }
-
 .card-heading {
     margin-top: 0;
     margin-bottom: 5px;
 }
 
 .card {
+       display: table;
+       width: 100%;
        background: #fff;
        border: 1px solid #ccc;
        margin-top: 10px;
        box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
 }
 
-.card-body {
-    padding: 15px;
-    width: 10000px;
+.card-body, .card-left, .card-right {
+       display: table-cell;
+       padding: 15px;
 }
 
 .card-body {
-    display: table-cell;
-    vertical-align: top;
+       padding: 15px 0;
+       width: 100%
+}
+
+.card-body:first-child {
+       padding-left: 15px;
+}
+
+.card-body:last-child {
+       padding-right: 15px;
+}
+
+.card-list {
+       margin-top: 10px;
+}
+
+.card-list > .card:first-child {
+       border-top: 1px solid #ccc;
+}
+
+.card-list > .card {
+       margin-top: 0;
+       border-top: none;
+}
+
+.card-title {
+    margin-top: 0;
+}
+
+/* ui */
+
+.btn-bar { margin-top: -5px; float: right }
+.btn-bar .btn { padding: 5px 10px; }
+
+entity-list .btn-filter {
+       visibility: hidden;
+}
+
+entity-list:hover .btn-filter {
+       visibility: visible;
 }
 
 /* doc */
@@ -90,6 +128,140 @@ a {
     background-color: #ff9c0f;
 }
 
+/* forms */
+
+.has-icon {
+    position: relative;
+}
+
+.has-icon .form-control {
+       padding-left: 35px;
+}
+
+.form-control-icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    display: block;
+    width: 34px;
+    height: 34px;
+    line-height: 34px;
+    text-align: center;
+    pointer-events: none;
+}
+
+/* search */
+
+.search-input {
+       width: 100%;
+}
+
+.search-results {
+       position: absolute;
+       margin-top: 2px;
+       right: 15px;
+       left: 15px;
+}
+
+.search-results .card.active {
+       background: #eee;
+       border-color: #eee;
+}
+
+.card-search {
+       cursor: pointer;
+}
+
+/* loading bar */
+
+#loading-bar .bar {
+       background: #FF8100;
+}
+
+/* navs */
+
+.nav-tabs li { cursor: pointer; }
+
+.navbar-fixed-top {
+       background-color: #1E9431;
+       box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
+}
+
+.navbar-fixed-top .form-control:hover, .navbar-fixed-top .form-control:focus {
+       background: rgba(255, 255, 255, 0.2);
+}
+
+.navbar-fixed-top .form-control {
+       background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: #fff;
+    box-shadow: none;
+}
+
+.navbar-fixed-top .form-control-icon {
+       color: #fff;
+}
+
+.navbar-fixed-top *::-webkit-input-placeholder {
+    color: #fff;
+}
+.navbar-fixed-top *:-moz-placeholder {
+    /* FF 4-18 */
+    color: #fff;
+}
+.navbar-fixed-top *::-moz-placeholder {
+    /* FF 19+ */
+    color: #fff;
+}
+.navbar-fixed-top *:-ms-input-placeholder {
+    /* IE 10+ */
+    color: #fff;
+}
+
+.navbar-fixed-top .form-group {
+       margin-top: 8px;
+       margin-bottom: 0px;
+}
+
+/*
+ * Ratings
+ */
+
+.card .stars {
+       visibility: hidden
+}
+
+.card:hover .stars {
+       visibility: visible
+}
+
+.star {
+       color: grey;
+       cursor: pointer;
+}
+
+.star:hover, .star.active:hover {
+       color: #FF8100
+}
+
+.star.active {
+       color: #FFC000
+}
+
+/*
+ * Users
+ */
+
+.avatar {
+       border-radius: 2px;
+}
+
+.avatar-icon {
+       width: 18px;
+       height: 18px;
+}
+
 /*
  * Code Highlighting
  */