Posted By

minky on 06/13/10


Tagged

css CSS3 pixaweb calibre


Versions (?)

Calibre Remote - CSS


 / Published in: CSS
 

URL: http://www.pixaweb.co.uk/calibre/

forms part of our Calibre Remote. an alternate gui for calibre ebooks content-server. this is the css file. orientation media-query is used for browsers that support it (a slightly cleaner view for portrait mode).

  1. /* reset */
  2. html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
  3. article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
  4. body {line-height:1.5;}
  5. table {border-collapse:separate;border-spacing:0;}
  6. caption, th, td {text-align:left;font-weight:normal;}
  7. table, td, th {vertical-align:middle;}
  8. blockquote:before, blockquote:after, q:before, q:after {content:"";}
  9. blockquote, q {quotes:"" "";}
  10. a {outline:none;}
  11. a img {border:none;}
  12. a:link,a:visited,a:active {text-decoration:none;}
  13. a:hover {text-decoration:none;}
  14.  
  15. html { width: 100%: height: 100%; }
  16.  
  17. body { width: 100%: background-color: #fff; color: #565656; font-size: 16px; font-family: Tahoma, Verdana, Geneva, sans-serif; position: relative; }
  18.  
  19. /* tags */
  20. header, footer, hgroup,
  21. article, section, nav { display: block; }
  22. h1, h2,
  23. h3, h4,
  24. h5, h6 {}
  25. p {}
  26. ul { list-style: none; }
  27. ul li {}
  28.  
  29. dl { overflow: auto; }
  30. dt { clear: left; float: left; font-size: 12px; height: 30px; line-height: 30px; }
  31. dd { float: left; height: 30px; }
  32.  
  33. a:link,
  34. a:visited { text-decoration: none; color: #666; }
  35. a:active,
  36. a:hover { color: #333; }
  37.  
  38. /* classes */
  39. .float-parent { overflow: auto; }
  40. .float-left { float: left; }
  41. .float-right { float: right; }
  42. .float-clear { clear: both; }
  43. .float-left-clear { clear: left; }
  44. .float-right-clear { clear: right; }
  45. .hidden { display: none; }
  46.  
  47. .hover_off {}
  48. .hover_on { background-color: #ccc; color: #333; }
  49.  
  50.  
  51. /* layout */
  52. #wrapper { margin: 0; padding: 0; }
  53.  
  54. /* header */
  55. #header { padding: 10px; border-bottom: 1px solid #e5e5e5; }
  56.  
  57. #header hgroup { margin: 0 30px 10px 0; }
  58.  
  59. #header h1 { font-size: 20px; font-weight: bold; line-height: 30px; color: #333; }
  60.  
  61. #header p { padding: 0 10px; color: #444; font-size: 12px; }
  62. #header p img { vertical-align: top; }
  63.  
  64. #header > section { height: 90px; padding: 0; margin: 0 30px 0 0; }
  65. #header > section h1 { font-size: 16px; color: #565656; }
  66.  
  67. /* footer */
  68. #footer { padding: 10px; height: 50px; border-top: 1px solid #e5e5e5; }
  69. #footer div { float: left; line-height: 40px; }
  70.  
  71. #footer .copyright { font-size: 12px; color: #999; }
  72.  
  73. #footer .privacy { float: right; width: 50%; line-height: 13px; text-align: right; padding: 15px 0 0; font-size: 11px; color: #ccc; }
  74.  
  75. #footer .logo { width: 60px; height: 50px; background: url(../images/logo.png) no-repeat right -3px; }
  76. #footer .logo a { display: block; text-indent: -9999em; }
  77.  
  78. /* search */
  79. #search {}
  80. #search input { float: left; padding: 5px 5px 3px; width: 100px; height: 17px; margin: 0; font-size: 14px; }
  81. #search a { clear: left; }
  82. #search a:active {}
  83. #search a:hover {}
  84.  
  85. /* sort/order */
  86. #sort { width: 150px; }
  87. #order { width: 100px; }
  88.  
  89. #sort header,
  90. #order header {}
  91.  
  92. #sort section,
  93. #order section {}
  94.  
  95. #sort ul,
  96. #order ul {}
  97.  
  98. #sort ul li { width: 50%; }
  99. #order ul li {}
  100.  
  101. #sort ul li.float-left {}
  102. #sort ul li.float-right {}
  103.  
  104. #sort ul li a,
  105. #order ul li a { float: none; margin: 0; font-size: 14px; text-align: center; }
  106.  
  107. /* menu */
  108. #menu { width: 100%; height: 48px; position: fixed; top: 0; left: 0; }
  109.  
  110. ul.menu { height: 48px; }
  111. ul.menu li { float: left; width: 25%; height: 48px; line-height: 48px; }
  112.  
  113. ul.menu li a:link,
  114. ul.menu li a:visited { display: block; height: 48px; padding: 0 10px; background-color: #222; }
  115. ul.menu li a:active,
  116. ul.menu li a:hover { background-color: #333; }
  117.  
  118. ul.menu li a span.icon { float: none; margin: 0 auto; }
  119. ul.menu li a span.text {}
  120.  
  121. /* content */
  122. #content { width: 100%; min-height: 150px; padding: 0; background-color: #f8f8f8; }
  123.  
  124. #content.loading { background: #f8f8f8 url(../images/loading.gif) no-repeat center 50px; }
  125.  
  126. /* lists */
  127. ul.list { height: 50px; padding: 0 5px; border-bottom: 1px dashed #444; }
  128. ul.list li { float: left; height: 50px; line-height: 50px; }
  129.  
  130. /* error */
  131. article.error { padding: 0 10px; }
  132.  
  133. article.error h1 { font-size: 16px; font-weight: bold; }
  134. article.error p {}
  135.  
  136. article.error a {}
  137. article.error a:hover {}
  138.  
  139. /* server config */
  140. article.server { padding: 0 10px; }
  141.  
  142. article.server header {}
  143. article.server section {}
  144.  
  145. article.server header h1 { font-size: 17px; font-weight: bold; color: #595959; }
  146.  
  147. article.server section dl { padding: 0 0 10px; }
  148. article.server section dt { width: 150px; }
  149. article.server section dd {}
  150.  
  151. article.server section dd input { margin: 2px 0 0; padding: 5px 5px 3px; height: 17px; font-size: 14px; }
  152.  
  153. article.server section dd input[type=checkbox] { margin: 9px 0 5px; }
  154.  
  155. article.server section dd a.button { margin: 5px 0 0; }
  156.  
  157. /* books */
  158. article.book { padding: 0 10px; }
  159. article.book.active { background-color: #f1f1f1; }
  160.  
  161. article.book header {}
  162. article.book section {}
  163.  
  164. article.book header h2 { height: 30px; line-height: 30px; font-size: 18px; font-weight: bold; }
  165.  
  166. article.book .content { height: 180px; position: relative; }
  167.  
  168. article.book .details { max-width: 70%; }
  169. article.book .details ul {}
  170. article.book .details ul li { line-height: 30px; }
  171.  
  172. article.book .details ul li span { display: block; height: 30px; }
  173. article.book .details ul li .label { font-size: 11px; height: 20px; line-height: 20px; color: #888; }
  174. article.book .details ul li .data { font-size: 14px; padding: 0 0 0 10px; color: #444; }
  175.  
  176. article.book .details ul li a { background-color: #fff; }
  177. article.book .details ul li a:hover { background-color: #dff4ff; }
  178. article.book .details ul li a:active { background-color: #6299c5; }
  179.  
  180. article.book .image { overflow: visible; z-index: 3; }
  181. article.book .image img { max-height: 160px; z-index: 4; }
  182. article.book .image img.large { max-height: none; max-width: 100%; position: absolute; top: 0; right: 0; z-index: 5; }
  183.  
  184. /* file links */
  185. a.file { background-image: url(../images/file.png); background-position: 5px 5px; background-repeat: no-repeat; padding: 5px 10px 5px 27px !important; margin: 0 10px 10px 0 !important; }
  186. a.file[href$=".rtf"] { background-image: url(../images/rtf.png); }
  187. a.file[href$=".lit"] { background-image: url(../images/lit.png); }
  188. a.file[href$=".pdf"] { background-image: url(../images/pdf.png); }
  189. a.file[href$=".doc"] { background-image: url(../images/dov.png); }
  190. a.file[href$=".txt"] { background-image: url(../images/txt.png); }
  191. a.file[href$=".epub"] { background-image: url(../images/epub.png); }
  192. a.file[href$=".zip"] { background-image: url(../images/zip.png); }
  193. a.file[href$=".rar"] { background-image: url(../images/rar.png); }
  194.  
  195. /* paginate */
  196. section.paginate { padding: 0 10px; border-bottom: 1px solid #e5e5e5; }
  197. section.paginate ul { height: 31px; position: relative; }
  198. section.paginate ul li {}
  199.  
  200. section.paginate ul li.prev { position: absolute; left: 0; top: 2px; }
  201. section.paginate ul li.next { position: absolute; right: 0; top: 2px; }
  202.  
  203. section.paginate ul li.current { float: none; width: 90px; height: 32px; line-height: 32px; margin: 0 auto; font-size: 12px; text-align: center; }
  204.  
  205. section.paginate a { display: block; background-color: #fff; }
  206. section.paginate a:hover { background-color: #dff4ff; }
  207. section.paginate a:active { background-color: #6299c5; }
  208.  
  209. /* button */
  210. a.button { display: block; float: left; line-height: 15px; height: 15px; margin: 0; padding: 5px 10px 5px 7px; border: 1px solid #dedede; border-top: 1px solid #eee; border-left: 1px solid #eee; background-color: #f5f5f5; font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif; font-size: 13px; text-decoration: none; font-weight: bold; color: #565656; cursor: pointer; }
  211. a.button:hover,
  212. a.button.hover { background-color: #dff4ff; border: 1px solid #c2e1ef; color: #336699; }
  213. a.button.active,
  214. a.button:active { background-color: #6299c5; border: 1px solid #6299c5; color: #fff; }
  215.  
  216. a.button.define { float: none; width: 150px; }
  217. a.button.save {}
  218. /* media queries */
  219. /* portrait mode */
  220. @media all and (orientation:portrait) and (max-width: 500px) and (max-device-width: 500px) {
  221.  
  222. #search,
  223. #sort, #order { float: none; }
  224.  
  225. article.book {}
  226.  
  227. article.book header h2 { height: auto; line-height: 22px; }
  228.  
  229. article.book .content { height: auto; }
  230. article.book .details { float: none; }
  231. article.book .image { float: none; clear: both; padding: 10px 0 0; }
  232.  
  233. article.book .details ul li.author,
  234. article.book .details ul li.series { float: none; }
  235.  
  236. article.book .details ul li .data { font-size: 14px; color: #444; padding: 0 10px; }
  237.  
  238. }
  239. /* landscape mode */
  240. @media all and (orientation:landscape) {
  241.  
  242. }

Report this snippet  

You need to login to post a comment.