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.

477 lines
8.6KB

  1. /*
  2. * Lightbox v2 Project page styles
  3. * Author: Lokesh Dhakar http://www.lokeshdhakar.com
  4. * Created: a long time ago (2006 I think)
  5. * Table of Contents:
  6. * layout
  7. * typography
  8. * content
  9. @import "compass/reset"
  10. @import "compass/css3"
  11. @import "compass/utilities/general/clearfix"
  12. @import "variables"
  13. /* layout
  14. *----------------------------------------------- */
  15. #sidebar
  16. position: fixed
  17. top: $gutter
  18. left: $gutter
  19. width: $sidebarWidth
  20. #content
  21. margin: 0 $gutter $gutter $sidebarWidth+$gutter*2
  22. .row
  23. +pie-clearfix
  24. /* Typography
  25. *----------------------------------------------- */
  26. body
  27. background: $bodyBg url(../images/bg-checker.png)
  28. body, input, textarea
  29. color: $color
  30. text-shadow: 0 -1px 0 rgba(0,0,0,1)
  31. font-size: $fontSize
  32. line-height: $lineHeight
  33. font-family: $fontFamily
  34. font-weight: 600
  35. -webkit-font-smoothing: antialiased
  36. #lightbox
  37. text-shadow: none
  38. h1,h2,h3,h4,h5,h6
  39. font-family: $headingFontFamily
  40. font-weight: 400
  41. letter-spacing: 0.03em
  42. line-height: $lineHeight
  43. margin: 0
  44. color: $headingColor
  45. h1
  46. font-size: $fontSize + 24
  47. line-height: 1.2em
  48. h2
  49. font-size: $fontSize + 18
  50. line-height: 1.45em
  51. margin-bottom: 0.2em
  52. h3
  53. font-size: $fontSize
  54. text-transform: uppercase
  55. letter-spacing: 0.1em
  56. color: darken($headingColor, 30%)
  57. h4
  58. font-size: $fontSize
  59. /* Text elements */
  60. p
  61. margin: 0 0 1.25em 0
  62. line-height: $lineHeight
  63. ul, ol
  64. margin: 0 0 1.25em 0
  65. dt
  66. font-weight: bold
  67. dd
  68. margin-bottom: 1.625em
  69. strong
  70. font-weight: bold
  71. i
  72. font-style: italic
  73. pre
  74. background: rgba(0,0,0,0.4)
  75. color: $orange
  76. font: 14px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace
  77. line-height: 1.5
  78. margin: $gutter/2 0 $gutter/2 0
  79. overflow: auto
  80. padding: 1em
  81. +border-radius($radius)
  82. +box-shadow( 0 1px 0 0 rgba(255,255,255,0.1), inset 0 2px 6px 2px rgba(0,0,0,1))
  83. code, kbd
  84. font: 14px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace
  85. background: rgba(0,0,0,0.4)
  86. +box-shadow( 0 1px 0 0 rgba(255,255,255,0.1), inset 0 2px 6px 2px rgba(0,0,0,1))
  87. padding: 5px
  88. +border-radius($radius)
  89. color: $orange
  90. pre code
  91. font-size: 13px
  92. background: transparent
  93. +box-shadow(none)
  94. padding: 0
  95. /* Links */
  96. a
  97. color: $linkColor
  98. text-decoration: none
  99. &:hover
  100. color: darken($linkColor, 20%)
  101. ::-moz-selection,
  102. ::selection
  103. background: $orange
  104. color: white
  105. /* sidebar
  106. *----------------------------------------------- */
  107. #sidebar
  108. +opacity(0.6)
  109. +transition( opacity .2s)
  110. &:hover
  111. +opacity(1)
  112. a
  113. color: #fff
  114. .logo
  115. +transition( all .2s ease-out)
  116. em
  117. color: $linkColor
  118. &:hover
  119. text-shadow: 0 0 20px rgba(208, 235, 106,1), 0 0 50px rgba(208, 235, 106,1)
  120. .author
  121. font-weight: 800
  122. line-height: 1.4em
  123. a
  124. &:hover
  125. text-shadow: 0 0 10px rgba(255,255,255, 1)
  126. .twitter
  127. font-size: $fontSize - 2
  128. a
  129. color: #4d9ed8
  130. em
  131. color: #4d9ed8
  132. #nav
  133. list-style: none
  134. margin: 1.5em 0 1em 0
  135. font-size: 14px
  136. text-transform: uppercase
  137. letter-spacing: 0.1em
  138. font-family: $headingFontFamily
  139. li
  140. padding: 0
  141. margin: 0
  142. a
  143. display: block
  144. height: 2.0em
  145. padding: 0.6em 0.2em 0.3em $gutter/2
  146. background: rgba(80,80,80,1)
  147. border-top: 1px solid rgba(255,255,255,0.15)
  148. border-bottom: 1px solid rgba(0,0,0,0.4)
  149. +transition( all .2s ease-out)
  150. &:hover
  151. text-shadow: 0 1px 0 rgba(0,0,0,0.6)
  152. background-color: darken($headingColor, 30%)
  153. a.first
  154. border-bottom-color: rgba(0,0,0,0.5)
  155. +border-top-radius($radius)
  156. border-top-color: transparent
  157. a.last
  158. border-top-color: rgba(255,255,255,0.25)
  159. +border-bottom-radius($radius)
  160. /* content
  161. *----------------------------------------------- */
  162. .download
  163. float: left
  164. margin: 0 $gutter $gutter 0
  165. padding: 10px 20px 10px 10px
  166. background-color: #333
  167. border: 5px solid #333
  168. +border-radius($radius)
  169. +transition( all .2s ease-out)
  170. &:hover
  171. border-color: $linkColor
  172. background-color: #444
  173. .box
  174. float: left
  175. .file
  176. float: left
  177. font-size: 36px
  178. font-family: $headingFontFamily
  179. font-weight: 400
  180. color: white
  181. line-height: 1.1em
  182. .version
  183. font-size: 24px
  184. color: $linkColor
  185. .filelist
  186. float: left
  187. font-size: 12px
  188. font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace
  189. line-height: 1.5em
  190. .header
  191. text-transform: uppercase
  192. font-weight: bold
  193. .folder
  194. color: #999
  195. .note
  196. color: #999
  197. .changelog
  198. margin-bottom: 0.5em
  199. li
  200. list-style: none
  201. padding: 0 0 0 14px
  202. background: url(../images/bullet.gif) no-repeat 0 11px
  203. color: #999
  204. .version
  205. color: #88A616
  206. .date
  207. color: #fff
  208. .old
  209. display: none
  210. .showOlderChanges
  211. color: #999
  212. .forums
  213. float: left
  214. margin: 0 $gutter $gutter 0
  215. padding: 10px
  216. background-color: #333
  217. border: 5px solid #333
  218. +border-radius($radius)
  219. +transition( all .2s ease-out)
  220. &:hover
  221. border-color: $linkColor
  222. background-color: #444
  223. .speech
  224. float: left
  225. margin-right: 20px
  226. .link
  227. float: left
  228. font-size: 36px
  229. font-family: $headingFontFamily
  230. font-weight: 400
  231. color: white
  232. line-height: 1.1em
  233. .sub
  234. color: $linkColor
  235. .donate-button
  236. border: 5px solid rgba(0, 0, 0, 0)
  237. +border-radius($radius)
  238. +transition( all .2s ease-out)
  239. &:hover
  240. background-color: #444
  241. border-color: $linkColor
  242. #elsewhere
  243. .button
  244. font-family: $headingFontFamily
  245. font-weight: normal
  246. font-size: 24px
  247. display: block
  248. float: left
  249. margin: $gutter/2 $gutter/2 $gutter 0
  250. padding: 10px 10px 10px 10px
  251. background-color: #333
  252. border: 5px solid #333
  253. +border-radius($radius)
  254. +transition( all .2s ease-out)
  255. color: #fff
  256. &:hover
  257. background-color: #444
  258. border-color: $linkColor
  259. /* misc
  260. *----------------------------------------------- */
  261. p.lead
  262. font-size: $fontSize + 10
  263. font-weight: 700
  264. color: darken( $color, 10%)
  265. line-height: 1.4em
  266. margin-bottom: 0
  267. hr
  268. height: 6px
  269. background: #3d3d33
  270. border: none
  271. +border-radius($radius)
  272. clear: both
  273. .section
  274. padding: $gutter 0
  275. &:first-child
  276. border-top: none
  277. .imageRow
  278. +pie-clearfix
  279. margin: $gutter/2 0
  280. .single
  281. float: left
  282. a
  283. float: left
  284. display: block
  285. background: rgba(255,255,255,.1)
  286. padding: 7px
  287. line-height: 1em
  288. +border-radius($radius)
  289. +box-shadow( 0 1px 4px 0 rgba(0,0,0,0.5))
  290. margin-right: $gutter
  291. +transition( all .2s ease-out)
  292. img
  293. +border-radius($radius)
  294. border: 1px solid rgba(0,0,0,0.3)
  295. &:hover
  296. background-color: $linkColor
  297. .set
  298. float: left
  299. background: rgba(255,255,255,.1)
  300. +border-radius($radius)
  301. +box-shadow( 0 1px 4px 0 rgba(0,0,0,0.5))
  302. +transition( all .2s ease-out)
  303. &:hover
  304. background: rgba(255,255,255,.2)
  305. .single
  306. a
  307. background: none
  308. +border-radius(0)
  309. +box-shadow(none)
  310. margin-right: 0
  311. &:hover
  312. background-color: $linkColor
  313. +box-shadow( 0 -1px 0 0 rgba(255,255,255,0.2), 0 1px 4px 0 rgba(0,0,0,0.5))
  314. .single.first
  315. a
  316. +border-left-radius($radius)
  317. .single.last
  318. a
  319. +border-right-radius($radius)
  320. // Drop comments below content
  321. @media only screen and (max-width: 1000px)
  322. body, input, textarea
  323. font-size: $fontSize - 2
  324. body
  325. padding-top: 20px
  326. .section
  327. padding: 20px 0
  328. p.lead
  329. font-size: $fontSize + 4
  330. h1
  331. font-size: 30px
  332. h2
  333. font-size: 24px
  334. h3
  335. font-size: 16px
  336. code, kbd
  337. font-size: 13px
  338. pre code
  339. font-size: 12px
  340. pre
  341. padding: .75em
  342. #sidebar
  343. width: $sidebarWidth - 40
  344. left: 20px
  345. #content
  346. margin-left: $sidebarWidth+$gutter - 40
  347. @media only screen and (max-width: 700px)
  348. body, input, textarea
  349. font-size: $fontSize - 4
  350. padding-top: 0
  351. p.lead
  352. font-size: $fontSize
  353. code, kbd
  354. font-size: 12px
  355. pre code
  356. font-size: 11px
  357. pre
  358. padding: .5em
  359. #sidebar
  360. +opacity(1)
  361. position: static
  362. text-align: center
  363. width: auto
  364. margin: 20px 20px 0 20px
  365. border-bottom: 6px solid #3d3d33
  366. h1
  367. font-size: 24px
  368. .twitter
  369. font-size: 14px
  370. #nav
  371. font-size: 12px
  372. li
  373. display: inline-block
  374. a
  375. padding: 10px
  376. height: auto
  377. margin: 0 5px 10px 5px
  378. +border-radius(6px)
  379. h2
  380. font-size: 18px
  381. h3
  382. font-size: 14px
  383. #content
  384. margin: 10px 20px 20px 20px
  385. .download
  386. text-align: center
  387. width: 95%
  388. margin-right: 0
  389. padding-right: 0
  390. padding-left: 0
  391. .box, .file
  392. float: none
  393. .forums
  394. text-align: center
  395. width: 95%
  396. margin-right: 0
  397. padding-right: 0
  398. padding-left: 0
  399. .speech, .link
  400. float: none