github.com/olivere/camlistore@v0.0.0-20140121221811-1b7ac2da0199/server/camlistored/ui/nav.css (about)

     1  /*
     2  Copyright 2013 The Camlistore Authors.
     3  
     4  Licensed under the Apache License, Version 2.0 (the "License");
     5  you may not use this file except in compliance with the License.
     6  You may obtain a copy of the License at
     7  
     8  	http://www.apache.org/licenses/LICENSE-2.0
     9  
    10  Unless required by applicable law or agreed to in writing, software
    11  distributed under the License is distributed on an "AS IS" BASIS,
    12  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13  See the License for the specific language governing permissions and
    14  limitations under the License.
    15  */
    16  
    17  .cam-nav {
    18  	position: fixed;
    19  	left: 0;
    20  	top: 0;
    21  	height: 100%;
    22  	background: rgb(51, 51, 51);
    23  	font-family: 'Open Sans', sans-serif;
    24  	width: 275px;
    25  	box-shadow: 0.1em 0 1em 0.3em rgba(0, 0, 0, 0.25);
    26  	transition: width 75ms ease-out;
    27  	overflow: hidden;
    28  }
    29  
    30  .cam-nav.cam-nav-collapsed {
    31  	width: 36px;
    32  }
    33  
    34  .cam-nav>.cam-nav-close {
    35  	cursor: pointer;
    36  	height: 34px;
    37  	opacity: 0.6;
    38  	padding: 9px;
    39  	position: absolute;
    40  	right: 0;
    41  	top: 3px;
    42  	width: 34px;
    43  	z-index: 1;
    44  }
    45  .cam-nav>.cam-nav-close:hover {
    46  	opacity: 0.9;
    47  }
    48  .cam-nav.cam-nav-collapsed>.cam-nav-close {
    49  	opacity: 0;
    50  }
    51  
    52  .cam-nav-item {
    53  	background-color: transparent;
    54  	background-position: 8px center;
    55  	background-repeat: no-repeat;
    56  	background-size: auto 17px;
    57  	border: none;
    58  	color: rgba(255, 255, 255, 1);
    59  	cursor: pointer;
    60  	font-family: inherit;
    61  	font-size: 19px;
    62  	font-weight: 400;
    63  	margin: 0;
    64  	opacity: 0.9;
    65  	padding: 8px 11px 8px 36px;
    66  	text-align: left;
    67  	transition: color 300ms ease-out;
    68  	white-space: nowrap;
    69  	width: 100%;
    70  
    71  	/* This is a bummer, but it appears that different fonts can actually layout at different heights for the same pixel size, thus we get a layout glitch during load when the font load completes. 42px is the minimum of the size that Firefox and Chrome render this box at with the above font size, padding, etc. */
    72  	min-height: 42px;
    73  }
    74  
    75  .cam-nav-item:hover,
    76  .cam-nav-item:focus {
    77  	background-color: rgb(60, 60, 60);
    78  }
    79  
    80  .cam-nav-searchitem:hover,
    81  .cam-nav-searchitem:focus,
    82  .cam-logo:hover,
    83  .cam-logo:focus {
    84  	background-color:inherit!important;
    85  }
    86  
    87  .cam-nav.cam-nav-collapsed .cam-nav-item {
    88  	color: rgba(255, 255, 255, 0);
    89  }
    90  
    91  .cam-nav-item:first-child {
    92  	margin-top: 2px;
    93  }
    94  
    95  .cam-nav-searchitem {
    96  	cursor: default;
    97  	padding-left: 34px;
    98  }
    99  
   100  .cam-nav-searchitem input {
   101  	border: 1px rgba(255, 255, 255, 0);
   102  	border-style: solid none;
   103  	cursor: default;
   104  	background: none;
   105  	font: inherit;
   106  	color: inherit;
   107  	transition: border-color 200ms ease-out;
   108  	margin: 0;
   109  	padding: 0;
   110  	height: 26px;
   111  	width: 207px;
   112  }
   113  
   114  .cam-nav-searchitem input::-webkit-input-placeholder {
   115  	color:inherit;
   116  }
   117  .cam-nav-searchitem input::-moz-placeholder {
   118  	color:inherit;
   119  }
   120  .cam-nav-searchitem input:-ms-input-placeholder {
   121  	color:inherit;
   122  }
   123  
   124  .cam-nav-searchitem input:focus {
   125  	outline: none;
   126  	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
   127  }
   128  
   129  .cam-nav-searchitem input:focus::-webkit-input-placeholder {
   130  	transition: color 200ms ease-out;
   131  	color:rgba(255, 255, 255, 0.5);
   132  }
   133  .cam-nav-searchitem input:focus::-moz-placeholder {
   134  	transition: color 200ms ease-out;
   135  	color:rgba(255, 255, 255, 0.5);
   136  }
   137  .cam-nav-searchitem input:focus:-ms-input-placeholder {
   138  	transition: color 200ms ease-out;
   139  	color:rgba(255, 255, 255, 0.5);
   140  }
   141  
   142  .cam-logo {
   143  	bottom: 0;
   144  	font-size: 15px;
   145  	min-height: 0;
   146  	left: 0;
   147  	opacity: 0.8;
   148  	padding: 4px 9px 4px 31px;
   149  	position: absolute;
   150  	text-decoration: none;
   151  	width: auto;
   152  }
   153  
   154  .cam-logo:hover {
   155  	text-decoration: underline;
   156  }