Advanced Search

Calibre Remote - CSS

/ Published in: CSS
Save to your folder(s)
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).

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.