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
647f921c08
silverstripe-framework/css/UploadField.css

57 lines
11 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
*/
ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
.ss-uploadfield .clear { 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-uploadfield .middleColumn { min-width: 510px; max-width: 600px; width: 100%; margin-left: 0; clear: both; padding: 0; background: #fff; border: 1px solid #b3b3b3; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmZWZlZiIvPjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZmVmZWYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
.ss-uploadfield .ss-uploadfield-item { margin: 0; padding: 15px; overflow: auto; }
ENHANCEMENT: Design fixes in insert media pop-up * Apply design to insert media/image pop-up
2012-05-22 08:19:22 +02:00
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview { height: 60px; line-height: 60px; width: 80px; text-align: center; font-weight: bold; float: left; overflow: hidden; }
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-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview.ss-uploadfield-dropzone { -moz-box-shadow: #808080 0 0 4px 0 inset; -webkit-box-shadow: #808080 0 0 4px 0 inset; box-shadow: #808080 0 0 4px 0 inset; border: 2px dashed #808080; background: #d0d3d5; display: none; margin-right: 15px; }
API UploadField functions on new records Fixed regression from 1e5d40474d43ddb0ade22bbf7db5ec494b979fea (UploadField::canPreviewFolder). Merged in pull request #2009 - (6018bdd631ec98345bba5cd26ef5a29f6f412678). Merged pull request #1259 (34bfc862eee061ce30998a085aac6170022c3a7e).
2013-05-27 05:22:59 +02:00
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info { margin-left: 95px; }
ENHANCEMENT: Design fixes in insert media pop-up * Apply design to insert media/image pop-up
2012-05-22 08:19:22 +02:00
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name { display: block; line-height: 13px; height: 26px; margin: 0; text-align: left; }
API UploadField functions on new records Fixed regression from 1e5d40474d43ddb0ade22bbf7db5ec494b979fea (UploadField::canPreviewFolder). Merged in pull request #2009 - (6018bdd631ec98345bba5cd26ef5a29f6f412678). Merged pull request #1259 (34bfc862eee061ce30998a085aac6170022c3a7e).
2013-05-27 05:22:59 +02:00
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .name { max-width: 240px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; display: inline; float: left; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .size { color: #848484; padding: 0 0 0 5px; display: inline; float: left; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; text-align: right; max-width: 75%; }
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-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { color: #f00; font-weight: bold; width: 150px; }
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-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .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-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1F9433; }
FIX UploadField validation error and styles UploadField now return the validator's error message instead of 403. Plus nicer layout for error messages.
2013-08-20 17:51:32 +02:00
.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-preview { width: auto; height: auto; margin-right: 15px; }
.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info { margin-left: 0; }
.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { float: left; width: 70%; height: auto; }
.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .name { float: left; width: 100%; margin-bottom: 5px; }
.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status { float: left; width: 100%; padding: 0; text-align: left; }
.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-actions { float: right; width: 5%; min-height: 0; margin: 0; }
.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-actions .ss-uploadfield-item-cancel { position: relative; top: auto; }
API UploadField functions on new records Fixed regression from 1e5d40474d43ddb0ade22bbf7db5ec494b979fea (UploadField::canPreviewFolder). Merged in pull request #2009 - (6018bdd631ec98345bba5cd26ef5a29f6f412678). Merged pull request #1259 (34bfc862eee061ce30998a085aac6170022c3a7e).
2013-05-27 05:22:59 +02:00
.ss-uploadfield .ss-ui-button { display: block; float: left; margin: 0 10px 6px 0; }
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-uploadfield .ss-ui-button.ss-uploadfield-fromcomputer { position: relative; overflow: hidden; }
BUGFIX: Uploads save button not visible (Trac #7294) Fixed the calculation of height for the upload (non AssetUploads) area so that the save button would show. Took off the min-height, as this will cause UI issues when there are multiple files open for editing.
2012-05-10 06:47:52 +02:00
.ss-uploadfield .ss-uploadfield-files { margin: 0; padding: 0; overflow: auto; position: relative; }
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-uploadfield .ss-uploadfield-files .ss-uploadfield-item, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item.ui-state-error { border: 0; border-bottom: 1px solid #b3b3b3; background: none; color: #444; }
ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item:last-child, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item.ui-state-error:last-child { border-bottom: 0; }
API UploadField functions on new records Fixed regression from 1e5d40474d43ddb0ade22bbf7db5ec494b979fea (UploadField::canPreviewFolder). Merged in pull request #2009 - (6018bdd631ec98345bba5cd26ef5a29f6f412678). Merged pull request #1259 (34bfc862eee061ce30998a085aac6170022c3a7e).
2013-05-27 05:22:59 +02:00
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { min-height: 28px; overflow: hidden; margin: 6px 0 -6px 0; position: relative; }
ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progress { position: absolute; left: 0; right: 42px; width: auto; margin: 11px 0 0; height: 15px; }
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-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; height: 13px; padding: 0; margin: 0; overflow: hidden; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbar { border: 1px solid #808080; 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-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbarvalue { border: 0; width: 0%; background: #60b3dd url(../images/progressbar_blue.gif) repeat-x left center; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { position: absolute; top: 10px; right: 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-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: 0px 5px #333333; -webkit-box-shadow: 0px 5px #333333; box-shadow: 0px 5px #333333; position: relative; }
MINOR: fixed missing cancel icon
2012-05-13 21:05:30 +02:00
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button span, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button span { position: absolute; left: 0; top: 0; margin: 0; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button span.ui-button-text, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button span.ui-button-text { display: none; }
ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { right: 20px; }
MINOR More generic CSS styles for .cms-file-info: Apply to form.small parent, fixed related UploadField spacing issues
2012-03-01 11:57:35 +01:00
.ss-uploadfield .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-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform.loading { width: 100%; height: 22px; margin: 15px 0 0; background: url(../admin/images/spinner.gif) no-repeat 50% 0; }
.ss-uploadfield .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: 22px; border: none; }
Side-by-side preview browser compatibility fixes.
2012-12-04 06:10:20 +01:00
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { margin-top: 8px; padding-top: 8px; border-top: 1px solid #d0d3d5; width: 100%; }
ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
.ss-uploadfield .ss-uploadfield-addfile.borderTop { border-top: 1px solid #b3b3b3; }
.ss-upload .clear { clear: both; }
FIX UploadField: IE10 single click for upload trigger Fixes https://github.com/silverstripe/silverstripe-cms/issues/644. See https://github.com/blueimp/jQuery-File-Upload/commit/d45deb15f4934f7a2bce03040c879aca8eaa9c8a
2013-06-25 15:21:55 +02:00
.ss-upload .ss-uploadfield-fromcomputer input { /* since we can't really style the file input, we use this hack to make it as big as the button and hide it */ position: absolute; top: 0; right: 0; margin: 0; opacity: 0; filter: alpha(opacity=0); transform: translate(-300px, 0) scale(4); font-size: 23px; direction: ltr; cursor: pointer; height: 30px; line-height: 30px; }
NEW: Show loading indicator when attaching files to UploadField
2014-03-03 22:27:45 +01:00
.ss-upload .loader { height: 94px; background: transparent url(../admin/images/spinner.gif) no-repeat 50% 50%; }
Reference in New Issue Copy Permalink