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
0808a1c21e
silverstripe-framework/css/AssetUploadField.css

74 lines
16 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 ------------------------------------------------ */
/** ----------------------------------------------- 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 ------------------------------------------------ */
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-uploadfield-view-allowed-extensions { padding-top: 20px; clear: both; max-width: 750px; display: block; }
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
#AssetUploadField { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
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
body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fieldset { padding: 16px; overflow: auto; background: #E2E2E2; }
body.cms.ss-uploadfield-edit-iframe span.readonly, .composite.ss-assetuploadfield .details fieldset span.readonly { font-style: italic; color: #777777; text-shadow: 0px 1px 0px #fff; }
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
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 h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px; padding: 0 0 7px; clear: both; position: relative; }
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; }
.ss-assetuploadfield .ss-uploadfield-item-actions.edit-all { clear: both; position: relative; z-index: 9; }
.ss-assetuploadfield .ss-uploadfield-item-actions.edit-all .ss-uploadfield-item-edit-all { z-index: 8; position: absolute; top: -33px; padding: 0; background: none; border: 0; right: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #444444; }
.ss-assetuploadfield .ss-uploadfield-item-actions.edit-all .ss-uploadfield-item-edit-all:hover { color: #1e7cba; }
.ss-assetuploadfield .ss-uploadfield-files { margin: 0; padding: 0; clear: both; }
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 { border: 1px solid #b3b3b3; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-background-clip: padding; -moz-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; }
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; 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: 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; padding-right: 130px; 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: 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%); }
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); }
ENHANCEMENT Message colours updated
2012-11-06 01:23:20 +01:00
.ss-assetuploadfield .ss-uploadfield-files .ui-state-warning .ss-uploadfield-item-info { background-color: #e09d66; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dbb99e), color-stop(8%, #d4ac8b), color-stop(50%, #ce9f78), color-stop(54%, #cd9d77), color-stop(96%, #d18261), color-stop(100%, #d27154)); background-image: -webkit-linear-gradient(top, #dbb99e 0%, #d4ac8b 8%, #ce9f78 50%, #cd9d77 54%, #d18261 96%, #d27154 100%); background-image: -moz-linear-gradient(top, #dbb99e 0%, #d4ac8b 8%, #ce9f78 50%, #cd9d77 54%, #d18261 96%, #d27154 100%); background-image: -o-linear-gradient(top, #dbb99e 0%, #d4ac8b 8%, #ce9f78 50%, #cd9d77 54%, #d18261 96%, #d27154 100%); background-image: linear-gradient(top, #dbb99e 0%, #d4ac8b 8%, #ce9f78 50%, #cd9d77 54%, #d18261 96%, #d27154 100%); }
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 { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 50%; color: #5e5e5e; background: #eeeded; background: rgba(255, 255, 255, 0.8); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; display: table; table-layout: fixed; }
.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); }
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 .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { max-width: 70%; position: absolute; right: 5px; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); color: #cc0000; }
ENHANCEMENT Message colours updated
2012-11-06 01:23:20 +01:00
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #d7823c; }
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 .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; }
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 { background: none; border: 0; -webkit-box-shadow: none; -moz-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; }
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-cancel { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; border-left: 1px solid rgba(255, 255, 255, 0.2); margin-top: 3px; cursor: pointer; opacity: 0.9; }
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-cancel:hover { opacity: 1; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-cancel .ui-icon { display: block; margin: 0; position: realtive; top: 4px; }
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 { opacity: 0.9; padding-top: 3px; padding-bottom: 0; height: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
.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%; }
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-progress div { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; height: 30px; padding: 0; margin: 0; overflow: hidden; width: 100%; }
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-progress .ss-uploadfield-item-progressbar { background-color: #92a6b3; 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: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #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; }
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
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
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-addfile .ss-uploadfield-item-info { float: left; margin: 34px 0 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-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { margin: 15px 0px 0 20px; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label { min-width: 250px; height: 30px; font-size: 14px; }
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-addfile .ss-uploadfield-item-info label.ui-state-focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
ENHANCEMENT Using native jQuery UI buttons and icon styling for a less coupled implementation (e.g. assuming that a "constructive" button always has a specific icon, or one at all). All CMS UI buttons switched to use <button> markup, which allows for inline icons and correctly aligned multi-line button labels.
2012-02-17 00:35:10 +01:00
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; }
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-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; margin-top: 16px; display: none; }
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-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { font-size: 18px; margin-top: 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-addfile .ss-uploadfield-dropzone { margin-top: 9px; -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; -o-border-radius: 13px; border-radius: 13px; -webkit-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; -moz-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 { -webkit-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; -moz-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; }
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-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; }
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-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { margin-top: 3px; height: 56px; width: 277px; overflow: hidden; }
.ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { background-position: 0 15px; }
.ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { height: 30px; font-size: 18px; line-height: 18px; }
Reference in New Issue Copy Permalink