Add "retina" styles for high-dpi screens

This commit is contained in:
Loz Calver 2014-08-24 18:59:26 +01:00
parent c0abb08b61
commit 5f653a00eb
62 changed files with 367 additions and 3 deletions

View File

@ -1129,3 +1129,62 @@ green tick icon as a background this is created using compass generated classes
.cms .cms-content .SecurityAdmin .cms-content-fields { overflow-y: auto; } .cms .cms-content .SecurityAdmin .cms-content-fields { overflow-y: auto; }
.cms .cms-content .SecurityAdmin .cms-content-fields .aligned-right-label { margin-left: 184px; padding: 8px 0; } .cms .cms-content .SecurityAdmin .cms-content-fields .aligned-right-label { margin-left: 184px; padding: 8px 0; }
/** ----------------------------- Retina graphics ----------------------------- */
/** This file defines graphics to use on high-DPI screens in the CMS @package framework @subpackage admin */
/** ---------------------------------------------------- "@2x" media query ---------------------------------------------------- */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { /* Loading spinner */
.cms-content-loading-spinner { background-image: url(../images/spinner@2x.gif); background-size: 43px 22px; }
.ui-dialog .ui-dialog-content.loading { background-image: url(../images/spinner@2x.gif); background-size: 43px 22px; }
.ui-dialog.loading { background-image: url(../images/spinner@2x.gif); background-size: 43px 22px; }
/* Default CMS logo */
.cms-logo a { background-image: url("../images/logo_small@2x.png"); background-size: 22px 22px; }
/* Logout button */
.cms-login-status .logout-link { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -161px; background-size: 30px auto; }
.cms-content-controls .icon-auto:before { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -134px; background-size: 30px auto; }
.cms-content-controls .icon-desktop:before { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -241px; background-size: 30px auto; }
.cms-content-controls .icon-tablet:before { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -268px; background-size: 30px auto; }
.cms-content-controls .icon-mobile:before { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -214px; background-size: 30px auto; }
.cms-content-controls .icon-split:before { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -187px; background-size: 30px auto; }
.cms-content-controls .icon-edit:before { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -107px; background-size: 30px auto; }
.cms-content-controls .icon-preview:before { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -80px; background-size: 30px auto; }
.cms .ss-ui-action-tabset.action-menus.ss-tabset ul.ui-tabs-nav li a:after { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -327px; background-size: 30px auto; }
.cms .ss-ui-action-tabset.action-menus.ss-tabset ul.ui-tabs-nav li a:hover:after { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -353px; background-size: 30px auto; }
.cms .ss-ui-action-tabset.action-menus.ss-tabset ul.ui-tabs-nav li.ui-state-active a:after { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -411px; background-size: 30px auto; }
.cms .ss-ui-action-tabset.action-menus.ss-tabset ul.ui-tabs-nav li.ui-state-active a:hover:after { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -437px; background-size: 30px auto; }
/* CMS menu */
.cms-menu-list li a .toggle-children .toggle-children-icon { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -395px; background-size: 30px auto; }
.cms-menu-list li a .toggle-children.opened .toggle-children-icon { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -379px; background-size: 30px auto; }
.cms-menu-list li.current a .toggle-children .toggle-children-icon { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -295px; background-size: 30px auto; }
.cms-menu-list li.current a .toggle-children.opened .toggle-children-icon { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -311px; background-size: 30px auto; }
/* Sitetree */
.tree-holder.jstree-apple ins, .cms-tree.jstree-apple ins { background-image: url(../images/sitetree_ss_default_icons@2x.png); background-size: 108px 72px; }
/* UI widget "close" button */
.ui-widget-header a.ui-state-hover .ui-icon-closethick { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 0; background-size: 30px auto; }
.ui-widget-header .ui-icon-closethick { background-image: url('../images/sprites-32x32-2x-sd9f6129848.png'); background-position: 0 -40px; background-size: 30px auto; }
/* Tab icons */
.ui-tabs .ui-tabs-nav li.cms-tabset-icon.list a { background-image: url('../images/sprites-64x64-2x-s0fe1d92f9d.png'); background-position: 0 -250px; background-size: 40px auto; }
.ui-tabs .ui-tabs-nav li.cms-tabset-icon.tree a { background-image: url('../images/sprites-64x64-2x-s0fe1d92f9d.png'); background-position: 0 -100px; background-size: 40px auto; }
.ui-tabs .ui-tabs-nav li.cms-tabset-icon.edit a { background-image: url('../images/sprites-64x64-2x-s0fe1d92f9d.png'); background-position: 0 0; background-size: 40px auto; }
.ui-tabs .ui-tabs-nav li.cms-tabset-icon.list.ui-state-active a { background-image: url('../images/sprites-64x64-2x-s0fe1d92f9d.png'); background-position: 0 -200px; background-size: 40px auto; }
.ui-tabs .ui-tabs-nav li.cms-tabset-icon.tree.ui-state-active a { background-image: url('../images/sprites-64x64-2x-s0fe1d92f9d.png'); background-position: 0 -150px; background-size: 40px auto; }
.ui-tabs .ui-tabs-nav li.cms-tabset-icon.edit.ui-state-active a { background-image: url('../images/sprites-64x64-2x-s0fe1d92f9d.png'); background-position: 0 -50px; background-size: 40px auto; }
/* Menu icon classes */
.icon.icon-24 { background-image: url('../images/menu-icons/24x24-2x-s7169efa003.png'); background-size: 24px auto; }
.icon.icon-24.icon-assetadmin { background-position: 0 -144px; }
.icon.icon-24.icon-cmsmain { background-position: 0 -120px; }
.icon.icon-24.icon-cmspagescontroller { background-position: 0 -168px; }
.icon.icon-24.icon-cmssettingscontroller { background-position: 0 0; }
.icon.icon-24.icon-securityadmin { background-position: 0 -24px; }
.icon.icon-24.icon-reportadmin { background-position: 0 -96px; }
.icon.icon-24.icon-commentadmin { background-position: 0 -240px; }
.icon.icon-24.icon-help { background-position: 0 -72px; }
.icon.icon-16 { background-image: url('../images/menu-icons/16x16-2x-s9b8c49312e.png'); background-size: 16px auto; }
.icon.icon-16.icon-assetadmin { background-position: 0 -80px; }
.icon.icon-16.icon-cmsmain { background-position: 0 -112px; }
.icon.icon-16.icon-cmspagescontroller { background-position: 0 -96px; }
.icon.icon-16.icon-cmssettingscontroller { background-position: 0 0; }
.icon.icon-16.icon-securityadmin { background-position: 0 -16px; }
.icon.icon-16.icon-reportadmin { background-position: 0 -48px; }
.icon.icon-16.icon-commentadmin { background-position: 0 -160px; }
.icon.icon-16.icon-help { background-position: 0 -64px; } }

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

BIN
admin/images/spinner@2x.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1022 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

231
admin/scss/_retina.scss Normal file
View File

@ -0,0 +1,231 @@
/**
* This file defines graphics to use on high-DPI screens in the CMS
*
* @package framework
* @subpackage admin
*/
@mixin retina-sprite($sprite, $icon) {
// We need to calculate this manually, as Compass sprites don't deal with retina images
$ypos: round(nth(sprite-position($sprite, $icon), 2) / 2);
background-image: sprite-url($sprite);
background-position: 0 $ypos;
background-size: ceil(image-width(sprite-path($sprite)) / 2) auto;
}
@mixin icons-retina($sprite) {
background-image: sprite-url($sprite);
background-size: ceil(image-width(sprite-path($sprite)) / 2) auto;
&.icon-assetadmin {
background-position: 0 round(nth(sprite-position($sprite, "picture"), 2) / 2);
}
&.icon-cmsmain {
background-position: 0 round(nth(sprite-position($sprite, "pencil"), 2) / 2);
}
&.icon-cmspagescontroller {
background-position: 0 round(nth(sprite-position($sprite, "network"), 2) / 2);
}
&.icon-cmssettingscontroller {
background-position: 0 round(nth(sprite-position($sprite, "gears"), 2) / 2);
}
&.icon-securityadmin {
background-position: 0 round(nth(sprite-position($sprite, "community"), 2) / 2);
}
&.icon-reportadmin {
background-position: 0 round(nth(sprite-position($sprite, "pie-chart"), 2) / 2);
}
&.icon-commentadmin {
background-position: 0 round(nth(sprite-position($sprite, "blog"), 2) / 2);
}
&.icon-help {
background-position: 0 round(nth(sprite-position($sprite, "information"), 2) / 2);
}
}
/** ----------------------------------------------------
* "@2x" media query
* ---------------------------------------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* Loading spinner */
.cms-content-loading-spinner {
background-image: url(../images/spinner@2x.gif);
background-size: 43px 22px;
}
.ui-dialog {
.ui-dialog-content {
&.loading {
background-image: url(../images/spinner@2x.gif);
background-size: 43px 22px;
}
}
&.loading {
background-image: url(../images/spinner@2x.gif);
background-size: 43px 22px;
}
}
/* Default CMS logo */
.cms-logo {
a {
background-image: $application-logo-small-2x;
background-size: 22px 22px;
}
}
/* Logout button */
.cms-login-status {
.logout-link {
@include retina-sprite($sprites32-2x, logout);
}
}
.cms-content-controls {
.icon-auto:before {
@include retina-sprite($sprites32-2x, preview_auto);
}
.icon-desktop:before {
@include retina-sprite($sprites32-2x, preview_desktop);
}
.icon-tablet:before {
@include retina-sprite($sprites32-2x, preview_tablet);
}
.icon-mobile:before {
@include retina-sprite($sprites32-2x, preview_mobile);
}
.icon-split:before {
@include retina-sprite($sprites32-2x, preview_split);
}
.icon-edit:before {
@include retina-sprite($sprites32-2x, preview_edit);
}
.icon-preview:before {
@include retina-sprite($sprites32-2x, preview_preview);
}
}
.cms {
.ss-ui-action-tabset {
&.action-menus.ss-tabset {
ul.ui-tabs-nav {
li {
a {
&:after {
@include retina-sprite($sprites32-2x, arrow_down_lighter);
}
&:hover:after {
@include retina-sprite($sprites32-2x, arrow_down_darker);
}
}
&.ui-state-active a {
&:after {
@include retina-sprite($sprites32-2x, arrow_up_lighter);
}
&:hover:after {
@include retina-sprite($sprites32-2x, arrow_up_darker);
}
}
}
}
}
}
}
/* CMS menu */
.cms-menu-list {
li {
a {
.toggle-children {
.toggle-children-icon {
@include retina-sprite($sprites32-2x, menu-arrow-deselected-down);
}
&.opened {
.toggle-children-icon {
@include retina-sprite($sprites32-2x, menu-arrow-deselected-up);
}
}
}
}
&.current {
a {
.toggle-children {
.toggle-children-icon {
@include retina-sprite($sprites32-2x, menu-arrow-down);
}
&.opened {
.toggle-children-icon {
@include retina-sprite($sprites32-2x, menu-arrow-up);
}
}
}
}
}
}
}
/* Sitetree */
.tree-holder, .cms-tree {
&.jstree-apple {
ins {
background-image: url(../images/sitetree_ss_default_icons@2x.png);
background-size: 108px 72px;
}
}
}
/* UI widget "close" button */
.ui-widget-header {
a.ui-state-hover {
.ui-icon-closethick {
@include retina-sprite($sprites32-2x, dialog-close-over);
}
}
.ui-icon-closethick {
@include retina-sprite($sprites32-2x, dialog-close);
}
}
/* Tab icons */
.ui-tabs {
.ui-tabs-nav {
li.cms-tabset-icon {
&.list a { @include retina-sprite($sprites64-2x, tab-list); }
&.tree a { @include retina-sprite($sprites64-2x, tab-tree); }
&.edit a { @include retina-sprite($sprites64-2x, tab-edit); }
&.list.ui-state-active a { @include retina-sprite($sprites64-2x, tab-list-hover); }
&.tree.ui-state-active a { @include retina-sprite($sprites64-2x, tab-tree-hover); }
&.edit.ui-state-active a { @include retina-sprite($sprites64-2x, tab-edit-hover); }
}
}
}
/* Menu icon classes */
.icon {
&.icon-24 {
@include icons-retina($icon24-2x);
}
&.icon-16 {
@include icons-retina($icon16-2x);
}
}
}

View File

@ -10,11 +10,15 @@
} }
$icon24: sprite-map("menu-icons/24x24/*.png"); $icon24: sprite-map("menu-icons/24x24/*.png");
$icon24-2x: sprite-map("menu-icons/24x24-2x/*.png");
$icon16: sprite-map("menu-icons/16x16/*.png"); $icon16: sprite-map("menu-icons/16x16/*.png");
$icon16-2x: sprite-map("menu-icons/16x16-2x/*.png");
$btn-icon: sprite-map("btn-icon/*.png", $spacing: 10px); $btn-icon: sprite-map("btn-icon/*.png", $spacing: 10px);
$sprites32: sprite-map("sprites-32x32/*.png", $spacing: 10px); $sprites32: sprite-map("sprites-32x32/*.png", $spacing: 10px);
$sprites32-2x: sprite-map("sprites-32x32-2x/*.png", $spacing: 20px);
$sprites64: sprite-map("sprites-64x64/*.png", $spacing: 10px); $sprites64: sprite-map("sprites-64x64/*.png", $spacing: 10px);
$sprites64-2x: sprite-map("sprites-64x64-2x/*.png", $spacing: 20px);
@mixin icons($sprite) { @mixin icons($sprite) {
background: $sprite; background: $sprite;

View File

@ -58,3 +58,8 @@ $experimental-support-for-svg: true;
@import "actionTabs.scss"; @import "actionTabs.scss";
@import "ModelAdmin.scss"; @import "ModelAdmin.scss";
@import "SecurityAdmin.scss"; @import "SecurityAdmin.scss";
/** -----------------------------
* Retina graphics
* ----------------------------- */
@import "retina.scss";

View File

@ -95,3 +95,4 @@ $grid-x: 8px !default;
* Application Logo (CMS Logo) Must be 24px x 24px * Application Logo (CMS Logo) Must be 24px x 24px
* ------------------------------------------------ */ * ------------------------------------------------ */
$application-logo-small: url("../images/logo_small.png") !default; $application-logo-small: url("../images/logo_small.png") !default;
$application-logo-small-2x: url("../images/logo_small@2x.png") !default;

View File

@ -13,14 +13,13 @@ Used in side panels and action tabs
.ss-uploadfield-view-allowed-extensions { padding-top: 5px; clear: both; max-width: 750px; display: block; } .ss-uploadfield-view-allowed-extensions { padding-top: 5px; clear: both; max-width: 750px; display: block; }
.ss-uploadfield-view-allowed-extensions .toggle { font-style: normal; font-size: 12px; } .ss-uploadfield-view-allowed-extensions .toggle { font-style: normal; font-size: 12px; }
#AssetUploadField { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.backlink { padding-left: 12px; } .backlink { padding-left: 12px; }
body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fieldset { padding: 16px; overflow: auto; background: #E2E2E2; } body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fieldset { padding: 16px; overflow: auto; background: #E2E2E2; }
body.cms.ss-uploadfield-edit-iframe span.readonly, .composite.ss-assetuploadfield .details fieldset span.readonly { font-style: italic; color: #777777; text-shadow: 0px 1px 0px #fff; } body.cms.ss-uploadfield-edit-iframe span.readonly, .composite.ss-assetuploadfield .details fieldset span.readonly { font-style: italic; color: #777777; text-shadow: 0px 1px 0px #fff; }
body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-assetuploadfield .details fieldset .fieldholder-small label { margin-left: 0; } body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-assetuploadfield .details fieldset .fieldholder-small label { margin-left: 0; }
.ss-assetuploadfield { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px; padding: 0 0 7px; clear: both; position: relative; } .ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px; padding: 0 0 7px; clear: both; position: relative; }
.ss-assetuploadfield .field { border-bottom: 0; box-shadow: none; } .ss-assetuploadfield .field { border-bottom: 0; box-shadow: none; }
.ss-assetuploadfield .fileOverview { clear: both; margin-top: 10px; position: relative; } .ss-assetuploadfield .fileOverview { clear: both; margin-top: 10px; position: relative; }
@ -82,3 +81,7 @@ body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-asse
.ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { height: 54px; min-width: 250px; overflow: hidden; padding: 0; margin-top: 2px; } .ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { height: 54px; min-width: 250px; overflow: hidden; padding: 0; margin-top: 2px; }
.ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { background-position: 0 11px; padding-top: 21px; margin-left: 33px; } .ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { background-position: 0 11px; padding-top: 21px; margin-left: 33px; }
.ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { height: 38px; font-size: 18px; line-height: 18px; } .ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { height: 38px; font-size: 18px; line-height: 18px; }
/** ---------------------------------------------------- "@2x" media query ---------------------------------------------------- */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { /* Loading spinner */
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform.loading { background-image: url(../admin/images/spinner@2x.gif); background-size: 43px 22px; } }

View File

@ -54,3 +54,7 @@ Used in side panels and action tabs
.ss-upload .clear { clear: both; } .ss-upload .clear { clear: both; }
.ss-upload .ss-uploadfield-fromcomputer input { /* since we can't really style the file input, we use this hack to make it as big as the button and hide it */ position: absolute; top: 0; right: 0; margin: 0; opacity: 0; filter: alpha(opacity=0); transform: translate(-300px, 0) scale(4); font-size: 23px; direction: ltr; cursor: pointer; height: 30px; line-height: 30px; } .ss-upload .ss-uploadfield-fromcomputer input { /* since we can't really style the file input, we use this hack to make it as big as the button and hide it */ position: absolute; top: 0; right: 0; margin: 0; opacity: 0; filter: alpha(opacity=0); transform: translate(-300px, 0) scale(4); font-size: 23px; direction: ltr; cursor: pointer; height: 30px; line-height: 30px; }
.ss-upload .loader { height: 94px; background: transparent url(../admin/images/spinner.gif) no-repeat 50% 50%; } .ss-upload .loader { height: 94px; background: transparent url(../admin/images/spinner.gif) no-repeat 50% 50%; }
/** ---------------------------------------------------- "@2x" media query ---------------------------------------------------- */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform.loading { background-image: url(../admin/images/spinner@2x.gif); background-size: 43px 22px; }
.ss-upload .loader { background-image: url(../admin/images/spinner@2x.gif); background-size: 43px 22px; } }

View File

@ -367,3 +367,28 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
} }
} }
/** ----------------------------------------------------
* "@2x" media query
* ---------------------------------------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* Loading spinner */
.ss-assetuploadfield {
.ss-uploadfield-files {
.ss-uploadfield-item-editform {
&.loading {
background-image: url(../admin/images/spinner@2x.gif);
background-size: 43px 22px;
}
}
}
}
}

View File

@ -292,4 +292,36 @@
height: 94px; // Approxmiately matches the height of the field once a file is attached, avoids a 'jump' in size height: 94px; // Approxmiately matches the height of the field once a file is attached, avoids a 'jump' in size
background: transparent url(../admin/images/spinner.gif) no-repeat 50% 50%; background: transparent url(../admin/images/spinner.gif) no-repeat 50% 50%;
} }
} }
/** ----------------------------------------------------
* "@2x" media query
* ---------------------------------------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
.ss-uploadfield {
.ss-uploadfield-files {
.ss-uploadfield-item-editform {
&.loading {
background-image: url(../admin/images/spinner@2x.gif);
background-size: 43px 22px;
}
}
}
}
.ss-upload {
.loader {
background-image: url(../admin/images/spinner@2x.gif);
background-size: 43px 22px;
}
}
}