eb559eee0c
- When imported 1 picture and then importing another one, the picture preview was not cleaned and was displaying the two images side by side. Fixed in ImportController.js - Switched all double-quoted strings in ImportController to single-quoted strings. Should enforce this using jshint - Aligned all inputs in the import picture panel - Renamed 'Preview :' import section to 'Info :'. Mostly it's to make it shorter, but also I'd like to display additional information to the right of the preview in the future.
183 lines
No EOL
2.9 KiB
CSS
183 lines
No EOL
2.9 KiB
CSS
|
|
/** Righty sticky drawer expanded state. */
|
|
|
|
.right-sticky-section.sticky-section {
|
|
right: 0;
|
|
width: 47px;
|
|
|
|
-webkit-transition: all 200ms ease-out;
|
|
-moz-transition: all 200ms ease-out;
|
|
-ms-transition: all 200ms ease-out;
|
|
transition: all 200ms ease-out;
|
|
}
|
|
|
|
.right-sticky-section.expanded {
|
|
right: 280px;
|
|
}
|
|
|
|
.right-sticky-section .tool-icon {
|
|
float: right;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.drawer-content {
|
|
overflow: hidden;
|
|
background-color: #444;
|
|
height: 550px;
|
|
max-height: 100%;
|
|
width: 280px;
|
|
border-top-left-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
|
|
.right-sticky-section.expanded .tool-icon {
|
|
padding-right: 1px;
|
|
}
|
|
|
|
.right-sticky-section .tool-icon.has-expanded-drawer {
|
|
position: relative;
|
|
background-color: #444;
|
|
margin-right: 0;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.settings-section {
|
|
margin: 10px 20px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #ccc;
|
|
text-shadow: 1px 1px #000;
|
|
}
|
|
|
|
.settings-title {
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
border-bottom: 1px #aaa solid;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.settings-item {}
|
|
|
|
.background-picker-wrapper {
|
|
overflow: hidden;
|
|
padding: 10px 5px 20px 5px;
|
|
}
|
|
|
|
.background-picker {
|
|
cursor: pointer;
|
|
float: left;
|
|
height: 35px;
|
|
width: 35px;
|
|
background-color: transparent;
|
|
margin-right: 15px;
|
|
padding: 1px;
|
|
position: relative;
|
|
}
|
|
|
|
.background-picker:after {
|
|
content: " ";
|
|
position: absolute;
|
|
top: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
left: -2px;
|
|
}
|
|
|
|
.background-picker:hover:after {
|
|
border: #eee 1px solid;
|
|
}
|
|
|
|
.background-picker.selected:after {
|
|
border: gold 1px solid;
|
|
}
|
|
|
|
/* Gif Export Setting panel*/
|
|
.gif-upload-button,
|
|
.gif-render-button {
|
|
/*float : right;*/
|
|
margin-top : 10px;
|
|
margin-right : 10px;
|
|
}
|
|
|
|
.gif-export-radio-group {
|
|
margin:10px 0;
|
|
}
|
|
|
|
.gif-export-preview {
|
|
margin-top:20px;
|
|
max-width:240px;
|
|
position:relative;
|
|
}
|
|
|
|
.preview-upload-ongoing:before{
|
|
content: "Upload ongoing ...";
|
|
position: absolute;
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding-top: 45%;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
background: rgba(0,0,0,0.5);
|
|
color: white;
|
|
}
|
|
|
|
/* Import panel */
|
|
.import-section {
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.import-section-title {
|
|
display : inline-block;
|
|
}
|
|
|
|
.import-section-title-small {
|
|
width: 35px;
|
|
}
|
|
|
|
.import-section-disabled {
|
|
color : #888;
|
|
}
|
|
|
|
.import-section-preview {
|
|
display : inline-block;
|
|
height : 60px;
|
|
width: 60px;
|
|
border : 1px dashed #999;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.import-resize-field {
|
|
width: 30px;
|
|
margin-right: 8px;
|
|
text-align: right;
|
|
}
|
|
|
|
.import-resize-field:nth-of-type(2) {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.file-input-button {
|
|
margin-right: 8px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.file-input-status {
|
|
display: inline-block;
|
|
width: 130px;
|
|
overflow: hidden;
|
|
|
|
height: 1.5rem;
|
|
word-break : break-all;
|
|
vertical-align: middle;
|
|
font-style: italic;
|
|
font-weight: normal;
|
|
text-shadow: none;
|
|
}
|
|
|
|
[name=smooth-resize-checkbox] {
|
|
margin : 0 8px;
|
|
vertical-align: middle;
|
|
} |