dashboard.css 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. a {
  2. text-decoration: none !important;
  3. }
  4. /* Logo */
  5. a.logo {
  6. display: block;
  7. }
  8. a.logo img {
  9. display: block;
  10. width: 60%;
  11. margin: auto;
  12. }
  13. /* The User Profile bar */
  14. .user-bar {
  15. margin-top: 2.8em;
  16. margin-bottom: 3.1em;
  17. }
  18. .user-bar span {
  19. font-size: 2em;
  20. }
  21. .user-bar img {
  22. margin-right: 1.2em;
  23. vertical-align: middle;
  24. }
  25. /* ----------------------------------------------
  26. Log out button
  27. ----------------------------------------------- */
  28. .dashbord-logout-btn {
  29. outline: 0;
  30. padding: 0.25em 1.2em !important;
  31. background-color: rgb(126, 150, 188);
  32. color: #ffffff !important;
  33. font-size: 1em !important;
  34. color: rgb(51, 51, 51);
  35. border: none;
  36. border-radius: 0.5em;
  37. }
  38. /* ----------------------------------------------
  39. Create new canvas
  40. ----------------------------------------------- */
  41. .create-canvas-btn {
  42. display: block;
  43. border: 2px solid #546e7a;
  44. color: #546e7a;
  45. border-radius: 5px;
  46. padding: 1.8em;
  47. margin-top: 2.8em;
  48. margin-bottom: 3.2em;
  49. font-size: 1.25em;
  50. transition: 0.2s all;
  51. }
  52. /* The icon for the add canvas */
  53. .create-canvas-btn span {
  54. margin-right: 0.25em;
  55. font-size: 1.5em;
  56. vertical-align: middle;
  57. margin-bottom: 0.1em;
  58. }
  59. .create-canvas-btn:hover {
  60. background-color: #546e7a;
  61. color: #fff;
  62. }
  63. /* ----------------------------------------------
  64. Canvas gallery
  65. ----------------------------------------------- */
  66. .canvas-gallery-item {
  67. margin-bottom: 1.8%;
  68. cursor: pointer;
  69. }
  70. .canvas-gallery-item .col-md-12 {
  71. width: 95%;
  72. margin: 2.5% 2.5% 0 2.5%;
  73. background-color: #546e7a; /* Default */
  74. border-radius: 5px;
  75. padding: 2.75em 1em 1em 1em;
  76. height:15em;
  77. transition:all 0.3s;
  78. }
  79. .canvas-gallery-item .col-md-12:hover {
  80. background-color: #546e7a !important;
  81. color: white;
  82. }
  83. /* These colors will be dynamically added by jQuery */
  84. .canvas-gallery-item .col-md-12.color0 {
  85. background-color: #85ade5;
  86. }
  87. .canvas-gallery-item .col-md-12.color1 {
  88. background-color: #aed581;
  89. }
  90. .canvas-gallery-item .col-md-12.color2 {
  91. background-color: #6bb5b4;
  92. }
  93. .canvas-gallery-item .col-md-12.color3 {
  94. background-color: #a281d1;
  95. }
  96. .canvas-gallery-item .col-md-12.color4 {
  97. background-color: #29bca4;
  98. }
  99. .canvas-gallery-item .old-version {
  100. padding-top: 1.7em !important;
  101. }
  102. /* Remove Button */
  103. .remove-canvas{
  104. color: #37474f;
  105. margin-top: 0;
  106. border: none;
  107. border-radius: 0 0 5px 5px;
  108. padding: 0.5em;
  109. background-color: #cfd8dc;
  110. transition: all 0.3s;
  111. }
  112. .remove-canvas:hover{
  113. color: #fff;
  114. background-color: #546e7a;
  115. }
  116. .remove-canvas span{
  117. margin-right: 0.5em;
  118. }
  119. /* ----------------------------------------------
  120. Background shadow on all types of popups
  121. ----------------------------------------------- */
  122. div#shadow {
  123. display: none;
  124. width: 100%;
  125. height: 100%;
  126. position: fixed;
  127. top: 0;
  128. left: 0;
  129. z-index: 2;
  130. background-color: rgba(0, 0, 0, 0.5);
  131. }
  132. /* ----------------------------------------------
  133. Window buttons and and dialog buttons
  134. ----------------------------------------------- */
  135. button.window-button {
  136. outline: 0;
  137. padding: 0.25em 1.2em !important;
  138. background-color: rgb(126, 150, 188);
  139. color: #ffffff !important;
  140. font-size: 1em !important;
  141. color: rgb(51, 51, 51);
  142. border: none;
  143. border-radius: 0.5em;
  144. }
  145. button.window-button:hover {
  146. color: #ffffff;
  147. opacity: 0.75;
  148. border-color: #ffffff;
  149. }
  150. .dialog-content button.window-button {
  151. float: left;
  152. margin: 1em 0.75em 0 0;
  153. }
  154. /* ----------------------------------------------
  155. Dialog windows
  156. ----------------------------------------------- */
  157. div.dialog {
  158. display: none;
  159. width: 26%;
  160. position: fixed;
  161. font-family: 'Open Sans', sans-serif;
  162. z-index: 5;
  163. background-color: rgb(236, 239, 241);
  164. border-radius: 5px;
  165. min-height: 130px;
  166. /* Center window horizontally and vertically */
  167. top: 50%;
  168. left: 50%;
  169. transform: translate(-50%, -50%);
  170. }
  171. div.dialog h2 {
  172. color: rgb(79, 93, 115);
  173. font-size: 1.4em;
  174. margin: 0;
  175. color: #444;
  176. }
  177. div.dialog p {
  178. font-size: 0.95em;
  179. color: rgb(51, 51, 51);
  180. }
  181. div.dialog button {
  182. position: relative;
  183. top: -8px;
  184. font-size: 2.5em;
  185. outline: 0;
  186. color: #444;
  187. float: right;
  188. }
  189. div.dialog-header {
  190. background-color: rgb(210, 210, 210);
  191. padding: 0.65em 0.75em 0.65em 0.75em;
  192. border-radius: 5px 5px 0 0;
  193. width: 100%;
  194. }
  195. div.dialog-content {
  196. padding: 0.75em 1.5em 0.75em 0.75em;
  197. }
  198. /* ----------------------------------------------
  199. Footer
  200. ----------------------------------------------- */
  201. footer {
  202. font-size: 1em;
  203. clear: both;
  204. margin-top: 2em;
  205. padding: 1.5em;
  206. background-color: #37474f;
  207. ;
  208. color: white;
  209. }
  210. footer .license a {
  211. color: #759BCF;
  212. }
  213. footer .contact p{
  214. color: #18AE90;
  215. font-size:1em;
  216. }
  217. footer .contact h2{
  218. color:#6bb5b4;
  219. }
  220. footer .license {
  221. margin: 0.5em auto 1.8em auto;
  222. }
  223. footer p.ethics-copy.terms, footer p.ethics-copy.privacy {
  224. text-decoration: none;
  225. padding: 0 0.5em;
  226. display: inline-block;
  227. }
  228. footer p.cc {
  229. margin-top: 2.8em;
  230. }
  231. footer p.terms, footer p.privacy {
  232. margin: 1.9em auto;
  233. }
  234. footer .privacy a {
  235. color: #a67de0;
  236. }
  237. footer .terms a {
  238. color: #aed581;
  239. }
  240. /* Footer license icons */
  241. footer .license-icons ul {
  242. list-style-type: none;
  243. margin-left: 0;
  244. padding-left: 0;
  245. }
  246. footer .license-icons li {
  247. display: inline-block;
  248. margin: 1.2em 0.2em;
  249. }
  250. footer .license-icons ul img {
  251. width: 3.5em;
  252. }