Guest User

simple customcss + bookmark bar

a guest
Jul 1st, 2015
5
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.67 KB | None | 0 0
  1. /* simple custom CSS + bookmark bar on top for subeta. */
  2. /* by ire */
  3.  
  4. /* RESET ------------------------------------------------------------------ */
  5. #postcards, #header, #rightbg, .sidebar-widget-sep, .menu-btn-left, .menu-btn-right {display: none!important;}
  6.  
  7.  
  8.  
  9. /* SITELY ----------------------------------------------------------------- */
  10. /* page-related */
  11. #page {
  12. background-color: #fff;
  13. min-width: 800px;
  14. max-width: 100%; /* <--------------------------------------- change this to change the page size. set either % or px. */
  15. box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
  16. }
  17.  
  18. html, body {background: #f6f6f6;}
  19.  
  20. /* text & links*/
  21. body {
  22. margin-left: 50px;
  23. font-family: trebuchet ms;
  24. letter-spacing: 0.3px;
  25. color: #383838;
  26. }
  27. a, a:link, a:active, a:visited {font-family: verdana;}
  28.  
  29. /* text & links - menu nav and sidebar */
  30. .sidebar-widget a, .menu-btn ul li a {
  31. opacity: 0.75;
  32. line-height: 11px;
  33. letter-spacing: -0.7px;
  34. }
  35. .sidebar-widget a:hover, .menu-btn ul li a:hover {
  36. opacity: 1;
  37. font-style: italic;
  38. text-decoration: none;
  39. letter-spacing: -0.4px!important;
  40. }
  41.  
  42. /* content positioning */
  43. #content {margin-left: 210px;}
  44.  
  45.  
  46.  
  47. /* BOOKMARKS -------------------------------------------------------------- */
  48. /* bookmarks - positioning */
  49. #bookmarks {
  50. top: 0!important;
  51. left: 0!important;
  52. height: 0!important;
  53. width: 100%!important;
  54. position: fixed; /* <--------- change to "absolute" if you don't want the bookmarks/time to follow down as you scroll */
  55. margin-left: 260px;
  56. z-index: 9!important;
  57. }
  58. .bookmark {
  59. border: none!important;
  60. border-top-right-radius: 0px!important;
  61. border-bottom-right-radius: 7px!important;
  62. padding: 0px 6px!important;
  63. margin-bottom: 0px!important;
  64. opacity: 0.85;
  65. }
  66.  
  67. /* bookmarks - transition anim and hover */
  68. .bookmark, .bookmark:hover {
  69. transition-property: all;
  70. transition-duration: .5s;
  71. transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  72. }
  73. #bookmarks .first {
  74. margin-top: 0px;
  75. padding: 1px 11px!important;
  76. border-top: 3px solid rgba(0, 0, 0, 0.06)!important;
  77. max-height: 33px;
  78. }
  79. .bookmark:hover {
  80. margin-top: 7px!important;
  81. border-top: 2px solid gray!important;
  82. opacity: 1;
  83. }
  84.  
  85. .bookmark p a cufon.cufon.cufon-canvas {height: 13px; overflow: hidden;}
  86. .bookmark p a cufon.cufon.cufon-canvas:hover {height: auto;}
  87.  
  88.  
  89.  
  90. /* MENU ------------------------------------------------------------------- */
  91. /* menu bar*/
  92. #menu, #menu-right {
  93. background-image: none;
  94. background-color: #383838;
  95. margin-top: 0px;
  96. }
  97. #menu {
  98. border-bottom: 15px solid #fff;
  99. border-top: 3px solid #37939D!important;
  100. }
  101. #menu-time {
  102. margin-left: 545px;
  103. border-radius: 7px 0px 7px 0px;
  104. font-size: 13px;
  105. width: 100px;
  106. text-transform: lowercase;
  107. z-index: 15!important;
  108. position: fixed;
  109. background-color: rgba(0,0,0,0.67); color: #efefef;
  110. top: 0;
  111. padding: 3px;
  112. border: 1px solid rgba(77, 77, 77, 0.15)
  113. }
  114.  
  115. /* menu bar - logo */
  116. #menu-logo {
  117. width: 185px;
  118. }
  119. #menu-logo, #menu-left {
  120. background-image: none;
  121. background-color: #37939D!important;
  122. top: 0px;
  123. height: 35px;
  124. }
  125. #menu-left {width: 15px!important;}
  126. .menu-logo-txt {display: initial!important;}
  127.  
  128. /* menu bar - nav */
  129. #menu-ul.menu-bar > *.menu-btn {background-image: none;}
  130. .menu-tab canvas {margin-top: 2px;}
  131.  
  132. /* menu bar - nav - dropdowns */
  133. .menu-btn ul {
  134. border: none;
  135. box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.2);
  136. border-radius: 0px 0px 7px 0px;
  137. }
  138. .menu-btn ul li {
  139. padding: 4px 0px;
  140. border: none;
  141. }
  142. .menu-btn ul li a:hover {text-shadow: 1px 2px 2px rgba(100, 100, 176, 0.52);}
  143. .ui.active.top.sidebar, .ui.active.bottom.sidebar {z-index: 99!important;}
  144.  
  145.  
  146.  
  147. /* SIDEBAR ---------------------------------------------------------------- */
  148. /* sidebar - dash & events */
  149. #sidebar-btn-dash, #sidebar-btn-events {
  150. width: 75px;
  151. position: relative;
  152. margin: 0px;
  153. }
  154. #sidebar-btn-dash, #sidebar-btn-events {background: none;}
  155. #sidebar-btn-dash.sidebar-btn-active, #sidebar-btn-dash:hover, #sidebar-btn-events.sidebar-btn-active, #sidebar-btn-events:hover {
  156. text-shadow: 1px 2px 2px rgba(100, 100, 176, 0.52);
  157. font-style: italic;
  158. }
  159. #sidebar-btn-dash.sidebar-btn-active::before, #sidebar-btn-events.sidebar-btn-active::before {
  160. content: '\2023 ';
  161. position: absolute;
  162. margin-left: 20%;
  163. }
  164.  
  165. /* sidebar - size & positioning */
  166. #sidebar-top {margin-bottom: 10px;}
  167. .sidebar-widget {width: 195px;margin-left: 0;}
  168. #sidebar-btn-dash::after {content: 'dash';}
  169. #sidebar-btn-events::after {content: 'events';}
  170. #sidebar-btn-events::after, #sidebar-btn-dash::after {
  171. margin-left: 28%;
  172. vertical-align: sub;
  173. }
  174. #sidebar, #sidebar-inner {
  175. width: 200px;
  176. padding: 0px;
  177. margin-bottom: -10px;
  178. background-image: none;
  179. }
  180.  
  181. /* sidebar - event bubble */
  182. .events-bubble {box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.2);}
  183.  
  184.  
  185.  
  186. /* SIDEBAR 2 -------------------------------------------------------------- */
  187. /* styling - inner & background */
  188. #sidebar-inner {
  189. color: #888;
  190. background: linear-gradient(to bottom, transparent, #fff), #F2F2F2;
  191. border-radius: 0px 10px 0px 0px;
  192. height: auto!important;
  193. padding-bottom: 25px;
  194. font-size: 11px!important;
  195. }
  196.  
  197. /* styling - individual widgets */
  198. .sidebar-widget {
  199. margin-bottom: 20px;
  200. border: none;
  201. border-bottom: 2px solid #b2b2b2!important;
  202. }
  203. .sidebar-widget-contents {
  204. border: none!important;
  205. background-color: #fafafa;
  206. padding: 4px;
  207. line-height: 1.3em;
  208. }
  209. .sidebar-widget-contents .event-sep {
  210. width: 95%!important;
  211. opacity: 0.1;
  212. }
  213.  
  214. /* styling - header and buttons */
  215. .sidebar-widget-header {
  216. border-radius: 0px 8px 0px 0px;
  217. opacity: 1;
  218. padding: 4px;
  219. }
  220. .sidebar-widget-header a.event-remove-cat {
  221. margin-left: 30px;top: 3px;
  222. }
  223. .sidebar-widget .sidebar-widget-arrow {
  224. top: 5px;
  225. right: 4px;
  226. border-radius: 6px;
  227. }
  228.  
  229.  
  230.  
  231. /* PAGES ------------------------------------------------------------------ */
  232. /* site-related - colors */
  233. .wishlist {border: 1px solid #37939D;}
  234. .ui.blue.message, .ui.info.message {background-color: #f9f9f9;}
  235.  
  236.  
  237.  
  238. /* FORUMS ----------------------------------------------------------------- */
  239. .ui.tertiary.inverted.segment {
  240. background-color: #383838!important;
  241. border-bottom: none;
  242. }
  243. .ui.label {
  244. background-color: #DBDBDB!important;
  245. color: #000!important;
  246. }
  247. .ui.segment.attached {
  248. box-shadow: none;
  249. border-bottom: 2px solid #37939D;
  250. }
  251. .ui.segment {
  252. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1)!important;
  253. background-color: #fff!important;
  254. }
  255.  
  256.  
  257.  
  258. /* TRADES ----------------------------------------------------------------- */
  259. table.ui {
  260. border: 1px solid #eee;
  261. border-radius: 15px 15px 0px 0px;
  262. border-bottom: 2px solid #37939D;
  263. }
  264. td.sp-sub {border: none;background: none;}
  265.  
  266.  
  267.  
  268. /* floating items */
  269. .floating_item {top: 0px!important; left: 0px!important;}
  270. .floating_item img {border: 12px solid red;}
Advertisement
Add Comment
Please, Sign In to add comment