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
 156 form.search-form button.search-button
 157 {
 158   padding: 18px 35px;
 159   background: #FFF572;
 160   border: 0;
 161   box-shadow: 0 0 15px 1px #958F40;
 162   border-radius: 1px;
 163   font-size: 20px;
 164   color: #393E41;
 165   letter-spacing: 1px;
 166   border-radius: 5px;
 167   font-weight: 600;
 168 }
 169 form.search-form input:focus
 170 {
 171   outline: none;
 172 }
 173 form.search-form input::-webkit-input-placeholder
 174 {
 175   font-weight: 400;
 176   letter-spacing: 1px;
 177     color: #333333;
 178 }
 179 form.search-form input::-moz-placeholder
 180 {
 181   font-weight: 400;
 182   letter-spacing: 1px;
 183     color: #333333;
 184 }
 185 form.search-form input:-moz-placeholder
 186 {
 187   font-weight: 400;
 188   letter-spacing: 5px;
 189     color: #333333;
 190 }
 191 form.search-form input:-ms-input-placeholder
 192 {
 193   font-weight: 400;
 194   letter-spacing: 1px;
 195     color: #333333;
 196 }
 197 .content
 198 {
 199   height: 500px;
 200   background: #f9f9f9;
 201   padding: 10px 0;
 202 }
 203 .content ul.most-menu
 204 {
 205   list-style: none;
 206   text-align: center;
 207   padding-bottom: 10px;
 208 }
 209 .content ul.most-menu li.items
 210 {
 211   display: inline-block;
 212   margin-right: 5px;
 213   padding: 15px 25px;
 214 }
 215 .content ul.most-menu li.active
 216 {
 217   /*background: #FFF572;*/
 218 }
 219 .content-box
 220 {
 221   overflow: hidden;
 222   padding: 20px 0 50px 0;
 223   display: flex;
 224   justify-content: center;
 225   background: #FFFFFF;
 226   box-shadow: 0 2px 3px 0 rgba(0,0,0,0.50);
 227   border-bottom: 2px solid #8B19A2;
 228   margin-bottom: 30px;
 229 }
 230 .content-data
 231 {
 232   align-self: center;
 233 }
 234 .content-data h1.content-title
 235 {
 236   font-size: 25px;
 237   color: #000000;
 238   letter-spacing: 1.2px;
 239 }
 240 .content-data .box
 241 {
 242   padding: 10px 0;
 243   height: 90px;
 244   text-align: center;
 245   border: 2px solid #4D4D4D;
 246   border-radius: 2px;
 247 }
 248 .content-data .commit-icon
 249 {
 250   width: 23px;
 251   height: 16px;
 252 }
 253 .content-data .box h3.commits
 254 {
 255   text-align: center;
 256   font-size: 12px;
 257   color: #333333;
 258   letter-spacing: 0.03px;
 259 }
 260 .content-height-overwrite
 261 {
 262   height: 110px;
 263 }
 264 .float-center-magic
 265 {
 266   float: right;
 267   position: relative;
 268   left: -30%;
 269 }
 270 nav ul li:hover, nav ul li.active, nav ul li a.active, nav ul li a:hover {
 271   background-color: rgb(255,245,114);
 272 }
 273 a:hover, a.active {
 274   background-color: rgb(255,245,114);
 275 }
 276 footer
 277 {
 278   font-size: 12px;
 279   font-weight: 800;
 280   color: #333333;
 281   text-align: center;
 282   padding: 20px;
 283 }
 284 .space-10
 285 {
 286   height: 10px;
 287 }
 288 .space-30
 289 {
 290   height: 100px;
 291 }
 292 input[type="search"]:focus:not([readonly]) {
 293   transition: all 0s !important;
 294   border-radius: 5px;
 295   border: 2px solid #333333;
 296   box-shadow: 0 0 15px 1px rgba(0,0,0,0.50);
 297   color: #333333;
 298 }
 299 .gray {
 300   background: rgb(249,249,249);
 301 }