diff --git a/Makefile b/Makefile new file mode 100644 index 0000000000000..5d8fa4f0e920f --- /dev/null +++ b/Makefile @@ -0,0 +1,15 @@ +# This file is licensed under the Affero General Public License version 3 or +# later. See the COPYING file. +# @author Christoph Wurst +# @copyright Christoph Wurst 2017 + +default: svg-sprites + +svg-sprites: clean + cd build && \ + npm install && \ + pwd && \ + grunt + +clean: + rm -f core/css/images/actions-*.svg \ No newline at end of file diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 54ed05385fa43..74185941b5736 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -789,7 +789,6 @@ html.ie8 #controls .button.new { #controls .actions .button .icon { display: inline-block; vertical-align: middle; - background-size: 16px 16px; } #filestable .filename .action .icon.hidden, diff --git a/build/Gruntfile.js b/build/Gruntfile.js new file mode 100644 index 0000000000000..21af2ef62e122 --- /dev/null +++ b/build/Gruntfile.js @@ -0,0 +1,52 @@ +module.exports = function (grunt) { + grunt.initConfig({ + svg_sprite: { + options: { + // Task-specific options go here. + }, + actions: { + expand: true, + cwd: '../core/img', + src: [ + 'actions/*.svg' + ], + dest: '../core', + options: { + mode: { + css: { + prefix: '.icon-', + sprite: 'images/actions', + dimensions: true, + render: { + scss: { + dest: 'actions', + template: 'sprite.scss' + } + } + } + }, + + shape: { + id: { + /** + * @param {string} name + * @returns {string} + */ + generator: function (name) { + return name.substring('actions/'.length, name.indexOf('.svg')); + } + }, + + spacing: { + padding: 100 + } + } + } + } + } + }); + + grunt.loadNpmTasks('grunt-svg-sprite'); + + grunt.registerTask('default', ['svg_sprite']); +}; diff --git a/build/package.json b/build/package.json index 67e999aaf310e..1035028f7ec53 100644 --- a/build/package.json +++ b/build/package.json @@ -11,14 +11,16 @@ "contributors": [], "dependencies": {}, "devDependencies": { + "grunt": "^1.0.1", + "grunt-svg-sprite": "^1.3.6", + "jasmine-core": "~2.5.2", "karma": "~1.3.0", + "karma-coverage": "*", "karma-jasmine": "~1.0.2", "karma-junit-reporter": "*", - "karma-coverage": "*", "karma-phantomjs-launcher": "*", - "phantomjs-prebuilt": "*", - "jasmine-core": "~2.5.2", - "node-sass": "~4.1.1" + "node-sass": "~4.1.1", + "phantomjs-prebuilt": "*" }, "engine": "node >= 0.8" } diff --git a/build/sprite.scss b/build/sprite.scss new file mode 100644 index 0000000000000..2b6f625256769 --- /dev/null +++ b/build/sprite.scss @@ -0,0 +1,13 @@ +%svg-common { + background: url("{{{sprite}}}") no-repeat; +} + +{{#shapes}} +{{#selector.shape}}{{expression}}{{^last}},{{/last}}{{/selector.shape}} { + @extend %svg-common; + background-position: ({{position.absolute.x}}px - ({{width.outer}}px - {{width.inner}}px)/2) ({{position.absolute.y}}px - ({{height.outer}}px - {{height.inner}}px)/2); + width: {{width.inner}}px; + height: {{height.inner}}px; +} + +{{/shapes}} \ No newline at end of file diff --git a/core/css/actions.scss b/core/css/actions.scss new file mode 100644 index 0000000000000..aa8766446c0c8 --- /dev/null +++ b/core/css/actions.scss @@ -0,0 +1,606 @@ +%svg-common { + background: url("images/actions-c8f299d2.svg") no-repeat; +} + +.icon-add { + @extend %svg-common; + background-position: (-1777px - (216px - 16px)/2) (-216px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-audio { + @extend %svg-common; + background-position: (-216px - (216px - 16px)/2) (-1334px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-audio-off { + @extend %svg-common; + background-position: (-648px - (216px - 16px)/2) (-1118px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-audio-off-white { + @extend %svg-common; + background-position: (-1512px - (216px - 16px)/2) (-1550px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-audio-white { + @extend %svg-common; + background-position: (-1777px - (216px - 16px)/2) (0px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-caret { + @extend %svg-common; + background-position: (-1993px - (210px - 10px)/2) (-864px - (210px - 10px)/2); + width: 10px; + height: 10px; +} + +.icon-caret-dark { + @extend %svg-common; + background-position: (-1728px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-checkbox-mark { + @extend %svg-common; + background-position: (-1993px - (216px - 16px)/2) (0px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-checkbox-mark-white { + @extend %svg-common; + background-position: (-1993px - (216px - 16px)/2) (-216px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-checkbox-mixed { + @extend %svg-common; + background-position: (-1993px - (216px - 16px)/2) (-432px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-checkbox-mixed-white { + @extend %svg-common; + background-position: (-696px - (216px - 16px)/2) (-217px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-checkmark { + @extend %svg-common; + background-position: (-696px - (216px - 16px)/2) (-433px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-checkmark-color { + @extend %svg-common; + background-position: (0px - (216px - 16px)/2) (-686px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-checkmark-white { + @extend %svg-common; + background-position: (-216px - (216px - 16px)/2) (-686px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-clippy { + @extend %svg-common; + background-position: (-432px - (216px - 16px)/2) (-686px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-close { + @extend %svg-common; + background-position: (-648px - (216px - 16px)/2) (-686px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-close-white { + @extend %svg-common; + background-position: (-913px - (216px - 16px)/2) (0px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-comment { + @extend %svg-common; + background-position: (-913px - (216px - 16px)/2) (-216px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-confirm { + @extend %svg-common; + background-position: (-913px - (216px - 16px)/2) (-432px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-confirm-white { + @extend %svg-common; + background-position: (-913px - (216px - 16px)/2) (-648px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-delete { + @extend %svg-common; + background-position: (0px - (216px - 16px)/2) (-902px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-delete-hover { + @extend %svg-common; + background-position: (-216px - (216px - 16px)/2) (-902px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-delete-white { + @extend %svg-common; + background-position: (-432px - (216px - 16px)/2) (-902px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-details { + @extend %svg-common; + background-position: (-648px - (216px - 16px)/2) (-902px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-download { + @extend %svg-common; + background-position: (-864px - (216px - 16px)/2) (-902px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-download-white { + @extend %svg-common; + background-position: (-1129px - (216px - 16px)/2) (0px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-edit { + @extend %svg-common; + background-position: (-1129px - (216px - 16px)/2) (-216px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-error { + @extend %svg-common; + background-position: (-1129px - (216px - 16px)/2) (-432px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-error-color { + @extend %svg-common; + background-position: (-1129px - (216px - 16px)/2) (-648px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-error-white { + @extend %svg-common; + background-position: (-1129px - (216px - 16px)/2) (-864px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-external { + @extend %svg-common; + background-position: (0px - (216px - 16px)/2) (-1118px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-fullscreen { + @extend %svg-common; + background-position: (-216px - (216px - 16px)/2) (-1118px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-fullscreen-white { + @extend %svg-common; + background-position: (-432px - (216px - 16px)/2) (-1118px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-history { + @extend %svg-common; + background-position: (-696px - (217px - 17px)/2) (0px - (217px - 17px)/2); + width: 17px; + height: 17px; +} + +.icon-info { + @extend %svg-common; + background-position: (-864px - (216px - 16px)/2) (-1118px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-info-white { + @extend %svg-common; + background-position: (-1080px - (216px - 16px)/2) (-1118px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-logout { + @extend %svg-common; + background-position: (-1345px - (216px - 16px)/2) (0px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-mail { + @extend %svg-common; + background-position: (-1345px - (216px - 16px)/2) (-216px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-menu { + @extend %svg-common; + background-position: (-1345px - (216px - 16px)/2) (-432px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-more { + @extend %svg-common; + background-position: (-1345px - (216px - 16px)/2) (-648px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-more-white { + @extend %svg-common; + background-position: (-1345px - (216px - 16px)/2) (-864px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-password { + @extend %svg-common; + background-position: (-1345px - (216px - 16px)/2) (-1080px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-pause { + @extend %svg-common; + background-position: (0px - (216px - 16px)/2) (-1334px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-pause-big { + @extend %svg-common; + background-position: (-1993px - (216px - 16px)/2) (-648px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-play { + @extend %svg-common; + background-position: (-432px - (216px - 16px)/2) (-1334px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-play-add { + @extend %svg-common; + background-position: (-648px - (216px - 16px)/2) (-1334px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-play-big { + @extend %svg-common; + background-position: (-864px - (216px - 16px)/2) (-1334px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-play-next { + @extend %svg-common; + background-position: (-1080px - (216px - 16px)/2) (-1334px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-play-previous { + @extend %svg-common; + background-position: (-1296px - (216px - 16px)/2) (-1334px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-public { + @extend %svg-common; + background-position: (-1561px - (216px - 16px)/2) (0px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-rename { + @extend %svg-common; + background-position: (-1561px - (216px - 16px)/2) (-216px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-screen { + @extend %svg-common; + background-position: (-1561px - (216px - 16px)/2) (-432px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-screen-off { + @extend %svg-common; + background-position: (-1561px - (216px - 16px)/2) (-648px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-screen-off-white { + @extend %svg-common; + background-position: (-1561px - (216px - 16px)/2) (-864px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-screen-white { + @extend %svg-common; + background-position: (-1561px - (216px - 16px)/2) (-1080px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-search { + @extend %svg-common; + background-position: (-1561px - (216px - 16px)/2) (-1296px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-search-white { + @extend %svg-common; + background-position: (0px - (216px - 16px)/2) (-1550px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-settings { + @extend %svg-common; + background-position: (-216px - (216px - 16px)/2) (-1550px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-settings-dark { + @extend %svg-common; + background-position: (-432px - (216px - 16px)/2) (-1550px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-share { + @extend %svg-common; + background-position: (-648px - (216px - 16px)/2) (-1550px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-shared { + @extend %svg-common; + background-position: (-864px - (216px - 16px)/2) (-1550px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-sound { + @extend %svg-common; + background-position: (-1080px - (216px - 16px)/2) (-1550px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-sound-off { + @extend %svg-common; + background-position: (-1296px - (216px - 16px)/2) (-1550px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-star { + @extend %svg-common; + background-position: (0px - (222px - 22px)/2) (-464px - (222px - 22px)/2); + width: 22px; + height: 22px; +} + +.icon-star-dark { + @extend %svg-common; + background-position: (-222px - (222px - 22px)/2) (-464px - (222px - 22px)/2); + width: 22px; + height: 22px; +} + +.icon-starred { + @extend %svg-common; + background-position: (-444px - (222px - 22px)/2) (-464px - (222px - 22px)/2); + width: 22px; + height: 22px; +} + +.icon-tag { + @extend %svg-common; + background-position: (-1777px - (216px - 16px)/2) (-432px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-toggle { + @extend %svg-common; + background-position: (-1777px - (216px - 16px)/2) (-648px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-toggle-filelist { + @extend %svg-common; + background-position: (-1777px - (216px - 16px)/2) (-864px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-toggle-pictures { + @extend %svg-common; + background-position: (-1777px - (216px - 16px)/2) (-1080px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-triangle-e { + @extend %svg-common; + background-position: (-1777px - (216px - 16px)/2) (-1296px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-triangle-n { + @extend %svg-common; + background-position: (-1777px - (216px - 16px)/2) (-1512px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-triangle-s { + @extend %svg-common; + background-position: (0px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-upload { + @extend %svg-common; + background-position: (-216px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-upload-white { + @extend %svg-common; + background-position: (-432px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-user { + @extend %svg-common; + background-position: (-648px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-video { + @extend %svg-common; + background-position: (-864px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-video-off { + @extend %svg-common; + background-position: (-1080px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-video-off-white { + @extend %svg-common; + background-position: (-1296px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-video-white { + @extend %svg-common; + background-position: (-1512px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); + width: 16px; + height: 16px; +} + +.icon-view-close { + @extend %svg-common; + background-position: (0px - (232px - 32px)/2) (-232px - (232px - 32px)/2); + width: 32px; + height: 32px; +} + +.icon-view-download { + @extend %svg-common; + background-position: (-232px - (232px - 32px)/2) (-232px - (232px - 32px)/2); + width: 32px; + height: 32px; +} + +.icon-view-next { + @extend %svg-common; + background-position: (-464px - (232px - 32px)/2) (0px - (232px - 32px)/2); + width: 32px; + height: 32px; +} + +.icon-view-pause { + @extend %svg-common; + background-position: (-464px - (232px - 32px)/2) (-232px - (232px - 32px)/2); + width: 32px; + height: 32px; +} + +.icon-view-play { + @extend %svg-common; + background-position: (-232px - (232px - 32px)/2) (0px - (232px - 32px)/2); + width: 32px; + height: 32px; +} + +.icon-view-previous { + @extend %svg-common; + background-position: (0px - (232px - 32px)/2) (0px - (232px - 32px)/2); + width: 32px; + height: 32px; +} + diff --git a/core/css/apps.scss b/core/css/apps.scss index 91805fe16b29a..37a938f505bc2 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -683,10 +683,7 @@ em { [class*=' icon-']{ /* Keep padding to define the width to assure correct position of a possible text */ - padding: 18px 0 18px 36px; - min-width: 0; /* Overwrite icons*/ - min-height: 0; - background-position: 10px center; + margin: 14px 13px 15px 16px; opacity: 0.7; /* Default button icon override */ } } diff --git a/core/css/header.scss b/core/css/header.scss index 2b73937a3c441..27cbc292d5c2b 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -117,12 +117,7 @@ /* show caret indicator next to logo to make clear it is tappable */ .icon-caret { display: inline-block; - width: 12px; - height: 12px; - margin: 0; - margin-top: -21px; - padding: 0; - vertical-align: middle; + vertical-align: super; } #header-left, @@ -134,6 +129,10 @@ #header-left { flex: 0 0; flex-grow: 1; + + .icon-caret { + margin-bottom: 6px; + } } #header-right { @@ -152,6 +151,10 @@ .icon-caret { -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)'; opacity: .75; + min-width: 10px; + min-height: 10px; + margin-left: 3px; + margin-right: 3px; } &:hover { .header-appname, .icon-caret { @@ -347,9 +350,6 @@ opacity: 1; } } - .icon-caret { - margin-top: 0; - } /* Profile picture in header */ .avatardiv { diff --git a/core/css/icons.scss b/core/css/icons.scss index f4ae0ce8d5fc5..e9388e51d7602 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -15,7 +15,6 @@ /* GLOBAL ------------------------------------------------------------------- */ [class^='icon-'], [class*=' icon-'] { background-repeat: no-repeat; - background-position: center; min-width: 16px; min-height: 16px; } @@ -89,80 +88,18 @@ img, object, video, button, textarea, input, select { background-size: 32px !important; } -/* ICONS -------------------------------------------------------------------- */ -.icon-add { - background-image: url('../img/actions/add.svg?v=1'); -} - -.icon-audio { - background-image: url('../img/actions/audio.svg?v=1'); -} - -.icon-audio-white { - background-image: url('../img/actions/audio-white.svg?v=2'); -} - -.icon-audio-off { - background-image: url('../img/actions/audio-off.svg?v=1'); -} - -.icon-audio-off-white { - background-image: url('../img/actions/audio-off-white.svg?v=1'); -} - -.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-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 { + /** TODO: add to svg sprite */ background-image: url('../img/actions/delete.svg?v=1'); + background-position: initial; } } &:hover, &:focus { + /** TODO: add to svg sprite */ background-image: url('../img/actions/delete-hover.svg?v=1'); + background-position: initial; } } @@ -170,126 +107,18 @@ img, object, video, button, textarea, input, select { background-image: url('../img/actions/delete-white.svg?v=1'); &.no-permission { &:hover, &:focus { + /** TODO: add to svg sprite */ background-image: url('../img/actions/delete-white.svg?v=1'); + background-position: initial; } } &:hover, &:focus { + /** TODO: add to svg sprite */ background-image: url('../img/actions/delete-hover.svg?v=1'); + background-position: initial; } } -.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'); -} - -.icon-fullscreen-white { - background-image: url('../img/actions/fullscreen-white.svg?v=2'); -} - -.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-pause-big { - background-image: url('../img/actions/pause-big.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-big { - background-image: url('../img/actions/play-big.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'); } @@ -306,42 +135,10 @@ img, object, video, button, textarea, input, select { background-image: url('../img/actions/screen-off-white.svg?v=1'); } -.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-share { - background-image: url('../img/actions/share.svg?v=1'); -} - -.icon-shared { - background-image: url('../img/actions/shared.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-starred { &:hover, &:focus { background-image: url('../img/actions/star.svg?v=1'); @@ -355,78 +152,6 @@ img, object, video, button, textarea, input, select { } } -.icon-tag { - background-image: url('../img/actions/tag.svg?v=1'); -} - -.icon-toggle { - background-image: url('../img/actions/toggle.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'); -} - -.icon-video-white { - background-image: url('../img/actions/video-white.svg?v=2'); -} - -.icon-video-off { - background-image: url('../img/actions/video-off.svg?v=1'); -} - -.icon-video-off-white { - background-image: url('../img/actions/video-off-white.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/view-next.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/view-previous.svg?v=1'); -} - /* PLACES ------------------------------------------------------------------- */ .icon-calendar-dark { background-image: url('../img/places/calendar-dark.svg?v=1'); diff --git a/core/css/images/actions-c8f299d2.svg b/core/css/images/actions-c8f299d2.svg new file mode 100644 index 0000000000000..4912f128610f9 --- /dev/null +++ b/core/css/images/actions-c8f299d2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index e9a9b042e07f0..8393466f66876 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -56,7 +56,7 @@

t('Apps')); ?>

-
+ @@ -82,7 +82,7 @@ -
+