mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
2923787352
File icons have been updated for consistency and a StripThumbnail method added to File for icon display in gridfield instances (such as file selection interface)
401 lines
9.0 KiB
SCSS
401 lines
9.0 KiB
SCSS
@import "compass/css3";
|
|
|
|
|
|
// TODO we need a seperated file for styles that are used in both cms and front end (such as buttons)
|
|
@import "../admin/scss/themes/default.scss";
|
|
@import "../admin/scss/_mixins";
|
|
@import "_elementMixins";
|
|
|
|
// Temporary. To be hidden and replaced with javascript tooltip
|
|
.ss-uploadfield-view-allowed-extensions {
|
|
padding-top:5px;
|
|
clear:both;
|
|
max-width:750px;
|
|
display:block;
|
|
|
|
.toggle {
|
|
font-style: normal;
|
|
font-size: $font-base-size;
|
|
}
|
|
}
|
|
|
|
.backlink {
|
|
padding-left: 12px;
|
|
}
|
|
|
|
body.cms.ss-uploadfield-edit-iframe {
|
|
overflow: auto;
|
|
background: #E2E2E2;
|
|
|
|
span.readonly {
|
|
font-style:italic;
|
|
color:lighten($color-text, 20%);
|
|
text-shadow: 0px 1px 0px #fff;
|
|
}
|
|
.fieldholder-small{
|
|
|
|
label{
|
|
margin-left:0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.composite.ss-assetuploadfield .details fieldset {
|
|
@extend body.cms.ss-uploadfield-edit-iframe;
|
|
padding: $grid-x*2;
|
|
}
|
|
|
|
.ss-assetuploadfield {
|
|
border-bottom: 0;
|
|
@include box-shadow(none);
|
|
|
|
h3 {
|
|
border-bottom: 1px solid $color-shadow-light;
|
|
@include box-shadow(0 1px 0 lighten($color-shadow-light, 95%));
|
|
margin: 0 0 8px;
|
|
padding: 0 0 7px;
|
|
clear: both;
|
|
position:relative;
|
|
}
|
|
.field {
|
|
border-bottom: 0;
|
|
box-shadow:none;
|
|
}
|
|
.fileOverview{
|
|
clear:both;
|
|
margin-top:10px;
|
|
position:relative;
|
|
|
|
.uploadStatus{
|
|
@include clearfix;
|
|
.state{
|
|
float:left;
|
|
font-size: 16px;
|
|
font-weight:bold;
|
|
line-height:1.1em;
|
|
}
|
|
.details{
|
|
opacity:0.9;
|
|
float:right;
|
|
}
|
|
}
|
|
}
|
|
.ss-uploadfield-item-actions.edit-all{
|
|
clear:both;
|
|
position:relative;
|
|
z-index:9;
|
|
.ss-uploadfield-item-edit-all {
|
|
z-index:8;
|
|
position:absolute;
|
|
top:-33px;
|
|
padding:0;
|
|
background: none;
|
|
border: 0;
|
|
right:0;
|
|
@include box-shadow(none);
|
|
color: $color-text;
|
|
&:hover{
|
|
color: #1e7cba;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.ss-uploadfield-files {
|
|
margin: 0;
|
|
padding: 0;
|
|
clear:both;
|
|
|
|
.ss-uploadfield-item {
|
|
border: 1px solid lighten($color-medium-separator, 20%);
|
|
@include border-radius(5px);
|
|
@include background-clip(padding-box);
|
|
margin: 0 0 5px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
.info {
|
|
position: relative;
|
|
padding: 7px;
|
|
overflow: hidden;
|
|
background-color: #FFBE66;
|
|
border: 1px solid #FF9300;
|
|
}
|
|
}
|
|
.ss-uploadfield-item-preview {
|
|
position: absolute;
|
|
height: 30px;
|
|
width: 40px;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
// Prevent icons touching edge
|
|
img[src$="_32.png"] {
|
|
width: auto;
|
|
height: 26px;
|
|
margin: 2px 0 0 2px;
|
|
}
|
|
}
|
|
.ss-uploadfield-item-info {
|
|
position: relative;
|
|
line-height: 30px;
|
|
overflow: hidden;
|
|
background-color: #5db4df;
|
|
@include background-image(linear-gradient(top, #5db4df 0%,#5db1dd 8%,#439bcb 50%,#3f99cd 54%,#207db6 96%,#1e7cba 100%));
|
|
}
|
|
.ui-state-error .ss-uploadfield-item-info {
|
|
background-color: #c11f1d;
|
|
padding-right:130px;
|
|
@include background-image(linear-gradient(top, #c11f1d 0%,#bf1d1b 4%,#b71b1c 8%,#b61e1d 15%,#b11d1d 27%,#ab1d1c 31%,#a51b1b 42%,#9f1b19 46%,#9f1b19 50%,#991c1a 54%,#971a18 58%,#911b1b 62%,#911b1b 65%,#7e1816 88%,#771919 92%,#731817 100%));
|
|
|
|
.ss-uploadfield-item-name {
|
|
width:100%;
|
|
cursor:default;
|
|
background: darken($color-button-disabled,20%); //for browsers that don't support rgba
|
|
background: rgba(darken($color-button-disabled, 15%),0.9);
|
|
|
|
.name {
|
|
text-shadow: 0px 1px 0px rgba(#fff, 0.7);
|
|
}
|
|
}
|
|
}
|
|
.ui-state-warning .ss-uploadfield-item-info {
|
|
background-color: $color-warning;
|
|
@include background-image(
|
|
linear-gradient(
|
|
top,
|
|
desaturate(lighten($color-warning, 10%), 20%) 0%,
|
|
desaturate(lighten($color-warning, 5%), 20%) 8%,
|
|
desaturate($color-warning, 20%) 50%,
|
|
desaturate(darken(mix($color-warning, $color-button-destructive, 99%),0%), 20%) 54%,
|
|
desaturate(darken(mix($color-warning, $color-button-destructive, 80%),1%), 20%) 96%,
|
|
desaturate(darken(mix($color-warning, $color-button-destructive, 70%),2%), 20%) 100%)
|
|
);
|
|
}
|
|
|
|
.ss-uploadfield-item-name {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 3px 0 3px 50px;
|
|
width: 50%;
|
|
color:lighten($color-text, 10%);
|
|
background:$color-button-disabled; //for browsers that don't support rgba
|
|
background: rgba(#fff, 0.8);
|
|
@include border-radius(3px);
|
|
line-height: 24px;
|
|
height: 22px;
|
|
padding: 0 5px;
|
|
text-align: left;
|
|
cursor:pointer;
|
|
//display:table, and table-layout:fixed allows us to use percentages with text-overflow
|
|
display:table;
|
|
table-layout:fixed;
|
|
|
|
.name {
|
|
text-shadow: 0px 1px 0px rgba(#fff, 0.5);
|
|
display:inline;
|
|
float:left;
|
|
max-width:50%;
|
|
font-weight: normal;
|
|
padding: 0 5px 0 0;
|
|
@include hide-text-overflow;
|
|
}
|
|
.ss-uploadfield-item-status {
|
|
position:relative;
|
|
float: right;
|
|
padding: 0 0 0 5px;
|
|
max-width:30%;
|
|
@include hide-text-overflow;
|
|
text-shadow: 0px 1px 0px rgba(#fff, 0.5);
|
|
|
|
&.ui-state-error-text {
|
|
text-shadow: 0px 1px 0px rgba(#fff, 0.6);
|
|
color: darken($color-button-destructive, 10%);
|
|
}
|
|
&.ui-state-warning-text {
|
|
color: darken($color-warning, 10%);
|
|
}
|
|
&.ui-state-success-text {
|
|
color: $color-button-constructive;
|
|
}
|
|
}
|
|
}
|
|
.ss-uploadfield-item-actions {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
color: #f00;
|
|
@include ss-uploadfield-action-buttons;
|
|
font-size:14px;
|
|
}
|
|
|
|
.ss-uploadfield-item-progress {
|
|
width: 100%;
|
|
|
|
div {
|
|
@include border-radius(5px);
|
|
height: 30px;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
.ss-uploadfield-item-progressbar {
|
|
background-color: #92a6b3;
|
|
@include background-image(linear-gradient(top, #92a6b3 0%,#90aab8 11%,#96b1bf 22%,#9eb4c1 33%,#a7bac7 44%,#c1d5dc 100%));
|
|
}
|
|
.ss-uploadfield-item-progressbarvalue {
|
|
width: 0;
|
|
background: #60b3dd url(../images/progressbar_blue.gif) repeat left center;
|
|
}
|
|
}
|
|
|
|
.ss-uploadfield-item-editform {
|
|
/* don't use display none, for it will break jQuery('iframe').contents().height() */
|
|
height: 0;
|
|
overflow: hidden;
|
|
clear: both;
|
|
|
|
&.loading {
|
|
width: 100%;
|
|
height: 22px;
|
|
padding: 15px 0;
|
|
background: url(../admin/images/spinner.gif) no-repeat 50% 50%;
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
iframe {
|
|
width: 100%;
|
|
padding: $grid-x*2;
|
|
background: #E2E2E2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ss-uploadfield-addfile {
|
|
|
|
.ss-uploadfield-item-info {
|
|
float: left;
|
|
margin: 25px 0 0;
|
|
.ss-insert-media &{
|
|
margin: 10px 0px 0 20px;
|
|
}
|
|
label{
|
|
font-size: 18px;
|
|
line-height: 30px;
|
|
padding: 0px 16px;
|
|
margin-right:0px;
|
|
}
|
|
}
|
|
.ss-uploadfield-fromcomputer {
|
|
/*position: relative; */
|
|
overflow: hidden;
|
|
display: block;
|
|
.btn-icon-drive-upload-large {
|
|
background: url(../images/drive-upload-white.png) no-repeat 0px 0px;
|
|
width:32px;
|
|
height:32px;
|
|
margin-top:-12px;
|
|
}
|
|
}
|
|
.ss-uploadfield-item-uploador {
|
|
float: left;
|
|
font-weight: bold;
|
|
font-size: 22px;
|
|
padding: 0 20px;
|
|
line-height: 70px;
|
|
margin-top:10px;
|
|
display: none;
|
|
.ss-insert-media &{
|
|
font-size: 18px;
|
|
margin-top: -5px;
|
|
}
|
|
}
|
|
.ss-uploadfield-dropzone {
|
|
margin-top:9px;
|
|
padding: 8px 0;
|
|
@include border-radius(13px);
|
|
@include box-shadow(rgba($color-medium-separator, 0.4) 0 0 4px 0 inset, 0 1px 0 #FAFAFA);
|
|
border: 2px dashed $color-medium-separator;
|
|
background: lighten($color-base,12%);
|
|
display: none;
|
|
height: 54px;
|
|
min-width: 280px;
|
|
float: left;
|
|
text-align: center;
|
|
|
|
&.active{
|
|
&.hover{
|
|
@include box-shadow(rgba(#fff,0.6) 0 0 3px 2px inset);
|
|
}
|
|
}
|
|
div {
|
|
color:lighten($color-text, 10%);
|
|
text-shadow: 0px 1px 0px #fff;
|
|
background: url('../images/upload.png') 0 10px no-repeat;
|
|
z-index:1;
|
|
padding: 6px 48px 0;
|
|
line-height: 25px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
span {
|
|
display: block;
|
|
font-size: 12px;
|
|
z-index:-1;
|
|
margin-top:-3px;
|
|
}
|
|
}
|
|
.ss-insert-media &{
|
|
height: 54px;
|
|
min-width: 250px; //Design has these smaller than main upload area
|
|
overflow:hidden;
|
|
padding:0;
|
|
margin-top:2px;
|
|
div{
|
|
background-position:0 11px;
|
|
padding-top:21px;
|
|
margin-left: 33px;
|
|
span{
|
|
height:38px;
|
|
font-size:18px;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/** ----------------------------------------------------
|
|
* "@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 */
|
|
.ss-assetuploadfield {
|
|
.ss-uploadfield-files {
|
|
.ss-uploadfield-item-editform {
|
|
&.loading {
|
|
background-image: url(../admin/images/spinner@2x.gif);
|
|
background-size: 43px 43px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|