API tools faq
paste
Advertisement
lllumineux

Untitled

lllumineux
Feb 5th, 2020
189
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.75 KB | None | 0 0
raw download clone embed print report
  1. @import url('https://fonts.googleapis.com/css?family=Montserrat:300б300i,400,400i,500,600&display=swap&subset=cyrillic');
  2.  
  3. html {
  4. color: #25252d;
  5. overflow-x: hidden;
  6. font-family: 'Montserrat', sans-serif;
  7. }
  8. .login-page-header, .signup-page-header {
  9. display: flex;
  10. justify-content: space-between;
  11. align-items: center;
  12. padding: 25px 50px 0 50px;
  13. }
  14. .login-page-info, .signup-page-info {
  15. display: flex;
  16. align-items: center;
  17. }
  18. .login-page-info .slogan, .signup-page-info .slogan {
  19. font-size: 17px;
  20. font-weight: 500;
  21. margin: 0 0 0 50px;
  22. }
  23. .login-page-content, .signup-page-content {
  24. display: flex;
  25. justify-content: center;
  26. }
  27. .signup-button, .login-button {
  28. cursor: pointer;
  29. outline: none;
  30. text-decoration: none;
  31. transition: ease 300ms;
  32. color: #25252d;
  33. font-size: 13px;
  34. }
  35. .signup-button:hover, .login-button:hover {
  36. opacity: .75;
  37. }
  38. .logo {
  39. height: 37px;
  40. }
  41. .login-page-illustration, .signup-page-illustration {
  42. z-index: -2;
  43. left: 0;
  44. position: absolute;
  45. width: 800px;
  46. }
  47. .login-window__wrapper {
  48. z-index: -1;
  49. position: absolute;
  50. display: flex;
  51. justify-content: flex-end;
  52. align-items: center;
  53. top: 0;
  54. width: 100%;
  55. height: 100%;
  56. }
  57. .login-window {
  58. background-color: #25252d;
  59. display: flex;
  60. flex-direction: column;
  61. justify-content: center;
  62. align-items: center;
  63. border-radius: 25px;
  64. padding: 35px 50px;
  65. margin: 0 50px 0 0;
  66. }
  67. .login-window-label__wrapper {
  68. display: flex;
  69. width: 100%;
  70. justify-content: flex-start;
  71. }
  72. .login-window-label {
  73. color: #fff;
  74. font-size: 25px;
  75. }
  76. .login-window__content {
  77. display: flex;
  78. flex-direction: column;
  79. justify-content: center;
  80. align-items: center;
  81. margin: 50px 0 0 0;
  82. }
  83. .login-window-form {
  84. display: flex;
  85. align-items: center;
  86. background-color: #fff;
  87. border-radius: 100px;
  88. width: 365px;
  89. height:42px;
  90. padding: 0 0 0 10px;
  91. }
  92. .login-window-form-icon {
  93. width: 16px;
  94. }
  95. .login-window-form-input {
  96. border: none;
  97. outline: none;
  98. font-size: 16px;
  99. font-weight: 500;
  100. width: 92%;
  101. height: 32px;
  102. margin: 0 0 0 5px;
  103. }
  104. .password-form {
  105. margin: 15px 0 0 0;
  106. }
  107. .password-forget {
  108. cursor: pointer;
  109. text-decoration: underline;
  110. font-weight: 300;
  111. color: #fff;
  112. font-size: 13px;
  113. }
  114. .login-via-networks__wrapper {
  115. display: flex;
  116. justify-content: space-around;
  117. align-items: center;
  118. width: 100%;
  119. margin: 15px 0 0 0;
  120. }
  121. .login-via-networks__label {
  122. font-weight: 300;
  123. color: #fff;
  124. font-size: 13px;
  125. opacity: .5;
  126. }
  127. .login-via-networks__content {
  128. display: flex;
  129. justify-content: center;
  130. }
  131. .login-via-networks__element {
  132. margin: 0 7px;
  133. cursor: pointer;
  134. border-radius: 100px;
  135. border: #fff 2px solid;
  136. transition: ease 300ms;
  137. width: 30px;
  138. height: 30px;
  139. }
  140. .login-via-networks__element:hover {
  141. border: #955bff 2px dotted;
  142. }
  143. .login-window-controls {
  144. font-size: 13px;
  145. display: flex;
  146. justify-content: space-between;
  147. align-items: center;
  148. width: 100%;
  149. margin: 50px 0 0 0;
  150. }
  151. .login-window-login-button {
  152. text-decoration: none;
  153. transition: ease 300ms;
  154. cursor: pointer;
  155. display: flex;
  156. justify-content: center;
  157. align-items: center;
  158. color: #fff;
  159. border-radius: 100px;
  160. background-color: #955bff;
  161. height: 42px;
  162. padding: 0 55px;
  163. }
  164. .login-window-login-button:hover {
  165. color: #955bff;
  166. background-color: #fff;
  167. }
  168. .signup-window__wrapper {
  169. z-index: -1;
  170. position: absolute;
  171. display: flex;
  172. justify-content: flex-end;
  173. align-items: center;
  174. top: 0;
  175. width: 100%;
  176. height: 100%;
  177. }
  178. .signup-window {
  179. background-color: #25252d;
  180. display: flex;
  181. flex-direction: column;
  182. justify-content: flex-end;
  183. align-items: center;
  184. border-radius: 25px;
  185. padding: 35px 50px;
  186. margin: 0 50px 0 0;
  187. }
  188. .signup-window-label__wrapper {
  189. display: flex;
  190. width: 100%;
  191. justify-content: flex-start;
  192. }
  193. .signup-window-label {
  194. color: #fff;
  195. font-size: 25px;
  196. }
  197. .signup-window__content {
  198. display: flex;
  199. flex-direction: column;
  200. justify-content: center;
  201. align-items: center;
  202. margin: 50px 0 0 0;
  203. }
  204. .signup-window-form {
  205. display: flex;
  206. align-items: center;
  207. background-color: #fff;
  208. border-radius: 100px;
  209. width: 365px;
  210. height:42px;
  211. padding: 0 0 0 10px;
  212. }
  213. .signup-window-form-icon {
  214. width: 16px;
  215. }
  216. .signup-window-form-input {
  217. border: none;
  218. outline: none;
  219. font-size: 16px;
  220. font-weight: 500;
  221. width: 92%;
  222. height: 32px;
  223. margin: 0 0 0 5px;
  224. }
  225. .signup-window-continue-button, .signup-window-end-signup-button {
  226. transition: ease 300ms;
  227. cursor: pointer;
  228. display: flex;
  229. text-decoration: none;
  230. justify-content: center;
  231. align-items: center;
  232. color: #fff;
  233. font-size: 13px;
  234. border-radius: 100px;
  235. background-color: #955bff;
  236. height: 42px;
  237. width: 100%;
  238. margin: 50px 0 0 0;
  239. }
  240. .signup-window-continue-button:hover, .signup-window-end-signup-button:hover {
  241. color: #955bff;
  242. background-color: #fff;
  243. }
  244. .signup-window-form.login-form {
  245. margin: 15px 0 0 0;
  246. }
  247. .signup-window-text {
  248. font-size: 15px;
  249. }
  250. .password-reestablish-window__wrapper {
  251. top: -9999px;
  252. z-index: -3;
  253. opacity: 0;
  254. position: absolute;
  255. display: flex;
  256. justify-content: center;
  257. align-items: flex-end;
  258. }
  259. .password-reestablish-window {
  260. z-index: 3;
  261. background-color: #955bff;
  262. border-radius: 20px;
  263. width: 300px;
  264. height: 200px;
  265. padding: 25px 25px 50px 25px;
  266. }
  267. .password-reestablish-window-pointer {
  268. z-index: 2;
  269. position: absolute;
  270. background-color: #955bff;
  271. margin: 5px 0 0 0;
  272. width: 25px;
  273. height: 25px;
  274. transform: rotate(45deg);
  275. }
  276. .password-reestablish-window-text {
  277. color: #fff;
  278. font-size: 13px;
  279. }
  280. .password-reestablish-window-email-form {
  281. background-color: #25252d;
  282. color: #fff;
  283. border-radius: 100px;
  284. font-size: 14px;
  285. font-weight: 500;
  286. padding: 0 0 0 15px;
  287. border: none;
  288. width: calc(100% - 15px);
  289. height: 35px;
  290. margin: 50px 0 0 0;
  291. }
  292. .password-reestablish-window-button {
  293. cursor: pointer;
  294. transition: ease 300ms;
  295. color: #fff;
  296. display: flex;
  297. justify-content: center;
  298. align-items: center;
  299. background-color: #25252d;
  300. font-size: 13px;
  301. border-radius: 100px;
  302. width: 100%;
  303. height: 35px;
  304. margin: 10px 0 0 0;
  305. }
  306. .password-reestablish-window-button:hover {
  307. color: #955bff;
  308. background-color: #fff;
  309. }
  310. .base2-header {
  311. z-index: 3;
  312. position: fixed;
  313. top: 0;
  314. left: 150px;
  315. display: flex;
  316. align-items: center;
  317. background-color: #fff;
  318. width: calc(100% - 250px);
  319. height: 125px;
  320. padding: 0 50px;
  321. }
  322. .base2-header__content{
  323. width: 100%;
  324. display: flex;
  325. justify-content: space-between;
  326. align-items: center;
  327. }
  328. .base2-header-controls {
  329. display: flex;
  330. }
  331. .base2-header-controls__element {
  332. cursor: pointer;
  333. text-decoration: none;
  334. color: #25252d;
  335. transition: ease 300ms;
  336. font-size: 12px;
  337. margin: 10px 30px;
  338. }
  339. .base2-header-controls__element:hover {
  340. opacity: .75;
  341. }
  342. .base2-header-controls__element.active {
  343. background-color: #955bff;
  344. color: #fff;
  345. border-radius: 100px;
  346. padding: 10px 20px;
  347. margin: 0 10px;
  348. }
  349. .base2-header-controls__element.active:hover {
  350. opacity: 1;
  351. }
  352. .base2-header-label {
  353. font-size: 20px;
  354. font-weight: 600;
  355. }
  356. .base2-aside {
  357. z-index: 3;
  358. top: 0;
  359. left: 0;
  360. position: fixed;
  361. background-color: #25252d;
  362. min-width: 150px;
  363. max-width: 150px;
  364. height: 100%;
  365. }
  366. .base2-aside__content {
  367. height: calc(100% - 100px);
  368. display: flex;
  369. flex-direction: column;
  370. justify-content: space-between;
  371. align-items: center;
  372. padding: 50px 0;
  373. }
  374. .base2-aside-controls {
  375. display: flex;
  376. flex-direction: column;
  377. }
  378. .base2-aside-logo {
  379. border: 1px solid #fff;
  380. border-radius: 100px;
  381. width: 30px;
  382. }
  383. .base2-aside-controls__element, .base2-aside-exit-button {
  384. transition: ease 300ms;
  385. cursor: pointer;
  386. width: 30px;
  387. margin: 20px;
  388. }
  389. .base2-aside-controls__element:hover, .base2-aside-exit-button:hover {
  390. opacity: .75;
  391. }
  392. .base2-content {
  393. margin: 125px 50px 0 200px;
  394. }
  395. .all-tasks-block {
  396. width: 100%;
  397. }
  398. .task-block {
  399. transition: ease 300ms;
  400. text-decoration: none;
  401. color: #25252d;
  402. outline: none!important;
  403. display: flex;
  404. justify-content: space-between;
  405. align-items: center;
  406. padding: 25px;
  407. width: calc(100% - 40px);
  408. }
  409. .task-block:hover {
  410. border-radius: 15px;
  411. border-bottom: none;
  412. cursor: pointer;
  413. box-shadow: 0 0 15px rgba(0, 0, 0, .2);
  414. }
  415. .task-block-label {
  416. font-weight: 600;
  417. }
  418. .task-block-progress {
  419. display: flex;
  420. align-items: center;
  421. margin: 0 0 -4px 0;
  422. }
  423. .task-block-progress-line__wrapper {
  424. display: flex;
  425. flex-direction: column;
  426. align-items: flex-start;
  427. width: 35vw;
  428. }
  429. .task-block-progress-line-back {
  430. margin: 0 0 -7.5px 0;
  431. background-color: #e4e4ed;
  432. width: 100%;
  433. border-radius: 100px;
  434. height: 4px;
  435. }
  436. .task-block-progress-line-front {
  437. background-color: #955bff;
  438. border-radius: 100px;
  439. height: 10px;
  440. }
  441. .task-block-progress-shower {
  442. font-size: 13px;
  443. font-weight: 600;
  444. margin: -2.5px 0 0 10px;
  445. }
  446. .task-block-points {
  447. font-weight: 500;
  448. color: #babac3;
  449. font-size: 13px;
  450. }
  451. .task-block-status {
  452. width: 20px;
  453. }
  454. .status-change-window {
  455. position: absolute;
  456. display: flex;
  457. justify-content: flex-end;
  458. align-items: center;
  459. z-index: -2;
  460. opacity: 0;
  461. }
  462. .status-change-window__content {
  463. border-radius: 25px;
  464. display: inline-block;
  465. background-color: #25252d;
  466. padding: 20px 35px;
  467. }
  468. .status-change-window-label {
  469. font-size: 15px;
  470. color: #fff;
  471. font-weight: 500;
  472. margin: 0 0 10px 0;
  473. }
  474. .status-change-window-block {
  475. transition: ease 300ms;
  476. cursor: pointer;
  477. display: flex;
  478. align-items: center;
  479. border-radius: 100px;
  480. padding: 5px 10px;
  481. }
  482. .status-change-window-block:hover {
  483. background-color: #53535b;
  484. }
  485. .status-change-window-block-icon {
  486. width: 17px;
  487. height: 17px;
  488. }
  489. .status-change-window-block-label {
  490. color: #fff;
  491. font-size: 13px;
  492. font-weight: 300;
  493. margin: 0 0 0 7px;
  494. }
  495. .status-change-window-pointer {
  496. background-color: #25252d;
  497. transform: rotate(45deg);
  498. margin: 0 0 0 -10px;
  499. width: 20px;
  500. height: 20px;
  501. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!