The original lightbox script, finally on github. http://lokeshdhakar.com/projects/lightbox2/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

476 lines
8.6 KiB

/*
* Lightbox v2 Project page styles
* Author: Lokesh Dhakar http://www.lokeshdhakar.com
* Created: a long time ago (2006 I think)
* Table of Contents:
* layout
* typography
* content
@import "compass/reset"
@import "compass/css3"
@import "compass/utilities/general/clearfix"
@import "variables"
/* layout
*----------------------------------------------- */
#sidebar
position: fixed
top: $gutter
left: $gutter
width: $sidebarWidth
#content
margin: 0 $gutter $gutter $sidebarWidth+$gutter*2
.row
+pie-clearfix
/* Typography
*----------------------------------------------- */
body
background: $bodyBg url(../images/bg-checker.png)
body, input, textarea
color: $color
text-shadow: 0 -1px 0 rgba(0,0,0,1)
font-size: $fontSize
line-height: $lineHeight
font-family: $fontFamily
font-weight: 600
-webkit-font-smoothing: antialiased
#lightbox
text-shadow: none
h1,h2,h3,h4,h5,h6
font-family: $headingFontFamily
font-weight: 400
letter-spacing: 0.03em
line-height: $lineHeight
margin: 0
color: $headingColor
h1
font-size: $fontSize + 24
line-height: 1.2em
h2
font-size: $fontSize + 18
line-height: 1.45em
margin-bottom: 0.2em
h3
font-size: $fontSize
text-transform: uppercase
letter-spacing: 0.1em
color: darken($headingColor, 30%)
h4
font-size: $fontSize
/* Text elements */
p
margin: 0 0 1.25em 0
line-height: $lineHeight
ul, ol
margin: 0 0 1.25em 0
dt
font-weight: bold
dd
margin-bottom: 1.625em
strong
font-weight: bold
i
font-style: italic
pre
background: rgba(0,0,0,0.4)
color: $orange
font: 14px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace
line-height: 1.5
margin: $gutter/2 0 $gutter/2 0
overflow: auto
padding: 1em
+border-radius($radius)
+box-shadow( 0 1px 0 0 rgba(255,255,255,0.1), inset 0 2px 6px 2px rgba(0,0,0,1))
code, kbd
font: 14px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace
background: rgba(0,0,0,0.4)
+box-shadow( 0 1px 0 0 rgba(255,255,255,0.1), inset 0 2px 6px 2px rgba(0,0,0,1))
padding: 5px
+border-radius($radius)
color: $orange
pre code
font-size: 13px
background: transparent
+box-shadow(none)
padding: 0
/* Links */
a
color: $linkColor
text-decoration: none
&:hover
color: darken($linkColor, 20%)
::-moz-selection,
::selection
background: $orange
color: white
/* sidebar
*----------------------------------------------- */
#sidebar
+opacity(0.6)
+transition( opacity .2s)
&:hover
+opacity(1)
a
color: #fff
.logo
+transition( all .2s ease-out)
em
color: $linkColor
&:hover
text-shadow: 0 0 20px rgba(208, 235, 106,1), 0 0 50px rgba(208, 235, 106,1)
.author
font-weight: 800
line-height: 1.4em
a
&:hover
text-shadow: 0 0 10px rgba(255,255,255, 1)
.twitter
font-size: $fontSize - 2
a
color: #4d9ed8
em
color: #4d9ed8
#nav
list-style: none
margin: 1.5em 0 1em 0
font-size: 14px
text-transform: uppercase
letter-spacing: 0.1em
font-family: $headingFontFamily
li
padding: 0
margin: 0
a
display: block
height: 2.0em
padding: 0.6em 0.2em 0.3em $gutter/2
background: rgba(80,80,80,1)
border-top: 1px solid rgba(255,255,255,0.15)
border-bottom: 1px solid rgba(0,0,0,0.4)
+transition( all .2s ease-out)
&:hover
text-shadow: 0 1px 0 rgba(0,0,0,0.6)
background-color: darken($headingColor, 30%)
a.first
border-bottom-color: rgba(0,0,0,0.5)
+border-top-radius($radius)
border-top-color: transparent
a.last
border-top-color: rgba(255,255,255,0.25)
+border-bottom-radius($radius)
/* content
*----------------------------------------------- */
.download
float: left
margin: 0 $gutter $gutter 0
padding: 10px 20px 10px 10px
background-color: #333
border: 5px solid #333
+border-radius($radius)
+transition( all .2s ease-out)
&:hover
border-color: $linkColor
background-color: #444
.box
float: left
.file
float: left
font-size: 36px
font-family: $headingFontFamily
font-weight: 400
color: white
line-height: 1.1em
.version
font-size: 24px
color: $linkColor
.filelist
float: left
font-size: 12px
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace
line-height: 1.5em
.header
text-transform: uppercase
font-weight: bold
.folder
color: #999
.note
color: #999
.changelog
margin-bottom: 0.5em
li
list-style: none
padding: 0 0 0 14px
background: url(../images/bullet.gif) no-repeat 0 11px
color: #999
.version
color: #88A616
.date
color: #fff
.old
display: none
.showOlderChanges
color: #999
.forums
float: left
margin: 0 $gutter $gutter 0
padding: 10px
background-color: #333
border: 5px solid #333
+border-radius($radius)
+transition( all .2s ease-out)
&:hover
border-color: $linkColor
background-color: #444
.speech
float: left
margin-right: 20px
.link
float: left
font-size: 36px
font-family: $headingFontFamily
font-weight: 400
color: white
line-height: 1.1em
.sub
color: $linkColor
.donate-button
border: 5px solid rgba(0, 0, 0, 0)
+border-radius($radius)
+transition( all .2s ease-out)
&:hover
background-color: #444
border-color: $linkColor
#elsewhere
.button
font-family: $headingFontFamily
font-weight: normal
font-size: 24px
display: block
float: left
margin: $gutter/2 $gutter/2 $gutter 0
padding: 10px 10px 10px 10px
background-color: #333
border: 5px solid #333
+border-radius($radius)
+transition( all .2s ease-out)
color: #fff
&:hover
background-color: #444
border-color: $linkColor
/* misc
*----------------------------------------------- */
p.lead
font-size: $fontSize + 10
font-weight: 700
color: darken( $color, 10%)
line-height: 1.4em
margin-bottom: 0
hr
height: 6px
background: #3d3d33
border: none
+border-radius($radius)
clear: both
.section
padding: $gutter 0
&:first-child
border-top: none
.imageRow
+pie-clearfix
margin: $gutter/2 0
.single
float: left
a
float: left
display: block
background: rgba(255,255,255,.1)
padding: 7px
line-height: 1em
+border-radius($radius)
+box-shadow( 0 1px 4px 0 rgba(0,0,0,0.5))
margin-right: $gutter
+transition( all .2s ease-out)
img
+border-radius($radius)
border: 1px solid rgba(0,0,0,0.3)
&:hover
background-color: $linkColor
.set
float: left
background: rgba(255,255,255,.1)
+border-radius($radius)
+box-shadow( 0 1px 4px 0 rgba(0,0,0,0.5))
+transition( all .2s ease-out)
&:hover
background: rgba(255,255,255,.2)
.single
a
background: none
+border-radius(0)
+box-shadow(none)
margin-right: 0
&:hover
background-color: $linkColor
+box-shadow( 0 -1px 0 0 rgba(255,255,255,0.2), 0 1px 4px 0 rgba(0,0,0,0.5))
.single.first
a
+border-left-radius($radius)
.single.last
a
+border-right-radius($radius)
// Drop comments below content
@media only screen and (max-width: 1000px)
body, input, textarea
font-size: $fontSize - 2
body
padding-top: 20px
.section
padding: 20px 0
p.lead
font-size: $fontSize + 4
h1
font-size: 30px
h2
font-size: 24px
h3
font-size: 16px
code, kbd
font-size: 13px
pre code
font-size: 12px
pre
padding: .75em
#sidebar
width: $sidebarWidth - 40
left: 20px
#content
margin-left: $sidebarWidth+$gutter - 40
@media only screen and (max-width: 700px)
body, input, textarea
font-size: $fontSize - 4
padding-top: 0
p.lead
font-size: $fontSize
code, kbd
font-size: 12px
pre code
font-size: 11px
pre
padding: .5em
#sidebar
+opacity(1)
position: static
text-align: center
width: auto
margin: 20px 20px 0 20px
border-bottom: 6px solid #3d3d33
h1
font-size: 24px
.twitter
font-size: 14px
#nav
font-size: 12px
li
display: inline-block
a
padding: 10px
height: auto
margin: 0 5px 10px 5px
+border-radius(6px)
h2
font-size: 18px
h3
font-size: 14px
#content
margin: 10px 20px 20px 20px
.download
text-align: center
width: 95%
margin-right: 0
padding-right: 0
padding-left: 0
.box, .file
float: none
.forums
text-align: center
width: 95%
margin-right: 0
padding-right: 0
padding-left: 0
.speech, .link
float: none