tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity
ef35c2bb6b
silverstripe-framework/css/AssetUploadField.css

89 lines
19 KiB
CSS
Raw Normal View History

ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
/** 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 ------------------------------------------------ */
Side-by-side preview browser compatibility fixes.
2012-12-04 06:10:20 +01:00
/* Keep as solid colours transparent borders wont work in ie */
/* Only for use as shadows as they wont work in older browsers */
NEW Side by side editing functionality - first cut (os#7412) Introduces a preview window that appears when the screen is wide enough, removes old preview button, adds a draft-public switch, adds variety of preview options which are not hooked up yet. Goes along with cms commit fa3738a9f4c5181eabf18a77ca89792d31592250
2012-11-22 02:14:11 +01:00
/*$color-optional: #a1d2eb !default; */
ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
/** ----------------------------------------------- Textures ----------------------------------------------- */
/** ----------------------------------------------- Typography. ------------------------------------------------ */
MINOR Shorter SCSS $grid-* variables to promote wider usage (amended)
2012-02-14 15:45:56 +01:00
/** ----------------------------------------------- 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 ------------------------------------------------ */
ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
API Add action tabsets as a interface idiom. Introduces the concept of action tabsets - usage of TabSet and Tabs in between the action buttons to allow richer set of capabilities that can be offered to the user. Goes along with c8d0cdec99c95dbed3b58ebcc098cc9d22c58206 that implements a change to the CMS actions.
2012-11-21 22:01:02 +01:00
/*Mixin used to generate slightly smaller text and forms
Used in side panels and action tabs
*/
Move 'upload new file' section to main files area Optimise and fix drag drop on upload fields Combine 3 tabs from the 'insert media' dialog box into 1
2015-09-21 00:00:05 +02:00
.ss-uploadfield-view-allowed-extensions { margin-top: -42px; max-width: 400px; width: 30%; background: #ECEFF1; display: block; float: right; position: relative; }
.ss-uploadfield-view-allowed-extensions .toggle { font-style: normal; font-size: 16px; float: right; color: #9ba5ae; position: absolute; top: 4px; right: 0; width: 16px; height: 16px; overflow: hidden; }
.ss-uploadfield-view-allowed-extensions .toggle:hover, .ss-uploadfield-view-allowed-extensions .toggle:active, .ss-uploadfield-view-allowed-extensions .toggle:focus { text-decoration: none; color: #66727d; }
.ss-uploadfield-view-allowed-extensions h4 { margin: 0 0 6px; padding-right: 20px; }
BUG: File Uploading Notifications (fixes #7883) Put "File upload complete" and "back to folder" together. Turned 'File upload' into a message, and updated the message styles. Moved allowed file types into the area where users are uploading files. This is a temporary fix until js tooltips are implemented, at which point, these details will be shown when clicking a question mark beside "Choose files". Added small animation effect to files when opening iframe to edit. Now slides down, rather than just appearing open Linked to silverstripe/silverstripe-cms#223
2012-11-02 00:46:16 +01:00
Side-by-side preview options styling. Thanks @adrexia for contributing.
2012-11-22 04:30:50 +01:00
.backlink { padding-left: 12px; }
ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
Fix: Incorrect calculation of UploadField height (fixes #2862)
2014-02-18 23:20:18 +01:00
body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fieldset { overflow: auto; background: #E2E2E2; }
Merge remote-tracking branch 'origin/3.2' into 3 Conflicts: admin/css/screen.css
2015-07-20 16:08:36 +02:00
body.cms.ss-uploadfield-edit-iframe span.readonly, .composite.ss-assetuploadfield .details fieldset span.readonly { font-style: italic; color: #9ba5ae; text-shadow: 0px 1px 0px #fff; }
BUGFIXES: File Uploads * Add arrows back to edit-all toggle button * Don't show dimensions if the item being inserted doesn't have them. * Set pop-up windows to be a percentage of the window height for better use of space * Fix broken fieldholdersmall styling within files edit * Add placeholder if no preview *Take out minFileSize so upload will work on Android phones
2012-06-08 06:42:14 +02:00
body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-assetuploadfield .details fieldset .fieldholder-small label { margin-left: 0; }
MINOR Moved AssetUploadField iframe margins into iframe body itself to avoid width conflicts, override default .cms overflow behaviour to ensure the iframe content as a whole stays scrollable (fixes #7003)
2012-03-27 16:23:48 +02:00
Fix: Incorrect calculation of UploadField height (fixes #2862)
2014-02-18 23:20:18 +01:00
.composite.ss-assetuploadfield .details fieldset { padding: 16px; }
Move 'upload new file' section to main files area Optimise and fix drag drop on upload fields Combine 3 tabs from the 'insert media' dialog box into 1
2015-09-21 00:00:05 +02:00
.ss-assetuploadfield { border-bottom: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; margin: 0; position: relative; padding: 0; }
Recompiled CSS with compass 1.0 Minor syntactical changes, like alphabetical ordering of filters, uppercasing of hex colours. See http://compass-style.org/blog/2014/08/15/omg-compass-1-0/. Shouldn't include any user-visible changes, but helps to avoid confusion with the next person trying to modify the CSS (Luke is currently struggling with that)
2014-10-15 23:33:49 +02:00
.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); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px; padding: 0 0 7px; clear: both; position: relative; }
ENHANCEMENT:SSF-38 - Styled in-content file upload dialog box. Also added fixes for cms-content-header box-shadow.
2012-03-30 03:33:20 +02:00
.ss-assetuploadfield .field { border-bottom: 0; box-shadow: none; }
BUG: File Uploading Notifications (fixes #7883) Put "File upload complete" and "back to folder" together. Turned 'File upload' into a message, and updated the message styles. Moved allowed file types into the area where users are uploading files. This is a temporary fix until js tooltips are implemented, at which point, these details will be shown when clicking a question mark beside "Choose files". Added small animation effect to files when opening iframe to edit. Now slides down, rather than just appearing open Linked to silverstripe/silverstripe-cms#223
2012-11-02 00:46:16 +01:00
.ss-assetuploadfield .fileOverview { clear: both; margin-top: 10px; position: relative; }
.ss-assetuploadfield .fileOverview .uploadStatus:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
*:first-child .ss-assetuploadfield .fileOverview .uploadStatus { zoom: 1; }
.ss-assetuploadfield .fileOverview .uploadStatus .state { float: left; font-size: 16px; font-weight: bold; line-height: 1.1em; }
.ss-assetuploadfield .fileOverview .uploadStatus .details { opacity: 0.9; float: right; }
Update asset admin toolbar
2015-10-23 05:01:40 +02:00
.ss-assetuploadfield .ss-uploadfield-item-actions.edit-all .ss-uploadfield-item-edit-all { float: right; margin: -8px 0 0; padding: 0; background: none; border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; color: #66727d; }
.ss-assetuploadfield .ss-uploadfield-item-actions.edit-all .ss-uploadfield-item-edit-all:hover { color: #7f8c97; }
BUG: File Uploading Notifications (fixes #7883) Put "File upload complete" and "back to folder" together. Turned 'File upload' into a message, and updated the message styles. Moved allowed file types into the area where users are uploading files. This is a temporary fix until js tooltips are implemented, at which point, these details will be shown when clicking a question mark beside "Choose files". Added small animation effect to files when opening iframe to edit. Now slides down, rather than just appearing open Linked to silverstripe/silverstripe-cms#223
2012-11-02 00:46:16 +01:00
.ss-assetuploadfield .ss-uploadfield-files { margin: 0; padding: 0; clear: both; }
Recompiled CSS with compass 1.0 Minor syntactical changes, like alphabetical ordering of filters, uppercasing of hex colours. See http://compass-style.org/blog/2014/08/15/omg-compass-1-0/. Shouldn't include any user-visible changes, but helps to avoid confusion with the next person trying to modify the CSS (Luke is currently struggling with that)
2014-10-15 23:33:49 +02:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item { border: 1px solid #b3b3b3; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -o-background-clip: padding-box; -webkit-background-clip: padding; background-clip: padding-box; margin: 0 0 5px; padding: 0; overflow: hidden; position: relative; }
BUG: File Uploading Notifications (fixes #7883) Put "File upload complete" and "back to folder" together. Turned 'File upload' into a message, and updated the message styles. Moved allowed file types into the area where users are uploading files. This is a temporary fix until js tooltips are implemented, at which point, these details will be shown when clicking a question mark beside "Choose files". Added small animation effect to files when opening iframe to edit. Now slides down, rather than just appearing open Linked to silverstripe/silverstripe-cms#223
2012-11-02 00:46:16 +01:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item .info { position: relative; padding: 7px; overflow: hidden; background-color: #FFBE66; border: 1px solid #FF9300; }
ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-preview { position: absolute; height: 30px; width: 40px; overflow: hidden; z-index: 1; }
BUGFIXES: File Uploads * Add arrows back to edit-all toggle button * Don't show dimensions if the item being inserted doesn't have them. * Set pop-up windows to be a percentage of the window height for better use of space * Fix broken fieldholdersmall styling within files edit * Add placeholder if no preview *Take out minFileSize so upload will work on Android phones
2012-06-08 06:42:14 +02:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-preview .no-preview { display: block; height: 100%; width: 100%; background: url("../images/icons/document.png") 2px 0px no-repeat; }
Recompiled CSS with compass 1.0 Minor syntactical changes, like alphabetical ordering of filters, uppercasing of hex colours. See http://compass-style.org/blog/2014/08/15/omg-compass-1-0/. Shouldn't include any user-visible changes, but helps to avoid confusion with the next person trying to modify the CSS (Luke is currently struggling with that)
2014-10-15 23:33:49 +02:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-info { position: relative; line-height: 30px; overflow: hidden; background-color: #5db4df; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVkYjRkZiIvPjxzdG9wIG9mZnNldD0iOCUiIHN0b3AtY29sb3I9IiM1ZGIxZGQiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzQzOWJjYiIvPjxzdG9wIG9mZnNldD0iNTQlIiBzdG9wLWNvbG9yPSIjM2Y5OWNkIi8+PHN0b3Agb2Zmc2V0PSI5NiUiIHN0b3AtY29sb3I9IiMyMDdkYjYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTdjYmEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; 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: -moz-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -webkit-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: linear-gradient(to bottom, #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; padding-right: 130px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2MxMWYxZCIvPjxzdG9wIG9mZnNldD0iNCUiIHN0b3AtY29sb3I9IiNiZjFkMWIiLz48c3RvcCBvZmZzZXQ9IjglIiBzdG9wLWNvbG9yPSIjYjcxYjFjIi8+PHN0b3Agb2Zmc2V0PSIxNSUiIHN0b3AtY29sb3I9IiNiNjFlMWQiLz48c3RvcCBvZmZzZXQ9IjI3JSIgc3RvcC1jb2xvcj0iI2IxMWQxZCIvPjxzdG9wIG9mZnNldD0iMzElIiBzdG9wLWNvbG9yPSIjYWIxZDFjIi8+PHN0b3Agb2Zmc2V0PSI0MiUiIHN0b3AtY29sb3I9IiNhNTFiMWIiLz48c3RvcCBvZmZzZXQ9IjQ2JSIgc3RvcC1jb2xvcj0iIzlmMWIxOSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjOWYxYjE5Ii8+PHN0b3Agb2Zmc2V0PSI1NCUiIHN0b3AtY29sb3I9IiM5OTFjMWEiLz48c3RvcCBvZmZzZXQ9IjU4JSIgc3RvcC1jb2xvcj0iIzk3MWExOCIvPjxzdG9wIG9mZnNldD0iNjIlIiBzdG9wLWNvbG9yPSIjOTExYjFiIi8+PHN0b3Agb2Zmc2V0PSI2NSUiIHN0b3AtY29sb3I9IiM5MTFiMWIiLz48c3RvcCBvZmZzZXQ9Ijg4JSIgc3RvcC1jb2xvcj0iIzdlMTgxNiIvPjxzdG9wIG9mZnNldD0iOTIlIiBzdG9wLWNvbG9yPSIjNzcxOTE5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNzMxODE3Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; 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: -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: -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: linear-gradient(to bottom, #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%); }
BUGFIX: Fix error notification on files (fixes: 7295) Add title text to all status messages Make room for the error message details by expanding the name area in the file details Fix up changes status to work with selects
2012-05-11 04:43:17 +02:00
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { width: 100%; cursor: default; background: #bcb9b9; background: rgba(201, 198, 198, 0.9); }
ENHANCEMENT: UI Changes to FileUpload Area (TRAC-7219) 1. Add arrows to edit dropdowns 2. Adjust lightened fields so they don't look like input boxes, and fix rgba colours 3. Add ability to click file names to edit 4. Add feedback when edit button is hovered 5. Add feedback if a file has been opened for editing and shut again (saved changes, unsaved changes, unchanged) 6. Add ability to open and close all files to edit them all at once 7. Add overall feedback for file uploads, and fix NaN error 8. Fix up area to match design 9. Fix error messages so they fit in the provided space 10. Fix case where a single uploaded file errors
2012-05-09 08:38:21 +02:00
.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); }
Move 'upload new file' section to main files area Optimise and fix drag drop on upload fields Combine 3 tabs from the 'insert media' dialog box into 1
2015-09-21 00:00:05 +02:00
.ss-assetuploadfield .ss-uploadfield-files .ui-state-warning .ss-uploadfield-item-info { background-color: #E9D104; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZDMzYiIvPjxzdG9wIG9mZnNldD0iOCUiIHN0b3AtY29sb3I9IiNlMmNlMjQiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2QxYmUxYyIvPjxzdG9wIG9mZnNldD0iNTQlIiBzdG9wLWNvbG9yPSIjZDFiZDFjIi8+PHN0b3Agb2Zmc2V0PSI5NiUiIHN0b3AtY29sb3I9IiNkMDlhMWEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZjg3MWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e5d33b), color-stop(8%, #e2ce24), color-stop(50%, #d1be1c), color-stop(54%, #d1bd1c), color-stop(96%, #d09a1a), color-stop(100%, #cf871a)); background-image: -moz-linear-gradient(top, #e5d33b 0%, #e2ce24 8%, #d1be1c 50%, #d1bd1c 54%, #d09a1a 96%, #cf871a 100%); background-image: -webkit-linear-gradient(top, #e5d33b 0%, #e2ce24 8%, #d1be1c 50%, #d1bd1c 54%, #d09a1a 96%, #cf871a 100%); background-image: linear-gradient(to bottom, #e5d33b 0%, #e2ce24 8%, #d1be1c 50%, #d1bd1c 54%, #d09a1a 96%, #cf871a 100%); }
Merge remote-tracking branch 'origin/3.2' into 3 Conflicts: admin/css/screen.css
2015-07-20 16:08:36 +02:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 50%; color: #7f8c97; background: #eeeded; background: rgba(255, 255, 255, 0.8); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; display: table; table-layout: fixed; }
BUGFIXES: File Uploads * Add arrows back to edit-all toggle button * Don't show dimensions if the item being inserted doesn't have them. * Set pop-up windows to be a percentage of the window height for better use of space * Fix broken fieldholdersmall styling within files edit * Add placeholder if no preview *Take out minFileSize so upload will work on Android phones
2012-06-08 06:42:14 +02:00
.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: 50%; font-weight: normal; padding: 0 5px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status { position: relative; 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); }
BUG AssetUploadField hides "generic" file upload messages. If an upload fails, the error is not shown correctly, it gets hidden off the table because of absolute positioning. This currently worked because it relied upon known errors not showing a "size" element next to it. "ui-state-warning-text" and "ui-state-success-text" don't need this CSS, so it's probably not necessary anyway as it shows the error text correctly without it.
2014-07-29 00:06:27 +02:00
.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; }
NEW Side by side editing functionality - first cut (os#7412) Introduces a preview window that appears when the screen is wide enough, removes old preview button, adds a draft-public switch, adds variety of preview options which are not hooked up yet. Goes along with cms commit fa3738a9f4c5181eabf18a77ca89792d31592250
2012-11-22 02:14:11 +01:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #b7a403; }
Recompiled CSS with compass 1.0 Minor syntactical changes, like alphabetical ordering of filters, uppercasing of hex colours. See http://compass-style.org/blog/2014/08/15/omg-compass-1-0/. Shouldn't include any user-visible changes, but helps to avoid confusion with the next person trying to modify the CSS (Luke is currently struggling with that)
2014-10-15 23:33:49 +02:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1F9433; }
BUGFIX:fixed styling of asset upload page and dialog in the asset admin and media insert via WYSIWYG editor open/8231.
2013-02-04 02:15:27 +01:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; color: #f00; font-size: 14px; }
Recompiled CSS with compass 1.0 Minor syntactical changes, like alphabetical ordering of filters, uppercasing of hex colours. See http://compass-style.org/blog/2014/08/15/omg-compass-1-0/. Shouldn't include any user-visible changes, but helps to avoid confusion with the next person trying to modify the CSS (Luke is currently struggling with that)
2014-10-15 23:33:49 +02:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button { background: none; border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; }
ENHANCEMENT: File/Image UI fixes * Replaced cancel/delete button in files area * Consolidated Image upload styles with AssetUpload styles * Changed name of step 2 in image upload * Made image editing hidden by default, so multiple files can be seen, and added ability top open and close * Tweaked styles in on page upload field (status colour and file name width)
2012-05-22 08:18:31 +02:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-delete { display: none; }
Recompiled CSS with compass 1.0 Minor syntactical changes, like alphabetical ordering of filters, uppercasing of hex colours. See http://compass-style.org/blog/2014/08/15/omg-compass-1-0/. Shouldn't include any user-visible changes, but helps to avoid confusion with the next person trying to modify the CSS (Luke is currently struggling with that)
2014-10-15 23:33:49 +02:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-cancel, .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-overwrite-warning { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border-left: 1px solid rgba(255, 255, 255, 0.2); margin-top: 0px; cursor: pointer; opacity: 0.9; }
NEW UploadField displays a warning before overwriting files (only relevant if config.yml: Upload:replaceFile = true).
2013-03-08 04:02:38 +01:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-cancel:hover, .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-overwrite-warning:hover { opacity: 1; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-cancel .ui-icon, .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-overwrite-warning .ui-icon { display: block; margin: 0; position: realtive; top: 8px; }
Recompiled CSS with compass 1.0 Minor syntactical changes, like alphabetical ordering of filters, uppercasing of hex colours. See http://compass-style.org/blog/2014/08/15/omg-compass-1-0/. Shouldn't include any user-visible changes, but helps to avoid confusion with the next person trying to modify the CSS (Luke is currently struggling with that)
2014-10-15 23:33:49 +02:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit { opacity: 0.9; padding-top: 1px; padding-bottom: 0; height: 100%; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
BUGFIXES: File Uploads * Add arrows back to edit-all toggle button * Don't show dimensions if the item being inserted doesn't have them. * Set pop-up windows to be a percentage of the window height for better use of space * Fix broken fieldholdersmall styling within files edit * Add placeholder if no preview *Take out minFileSize so upload will work on Android phones
2012-06-08 06:42:14 +02:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover { background: none; opacity: 1; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover span.toggle-details { opacity: 1; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit span.toggle-details { opacity: 0.9; margin-left: 3px; display: inline-block; width: 5px; height: 100%; cursor: pointer; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit 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-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit span.toggle-details .toggle-details-icon.opened { margin-top: 0; }
ENHANCEMENT: File/Image UI fixes * Replaced cancel/delete button in files area * Consolidated Image upload styles with AssetUpload styles * Changed name of step 2 in image upload * Made image editing hidden by default, so multiple files can be seen, and added ability top open and close * Tweaked styles in on page upload field (status colour and file name width)
2012-05-22 08:18:31 +02:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button .ui-icon { display: none; }
ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress { width: 100%; }
Recompiled CSS with compass 1.0 Minor syntactical changes, like alphabetical ordering of filters, uppercasing of hex colours. See http://compass-style.org/blog/2014/08/15/omg-compass-1-0/. Shouldn't include any user-visible changes, but helps to avoid confusion with the next person trying to modify the CSS (Luke is currently struggling with that)
2014-10-15 23:33:49 +02:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; height: 30px; padding: 0; margin: 0; overflow: hidden; width: 100%; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbar { background-color: #92a6b3; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzkyYTZiMyIvPjxzdG9wIG9mZnNldD0iMTElIiBzdG9wLWNvbG9yPSIjOTBhYWI4Ii8+PHN0b3Agb2Zmc2V0PSIyMiUiIHN0b3AtY29sb3I9IiM5NmIxYmYiLz48c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzllYjRjMSIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjYTdiYWM3Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYzFkNWRjIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(to bottom, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbarvalue { width: 0; background: #60b3dd url(../images/progressbar_blue.gif) repeat left center; }
.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; }
FIX: Defer loading of UploadField EditForm iframes (fixes #2711) Also addresses issue #1439. I don’t like the binding iframe.on('load') events in the onclick handler, but apparently Entwine doesn't support binding on iframes. AssetAdmin and HtmlEditorField support added
2013-12-12 14:17:57 +01:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform.loading { width: 100%; height: 22px; padding: 15px 0; background: url(../admin/images/spinner.gif) no-repeat 50% 50%; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform.loading iframe { /* Old IE needs this or it'll give the iframe a white background, covering the spinner */ padding-top: 0; margin-top: 37px; border: none; }
Fix: Incorrect calculation of UploadField height (fixes #2862)
2014-02-18 23:20:18 +01:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; padding: 16px; background: #E2E2E2; }
Update asset admin toolbar
2015-10-23 05:01:40 +02:00
.ss-assetuploadfield .ss-uploadfield-addfile { margin: 0; padding: 0; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { margin: 0; }
Move 'upload new file' section to main files area Optimise and fix drag drop on upload fields Combine 3 tabs from the 'insert media' dialog box into 1
2015-09-21 00:00:05 +02:00
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info > span { display: block; padding: 0; line-height: 1; color: #9ba5ae; margin-top: -12px; }
Update asset admin toolbar
2015-10-23 05:01:40 +02:00
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .upload-url::before { font-size: 23px; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { margin: 12px 2px; overflow: hidden; font-weight: normal; }
.ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { margin: 0 12px 0 0; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer::before { font-size: 23px; margin-right: 6px; }
Move 'upload new file' section to main files area Optimise and fix drag drop on upload fields Combine 3 tabs from the 'insert media' dialog box into 1
2015-09-21 00:00:05 +02:00
.ss-uploadfield-dropzone::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(236, 239, 241, 0.9) url("../admin/images/drag_drop_opt.svg") center center no-repeat; background-size: 312px 325px; z-index: 100; }
.ss-uploadfield-dropzone.active.hover::after { content: ''; }
Add "retina" styles for high-dpi screens
2014-08-24 19:59:26 +02:00
/** ---------------------------------------------------- "@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 */
Update 'spinner' to an SilverStripe branded version PSD: http://nickspiel.me/uploads/silverstripe-assets/spinner.psd
2014-12-05 12:35:22 +01:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform.loading { background-image: url(../admin/images/spinner@2x.gif); background-size: 43px 43px; } }
Update compass config - Add sourcemaps for debugging - More consistant builds across environments
2015-07-08 23:10:05 +02:00
/*# sourceMappingURL=AssetUploadField.css.map */
Reference in New Issue Copy Permalink