/** * @copyright Copyright (c) 2016, John Molakvoæ * @copyright Copyright (c) 2016, Joas Schilling * @copyright Copyright (c) 2016, Lukas Reschke * @copyright Copyright (c) 2016, Roeland Jago Douma * @copyright Copyright (c) 2016, Vincent Chan * @copyright Copyright (c) 2015, Thomas Müller * @copyright Copyright (c) 2015, Hendrik Leppelsack * @copyright Copyright (c) 2015, Jan-Christoph Borchardt * * @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 rgba($color-loading, 0.5); border-top-color: $color-loading; } } .icon-loading-dark:after, .icon-loading-small-dark:after { border: 2px solid rgba($color-loading-dark, 0.5); border-top-color: $color-loading-dark; } .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 $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-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 $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 $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('../img/actions/checkmark-white.svg?v=1'); } .icon-checkmark-color { background-image: url('../img/actions/checkmark-color.svg?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('../img/actions/close-white.svg?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('../img/actions/confirm-white.svg?v=2'); } .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('../img/actions/delete-hover.svg?v=1'); filter: initial; } } .icon-delete-white { background-image: url('../img/actions/delete-white.svg?v=1'); &.no-permission { &:hover, &:focus { background-image: url('../img/actions/delete-white.svg?v=1'); } } &:hover, &:focus { background-image: url('../img/actions/delete-hover.svg?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('../img/actions/download-white.svg?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('../img/actions/error-white.svg?v=1'); } .icon-error-color { background-image: url('../img/actions/error-color.svg?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 $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('../img/actions/info-white.svg?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('../img/actions/more-white.svg?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-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 $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 $color-box-shadow); } .icon-search { background-image: url('../img/actions/search.svg?v=1'); } .icon-search-white { background-image: url('../img/actions/search-white.svg?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('../img/actions/settings-white.svg?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-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('../img/actions/upload-white.svg?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 $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 $color-box-shadow); } .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'); } /* 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'); }