1
0

icons.css 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  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. * @author Joas Schilling <coding@schilljs.com>
  7. * @author Lukas Reschke <lukas@statuscode.ch>
  8. * @author Roeland Jago Douma <roeland@famdouma.nl>
  9. * @author Vincent Chan <plus.vincchan@gmail.com>
  10. * @author Thomas Müller <thomas.mueller@tmit.eu>
  11. * @author Hendrik Leppelsack <hendrik@leppelsack.de>
  12. * @author Jan-Christoph Borchardt <hey@jancborchardt.net>
  13. *
  14. * @license GNU AGPL version 3 or any later version
  15. *
  16. * This program is free software: you can redistribute it and/or modify
  17. * it under the terms of the GNU Affero General Public License as
  18. * published by the Free Software Foundation, either version 3 of the
  19. * License, or (at your option) any later version.
  20. *
  21. * This program is distributed in the hope that it will be useful,
  22. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  23. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  24. * GNU Affero General Public License for more details.
  25. *
  26. * You should have received a copy of the GNU Affero General Public License
  27. * along with this program. If not, see <http://www.gnu.org/licenses/>.
  28. *
  29. */
  30. /**
  31. * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
  32. *
  33. * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
  34. *
  35. * @license GNU AGPL version 3 or any later version
  36. *
  37. * This program is free software: you can redistribute it and/or modify
  38. * it under the terms of the GNU Affero General Public License as
  39. * published by the Free Software Foundation, either version 3 of the
  40. * License, or (at your option) any later version.
  41. *
  42. * This program is distributed in the hope that it will be useful,
  43. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  44. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  45. * GNU Affero General Public License for more details.
  46. *
  47. * You should have received a copy of the GNU Affero General Public License
  48. * along with this program. If not, see <http://www.gnu.org/licenses/>.
  49. *
  50. */
  51. /**
  52. * @see core/src/icons.js
  53. */
  54. /**
  55. * SVG COLOR API
  56. *
  57. * @param string $icon the icon filename
  58. * @param string $dir the icon folder within /core/img if $core or app name
  59. * @param string $color the desired color in hexadecimal
  60. * @param int $version the version of the file
  61. * @param bool [$core] search icon in core
  62. *
  63. * @returns A background image with the url to the set to the requested icon.
  64. */
  65. /* GLOBAL ------------------------------------------------------------------- */
  66. @import url("../../dist/icons.css");
  67. /**
  68. * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
  69. *
  70. * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
  71. *
  72. * @license GNU AGPL version 3 or any later version
  73. *
  74. * This program is free software: you can redistribute it and/or modify
  75. * it under the terms of the GNU Affero General Public License as
  76. * published by the Free Software Foundation, either version 3 of the
  77. * License, or (at your option) any later version.
  78. *
  79. * This program is distributed in the hope that it will be useful,
  80. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  81. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  82. * GNU Affero General Public License for more details.
  83. *
  84. * You should have received a copy of the GNU Affero General Public License
  85. * along with this program. If not, see <http://www.gnu.org/licenses/>.
  86. *
  87. */
  88. [class^=icon-], [class*=" icon-"] {
  89. background-repeat: no-repeat;
  90. background-position: center;
  91. min-width: 16px;
  92. min-height: 16px;
  93. }
  94. .icon-breadcrumb {
  95. background-image: url("../img/breadcrumb.svg?v=1");
  96. }
  97. /* LOADING ------------------------------------------------------------------ */
  98. .loading,
  99. .loading-small,
  100. .icon-loading,
  101. .icon-loading-dark,
  102. .icon-loading-small,
  103. .icon-loading-small-dark {
  104. position: relative;
  105. }
  106. .loading:after,
  107. .loading-small:after,
  108. .icon-loading:after,
  109. .icon-loading-dark:after,
  110. .icon-loading-small:after,
  111. .icon-loading-small-dark:after {
  112. z-index: 2;
  113. content: "";
  114. height: 28px;
  115. width: 28px;
  116. margin: -16px 0 0 -16px;
  117. position: absolute;
  118. top: 50%;
  119. left: 50%;
  120. border-radius: 100%;
  121. -webkit-animation: rotate 0.8s infinite linear;
  122. animation: rotate 0.8s infinite linear;
  123. -webkit-transform-origin: center;
  124. -ms-transform-origin: center;
  125. transform-origin: center;
  126. border: 2px solid var(--color-loading-light);
  127. border-top-color: var(--color-loading-dark);
  128. filter: var(--background-invert-if-dark);
  129. }
  130. .primary .loading:after, .primary + .loading:after,
  131. .primary .loading-small:after,
  132. .primary + .loading-small:after,
  133. .primary .icon-loading:after,
  134. .primary + .icon-loading:after,
  135. .primary .icon-loading-dark:after,
  136. .primary + .icon-loading-dark:after,
  137. .primary .icon-loading-small:after,
  138. .primary + .icon-loading-small:after,
  139. .primary .icon-loading-small-dark:after,
  140. .primary + .icon-loading-small-dark:after {
  141. filter: var(--primary-invert-if-bright);
  142. }
  143. .icon-loading-dark:after,
  144. .icon-loading-small-dark:after {
  145. border: 2px solid var(--color-loading-dark);
  146. border-top-color: var(--color-loading-light);
  147. }
  148. .icon-loading-small:after,
  149. .icon-loading-small-dark:after {
  150. height: 12px;
  151. width: 12px;
  152. margin: -8px 0 0 -8px;
  153. }
  154. /* Css replaced elements don't have ::after nor ::before */
  155. audio.icon-loading, canvas.icon-loading, embed.icon-loading, iframe.icon-loading, img.icon-loading, input.icon-loading, object.icon-loading, video.icon-loading {
  156. background-image: url("../img/loading.gif");
  157. }
  158. audio.icon-loading-dark, canvas.icon-loading-dark, embed.icon-loading-dark, iframe.icon-loading-dark, img.icon-loading-dark, input.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark {
  159. background-image: url("../img/loading-dark.gif");
  160. }
  161. audio.icon-loading-small, canvas.icon-loading-small, embed.icon-loading-small, iframe.icon-loading-small, img.icon-loading-small, input.icon-loading-small, object.icon-loading-small, video.icon-loading-small {
  162. background-image: url("../img/loading-small.gif");
  163. }
  164. audio.icon-loading-small-dark, canvas.icon-loading-small-dark, embed.icon-loading-small-dark, iframe.icon-loading-small-dark, img.icon-loading-small-dark, input.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark {
  165. background-image: url("../img/loading-small-dark.gif");
  166. }
  167. @keyframes rotate {
  168. from {
  169. transform: rotate(0deg);
  170. }
  171. to {
  172. transform: rotate(360deg);
  173. }
  174. }
  175. .icon-32 {
  176. background-size: 32px !important;
  177. }
  178. .icon-white.icon-shadow,
  179. .icon-audio-white,
  180. .icon-audio-off-white,
  181. .icon-fullscreen-white,
  182. .icon-screen-white,
  183. .icon-screen-off-white,
  184. .icon-video-white,
  185. .icon-video-off-white {
  186. filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
  187. }
  188. /* ICONS -------------------------------------------------------------------
  189. * These icon classes are generated automatically with the following pattern
  190. * .icon-close (black icon)
  191. * .icon-close-white (white icon)
  192. * .icon-close.icon-white (white icon)
  193. *
  194. * Some class definitions are kept as before, since they don't follow the pattern
  195. * or have some additional styling like drop shadows
  196. */
  197. /*# sourceMappingURL=icons.css.map */