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.

193 lines
5.2 KiB

3 years ago
3 years ago
3 years ago
3 years ago
  1. @import (reference) "../include/infopages.less";
  2. @import (reference) "../include/colortheme-all.less";
  3. &.cp-page-index {
  4. .infopages_main();
  5. @background_lighter: rgba(0,0,0,0.1);
  6. @background_darker: rgba(0,0,0,0.4);
  7. #cp-main {
  8. color: #FFF;
  9. background: linear-gradient( @background_darker, @background_lighter ), url('/customize/bg14.jpg');
  10. background-size: cover;
  11. background-position: center;
  12. min-height: 100vh;
  13. display: flex;
  14. flex-direction: column;
  15. justify-content: space-between;
  16. align-items: center;
  17. .container {
  18. @media only screen and (max-device-width : 576px) {
  19. margin-top: 6em;
  20. }
  21. }
  22. }
  23. body {
  24. font-family: "Open Sans", Helvetica;
  25. }
  26. .cp-right {
  27. .cp-register-btn {
  28. padding: 0.5em 1em 0.7em 1em;
  29. border: 2px solid #fff;
  30. &:hover {
  31. transform: scale(1.05);
  32. }
  33. }
  34. .cp-login-btn {
  35. color: #fff;
  36. padding: 0.5em 1em 0.7em 1em;
  37. &:hover {
  38. transform: scale(1.05);
  39. }
  40. }
  41. }
  42. .cp-title {
  43. display: flex;
  44. align-items: center;
  45. flex-direction: column;
  46. margin-top: 1.5em;
  47. img {
  48. height: 20vh;
  49. margin-bottom: 1.5em;
  50. }
  51. margin-left: 0;
  52. h1 {
  53. font-family: "Neuropolitical";
  54. //font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif;
  55. //font-family: "Raleway";
  56. font-size: 45px;
  57. }
  58. p {
  59. //font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  60. font-size: 20px;
  61. //font-style: italic;
  62. }
  63. }
  64. .navbar {
  65. background: transparent;
  66. width: 100%;
  67. @media only screen and (max-device-width: 991px) {
  68. margin-top: 0;
  69. }
  70. .navbar-brand {
  71. background-image: url(/customize/CryptPad-white-logo.svg);
  72. }
  73. a {
  74. color: #fff;
  75. &:visited {
  76. color: rgba(255,255,255,.9);
  77. };
  78. }
  79. .nav-link {
  80. &:hover {
  81. color: inherit;
  82. transform: scale(1.05);
  83. };
  84. }
  85. .cp-register-btn {
  86. border: 2px solid #fff;
  87. }
  88. .navbar-toggler {
  89. margin-top: 10px;
  90. color: #fff;
  91. }
  92. }
  93. @callout-padding: 15px;
  94. a:hover {
  95. text-decoration: none;
  96. }
  97. .bs-callout {
  98. display: flex;
  99. align-items: stretch;
  100. margin: 25px 0;
  101. background: rgba(255,255,255,0.6);
  102. color: black;
  103. transition: all .1s ease-in-out;
  104. box-sizing: border-box;
  105. height: 5em;
  106. position: relative;
  107. a {
  108. color: black;
  109. &:hover { text-decoration-line: none; }
  110. }
  111. div h4 {
  112. @media only screen and (min-device-width: 576px) and (max-device-width: 767px) {
  113. font-size: 1.3em;
  114. }
  115. }
  116. }
  117. h4 {
  118. margin: 0;
  119. }
  120. .cp-callout-more-moremsg,.cp-callout-more-lessmsg {
  121. transform: none !important;
  122. }
  123. .bs-callout div {
  124. display: flex;
  125. align-items: center;
  126. justify-content: center;
  127. height: 100%;
  128. position: absolute;
  129. left: 5em;
  130. }
  131. .bs-callout+.bs-callout {
  132. margin-top: -5px;
  133. }
  134. .bs-callout:hover {
  135. //color: white;
  136. transform: scale(1.05);
  137. cursor: pointer;
  138. }
  139. .bs-callout:hover.cp-callout-more {
  140. transform: none !important;
  141. }
  142. .bs-callout .fa {
  143. display: flex;
  144. align-items: center;
  145. font-size: 2em;
  146. padding-left: 0.57em;
  147. width: 2em;
  148. transition: width 0.1s;
  149. color: #fff;
  150. }
  151. .cp-callout-pad .fa { background-color: @colortheme_pad-bg; }
  152. .cp-callout-code .fa { background-color: @colortheme_code-bg; }
  153. .cp-callout-slide .fa { background-color: @colortheme_slide-bg; }
  154. .cp-callout-poll .fa { background-color: @colortheme_poll-bg; }
  155. .cp-callout-kanban .fa { background-color: @colortheme_kanban-bg; }
  156. .cp-callout-whiteboard .fa { background-color: @colortheme_whiteboard-bg; }
  157. .cp-callout-recent .fa { background-color: @colortheme_drive-bg; }
  158. .cp-hidden { display: none !important; }
  159. .cp-callout-more {
  160. display: inline-block;
  161. align-content: center;
  162. height: 2em;
  163. border-radius: 1em;
  164. margin-left: auto;
  165. margin-right: auto;
  166. margin-top: 0;
  167. background: none;
  168. width: 100%;
  169. div {
  170. .infopages_link();
  171. color: #fff;
  172. .fa {
  173. font-size: inherit;
  174. padding: 0;
  175. width: 1em;
  176. padding-left: 5px;
  177. }
  178. }
  179. }
  180. @media (min-width: 576px) and (max-width: 767px) {
  181. .container {
  182. padding-left: 0;
  183. padding-right: 0;
  184. }
  185. div#cp-main.cp-page-index .cp-topbar .navbar-toggler-left {
  186. left: 5px;
  187. }
  188. }
  189. }