Home Explore Help
Register Sign In
RISCI_ATOM
/
ZeroBlog
mirror of https://github.com/HelloZeroNet/ZeroBlog.git
1
0
Fork 0
Files Issues 0 Wiki
Tree: d5ea353819
Branches Tags
ZeroBlog
/
css
/
ZeroBlog.css

ZeroBlog.css 11 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 
  1. /* Design based on medium */
    2. 

  2. 

  3. body { background-color: white; color: #333332; margin: 10px; padding: 0px; font-family: 'Roboto Light', sans-serif; height: 15000px; overflow: hidden; backface-visibility: hidden }
    4. 

  4. body.loaded { height: auto; overflow: auto }
    5. 

  5. h1, h2, h3, h4 { font-family: 'Roboto Light', sans-serif; font-weight: normal; margin: 0px; padding: 0px }
    6. 

  6. h1 { font-size: 32px; line-height: 1.2em; font-weight: bold; letter-spacing: -0.5px; margin-bottom: 5px }
    7. 

  7. h2 { margin-top: 2em }
    8. 

  8. h3 { font-size: 24px; margin-top: 2em }
    9. 

  9. h1 + h2, h2 + h3 { margin-top: inherit }
    10. 

  10. 

  11. p { margin-top: 0.9em; margin-bottom: 0.9em }
    12. 

  12. hr { margin: 20px 0px; border: none; border-bottom: 1px solid #eee; margin-left: auto; margin-right: auto; width: 120px; }
    13. 

  13. small { font-size: 80%; color: #999; }
    14. 

  14. 

  15. a { border-bottom: 1px solid #3498db; text-decoration: none; color: black; font-weight: bold }
    16. 

  16. a.nolink { border-bottom: none }
    17. 

  17. a:hover { color: #3498db }
    18. 

  18. 

  19. .button {
    20. 

  20. 	padding: 5px 10px; margin-left: 10px; background-color: #DDE0E0; border-bottom: 2px solid #999998; background-position: left center;
    21. 

  21. 	border-radius: 2px; text-decoration: none; transition: all 0.5s ease-out; color: #333
    22. 

  22. }
    23. 

  23. .button:hover { background-color: #FFF400; border-color: white; border-bottom: 2px solid #4D4D4C; transition: none; color: inherit }
    24. 

  24. .button:active { position: relative; top: 1px }
    25. 

  25. 

  26. /*.button-delete { background-color: #e74c3c; border-bottom-color: #A83F34; color: white }*/
    27. 

  27. .button-outline { background-color: white; color: #CACACA; border: 1px solid #eee }
    28. 

  28. 

  29. .button-delete:hover { background-color: #FF5442; border: 1px solid #FF5442; color: white }
    30. 

  30. .button-ok:hover { background-color: #27AE60; border: 1px solid #27AE60; color: white }
    31. 

  31. 

  32. .button.loading {
    33. 

  33. 	color: rgba(0,0,0,0); background: #999 url(../img/loading.gif) no-repeat center center;
    34. 

  34. 	transition: all 0.5s ease-out; pointer-events: none; border-bottom: 2px solid #666
    35. 

  35. }
    36. 

  36. .button.publish { background-color: #2ecc71; border-color: #2ecc71; color: white }
    37. 

  37. .button.publish:hover { background-color: #35D679; border-color: #35D679 }
    38. 

  38. 

  39. .cancel { margin-left: 10px; font-size: 80%; color: #999; }
    40. 

  40. 

  41. 

  42. .template { display: none }
    43. 

  43. 

  44. /* Editable */
    45. 

  45. .editable { outline: none }
    46. 

  46. .editable-edit:hover { opacity: 1; border: none; color: #333 }
    47. 

  47. .editable-edit {
    48. 

  48. 	opacity: 0; float: left; margin-top: 0px; margin-left: -40px; padding: 8px 20px; transition: all 0.3s; width: 0px; display: inline-block; padding-right: 0px;
    49. 

  49. 	color: rgba(100,100,100,0.5); text-decoration: none; font-size: 18px; font-weight: normal; border: none;
    50. 

  50. }
    51. 

  51. /*.editing { white-space: pre-wrap; z-index: 1; position: relative; outline: 10000px solid rgba(255,255,255,0.9) !important; }
    52. 

  52. .editing p { margin: 0px; padding: 0px }*/ /* IE FIX */
    53. 

  53. .editor { width: 100%; display: block; overflow :hidden; resize: none; border: none; box-sizing: border-box; z-index: 900; position: relative }
    54. 

  54. .editor:focus { border: 0px; outline-offset: 0px }
    55. 

  55. .editbg {
    56. 

  56. 	display: none; width: 100%; height: 100%; position: fixed; opacity: 0; background-color: white; transition: opacity 0.5s;
    57. 

  57. 	left: 0px; top: 0px; z-index: 500; backface-visibility: hidden;
    58. 

  58. }
    59. 

  59. 

  60. /* -- Editbar -- */
    61. 

  61. 

  62. .bottombar {
    63. 

  63. 	display: none; position: fixed; padding: 10px 20px; opacity: 0; background-color: rgba(255,255,255,0.9);
    64. 

  64. 	right: 30px; bottom: 0px; z-index: 1000; transition: all 0.3s; transform: translateY(50px)
    65. 

  65. }
    66. 

  66. .bottombar.visible { transform: translateY(0px); opacity: 1 }
    67. 

  67. .publishbar { z-index: 990}
    68. 

  68. .publishbar.visible { display: inline-block; }
    69. 

  69. .editbar { perspective: 900px }
    70. 

  70. .markdown-help {
    71. 

  71. 	position: absolute; bottom: 30px; transform: translateX(0px) rotateY(-40deg); transform-origin: right; right: 0px;
    72. 

  72. 	list-style-type: none; background-color: rgba(255,255,255,0.9); padding: 10px; opacity: 0; transition: all 0.6s; display: none
    73. 

  73. }
    74. 

  74. .markdown-help.visible { transform: none; opacity: 1 }
    75. 

  75. .markdown-help li { margin: 10px 0px }
    76. 

  76. .markdown-help code { font-size: 100% }
    77. 

  77. .icon-help { border: 1px solid #EEE; padding: 2px; display: inline-block; width: 17px; text-align: center; font-size: 13px; margin-right: 6px; vertical-align: 1px }
    78. 

  78. .icon-help.active { background-color: #EEE }
    79. 

  79. 

  80. /* -- Left -- */
    81. 

  81. 

  82. .left { float: left; position: absolute; width: 220px; padding-left: 20px; padding-right: 20px; margin-top: 60px; text-align: right }
    83. 

  83. .right { float: left; padding-left: 60px; margin-left: 240px; max-width: 700px; padding-right: 60px; padding-top: 60px }
    84. 

  84. 

  85. .left .avatar {
    86. 

  86. 	background-color: #F0F0F0; width: 60px; height: 60px; border-radius: 100%; margin-bottom: 10px;
    87. 

  87. 	background-position: center center; background-size: 70%; display: inline-block; image-rendering: pixelated;
    88. 

  88. }
    89. 

  89. .left h1 a.nolink { font-family: Tinos; display: inline-block; padding: 1px }
    90. 

  90. .left h1 a.editable-edit { float: none }
    91. 

  91. .left h2 { font-size: 15px; font-family: Tinos; line-height: 1.6em; color: #AAA; margin-top: 14px; letter-spacing: 0.2px }
    92. 

  92. .left ul, .left li { padding: 0px; margin: 0px; list-style-type: none; line-height: 2em }
    93. 

  93. .left hr { margin-left: 100px; margin-right: 0px; width: auto }
    94. 

  94. /*.left .links { width: 230px; margin-left: -60px }*/
    95. 

  95. .left .links.editor { text-align: left !important }
    96. 

  96. 

  97. .lastcomments { background-color: #FAFAFA; margin-left: -25px; padding-right: 15px; padding-bottom: 5px; padding-top: 3px; margin-top: 40px; margin-right: -15px; display: none }
    98. 

  98. .lastcomments h3 { margin-top: 20px; }
    99. 

  99. .lastcomments .lastcomment { font-size: 85%; margin-top: 20px; margin-bottom: 30px; margin-left: 20px; overflow: hidden }
    100. 

  100. .lastcomments .lastcomment .user_name { font-weight: bold; }
    101. 

  101. .lastcomments .lastcomment .details { font-size: 90%; }
    102. 

  102. .lastcomments .lastcomment .details .at { color: #999 }
    103. 

  103. .lastcomments .lastcomment .details .postlink { border-bottom: 1px solid #BBB; }
    104. 

  104. 

  105. /* -- Post -- */
    106. 

  106. 

  107. .posts .new { display: none; position: absolute; top: -50px; margin-left: 0px; left: 50%; transform: translateX(-50%) }
    108. 

  108. 

  109. .posts, .post-full { display: none; position: relative; }
    110. 

  110. .page-main .posts { display: block }
    111. 

  111. .page-post.loaded .post-full { display: block; border-bottom: none }
    112. 

  112. 

  113. 

  114. .post { margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid #eee; min-width: 500px }
    115. 

  115. .post .title a { text-decoration: none; color: inherit; display: inline-block; border-bottom: none; font-weight: inherit }
    116. 

  116. .posts .title a:visited { color: #666969 }
    117. 

  117. .post .details { color: #BBB; margin-top: 5px; margin-bottom: 20px }
    118. 

  118. .post .details .comments-num { border: none; color: #BBB; font-weight: normal; }
    119. 

  119. .post .details .comments-num .num { border-bottom: 1px solid #eee; color: #000; }
    120. 

  120. .post .details .comments-num:hover .num { border-bottom: 1px solid #D6A1DE; }
    121. 

  121. .post .details .like { display: inline-block; padding: 5px 5px; margin-top: -6px; border-radius: 7px; border: none; font-weight: normal; transition: all 0.3s }
    122. 

  122. .post .details .like .icon-heart:before, .post .details .like .icon-heart:after { background-color: #CCC; transition: all 0.3s }
    123. 

  123. .post .details .like .icon-heart { transform-style: preserve-3d; transition: all 0.3s }
    124. 

  124. .post .details .like:hover .icon-heart { transform: scale(1.1) }
    125. 

  125. .post .details .like:hover .icon-heart:before, .post .details .like:hover .icon-heart:after { background-color: #FF5442 }
    126. 

  126. .post .details .like.active .icon-heart:before, .post .details .like.active .icon-heart:after { background-color: #FF5442 }
    127. 

  127. .post .details .like.active .icon-heart-anim { transform: scale(1.8); opacity: 0; transition: all 1s ease-in-out }
    128. 

  128. .post .details .like .num { margin-left: 21px; color: #CCC; transition: all 0.3s }
    129. 

  129. .post .details .like:hover .num { color: #FA6C8D }
    130. 

  130. .post .details .like.loading { pointer-events: none; animation: bounce .3s infinite alternate ease-out; animation-delay: 1s; }
    131. 

  131. .post .body { font-size: 21.5px; line-height: 1.6; font-family: Tinos; margin-top: 20px }
    132. 

  132. 

  133. .post .body h1 { text-align: center; margin-top: 50px }
    134. 

  134. .post .body h1:before { content: " "; border-top: 1px solid #EEE; width: 120px; display: block; margin-left: auto; margin-right: auto; margin-bottom: 50px; }
    135. 

  135. 

  136. .post .body p + ul { margin-top: -0.5em }
    137. 

  137. .post .body li { margin-top: 0.5em; margin-bottom: 0.5em }
    138. 

  138. .post .body hr:first-of-type { display: none }
    139. 

  139. 

  140. .post .body a img { margin-bottom: -8px }
    141. 

  141. .post .body img { max-width: 100% }
    142. 

  142. .post .body table { border-collapse: collapse; margin-bottom: 10px; margin: auto }
    143. 

  143. .post .body td, .post .body th { padding: 5px 10px; border: 1px solid #EEE; border-collapse: collapse; text-align: left }
    144. 

  144. 

  145. code {
    146. 

  146. 	background-color: #f5f5f5; border: 1px solid #ccc; padding: 0px 5px; overflow: auto; border-radius: 2px; display: inline-block;
    147. 

  147. 	color: #444; font-weight: normal; font-size: 13px; vertical-align: text-bottom; border-bottom-width: 2px;
    148. 

  148. }
    149. 

  149. .post .body pre { table-layout: fixed; width: auto; display: table; white-space: normal; }
    150. 

  150. .post .body pre code { padding: 10px 20px; white-space: pre; max-width: 850px; display: block }
    151. 

  151. 

  152. blockquote { border-left: 3px solid #333; margin-left: 0px; padding-left: 1em }
    153. 

  153. /*.post .more {
    154. 

  154. 	display: inline-block; border: 1px solid #eee; padding: 10px 25px; border-radius: 26px; font-size: 11px; color: #AAA; font-weight: normal;
    155. 

  155. 	left: 50%; position: relative; transform: translateX(-50%);
    156. 

  156. }*/
    157. 

  157. 

  158. .post .more { border: 2px solid #333; padding: 10px 20px; font-size: 15px; margin-top: 30px; display: none; transition: all 0.3s }
    159. 

  159. .post .more .readmore {  }
    160. 

  160. .post .more:hover { color: white; box-shadow: inset 150px 0px 0px 0px #333; }
    161. 

  161. .post .more:active { color: white; box-shadow: inset 150px 0px 0px 0px #AF3BFF; transition: none; border-color: #AF3BFF }
    162. 

  162. 

  163. .pager { margin-bottom: 200px }
    164. 

  164. .pager a { border: 2px solid #333; padding: 10px 20px; font-size: 15px; display: none; transition: all 0.3s }
    165. 

  165. .pager a:hover { color: white; box-shadow: inset 150px 0px 0px 0px #333; }
    166. 

  166. .pager a:active { color: white; box-shadow: inset 150px 0px 0px 0px #AF3BFF; transition: none; border-color: #AF3BFF }
    167. 

  167. .pager .next { float: right }
    168. 

  168. .pager .prev:hover { box-shadow: inset -150px 0px 0px 0px #333; }
    169. 

  169. .pager .prev:active { box-shadow: inset -150px 0px 0px 0px #AF3BFF; }
    170. 

  170. 

  171. .zoom-img {
    172. 

  172. 	filter: none; -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
    173. 

  173. 	backface-visibility: hidden; transform: translateZ(0); image-rendering: optimizeSpeed;
    174. 

  174. }
    175. 

  175. /* Score */
    176. 

  176. /*
    177. 

  177. .score {
    178. 

  178. 	border: 1px solid #eee; margin-right: 5px; margin-left: 5px; padding: 2px 7px; border-radius: 10px; color: #AAA; background-position: left center; font-weight: bold; font-size: 12px;
    179. 

  179. 	display: inline-block; height: 1.2em; overflow: hidden; vertical-align: -0.5em; line-height: 7px; transition: background-color 0.3s; height: 20px; box-sizing: border-box
    180. 

  180. }
    181. 

  181. .score-active, .score-inactive { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: inline-block; margin-top: 3px }
    182. 

  182. .score-active { display: block; margin-top: 5px }
    183. 

  183. .score.active { background-color: #2ecc71; color: white }
    184. 

  184. .score.loading {
    185. 

  185. 	color: rgba(255,255,255,0) !important; background: #2ecc71 url(../img/loading.gif) no-repeat center center;
    186. 

  186. 	transition: background 0.5s ease-out; pointer-events: none; border: 1px solid #2ecc71
    187. 

  187. }
    188. 

  188. 

  189. .score.active .score-inactive, .score:hover .score-inactive { transform: translateY(-14px); opacity: 0.5 }
    190. 

  190. .score.active .score-active, .score:hover .score-active { transform: translateY(-14px) }
    191. 

  191. .score:hover, .score.active { border: 1px solid #2ecc71; color: #AAA; }
    192. 

  192. 

  193. .score:active {  border: 1px solid #AAA !important; transform: translateY(1px) }
    194. 

  194. 

  195. .noscore .score-inactive .icon-up { margin-left: 6px }
    196. 

  196. .noscore .score-inactive .score-num { display: none }
    197. 

  197. */
    198. 

  198. 

  199. @keyframes bounce {
    200. 

  200. 	  0% { transform: translateY(0); }
    201. 

  201. 	100% { transform: translateY(-3px); }
    202. 

  202. }
    203.