| /* ----- basic layout ----- */ |
| |
| body { |
| background: #fff; |
| margin: 0; |
| font-family: 'Lato', sans-serif; |
| } |
| |
| .wrap, #tabs { |
| width: 100% |
| margin: 0 auto; |
| padding: 0px; |
| } |
| |
| /* ----- common elements -----*/ |
| |
| a { |
| color: @highlight-color; |
| text-decoration:none; |
| } |
| |
| a.dep-link { |
| padding-right:7px; |
| } |
| |
| .spacer, .clear { |
| clear:both; |
| margin-bottom:10px; |
| } |
| |
| .button { |
| display: inline-block; |
| background-color: @highlight-color; |
| margin-left: 8px; |
| padding: 10px 16px; |
| color: #fff; |
| font-size: 1.5em; |
| text-align: center; |
| text-decoration: none; |
| .transition( background ); |
| border-bottom: 4px solid darken(@highlight-color,10%); |
| |
| &:hover { |
| background-color: #4cd6fc; |
| color: #fff; |
| } |
| } |
| |
| .pluggy-logo { |
| background: transparent url('../img/pluggy.png') no-repeat top left; |
| background-size: contain; |
| } |
| |
| .top-logo { |
| height: 50px; |
| width: 32px; |
| } |
| |
| |
| /* ----- content ---- */ |
| |
| #content-wrapper { |
| padding-top: 0; |
| // width: 100%; |
| } |
| |
| |
| #content, |
| #tabs a, #tabs span { |
| background: #fff; |
| padding: 2% 2%; |
| .border-radius( 5px ); |
| position: relative; |
| } |
| |
| #content { |
| padding: 4% 2%; |
| } |
| |
| #tabs { |
| margin-bottom: -7px; |
| padding-bottom: 0; |
| |
| a, span { |
| display: inline-block; |
| padding: 16px 20px 18px; |
| margin: 0 10px 0 0; |
| } |
| |
| a { |
| .transition( background-color ); |
| background-color: @highlight-color; |
| color: #fff; |
| |
| &:hover { |
| background-color: lighten( @highlight-color, 10% ); |
| } |
| |
| &.selected { |
| background-color: #fff; |
| color: @font-color; |
| &:hover { |
| background-color: #fff; |
| } |
| } |
| } |
| } |
| |
| .search-container { |
| float: left; |
| margin-right: 30px; |
| padding-top: 20px; |
| |
| input { |
| border: 1px solid #0036ff; |
| } |
| } |
| |
| |
| |
| #search-box { |
| width: auto; |
| margin-bottom: 20px; |
| } |
| |
| #search-box-input { |
| span { |
| line-height: 60px; |
| width: 5%; |
| font-size: 1.5em; |
| font-weight: bold; |
| text-align: center; |
| float: left; |
| } |
| |
| .button { |
| padding-left: 2%; |
| padding-right: 2%; |
| width: 25%; |
| float: left; |
| } |
| } |
| |
| #search-input { |
| width: auto; |
| min-width: 90%; |
| font-size: 1.5em; |
| padding: 10px 2%; |
| border: none; |
| font-weight: normal; |
| margin: 0 8px 0 0; |
| border: 1px solid #ddd; |
| border-top: 4px #ddd solid; |
| // float: left; |
| |
| &:focus { |
| outline-color: @highlight-color; |
| } |
| } |
| #browse-anchors { |
| |
| a { |
| margin-right:20px; |
| padding: 3px 5px 3px 5px; |
| background-color: #fff; |
| |
| display: inline-block; |
| background-color: @highlight-color; |
| margin-right: 8px; |
| padding: 4px 12px; |
| color: #fff; |
| text-align: center; |
| text-decoration: none; |
| .transition( background ); |
| border-bottom: 2px solid darken(@highlight-color,10%); |
| |
| &:hover { |
| background-color: #4cd6fc; |
| color: #fff; |
| } |
| } |
| } |
| |
| |
| /* ----- everything else ----- */ |
| |
| #banner { |
| background-color: #ff8001; |
| color: #ffffff; |
| } |
| |
| #banner a { |
| color: #ffffff; |
| border-bottom: 2px solid rgba(255,255,255,1); |
| } |
| |
| div#results { |
| font-size:20px; |
| width:100%; |
| padding-top:4px; |
| } |
| div.result { |
| width:100%; |
| } |
| div.result-container { |
| padding-bottom:6px; |
| } |
| span.result-name { |
| padding-right:10px; |
| } |
| span.result-desc { |
| color:#6B6B6B; |
| } |
| div.result-tags { |
| text-align:right; |
| font-size:16px; |
| padding-right:4px; |
| float:right; |
| } |
| span.tag { |
| padding-left:6px; |
| cursor:pointer; |
| color:#878787; |
| } |
| span.desc-term { |
| color:#141414; |
| } |
| div.package { |
| text-align:center; |
| } |
| |
| div.package-title { |
| font-size:22px; |
| float:left; |
| } |
| div.package-label { |
| font-size:14px; |
| color:#999999 |
| } |
| |
| div.pkg-link { |
| float:left; |
| padding-top:20px; |
| margin-left:30px; |
| } |
| |
| div#latest-packages { |
| width:45%; |
| float:left; |
| margin-right: 5%; |
| } |
| |
| div#top-dep-packages { |
| width:45%; |
| margin-left:5%; |
| float:left; |
| } |
| |
| div.top-title { |
| text-align:center; |
| } |
| |
| div.top-package { |
| width:100%; |
| } |
| div.top-package-title { |
| padding-right:7px; |
| float:left; |
| } |
| div.top-package-updated { |
| float:right; |
| text-align:right; |
| padding-right:15px; |
| } |
| div.top-package-dep { |
| float:right; |
| text-align:right; |
| padding-right:15px; |
| } |
| |
| div.dependencies { |
| width:80%; |
| text-align:left; |
| padding-left:10%; |
| padding-right:10%; |
| } |
| div.users { |
| width:80%; |
| text-align:left; |
| padding-left:10%; |
| padding-right:10%; |
| } |
| a.dep { |
| margin-right:10px; |
| } |
| a.user { |
| margin-right:10px; |
| } |
| div#totals { |
| float:right; |
| position:absolute; |
| top:10px; |
| right:10px; |
| } |
| div.all-package { |
| width:100%; |
| } |
| div.all-package-name { |
| width:40%; |
| padding-right:2%; |
| float:left; |
| } |
| div.all-package-desc { |
| width:50%; |
| float:left; |
| } |
| div#more-all { |
| cursor:pointer; |
| color:blue; |
| } |
| |
| div#versions-container { |
| margin-top:10px; |
| width:100%; |
| } |
| div#version-list { |
| float:left; |
| width:20%; |
| } |
| div#version-info { |
| float:left; |
| width:78%; |
| background-color:#B9D3EE; |
| padding: 1% 1% 1% 1%; |
| } |
| div.version-info-cell { |
| width:100%; |
| } |
| div.version-info-key { |
| float:left; |
| } |
| div.version-info-value { |
| float:right; |
| text-align:right; |
| } |
| div.version-selected { |
| background-color:#B9D3EE; |
| } |
| div.version-link { |
| width:100%; |
| padding: 3px 0px 0px 10px; |
| } |
| |
| span.expand-tags { |
| padding-left:10px; |
| font-size:12px; |
| cursor:pointer; |
| color:#FF1D4E; |
| } |
| a.tag-val { |
| padding-right:10px; |
| padding-left:5px; |
| } |
| div.all-package-author { |
| width:30%; |
| float:left; |
| } |
| |
| div.all-package-auth-list { |
| width:70%; |
| float:left; |
| } |
| div.all-package-deps { |
| width:50%; |
| float:left; |
| } |
| div.all-package-deps-value { |
| width:50%; |
| float:left; |
| } |
| div.tags-pkg-name { |
| float:left; |
| width:30%; |
| font-size:30px; |
| } |
| div.tags-pkg-desc { |
| float:left; |
| width:70%; |
| } |
| div.right{ |
| float:right; |
| } |
| div.left{ |
| float:left; |
| } |
| |
| .invisible--hand { |
| display: none; |
| visibility: hidden; |
| } |
| .visible--hand { |
| display: block; |
| visibility: visible; |
| } |
| |
| @media only screen and (min-width: 48rem) { |
| .invisible--lap { |
| display: none; |
| visibility: hidden; |
| } |
| .visible--lap { |
| display: flex; |
| visibility: visible; |
| } |
| } |