| @import "../font/style.css"; |
| /* ----- mixins ------ */ |
| /* ----- font ----- */ |
| html { |
| font-size: 17px; |
| font-family: 'HelveticaNeue-Light', Helvetica, Arial, sans-serif; |
| color: #ffffff; |
| } |
| h1 { |
| font-size: 1.8em; |
| font-weight: normal; |
| } |
| h2 { |
| font-size: 1.2em; |
| font-weight: normal; |
| } |
| /* ----- basic layout ----- */ |
| body { |
| background: #fff; |
| margin: 0; |
| } |
| .wrap, |
| #tabs { |
| max-width: 1000px; |
| margin: 0 auto; |
| padding: 40px 0; |
| } |
| .grid { |
| background: url(../images/grid.png); |
| } |
| /* ----- common elements -----*/ |
| a { |
| color: #4cc2e4; |
| text-decoration: none; |
| } |
| a.dep-link { |
| padding-right: 7px; |
| } |
| .spacer, |
| .clear { |
| clear: both; |
| margin-bottom: 10px; |
| } |
| .button { |
| display: inline-block; |
| background-color: #4cc2e4; |
| margin-left: 8px; |
| padding: 10px 16px; |
| color: #fff; |
| font-size: 1.5em; |
| text-align: center; |
| text-decoration: none; |
| -webkit-transition: background 0.25s linear; |
| -moz-transition: background 0.25s linear; |
| transition: background 0.25s linear; |
| border-bottom: 4px solid #21b2dc; |
| } |
| .button:hover { |
| background-color: #4cd6fc; |
| color: #fff; |
| } |
| /* ----- header ---- */ |
| #header { |
| |
| border-bottom: 3px solid rgba(0, 0, 0, 0.1); |
| height: 50px; |
| text-align: left; |
| position: relative; |
| z-index: 3; |
| margin-bottom: -3px; |
| background-color: #3b4854; |
| } |
| #header .wrap { |
| padding: 20px 0; |
| } |
| #header a { |
| -webkit-transition: color 0.25s linear; |
| -moz-transition: color 0.25s linear; |
| transition: color 0.25s linear; |
| color: #ffffff; |
| display: inline-block; |
| padding: 6px 0; |
| position: relative; |
| } |
| #header a:hover { |
| color: #4cc2e4; |
| } |
| #header a.logo { |
| padding-left: 40px; |
| font-size: 1.2em; |
| } |
| #header a.logo:before { |
| font-size: 1.5em; |
| position: absolute; |
| left: 0; |
| top: 3px; |
| } |
| #header #howto { |
| float: right; |
| } |
| #header #howto a { |
| padding-top: 10px; |
| margin-left: 24px; |
| } |
| #header #howto a span { |
| position: absolute; |
| top: 0px; |
| left: 0; |
| font-size: 10px; |
| font-weight: 600; |
| } |
| /* ----- content ---- */ |
| #content-wrapper { |
| padding-top: 0; |
| } |
| #content, |
| #tabs a, |
| #tabs span { |
| background: #fff; |
| padding: 2% 2%; |
| -moz-border-radius: 5px; |
| -webkit-border-radius: 5px; |
| border-radius: 5px; |
| position: relative; |
| } |
| #content { |
| padding: 4% 2%; |
| } |
| #tabs { |
| margin-bottom: -7px; |
| padding-bottom: 0; |
| } |
| #tabs a, |
| #tabs span { |
| display: inline-block; |
| padding: 16px 20px 18px; |
| margin: 0 10px 0 0; |
| } |
| #tabs a { |
| -webkit-transition: background-color 0.25s linear; |
| -moz-transition: background-color 0.25s linear; |
| transition: background-color 0.25s linear; |
| background-color: #4cc2e4; |
| color: #fff; |
| } |
| #tabs a:hover { |
| background-color: #78d1eb; |
| } |
| #tabs a.selected { |
| background-color: #fff; |
| color: #ffffff; |
| } |
| #tabs a.selected:hover { |
| background-color: #fff; |
| } |
| #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; |
| } |
| #search-box-input .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; |
| } |
| #search-input:focus { |
| outline-color: #4cc2e4; |
| } |
| #browse-anchors a { |
| margin-right: 20px; |
| padding: 3px 5px 3px 5px; |
| background-color: #fff; |
| display: inline-block; |
| background-color: #4cc2e4; |
| margin-right: 8px; |
| padding: 4px 12px; |
| color: #fff; |
| text-align: center; |
| text-decoration: none; |
| -webkit-transition: background 0.25s linear; |
| -moz-transition: background 0.25s linear; |
| transition: background 0.25s linear; |
| border-bottom: 2px solid #21b2dc; |
| } |
| #browse-anchors a:hover { |
| background-color: #4cd6fc; |
| color: #fff; |
| } |
| /* ----- footer ---- */ |
| #footer { |
| height: 40px; |
| } |
| /* ----- everything else ----- */ |
| 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: 17px; |
| 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; |
| } |
