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

46 lines
10 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 ------------------------------------------------ */
MINOR:css files regenerating from sass
2012-04-05 05:27:24 +02:00
#AssetUploadField { border-bottom: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
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
body.cms.ss-uploadfield-edit-iframe { padding: 16px; overflow: auto; }
BUGFIX: Fixes #7003 Changed the calculation of the iframe size so it would be the correct height. Altered the styles of the view details area to match design. Changed the background color of the title on the file header so it wouldn't look editable (as recommended by Felipe)
2012-04-18 05:11:18 +02:00
body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: #6a6a6a; }
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
BUGFIXES: Fixes #7003
2012-04-30 02:25:35 +02:00
.ss-uploadfield-edit-iframe { background: #E2E2E2; }
MINOR:css files regenerating from sass
2012-04-05 05:27:24 +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); -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; }
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; }
ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
.ss-assetuploadfield .ss-uploadfield-files { margin: 0; padding: 0; }
BUGFIXES: Fixes #7003
2012-04-30 02:25:35 +02:00
.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; }
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; }
.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%); }
BUGFIX: Fixes #7003 Changed the calculation of the iframe size so it would be the correct height. Altered the styles of the view details area to match design. Changed the background color of the title on the file header so it wouldn't look editable (as recommended by Felipe)
2012-04-18 05:11:18 +02:00
.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; }
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-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; }
MINOR:css files regenerating from sass
2012-04-05 05:27:24 +02:00
.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; }
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-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 .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%; }
MINOR:css files regenerating from sass
2012-04-05 05:27:24 +02:00
.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%; }
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-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: -ms-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%); }
.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-cancel { position: absolute; top: 7px; right: 7px; }
MINOR:css files regenerating from sass
2012-04-05 05:27:24 +02:00
.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; }
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-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 New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 19px 0 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-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; }
ENHANCEMENT New UploadField class to replace FileIframeField, ImageField and SimpleImageField
2012-02-03 00:59:40 +01:00
.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; }
MINOR:css files regenerating from sass
2012-04-05 05:27:24 +02:00
.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; }
BUGFIX: Fixes #6943 Added classes to dropzone when dragging and dropping files. Added styles to the dropzone when a file could be dropped. Added a clearfloat mixin to the mixins file.
2012-04-17 23:55:02 +02:00
.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; }
Reference in New Issue Copy Permalink