You are here

mostpopular-full.css in Drupal Most Popular 7

Same filename and directory in other branches
  1. 6 css/mostpopular-full.css
Non-displayable characters.

File

css/mostpopular-full.css
View source
  1. /* $Id$ */
  2. /*
  3. * Drupal Most Popular - Showcase the most popular content across your Drupal website and engage your audience.
  4. * Copyright © 2010 New Signature
  5. *
  6. * This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  7. * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
  8. * You should have received a copy of the GNU General Public License along with this program. If not, see .
  9. * You can contact New Signature by electronic mail at labs@newsignature.com –or- by U.S. Postal Service at 1100 H St. NW, Suite 940, Washington, DC 20005.
  10. */
  11. /**
  12. * Most Popular Basic Styles
  13. *
  14. * This is an example of basics styles for the Most Popular block. It is meant to give you
  15. * a good start with styling it.
  16. *
  17. * It depends upon the [module root]/mostpopular/css/mostpopular-basic.css.
  18. */
  19. /*
  20. * Typography
  21. */
  22. /**
  23. * The type treatment for the top two rows of filters.
  24. */
  25. .mostpopular-block .mostpopular--intervals a,
  26. .mostpopular-block .mostpopular--services a,
  27. .mostpopular-block .mostpopular--label {
  28. /* font-family: Arial, sans-serif; */
  29. /* font-size: 14px; */
  30. /* text-decoration: none; */
  31. }
  32. /**
  33. * The type treatment for the filter labels.
  34. */
  35. .mostpopular-block .mostpopular--label {
  36. font-weight: bold;
  37. }
  38. /**
  39. * The type treatment for the current filter link.
  40. */
  41. .mostpopular-block .mostpopular--intervals .selected a,
  42. .mostpopular-block .mostpopular--services .selected a {
  43. text-decoration: none;
  44. }
  45. /**
  46. * The type treatment for the result items.
  47. */
  48. .mostpopular-block .mostpopular--items {
  49. /* font-family: Arial, sans-serif; */
  50. /* font-size: 15px; */
  51. }
  52. /**
  53. * The type treatment for the article title and link
  54. */
  55. .mostpopular-block .mostpopular--items a {
  56. text-decoration: none;
  57. }
  58. /**
  59. * The type treatment for the article title
  60. */
  61. .mostpopular-block .mostpopular--items .title {
  62. /* font-weight: bold; */
  63. }
  64. /**
  65. * The type treatment for the popularity count for each article
  66. */
  67. .mostpopular-block .mostpopular--items .count {
  68. font-size: 85%;
  69. }
  70. /*
  71. * Color
  72. */
  73. /**
  74. * The border color around the Most Popular block box.
  75. */
  76. .mostpopular-block {
  77. border-color: #333;
  78. }
  79. /**
  80. * The background color for the service filter bar.
  81. */
  82. .mostpopular-block .mostpopular--services {
  83. background-color: #bbb;
  84. }
  85. /**
  86. * The border color for the bottom of the service filter bar.
  87. */
  88. .mostpopular-block .mostpopular--services,
  89. .mostpopular-block .mostpopular--services .selected a {
  90. border-color: #aaa;
  91. }
  92. /**
  93. * The background color for the interval filter bar.
  94. */
  95. .mostpopular-block .mostpopular--intervals,
  96. .mostpopular-block .mostpopular--services .selected a {
  97. background-color: #ddd;
  98. }
  99. /**
  100. * The border color for the bottom of the interval filter bar.
  101. */
  102. .mostpopular-block .mostpopular--intervals,
  103. .mostpopular-block .mostpopular--intervals .selected a {
  104. border-color: #ccc;
  105. }
  106. /**
  107. * The background color for the content area.
  108. */
  109. .mostpopular-block .mostpopular--content,
  110. .mostpopular-block .mostpopular--intervals .selected a {
  111. background-color: white;
  112. }
  113. /**
  114. * The color for the services filter bar label.
  115. */
  116. .mostpopular-block .mostpopular--services .mostpopular--label {
  117. /* color: #000; */
  118. }
  119. /**
  120. * The color for the interval filter bar label.
  121. */
  122. .mostpopular-block .mostpopular--interval .mostpopular--label {
  123. /* color: #000; */
  124. }
  125. /**
  126. * The color and background for the services links.
  127. */
  128. .mostpopular-block .mostpopular--services a {
  129. /* color: blue; */
  130. /* background-color: white; */
  131. }
  132. /**
  133. * The color and background for the interval links.
  134. */
  135. .mostpopular-block .mostpopular--interval a {
  136. /* color: blue; */
  137. /* background-color: white; */
  138. }
  139. /**
  140. * The color for the selected service link.
  141. */
  142. .mostpopular-block .mostpopular--services .selected a {
  143. /* color: blue; */
  144. }
  145. /**
  146. * The color for the selected interval link.
  147. */
  148. .mostpopular-block .mostpopular--interval .selected a {
  149. /* color: blue; */
  150. }
  151. /**
  152. * The color for the items links.
  153. */
  154. .mostpopular-block .mostpopular--items a {
  155. /* color: blue; */
  156. /* background-color: transparent; */
  157. }
  158. /**
  159. * The color for the items count.
  160. */
  161. .mostpopular-block .mostpopular--items a .count {
  162. color: #666;
  163. }
  164. /**
  165. * The hover color for the items links.
  166. */
  167. .mostpopular-block .mostpopular--items a:hover {
  168. /* color: blue; */
  169. background-color: #f0f0f0;
  170. }
  171. /*
  172. * Layout
  173. */
  174. /**
  175. * Layout for the most popular box container.
  176. */
  177. .mostpopular-block {
  178. border-style: solid;
  179. border-width: 1px;
  180. display: block;
  181. }
  182. /**
  183. * Layout for the label for filters.
  184. */
  185. .mostpopular-block .mostpopular--label {
  186. padding-right: 0.25em;
  187. }
  188. /**
  189. * Layout for the filter bars.
  190. */
  191. .mostpopular-block .mostpopular--services,
  192. .mostpopular-block .mostpopular--intervals {
  193. padding: 3px 2px 0 2px;
  194. border-bottom-style: solid;
  195. border-bottom-width: 1px;
  196. }
  197. /**
  198. * Layout for the filter links.
  199. */
  200. .mostpopular-block .mostpopular--intervals a,
  201. .mostpopular-block .mostpopular--services a {
  202. display: block;
  203. }
  204. /**
  205. * Layout for the selected filter links.
  206. */
  207. .mostpopular-block .mostpopular--intervals .selected a,
  208. .mostpopular-block .mostpopular--services .selected a {
  209. padding: 0 3px 1px;
  210. margin-bottom: -1px; /* knock out the border below the active link */
  211. border-style: solid;
  212. border-width: 1px 1px 0 1px;
  213. /* Give it rounded corners on the top. */
  214. -moz-border-radius: 3px 3px 0 0;
  215. -webkit-border-top-right-radius: 3px;
  216. -webkit-border-top-left-radius: 3px;
  217. border-radius: 3px 3px 0 0;
  218. }
  219. /**
  220. * Layout for the results items list.
  221. */
  222. .mostpopular-block .mostpopular--items {
  223. padding: 0;
  224. margin: 0;
  225. display: block;
  226. list-style-type: none;
  227. }
  228. /**
  229. * Layout for the results item list items.
  230. */
  231. .mostpopular-block ul.mostpopular--items li {
  232. padding: 0;
  233. margin: 0;
  234. display: block;
  235. list-style-type: none;
  236. }
  237. /**
  238. * Layout for the results item links.
  239. */
  240. .mostpopular-block .mostpopular--items a {
  241. padding: .25em .5em;
  242. display: block;
  243. }
  244. /**
  245. * Layout for the results item first link.
  246. */
  247. .mostpopular-block .mostpopular--items .first a {
  248. /* Double the padding to the bottom to match the spacing between links */
  249. padding-top: .5em;
  250. }
  251. /**
  252. * Layout for the results item last link.
  253. */
  254. .mostpopular-block .mostpopular--items .last a {
  255. /* Double the padding to the top to match the spacing between links */
  256. padding-bottom: .5em;
  257. }