inputs.css 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985
  1. @charset "UTF-8";
  2. /**
  3. * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
  4. *
  5. * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
  6. *
  7. * @license GNU AGPL version 3 or any later version
  8. *
  9. * This program is free software: you can redistribute it and/or modify
  10. * it under the terms of the GNU Affero General Public License as
  11. * published by the Free Software Foundation, either version 3 of the
  12. * License, or (at your option) any later version.
  13. *
  14. * This program is distributed in the hope that it will be useful,
  15. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  16. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  17. * GNU Affero General Public License for more details.
  18. *
  19. * You should have received a copy of the GNU Affero General Public License
  20. * along with this program. If not, see <http://www.gnu.org/licenses/>.
  21. *
  22. */
  23. /**
  24. * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
  25. * @copyright Copyright (c) 2016, Morris Jobke <hey@morrisjobke.de>
  26. * @copyright Copyright (c) 2016, Joas Schilling <coding@schilljs.com>
  27. * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
  28. * @copyright Copyright (c) 2016, jowi <sjw@gmx.ch>
  29. * @copyright Copyright (c) 2015, Joas Schilling <nickvergessen@owncloud.com>
  30. * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
  31. * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt <hey@jancborchardt.net>
  32. *
  33. * @license GNU AGPL version 3 or any later version
  34. *
  35. */
  36. /**
  37. * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
  38. *
  39. * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
  40. *
  41. * @license GNU AGPL version 3 or any later version
  42. *
  43. * This program is free software: you can redistribute it and/or modify
  44. * it under the terms of the GNU Affero General Public License as
  45. * published by the Free Software Foundation, either version 3 of the
  46. * License, or (at your option) any later version.
  47. *
  48. * This program is distributed in the hope that it will be useful,
  49. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  50. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  51. * GNU Affero General Public License for more details.
  52. *
  53. * You should have received a copy of the GNU Affero General Public License
  54. * along with this program. If not, see <http://www.gnu.org/licenses/>.
  55. *
  56. */
  57. /**
  58. * @see core/src/icons.js
  59. */
  60. /**
  61. * SVG COLOR API
  62. *
  63. * @param string $icon the icon filename
  64. * @param string $dir the icon folder within /core/img if $core or app name
  65. * @param string $color the desired color in hexadecimal
  66. * @param int $version the version of the file
  67. * @param bool [$core] search icon in core
  68. *
  69. * @returns A background image with the url to the set to the requested icon.
  70. */
  71. /* Specifically override browser styles */
  72. input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
  73. font-family: var(--font-face);
  74. }
  75. .select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget {
  76. font-family: var(--font-face) !important;
  77. }
  78. .select2-container.select2-drop-above .select2-choice {
  79. background-image: unset !important;
  80. }
  81. /* Simple selector to allow easy overriding */
  82. select,
  83. button:not(.button-vue,
  84. [class^=vs__]),
  85. input,
  86. textarea,
  87. div[contenteditable=true],
  88. div[contenteditable=false] {
  89. width: 130px;
  90. min-height: 36px;
  91. box-sizing: border-box;
  92. }
  93. /**
  94. * color-text-lighter normal state
  95. * color-text-lighter active state
  96. * color-text-maxcontrast disabled state
  97. */
  98. input:not([type=range]) {
  99. outline: none;
  100. }
  101. /* Default global values */
  102. div.select2-drop .select2-search input,
  103. input[type=submit],
  104. input[type=button],
  105. input[type=reset],
  106. button:not(.button-vue,
  107. [class^=vs__]),
  108. .button,
  109. .pager li a {
  110. margin: 3px 3px 3px 0;
  111. padding: 7px 14px;
  112. font-size: 13px;
  113. background-color: var(--color-main-background);
  114. color: var(--color-main-text);
  115. border: 1px solid var(--color-border-dark);
  116. font-size: var(--default-font-size);
  117. outline: none;
  118. border-radius: var(--border-radius);
  119. cursor: text;
  120. /* Primary action button, use sparingly */
  121. }
  122. div.select2-drop .select2-search input:not(:disabled):not(.primary):hover, div.select2-drop .select2-search input:not(:disabled):not(.primary):focus, div.select2-drop .select2-search input:not(:disabled):not(.primary).active,
  123. input[type=submit]:not(:disabled):not(.primary):hover,
  124. input[type=submit]:not(:disabled):not(.primary):focus,
  125. input[type=submit]:not(:disabled):not(.primary).active,
  126. input[type=button]:not(:disabled):not(.primary):hover,
  127. input[type=button]:not(:disabled):not(.primary):focus,
  128. input[type=button]:not(:disabled):not(.primary).active,
  129. input[type=reset]:not(:disabled):not(.primary):hover,
  130. input[type=reset]:not(:disabled):not(.primary):focus,
  131. input[type=reset]:not(:disabled):not(.primary).active,
  132. button:not(.button-vue,
  133. [class^=vs__]):not(:disabled):not(.primary):hover,
  134. button:not(.button-vue,
  135. [class^=vs__]):not(:disabled):not(.primary):focus,
  136. button:not(.button-vue,
  137. [class^=vs__]):not(:disabled):not(.primary).active,
  138. .button:not(:disabled):not(.primary):hover,
  139. .button:not(:disabled):not(.primary):focus,
  140. .button:not(:disabled):not(.primary).active,
  141. .pager li a:not(:disabled):not(.primary):hover,
  142. .pager li a:not(:disabled):not(.primary):focus,
  143. .pager li a:not(:disabled):not(.primary).active {
  144. /* active class used for multiselect */
  145. border-color: var(--color-primary-element);
  146. outline: none;
  147. }
  148. div.select2-drop .select2-search input:not(:disabled):not(.primary):active,
  149. input[type=submit]:not(:disabled):not(.primary):active,
  150. input[type=button]:not(:disabled):not(.primary):active,
  151. input[type=reset]:not(:disabled):not(.primary):active,
  152. button:not(.button-vue,
  153. [class^=vs__]):not(:disabled):not(.primary):active,
  154. .button:not(:disabled):not(.primary):active,
  155. .pager li a:not(:disabled):not(.primary):active {
  156. outline: none;
  157. background-color: var(--color-main-background);
  158. color: var(--color-text-light);
  159. }
  160. div.select2-drop .select2-search input:not(:disabled):not(.primary):focus-visible,
  161. input[type=submit]:not(:disabled):not(.primary):focus-visible,
  162. input[type=button]:not(:disabled):not(.primary):focus-visible,
  163. input[type=reset]:not(:disabled):not(.primary):focus-visible,
  164. button:not(.button-vue,
  165. [class^=vs__]):not(:disabled):not(.primary):focus-visible,
  166. .button:not(:disabled):not(.primary):focus-visible,
  167. .pager li a:not(:disabled):not(.primary):focus-visible {
  168. box-shadow: 0 0 0 2px var(--color-primary);
  169. }
  170. div.select2-drop .select2-search input:disabled,
  171. input[type=submit]:disabled,
  172. input[type=button]:disabled,
  173. input[type=reset]:disabled,
  174. button:not(.button-vue,
  175. [class^=vs__]):disabled,
  176. .button:disabled,
  177. .pager li a:disabled {
  178. background-color: var(--color-background-dark);
  179. color: var(--color-main-text);
  180. cursor: default;
  181. opacity: 0.5;
  182. }
  183. div.select2-drop .select2-search input:required,
  184. input[type=submit]:required,
  185. input[type=button]:required,
  186. input[type=reset]:required,
  187. button:not(.button-vue,
  188. [class^=vs__]):required,
  189. .button:required,
  190. .pager li a:required {
  191. box-shadow: none;
  192. }
  193. div.select2-drop .select2-search input:user-invalid,
  194. input[type=submit]:user-invalid,
  195. input[type=button]:user-invalid,
  196. input[type=reset]:user-invalid,
  197. button:not(.button-vue,
  198. [class^=vs__]):user-invalid,
  199. .button:user-invalid,
  200. .pager li a:user-invalid {
  201. box-shadow: 0 0 0 2px var(--color-error) !important;
  202. }
  203. div.select2-drop .select2-search input.primary,
  204. input[type=submit].primary,
  205. input[type=button].primary,
  206. input[type=reset].primary,
  207. button:not(.button-vue,
  208. [class^=vs__]).primary,
  209. .button.primary,
  210. .pager li a.primary {
  211. background-color: var(--color-primary-element);
  212. border-color: var(--color-primary-element);
  213. color: var(--color-primary-text);
  214. cursor: pointer;
  215. /* Apply border to primary button if on log in page (and not in a dark container) or if in header */
  216. }
  217. #body-login :not(.body-login-container) div.select2-drop .select2-search input.primary, #header div.select2-drop .select2-search input.primary,
  218. #body-login :not(.body-login-container) input[type=submit].primary,
  219. #header input[type=submit].primary,
  220. #body-login :not(.body-login-container) input[type=button].primary,
  221. #header input[type=button].primary,
  222. #body-login :not(.body-login-container) input[type=reset].primary,
  223. #header input[type=reset].primary,
  224. #body-login :not(.body-login-container) button:not(.button-vue,
  225. [class^=vs__]).primary,
  226. #header button:not(.button-vue,
  227. [class^=vs__]).primary,
  228. #body-login :not(.body-login-container) .button.primary,
  229. #header .button.primary,
  230. #body-login :not(.body-login-container) .pager li a.primary,
  231. #header .pager li a.primary {
  232. border-color: var(--color-primary-text);
  233. }
  234. div.select2-drop .select2-search input.primary:not(:disabled):hover, div.select2-drop .select2-search input.primary:not(:disabled):focus, div.select2-drop .select2-search input.primary:not(:disabled):active,
  235. input[type=submit].primary:not(:disabled):hover,
  236. input[type=submit].primary:not(:disabled):focus,
  237. input[type=submit].primary:not(:disabled):active,
  238. input[type=button].primary:not(:disabled):hover,
  239. input[type=button].primary:not(:disabled):focus,
  240. input[type=button].primary:not(:disabled):active,
  241. input[type=reset].primary:not(:disabled):hover,
  242. input[type=reset].primary:not(:disabled):focus,
  243. input[type=reset].primary:not(:disabled):active,
  244. button:not(.button-vue,
  245. [class^=vs__]).primary:not(:disabled):hover,
  246. button:not(.button-vue,
  247. [class^=vs__]).primary:not(:disabled):focus,
  248. button:not(.button-vue,
  249. [class^=vs__]).primary:not(:disabled):active,
  250. .button.primary:not(:disabled):hover,
  251. .button.primary:not(:disabled):focus,
  252. .button.primary:not(:disabled):active,
  253. .pager li a.primary:not(:disabled):hover,
  254. .pager li a.primary:not(:disabled):focus,
  255. .pager li a.primary:not(:disabled):active {
  256. background-color: var(--color-primary-element-hover);
  257. border-color: var(--color-primary-element-hover);
  258. }
  259. div.select2-drop .select2-search input.primary:not(:disabled):focus, div.select2-drop .select2-search input.primary:not(:disabled):focus-visible,
  260. input[type=submit].primary:not(:disabled):focus,
  261. input[type=submit].primary:not(:disabled):focus-visible,
  262. input[type=button].primary:not(:disabled):focus,
  263. input[type=button].primary:not(:disabled):focus-visible,
  264. input[type=reset].primary:not(:disabled):focus,
  265. input[type=reset].primary:not(:disabled):focus-visible,
  266. button:not(.button-vue,
  267. [class^=vs__]).primary:not(:disabled):focus,
  268. button:not(.button-vue,
  269. [class^=vs__]).primary:not(:disabled):focus-visible,
  270. .button.primary:not(:disabled):focus,
  271. .button.primary:not(:disabled):focus-visible,
  272. .pager li a.primary:not(:disabled):focus,
  273. .pager li a.primary:not(:disabled):focus-visible {
  274. box-shadow: 0 0 0 2px var(--color-main-text);
  275. }
  276. div.select2-drop .select2-search input.primary:not(:disabled):active,
  277. input[type=submit].primary:not(:disabled):active,
  278. input[type=button].primary:not(:disabled):active,
  279. input[type=reset].primary:not(:disabled):active,
  280. button:not(.button-vue,
  281. [class^=vs__]).primary:not(:disabled):active,
  282. .button.primary:not(:disabled):active,
  283. .pager li a.primary:not(:disabled):active {
  284. color: var(--color-primary-text-dark);
  285. }
  286. div.select2-drop .select2-search input.primary:disabled,
  287. input[type=submit].primary:disabled,
  288. input[type=button].primary:disabled,
  289. input[type=reset].primary:disabled,
  290. button:not(.button-vue,
  291. [class^=vs__]).primary:disabled,
  292. .button.primary:disabled,
  293. .pager li a.primary:disabled {
  294. background-color: var(--color-primary-element);
  295. color: var(--color-primary-text-dark);
  296. cursor: default;
  297. }
  298. div[contenteditable=false] {
  299. margin: 3px 3px 3px 0;
  300. padding: 7px 6px;
  301. font-size: 13px;
  302. background-color: var(--color-main-background);
  303. color: var(--color-text-lighter);
  304. border: 1px solid var(--color-background-darker);
  305. outline: none;
  306. border-radius: var(--border-radius);
  307. background-color: var(--color-background-dark);
  308. color: var(--color-text-lighter);
  309. cursor: default;
  310. opacity: 0.5;
  311. }
  312. /* Specific override */
  313. input {
  314. /* Color input doesn't respect the initial height
  315. so we need to set a custom one */
  316. }
  317. input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=submit]):not([type=button]):not([type=reset]):not([type=color]):not([type=file]):not([type=image]) {
  318. -webkit-appearance: textfield;
  319. -moz-appearance: textfield;
  320. height: 36px;
  321. }
  322. input[type=radio], input[type=checkbox], input[type=file], input[type=image] {
  323. height: auto;
  324. width: auto;
  325. }
  326. input[type=color] {
  327. margin: 3px;
  328. padding: 0 2px;
  329. min-height: 30px;
  330. width: 40px;
  331. cursor: pointer;
  332. }
  333. input[type=hidden] {
  334. height: 0;
  335. width: 0;
  336. }
  337. input[type=time] {
  338. width: initial;
  339. }
  340. /* 'Click' inputs */
  341. select,
  342. button:not(.button-vue,
  343. [class^=vs__]),
  344. .button,
  345. input[type=button],
  346. input[type=submit],
  347. input[type=reset] {
  348. padding: 8px 14px;
  349. font-size: var(--default-font-size);
  350. width: auto;
  351. min-height: 36px;
  352. cursor: pointer;
  353. box-sizing: border-box;
  354. background-color: var(--color-background-dark);
  355. }
  356. select:disabled,
  357. button:not(.button-vue,
  358. [class^=vs__]):disabled,
  359. .button:disabled,
  360. input[type=button]:disabled,
  361. input[type=submit]:disabled,
  362. input[type=reset]:disabled {
  363. cursor: default;
  364. }
  365. input:not([type=range],
  366. .input-field__input,
  367. [type=submit],
  368. [type=button],
  369. [type=reset],
  370. .multiselect__input,
  371. .select2-input,
  372. .action-input__input,
  373. [class^=vs__]),
  374. select,
  375. div[contenteditable=true],
  376. textarea {
  377. margin: 3px 3px 3px 0;
  378. padding: 0 12px;
  379. font-size: var(--default-font-size);
  380. background-color: var(--color-main-background);
  381. color: var(--color-main-text);
  382. border: 2px solid var(--color-border-maxcontrast);
  383. height: 36px;
  384. outline: none;
  385. border-radius: var(--border-radius-large);
  386. text-overflow: ellipsis;
  387. cursor: pointer;
  388. }
  389. input:not([type=range],
  390. .input-field__input,
  391. [type=submit],
  392. [type=button],
  393. [type=reset],
  394. .multiselect__input,
  395. .select2-input,
  396. .action-input__input,
  397. [class^=vs__]):not(:disabled):hover, input:not([type=range],
  398. .input-field__input,
  399. [type=submit],
  400. [type=button],
  401. [type=reset],
  402. .multiselect__input,
  403. .select2-input,
  404. .action-input__input,
  405. [class^=vs__]):not(:disabled):focus, input:not([type=range],
  406. .input-field__input,
  407. [type=submit],
  408. [type=button],
  409. [type=reset],
  410. .multiselect__input,
  411. .select2-input,
  412. .action-input__input,
  413. [class^=vs__]):not(:disabled):active,
  414. select:not(:disabled):hover,
  415. select:not(:disabled):focus,
  416. select:not(:disabled):active,
  417. div[contenteditable=true]:not(:disabled):hover,
  418. div[contenteditable=true]:not(:disabled):focus,
  419. div[contenteditable=true]:not(:disabled):active,
  420. textarea:not(:disabled):hover,
  421. textarea:not(:disabled):focus,
  422. textarea:not(:disabled):active {
  423. border-color: var(--color-primary-element);
  424. }
  425. input:not([type=range],
  426. .input-field__input,
  427. [type=submit],
  428. [type=button],
  429. [type=reset],
  430. .multiselect__input,
  431. .select2-input,
  432. .action-input__input,
  433. [class^=vs__]):not(:disabled):focus,
  434. select:not(:disabled):focus,
  435. div[contenteditable=true]:not(:disabled):focus,
  436. textarea:not(:disabled):focus {
  437. cursor: text;
  438. }
  439. .multiselect__input, .select2-input {
  440. background-color: var(--color-main-background);
  441. color: var(--color-main-text);
  442. }
  443. textarea, div[contenteditable=true] {
  444. padding: 12px;
  445. height: auto;
  446. }
  447. /* Override the ugly select arrow */
  448. select {
  449. background: var(--icon-triangle-s-dark) no-repeat right 8px center;
  450. appearance: none;
  451. background-color: var(--color-main-background);
  452. padding-right: 28px !important;
  453. }
  454. select *,
  455. button:not(.button-vue,
  456. [class^=vs__]) *,
  457. .button * {
  458. cursor: pointer;
  459. }
  460. select:disabled *,
  461. button:not(.button-vue,
  462. [class^=vs__]):disabled *,
  463. .button:disabled * {
  464. cursor: default;
  465. }
  466. /* Buttons */
  467. button:not(.button-vue,
  468. [class^=vs__]),
  469. .button,
  470. input[type=button],
  471. input[type=submit],
  472. input[type=reset] {
  473. font-weight: bold;
  474. border-radius: var(--border-radius-pill);
  475. /* Get rid of the inside dotted line in Firefox */
  476. }
  477. button:not(.button-vue,
  478. [class^=vs__])::-moz-focus-inner,
  479. .button::-moz-focus-inner,
  480. input[type=button]::-moz-focus-inner,
  481. input[type=submit]::-moz-focus-inner,
  482. input[type=reset]::-moz-focus-inner {
  483. border: 0;
  484. }
  485. button:not(.button-vue,
  486. [class^=vs__]).error,
  487. .button.error,
  488. input[type=button].error,
  489. input[type=submit].error,
  490. input[type=reset].error {
  491. background-color: var(--color-error) !important;
  492. border-color: var(--color-error) !important;
  493. color: #fff !important;
  494. }
  495. button:not(.button-vue,
  496. .action-button,
  497. [class^=vs__]) > span,
  498. .button > span {
  499. /* icon position inside buttons */
  500. }
  501. button:not(.button-vue,
  502. .action-button,
  503. [class^=vs__]) > span[class^=icon-], button:not(.button-vue,
  504. .action-button,
  505. [class^=vs__]) > span[class*=" icon-"],
  506. .button > span[class^=icon-],
  507. .button > span[class*=" icon-"] {
  508. display: inline-block;
  509. vertical-align: text-bottom;
  510. opacity: 0.5;
  511. }
  512. /* Confirm inputs */
  513. input[type=text], input[type=password], input[type=email] {
  514. /* only show confirm borders if input is not focused */
  515. }
  516. input[type=text] + .icon-confirm, input[type=password] + .icon-confirm, input[type=email] + .icon-confirm {
  517. margin-left: -13px !important;
  518. border-left-color: transparent !important;
  519. border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0 !important;
  520. border-width: 2px;
  521. background-clip: padding-box;
  522. /* Avoid background under border */
  523. background-color: var(--color-main-background) !important;
  524. opacity: 1;
  525. height: 36px;
  526. width: 36px;
  527. padding: 7px 6px;
  528. cursor: pointer;
  529. margin-right: 0;
  530. }
  531. input[type=text] + .icon-confirm:disabled, input[type=password] + .icon-confirm:disabled, input[type=email] + .icon-confirm:disabled {
  532. cursor: default;
  533. /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
  534. background-image: var(--icon-confirm-fade-dark);
  535. }
  536. input[type=text]:not(:active):not(:hover):not(:focus):invalid + .icon-confirm, input[type=password]:not(:active):not(:hover):not(:focus):invalid + .icon-confirm, input[type=email]:not(:active):not(:hover):not(:focus):invalid + .icon-confirm {
  537. border-color: var(--color-error);
  538. }
  539. input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus {
  540. border-color: var(--color-primary-element) !important;
  541. border-radius: var(--border-radius) !important;
  542. }
  543. input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:active:disabled, input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover:disabled, input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus:disabled, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:active:disabled, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover:disabled, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus:disabled, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:active:disabled, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover:disabled, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus:disabled {
  544. border-color: var(--color-background-darker) !important;
  545. }
  546. input[type=text]:active + .icon-confirm, input[type=text]:hover + .icon-confirm, input[type=text]:focus + .icon-confirm, input[type=password]:active + .icon-confirm, input[type=password]:hover + .icon-confirm, input[type=password]:focus + .icon-confirm, input[type=email]:active + .icon-confirm, input[type=email]:hover + .icon-confirm, input[type=email]:focus + .icon-confirm {
  547. border-color: var(--color-primary-element) !important;
  548. border-left-color: transparent !important;
  549. /* above previous input */
  550. z-index: 2;
  551. }
  552. /* Various Fixes */
  553. button img,
  554. .button img {
  555. cursor: pointer;
  556. }
  557. select,
  558. .button.multiselect {
  559. font-weight: normal;
  560. }
  561. /* Radio & Checkboxes */
  562. input[type=checkbox], input[type=radio] {
  563. /* We do not use the variables as we keep the colours as white for this variant */
  564. }
  565. input[type=checkbox].radio, input[type=checkbox].checkbox, input[type=radio].radio, input[type=radio].checkbox {
  566. position: absolute;
  567. left: -10000px;
  568. top: auto;
  569. width: 1px;
  570. height: 1px;
  571. overflow: hidden;
  572. }
  573. input[type=checkbox].radio + label, input[type=checkbox].checkbox + label, input[type=radio].radio + label, input[type=radio].checkbox + label {
  574. user-select: none;
  575. }
  576. input[type=checkbox].radio:disabled + label, input[type=checkbox].radio:disabled + label:before, input[type=checkbox].checkbox:disabled + label, input[type=checkbox].checkbox:disabled + label:before, input[type=radio].radio:disabled + label, input[type=radio].radio:disabled + label:before, input[type=radio].checkbox:disabled + label, input[type=radio].checkbox:disabled + label:before {
  577. cursor: default;
  578. }
  579. input[type=checkbox].radio + label:before, input[type=checkbox].checkbox + label:before, input[type=radio].radio + label:before, input[type=radio].checkbox + label:before {
  580. content: "";
  581. display: inline-block;
  582. height: 14px;
  583. width: 14px;
  584. vertical-align: middle;
  585. border-radius: 50%;
  586. margin: 0 6px 3px 3px;
  587. border: 1px solid var(--color-text-lighter);
  588. }
  589. input[type=checkbox].radio:not(:disabled):not(:checked) + label:hover:before, input[type=checkbox].radio:focus + label:before, input[type=checkbox].checkbox:not(:disabled):not(:checked) + label:hover:before, input[type=checkbox].checkbox:focus + label:before, input[type=radio].radio:not(:disabled):not(:checked) + label:hover:before, input[type=radio].radio:focus + label:before, input[type=radio].checkbox:not(:disabled):not(:checked) + label:hover:before, input[type=radio].checkbox:focus + label:before {
  590. border-color: var(--color-primary-element);
  591. }
  592. input[type=checkbox].radio:focus-visible + label, input[type=checkbox].checkbox:focus-visible + label, input[type=radio].radio:focus-visible + label, input[type=radio].checkbox:focus-visible + label {
  593. outline-style: solid;
  594. outline-color: var(--color-main-text);
  595. outline-width: 1px;
  596. outline-offset: 2px;
  597. }
  598. input[type=checkbox].radio:checked + label:before, input[type=checkbox].radio.checkbox:indeterminate + label:before, input[type=checkbox].checkbox:checked + label:before, input[type=checkbox].checkbox.checkbox:indeterminate + label:before, input[type=radio].radio:checked + label:before, input[type=radio].radio.checkbox:indeterminate + label:before, input[type=radio].checkbox:checked + label:before, input[type=radio].checkbox.checkbox:indeterminate + label:before {
  599. /* ^ :indeterminate have a strange behavior on radio,
  600. so we respecified the checkbox class again to be safe */
  601. box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
  602. background-color: var(--color-primary-element);
  603. border-color: var(--color-primary-element);
  604. }
  605. input[type=checkbox].radio:disabled + label:before, input[type=checkbox].checkbox:disabled + label:before, input[type=radio].radio:disabled + label:before, input[type=radio].checkbox:disabled + label:before {
  606. border: 1px solid var(--color-text-lighter);
  607. background-color: var(--color-text-maxcontrast) !important; /* override other status */
  608. }
  609. input[type=checkbox].radio:checked:disabled + label:before, input[type=checkbox].checkbox:checked:disabled + label:before, input[type=radio].radio:checked:disabled + label:before, input[type=radio].checkbox:checked:disabled + label:before {
  610. background-color: var(--color-text-maxcontrast);
  611. }
  612. input[type=checkbox].radio + label ~ em, input[type=checkbox].checkbox + label ~ em, input[type=radio].radio + label ~ em, input[type=radio].checkbox + label ~ em {
  613. display: inline-block;
  614. margin-left: 25px;
  615. }
  616. input[type=checkbox].radio + label ~ em:last-of-type, input[type=checkbox].checkbox + label ~ em:last-of-type, input[type=radio].radio + label ~ em:last-of-type, input[type=radio].checkbox + label ~ em:last-of-type {
  617. margin-bottom: 14px;
  618. }
  619. input[type=checkbox].checkbox + label:before, input[type=radio].checkbox + label:before {
  620. border-radius: 1px;
  621. height: 14px;
  622. width: 14px;
  623. box-shadow: none !important;
  624. background-position: center;
  625. }
  626. input[type=checkbox].checkbox:checked + label:before, input[type=radio].checkbox:checked + label:before {
  627. background-image: url("../img/actions/checkbox-mark.svg");
  628. }
  629. input[type=checkbox].checkbox:indeterminate + label:before, input[type=radio].checkbox:indeterminate + label:before {
  630. background-image: url("../img/actions/checkbox-mixed.svg");
  631. }
  632. input[type=checkbox].radio--white + label:before, input[type=checkbox].radio--white:focus + label:before, input[type=checkbox].checkbox--white + label:before, input[type=checkbox].checkbox--white:focus + label:before, input[type=radio].radio--white + label:before, input[type=radio].radio--white:focus + label:before, input[type=radio].checkbox--white + label:before, input[type=radio].checkbox--white:focus + label:before {
  633. border-color: #bababa;
  634. }
  635. input[type=checkbox].radio--white:not(:disabled):not(:checked) + label:hover:before, input[type=checkbox].checkbox--white:not(:disabled):not(:checked) + label:hover:before, input[type=radio].radio--white:not(:disabled):not(:checked) + label:hover:before, input[type=radio].checkbox--white:not(:disabled):not(:checked) + label:hover:before {
  636. border-color: #fff;
  637. }
  638. input[type=checkbox].radio--white:checked + label:before, input[type=checkbox].checkbox--white:checked + label:before, input[type=radio].radio--white:checked + label:before, input[type=radio].checkbox--white:checked + label:before {
  639. box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
  640. background-color: #dbdbdb;
  641. border-color: #dbdbdb;
  642. }
  643. input[type=checkbox].radio--white:disabled + label:before, input[type=checkbox].checkbox--white:disabled + label:before, input[type=radio].radio--white:disabled + label:before, input[type=radio].checkbox--white:disabled + label:before {
  644. background-color: #bababa !important; /* override other status */
  645. border-color: rgba(255, 255, 255, 0.4) !important; /* override other status */
  646. }
  647. input[type=checkbox].radio--white:checked:disabled + label:before, input[type=checkbox].checkbox--white:checked:disabled + label:before, input[type=radio].radio--white:checked:disabled + label:before, input[type=radio].checkbox--white:checked:disabled + label:before {
  648. box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
  649. border-color: rgba(255, 255, 255, 0.4) !important; /* override other status */
  650. background-color: #bababa;
  651. }
  652. input[type=checkbox].checkbox--white:checked + label:before, input[type=checkbox].checkbox--white:indeterminate + label:before, input[type=radio].checkbox--white:checked + label:before, input[type=radio].checkbox--white:indeterminate + label:before {
  653. background-color: transparent !important; /* Override default checked */
  654. border-color: #fff !important; /* Override default checked */
  655. background-image: url("../img/actions/checkbox-mark-white.svg");
  656. }
  657. input[type=checkbox].checkbox--white:indeterminate + label:before, input[type=radio].checkbox--white:indeterminate + label:before {
  658. background-image: url("../img/actions/checkbox-mixed-white.svg");
  659. }
  660. input[type=checkbox].checkbox--white:disabled + label:before, input[type=radio].checkbox--white:disabled + label:before {
  661. opacity: 0.7; /* No other choice for white background image */
  662. }
  663. /* Select2 overriding. Merged to core with vendor stylesheet */
  664. div.select2-drop {
  665. margin-top: -2px;
  666. background-color: var(--color-main-background);
  667. }
  668. div.select2-drop.select2-drop-active {
  669. border-color: var(--color-border-dark);
  670. }
  671. div.select2-drop .avatar {
  672. display: inline-block;
  673. margin-right: 8px;
  674. vertical-align: middle;
  675. }
  676. div.select2-drop .avatar img {
  677. cursor: pointer;
  678. }
  679. div.select2-drop .select2-search input {
  680. min-height: auto;
  681. background: var(--icon-search-dark) no-repeat right center !important;
  682. background-origin: content-box !important;
  683. }
  684. div.select2-drop .select2-results {
  685. max-height: 250px;
  686. margin: 0;
  687. padding: 0;
  688. }
  689. div.select2-drop .select2-results .select2-result-label {
  690. white-space: nowrap;
  691. overflow: hidden;
  692. text-overflow: ellipsis;
  693. }
  694. div.select2-drop .select2-results .select2-result-label span {
  695. cursor: pointer;
  696. }
  697. div.select2-drop .select2-results .select2-result-label span em {
  698. cursor: inherit;
  699. background: unset;
  700. }
  701. div.select2-drop .select2-results .select2-result,
  702. div.select2-drop .select2-results .select2-no-results,
  703. div.select2-drop .select2-results .select2-searching {
  704. position: relative;
  705. display: list-item;
  706. padding: 12px;
  707. background-color: transparent;
  708. cursor: pointer;
  709. color: var(--color-text-lighter);
  710. }
  711. div.select2-drop .select2-results .select2-result.select2-selected {
  712. background-color: var(--color-background-dark);
  713. }
  714. div.select2-drop .select2-results .select2-highlighted {
  715. background-color: var(--color-background-dark);
  716. color: var(--color-main-text);
  717. }
  718. .select2-chosen .avatar,
  719. .select2-chosen .avatar img,
  720. #select2-drop .avatar,
  721. #select2-drop .avatar img {
  722. cursor: pointer;
  723. }
  724. div.select2-container-multi .select2-choices, div.select2-container-multi.select2-container-active .select2-choices {
  725. box-shadow: none;
  726. white-space: nowrap;
  727. text-overflow: ellipsis;
  728. background: var(--color-main-background);
  729. color: var(--color-text-lighter) !important;
  730. box-sizing: content-box;
  731. border-radius: var(--border-radius-large);
  732. border: 2px solid var(--color-border-dark);
  733. margin: 0;
  734. padding: 6px;
  735. min-height: 44px;
  736. }
  737. div.select2-container-multi .select2-choices:focus-within, div.select2-container-multi.select2-container-active .select2-choices:focus-within {
  738. border-color: var(--color-primary);
  739. }
  740. div.select2-container-multi .select2-choices .select2-search-choice, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice {
  741. line-height: 20px;
  742. padding-left: 5px;
  743. }
  744. div.select2-container-multi .select2-choices .select2-search-choice.select2-search-choice-focus, div.select2-container-multi .select2-choices .select2-search-choice:hover, div.select2-container-multi .select2-choices .select2-search-choice:active, div.select2-container-multi .select2-choices .select2-search-choice, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice.select2-search-choice-focus, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice:hover, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice:active, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice {
  745. background-image: none;
  746. background-color: var(--color-main-background);
  747. color: var(--color-text-lighter);
  748. border: 1px solid var(--color-border-dark);
  749. }
  750. div.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice .select2-search-choice-close {
  751. display: none;
  752. }
  753. div.select2-container-multi .select2-choices .select2-search-field input, div.select2-container-multi.select2-container-active .select2-choices .select2-search-field input {
  754. line-height: 20px;
  755. min-height: 28px;
  756. max-height: 28px;
  757. color: var(--color-main-text);
  758. }
  759. div.select2-container-multi .select2-choices .select2-search-field input.select2-active, div.select2-container-multi.select2-container-active .select2-choices .select2-search-field input.select2-active {
  760. background: none !important;
  761. }
  762. div.select2-container {
  763. margin: 3px 3px 3px 0;
  764. }
  765. div.select2-container.select2-container-multi .select2-choices {
  766. display: flex;
  767. flex-wrap: wrap;
  768. }
  769. div.select2-container.select2-container-multi .select2-choices li {
  770. float: none;
  771. }
  772. div.select2-container a.select2-choice {
  773. box-shadow: none;
  774. white-space: nowrap;
  775. text-overflow: ellipsis;
  776. background: var(--color-main-background);
  777. color: var(--color-text-lighter) !important;
  778. box-sizing: content-box;
  779. border-radius: var(--border-radius-large);
  780. border: 2px solid var(--color-border-dark);
  781. margin: 0;
  782. padding: 6px 12px;
  783. min-height: 44px;
  784. }
  785. div.select2-container a.select2-choice:focus-within {
  786. border-color: var(--color-primary);
  787. }
  788. div.select2-container a.select2-choice .select2-search-choice {
  789. line-height: 20px;
  790. padding-left: 5px;
  791. background-image: none;
  792. background-color: var(--color-background-dark);
  793. border-color: var(--color-background-dark);
  794. }
  795. div.select2-container a.select2-choice .select2-search-choice .select2-search-choice-close {
  796. display: none;
  797. }
  798. div.select2-container a.select2-choice .select2-search-choice.select2-search-choice-focus, div.select2-container a.select2-choice .select2-search-choice:hover {
  799. background-color: var(--color-border);
  800. border-color: var(--color-border);
  801. }
  802. div.select2-container a.select2-choice .select2-arrow {
  803. background: none;
  804. border-radius: 0;
  805. border: none;
  806. }
  807. div.select2-container a.select2-choice .select2-arrow b {
  808. background: var(--icon-triangle-s-dark) no-repeat center !important;
  809. opacity: 0.5;
  810. }
  811. div.select2-container a.select2-choice:hover .select2-arrow b, div.select2-container a.select2-choice:focus .select2-arrow b, div.select2-container a.select2-choice:active .select2-arrow b {
  812. opacity: 0.7;
  813. }
  814. div.select2-container a.select2-choice .select2-search-field input {
  815. line-height: 20px;
  816. }
  817. /* Vue v-select */
  818. .v-select {
  819. margin: 3px 3px 3px 0;
  820. display: inline-block;
  821. }
  822. .v-select .dropdown-toggle {
  823. display: flex !important;
  824. flex-wrap: wrap;
  825. }
  826. .v-select .dropdown-toggle .selected-tag {
  827. line-height: 20px;
  828. padding-left: 5px;
  829. background-image: none;
  830. background-color: var(--color-main-background);
  831. color: var(--color-text-lighter);
  832. border: 1px solid var(--color-border-dark);
  833. display: inline-flex;
  834. align-items: center;
  835. }
  836. .v-select .dropdown-toggle .selected-tag .close {
  837. margin-left: 3px;
  838. }
  839. .v-select .dropdown-menu {
  840. padding: 0;
  841. }
  842. .v-select .dropdown-menu li {
  843. padding: 5px;
  844. position: relative;
  845. display: list-item;
  846. background-color: transparent;
  847. cursor: pointer;
  848. color: var(--color-text-lighter);
  849. }
  850. .v-select .dropdown-menu li a {
  851. white-space: nowrap;
  852. overflow: hidden;
  853. text-overflow: ellipsis;
  854. height: 25px;
  855. padding: 3px 7px 4px 2px;
  856. margin: 0;
  857. cursor: pointer;
  858. min-height: 1em;
  859. -webkit-touch-callout: none;
  860. -webkit-user-select: none;
  861. -moz-user-select: none;
  862. -ms-user-select: none;
  863. user-select: none;
  864. display: inline-flex;
  865. align-items: center;
  866. background-color: transparent !important;
  867. color: inherit !important;
  868. }
  869. .v-select .dropdown-menu li a::before {
  870. content: " ";
  871. background-image: var(--icon-checkmark-dark);
  872. background-repeat: no-repeat;
  873. background-position: center;
  874. min-width: 16px;
  875. min-height: 16px;
  876. display: block;
  877. opacity: 0.5;
  878. margin-right: 5px;
  879. visibility: hidden;
  880. }
  881. .v-select .dropdown-menu li.highlight {
  882. color: var(--color-main-text);
  883. }
  884. .v-select .dropdown-menu li.active > a {
  885. background-color: var(--color-background-dark);
  886. color: var(--color-main-text);
  887. }
  888. .v-select .dropdown-menu li.active > a::before {
  889. visibility: visible;
  890. }
  891. /* Progressbar */
  892. progress:not(.vue) {
  893. display: block;
  894. width: 100%;
  895. padding: 0;
  896. border: 0 none;
  897. background-color: var(--color-background-dark);
  898. border-radius: var(--border-radius);
  899. flex-basis: 100%;
  900. height: 5px;
  901. overflow: hidden;
  902. }
  903. progress:not(.vue).warn::-moz-progress-bar {
  904. background: var(--color-error);
  905. }
  906. progress:not(.vue).warn::-webkit-progress-value {
  907. background: var(--color-error);
  908. }
  909. progress:not(.vue)::-webkit-progress-bar {
  910. background: transparent;
  911. }
  912. progress:not(.vue)::-moz-progress-bar {
  913. border-radius: var(--border-radius);
  914. background: var(--color-primary);
  915. transition: 250ms all ease-in-out;
  916. }
  917. progress:not(.vue)::-webkit-progress-value {
  918. border-radius: var(--border-radius);
  919. background: var(--color-primary);
  920. transition: 250ms all ease-in-out;
  921. }
  922. /* Animation */
  923. @keyframes shake {
  924. 10%, 90% {
  925. transform: translate(-1px);
  926. }
  927. 20%, 80% {
  928. transform: translate(2px);
  929. }
  930. 30%, 50%, 70% {
  931. transform: translate(-4px);
  932. }
  933. 40%, 60% {
  934. transform: translate(4px);
  935. }
  936. }
  937. .shake {
  938. animation-name: shake;
  939. animation-duration: 0.7s;
  940. animation-timing-function: ease-out;
  941. }
  942. label.infield {
  943. position: absolute;
  944. left: -10000px;
  945. top: -10000px;
  946. width: 1px;
  947. height: 1px;
  948. overflow: hidden;
  949. }
  950. ::placeholder,
  951. ::-ms-input-placeholder,
  952. ::-webkit-input-placeholder {
  953. color: var(--color-text-maxcontrast);
  954. font-size: var(--default-font-size);
  955. }
  956. /*# sourceMappingURL=inputs.css.map */