message.scss 4.5 KB

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