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.

223 lines
5.3 KiB

3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
  1. @import (reference) "./colortheme-all.less";
  2. @import (reference) "./font.less";
  3. .infopages_link () {
  4. text-decoration: none;
  5. color: #0275D8;
  6. cursor: pointer;
  7. display: inline-flex;
  8. &:hover {
  9. transform: scale(1.05);
  10. }
  11. }
  12. .infopages_main () {
  13. --LessLoader_require: LessLoader_currentFile();
  14. }
  15. body {
  16. .font_main();
  17. @infopages_infobar-height: 64px;
  18. @infopages_padding: 32px;
  19. // Basic setup for info pages, this should be used at the global level
  20. background-color: @colortheme_info-background;
  21. a {
  22. color: @cryptpad_color_blue;
  23. &:visited { color: darken(@cryptpad_color_blue, 5%); }
  24. }
  25. a:hover {
  26. opacity: 1;
  27. }
  28. border: 0;
  29. padding: 0;
  30. margin: 0;
  31. font-size: 16px;
  32. font-family: @colortheme_font;
  33. .cp-container {
  34. font-size: 16px;
  35. padding-top: @infopages_padding;
  36. padding-bottom: @infopages_padding;
  37. min-height: 75vh;
  38. h1 {
  39. font-size: 3em;
  40. margin-bottom: 0.5em;
  41. }
  42. h2 {
  43. font-size: 2em;
  44. margin-top: 1em;
  45. margin-bottom: 0.5em;
  46. }
  47. h3 {
  48. font-size: 1.5em;
  49. margin-top: 1em;
  50. margin-bottom: 0.5em;
  51. }
  52. img {
  53. &.left {
  54. float: left;
  55. }
  56. max-width: 100%;
  57. }
  58. .form-group {
  59. & > * {
  60. margin-top: 0.5em;
  61. }
  62. display: flex;
  63. flex-direction: column;
  64. align-items: center;
  65. .checkbox-container {
  66. width: 100%;
  67. display: flex;
  68. align-items: center;
  69. label {
  70. margin: 0;
  71. }
  72. input {
  73. margin-right: 0.5em;
  74. }
  75. }
  76. }
  77. }
  78. footer {
  79. background-color: @cryptpad_color_blue;
  80. .container {
  81. .col {
  82. margin-top: 1em;
  83. }
  84. a {
  85. color: #fff;
  86. &:visited {
  87. color: darken(#fff, 5%);
  88. };
  89. }
  90. margin-bottom: 1em;
  91. ul.list-unstyled {
  92. margin-top: 1em;
  93. text-align: center;
  94. }
  95. }
  96. .cp-bio-foot {
  97. background-image: url(/customize/CryptPad-white-logo.svg);
  98. background-size: 100%;
  99. background-repeat: no-repeat;
  100. p {
  101. color: #fff;
  102. padding-top: 30%;
  103. margin-bottom: 0;
  104. }
  105. }
  106. .cp-version-footer {
  107. background-color: @cryptpad_color_blue;
  108. color: #fff;
  109. text-align: center;
  110. padding: 0.5em;
  111. border-top: 2px solid #fff;
  112. }
  113. }
  114. // Apply this to the top bar div
  115. .cp-topbar {
  116. background: #fff;
  117. z-index: 10000; //Z infopage toolbar
  118. position: fixed;
  119. top: 0;
  120. display: flex;
  121. flex-direction: row;
  122. justify-content: space-between;
  123. align-items: center;
  124. box-sizing: border-box;
  125. width: 100%;
  126. height: @infopages_infobar-height;
  127. padding-left: 0.5em;
  128. padding-right: 0.5em;
  129. vertical-align: middle;
  130. font-size: 1.25em;
  131. line-height: 1.25em;
  132. cursor: default;
  133. user-select: none;
  134. -moz-user-select: none;
  135. -webkit-user-select: none;
  136. -ms-user-select: none;
  137. .navbar-nav {
  138. display: flex;
  139. align-items: center;
  140. }
  141. a {
  142. font-weight: 500;
  143. padding: 0.6em;
  144. .infopages_link()
  145. }
  146. .cp-logo {
  147. margin-right: 0.5em;
  148. }
  149. }
  150. // navigation top bar
  151. .navbar {
  152. background: #fff;
  153. .navbar-brand {
  154. display: block;
  155. background-image: url(/customize/CryptPad_logo_color.svg);
  156. background-repeat: no-repeat;
  157. background-size: contain;
  158. height: 50px;
  159. width: 250px;
  160. @media (max-width: 326px) {
  161. width: 180px;
  162. }
  163. margin-right: 0;
  164. }
  165. a {
  166. border: 2px solid transparent;
  167. white-space: nowrap;
  168. }
  169. .nav-link {
  170. padding: 0.5em 0.7em;
  171. &:hover {
  172. color: @cryptpad_color_light_blue;
  173. }
  174. }
  175. .cp-register-btn {
  176. border: 2px solid #4591C4;
  177. display: inline-block;
  178. }
  179. button:focus {
  180. outline: none;
  181. }
  182. .navbar-toggler {
  183. margin-top: 10px;
  184. color: #4591C4;
  185. }
  186. }
  187. @media (max-width: 1000px) {
  188. #menuCollapse {
  189. text-align: right;
  190. /* @media (min-width: 576px) {
  191. top: 100%;
  192. background: rgba(255,255,255,0.8);
  193. position: absolute;
  194. right: 0px;
  195. padding: 0 20px;
  196. z-index: 1;
  197. }
  198. */
  199. }
  200. .navbar-nav a {
  201. text-align: right !important;
  202. }
  203. .cp-register-btn {
  204. margin-right: 13px;
  205. text-align: center;
  206. }
  207. }
  208. //footer general styles
  209. .footer-title {
  210. font-weight: bold;
  211. font-size: 1.2em;
  212. color: #1E1F1F;
  213. }
  214. }