message.css 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. /**
  2. * @name message.css
  3. * @author Tobias Reich
  4. * @copyright 2014 by Tobias Reich
  5. */
  6. .message_overlay {
  7. position: fixed;
  8. width: 100%;
  9. height: 100%;
  10. top: 0px;
  11. left: 0px;
  12. background-color: rgba(0,0,0,.85);
  13. z-index: 1000;
  14. }
  15. .message {
  16. position: absolute;
  17. display: inline-block;
  18. width: 500px;
  19. margin-left: -250px;
  20. margin-top: -95px;
  21. background-color: #444;
  22. background-image: -webkit-linear-gradient(top, rgb(75, 75, 75), rgb(45, 45, 45));
  23. background-image: -moz-linear-gradient(top, rgb(75, 75, 75), rgb(45, 45, 45));
  24. background-image: -ms-linear-gradient(top, rgb(75, 75, 75), rgb(45, 45, 45));
  25. background-image: linear-gradient(top, rgb(75, 75, 75), rgb(45, 45, 45));
  26. border-radius: 5px;
  27. box-shadow: 0px 0px 5px #000, inset 0px 1px 0px rgba(255,255,255,.08), inset 1px 0px 0px rgba(255,255,255,.03), inset -1px 0px 0px rgba(255,255,255,.03);
  28. /* Animation */
  29. -webkit-animation-name: moveUp;
  30. -webkit-animation-duration: .3s;
  31. -webkit-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
  32. -moz-animation-name: moveUp;
  33. -moz-animation-duration: .3s;
  34. -moz-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
  35. animation-name: moveUp;
  36. animation-duration: .3s;
  37. animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
  38. }
  39. /* Header ------------------------------------------------*/
  40. .message h1 {
  41. float: left;
  42. width: 100%;
  43. padding: 12px 0px;
  44. color: #fff;
  45. font-size: 16px;
  46. font-weight: bold;
  47. text-shadow: 0px -1px 0px #222;
  48. text-align: center;
  49. }
  50. .message .close {
  51. position: absolute;
  52. top: 0px;
  53. right: 0px;
  54. padding: 12px 14px 6px 7px;
  55. color: #aaa;
  56. font-size: 20px;
  57. text-shadow: 0px -1px 0px #222;
  58. cursor: pointer;
  59. }
  60. .message .close:hover {
  61. color: #fff;
  62. }
  63. /* Text ------------------------------------------------*/
  64. .message p {
  65. float: left;
  66. width: 90%;
  67. margin-top: 1px;
  68. padding: 12px 5% 15px 5%;
  69. color: #eee;
  70. font-size: 14px;
  71. text-shadow: 0px -1px 0px #222;
  72. line-height: 20px;
  73. }
  74. .message p b {
  75. font-weight: bold;
  76. }
  77. .message p a {
  78. color: #eee;
  79. text-decoration: none;
  80. border-bottom: 1px dashed #888;
  81. }
  82. /* Button ------------------------------------------------*/
  83. .message .button {
  84. float: right;
  85. margin: 15px 15px 15px 0px;
  86. padding: 6px 10px 8px 10px;
  87. background-color: #4e4e4e;
  88. background-image: -webkit-linear-gradient(top, rgb(60, 60, 60), rgb(45, 45, 45));
  89. background-image: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(45, 45, 45));
  90. background-image: -ms-linear-gradient(top, rgb(60, 60, 60), rgb(45, 45, 45));
  91. background-image: linear-gradient(top, rgb(60, 60, 60), rgb(45, 45, 45));
  92. color: #ccc;
  93. font-size: 14px;
  94. font-weight: bold;
  95. text-align: center;
  96. text-shadow: 0px -1px 0px #222;
  97. border-radius: 5px;
  98. border: 1px solid #191919;
  99. box-shadow: inset 0px 1px 0px rgba(255,255,255,.1), 0px 1px 0px rgba(255,255,255,.1);
  100. cursor: pointer;
  101. }
  102. .message .button:first-of-type {
  103. margin: 15px 5% 18px 0px !important;
  104. }
  105. .message .button.active {
  106. color: #fff;
  107. box-shadow: inset 0px 1px 0px rgba(255,255,255,.1), 0px 1px 0px rgba(255,255,255,.1), 0px 0px 4px #005ecc;
  108. }
  109. .message .button:hover {
  110. background-color: #565757;
  111. background-image: -webkit-linear-gradient(top, rgb(80, 80, 80), rgb(57, 57, 57));
  112. background-image: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(57, 57, 57));
  113. background-image: -ms-linear-gradient(top, rgb(80, 80, 80), rgb(57, 57, 57));
  114. background-image: linear-gradient(top, rgb(80, 80, 80), rgb(57, 57, 57));
  115. }
  116. .message .button:active,
  117. .message .button.pressed {
  118. background-color: #393939;
  119. background-image: -webkit-linear-gradient(top, rgb(57, 57, 57), rgb(70, 70, 70));
  120. background-image: -moz-linear-gradient(top, rgb(57, 57, 57), rgb(70, 70, 70));
  121. background-image: -ms-linear-gradient(top, rgb(57, 57, 57), rgb(70, 70, 70));
  122. background-image: linear-gradient(top, rgb(57, 57, 57), rgb(70, 70, 70));
  123. }
  124. /* Sign in ------------------------------------------------*/
  125. .sign_in {
  126. float: left;
  127. width: 100%;
  128. margin-top: 1px;
  129. padding: 5px 0px;
  130. color: #eee;
  131. font-size: 14px;
  132. text-shadow: 0px -1px 0px #222;
  133. line-height: 20px;
  134. }
  135. .sign_in input {
  136. float: left;
  137. width: 88%;
  138. padding: 7px 1% 9px 1%;
  139. margin: 0px 5%;
  140. background-color: transparent;
  141. color: #fff;
  142. text-shadow: 0px -1px 0px #222;
  143. border: none;
  144. border-bottom: 1px solid #222;
  145. box-shadow: 0px 1px 0px rgba(255,255,255,.1);
  146. border-radius: 0px;
  147. outline: none;
  148. }
  149. .sign_in input:first-of-type {
  150. margin-bottom: 10px;
  151. }
  152. .sign_in input.error:focus {
  153. box-shadow: 0px 1px 0px rgba(204, 0, 7, 0.6);
  154. }
  155. .message #version {
  156. display: inline-block;
  157. margin-top: 23px;
  158. margin-left: 5%;
  159. color: #888;
  160. text-shadow: 0px -1px 0px #111;
  161. }
  162. .message #version span {
  163. display: none;
  164. }
  165. .message #version span a {
  166. color: #888;
  167. }
  168. /* Input Misc ------------------------------------------------*/
  169. .message input.text {
  170. float: left;
  171. width: calc(100% - 10px);
  172. padding: 17px 5px 9px 5px;
  173. margin-top: 10px;
  174. background-color: transparent;
  175. color: #fff;
  176. text-shadow: 0px -1px 0px #222;
  177. border: none;
  178. box-shadow: 0px 1px 0px rgba(255,255,255,.1);
  179. border-bottom: 1px solid #222;
  180. border-radius: 0px;
  181. outline: none;
  182. }
  183. .message input.less {
  184. margin-bottom: -10px;
  185. }
  186. .message input.more {
  187. margin-bottom: 30px;
  188. }
  189. .message .copylink {
  190. margin-bottom: 20px;
  191. }
  192. /* Radio Buttons ------------------------------------------------*/
  193. .message .choice {
  194. float: left;
  195. padding: 12px 5% 15px;
  196. color: #fff;
  197. }
  198. .message .choice input {
  199. float: left;
  200. }
  201. .message .choice h2 {
  202. float: left;
  203. margin: 1px 0px 0px 8px;
  204. color: #fff;
  205. font-size: 14px;
  206. font-weight: 700;
  207. text-shadow: 0 -1px 0 #222;
  208. }
  209. .message .choice p {
  210. margin-top: 2px;
  211. padding: 0px 5% 0px 25px;
  212. color: #aaa;
  213. font-size: 13px;
  214. }
  215. .message .choice p input {
  216. width: 100%;
  217. padding: 10px 1px 9px;
  218. margin-top: 10px;
  219. }