/** 
 * styles
 */
class Stylesheet {
    get styles() {
        return {
            dropZone: {
                position: 'relative',
                padding: '16px',
                border: '1px dashed #dcdee3',
                backgroundColor: '#fff',
                color: '#999',
                fontSize: '14px',
                overflow: 'hidden',
                width: '100%',
            },
            uploadBox: {
                float: 'left',
                border: '1px dashed #c4c6cf',
                width: '100px',
                height: '100px',
                backgroundColor: '#fff',
                textAlign: 'center',
                cursor: 'pointer',
                transition: 'border-color .3s ease',
                display: 'inline-block',
                verticalAlign: 'top',
                marginRight: '12px',
            },
            uploadSelect: {
                marginTop: '10px',
                display: 'block',
            },
            uploadText: {
                fontSize: '14px',
                marginTop: '2px',
                color: '#666',
            },
            uploadTipItem: {
                display: 'block',
                margin: '0 10px 10px 0',
            },
            uploadListItem: {
                position: 'relative',
                display: 'inline-block',
                border: '1px solid #c4c6cf',
                width: '100px',
                height: '100px',
                margin: '0 12px 0 0',
                verticalAlign: 'middle',
                float: 'left',
                cursor: 'pointer',
            },
            cursorMove: {
                cursor: 'move',
            },
            uploadListItemInfo: {
                position: 'relative',
                height: '100%',
                padding: '0',
            },
            uploadListItemThumbnail: {
                display: 'table',
                width: '100%',
                height: '100%',
                position: 'static',
                textAlign: 'center',
                verticalAlign: 'middle',
                color: '#c4c6cf',
            },
            uploadListItemThumbnailImage: {
                display: 'table-cell',
                width: '100%',
                height: '100%',
                verticalAlign: 'middle',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: '50%',
                fontSize: '12px',
                transition: 'all 0.3s ease',
            },
            uploadListItemName: {
                display: 'block',
                width: "100%",
                textAlign: 'center',
                marginTop: '4px',
                fontSize: '12px',
                color: '#666',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                padding: '0',
            },
            uploadThumbnail: {
                position: 'absolute',
                zIndex: '1',
                backgroundColor: 'rgba(0,0,0,.7)',
                transition: 'all .3s ease',
                width: '100%',
                height: '28px',
                lineHeight: '28px',
                left: '0',
                top: '0',
                cursor: 'pointer',
            },
            uploadToolThumbnail: {
                cursor: 'pointer',
                display: 'inline-block',
                width: '100%',
                textAlign: 'center',
                color: '#fff',
                fontSize: '12px',
            },
            uploadTool: {
                position: 'absolute',
                zIndex: '1',
                backgroundColor: 'rgba(0,0,0,.7)',
                transition: 'all .3s ease',
                opacity: '0',
                width: '100%',
                height: '28px',
                lineHeight: '28px',
                left: '0',
                bottom: '0',
                cursor: 'pointer',
            },
            uploadToolDelete: {
                cursor: 'pointer',
                display: 'inline-block',
                width: '100%',
                textAlign: 'center',
                color: '#fff',
            },
            dropUpload: {
                overflow: 'hidden',
            },
            cropContainer: {
                width: '500px',
                height: '430px',
            },
            uploadTitle: {
                fontSize: '16px',
                margin: '0',
                padding: '0 0 20px 0',
                color: '#333',
            },
            cropMain: {
                overflow: 'hidden',
            },
            cropArea: {
                float: 'left',
                width: '400px',
                height: '260px',
            },
            previewArea: {
                float: 'left',
                marginLeft: '20px',
                overflow: 'hidden',
            },
            imgPreview: {
                marginBottom: '20px',
            },
            imgPreview80: {
                width: '80px',
                height: '80px',
                overflow: 'hidden',
            },
            imgPreview60: {
                width: '60px',
                height: '60px',
                overflow: 'hidden',
            },
            imgPreview40: {
                width: '40px',
                height: '40px',
                overflow: 'hidden',
            },
            cropSize: {
                display: 'block',
                fontSize: '12px',
                color: '#999',
                marginTop: '4px',
            },
            cropList: {
                height: '50px',
                overflowY: 'hidden',
                overflowX: 'auto'
            },
            cropItem: {
                position: 'relative',
                float: 'left',
                height: '48px',
                width: '48px',
                marginRight: '8px'
            },
            cropImg: {
                height: '100%',
                width: '100%'
            },
            selectedCrop: {
                border: '1px solid #E91E63'
            },
            cropTips: {
                margin: '10px 0 0 0',
                color: '#9e9e9e',
            },
            cropLabel: {
                color: '#9e9e9e',
            },
            tips: {
                margin: '10px 0',
                color: '#00bcd4',
            },
            label: {
                color: '#9e9e9e',
            },
            labelHeight: {
                color: '#9e9e9e',
                marginLeft: '10px',
            },
            action: {
                overflow: 'hidden',
                float: 'left',
                marginTop: '10px',
            },
            saveClose: {
                height: '28px',
                lineHeight: '28px',
                textAlign: 'center',
                borderRadius: '3px',
                float: 'left',
                padding: '0 16px',
                background: '#ff6a00',
                color: '#fff',
                fontSize: '14px',
            },
            loading: {
                position: 'absolute',
                left: '0',
                top: '0',
                textAlign: 'center',
                height: '100%',
                width: '100%',
                opacity: '.4',
                background: '#9197a2',
                zIndex: '10000',
            },
            progressContainer: {
                margin: '0 0 4px 0',
            },
            reactLoading: {
                position: 'relative',
                display: 'inline-block',
                height: '100px',
                width: '100px',
                top: '50%',
                marginTop: '-50px',
                zIndex: '10001',
            },
            errorContainer: {
                display: '-webkit-box',
                display: '-webkit-flex',
                display: 'flex',
                alignItems: 'center',
                marginTop: '8px',
                textAlign: 'left',
            },
            errorImage: {
                marginRight: '8px',
            },
            errorMsg: {
                color: '#FFF',
            },
            toast: {
                position: 'fixed',
                top: '10px',
                width: '400px',
                textAlign: 'center',
                color: '#FFF',
                fontSize: '14px',
                zIndex: '10002',
                left: '50%',
                marginLeft: '-200px',
                padding: '10px 20px',
                background: '#FB594D',
                borderRadius: '5px',
                maxHeight: '500px',
                overflowY: 'auto',
            },
            modalDialog: {
                width: '500px',
                textAlign: 'center',
            },
            previewImage: {
                maxWidth: '460px',
            },
        }
    }
}

export default new Stylesheet()