1
0

icons.scss 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494
  1. /**
  2. * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
  3. *
  4. * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
  5. * @author Joas Schilling <coding@schilljs.com>
  6. * @author Lukas Reschke <lukas@statuscode.ch>
  7. * @author Roeland Jago Douma <roeland@famdouma.nl>
  8. * @author Vincent Chan <plus.vincchan@gmail.com>
  9. * @author Thomas Müller <thomas.mueller@tmit.eu>
  10. * @author Hendrik Leppelsack <hendrik@leppelsack.de>
  11. * @author Jan-Christoph Borchardt <hey@jancborchardt.net>
  12. *
  13. * @license GNU AGPL version 3 or any later version
  14. *
  15. * This program is free software: you can redistribute it and/or modify
  16. * it under the terms of the GNU Affero General Public License as
  17. * published by the Free Software Foundation, either version 3 of the
  18. * License, or (at your option) any later version.
  19. *
  20. * This program is distributed in the hope that it will be useful,
  21. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  22. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  23. * GNU Affero General Public License for more details.
  24. *
  25. * You should have received a copy of the GNU Affero General Public License
  26. * along with this program. If not, see <http://www.gnu.org/licenses/>.
  27. *
  28. */
  29. /* GLOBAL ------------------------------------------------------------------- */
  30. [class^='icon-'], [class*=' icon-'] {
  31. background-repeat: no-repeat;
  32. background-position: center;
  33. min-width: 16px;
  34. min-height: 16px;
  35. }
  36. .icon-breadcrumb {
  37. background-image: url('../img/breadcrumb.svg?v=1');
  38. }
  39. /* LOADING ------------------------------------------------------------------ */
  40. .loading,
  41. .loading-small,
  42. .icon-loading,
  43. .icon-loading-dark,
  44. .icon-loading-small,
  45. .icon-loading-small-dark {
  46. position: relative;
  47. &:after {
  48. z-index: 2;
  49. content: '';
  50. height: 28px;
  51. width: 28px;
  52. margin: -16px 0 0 -16px;
  53. position: absolute;
  54. top: 50%;
  55. left: 50%;
  56. border-radius: 100%;
  57. -webkit-animation: rotate .8s infinite linear;
  58. animation: rotate .8s infinite linear;
  59. -webkit-transform-origin: center;
  60. -ms-transform-origin: center;
  61. transform-origin: center;
  62. border: 2px solid var(--color-loading-light);
  63. border-top-color: var(--color-loading-dark);
  64. }
  65. }
  66. .icon-loading-dark:after,
  67. .icon-loading-small-dark:after {
  68. border: 2px solid var(--color-loading-dark);
  69. border-top-color: var(--color-loading-light);
  70. }
  71. .icon-loading-small:after,
  72. .icon-loading-small-dark:after {
  73. height: 12px;
  74. width: 12px;
  75. margin: -8px 0 0 -8px;
  76. }
  77. /* Css replaced elements don't have ::after nor ::before */
  78. img, object, video, button, textarea, input, select, div[contenteditable='true'] {
  79. .icon-loading {
  80. background-image: url('../img/loading.gif');
  81. }
  82. .icon-loading-dark {
  83. background-image: url('../img/loading-dark.gif');
  84. }
  85. .icon-loading-small {
  86. background-image: url('../img/loading-small.gif');
  87. }
  88. .icon-loading-small-dark {
  89. background-image: url('../img/loading-small-dark.gif');
  90. }
  91. }
  92. @keyframes rotate {
  93. from {
  94. transform: rotate(0deg);
  95. }
  96. to {
  97. transform: rotate(360deg);
  98. }
  99. }
  100. .icon-32 {
  101. background-size: 32px !important;
  102. }
  103. .icon-white {
  104. &.icon-shadow {
  105. filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
  106. }
  107. }
  108. /* ICONS -------------------------------------------------------------------
  109. * These icon classes are generated automatically with the following pattern
  110. * for icon-black-white('close', ...)
  111. * .icon-close (black icon)
  112. * .icon-close-white (white icon)
  113. * .icon-close.icon-white (white icon)
  114. *
  115. * Some class definitions are kept as before, since they don't follow the pattern
  116. * or have some additional styling like drop shadows
  117. */
  118. @include icon-black-white('add', 'actions', 1, true);
  119. @include icon-black-white('address', 'actions', 1, true);
  120. @include icon-black-white('audio', 'actions', 2, true);
  121. .icon-audio-white {
  122. filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
  123. }
  124. @include icon-black-white('audio-off', 'actions', 1, true);
  125. .icon-audio-off-white {
  126. filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
  127. }
  128. .icon-caret-white,
  129. .icon-caret {
  130. @include icon-color('caret', 'actions', $color-white, 1, true);
  131. }
  132. .icon-caret-dark {
  133. @include icon-color('caret', 'actions', $color-black, 1, true);
  134. }
  135. @include icon-black-white('checkmark', 'actions', 1, true);
  136. .icon-checkmark-color {
  137. @include icon-color('checkmark', 'actions', $color-success, 1, true);
  138. }
  139. @include icon-black-white('clippy', 'actions', 2, true);
  140. @include icon-black-white('close', 'actions', 1, true);
  141. @include icon-black-white('comment', 'actions', 1, true);
  142. @include icon-black-white('confirm', 'actions', 2, true);
  143. @include icon-black-white('download', 'actions', 1, true);
  144. .icon-confirm-fade {
  145. @include icon-color('confirm-fade', 'actions', $color-black, 2, true);
  146. }
  147. .icon-delete {
  148. @include icon-color('delete', 'actions', $color-black, 1, true);
  149. &.no-permission {
  150. &:hover,
  151. &:focus {
  152. @include icon-color('delete', 'actions', $color-black, 1, true);
  153. }
  154. }
  155. &:hover,
  156. &:focus {
  157. @include icon-color('delete', 'actions', $color-error, 1, true);
  158. filter: initial;
  159. }
  160. &.icon-white {
  161. @include icon-color('delete', 'actions', $color-white, 1, true);
  162. }
  163. }
  164. .icon-delete-white {
  165. @include icon-color('delete', 'actions', $color-white, 1, true);
  166. &.no-permission {
  167. &:hover,
  168. &:focus {
  169. @include icon-color('delete', 'actions', $color-white, 1, true);
  170. }
  171. }
  172. &:hover,
  173. &:focus {
  174. @include icon-color('delete', 'actions', $color-error, 1, true);
  175. }
  176. }
  177. @include icon-black-white('details', 'actions', 1, true);
  178. @include icon-black-white('edit', 'actions', 1, true);
  179. @include icon-black-white('error', 'actions', 1, true);
  180. .icon-error-color {
  181. @include icon-color('error', 'actions', $color-error, 1, true);
  182. }
  183. @include icon-black-white('external', 'actions', 1, true);
  184. @include icon-black-white('fullscreen', 'actions', 1, true);
  185. .icon-fullscreen-white {
  186. filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
  187. }
  188. @include icon-black-white('history', 'actions', 2, true);
  189. @include icon-black-white('info', 'actions', 1, true);
  190. @include icon-black-white('logout', 'actions', 1, true);
  191. @include icon-black-white('mail', 'actions', 1, true);
  192. @include icon-black-white('menu', 'actions', 1, true);
  193. @include icon-black-white('menu-sidebar', 'actions', 1, true);
  194. @include icon-black-white('more', 'actions', 1, true);
  195. @include icon-black-white('password', 'actions', 1, true);
  196. @include icon-black-white('pause', 'actions', 1, true);
  197. @include icon-black-white('play', 'actions', 1, true);
  198. @include icon-black-white('play-add', 'actions', 1, true);
  199. @include icon-black-white('play-next', 'actions', 1, true);
  200. @include icon-black-white('play-previous', 'actions', 1, true);
  201. @include icon-black-white('projects', 'actions', 1, true);
  202. @include icon-black-white('public', 'actions', 1, true);
  203. @include icon-black-white('quota', 'actions', 1, true);
  204. @include icon-black-white('rename', 'actions', 1, true);
  205. @include icon-black-white('screen', 'actions', 1, true);
  206. .icon-screen-white {
  207. filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
  208. }
  209. @include icon-black-white('screen-off', 'actions', 1, true);
  210. .icon-screen-off-white {
  211. filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
  212. }
  213. @include icon-black-white('search', 'actions', 1, true);
  214. /* default icon have a .5 opacity */
  215. .icon-settings {
  216. @include icon-color('settings', 'actions', $color-black, 1, true);
  217. }
  218. .icon-settings-dark {
  219. @include icon-color('settings-dark', 'actions', $color-black, 1, true);
  220. }
  221. .icon-settings-white {
  222. @include icon-color('settings-dark', 'actions', $color-white, 1, true);
  223. }
  224. /* always use icon-shared, AdBlock blocks icon-share */
  225. .icon-shared,
  226. .icon-share {
  227. @include icon-color('share', 'actions', $color-black, 1, true);
  228. &.icon-white {
  229. @include icon-color('share', 'actions', $color-white, 1, true);
  230. }
  231. }
  232. .icon-shared-white,
  233. .icon-share-white {
  234. @include icon-color('share', 'actions', $color-white, 1, true);
  235. }
  236. @include icon-black-white('sound', 'actions', 1, true);
  237. @include icon-black-white('sound-off', 'actions', 1, true);
  238. .icon-favorite {
  239. @include icon-color('star-dark', 'actions', $color-black, 1, true);
  240. }
  241. @include icon-black-white('star', 'actions', 1, true);
  242. .icon-star-dark {
  243. @include icon-color('star', 'actions', $color-black, 1, true);
  244. }
  245. .icon-starred {
  246. &:hover,
  247. &:focus {
  248. @include icon-color('star', 'actions', $color-black, 1, true);
  249. }
  250. @include icon-color('star-dark', 'actions', $color-yellow, 1, true);
  251. }
  252. .icon-star {
  253. &:hover,
  254. &:focus {
  255. @include icon-color('star-dark', 'actions', $color-yellow, 1, true);
  256. }
  257. }
  258. @include icon-black-white('tag', 'actions', 1, true);
  259. @include icon-black-white('timezone', 'actions', 1, true);
  260. @include icon-black-white('toggle', 'actions', 1, true);
  261. @include icon-black-white('toggle-background', 'actions', 1, true);
  262. @include icon-black-white('toggle-pictures', 'actions', 1, true);
  263. @include icon-black-white('toggle-filelist', 'actions', 1, true);
  264. @include icon-black-white('triangle-e', 'actions', 1, true);
  265. @include icon-black-white('triangle-n', 'actions', 1, true);
  266. @include icon-black-white('triangle-s', 'actions', 1, true);
  267. @include icon-black-white('upload', 'actions', 1, true);
  268. @include icon-black-white('user', 'actions', 1, true);
  269. @include icon-black-white('group', 'actions', 1, true);
  270. @include icon-black-white('video', 'actions', 2, true);
  271. .icon-video-white {
  272. filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
  273. }
  274. @include icon-black-white('video-off', 'actions', 1, true);
  275. .icon-video-off-white {
  276. filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
  277. }
  278. @include icon-black-white('video-switch', 'actions', 1, true);
  279. /* SHADOW WHITE ICONS: white version only ----------------------------------- */
  280. .icon-view-close,
  281. .icon-view-close-white {
  282. @include icon-color('view-close', 'actions', $color-white, 1, true);
  283. }
  284. .icon-view-download,
  285. .icon-view-download-white {
  286. @include icon-color('view-download', 'actions', $color-white, 1, true);
  287. }
  288. .icon-view-pause,
  289. .icon-view-pause-white {
  290. @include icon-color('view-pause', 'actions', $color-white, 1, true);
  291. }
  292. .icon-view-play,
  293. .icon-view-play-white {
  294. @include icon-color('view-play', 'actions', $color-white, 1, true);
  295. }
  296. .icon-view-next {
  297. @include icon-color('arrow-right', 'actions', $color-black, 1, true);
  298. &.icon-white {
  299. @include icon-color('arrow-right', 'actions', $color-white, 1, true);
  300. }
  301. }
  302. .icon-view-previous {
  303. @include icon-color('arrow-left', 'actions', $color-black, 1, true);
  304. &.icon-white {
  305. @include icon-color('arrow-left', 'actions', $color-white, 1, true);
  306. }
  307. }
  308. @include icon-black-white('disabled-user', 'actions', 1, true);
  309. @include icon-black-white('disabled-users', 'actions', 1, true);
  310. @include icon-black-white('user-admin', 'actions', 1, true);
  311. /* PLACES ------------------------------------------------------------------- */
  312. .icon-calendar {
  313. @include icon-color('calendar', 'places', $color-white, 1, true);
  314. }
  315. .icon-calendar-dark {
  316. @include icon-color('calendar', 'places', $color-black, 1, true);
  317. }
  318. .icon-contacts {
  319. @include icon-color('contacts', 'places', $color-white, 1, true);
  320. }
  321. .icon-contacts-dark {
  322. @include icon-color('contacts', 'places', $color-black, 1, true);
  323. }
  324. .icon-files {
  325. @include icon-color('files', 'places', $color-white, 1, true);
  326. }
  327. .icon-files-dark {
  328. @include icon-color('files', 'places', $color-black, 1, true);
  329. }
  330. .icon-file,
  331. .icon-filetype-text {
  332. @include icon-color('text', 'filetypes', $color-black, 1, true);
  333. }
  334. .icon-filetype-file {
  335. @include icon-color('file', 'filetypes', $color-black, 1, true);
  336. }
  337. @include icon-black-white('folder', 'filetypes', 1, true);
  338. .icon-filetype-folder {
  339. @include icon-color('folder', 'filetypes', $color-black, 1, true);
  340. }
  341. .icon-filetype-folder-drag-accept {
  342. @include icon-color('folder-drag-accept', 'filetypes', $color-black, 1, true);
  343. }
  344. @include icon-black-white('home', 'places', 1, true);
  345. @include icon-black-white('link', 'places', 1, true);
  346. @include icon-black-white('music', 'places', 1, true);
  347. @include icon-black-white('picture', 'places', 1, true);
  348. /* CLIENTS ------------------------------------------------------------------- */
  349. @include icon-black-white('desktop', 'clients', 1, true);
  350. @include icon-black-white('phone', 'clients', 1, true);
  351. @include icon-black-white('tablet', 'clients', 1, true);
  352. /* APP CATEGORIES ------------------------------------------------------------------- */
  353. .icon-category-installed {
  354. @include icon-color('user', 'actions', $color-black, 1, true);
  355. }
  356. .icon-category-enabled {
  357. @include icon-color('checkmark', 'actions', $color-black, 1, true);
  358. }
  359. .icon-category-disabled {
  360. @include icon-color('close', 'actions', $color-black, 1, true);
  361. }
  362. .icon-category-app-bundles {
  363. @include icon-color('bundles', 'categories', $color-black, 1, true);
  364. }
  365. .icon-category-updates {
  366. @include icon-color('download', 'actions', $color-black, 1, true);
  367. }
  368. .icon-category-files {
  369. @include icon-color('files', 'categories', $color-black, 1, true);
  370. }
  371. .icon-category-social {
  372. @include icon-color('social', 'categories', $color-black, 1, true);
  373. }
  374. .icon-category-office {
  375. @include icon-color('office', 'categories', $color-black, 1, true);
  376. }
  377. .icon-category-auth {
  378. @include icon-color('auth', 'categories', $color-black, 1, true);
  379. }
  380. .icon-category-monitoring {
  381. @include icon-color('monitoring', 'categories', $color-black, 1, true);
  382. }
  383. .icon-category-multimedia {
  384. @include icon-color('multimedia', 'categories', $color-black, 1, true);
  385. }
  386. .icon-category-organization {
  387. @include icon-color('organization', 'categories', $color-black, 1, true);
  388. }
  389. .icon-category-customization {
  390. @include icon-color('customization', 'categories', $color-black, 1, true);
  391. }
  392. .icon-category-integration {
  393. @include icon-color('integration', 'categories', $color-black, 1, true);
  394. }
  395. .icon-category-tools {
  396. @include icon-color('settings-dark', 'actions', $color-black, 1, true);
  397. }
  398. .icon-category-games {
  399. @include icon-color('games', 'categories', $color-black, 1, true);
  400. }
  401. .icon-category-security {
  402. @include icon-color('password', 'actions', $color-black, 1, true);
  403. }
  404. .icon-category-search {
  405. @include icon-color('search', 'actions', $color-black, 1, true);
  406. }
  407. .icon-talk {
  408. @include icon-color('app-dark', 'spreed', $color-black, 1);
  409. }
  410. .nav-icon-systemtagsfilter {
  411. @include icon-color('tag', 'actions', $color-black, 1, true);
  412. }