server/core/css/icons.scss

/**
 * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
 * @copyright Copyright (c) 2016, Joas Schilling <coding@schilljs.com>
 * @copyright Copyright (c) 2016, Lukas Reschke <lukas@statuscode.ch>
 * @copyright Copyright (c) 2016, Roeland Jago Douma <roeland@famdouma.nl>
 * @copyright Copyright (c) 2016, Vincent Chan <plus.vincchan@gmail.com>
 * @copyright Copyright (c) 2015, Thomas Müller <thomas.mueller@tmit.eu>
 * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
 * @copyright Copyright (c) 2015, Jan-Christoph Borchardt <hey@jancborchardt.net>
 *
 * @license GNU AGPL version 3 or any later version
 *
 */

/* GLOBAL ------------------------------------------------------------------- */
[class^='icon-'], [class*=' icon-'] {
	background-repeat: no-repeat;
	background-position: center;
	min-width: 16px;
	min-height: 16px;
}

.icon-breadcrumb {
	background-image: url('../img/breadcrumb.svg?v=1');
}

/* LOADING ------------------------------------------------------------------ */
.loading,
.loading-small,
.icon-loading,
.icon-loading-dark,
.icon-loading-small,
.icon-loading-small-dark {
	position: relative;
	&:after {
		z-index: 2;
		content: '';
		height: 28px;
		width: 28px;
		margin: -16px 0 0 -16px;
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 100%;
		-webkit-animation: rotate .8s infinite linear;
		animation: rotate .8s infinite linear;
		-webkit-transform-origin: center;
		-ms-transform-origin: center;
		transform-origin: center;
		border: 2px solid var(--color-loading-light);
		border-top-color: var(--color-loading-dark);
	}
}

.icon-loading-dark:after,
.icon-loading-small-dark:after {
	border: 2px solid var(--color-loading-dark);
	border-top-color: var(--color-loading-light);
}

.icon-loading-small:after,
.icon-loading-small-dark:after {
	height: 12px;
	width: 12px;
	margin: -8px 0 0 -8px;
}

/* Css replaced elements don't have ::after nor ::before */
img, object, video, button, textarea, input, select, div[contenteditable='true'] {
	.icon-loading {
		background-image: url('../img/loading.gif');
	}
	.icon-loading-dark {
		background-image: url('../img/loading-dark.gif');
	}
	.icon-loading-small {
		background-image: url('../img/loading-small.gif');
	}
	.icon-loading-small-dark {
		background-image: url('../img/loading-small-dark.gif');
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.icon-32 {
	background-size: 32px !important;
}

.icon-white {
	filter: invert(100%);
	&.icon-shadow {
		filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
	}
}

/* ICONS -------------------------------------------------------------------- */
.icon-add {
	background-image: url('../img/actions/add.svg?v=1');
}

.icon-address {
	background-image: url('../img/actions/address.svg?v=1');
}
.icon-address-white {
	background-image: url('#{$webroot}/svg/address/fff?v=1');
}

.icon-audio {
	background-image: url('../img/actions/audio.svg?v=1');
}

/* TODO: to be deprecated; use .icon-audio.icon-white.icon-shadow */
.icon-audio-white {
	background-image: url('../img/actions/audio.svg?v=2');
	filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}

.icon-audio-off {
	background-image: url('../img/actions/audio-off.svg?v=1');
}

/* TODO: to be deprecated; use .icon-audio-off.icon-white.icon-shadow */
.icon-audio-off-white {
	background-image: url('../img/actions/audio-off.svg?v=1');
	filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}

.icon-caret {
	background-image: url('../img/actions/caret.svg?v=1');
}

.icon-caret-dark {
	background-image: url('../img/actions/caret-dark.svg?v=1');
}

.icon-checkmark {
	background-image: url('../img/actions/checkmark.svg?v=1');
	
}

.icon-checkmark-white {
	background-image: url('#{$webroot}/svg/icon-checkmark/fff?v=1');
}

.icon-checkmark-color {
	background-image: url('#{$webroot}/svg/icon-checkmark/#{$color-success}?v=1');
}

.icon-clippy {
	background-image: url('../img/actions/clippy.svg?v=2');
}

.icon-close {
	background-image: url('../img/actions/close.svg?v=1');
}

.icon-close-white {
	background-image: url('#{$webroot}/svg/close/fff?v=1');
}

.icon-comment {
	background-image: url('../img/actions/comment.svg?v=1');
}

.icon-confirm {
	background-image: url('../img/actions/confirm.svg?v=2');
}

.icon-confirm-fade {
	background-image: url('../img/actions/confirm-fade.svg?v=2');
}

.icon-confirm-white {
	background-image: url('#{$webroot}/svg/icon-confirm/fff?v=1');
}

.icon-delete {
	background-image: url('../img/actions/delete.svg?v=1');
	&.no-permission {
		&:hover,
		&:focus {
			background-image: url('../img/actions/delete.svg?v=1');
		}
	}
	&:hover,
	&:focus {
		background-image: url('#{$webroot}/svg/icon-delete/d40000?v=1');
		filter: initial;
	}
}

.icon-delete-white {
	background-image: url('#{$webroot}/svg/icon-delete/fff?v=1');
	&.no-permission {
		&:hover,
		&:focus {
			background-image: url('#{$webroot}/svg/icon-delete/fff?v=1');
		}
	}
	&:hover,
	&:focus {
		background-image: url('#{$webroot}/svg/icon-delete/d40000?v=1');
	}
}

.icon-details {
	background-image: url('../img/actions/details.svg?v=1');
}

.icon-download {
	background-image: url('../img/actions/download.svg?v=1');
}

.icon-download-white {
	background-image: url('#{$webroot}/svg/icon-download/fff?v=1');
}

.icon-edit {
	background-image: url('../img/actions/edit.svg?v=1');
}

.icon-error {
	background-image: url('../img/actions/error.svg?v=1');
}

.icon-error-white {
	background-image: url('#{$webroot}/svg/icon-error/fff?v=1');
}

.icon-error-color {
	background-image: url('#{$webroot}/svg/icon-error/d40000?v=1');
}

.icon-external {
	background-image: url('../img/actions/external.svg?v=1');
}

.icon-fullscreen {
	background-image: url('../img/actions/fullscreen.svg?v=1');
}

/* TODO: to be deprecated; use .icon-fullscreen.icon-white.icon-shadow */
.icon-fullscreen-white {
	background-image: url('../img/actions/fullscreen.svg?v=1');
	filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}

.icon-history {
	background-image: url('../img/actions/history.svg?v=1');
}

.icon-info {
	background-image: url('../img/actions/info.svg?v=1');
}

.icon-info-white {
	background-image: url('#{$webroot}/svg/icon-info/fff?v=1');
}

.icon-logout {
	background-image: url('../img/actions/logout.svg?v=1');
}

.icon-mail {
	background-image: url('../img/actions/mail.svg?v=1');
}

.icon-menu {
	background-image: url('../img/actions/menu.svg?v=1');
}

.icon-more {
	background-image: url('../img/actions/more.svg?v=1');
}

.icon-more-white {
	background-image: url('#{$webroot}/svg/more/fff?v=1');
}

.icon-password {
	background-image: url('../img/actions/password.svg?v=1');
}

.icon-pause {
	background-image: url('../img/actions/pause.svg?v=1');
}

.icon-play {
	background-image: url('../img/actions/play.svg?v=1');
}

.icon-play-add {
	background-image: url('../img/actions/play-add.svg?v=1');
}

.icon-play-next {
	background-image: url('../img/actions/play-next.svg?v=1');
}

.icon-play-previous {
	background-image: url('../img/actions/play-previous.svg?v=1');
}

.icon-public {
	background-image: url('../img/actions/public.svg?v=1');
}

.icon-quota {
	background-image: url('../img/actions/quota.svg?v=1');
}

.icon-rename {
	background-image: url('../img/actions/rename.svg?v=1');
}

.icon-screen {
	background-image: url('../img/actions/screen.svg?v=1');
}

/* TODO: to be deprecated; use .icon-screen.icon-white.icon-shadow */
.icon-screen-white {
	background-image: url('../img/actions/screen.svg?v=1');
	filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}

.icon-screen-off {
	background-image: url('../img/actions/screen-off.svg?v=1');
}

/* TODO: to be deprecated; use .icon-screen-off.icon-white.icon-shadow */
.icon-screen-off-white {
	background-image: url('../img/actions/screen-off.svg?v=1');
	filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}

.icon-search {
	background-image: url('../img/actions/search.svg?v=1');
}

.icon-search-white {
	background-image: url('#{$webroot}/svg/search/fff?v=1');
}

.icon-settings {
	background-image: url('../img/actions/settings.svg?v=1');
}

.icon-settings-dark {
	background-image: url('../img/actions/settings-dark.svg?v=1');
}

.icon-settings-white {
	background-image: url('#{$webroot}/svg/settings-dark/fff?v=1');
}

/* always use icon-shared, AdBlock blocks icon-share */
.icon-shared,
.icon-share {
	background-image: url('../img/actions/share.svg?v=1');
}

.icon-sound {
	background-image: url('../img/actions/sound.svg?v=1');
}

.icon-sound-off {
	background-image: url('../img/actions/sound-off.svg?v=1');
}

.icon-favorite {
	background-image: url('../img/actions/star-dark.svg?v=1');
}

.icon-star {
	background-image: url('../img/actions/star.svg?v=1');
}

.icon-star-dark {
	background-image: url('../img/actions/star-dark.svg?v=1');
}

.icon-starred {
	&:hover,
	&:focus {
		background-image: url('../img/actions/star.svg?v=1');
	}
	background-image: url('../img/actions/starred.svg?v=1');
}

.icon-star {
	&:hover,
	&:focus {
		background-image: url('../img/actions/starred.svg?v=1');
	}
}

.icon-tag {
	background-image: url('../img/actions/tag.svg?v=1');
}

.icon-timezone {
	background-image: url('../img/actions/timezone.svg?v=1');
}

.icon-toggle {
	background-image: url('../img/actions/toggle.svg?v=1');
}

.icon-toggle-background {
	background-image: url('../img/actions/toggle-background.svg?v=1');
}

.icon-toggle-pictures {
	background-image: url('../img/actions/toggle-pictures.svg?v=1');
}

.icon-triangle-e {
	background-image: url('../img/actions/triangle-e.svg?v=1');
}

.icon-triangle-n {
	background-image: url('../img/actions/triangle-n.svg?v=1');
}

.icon-triangle-s {
	background-image: url('../img/actions/triangle-s.svg?v=1');
}

.icon-upload {
	background-image: url('../img/actions/upload.svg?v=1');
}

.icon-upload-white {
	background-image: url('#{$webroot}/svg/upload/fff?v=1');
}

.icon-user {
	background-image: url('../img/actions/user.svg?v=1');
}

.icon-video {
	background-image: url('../img/actions/video.svg?v=1');
}

/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */
.icon-video-white {
	background-image: url('../img/actions/video.svg?v=2');
	filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}

.icon-video-off {
	background-image: url('../img/actions/video-off.svg?v=1');
}

/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */
.icon-video-off-white {
	background-image: url('../img/actions/video-off.svg?v=1');
	filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}

.icon-video-switch {
	background-image: url('../img/actions/video-switch.svg?v=1');
}

.icon-view-close {
	background-image: url('../img/actions/view-close.svg?v=1');
}

.icon-view-download {
	background-image: url('../img/actions/view-download.svg?v=1');
}

.icon-view-next {
	background-image: url('../img/actions/arrow-right.svg?v=1');
}

.icon-view-pause {
	background-image: url('../img/actions/view-pause.svg?v=1');
}

.icon-view-play {
	background-image: url('../img/actions/view-play.svg?v=1');
}

.icon-view-previous {
	background-image: url('../img/actions/arrow-left.svg?v=1');
}

.icon-disabled-user {
	background-image: url('../img/actions/disabled-user.svg?v=1');
}

.icon-disabled-users {
	background-image: url('../img/actions/disabled-users.svg?v=1');
}

.icon-user-admin {
	background-image: url('../img/actions/user-admin.svg?v=1');
}

/* PLACES ------------------------------------------------------------------- */
.icon-calendar {
	background-image: url('../img/places/calendar.svg?v=1');
}

.icon-calendar-dark {
	background-image: url('../img/places/calendar-dark.svg?v=1');
}

.icon-contacts {
	background-image: url('../img/places/contacts.svg?v=1');
}

.icon-contacts-dark {
	background-image: url('../img/places/contacts-dark.svg?v=1');
}

.icon-files {
	background-image: url('../img/places/files.svg?v=1');
}

.icon-files-dark {
	background-image: url('../img/places/files-dark.svg?v=1');
}

.icon-file,
.icon-filetype-text {
	background-image: url('../img/filetypes/text.svg?v=1');
}

.icon-folder,
.icon-filetype-folder {
	background-image: url('../img/filetypes/folder.svg?v=1');
}

.icon-filetype-folder-drag-accept {
	background-image: url('../img/filetypes/folder-drag-accept.svg?v=1') !important;
}

.icon-home {
	background-image: url('../img/places/home.svg?v=1');
}

.icon-link {
	background-image: url('../img/places/link.svg?v=1');
}

.icon-music {
	background-image: url('../img/places/music.svg?v=1');
}

.icon-picture {
	background-image: url('../img/places/picture.svg?v=1');
}

/* CLIENTS ------------------------------------------------------------------- */

.icon-desktop {
	background-image: url('../img/clients/desktop.svg?v=1');
}

.icon-phone {
	background-image: url('../img/clients/phone.svg?v=1');
}

.icon-tablet {
	background-image: url('../img/clients/tablet.svg?v=1');
}

/* APP CATEGORIES ------------------------------------------------------------------- */
.icon-category-installed {
	background-image: url('../img/actions/user.svg?v=1');
}

.icon-category-enabled {
	background-image: url('../img/actions/checkmark.svg?v=1');
}

.icon-category-disabled {
	background-image: url('../img/actions/close.svg?v=1');
}

.icon-category-app-bundles {
	background-image: url('../img/categories/bundles.svg?v=1');
}

.icon-category-updates {
	background-image: url('../img/actions/download.svg?v=1');
}

.icon-category-files {
	background-image: url('../img/categories/files.svg?v=1');
}

.icon-category-social {
	background-image: url('../img/categories/social.svg?v=1');
}

.icon-category-office {
	background-image: url('../img/categories/office.svg?v=1');
}

.icon-category-auth {
	background-image: url('../img/categories/auth.svg?v=1');
}

.icon-category-monitoring {
	background-image: url('../img/categories/monitoring.svg?v=1');
}

.icon-category-multimedia {
	background-image: url('../img/categories/multimedia.svg?v=1');
}

.icon-category-organization {
	background-image: url('../img/categories/organization.svg?v=1');
}

.icon-category-customization {
	background-image: url('../img/categories/customization.svg?v=1');
}

.icon-category-integration {
	background-image: url('../img/categories/integration.svg?v=1');
}

.icon-category-tools {
	background-image: url('../img/actions/settings-dark.svg?v=1');
}

.icon-category-games {
	background-image: url('../img/categories/games.svg?v=1');
}

.icon-category-security {
	background-image: url('../img/actions/password.svg?v=1');
}

.icon-category-search {
	background-image: url('../img/actions/search.svg?v=1');
}