diff --git a/apps/common/main/resources/img/toolbar/1.25x/.css.handlebars b/apps/common/main/resources/img/toolbar/1.25x/.css.handlebars new file mode 100644 index 000000000..f8f29809c --- /dev/null +++ b/apps/common/main/resources/img/toolbar/1.25x/.css.handlebars @@ -0,0 +1,13 @@ +{{#spritesheet}} +@media only screen { + @media (-webkit-min-device-pixel-ratio: 1.25) and (-webkit-max-device-pixel-ratio: 1.4), + (min-resolution: 1.25dppx) and (max-resolution: 1.4dppx), + (min-resolution: 120dpi) and (max-resolution: 143dpi) + { + .toolbar__icon, .menu__icon { + background-image: url(resources/{{{escaped_image}}}); + background-size: {{scaled width 1.25}}px auto; + } + } +} +{{/spritesheet}} diff --git a/apps/common/main/resources/img/toolbar/1.25x/big/.css.handlebars b/apps/common/main/resources/img/toolbar/1.25x/big/.css.handlebars new file mode 100644 index 000000000..58e97c236 --- /dev/null +++ b/apps/common/main/resources/img/toolbar/1.25x/big/.css.handlebars @@ -0,0 +1,18 @@ +{{#spritesheet}} +@media only screen { + @media (-webkit-min-device-pixel-ratio: 1.25) and (-webkit-max-device-pixel-ratio: 1.4), + (min-resolution: 1.25dppx) and (max-resolution: 1.4dppx), + (min-resolution: 120dpi) and (max-resolution: 143dpi) + { + .x-huge .toolbar__icon { + background-image: url(resources/{{{escaped_image}}}); + background-size: {{scaled width 1.25}}px auto; + } + } +} + +.toolbar__icon.toolbar__icon-big { + background-size: 56px auto; + background-size: var(--big-icon-background-image-width) auto; +} +{{/spritesheet}} diff --git a/apps/common/main/resources/img/toolbar/1.25x/huge/.css.handlebars b/apps/common/main/resources/img/toolbar/1.25x/huge/.css.handlebars new file mode 100644 index 000000000..ddb2130e0 --- /dev/null +++ b/apps/common/main/resources/img/toolbar/1.25x/huge/.css.handlebars @@ -0,0 +1,6 @@ +{{#spritesheet}} +.options__icon.options__icon-huge { + background-size: 80px auto; + background-size: var(--huge-icon-background-image-width) auto; +} +{{/spritesheet}} diff --git a/apps/common/main/resources/img/toolbar/1.5x/.css.handlebars b/apps/common/main/resources/img/toolbar/1.5x/.css.handlebars index 525a22291..b12054916 100644 --- a/apps/common/main/resources/img/toolbar/1.5x/.css.handlebars +++ b/apps/common/main/resources/img/toolbar/1.5x/.css.handlebars @@ -1,8 +1,8 @@ {{#spritesheet}} @media only screen { - @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9), - (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx), - (min-resolution: 144dpi) and (max-resolution: 191dpi) + @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.7), + (min-resolution: 1.5dppx) and (max-resolution: 1.7dppx), + (min-resolution: 144dpi) and (max-resolution: 167dpi) { .toolbar__icon, .menu__icon { background-image: url(resources/{{{escaped_image}}}); diff --git a/apps/common/main/resources/img/toolbar/1.5x/big/.css.handlebars b/apps/common/main/resources/img/toolbar/1.5x/big/.css.handlebars index 4d81da70c..cc6aa1b2a 100644 --- a/apps/common/main/resources/img/toolbar/1.5x/big/.css.handlebars +++ b/apps/common/main/resources/img/toolbar/1.5x/big/.css.handlebars @@ -1,8 +1,8 @@ {{#spritesheet}} @media only screen { - @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9), - (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx), - (min-resolution: 144dpi) and (max-resolution: 191dpi) + @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.7), + (min-resolution: 1.5dppx) and (max-resolution: 1.7dppx), + (min-resolution: 144dpi) and (max-resolution: 167dpi) { .x-huge .toolbar__icon { background-image: url(resources/{{{escaped_image}}}); diff --git a/apps/common/main/resources/img/toolbar/1.75x/.css.handlebars b/apps/common/main/resources/img/toolbar/1.75x/.css.handlebars new file mode 100644 index 000000000..2e3046fbf --- /dev/null +++ b/apps/common/main/resources/img/toolbar/1.75x/.css.handlebars @@ -0,0 +1,13 @@ +{{#spritesheet}} +@media only screen { + @media (-webkit-min-device-pixel-ratio: 1.75) and (-webkit-max-device-pixel-ratio: 1.9), + (min-resolution: 1.75dppx) and (max-resolution: 1.9dppx), + (min-resolution: 168dpi) and (max-resolution: 191dpi) + { + .toolbar__icon, .menu__icon { + background-image: url(resources/{{{escaped_image}}}); + background-size: {{scaled width 1.75}}px auto; + } + } +} +{{/spritesheet}} diff --git a/apps/common/main/resources/img/toolbar/1.75x/big/.css.handlebars b/apps/common/main/resources/img/toolbar/1.75x/big/.css.handlebars new file mode 100644 index 000000000..57a076dbe --- /dev/null +++ b/apps/common/main/resources/img/toolbar/1.75x/big/.css.handlebars @@ -0,0 +1,18 @@ +{{#spritesheet}} +@media only screen { + @media (-webkit-min-device-pixel-ratio: 1.75) and (-webkit-max-device-pixel-ratio: 1.9), + (min-resolution: 1.75dppx) and (max-resolution: 1.9dppx), + (min-resolution: 168dpi) and (max-resolution: 191dpi) + { + .x-huge .toolbar__icon { + background-image: url(resources/{{{escaped_image}}}); + background-size: {{scaled width 1.75}}px auto; + } + } +} + +.toolbar__icon.toolbar__icon-big { + background-size: 56px auto; + background-size: var(--big-icon-background-image-width) auto; +} +{{/spritesheet}} diff --git a/apps/common/main/resources/img/toolbar/1.75x/huge/.css.handlebars b/apps/common/main/resources/img/toolbar/1.75x/huge/.css.handlebars new file mode 100644 index 000000000..ddb2130e0 --- /dev/null +++ b/apps/common/main/resources/img/toolbar/1.75x/huge/.css.handlebars @@ -0,0 +1,6 @@ +{{#spritesheet}} +.options__icon.options__icon-huge { + background-size: 80px auto; + background-size: var(--huge-icon-background-image-width) auto; +} +{{/spritesheet}} diff --git a/apps/documenteditor/main/resources/less/app.less b/apps/documenteditor/main/resources/less/app.less index 7e9bf70d3..29bb1fb88 100644 --- a/apps/documenteditor/main/resources/less/app.less +++ b/apps/documenteditor/main/resources/less/app.less @@ -141,9 +141,15 @@ @import "sprites/iconshuge@1x"; @import "sprites/iconssmall@2x"; @import "sprites/iconsbig@2x"; +@import "sprites/iconssmall@1.25x"; +@import "sprites/iconsbig@1.25x"; +@import "sprites/iconshuge@1.25x"; @import "sprites/iconssmall@1.5x"; @import "sprites/iconsbig@1.5x"; @import "sprites/iconshuge@1.5x"; +@import "sprites/iconssmall@1.75x"; +@import "sprites/iconsbig@1.75x"; +@import "sprites/iconshuge@1.75x"; :root { --big-icon-background-image: ~"url(@{app-image-const-path}/iconsbig.png)"; diff --git a/apps/presentationeditor/main/resources/less/app.less b/apps/presentationeditor/main/resources/less/app.less index 7ec5f06f5..0ae16d046 100644 --- a/apps/presentationeditor/main/resources/less/app.less +++ b/apps/presentationeditor/main/resources/less/app.less @@ -138,6 +138,10 @@ @import "sprites/iconsbig@2x"; @import "sprites/iconssmall@1.5x"; @import "sprites/iconsbig@1.5x"; +@import "sprites/iconssmall@1.25x"; +@import "sprites/iconsbig@1.25x"; +@import "sprites/iconssmall@1.75x"; +@import "sprites/iconsbig@1.75x"; .font-size-small { .fontsize(@font-size-small); diff --git a/apps/spreadsheeteditor/main/resources/less/app.less b/apps/spreadsheeteditor/main/resources/less/app.less index d0cd39be2..a92f42255 100644 --- a/apps/spreadsheeteditor/main/resources/less/app.less +++ b/apps/spreadsheeteditor/main/resources/less/app.less @@ -141,6 +141,10 @@ @import "sprites/iconsbig@2x"; @import "sprites/iconssmall@1.5x"; @import "sprites/iconsbig@1.5x"; +@import "sprites/iconssmall@1.25x"; +@import "sprites/iconsbig@1.25x"; +@import "sprites/iconssmall@1.75x"; +@import "sprites/iconsbig@1.75x"; .font-size-small { .fontsize(@font-size-small); diff --git a/build/sprites/Gruntfile.js b/build/sprites/Gruntfile.js index 03d7ad848..a67207901 100644 --- a/build/sprites/Gruntfile.js +++ b/build/sprites/Gruntfile.js @@ -67,6 +67,25 @@ module.exports = function (grunt, rootpathprefix) { scale: '2x', extpath: 'huge' }), + + 'word1.25x': configTemplate({ + editor:'documenteditor', + spritename: sprite_name, + scale: '1.25x' + }), + 'word-big-1.25x': configTemplate({ + editor:'documenteditor', + spritename: sprite_name_big, + scale: '1.25x', + extpath: 'big' + }), + 'word-huge-1.25x': configTemplate({ + editor:'documenteditor', + spritename: sprite_name_huge, + scale: '1.25x', + extpath: 'huge' + }), + 'word1.5x': configTemplate({ editor:'documenteditor', spritename: sprite_name, @@ -84,6 +103,25 @@ module.exports = function (grunt, rootpathprefix) { scale: '1.5x', extpath: 'huge' }), + + 'word1.75x': configTemplate({ + editor:'documenteditor', + spritename: sprite_name, + scale: '1.75x' + }), + 'word-big-1.75x': configTemplate({ + editor:'documenteditor', + spritename: sprite_name_big, + scale: '1.75x', + extpath: 'big' + }), + 'word-huge-1.75x': configTemplate({ + editor:'documenteditor', + spritename: sprite_name_huge, + scale: '1.75x', + extpath: 'huge' + }), + 'slide-1x': configTemplate({ editor:'presentationeditor', spritename: sprite_name, @@ -157,7 +195,9 @@ module.exports = function (grunt, rootpathprefix) { grunt.loadNpmTasks('grunt-spritesmith'); grunt.registerTask('word-icons', ['sprite:word-1x', 'sprite:word-big-1x', 'sprite:word-huge-1x', 'sprite:word-2x', 'sprite:word-big-2x', 'sprite:word-huge-2x', - 'sprite:word1.5x', 'sprite:word-big-1.5x', 'sprite:word-huge-1.5x']); + 'sprite:word1.25x', 'sprite:word-big-1.25x', 'sprite:word-huge-1.25x', + 'sprite:word1.5x', 'sprite:word-big-1.5x', 'sprite:word-huge-1.5x', + 'sprite:word1.75x', 'sprite:word-big-1.75x', 'sprite:word-huge-1.75x']); grunt.registerTask('slide-icons', ['sprite:slide-1x', 'sprite:slide-big-1x','sprite:slide-2x', 'sprite:slide-big-2x','sprite:slide-1.5x', 'sprite:slide-big-1.5x']); grunt.registerTask('cell-icons', ['sprite:cell-1x', 'sprite:cell-big-1x','sprite:cell-2x', 'sprite:cell-big-2x','sprite:cell-1.5x', 'sprite:cell-big-1.5x']);