utils/test/vnfcatalogue/VNF_Catalogue/public/stylesheets/style.css

   1 /*******************************************************************************
   2  * Copyright (c) 2017 Kumar Rishabh and others.
   3  *
   4  * All rights reserved. This program and the accompanying materials
   5  * are made available under the terms of the Apache License, Version 2.0
   6  * which accompanies this distribution, and is available at
   7  * http://www.apache.org/licenses/LICENSE-2.0
   8  *******************************************************************************/
   9
  10 @import url('https://fonts.googleapis.com/css?family=Muli:300,400,600,700,800');
  11 *
  12 {
  13   color: #333333;
  14   font-family: 'Muli', sans-serif;
  15 }
  16 *:focus
  17 {
  18     outline: none;
  19 }
  20 html,
  21 body
  22 {
  23   margin: 0;
  24   padding: 0;
  25   background: #ffffff;
  26   font-family: 'Muli', sans-serif;
  27 }
  28 header
  29 {
  30   padding: 10px 35px 0 0px;
  31 }
  32 header ul
  33 {
  34   list-style: none;
  35   display: inline-block;
  36 }
  37 header ul li
  38 {
  39   display: inline-block;
  40 }
  41 header .logo
  42 {
  43   background: url(../images/logo.png) no-repeat;
  44   background-size: cover;
  45
  46 }
  47 header .brand-logo-extends
  48 {
  49   background: url(../images/logo.png) no-repeat;
  50   background-size: cover;
  51   width: 154px;
  52   height: 34px;
  53   margin-top: 11%;
  54   margin-right: 0%;
  55   padding: 0;
  56   position: relative !important;
  57   /*margin-right: 20px;
  58   margin-left: 0;
  59   float: left;*/
  60   /*display: inline-block;
  61   */
  62 }
  63
  64 nav
  65 {
  66   height: 10px;
  67 }
  68
  69 header ul li.links
  70 {
  71   margin: 7px 10px 0 0;
  72 }
  73 header ul li > a,
  74 .content ul.most-menu li.items a
  75 {
  76   color: #333333;
  77   font-weight: 800;
  78   font-size: 14px;
  79   letter-spacing: 0.6px;
  80   font-family: 'Muli', sans-serif;
  81 }
  82 header ul.navigation-right
  83 {
  84   float: right;
  85   padding-top: 8px;
  86 }
  87 header li.signup > a
  88 {
  89   border: 2px solid #333333;
  90   border-radius: 4px;
  91   font-size: 14px;
  92   font-weigt: 700;
  93   padding: 2px 10px;
  94 }
  95 header li.signin > a
  96 {
  97   border-bottom: 2px solid #333333;
  98   font-size: 13px;
  99   font-weight: 700;
 100   padding: 0px 2px;
 101 }
 102 header li.option
 103 {
 104   font-weight: 800;
 105   padding: 0 10px;
 106 }
 107 header ul li > a:hover,
 108 header li.signin > a:hover,
 109 header li.signup > a:hover,
 110 header ul li > a:focus,
 111 header li.signin > a:focus,
 112 header li.signup > a:focus,
 113 .content ul.most-menu li a:hover,
 114 .content ul.most-menu li a:focus
 115 {
 116   text-decoration: none;
 117   cursor: pointer;
 118   color: #333333;
 119 }
 120 header li.signup > a:hover
 121 {
 122   background: #333333;
 123   color: #ffffff;
 124 }
 125 .search-box
 126 {
 127   text-align: center;
 128   padding: 100px 0;
 129 }
 130 .search-box h1
 131 {
 132   font-size: 30px;
 133   letter-spacing: 2px;
 134   color: #333333;
 135   font-weight: 600;
 136 }
 137 form.search-form
 138 {
 139   padding: 10px 20px;
 140 }
 141 form.search-form input.search-input
 142 {
 143   font-weight: 400;
 144   margin: 30px 0;
 145   height: 80px;
 146   padding: 10px 30px;
 147   max-width: 800px;
 148   width: 70%;
 149   border-radius: 5px;
 150   border: 2px solid #333333;
 151   box-shadow: 0 0 15px 1px rgba(0,0,0,0.50);
 152   color: #333333;
 153   font-size: 22px;
 154 }
 155 input.search-input-rest
 156 {
 157   font-weight: 400;
 158   margin: 0px 0;
 159   height: 30px;
 160   padding: 10px 30px;
 161     min-width: 90%;
 162     max-width: 90%;
 163   /*max-width: 500px;
 164   */
 165   border-radius: 5px;
 166   border: 2px solid #333333;
 167   box-shadow: 0 0 15px 1px rgba(0,0,0,0.50);
 168   color: #333333;
 169   font-size: 22px;
 170 }
 171
 172
 173 form.search-form button.search-button
 174 {
 175   padding: 18px 35px;
 176   background: #FFF572;
 177   border: 0;
 178   box-shadow: 0 0 15px 1px #958F40;
 179   border-radius: 1px;
 180   font-size: 20px;
 181   color: #393E41;
 182   letter-spacing: 1px;
 183   border-radius: 5px;
 184   font-weight: 600;
 185 }
 186 form.search-form input:focus
 187 {
 188   outline: none;
 189 }
 190 form.search-form input::-webkit-input-placeholder
 191 {
 192   font-weight: 400;
 193   letter-spacing: 1px;
 194     color: #333333;
 195 }
 196 form.search-form input::-moz-placeholder
 197 {
 198   font-weight: 400;
 199   letter-spacing: 1px;
 200     color: #333333;
 201 }
 202 form.search-form input:-moz-placeholder
 203 {
 204   font-weight: 400;
 205   letter-spacing: 5px;
 206     color: #333333;
 207 }
 208 form.search-form input:-ms-input-placeholder
 209 {
 210   font-weight: 400;
 211   letter-spacing: 1px;
 212     color: #333333;
 213 }
 214 .content
 215 {
 216   height: 500px;
 217   background: #f9f9f9;
 218   padding: 10px 0;
 219 }
 220 .content ul.most-menu
 221 {
 222   list-style: none;
 223   text-align: center;
 224   padding-bottom: 10px;
 225 }
 226 .content ul.most-menu li.items
 227 {
 228   display: inline-block;
 229   margin-right: 5px;
 230   padding: 15px 25px;
 231 }
 232 .content ul.most-menu li.active
 233 {
 234   /*background: #FFF572;*/
 235 }
 236 .content-box
 237 {
 238   overflow: hidden;
 239   padding: 20px 0 50px 0;
 240   display: flex;
 241   justify-content: center;
 242   background: #FFFFFF;
 243   box-shadow: 0 2px 3px 0 rgba(0,0,0,0.50);
 244   border-bottom: 2px solid #8B19A2;
 245   margin-bottom: 30px;
 246 }
 247 .content-data
 248 {
 249   align-self: center;
 250 }
 251 .content-data h1.content-title
 252 {
 253   font-size: 25px;
 254   color: #000000;
 255   letter-spacing: 1.2px;
 256 }
 257 .content-data .box
 258 {
 259   padding: 10px 0;
 260   height: 90px;
 261   text-align: center;
 262   border: 2px solid #4D4D4D;
 263   border-radius: 2px;
 264 }
 265 .content-data .commit-icon
 266 {
 267   width: 23px;
 268   height: 16px;
 269 }
 270 .content-data .box h3.commits
 271 {
 272   text-align: center;
 273   font-size: 12px;
 274   color: #333333;
 275   letter-spacing: 0.03px;
 276 }
 277 .content-height-overwrite
 278 {
 279   height: 110px;
 280 }
 281 .float-center-magic
 282 {
 283   float: right;
 284   position: relative;
 285   left: -30%;
 286 }
 287 nav ul li:hover, nav ul li.active, nav ul li a.active, nav ul li a:hover {
 288   background-color: rgb(255,245,114);
 289 }
 290 a:hover, a.active {
 291   background-color: rgb(255,245,114);
 292 }
 293 footer
 294 {
 295   font-size: 12px;
 296   font-weight: 800;
 297   color: #333333;
 298   text-align: center;
 299   padding: 20px;
 300 }
 301 .space-10
 302 {
 303   height: 10px;
 304 }
 305 .space-30
 306 {
 307   height: 100px;
 308 }
 309 input[type="text"]:focus:not([readonly]) {
 310   transition: all 0s !important;
 311   border-radius: 5px;
 312   border: 2px solid #333333;
 313   box-shadow: 0 0 15px 1px rgba(0,0,0,0.50);
 314   color: #333333;
 315 }
 316 .gray {
 317   background: rgb(249,249,249);
 318 }