icons.scss 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
  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. audio, canvas, embed, iframe, img, input, object, video {
  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. &.no-hover {
  151. &:hover,
  152. &:focus {
  153. @include icon-color('delete', 'actions', $color-black, 1, true);
  154. }
  155. }
  156. &:hover,
  157. &:focus {
  158. @include icon-color('delete', 'actions', $color-error, 1, true);
  159. filter: initial;
  160. }
  161. &.icon-white {
  162. @include icon-color('delete', 'actions', $color-white, 1, true);
  163. }
  164. }
  165. .icon-delete-white {
  166. @include icon-color('delete', 'actions', $color-white, 1, true);
  167. &.no-permission {
  168. &:hover,
  169. &:focus {
  170. @include icon-color('delete', 'actions', $color-white, 1, true);
  171. }
  172. }
  173. &:hover,
  174. &:focus {
  175. @include icon-color('delete', 'actions', $color-error, 1, true);
  176. }
  177. }
  178. @include icon-black-white('details', 'actions', 1, true);
  179. @include icon-black-white('edit', 'actions', 1, true);
  180. @include icon-black-white('error', 'actions', 1, true);
  181. .icon-error-color {
  182. @include icon-color('error', 'actions', $color-error, 1, true);
  183. }
  184. @include icon-black-white('external', 'actions', 1, true);
  185. @include icon-black-white('fullscreen', 'actions', 1, true);
  186. .icon-fullscreen-white {
  187. filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
  188. }
  189. @include icon-black-white('history', 'actions', 2, true);
  190. @include icon-black-white('info', 'actions', 1, true);
  191. @include icon-black-white('logout', 'actions', 1, true);
  192. @include icon-black-white('mail', 'actions', 1, true);
  193. @include icon-black-white('menu', 'actions', 1, true);
  194. @include icon-black-white('menu-sidebar', 'actions', 1, true);
  195. @include icon-black-white('more', 'actions', 1, true);
  196. @include icon-black-white('password', 'actions', 1, true);
  197. @include icon-black-white('pause', 'actions', 1, true);
  198. @include icon-black-white('play', 'actions', 1, true);
  199. @include icon-black-white('play-add', 'actions', 1, true);
  200. @include icon-black-white('play-next', 'actions', 1, true);
  201. @include icon-black-white('play-previous', 'actions', 1, true);
  202. @include icon-black-white('projects', 'actions', 1, true);
  203. @include icon-black-white('public', 'actions', 1, true);
  204. @include icon-black-white('quota', 'actions', 1, true);
  205. @include icon-black-white('rename', 'actions', 1, true);
  206. @include icon-black-white('screen', 'actions', 1, true);
  207. @include icon-black-white('template-add', 'actions', 1, true);
  208. .icon-screen-white {
  209. filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
  210. }
  211. @include icon-black-white('screen-off', 'actions', 1, true);
  212. .icon-screen-off-white {
  213. filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
  214. }
  215. @include icon-black-white('search', 'actions', 1, true);
  216. /* default icon have a .5 opacity */
  217. .icon-settings {
  218. @include icon-color('settings', 'actions', $color-black, 1, true);
  219. }
  220. .icon-settings-dark {
  221. @include icon-color('settings-dark', 'actions', $color-black, 1, true);
  222. }
  223. .icon-settings-white {
  224. @include icon-color('settings-dark', 'actions', $color-white, 1, true);
  225. }
  226. /* always use icon-shared, AdBlock blocks icon-share */
  227. .icon-shared,
  228. .icon-share {
  229. @include icon-color('share', 'actions', $color-black, 1, true);
  230. &.icon-white {
  231. @include icon-color('share', 'actions', $color-white, 1, true);
  232. }
  233. }
  234. .icon-shared-white,
  235. .icon-share-white {
  236. @include icon-color('share', 'actions', $color-white, 1, true);
  237. }
  238. @include icon-black-white('sound', 'actions', 1, true);
  239. @include icon-black-white('sound-off', 'actions', 1, true);
  240. .icon-favorite {
  241. @include icon-color('star-dark', 'actions', $color-black, 1, true);
  242. }
  243. @include icon-black-white('star', 'actions', 1, true);
  244. .icon-star-dark {
  245. @include icon-color('star', 'actions', $color-black, 1, true);
  246. }
  247. .icon-starred {
  248. &:hover,
  249. &:focus {
  250. @include icon-color('star', 'actions', $color-black, 1, true);
  251. }
  252. @include icon-color('star-dark', 'actions', $color-yellow, 1, true);
  253. }
  254. .icon-star {
  255. &:hover,
  256. &:focus {
  257. @include icon-color('star-dark', 'actions', $color-yellow, 1, true);
  258. }
  259. }
  260. @include icon-black-white('tag', 'actions', 2, true);
  261. @include icon-black-white('timezone', 'actions', 1, true);
  262. @include icon-black-white('toggle', 'actions', 1, true);
  263. @include icon-black-white('toggle-background', 'actions', 1, true);
  264. @include icon-black-white('toggle-pictures', 'actions', 1, true);
  265. @include icon-black-white('toggle-filelist', 'actions', 1, true);
  266. @include icon-black-white('triangle-e', 'actions', 1, true);
  267. @include icon-black-white('triangle-n', 'actions', 1, true);
  268. @include icon-black-white('triangle-s', 'actions', 1, true);
  269. @include icon-black-white('upload', 'actions', 1, true);
  270. @include icon-black-white('user', 'actions', 1, true);
  271. @include icon-black-white('group', 'actions', 1, true);
  272. @include icon-black-white('filter', 'actions', 1, true);
  273. @include icon-black-white('video', 'actions', 2, true);
  274. .icon-video-white {
  275. filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
  276. }
  277. @include icon-black-white('video-off', 'actions', 1, true);
  278. .icon-video-off-white {
  279. filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
  280. }
  281. @include icon-black-white('video-switch', 'actions', 1, true);
  282. /* SHADOW WHITE ICONS: white version only ----------------------------------- */
  283. .icon-view-close,
  284. .icon-view-close-white {
  285. @include icon-color('view-close', 'actions', $color-white, 1, true);
  286. }
  287. .icon-view-download,
  288. .icon-view-download-white {
  289. @include icon-color('view-download', 'actions', $color-white, 1, true);
  290. }
  291. .icon-view-pause,
  292. .icon-view-pause-white {
  293. @include icon-color('view-pause', 'actions', $color-white, 1, true);
  294. }
  295. .icon-view-play,
  296. .icon-view-play-white {
  297. @include icon-color('view-play', 'actions', $color-white, 1, true);
  298. }
  299. .icon-view-next {
  300. @include icon-color('arrow-right', 'actions', $color-black, 1, true);
  301. &.icon-white {
  302. @include icon-color('arrow-right', 'actions', $color-white, 1, true);
  303. }
  304. }
  305. .icon-view-previous {
  306. @include icon-color('arrow-left', 'actions', $color-black, 1, true);
  307. &.icon-white {
  308. @include icon-color('arrow-left', 'actions', $color-white, 1, true);
  309. }
  310. }
  311. @include icon-black-white('disabled-user', 'actions', 1, true);
  312. @include icon-black-white('disabled-users', 'actions', 1, true);
  313. @include icon-black-white('user-admin', 'actions', 1, true);
  314. @include icon-black-white('alert-outline', 'actions', 1, true);
  315. /* PLACES ------------------------------------------------------------------- */
  316. .icon-calendar {
  317. @include icon-color('calendar', 'places', $color-white, 1, true);
  318. }
  319. .icon-calendar-dark {
  320. @include icon-color('calendar', 'places', $color-black, 1, true);
  321. }
  322. .icon-contacts {
  323. @include icon-color('contacts', 'places', $color-white, 1, true);
  324. }
  325. .icon-contacts-dark {
  326. @include icon-color('contacts', 'places', $color-black, 1, true);
  327. }
  328. .icon-files {
  329. @include icon-color('files', 'places', $color-white, 1, true);
  330. }
  331. .icon-files-dark {
  332. @include icon-color('files', 'places', $color-black, 1, true);
  333. }
  334. .icon-file,
  335. .icon-filetype-text {
  336. @include icon-color('text', 'filetypes', #969696, 1, true);
  337. }
  338. .icon-filetype-file {
  339. @include icon-color('file', 'filetypes', #969696, 1, true);
  340. }
  341. @include icon-black-white('folder', 'filetypes', 1, true);
  342. .icon-filetype-folder {
  343. @include icon-color('folder', 'filetypes', $color-primary, 1, true);
  344. }
  345. .icon-filetype-folder-drag-accept {
  346. @include icon-color('folder-drag-accept', 'filetypes', $color-primary, 1, true);
  347. }
  348. @include icon-black-white('home', 'places', 1, true);
  349. @include icon-black-white('link', 'places', 1, true);
  350. @include icon-black-white('music', 'places', 1, true);
  351. @include icon-black-white('picture', 'places', 1, true);
  352. /* CLIENTS ------------------------------------------------------------------- */
  353. @include icon-black-white('desktop', 'clients', 1, true);
  354. @include icon-black-white('phone', 'clients', 1, true);
  355. @include icon-black-white('tablet', 'clients', 1, true);
  356. /* APP CATEGORIES ------------------------------------------------------------------- */
  357. .icon-category-installed {
  358. @include icon-color('user', 'actions', $color-black, 1, true);
  359. }
  360. .icon-category-enabled {
  361. @include icon-color('checkmark', 'actions', $color-black, 1, true);
  362. }
  363. .icon-category-disabled {
  364. @include icon-color('close', 'actions', $color-black, 1, true);
  365. }
  366. .icon-category-app-bundles {
  367. @include icon-color('bundles', 'categories', $color-black, 1, true);
  368. }
  369. .icon-category-updates {
  370. @include icon-color('download', 'actions', $color-black, 1, true);
  371. }
  372. .icon-category-files {
  373. @include icon-color('files', 'categories', $color-black, 1, true);
  374. }
  375. .icon-category-social {
  376. @include icon-color('social', 'categories', $color-black, 1, true);
  377. }
  378. .icon-category-office {
  379. @include icon-color('office', 'categories', $color-black, 1, true);
  380. }
  381. .icon-category-auth {
  382. @include icon-color('auth', 'categories', $color-black, 1, true);
  383. }
  384. .icon-category-monitoring {
  385. @include icon-color('monitoring', 'categories', $color-black, 1, true);
  386. }
  387. .icon-category-multimedia {
  388. @include icon-color('multimedia', 'categories', $color-black, 1, true);
  389. }
  390. .icon-category-organization {
  391. @include icon-color('organization', 'categories', $color-black, 1, true);
  392. }
  393. .icon-category-customization {
  394. @include icon-color('customization', 'categories', $color-black, 1, true);
  395. }
  396. .icon-category-integration {
  397. @include icon-color('integration', 'categories', $color-black, 1, true);
  398. }
  399. .icon-category-tools {
  400. @include icon-color('settings-dark', 'actions', $color-black, 1, true);
  401. }
  402. .icon-category-games {
  403. @include icon-color('games', 'categories', $color-black, 1, true);
  404. }
  405. .icon-category-security {
  406. @include icon-color('password', 'actions', $color-black, 1, true);
  407. }
  408. .icon-category-search {
  409. @include icon-color('search', 'actions', $color-black, 1, true);
  410. }
  411. .icon-category-workflow {
  412. @include icon-color('workflow', 'categories', $color-black, 1, true);
  413. }
  414. .icon-category-dashboard {
  415. @include icon-color('dashboard', 'categories', $color-black, 1, true);
  416. }
  417. .icon-talk {
  418. @include icon-color('app-dark', 'spreed', $color-black, 1);
  419. }
  420. .nav-icon-systemtagsfilter {
  421. @include icon-color('tag', 'actions', $color-black, 1, true);
  422. }