%PDF-
%PDF-
Mini Shell
Mini Shell
/* Contains all css related to using com_files, do not namespace this file as it has its own namespace */
@import 'variables.less';
@import 'mixins.less';
.linear-gradient (@from: hsla(0, 0%, 100%, 0.5), @to: hsla(0, 0%, 0%, 0.5)) {
@fromAlphaFromFloat: ~`Math.round(parseFloat("@{from}".split(',')[3])*255)`;
@fromAlphaToHex: ~`(parseInt("@{fromAlphaFromFloat}", 10) > 255 ? 255 : (parseInt("@{fromAlphaFromFloat}", 10) < 0 ? 0 : parseInt("@{fromAlphaFromFloat}", 10))).toString(16).toUpperCase()`;
@fromAlpha: ~`"@{from}".length != 7 ? ("@{fromAlphaToHex}".length === 1 ? '0' + "@{fromAlphaToHex}" : "@{fromAlphaToHex}") : ''`;
@fromOpaqueToHex: fadein(@from, 100%);
@fromOpaque: ~`"@{fromOpaqueToHex}".replace("#", "").toUpperCase()`;
@toAlphaFromFloat: ~`Math.round(parseFloat("@{to}".split(',')[3])*255)`;
@toAlphaToHex: ~`(parseInt("@{toAlphaFromFloat}", 10) > 255 ? 255 : (parseInt("@{toAlphaFromFloat}", 10) < 0 ? 0 : parseInt("@{toAlphaFromFloat}", 10))).toString(16).toUpperCase()`;
@toAlpha: ~`"@{to}".length != 7 ? ("@{toAlphaToHex}".length === 1 ? '0' + "@{toAlphaToHex}" : "@{toAlphaToHex}") : ''`;
@toOpaqueToHex: fadein(@to, 100%);
@toOpaque: ~`"@{toOpaqueToHex}".replace("#", "").toUpperCase()`;
background-image: -moz-linear-gradient(top, @from, @to); // FF 3.6+
background-image: -ms-linear-gradient(top, @from, @to); // IE10
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@from), to(@to)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @from, @to); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @from, @to); // Opera 11.10
background-image: linear-gradient(top, @from, @to); // The standard
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#@{fromAlpha}@{fromOpaque}', endColorstr='#@{toAlpha}@{toOpaque}')";
}
.radial-elliptical-gradient(@innerColor, @centerColor, @outerColor: false, @fallbackColor: whiteSmoke, @canvasColor: white) when (iscolor(@outerColor)) {
background-color: @fallbackColor;
background: @canvasColor -webkit-radial-gradient(ellipse closest-corner, @innerColor, @centerColor, @outerColor);
background: @canvasColor -moz-radial-gradient(ellipse closest-corner, @innerColor, @centerColor, @outerColor);
background: @canvasColor -o-radial-gradient(ellipse closest-corner, @innerColor, @centerColor, @outerColor);
background: @canvasColor -ms-radial-gradient(ellipse closest-corner, @innerColor, @centerColor, @outerColor);
background: @canvasColor radial-gradient(ellipse closest-corner, @innerColor, @centerColor, @outerColor);
background-repeat: no-repeat;
}
.radial-elliptical-gradient(@innerColor, @outerColor, @fallbackColor: whiteSmoke, @canvasColor: white) when (iscolor(@outerColor)) {
background-color: @fallbackColor;
background: @canvasColor -webkit-radial-gradient(ellipse closest-corner, @innerColor, @outerColor);
background: @canvasColor -moz-radial-gradient(ellipse closest-corner, @innerColor, @outerColor);
background: @canvasColor -o-radial-gradient(ellipse closest-corner, @innerColor, @outerColor);
background: @canvasColor -ms-radial-gradient(ellipse closest-corner, @innerColor, @outerColor);
background: @canvasColor radial-gradient(ellipse closest-corner, @innerColor, @outerColor);
background-repeat: no-repeat;
}
/* Joomla Specific Styling */
#element-box {
margin-top: 0;
}
#element-box #files-sidebar {
float:left;
width:260px;
}
#element-box #files-canvas {
float:none;
margin-left:260px;
border-left:1px solid #dddddd;
}
#files-container {
min-height: 218px;
}
#files-canvas .path {
padding: 10px;
background-color: #F7F7F7;
border-bottom: 1px solid #E1E1E1;
font-size: 12px;
}
#files-canvas .view {
display: block;
margin: 0;
padding: 0;
background-color: #FFF;
}
.com_files {
background-color: #f7f7f7;
border: 1px solid #dbdbdb;
.border-radius(2px);
}
.table-pagination {
margin-bottom: 0;
.container {
width: auto;
margin-right: auto;
margin-left: auto;
.pagination {
display: inline-block;
padding: 0;
margin: 0 auto;
}
}
select {
vertical-align: 1%;
font-size: inherit;
width: auto;
line-height: 20px;
height: 20px;
margin: 0;
padding: 0;
margin-top: 0.1em;
}
/* To avoid ugly white borders due to background images expecting a white background */
.button2-right div,
.button2-left div,
.button2-right,
.button2-left,
a {
.border-radius(5px);
}
.button2-right div {
.border-radius(5px);
}
}
/* @group from docman _admin.less */
#files-sidebar {
h3 {
background-color: @grayLighter;
padding: 3px 8px;
line-height: 18px;
border-bottom: 1px solid @tableBorder;
font-size: 11px;
text-transform: uppercase;
color: #666;
text-shadow: white 0 1px 0;
margin: 0;
}
}
#files-app {
h3 {
display: inline-block;
padding: 4px 2px;
margin: 0;
}
#files-grid {
min-height: 300px;
thead {
//Checkall box, we need it to expand to fill the th element
th:first-child {
padding: 0;
.btn.dropdown-toggle {
.buttonBackground(hsl(0, 0%, 95%), hsl(0, 0%, 90%));
}
}
th:nth-child(3) {
padding-left: 0px;
}
}
tbody tr.files-node {
//Image column @TODO implement class hooks instead of using nth-child selectors
td:nth-child(2) {
padding-right: 0px;
img {
height: auto!important;
width: 32px;
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}
}
td:nth-child(3) {
padding-left: 0px;
}
&.files-folder {
td:nth-child(2) {
padding-top: 4px;
padding-bottom: 4px;
}
}
&.files-file {
td:nth-child(2) {
padding-top: 4px;
padding-bottom: 4px;
}
}
td:nth-child(1) {
padding-left: 10px;
}
}
}
#files-canvas {
/* Some admin templates give this unwanted styling */
.navigate .spinner {
display: none;
}
.thumbnails {
margin-left: 0px; //This is due to a small conflict with bootstrap/thumbnails.less
}
.selected td {
background: @btnPrimaryBackgroundHighlight;
&, & a {
color: white;
}
}
.path {
.clearfix();
border-bottom: 1px solid #D9D9D9;
background-color: @grayLighter;
#gradient > .vertical(#f7f7f7, #F2F2F2);
height: 24px;
overflow: visible;
padding: 0;
#files-pathway {
color: #333;
text-shadow: white 0 1px 0;
float: left;
font-size: 13px;
font-weight: bold;
line-height: 25px;
margin: 0;
.breadcrumb {
background-color: inherit;
}
.divider {
display: inline-block;
height: 18px;
padding: 0 6px;
background: url(../../com_files/images/arrow.png) no-repeat 0 0;
}
}
.files-toolbar-controls {
padding: 1px 0px 2px 1px;
button {
padding: 0px 10px;
//border-top: none;
//border-bottom: none;
//.border-radius(0);
margin: 0;
&:first-child {
//border-left: none;
}
& + .btn {
margin-left: -1px;
}
}
}
.files-layout-controls {
float: right;
.files-layout-switcher {
padding: 4px 10px 5px;
border-top: none;
border-bottom: none;
.border-radius(0);
margin: 0;
i {
opacity: 0.6;
}
&.active i, &:active i {
opacity: 1;
}
&:last-child {
border-right: none;
}
& + .btn {
margin-left: -1px;
}
}
}
}
}
}
/* @end */
/* @group jquery.plupload.queue.css */
@pluploadLocation: '../../../../media/com_files/plupload/jquery.plupload.queue/img/';
.plupload_button {
display: -moz-inline-box; /* FF < 3*/
display: inline-block;
font: normal 12px sans-serif;
text-decoration: none;
color: #42454a;
border: 1px solid #bababa;
padding: 2px 8px 3px 20px;
margin-right: 4px;
background: #f3f3f3 url('@{pluploadLocation}buttons.png') no-repeat 0 center;
outline: 0;
.border-radius(3px);
}
.plupload_button:hover {
color: #000;
text-decoration: none;
}
.plupload_disabled, a.plupload_disabled:hover {
color: #737373;
border-color: #c5c5c5;
background: #ededed url('@{pluploadLocation}buttons-disabled.png') no-repeat 0 center;
cursor: default;
}
.plupload_add {
background-position: -181px center;
}
.plupload_wrapper {
font: normal 11px Verdana,sans-serif;
width: 100%;
}
.plupload_container {
padding: 8px;
/*-moz-border-radius: 5px;*/
}
.plupload_container input {
border: 1px solid #DDD;
font: normal 11px Verdana,sans-serif;
width: 98%;
}
.plupload_header {background: #2A2C2E url('@{pluploadLocation}backgrounds.gif') repeat-x;}
.plupload_header_content {
background: url('@{pluploadLocation}backgrounds.gif') no-repeat 0 -317px;
min-height: 56px;
padding-left: 60px;
color: #FFF;
}
.plupload_header_title {
font: normal 18px sans-serif;
padding: 6px 0 3px;
}
.plupload_header_text {
font: normal 12px sans-serif;
}
.plupload_filelist {
margin: 0;
padding: 0;
list-style: none;
}
.plupload_scroll .plupload_filelist {
height: 185px;
background: #F5F5F5;
overflow-y: scroll;
}
.plupload_filelist li {
padding: 10px 8px;
background: #F5F5F5 url('@{pluploadLocation}backgrounds.gif') repeat-x 0 -156px;
border-bottom: 1px solid #DDD;
}
.plupload_filelist_header, .plupload_filelist_footer {
background: #DFDFDF;
padding: 8px 8px;
color: #42454A;
}
.plupload_filelist_header {
border-top: 1px solid #EEE;
border-bottom: 1px solid #CDCDCD;
}
.plupload_filelist_footer {border-top: 1px solid #FFF; height: 22px; line-height: 20px; vertical-align: middle;}
.plupload_file_name {float: left; overflow: hidden}
.plupload_file_status {color: #777;}
.plupload_file_status span {color: #42454A;}
.plupload_file_size, .plupload_file_status, .plupload_progress {
float: right;
width: 80px;
}
.plupload_file_size, .plupload_file_status, .plupload_file_action {text-align: right;}
.plupload_filelist .plupload_file_name {width: 205px}
.plupload_file_action {
float: right;
width: 16px;
height: 16px;
margin-left: 15px;
}
.plupload_file_action * {
display: none;
width: 16px;
height: 16px;
}
li.plupload_uploading {background: #ECF3DC url('@{pluploadLocation}backgrounds.gif') repeat-x 0 -238px;}
li.plupload_done {color:#AAA}
li.plupload_delete a {
background: url('@{pluploadLocation}delete.gif');
}
li.plupload_failed a {
background: url('@{pluploadLocation}error.gif');
cursor: default;
}
li.plupload_done a {
background: url('@{pluploadLocation}done.gif');
cursor: default;
}
.plupload_progress, .plupload_upload_status {
display: none;
}
.plupload_progress_container {
margin-top: 3px;
border: 1px solid #CCC;
background: #FFF;
padding: 1px;
}
.plupload_progress_bar {
width: 0px;
height: 7px;
background: #CDEB8B;
}
.plupload_scroll .plupload_filelist_header .plupload_file_action, .plupload_scroll .plupload_filelist_footer .plupload_file_action {
margin-right: 17px;
}
/* Floats */
.plupload_clear,.plupload_clearer {clear: both;}
.plupload_clearer, .plupload_progress_bar {
display: block;
font-size: 0;
line-height: 0;
}
li.plupload_droptext {
background: transparent;
text-align: center;
vertical-align: middle;
border: 0;
line-height: 165px;
}
/* @end */
/* @group plupload.css */
/* For drag and drop */
.dragover {
opacity: 0.5;
}
#uploads .upload {
padding: 4px;
}
/**
* Upload Widget CSS
*/
#files-upload {
padding: 0;
margin: 0;
overflow: hidden;
h3 {
padding: 15px 0 0 15px;
margin: 0 !important;
display: block;
float: left;
font-size: 18px;
}
}
#files-upload-controls {
.upload-buttons {
padding: 0;
list-style: none;
float: left;
margin: 10px 0 0 20px;
li {
display: inline;
font-size: 12px;
&:first-child {
padding-right: 5px;
}
a {
font-weight: bold;
padding: 5px 10px 10px;
display: inline-block;
position: relative;
&.active,
&.active:hover {
color: #3c3c3c;
}
&,
&:hover,
&:visited {
color: @linkColor;
}
&,
&:hover,
&:active,
&.active {
text-decoration: none;
background: none;
}
&.active::after,
&.active::before {
content: '.';
color: transparent;
border-color: transparent transparent hsl(0, 0%, 99%) transparent;
border-style: solid;
border-width: 8px;
height: 0;
width: 0;
position: absolute;
bottom: -1px;
left: 50%;
margin-left: -8px;
z-index: 1;
}
&.active::before {
bottom: 0;
border-bottom-color: #E6E6E6;
}
}
}
}
}
.uploader-files-queued #files-upload-controls .upload-buttons li a.active.target-computer::after {
border-bottom-color: white;
}
.upload-form {
margin-bottom: 10px;
position: relative;
}
.uploader-files-queued #files-upload-multi, #files-uploader-web form, .dropzone {
padding: 0;
background-color: hsl(0, 0%, 99%);
border-radius: 5px;
margin: 0 10px;
border: 1px solid hsl(0, 0%, 90%);
z-index: 0;
}
.uploader-files-queued .dropzone, .uploader-files-queued .nodropzone {
display: none!important;
}
.dropzone h2 {
text-align: center;
font-weight: 100;
color: #595959;
font-size: 30px;
margin: 100px 0;
}
#files-upload .nodropzone {
display: inline-block;
float: none;
position: relative;
top: -9px;
padding: 0;
font-weight: normal;
color: #595959;
font-size: 15px;
}
.uploader-files-empty .upload-form {
text-align: center;
}
.uploader-files-empty #files-upload-multi {
display: inline-block;
}
#files-upload-multi .warning {
display: block;
float: none;
padding: 1em 0.4em;
font-size: 1.4em;
text-align: center;
}
#files-uploader-web form {
padding: 2px;
}
#files-upload-multi .plupload_container {
padding: 0px;
}
/* blur focus fix */
#files-uploader-web input:focus {
z-index: 1;
position: relative;
}
#files-uploader-web input.success {
.placeholder(@successText);
}
#files-upload-multi .plupload_filelist_header, #files-upload-multi .plupload_filelist_footer {
background: none;
}
#files-upload-multi .plupload_filelist_header {
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top: none;
box-shadow: hsl(0, 0%, 97%) 0 -1px 0 inset;
border-bottom: 1px solid hsl(0, 0%, 90%);
.linear-gradient(white, whitesmoke);
}
#files-upload-multi .plupload_filelist_footer {
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
border-top: none;
box-shadow: 0 -1px 0 hsl(0, 0%, 90%);
}
.uploader-files-empty #files-upload-multi .plupload_filelist_footer {
border: 0 hidden transparent;
box-shadow: none;
}
#files-upload-multi .plupload_scroll .plupload_filelist {
background: none;
}
#files-upload-multi .plupload_filelist {
list-style: none;
margin: 0;
padding: 0;
}
#files-upload-multi .plupload_filelist li {
background: none;
line-height: normal;
margin: 0;
padding: 10px 8px;
}
#files-upload-multi .plupload_filelist .plupload_file_name {
/*width: 471px;*/
width: 453px;
}
#upload-max {
font-size: 11px!important;
padding-top: 6px;
margin-left: 30px;
color: #444;
}
#upload-progress {
float: right;
margin: 8px 20px 0 0;
}
#upload-queue {
list-style: none;
clear:both;
padding:0;
margin: 0;
background-color: #FFF;
width: 100%;
}
#upload-queue tr.validation-error {
background-color: #E6C0C0;
color: #c00;
border-top: 1px solid #E1E1E1;
border-bottom: 1px solid #E1E1E1;
padding: 4px;
}
#upload-queue tr.file {
overflow: auto;
padding: 4px;
border-bottom: 1px solid #E1E1E1;
height: 20px;
}
#upload-queue tr.file:nth-child(2) {
border-top: 1px solid #E1E1E1;
}
#upload-queue tr.file:nth-child(odd) {
background-color: #F9F9F9;
}
#upload-queue tr.file.file-uploading {
background-color: #D9DDE9;
}
#upload-queue tr.file.file-success {
background-color: #C3D2E5;
}
#upload-queue tr.file.file-failed {
background-color: #E6C0C0;
}
#upload-queue tr.file .file-name {
font-weight: bold;
}
#upload-queue tr.file .file-remove {
width: 75px;
text-align: center;
}
#upload-queue tr.file .file-size {
width: 75px;
text-align: right;
}
#upload-queue tr.file .file-info {
}
div#files-noimages {
width: 100%;
text-align:center;
font-weight:bold;
color:#CCCCCC;
}
div#upload-queue-wrapper {
background-color: #CCC;
border-radius: 5px;
}
/* @group Style for the custom modal stuff */
.files-modal {
padding: 5px;
.upload-files-to {
margin-bottom: 5px;
}
form {
margin-bottom: 0px;
}
}
/* @end */
/* @group Uploader - Computer */
#files-upload.uploader-files-queued {
.plupload_filelist_footer {
height: auto;
padding-bottom: 54px;
position: relative;
.plupload_buttons {
position: absolute;
box-shadow: 0 -1px 0 hsl(0, 0%, 90%);
bottom: 0px;
left: 0px;
right: 0px;
padding: 10px;
}
}
.plupload_start, .plupload_clear {
float: right;
clear: none;
}
.plupload_clear {
margin-right: 10px;
}
.plupload_start {
&.plupload_disabled {
cursor: default;
background-color: darken(@white, 10%);
background-image: none;
.opacity(65);
.box-shadow(none);
background-color: @btnPrimaryBackgroundHighlight;
*background-color: darken(@btnPrimaryBackgroundHighlight, 5%);
}
}
}
#files-upload.uploader-files-empty {
/* No files state, this is the initial state */
.plupload_filelist_header,
.plupload_start,
.plupload_clear,
.plupload_filelist,
.plupload_file_action,
.plupload_file_status,
.plupload_file_size,
.plupload_progress {
display: none;
}
.plupload_add {
}
}
/* @end */
/* @group Uploader - Web */
#remote-url, #remote-name {
.box-sizing(border-box);
display: block;
float: left;
margin: 0;
border-style: none;
.border-radius(0px);
height: @baseLineHeight + 8px; // bottom + top paddding
}
#remote-url {
width: 75%;
border-right-color: #e6e6e6;
}
#remote-name {
width: 25%;
border-left-color: #e6e6e6;
border-left-width: 1px;
border-left-style: solid;
border-left-color: inherit;
}
.remote-wrap {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border: 1px solid hsl(0, 0%, 90%);
border-right-width: 0;
}
.remote-wrap::after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
#files-uploader-web .remote-submit {
//@TODO rename buttons in the markup to use .btn
position: absolute;
right: 2px;
top: 2px;
bottom: 2px;
margin: 0;
.border-radius(0px);
.border-top-right-radius(2px);
.border-bottom-right-radius(2px);
overflow: hidden;
display: inline-block;
height: @baseLineHeight + 10px; // bottom + top paddding and borders
}
#files-uploader-web input.remote-submit:focus {
position: absolute;
}
#files-uploader-web .remote-submit.valid {
//@TODO rename buttons in the markup to use .btn-primary
}
#files-uploader-web form {
position: relative;
}
/* admin template form overrides is breaking the text input styling for span5 */
#files-new-folder-create {
margin: 0;
}
/* @end */
/* @group Modal */
.files-preview {
display: inline-block;
overflow: hidden;
padding: 10px;
.preview, .details, ul {
display: block;
float: left;
}
ul {
clear: left;
list-style: none;
padding: 0;
margin-bottom: 0;
}
.name {
max-width: 400px;
text-overflow: ellipsis;
overflow: hidden;
white-space: pre;
}
h3, a {
margin: 11px 0;
display: block;
}
.label {
display: inline-block;
text-align: right;
width: 60px;
text-transform: capitalize;
&::after {
content: ':';
}
}
}
/* @end */
/* @end */
/* @group files-compact.css */
@modalWidth: 690px;
table td.file-count, table th.file-count {
text-align: center;
width: 10px;
}
table th.file-count {
text-align: right;
padding-right: 20px;
}
.files-modal {
margin: 0;
padding: 3px;
.input-append {
margin-bottom: 0;
}
.span2 {
width: 120px;
}
&.well {
padding: 10px;
h3 {
padding: 0 0 0 0;
margin: 10px 0!important;
display: block;
float: left;
font-size: 18px;
line-height: 20px;
width: 447px; //To avoid issues when opening and closing the modal multiple times
word-break: break-word;
}
}
}
#files-compact {
& {
width: @modalWidth; /* Mozilla needs this */
overflow: hidden;
}
& > * {
background-color: #F9F9F9;
}
#insert {
& {
border: 1px solid #E1E1E1;
background-color: #FFF;
overflow: hidden;
}
.hide {
display: none;
}
#details {
overflow: hidden;
height: 389px;
background-color: #F4F4F4;
position: relative;
}
#files-tree-container {
width: 200px;
}
#files-grid {
width: 264px;
}
#files-container {
width: 200px;
}
#details,
#files-preview {
width: 200px;
tr:last-child td {
border-bottom: 1px #E1E1E1 solid;
}
img.icon {
margin: 10px;
}
}
#files-tree-container,
#files-grid
{ border-right: 1px solid #E1E1E1; height: 389px; overflow: auto;}
#files-preview {
background: white;
margin-bottom: 10px;
}
ul {
list-style-type: none;
}
}
#files-uploader-web {
form {
@padding: 5px;
padding: @padding;
.remote-wrap {
}
#remote-url, #remote-name {
height: 28px;
.box-sizing(border-box);
}
#remote-url {
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
}
#remote-name {
.border-radius(0);
}
.remote-submit {
top: @padding;
right: @padding;
bottom: @padding;
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
&.valid {
//.buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
}
}
}
}
/* tabs */
dl.tabs {
float: left;
margin: 10px 0 0 0;
z-index: 50;
background: none;
dt {
float: left;
padding: 6px 14px;
border: 1px solid #ccc;
margin-left: 6px;
background: #f0f0f0;
color: #666;
.border-radius(5px 5px 0 0);
margin-bottom: -1px;
&:hover {
background: #F6F6F6;
z-index: 100;
color: #333;
}
&:active,
&.open,
&.open:active {
background: #F9F9F9;
z-index: 100;
color: #333;
border-bottom-color: #F9F9F9;
.box-shadow(inset hsla(0, 0%, 55%, 0.20) 0px 2px 2px);
}
&:active {
background: #EEE;
border-bottom-color: #CCC;
}
}
}
div.current {
clear: both;
border: 1px solid #CCC;
padding: 10px 10px;
}
div.current dd {
padding: 0;
margin: 0;
line-height: normal !important;
}
/** Joomla fixes */
div.current input, div.current textarea, div.current select {
margin: 0;
}
.parameters .detail-label {
text-align: right;
color: gray;
}
}
/* @end */
/* @group files-layout-icons.css */
#files-app
{
@comFilesLocation: '../../../../media/com_files/images/';
#files-grid {
min-height: 120px;
overflow: hidden;
}
#files-grid > div {
padding: 10px;
}
.spinner {
padding: 0px!important;
}
.files-node-shadow {
float: left;
text-align: center;
}
div.imgOutline {
cursor: pointer;
display: inline-block;
border: 1px;
padding: 11px;
margin: 5px;
border: 1px solid hsl(0, 0%, 90%);
border-radius: 3px;
.transition(opacity 150ms ease-out);
}
#files-grid .loading {
opacity: 0.6;
}
#files-grid .loaded {
opacity: 1;
}
div.imgOutline img {
opacity: 0;
.transition(opacity 150ms ease-out);
}
div.imgOutline img.loaded {
opacity: 1;
}
div.imgOutline .ellipsis {
max-width: 200px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 17px;
}
div.imgOutline.selected {
color: white;
border-color: mix(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight, 50%);
border-color: hsla(0, 0%, 0%, .1);
background-color: mix(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight, 50%);
background-clip: border-box;
background-origin: border-box;
text-shadow: hsla(0, 0%, 0%, 0.3) 0 -1px 0;
.box-shadow(hsla(0, 0%, 100%, 0.2) 0 1px 0 inset);
#gradient .vertical(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
}
div.imgTotal {
position: relative;
margin: 0 0 8px 0;
overflow: hidden;
width: 200px;
height: 150px;
.radial-elliptical-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1) 1%, rgba(0, 0, 0, 0.1));
}
div.imgOutline.selected div.imgTotal {
.radial-elliptical-gradient(rgba(255, 255, 255, 0.2), hsla(hue(@linkColor), saturation(@linkColor), 50%, 0.2));
}
div.imgTotal a.navigate {
display: block;
background: no-repeat center center;
position: relative;
overflow: hidden;
width: inherit;
height: inherit;
}
div.imgTotal a.navigate::after {
.box-shadow(0 0 2px rgba(0, 0, 0, .20) inset);
content: '';
height: inherit;
display: block;
position: absolute;
top: 0;
width: inherit;
}
div.imgOutline.selected div.imgTotal a.navigate::after {
.box-shadow(0 0 3px rgba(0, 0, 0, 0.3) inset);
}
div.imgTotal a.navigate img {
width: 100%;
}
.files-folder div.imgTotal a.navigate {
background-image: url('@{comFilesLocation}folder-64.png');
}
.files-file div.imgTotal a.navigate,
.files-image.nothumbnails div.imgTotal a.navigate {
background-image: url('@{comFilesLocation}document-64.png');
}
.files-image.thumbnails div.imgTotal a.navigate {
display: table-cell;
vertical-align: middle;
text-align: center;
background: url('@{comFilesLocation}checker.png') repeat left top white;
}
div.imgBorder {
height: 72px;
vertical-align: middle;
width: 88px;
overflow: hidden;
}
div.imgBorder a {
height: 72px;
width: 88px;
display: block;
}
div.imgBorder a:hover {
height: 72px;
width: 88px;
background-color: #f0f0f0;
color : #FF6600;
}
.imgBorderHover {
background: #FFFFCC;
cursor: hand;
}
div.controls {
text-align: center;
height: 20px;
line-height: 20px;
background: #f9fcf9;
border-top: 1px solid #ddd;
input {
vertical-align: middle;
}
img {
vertical-align: middle;
}
&:hover {
display: block;
}
}
div.imginfoBorder {
background: #f9f9f9;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
display: block;
height: 15px;
vertical-align: middle;
text-align: center;
overflow: hidden;
padding: 0 8px;
}
div.imgBorder a {
cursor: pointer;
}
.buttonHover {
border: 1px solid;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
cursor: hand;
background: #FFFFCC;
}
.buttonOut {
border: 0px;
}
.imgCaption {
font-size: 9pt;
text-align: center;
}
.dirField {
font-size: 9pt;
width:110px;
}
div.image {
padding-top: 10px;
}
.imgBorder a.navigate {
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
}
/* @end */
/* Global overrides are in this file */
/* @group _global_overrides.less */
/* @NOTE this fixes ugly scrollbars in animations */
#sbox-content {
overflow: hidden;
}
/* @NOTE default border-radius is horrendous */
#sbox-window {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
.well {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
}
/* @NOTE the following code makes sure that the flash adapter of plupload does not break when the modal is closed */
.uploader-flash-container object, .uploader-flash-container embed {
display: block !important;
visibility: visible!important;
}
/* @end */
///* @group Breadcrumb customization */
.breadcrumb-resizable {
overflow: hidden;
margin: 0;
padding: 2.5px 0px;
line-height: 18px;
li {
max-height: 23px;
display: inline-block;
overflow: hidden;
.user-select(none);
cursor: pointer;
padding: 0;
span {
display: inline-block;
overflow: visible;
vertical-align: top;
padding: 0 2px;
}
//For later
//-webkit-mask: -webkit-linear-gradient(right, rgba(0, 0, 0, 0), black 10px);
&.active {
cursor: default;
}
span.divider {
padding: 0 2px 0 0;
}
&.overflow-ellipsis {
text-overflow: ellipsis;
}
&:active {
color: @grayLight;
}
&:first-child span {
padding-left: 0px;
}
&:last-child span {
padding-right: 0px;
}
}
}
///* @end */
// MooTree styling
.mooTree_node {
padding: 3px 0 3px 10px;
color: #444;
border-top: 1px solid #F9F9F9;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.mooTree_node:hover {
color: #444;
border-top-color: lighten(@btnPrimaryBackground, 20%);
#gradient > .vertical(lighten(@btnPrimaryBackground, 25%), lighten(@btnPrimaryBackground, 15%));
text-decoration: none;
}
.mooTree_text {
padding-top: 3px;
height: 15px;
cursor: pointer;
text-indent: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mooTree_img {
float: left;
width: 18px;
height: 18px;
overflow: hidden;
}
.mooTree_selected,
.mooTree_selected:hover{
color: #FFF;
border-top-color: spin(@btnPrimaryBackground, 5%);
#gradient > .vertical(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
.box-shadow(hsla(0, 0%, 100%, 0.2) 0 1px 0 inset);
text-shadow: hsla(0, 0%, 0%, 0.2) 0 -1px 0;
}
// Bootstrap table overrides for list
#files-grid {
.table {
margin-top: 0px;
margin-bottom: 0px; // Bootstap override
color: #616161;
td {
vertical-align: middle; // Bootstrap override
// Override select boxes in tables
select {
width: auto;
line-height: 20px;
height: 20px;
margin: 0;
padding: 0;
}
}
th, td {
white-space: nowrap;
}
thead {
background-color: #eeeeee;
th {
padding: 4px 8px;
line-height: 17px;
}
td {
background-color: lighten(#eeeeee, 3%);
}
}
tbody {
&.selected-single tr.selected td {
border-top-color: spin(@btnPrimaryBackground, 5%);
#gradient > .vertical(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
.box-shadow(hsla(0, 0%, 100%, 0.2) 0 1px 0 inset);
text-shadow: hsla(0, 0%, 0%, 0.2) 0 -1px 0;
}
&.selected-multiple tr.selected td {
background: @btnPrimaryBackground;
}
tr {
td {
a {
font-size: 1.1em;
}
small {
display: block;
margin-top: -2px;
overflow: hidden;
text-overflow: ellipsis;
}
}
&.selected td, &.selected td a, &.selected td small, &.selected td span {
color: white!important;
}
}
}
}
}
Zerion Mini Shell 1.0