Value Spring: Tinder for Cancer
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

187 line
2.7KB

  1. #card_swipe_ui {
  2. margin-top: 2em;
  3. width: 90%;
  4. }
  5. a {
  6. color: #00589a;
  7. }
  8. a:hover {
  9. color: #58b0e3;
  10. text-decoration: none;
  11. }
  12. .phone-container {
  13. width: 100%
  14. }
  15. .marvel-device {
  16. margin: 0 auto;
  17. display: inherit;
  18. }
  19. .screen .swiperCard {
  20. margin-top: 2em;
  21. max-width: 90%;
  22. }
  23. .swiperCard {
  24. box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  25. padding: 0px;
  26. border: 1px solid #ccc;
  27. border-radius: 0px 0px 5px 5px;
  28. max-width: 800px;
  29. margin: 0 auto;
  30. margin-top: 0px;
  31. }
  32. .swiperCard-header {
  33. }
  34. .swiperCard-body{
  35. margin: 8px;
  36. }
  37. .app-main{
  38. position: absolute;
  39. width: 100%;
  40. height: 100%;
  41. }
  42. #app-intro {
  43. z-index: 1000;
  44. }
  45. .card-title {
  46. padding: 15px 10px;
  47. height: 50px;
  48. margin: 0px;
  49. font-size: 1.5em;
  50. margin-bottom: 16px;
  51. }
  52. .app-title {
  53. padding: 10px;
  54. margin-top: 0;
  55. font-weight: 200;
  56. font-size: 2em;
  57. box-shadow: #bec3c3 0px 2px 3px;
  58. }
  59. .help-text {
  60. padding-left: 15px;
  61. text-align: center;
  62. padding-top: 30px;
  63. font-weight: 400;
  64. font-size: 1.25em;
  65. }
  66. .screen {
  67. font-family: IBM Plex Sans;
  68. }
  69. .bottom-help {
  70. display: block;
  71. position: absolute;
  72. bottom: 25px;
  73. width: 90%;
  74. text-align: center;
  75. margin-left: 5%;
  76. z-index: -100;
  77. }
  78. .bottom-help-left {
  79. float: left;
  80. display: inline-block;
  81. width: 15%;
  82. }
  83. .bottom-help-right {
  84. float: right;
  85. display: inline-block;
  86. width: 15%;
  87. }
  88. .bottom-help-middle {
  89. max-width: 70%;
  90. margin: 0 auto;
  91. height: 50px;
  92. }
  93. .bottom-help-middle-text {
  94. position: relative;
  95. top: 60%;
  96. }
  97. .bottom-help p {
  98. margin: 0px;
  99. }
  100. .overlay {
  101. position: absolute;
  102. z-index: 10000;
  103. width: 100%;
  104. height: 100%;
  105. }
  106. .overlay.splash {
  107. vertical-align: middle;
  108. text-align: center;
  109. background-image: url("images/splash-bg.png");
  110. background-size: cover;
  111. background-color: white;
  112. }
  113. .splash-body {
  114. font-family: Amatic SC;
  115. color: black;
  116. font-size: 2.5em;
  117. }
  118. .splash-body h1 {
  119. font-size: 2.5em;
  120. margin-top: 44%;
  121. font-weight: 600;
  122. }
  123. .splash-body p {
  124. padding-left: 55px;
  125. padding-right: 55px;
  126. padding-top: 10px;
  127. }
  128. .btn-bottom-right {
  129. display: block;
  130. position: absolute;
  131. bottom: 25px;
  132. right: 25px;
  133. font-size: 0.6em;
  134. width: 125px;
  135. }
  136. .btn-moffitt {
  137. background-color: #00589a;
  138. color: white;
  139. font-weight: 600;
  140. border-color: white;
  141. font-family: IBM Plex Sans;
  142. }
  143. .close-button {
  144. float: right;
  145. position: absolute;
  146. top: 10px;
  147. right: 15px;
  148. }
  149. .app-story {
  150. margin: 15px;
  151. margin-top: 15px;
  152. background: #FFFFFF;
  153. padding: 25px;
  154. margin-top: 65px;
  155. height: 650px;
  156. box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.3);
  157. position: relative;
  158. overflow-y: scroll;
  159. border: white solid 10px;
  160. }
  161. .app-results {
  162. position: absolute;
  163. top: 0;
  164. }
  165. .app-results-body {
  166. padding: 25px;
  167. }
  168. .app-results h2 {
  169. margin: 0;
  170. padding: 0;
  171. font-size: 2.5em;
  172. text-align: left;
  173. }