packages-pagelet
Version:
Pagelet for rendering a npm package
401 lines (319 loc) • 6.43 kB
text/stylus
@import syntax
@import code
$light-highlight = #f4f4f4
$med-highlight = #2980b9
$dark-highlight = #2980b9
.details
color: #444
font-family: "proxima-nova-1", "proxima-nova-2", sans-serif;
font-size: 15px
line-height: 1.7em
.beta
line-height: 1.9em
abbr
cursor: help
header
background-color: $light-highlight
margin: 0 -20px
padding: 0.5em 0 2em 0
h1
aside
color: $dark-highlight
margin-top: 20px
margin-bottom: 0px
h1
line-height: 1em
font-size: 36px
aside
a
font-weight: normal
color: $dark-highlight
&:hover
color: $dark-highlight
text-decoration: none
small
font-size: 14px
line-height: 1.25em
display: block
font-weight: normal
color: $dark-highlight
&:first-child
margin-top: 8px
.shift
font-size: 22px
float: left
margin: 2px 5px 0 0
.part
border-right: 1px solid #999
margin-left: 8px
padding-right: @margin-left
padding-top: 5px
float: left
&:first-child
margin-left: 0
padding-top: 0
padding-bottom: 5px
&:last-child
border-right: 0px solid #999
strong
background-color: $dark-highlight
border-radius: 2px
color: white
float: left
font-size: 22px
margin-top: 5px
padding: 0 5px
margin-right: 5px
aside
color: $med-highlight
a
font-weight: normal
color: @color
&:hover
color: @color
text-decoration: none
a:hover
color: #4183C4
text-decoration: underline
.properties
padding: 4em 0
min-height: 240px
.name a
color: #333
h2
color: $med-highlight
s
float: left
margin: 3px 10px 0 0
small
text-align: right
min-width: 60px
.show-all
color: $med-highlight
font-size: 15px
border-bottom: 1px solid @color
&:hover
color: @color
text-decoration: none
td.type
font-size: 11px
text-transform: uppercase
padding: 1px 0
width: 32px
s.status
height: 12px
width: 12px
background: #1bb985
background-image: linear-gradient(top, rgba(255,255,255,.6) 0%, rgba(255,255,255,.1) 100%)
border: 1px solid darken(@background, 20%)
border-radius: 2px
display: inline-block
&.missing
background: #ca0b00
background-image: linear-gradient(top, rgba(255,255,255,.6) 0%, rgba(255,255,255,.1) 100%)
border: 1px solid darken(@background, 20%)
.dependencies
.maintainers
p
color: #999
.maintainer
overflow: hidden
margin: 15px 0
strong
display: inline-block
margin-top: 10px
.gravatar
background-repeat: no-repeat
background-size: cover
border-radius: 100px
float: left
font-weight: bold
height: 50px
line-height: @height
margin: 0 25px 0 0
text-indent: @height + 20
width: @height
table
border-collapse: collapse
border-spacing: 0
color: #999
td
color: #333
padding: 2px 4px
border: none
white-space: nowrap
overflow: hidden
.version
text-overflow: ellipsis
max-width: 50px
.license
text-overflow: ellipsis
max-width: 90px
text-align: right
.downloads .graph
height: 150px
margin-bottom: 30px
.sparklet .x-axis .tick text
color: #333
.sparklet .chart-tooltip
background: #333
color: #FFF
&:after
border-top-color: #333
.utility
margin-top: 1em
h3
font-size: 16px
text-align: right
color: $dark-highlight
padding: 10px 0
pre
font-size: 12px
background-color: #666
color: white
font-family: Menlo, Monaco, Consolas, "Courier New", monospace
border-radius: 5px
padding: 10px
h3
pre
margin-top: 15px
margin-bottom: 15px
.readme
background-color: $light-highlight
margin: 0 -20px
//
// Custom markdown code that shouldn't affect the rest of page.
//
.markdown
color: #444
font-family: "proxima-nova-1", "proxima-nova-2", sans-serif;
font-size: 15px
line-height: 1.7
position: relative
.icon
color: $dark-highlight
display: block
margin-top: 24px
s
font-size: 48px
h3
display: inline-block
a
color: #4183C4
text-decoration: none
&:hover
text-decoration: underline
h1,
h2,
h3,
h3,
h4,
h5,
h6
margin: 1em 0 15px
padding: 0
font-weight: bold
line-height: 1.7
cursor: text
position: relative
h1
border-bottom: 1px solid #666
font-size: 2.5em
h2
font-size: 2em
border-bottom: 1px solid #EEE
h3
font-size: 1.5em
h3[id]
color: #444
h4
font-size: 1.2em
h5
font-size: 1em
h6
font-size: 1em
color: #777
ul,
ol
margin: 0
padding: 0 0 0 30px
p,
ul,
ol,
dl,
table,
blockquote
margin: 15px 0
ul ul,
ul ol,
ol ol,
ol ul
margin-top: 0
margin-bottom: 0
code
pre
kbd
samp
font-family: Menlo, Monaco, Consolas, "Courier New", monospace
code
background-color: #FAFAFA
border-radius: 3px
border: 1px solid #DDD
display: inline-block
line-height: 1.3
margin: 0
font-size: 12px
max-width: 100%
overflow: auto
padding: 0
vertical-align: middle
&:before
&:after
content: "\00a0" // Extra spacing
table:not(.rendermetable)
border-collapse: collapse
border-spacing: 0
tr
background-color: #FFF
border-top: 1px solid #CCC
&:nth-child(2n)
background-color: #F8F8F8
td,
th
border: 1px solid #DDD
padding: 6px 13px
dl
padding: 0
dt
font-size: 14px
font-style: italic
font-weight: bold
margin-top: 15px
padding: 0
dd
margin-bottom: 15px
margin-left: 0
padding: 0 15px
blockquote
border-left: 4px solid #DDD
padding: 0 15px
color: #777
&>:last-child
margin-bottom: 0px
&>:first-child
margin-top: 0px
pre code
width: 100%
background: #FFF
border-radius: 0
padding: 12px
font-size: 15px;
line-height: 20px;
margin: 0;
overflow-x: auto;
white-space: pre;
&:before
&:after
content: ''
img
max-width: 100%