diff --git a/admin/css/ie7.css b/admin/css/ie7.css index ead3677cc8b..5e9deda5e03 100644 --- a/admin/css/ie7.css +++ b/admin/css/ie7.css @@ -1,9 +1,41 @@ -html { overflow: hidden; } - +/** This file contains the default theme definitions for the admin interface. Please put mostly SCSS variable definitions in here, and leave the actual styling to _style.scss and auxilliary files. */ +/** ----------------------------------------------- Colours ------------------------------------------------ */ +/** ----------------------------------------------- Textures ----------------------------------------------- */ +/** ----------------------------------------------- Typography. ------------------------------------------------ */ +/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */ +/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */ .cms .ss-ui-button { background-color: #e6e6e6; } .cms .ss-ui-button.ui-state-hover { background-color: #f3f3f3; } -.cms .ss-ui-button.ss-ui-action-constructive { background-color: #669933; } -.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { background-color: #73ac39; } +.cms .ss-ui-button.ss-ui-action-constructive { background-color: #1f9433; } +.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { background-color: #23a93a; } + +.cms-content-toolbar { border-bottom: 1px solid #c9cdce; } + +.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background-image: none; } + +.ss-gridfield-button-filter.ss-ui-button { background: #e6e6e6 url(../images/filter-icons.png) no-repeat -40px 6px; filter: none; } +.ss-gridfield-button-filter.ss-ui-button.hover-alike:active { background-color: #2e7ead; background-position: -15px 7px; filter: none; } +.ss-gridfield-button-filter.ss-ui-button.hover-alike { background-color: #338DC1; background-position: -16px 6px; filter: none; } + +.ss-gridfield-button-reset.ss-ui-button { background: #e6e6e6 url(../images/filter-icons.png) no-repeat 8px 5px; filter: none; } +.ss-gridfield-button-reset.ss-ui-button.filtered:hover { background: red url(../images/filter-icons.png) no-repeat 8px -17px; filter: none; } +.ss-gridfield-button-reset.ss-ui-button.filtered:active { background: #e60000 url(../images/filter-icons.png) no-repeat 9px -16px; filter: none; } + +.cms table.ss-gridfield-table tr td { border-right: 1px solid #9a9a9a; } +.cms table.ss-gridfield-table tr th { border-right: 1px solid #9a9a9a; } +.cms table.ss-gridfield-table tr th.main { border-top: 1px solid #9a9a9a; border-bottom: none; } +.cms table.ss-gridfield-table tr th.extra { border-top: 1px solid #9a9a9a; padding-right: 12px; } +.cms table.ss-gridfield-table td:first-child, .cms table.ss-gridfield-table th:first-child { border-left: 1px solid #9a9a9a; } + +.cms .ss-gridfield table.ss-gridfield-table tbody td button { border: 0; background: none; } + +.cms .cms-content .cms-content-fields .aligned_right_label { margin-left: 0; } + +.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.file { margin: 0px; } +.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.file input.file { margin-left: -132px; } +.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.checkbox { padding: 0px; } + +html { overflow: hidden; } .field input.text, .field textarea, .field .TreeDropdownField { padding-left: 0; padding-right: 0; } @@ -12,42 +44,27 @@ html { overflow: hidden; } .ss-ui-button.cms-page-add-button { float: left; } -.ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { background: #80bf40 url("../images/btn-icon/add.png") 0px 0px no-repeat; } - .cms-tree-view-modes div { float: left; } .cms-tree-view-modes span { float: left; padding-top: 5px; } .cms-panel-content .cms-tree li { width: 200px; overflow: hidden; float: left; display: inline; } -.cms-content-toolbar { border-bottom: 1px solid #c9cdce; padding-bottom: 5px; } - -.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background-image: none; } +.cms-content-toolbar { padding-bottom: 5px; } .jstree li a .ui-icon { text-indent: 0px !important; } .cms table.ss-gridfield-table tbody td { width: auto; } .cms table.ss-gridfield-table tr th.extra span input { height: 23px; } -.ss-gridfield-button-filter.ss-ui-button { margin: -1px -5px; background: #e6e6e6 url(../images/filter-icons.png) no-repeat -40px 6px; filter: none; } -.ss-gridfield-button-filter.ss-ui-button.hover-alike:active { background: #2e7ead url(../images/filter-icons.png) no-repeat -15px 7px; filter: none; } -.ss-gridfield-button-filter.ss-ui-button.hover-alike { background: #338dc1 url(../images/filter-icons.png) no-repeat -16px 6px; filter: none; } +.ss-gridfield-button-filter.ss-ui-button { margin: -1px -5px; } -.ss-gridfield-button-reset.ss-ui-button { margin: -1px -5px; background: #e6e6e6 url(../images/filter-icons.png) no-repeat 8px 5px; filter: none; } -.ss-gridfield-button-reset.ss-ui-button.filtered:hover { background: red url(../images/filter-icons.png) no-repeat 8px -17px; filter: none; } -.ss-gridfield-button-reset.ss-ui-button.filtered:active { background: #e60000 url(../images/filter-icons.png) no-repeat 9px -16px; filter: none; } +.ss-gridfield-button-reset.ss-ui-button { margin: -1px -5px; } -.cms table.ss-gridfield-table tr td { border-right: 1px solid #9a9a9a; } -.cms table.ss-gridfield-table tr th { border-right: 1px solid #9a9a9a; } -.cms table.ss-gridfield-table tr th.main { border-top: 1px solid #9a9a9a; border-bottom: none; } -.cms table.ss-gridfield-table tr th.extra { border-top: 1px solid #9a9a9a; padding-right: 12px; } -.cms table.ss-gridfield-table td:first-child, .cms table.ss-gridfield-table th:first-child { border-left: 1px solid #9a9a9a; } - -.cms .ss-gridfield table.ss-gridfield-table tbody td button { width: 40px; border: 0; background: none; } +.cms .ss-gridfield table.ss-gridfield-table tbody td button { width: 40px; } .cms .ss-gridfield table.ss-gridfield-table tbody td button.gridfield-button-delete { display: block; float: left; } .cms .ss-gridfield table.ss-gridfield-table tbody td button.gridfield-button-unlink { display: block; float: left; } .cms .ss-gridfield table.ss-gridfield-table tbody td a.edit-link { display: block; float: left; } -.cms .cms-content .cms-content-fields .aligned_right_label { margin-left: 0; } .cms .cms-content .cms-content-fields .field.dropdown .middleColumn { max-width: 512px; } .pagination-page-number { position: relative; bottom: 10px; right: 10px; } @@ -60,9 +77,6 @@ table.ss-gridfield-table tr.ss-gridfield-item.even { background: #F0F4F7; } .ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form { overflow: hidden; } .ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form input { width: 160px; } -.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.file { margin: 0px; } -.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.file input.file { margin-left: -132px; } -.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.checkbox { padding: 0px; } .cms .ss-gridfield table.ss-gridfield-table tbody td.col-listChildrenLink { width: 16px; } .cms .ss-gridfield table.ss-gridfield-table tbody td.col-listChildrenLink .list-children-link { background: transparent url(../images/sitetree_ss_default_icons.png) no-repeat 4px -4px; display: block; } diff --git a/admin/css/ie8.css b/admin/css/ie8.css index 5393cfb0daa..9c4a820bc2e 100644 --- a/admin/css/ie8.css +++ b/admin/css/ie8.css @@ -1,24 +1,21 @@ +/** This file contains the default theme definitions for the admin interface. Please put mostly SCSS variable definitions in here, and leave the actual styling to _style.scss and auxilliary files. */ +/** ----------------------------------------------- Colours ------------------------------------------------ */ +/** ----------------------------------------------- Textures ----------------------------------------------- */ +/** ----------------------------------------------- Typography. ------------------------------------------------ */ +/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */ +/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */ .cms .ss-ui-button { background-color: #e6e6e6; } .cms .ss-ui-button.ui-state-hover { background-color: #f3f3f3; } -.cms .ss-ui-button.ss-ui-action-constructive { background-color: #669933; } -.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { background-color: #73ac39; } - -.cms-panel .cms-panel-content-collapsed { width: 40px; } -.cms-panel .cms-panel-content-collapsed h2, .cms-panel .cms-panel-content-collapsed h3 { display: none; } - -.cms-content-toolbar .cms-tree-view-modes .checkboxAboveTree { margin-right: 1px; } +.cms .ss-ui-button.ss-ui-action-constructive { background-color: #1f9433; } +.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { background-color: #23a93a; } .cms-content-toolbar { border-bottom: 1px solid #c9cdce; } -.cms-content-tools .cms-panel-content .dropdown select { width: 152px; } - -.ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { background: #80bf40 url("../images/btn-icon/add.png") 0px 0px no-repeat; } - .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background-image: none; } .ss-gridfield-button-filter.ss-ui-button { background: #e6e6e6 url(../images/filter-icons.png) no-repeat -40px 6px; filter: none; } -.ss-gridfield-button-filter.ss-ui-button.hover-alike:active { background: #2e7ead url(../images/filter-icons.png) no-repeat -15px 7px; filter: none; } -.ss-gridfield-button-filter.ss-ui-button.hover-alike { background: #338dc1 url(../images/filter-icons.png) no-repeat -16px 6px; filter: none; } +.ss-gridfield-button-filter.ss-ui-button.hover-alike:active { background-color: #2e7ead; background-position: -15px 7px; filter: none; } +.ss-gridfield-button-filter.ss-ui-button.hover-alike { background-color: #338DC1; background-position: -16px 6px; filter: none; } .ss-gridfield-button-reset.ss-ui-button { background: #e6e6e6 url(../images/filter-icons.png) no-repeat 8px 5px; filter: none; } .ss-gridfield-button-reset.ss-ui-button.filtered:hover { background: red url(../images/filter-icons.png) no-repeat 8px -17px; filter: none; } @@ -27,13 +24,20 @@ .cms table.ss-gridfield-table tr td { border-right: 1px solid #9a9a9a; } .cms table.ss-gridfield-table tr th { border-right: 1px solid #9a9a9a; } .cms table.ss-gridfield-table tr th.main { border-top: 1px solid #9a9a9a; border-bottom: none; } -.cms table.ss-gridfield-table tr th.extra { border-top: 1px solid #9a9a9a; } +.cms table.ss-gridfield-table tr th.extra { border-top: 1px solid #9a9a9a; padding-right: 12px; } .cms table.ss-gridfield-table td:first-child, .cms table.ss-gridfield-table th:first-child { border-left: 1px solid #9a9a9a; } -.cms .cms-content .cms-content-fields .aligned_right_label { margin-left: 0; } - .cms .ss-gridfield table.ss-gridfield-table tbody td button { border: 0; background: none; } +.cms .cms-content .cms-content-fields .aligned_right_label { margin-left: 0; } + .ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.file { margin: 0px; } .ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.file input.file { margin-left: -132px; } .ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm div.checkbox { padding: 0px; } + +.cms-panel .cms-panel-content-collapsed { width: 40px; } +.cms-panel .cms-panel-content-collapsed h2, .cms-panel .cms-panel-content-collapsed h3 { display: none; } + +.cms-content-toolbar .cms-tree-view-modes .checkboxAboveTree { margin-right: 1px; } + +.cms-content-tools .cms-panel-content .dropdown select { width: 152px; } diff --git a/admin/css/screen.css b/admin/css/screen.css index 3cbce894d15..681a352322b 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -33,6 +33,14 @@ If more variables exist in the future, consider creating a variables file.*/ /** ---------------------------------------------------- Hides the overflowing text from a container Note: you must define a width on the element with this overflow. ----------------------------------------------------- */ /** ---------------------------------------------------- Clear the properties of sub form fields. Often needed for nested form fields and ----------------------------------------------------- */ /** ---------------------------------------------------- Double tone borders http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */ +/**---------------------------------------------------- +Clearfix mixin clears the float of it's parent element +----------------------------------------------------**/ +/** + Mixin creates a transparent button with a dropdown arrow, + as is used for files in the files up-load area. The arrows + themselves are added in the _style file +**/ /** ----------------------------- Sprite images ----------------------------- */ /** Helper SCSS file for generating sprites for the interface. */ .btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-arrow-circle-double, .ui-state-default .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-state-default .btn-icon-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .ui-state-default .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-state-default .btn-icon-document--pencil, .ui-state-default .btn-icon-download-csv, .ui-state-default .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-grid_print, .ui-state-default .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled { background: url('../images/btn-icon-s6f28ccb4de.png') no-repeat; } @@ -185,9 +193,9 @@ form.small .field input.text, form.small .field textarea, form.small .field sele .cms .ss-ui-button.buttonset { margin: 0 -1px; } .cms .ss-ui-button.ui-state-hover, .cms .ss-ui-button:hover { text-decoration: none; background-color: white; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U2ZTZlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#ffffff, #e6e6e6); background: -moz-linear-gradient(#ffffff, #e6e6e6); background: -o-linear-gradient(#ffffff, #e6e6e6); background: -ms-linear-gradient(#ffffff, #e6e6e6); background: linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3; -webkit-box-shadow: 0 0 5px #b3b3b3; -o-box-shadow: 0 0 5px #b3b3b3; box-shadow: 0 0 5px #b3b3b3; } .cms .ss-ui-button:active, .cms .ss-ui-button:focus, .cms .ss-ui-button.ui-state-active, .cms .ss-ui-button.ui-state-focus { border: 1px solid #b3b3b3; background-color: white; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U2ZTZlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#ffffff, #e6e6e6); background: -moz-linear-gradient(#ffffff, #e6e6e6); background: -o-linear-gradient(#ffffff, #e6e6e6); background: -ms-linear-gradient(#ffffff, #e6e6e6); background: linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3 inset; -webkit-box-shadow: 0 0 5px #b3b3b3 inset; -o-box-shadow: 0 0 5px #b3b3b3 inset; box-shadow: 0 0 5px #b3b3b3 inset; } -.cms .ss-ui-button.ss-ui-action-constructive { font-weight: bold; color: white; border-color: #78a127; border-bottom-color: #59781d; background-color: #669933; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwYmY0MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5ODYyZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: -webkit-linear-gradient(#80bf40, #59862d); background: -moz-linear-gradient(#80bf40, #59862d); background: -o-linear-gradient(#80bf40, #59862d); background: -ms-linear-gradient(#80bf40, #59862d); background: linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; } -.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover, .cms .ss-ui-button.ss-ui-action-constructive:hover { border-color: #59781d; background-color: #80bf40; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjYzY1MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY2OTkzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: -webkit-linear-gradient(#8cc653, #669933); background: -moz-linear-gradient(#8cc653, #669933); background: -o-linear-gradient(#8cc653, #669933); background: -ms-linear-gradient(#8cc653, #669933); background: linear-gradient(#8cc653, #669933); } -.cms .ss-ui-button.ss-ui-action-constructive:active, .cms .ss-ui-button.ss-ui-action-constructive:focus, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-active, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-focus { background-color: #619130; -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); } +.cms .ss-ui-button.ss-ui-action-constructive { text-shadow: none; font-weight: bold; color: white; border-color: #1f9433; border-bottom-color: #166a24; background-color: #1f9433; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzkzYmU0MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFmOTQzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #93be42), color-stop(100%, #1f9433)); background: -webkit-linear-gradient(#93be42, #1f9433); background: -moz-linear-gradient(#93be42, #1f9433); background: -o-linear-gradient(#93be42, #1f9433); background: -ms-linear-gradient(#93be42, #1f9433); background: linear-gradient(#93be42, #1f9433); text-shadow: #1c872f 0 -1px -1px; } +.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover, .cms .ss-ui-button.ss-ui-action-constructive:hover { border-color: #166a24; background-color: #1f9433; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E0Y2EzYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIzYTkzYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a4ca3a), color-stop(100%, #23a93a)); background: -webkit-linear-gradient(#a4ca3a, #23a93a); background: -moz-linear-gradient(#a4ca3a, #23a93a); background: -o-linear-gradient(#a4ca3a, #23a93a); background: -ms-linear-gradient(#a4ca3a, #23a93a); background: linear-gradient(#a4ca3a, #23a93a); } +.cms .ss-ui-button.ss-ui-action-constructive:active, .cms .ss-ui-button.ss-ui-action-constructive:focus, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-active, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-focus { background-color: #1d8c30; -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); } .cms .ss-ui-button.ss-ui-action-destructive { color: red; background-color: #e6e6e6; } .cms .ss-ui-button.ss-ui-button-small { padding: 4px 4px; } .cms .ss-ui-button.ui-state-highlight { background-color: #e6e6e6; border: 1px solid #708284; } @@ -317,12 +325,13 @@ body.cms { overflow: hidden; } .message.notice a { color: #999; } .message.warning { background-color: #ffbe66; border-color: #ff9300; } .message.error, .message.bad, .message.required { background-color: #ffbe66; border-color: #ff9300; } -.message.good { background-color: #99cc66; border-color: #669933; } +.message.good { background-color: rgba(101, 168, 57, 0.7); border-color: #65a839; color: #fff; text-shadow: 1px -1px 0 #1f9433; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; -o-border-radius: 3px 3px 3px 3px; -ms-border-radius: 3px 3px 3px 3px; -khtml-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; } .message p { margin: 0; } /** -------------------------------------------- "Add page" dialog -------------------------------------------- */ .cms-page-add-form-dialog { display: none; } +.cms-add-form .step-label { opacity: 0.9; } .cms-add-form .step-label .flyout { height: 17px; padding-top: 5px; } .cms-add-form .step-label .title { padding-top: 5px; font-weight: bold; text-shadow: 1px 1px 0 white; } .cms-add-form ul.SelectionGroup { padding-left: 28px; } @@ -477,7 +486,7 @@ form.member-profile-form .ui-tabs-nav .ui-corner-all, form.member-profile-form . .cms-panel .collapsed-flyout { display: block !important; left: 41px; margin-top: -40px; position: fixed; width: 191px; } .cms-panel .collapsed-flyout li a span { display: block !important; } -.cms .cms-panel-padded { padding: 16px 16px; } +.cms .cms-panel-padded { padding: 16px 16px; margin: 0; } /** ------------------------------------------------------------------ * Dialog @@ -595,6 +604,12 @@ form.import-form label.left { width: 250px; } .cms-container .CMSMain.CMSPageSettingsController .tab#Root_Settings .fieldgroup .fieldgroup-field { width: 216px; padding-left: 0; } .cms-container .CMSMain.CMSPageSettingsController .tab#Root_Settings .TreeDropdownField .treedropdownfield-toggle-panel-link { border-left: none; background: none; background-image: none; } +/** -------------------------------------------- Buttons for FileUpload -------------------------------------------- */ +span.toggle-details .toggle-details-icon { background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -727px no-repeat; } +.fileOverview span.toggle-details .toggle-details-icon { background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -695px no-repeat; } +span.toggle-details .toggle-details-icon.opened { background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -743px no-repeat; } +.fileOverview span.toggle-details .toggle-details-icon.opened { background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -711px no-repeat; } + /** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file). The styles are usually added through jstree.js on DOM load, but we need it earlier in order to correctly display the uninitialized tree. */ .cms .jstree ul, .TreeDropdownField .treedropdownfield-panel .jstree ul { display: block; margin: 0; padding: 0; background: none; list-style-type: none; } .cms .jstree li, .TreeDropdownField .treedropdownfield-panel .jstree li { display: block; margin: 0; padding: 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; } diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index c41d7261579..15fe434261d 100644 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -322,6 +322,7 @@ form.small .field, .field.small { /* constructive */ &.ss-ui-action-constructive { + text-shadow:none; font-weight: bold; color: $color-text-light; border-color: $color-button-constructive-border; @@ -329,19 +330,19 @@ form.small .field, .field.small { background-color: $color-button-constructive; @include background( linear-gradient(color-stops( - lighten($color-button-constructive, 10%), - darken($color-button-constructive, 5%) + scale-color(lighten($color-button-constructive, 10%), $red:50%), + $color-button-constructive )) ); - @include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px); - + @include text-shadow(darken($color-button-constructive, 3%) 0 -1px -1px); + &.ui-state-hover, &:hover { border-color: darken($color-button-constructive-border, 10%); - background-color: lighten($color-button-constructive, 10%); + background-color: $color-button-constructive; @include background( linear-gradient(color-stops( - lighten($color-button-constructive, 15%), - $color-button-constructive + scale-color(saturate(lighten($color-button-constructive, 10%), 10%), $red:60%), + lighten($color-button-constructive, 5%) )) ); } @@ -505,3 +506,9 @@ input.radio { .action-hidden { display: none; } + + + + + + diff --git a/admin/scss/_ieShared.scss b/admin/scss/_ieShared.scss new file mode 100644 index 00000000000..79e7ebb1f32 --- /dev/null +++ b/admin/scss/_ieShared.scss @@ -0,0 +1,110 @@ +//fix for background colors on buttons +.cms .ss-ui-button { + background-color: $color-button-generic; + &.ui-state-hover { + background-color:lighten($color-button-generic, 5%); + } + &.ss-ui-action-constructive { + background-color:$color-button-constructive; + &.ui-state-hover { + background-color:lighten($color-button-constructive, 5%); + } + } +} + +.cms-content-toolbar{ + //add border below the content toolbar + border-bottom:1px solid rgb(201, 205, 206); +} + +//fix for background color on default tabs +.ui-state-default, +.ui-widget-content .ui-state-default, +.ui-widget-header .ui-state-default { + background-image:none; +} + +//fix for filter and reset icons on datagrid +.ss-gridfield-button-filter.ss-ui-button { + background: $color-button-generic url(../images/filter-icons.png) no-repeat -40px 6px; + filter:none; + &.hover-alike:active { + background-color: darken(#338DC1, 5%); + background-position: -15px 7px; + filter:none; + } + &.hover-alike { + background-color: #338DC1; + background-position: -16px 6px; + filter:none; + } +} + +.ss-gridfield-button-reset.ss-ui-button { + background: $color-button-generic url(../images/filter-icons.png) no-repeat 8px 5px; + filter:none; + &.filtered:hover { + background: $color-button-destructive url(../images/filter-icons.png) no-repeat 8px -17px; + filter:none; + } + &.filtered:active { + background: darken($color-button-destructive, 5%) url(../images/filter-icons.png) no-repeat 9px -16px; + filter:none; + } +} + +//fix for borders on gridfield table +.cms table.ss-gridfield-table { + tr { + td { + border-right: 1px solid lighten($color-medium-separator, 10%); + } + th { + border-right: 1px solid lighten($color-medium-separator, 10%); + &.main { + border-top: 1px solid lighten($color-medium-separator, 10%); + border-bottom: none; + } + &.extra { + border-top: 1px solid lighten($color-medium-separator, 10%); + padding-right:12px; + } + } + } + td:first-child, th:first-child { + border-left: 1px solid lighten($color-medium-separator, 10%); + } +} + +//fix for edit and delete icons - border appears on click. +.cms .ss-gridfield table.ss-gridfield-table tbody { + td { + button { + border:0; + background:none; + } + } +} + +//fix for wrong alignment of label on parent groups field in users groups +.cms .cms-content .cms-content-fields { + .aligned_right_label { + margin-left:0; + } +} + + +//fix for model admin filter styling +.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content { + #Form_ImportForm { + div.file { + margin:0px; + input.file { + margin-left: -132px; //hides unnecessary text input field + } + } + div.checkbox { + padding:0px; //stops clear database text from overflowing onto two lines. + } + } +} diff --git a/admin/scss/_mixins.scss b/admin/scss/_mixins.scss index 10b28a768e4..3e137dbb4d9 100644 --- a/admin/scss/_mixins.scss +++ b/admin/scss/_mixins.scss @@ -61,6 +61,10 @@ box-shadow: $shadow $outerColor; } + +/**---------------------------------------------------- +Clearfix mixin clears the float of it's parent element +----------------------------------------------------**/ @mixin clearfix{ &:after{ content: "."; @@ -71,3 +75,50 @@ } *:first-child &{ zoom:1;} } + + + +/** + Mixin creates a transparent button with a dropdown arrow, + as is used for files in the files up-load area. The arrows + themselves are added in the _style file +**/ +@mixin ss-uploadfield-editButton{ + &.ss-uploadfield-item-edit { + opacity:0.9; + padding-top: 3px; + padding-bottom: 0; + height:100%; + @include border-radius(0); + &.ui-state-hover{ + background:none; + opacity:1; + span.toggle-details{ + opacity:1; + } + } + span.toggle-details{ + opacity:0.9; + margin-left:3px; + display: inline-block; + width: 5px; + height: 100%; + cursor: pointer; + .toggle-details-icon { + margin-top:1px; + display: inline-block; + width: 8px; + height: 8px; + vertical-align: middle; + &.opened { + margin-top:0; + } + } + } + + } + + .ui-icon { + display: none; + } +} diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 99443cdaa83..685bc636975 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -418,8 +418,11 @@ body.cms { } &.good { - background-color: lighten($color-good, 20%); + background-color: rgba($color-good,0.7); border-color: $color-good; + color:#fff; + @include text-shadow(1px -1px 0 $color-button-constructive); + @include border-radius(3px 3px 3px 3px); } p { @@ -438,6 +441,7 @@ body.cms { .cms-add-form { .step-label { + opacity:0.9; .flyout { height:17px; //centres number within the grey arrow padding-top:5px; @@ -1241,6 +1245,7 @@ form.member-profile-form { .cms { .cms-panel-padded { padding: $grid-y*2 $grid-x*2; + margin:0; } } @@ -1783,3 +1788,26 @@ form.import-form { } } } + +/** -------------------------------------------- + * Buttons for FileUpload + * -------------------------------------------- */ +span.toggle-details{ + .toggle-details-icon { + background: sprite($sprites32, menu-arrow-down) no-repeat; + .fileOverview &{ + background: sprite($sprites32, menu-arrow-deselected-down) no-repeat; + + } + + &.opened { + background: sprite($sprites32, menu-arrow-up) no-repeat; + .fileOverview &{ + background: sprite($sprites32, menu-arrow-deselected-up) no-repeat; + } + } + } +} + + + diff --git a/admin/scss/ie7.scss b/admin/scss/ie7.scss index a50af054130..753347405d1 100644 --- a/admin/scss/ie7.scss +++ b/admin/scss/ie7.scss @@ -1,22 +1,10 @@ +@import 'themes/default'; +@import 'ieShared'; + html { overflow: hidden; } -//fix for background colors on buttons -.cms .ss-ui-button { - background-color: #e6e6e6; - &.ui-state-hover { - background-color:lighten(#e6e6e6, 5%); - } - &.ss-ui-action-constructive { - background-color:#669933; - &.ui-state-hover { - background-color:lighten(#669933, 5%); - } - } -} - -// .field { input.text, textarea, @@ -43,21 +31,13 @@ html { } } - - - //fix for add one button not positioning properly - .ss-ui-button.cms-page-add-button { float:left; } -.ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { - background: #80bf40 url('../images/btn-icon/add.png') 0px 0px no-repeat; -} //fix for the tree view modes not displaying inline - .cms-tree-view-modes { div { float:left; @@ -76,22 +56,12 @@ html { } } - - - //add line below the cms-content-toolbar - .cms-content-toolbar { - border-bottom:1px solid rgb(201, 205, 206); padding-bottom:5px; } -//fix for background color on default tabs -.ui-state-default, -.ui-widget-content .ui-state-default, -.ui-widget-header .ui-state-default { - background-image:none; -} + // fix jstree themeroller plugin bug: tree disappear in IE7 .jstree li a .ui-icon { @@ -112,57 +82,19 @@ html { .ss-gridfield-button-filter.ss-ui-button { margin: -1px -5px; - background: #e6e6e6 url(../images/filter-icons.png) no-repeat -40px 6px; filter:none; - &.hover-alike:active { - background: darken(#338DC1, 5%) url(../images/filter-icons.png) no-repeat -15px 7px; filter:none; - } - &.hover-alike { - background: #338DC1 url(../images/filter-icons.png) no-repeat -16px 6px; filter:none; - } } + .ss-gridfield-button-reset.ss-ui-button { margin: -1px -5px; - background: #e6e6e6 url(../images/filter-icons.png) no-repeat 8px 5px; filter:none; - &.filtered:hover { - background: #FF0000 url(../images/filter-icons.png) no-repeat 8px -17px; filter:none; - } - &.filtered:active { - background: darken(#FF0000, 5%) url(../images/filter-icons.png) no-repeat 9px -16px; filter:none; - } } -//fix for borders on gridfield table -.cms table.ss-gridfield-table { - tr { - td { - border-right: 1px solid lighten(#808080, 10%); - } - th { - border-right: 1px solid lighten(#808080, 10%); - &.main { - border-top: 1px solid lighten(#808080, 10%); - border-bottom: none; - } - &.extra { - border-top: 1px solid lighten(#808080, 10%); - padding-right:12px; - } - } - } - td:first-child, th:first-child { - border-left: 1px solid lighten(#808080, 10%); - } -} //fix for edit and delete icons - .cms .ss-gridfield table.ss-gridfield-table tbody { td { button { width:40px; - border:0; - background:none; &.gridfield-button-delete { display:block; float:left; @@ -180,18 +112,13 @@ html { } //fix for wrong alignment of label on parent groups field in users groups and fix for width of parent group dropdown field - .cms .cms-content .cms-content-fields { - .aligned_right_label { - margin-left:0; - } .field.dropdown .middleColumn { max-width:512px; } } //fix for input on datagrid pagination - .pagination-page-number { position:relative; bottom:10px; @@ -205,13 +132,11 @@ html { } //fix for wrong height on users groups gridfield table header - table.ss-gridfield-table tr.title th h2 { float:left; } //fix for alternate colors on rows in datagrid - table.ss-gridfield-table { tr { &.ss-gridfield-item.odd { @@ -231,17 +156,6 @@ table.ss-gridfield-table { width:160px; } } - #Form_ImportForm { - div.file { - margin:0px; - input.file { - margin-left: -132px; //hides unnecessary text input field - } - } - div.checkbox { - padding:0px; //stops clear database text from overflowing onto two lines. - } - } } //fix for view children arrow in pages list view diff --git a/admin/scss/ie8.scss b/admin/scss/ie8.scss index d3f344d78c0..d392f0715a3 100644 --- a/admin/scss/ie8.scss +++ b/admin/scss/ie8.scss @@ -1,16 +1,6 @@ -//fix for background colors on buttons -.cms .ss-ui-button { - background-color: #e6e6e6; - &.ui-state-hover { - background-color:lighten(#e6e6e6, 5%); - } - &.ss-ui-action-constructive { - background-color:#669933; - &.ui-state-hover { - background-color:lighten(#669933, 5%); - } - } -} +@import 'themes/default'; +@import 'ieShared'; + .cms-panel { .cms-panel-content-collapsed { @@ -22,104 +12,16 @@ } //fix for overlapping of tree view mode checkboxes -.cms-content-toolbar .cms-tree-view-modes .checkboxAboveTree { - margin-right:1px; -} - -//add border below the content toolbar -.cms-content-toolbar { - border-bottom:1px solid rgb(201, 205, 206); -} - -//fix for width of dropdowns in filter panel -.cms-content-tools .cms-panel-content .dropdown select { - width:152px; -} - -//fix for the button icon shifting on hover -.ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { - background: #80bf40 url('../images/btn-icon/add.png') 0px 0px no-repeat; -} - -//fix for background color on default tabs -.ui-state-default, -.ui-widget-content .ui-state-default, -.ui-widget-header .ui-state-default { - background-image:none; -} - -//fix for filter and reset icons on datagrid - -.ss-gridfield-button-filter.ss-ui-button{ - background: #e6e6e6 url(../images/filter-icons.png) no-repeat -40px 6px; filter:none; - &.hover-alike:active { - background: darken(#338DC1, 5%) url(../images/filter-icons.png) no-repeat -15px 7px; filter:none; - } - &.hover-alike { - background: #338DC1 url(../images/filter-icons.png) no-repeat -16px 6px; filter:none; - } -} -.ss-gridfield-button-reset.ss-ui-button{ - background: #e6e6e6 url(../images/filter-icons.png) no-repeat 8px 5px; filter:none; - &.filtered:hover { - background: #FF0000 url(../images/filter-icons.png) no-repeat 8px -17px; filter:none; - } - &.filtered:active { - background: darken(#FF0000, 5%) url(../images/filter-icons.png) no-repeat 9px -16px; filter:none; - } -} - -//fix for borders on gridfield table - -.cms table.ss-gridfield-table { - tr { - td { - border-right: 1px solid lighten(#808080, 10%); - } - th { - border-right: 1px solid lighten(#808080, 10%); - &.main { - border-top: 1px solid lighten(#808080, 10%); - border-bottom: none; - } - &.extra { - border-top: 1px solid lighten(#808080, 10%); - } +.cms-content-toolbar{ + .cms-tree-view-modes{ + .checkboxAboveTree { + margin-right:1px; } } - td:first-child, th:first-child { - border-left: 1px solid lighten(#808080, 10%); - } -} - -//fix for wrong alignment of label on parent groups field in users groups - -.cms .cms-content .cms-content-fields .aligned_right_label { - margin-left:0; } -//fix for edit and delete icons - border appears on click. - -.cms .ss-gridfield table.ss-gridfield-table tbody { - td { - button { - border:0; - background:none; - } - } -} -//fix for model admin filter styling -.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content { - #Form_ImportForm { - div.file { - margin:0px; - input.file { - margin-left: -132px; //hides unnecessary text input field - } - } - div.checkbox { - padding:0px; //stops clear database text from overflowing onto two lines. - } - } -} +//fix for width of dropdowns in filter panel +.cms-content-tools .cms-panel-content .dropdown select { + width:152px; +} \ No newline at end of file diff --git a/admin/scss/themes/_default.scss b/admin/scss/themes/_default.scss index 739ddaba4fe..bf0527c3973 100644 --- a/admin/scss/themes/_default.scss +++ b/admin/scss/themes/_default.scss @@ -45,8 +45,8 @@ $color-button-generic-border: #c0c0c2 !default; $color-button-highlight: #e6e6e6 !default; $color-button-highlight-border: #708284 !default; -$color-button-constructive: #669933 !default; -$color-button-constructive-border: #78a127 !default; +$color-button-constructive: #1F9433 !default; +$color-button-constructive-border: #1F9433 !default; $color-button-destructive: #f00 !default; @@ -55,7 +55,7 @@ $color-button-disabled: #eeeded !default; $color-warning: #FF9300 !default; $color-error: #FF9300 !default; $color-notice: #FF9300 !default; -$color-good: $color-button-constructive !default; +$color-good: #65A839 !default; $color-cms-batchactions-menu-background: #f5f5f5 !default; $color-cms-batchactions-menu-selected-background: #efe999 !default; diff --git a/css/AssetUploadField.css b/css/AssetUploadField.css index 2e8abc8f23f..ac11c7d2141 100644 --- a/css/AssetUploadField.css +++ b/css/AssetUploadField.css @@ -4,29 +4,62 @@ /** ----------------------------------------------- Typography. ------------------------------------------------ */ /** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */ /** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */ +/** This file contains generic mixins which we use throughout the admin panels. Mixins should be stored here rather than individual files so that we can keep. */ +/** ---------------------------------------------------- Hides the overflowing text from a container Note: you must define a width on the element with this overflow. ----------------------------------------------------- */ +/** ---------------------------------------------------- Clear the properties of sub form fields. Often needed for nested form fields and ----------------------------------------------------- */ +/** ---------------------------------------------------- Double tone borders http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */ +/**---------------------------------------------------- +Clearfix mixin clears the float of it's parent element +----------------------------------------------------**/ +/** + Mixin creates a transparent button with a dropdown arrow, + as is used for files in the files up-load area. The arrows + themselves are added in the _style file +**/ #AssetUploadField { border-bottom: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } body.cms.ss-uploadfield-edit-iframe { padding: 16px; overflow: auto; } -body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: #6a6a6a; } +body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: #777777; text-shadow: 0px 1px 0px #fff; } .ss-uploadfield-edit-iframe { background: #E2E2E2; } .ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -o-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; } .ss-assetuploadfield .field { border-bottom: 0; box-shadow: none; } +.ss-assetuploadfield .fileOverview { clear: both; margin-top: 10px; margin-bottom: 5px; padding-bottom: 5px; height: 50px; position: relative; } +.ss-assetuploadfield .fileOverview .ss-ui-button { position: absolute; bottom: 0; background: none; border: 0; right: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; color: #444444; } +.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit, .ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all { opacity: 0.9; padding-top: 3px; padding-bottom: 0; height: 100%; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; } +.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover, .ss-assetuploadfield .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all { background: none; opacity: 1; } +.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover span.toggle-details, .ss-assetuploadfield .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all span.toggle-details { opacity: 1; } +.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit span.toggle-details, .ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details { opacity: 0.9; margin-left: 3px; display: inline-block; width: 5px; height: 100%; cursor: pointer; } +.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit span.toggle-details .toggle-details-icon, .ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon { margin-top: 1px; display: inline-block; width: 8px; height: 8px; vertical-align: middle; } +.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit span.toggle-details .toggle-details-icon.opened, .ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon.opened { margin-top: 0; } +.ss-assetuploadfield .fileOverview .ss-ui-button .ui-icon { display: none; } +.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all { height: auto; } +.ss-assetuploadfield .fileOverview .state { font-size: 16px; font-weight: bold; line-height: 20px; margin-bottom: 5px; } +.ss-assetuploadfield .fileOverview .details { color: #6a6a6a; } .ss-assetuploadfield .ss-uploadfield-files { margin: 0; padding: 0; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item { border: 1px solid #b3b3b3; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding; -o-background-clip: padding-box; -ms-background-clip: padding-box; -khtml-background-clip: padding-box; background-clip: padding-box; margin: 0 0 5px; padding: 0; overflow: hidden; position: relative; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-preview { position: absolute; height: 30px; width: 40px; overflow: hidden; z-index: 1; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-info { position: relative; height: 30px; overflow: hidden; background-color: #5db4df; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5db4df), color-stop(8%, #5db1dd), color-stop(50%, #439bcb), color-stop(54%, #3f99cd), color-stop(96%, #207db6), color-stop(100%, #1e7cba)); background-image: -webkit-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -moz-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -o-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -ms-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); } .ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c11f1d), color-stop(4%, #bf1d1b), color-stop(8%, #b71b1c), color-stop(15%, #b61e1d), color-stop(27%, #b11d1d), color-stop(31%, #ab1d1c), color-stop(42%, #a51b1b), color-stop(46%, #9f1b19), color-stop(50%, #9f1b19), color-stop(54%, #991c1a), color-stop(58%, #971a18), color-stop(62%, #911b1b), color-stop(65%, #911b1b), color-stop(88%, #7e1816), color-stop(92%, #771919), color-stop(100%, #731817)); background-image: -webkit-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -moz-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -o-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -ms-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); } -.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 40%; color: #777777; background: #eeeded; border: 1px solid #b3b3b3; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; display: block; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; } -.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name b { font-weight: bold; padding: 0 5px 0 0; } -.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name span { font-size: 11px; color: #848484; } -.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; } -.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-status.ui-state-error-text { color: red; font-weight: bold; } -.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; } +.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { cursor: default; background: #bcb9b9; background: rgba(201, 198, 198, 0.9); } +.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); } +.ss-assetuploadfield .ss-uploadfield-files .ui-state-warning .ss-uploadfield-item-info { background-color: #ff9300; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eba547), color-stop(8%, #e89a30), color-stop(50%, #e68f19), color-stop(54%, #e68e19), color-stop(96%, #e17519), color-stop(100%, #dc6718)); background-image: -webkit-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -moz-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -o-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -ms-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); } +.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 40%; color: #5e5e5e; background: #eeeded; background: rgba(255, 255, 255, 0.8); -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; display: block; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; } +.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); display: inline; float: left; max-width: 40%; font-weight: normal; padding: 0 5px 0 0; } +.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; max-width: 30%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); } +.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); color: #cc0000; } +.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #cc7600; } +.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1f9433; } +.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; color: #f00; } .ss-assetuploadfield .ss-uploadfield-files .ss-ui-button { background: none; border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; } .ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-delete { display: none; } -.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit { padding-top: 0; padding-bottom: 0; line-height: 30px; } +.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all { opacity: 0.9; padding-top: 3px; padding-bottom: 0; height: 100%; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; } +.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all { background: none; opacity: 1; } +.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover span.toggle-details, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all span.toggle-details, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all span.toggle-details { opacity: 1; } +.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit span.toggle-details, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details { opacity: 0.9; margin-left: 3px; display: inline-block; width: 5px; height: 100%; cursor: pointer; } +.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit span.toggle-details .toggle-details-icon, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon { margin-top: 1px; display: inline-block; width: 8px; height: 8px; vertical-align: middle; } +.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit span.toggle-details .toggle-details-icon.opened, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon.opened, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon.opened { margin-top: 0; } .ss-assetuploadfield .ss-uploadfield-files .ss-ui-button .ui-icon { display: none; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress { width: 100%; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; height: 30px; padding: 0; margin: 0; overflow: hidden; width: 100%; } @@ -36,10 +69,12 @@ body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: # .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; } -.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 19px 0 0; } +.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 34px 0 0; } +.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label { width: 300px; height: 30px; font-size: 14px; } +.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label.ui-state-focus { -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; } -.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; display: none; } -.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; -moz-box-shadow: #9a9a9a 0 0 3px 3px inset; -webkit-box-shadow: #9a9a9a 0 0 3px 3px inset; -o-box-shadow: #9a9a9a 0 0 3px 3px inset; box-shadow: #9a9a9a 0 0 3px 3px inset; border: 2px dashed gray; background: rgba(201, 205, 206, 0.8); display: none; height: 66px; width: 300px; float: left; } -.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone.active.hover { -moz-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 3px inset; -webkit-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 3px inset; -o-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 3px inset; box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 3px inset; } -.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { z-index: 1; padding: 15px 0 0; line-height: 22px; font-size: 20px; font-weight: bold; text-align: center; display: block; margin: 0 auto; } -.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { display: block; font-size: 12px; z-index: -1; } +.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; margin-top: 16px; display: none; } +.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { margin-top: 9px; -moz-border-radius: 13px; -webkit-border-radius: 13px; -o-border-radius: 13px; -ms-border-radius: 13px; -khtml-border-radius: 13px; border-radius: 13px; -moz-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; -webkit-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; -o-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; border: 2px dashed gray; background: #d4dbe0; display: none; height: 82px; width: 408px; float: left; } +.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone.active.hover { -moz-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; -webkit-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; -o-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; } +.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { color: #5e5e5e; text-shadow: 0px 1px 0px #fff; background: url("../images/upload.png") 0 25px no-repeat; width: 230px; z-index: 1; padding: 20px 0 0; line-height: 25px; font-size: 25px; font-weight: bold; text-align: center; display: block; margin: 0 auto; } +.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { display: block; font-size: 14px; z-index: -1; } diff --git a/forms/UploadField.php b/forms/UploadField.php index e8dcd4aca80..4d0dd08cb7d 100644 --- a/forms/UploadField.php +++ b/forms/UploadField.php @@ -349,23 +349,22 @@ public function Field($properties = array()) { $allowedExtensions = $this->getValidator()->getAllowedExtensions(); $config['acceptFileTypes'] = '(\.|\/)(' . implode('|', $allowedExtensions) . ')$'; $config['errorMessages']['acceptFileTypes'] = _t( - 'File.INVALIDEXTENSION', - 'Extension is not allowed (valid: {extensions})', - array('extensions' => wordwrap(implode(', ', $allowedExtensions))) + 'File.INVALIDEXTENSIONSHORT', + 'Extension is not allowed' ); } if ($this->getValidator()->getAllowedMaxFileSize()) { $config['maxFileSize'] = $this->getValidator()->getAllowedMaxFileSize(); $config['errorMessages']['maxFileSize'] = _t( - 'File.TOOLARGE', - 'Filesize is too large, maximum {size} allowed.', + 'File.TOOLARGESHORT', + 'Filesize exceeds {size}', array('size' => File::format_size($config['maxFileSize'])) ); } if ($config['maxNumberOfFiles'] > 1) { $config['errorMessages']['maxNumberOfFiles'] = _t( - 'UploadField.MAXNUMBEROFFILES', - 'Max number of {count} file(s) exceeded.', + 'UploadField.MAXNUMBEROFFILESSHORT', + 'Can only upload {count} files', array('count' => $config['maxNumberOfFiles']) ); } diff --git a/javascript/UploadField.js b/javascript/UploadField.js index 732163d89fe..94e086754f9 100644 --- a/javascript/UploadField.js +++ b/javascript/UploadField.js @@ -21,22 +21,57 @@ var firstNewFile = this._files.find('.ss-uploadfield-item').slice(data.files.length*-1).first(); var top = '+=' + (firstNewFile.position().top - parseInt(firstNewFile.css('marginTop')) || 0 - parseInt(firstNewFile.css('borderTopWidth')) || 0); firstNewFile.offsetParent().animate({scrollTop: top}, 1000); + + /* Compute total size of files */ + var fSize = 0; + for(var i = 0; i < data.files.length; i++){ + if(typeof data.files[i].size === 'number'){ + fSize = fSize + data.files[i].size; + } + } + + $('.fileOverview .uploadStatus .details .total').text(data.files.length); + if(typeof fSize === 'number' && fSize > 0){ + fSize = this._formatFileSize(fSize); + $('.fileOverview .uploadStatus .details .fileSize').text(fSize); + } + + //Fixes case where someone uploads a single erroring file + if(data.files.length == 1 && data.files[0].error !== null){ + $('.ss-uploadfield-editandorganize').show(); + $('.fileOverview .uploadStatus .state').text(ss.i18n._t('AssetUploadField.UploadField.UPLOADFAIL', 'Sorry your upload failed')); + }else{ + $('.fileOverview .uploadStatus .state').text(ss.i18n._t('AssetUploadField.UPLOADINPROGRESS', 'Please wait… upload in progress'));//.show(); + $('.fileOverview button').hide(); + } + return result; - } + }, + _onAlways: function (jqXHRorResult, textStatus, jqXHRorError, options) { + $.blueimpUI.fileupload.prototype._onAlways.call(this, jqXHRorResult, textStatus, jqXHRorError, options); + if (this._active === 0) { + this._trigger('stop'); + $('.fileOverview .uploadStatus .state').text(ss.i18n._t('AssetUploadField.FILEUPLOADCOMPLETED', 'File Upload Completed!'));//.hide(); + $('.fileOverview button').show(); + } + + } }); + + $.entwine('ss', function($) { + $('div.ss-upload').entwine({ Config: null, onmatch: function() { - + if(this.is('.readonly,.disabled')) return; var fileInput = this.find('input'); var dropZone = this.find('.ss-uploadfield-dropzone'); - var config = $.parseJSON(fileInput.data('config').replace(/'/g,'"')); - + var config = $.parseJSON(fileInput.data('config').replace(/'/g,'"')); /* Attach classes to dropzone when element can be dropped*/ $(document).unbind('dragover'); @@ -85,10 +120,10 @@ 5: ss.i18n._t('UploadField.NOTMPFOLDER'), 6: ss.i18n._t('UploadField.WRITEFAILED'), 7: ss.i18n._t('UploadField.STOPEDBYEXTENSION'), - maxFileSize: ss.i18n._t('UploadField.TOOLARGE'), + maxFileSize: ss.i18n._t('UploadField.TOOLARGESHORT'), minFileSize: ss.i18n._t('UploadField.TOOSMALL'), - acceptFileTypes: ss.i18n._t('UploadField.INVALIDEXTENSION'), - maxNumberOfFiles: ss.i18n._t('UploadField.MAXNUMBEROFFILESSIMPLE'), + acceptFileTypes: ss.i18n._t('UploadField.INVALIDEXTENSIONSHORT'), + maxNumberOfFiles: ss.i18n._t('UploadField.MAXNUMBEROFFILESSHORT'), uploadedBytes: ss.i18n._t('UploadField.UPLOADEDBYTES'), emptyResult: ss.i18n._t('UploadField.EMPTYRESULT') }, @@ -106,7 +141,7 @@ if (data.context) { var value = parseInt(data.loaded / data.total * 100, 10) + '%'; data.context.find('.ss-uploadfield-item-status').html((data.total == 1)?ss.i18n._t('UploadField.LOADING'):value); - data.context.find('.ss-uploadfield-item-progressbarvalue').css('width', value); + data.context.find('.ss-uploadfield-item-progressbarvalue').css('width', value); } } }, @@ -123,6 +158,8 @@ dropZone.show(); // drag&drop avaliable } + + this._super(); }, @@ -204,6 +241,8 @@ return false; } }); + + $('div.ss-upload .ss-uploadfield-item-remove:not(.ui-state-disabled), .ss-uploadfield-item-delete:not(.ui-state-disabled)').entwine({ onclick: function(e) { var fileupload = this.closest('div.ss-upload').data('fileupload'), @@ -222,18 +261,57 @@ return false; } }); - $('div.ss-upload .ss-uploadfield-item-edit').entwine({ + + $('div.ss-upload .fileOverview .ss-uploadfield-item-edit-all').entwine({ + onclick: function(e) { + + if($(this).hasClass('opened')){ + $('.ss-uploadfield-item .ss-uploadfield-item-edit .toggle-details-icon.opened').each(function(i){ + $(this).closest('.ss-uploadfield-item-edit').click(); + }); + $(this).removeClass('opened').find('.toggle-details-icon').removeClass('opened'); + }else{ + $('.ss-uploadfield-item .ss-uploadfield-item-edit .toggle-details-icon').each(function(i){ + if(!$(this).hasClass('opened')){ + $(this).closest('.ss-uploadfield-item-edit').click(); + } + }); + $(this).addClass('opened').find('.toggle-details-icon').addClass('opened'); + } + + e.preventDefault(); // Avoid a form submit + } + }); + $('div.ss-upload .ss-uploadfield-item-edit, div.ss-upload .ss-uploadfield-item-name').entwine({ onclick: function(e) { var editform = this.closest('.ss-uploadfield-item').find('.ss-uploadfield-item-editform'); + var disabled; + var iframe = editform.find('iframe'); + var inputs = iframe.contents().find('.ss-uploadfield-edit-iframe input'); + + for(var i=0;i<% _t('AssetUploadField.EDITANDORGANIZE', 'Edit & organize') %> +
+
+
<% _t('AssetUploadField.UPLOADINPROGRESS', 'Please wait… upload in progress') %>
+ + +
<% _t('AssetUploadField.TOTAL', 'Total') %>: <% _t('AssetUploadField.FILES', 'Files') %>
+
+
+ +
+
\ No newline at end of file