diff --git a/plugins/UiFileManager/media/css/UiFileManager.css b/plugins/UiFileManager/media/css/UiFileManager.css index be884bcb..670f14e3 100644 --- a/plugins/UiFileManager/media/css/UiFileManager.css +++ b/plugins/UiFileManager/media/css/UiFileManager.css @@ -1,148 +1,587 @@ -body { background-color: #EEEEF5; font-family: "Segoe UI", Helvetica, Arial; height: 95000px; overflow: hidden; } -body.loaded { height: auto; overflow: auto } -h1 { font-weight: lighter; } +body { + background-color: #EEEEF5; + font-family: "Segoe UI", Helvetica, Arial; + height: 95000px; + overflow: hidden; +} -a { color: #333 } -a:hover { text-decoration: none } -input::placeholder { color: rgba(255, 255, 255, 0.3) } +body.loaded { + height: auto; + overflow: auto +} -h2 { font-weight: lighter; } +h1 { + font-weight: lighter; +} -.link { background-color: transparent; outline: 5px solid transparent; transition: all 0.3s } -.link:active { background-color: #fbf5ff; outline: 5px solid #fbf5ff; transition: none } +a { + color: #333 +} -.manager.editing .files { float: left; width: 280px; } +a:hover { + text-decoration: none +} + +input::placeholder { + color: rgba(255, 255, 255, 0.3) +} + +h2 { + font-weight: lighter; +} + +.link { + background-color: transparent; + outline: 5px solid transparent; + transition: all 0.3s +} + +.link:active { + background-color: #fbf5ff; + outline: 5px solid #fbf5ff; + transition: none +} + +.manager.editing .files { + float: left; + width: 280px; +} .sidebar-button { - display: inline-block; padding: 25px 19px; text-decoration: none; position: absolute; - border-right: 1px solid #EEE; line-height: 10px; color: #7801F5; transition: all 0.3s + display: inline-block; + padding: 25px 19px; + text-decoration: none; + position: absolute; + border-right: 1px solid #EEE; + line-height: 10px; + color: #7801F5; + transition: all 0.3s } -.sidebar-button:active { background-color: #f5e7ff; transition: none } + +.sidebar-button:active { + background-color: #f5e7ff; + transition: none +} + /*.sidebar-button:hover { background-color: #fbf5ff; }*/ -.sidebar-button span { transition: 1s all; transform-origin: 2.5px 7px; display: inline-block; } -.manager.sidebar_closed .sidebar-button span { transform: rotateZ(180deg); } -.manager.sidebar_closed .files { margin-left: -300px; } -.manager.sidebar_closed .editor { width: 100%; } +.sidebar-button span { + transition: 1s all; + transform-origin: 2.5px 7px; + display: inline-block; +} + +.manager.sidebar_closed .sidebar-button span { + transform: rotateZ(180deg); +} + +.manager.sidebar_closed .files { + margin-left: -300px; +} + +.manager.sidebar_closed .editor { + width: 100%; +} .button { - padding: 5px 10px; margin-left: 10px; background-color: #752ff2; border-bottom: 2px solid #caadff; background-position: -50px center; - border-radius: 2px; text-decoration: none; transition: all 0.5s ease-out; display: inline-block; - color: #333; font-size: 12px; vertical-align: 2px; text-transform: uppercase; color: white; max-width: 100px; + padding: 5px 10px; + margin-left: 10px; + background-color: #752ff2; + border-bottom: 2px solid #caadff; + background-position: -50px center; + border-radius: 2px; + text-decoration: none; + transition: all 0.5s ease-out; + display: inline-block; + color: #333; + font-size: 12px; + vertical-align: 2px; + text-transform: uppercase; + color: white; + max-width: 100px; +} + +.button:hover { + background-color: #9e71ed; + transition: none; +} + +.button:active { + position: relative; + top: 1px +} + +.button.loading, .button.disabled { + color: rgba(255, 255, 255, 0.7); + ; + pointer-events: none; + border-bottom: 2px solid #666; + background-color: #999; +} + +.button.loading { + background: #999 url(../img/loading.gif) no-repeat center center; + transition: all 0.5s ease-out; + color: rgba(0, 0, 0, 0); +} + +.button.done { + background-color: #4dc758; + transition: all 0.3s; + border-color: #4dc758; + pointer-events: none; +} + +.button.hidden { + max-width: 0px; + display: inline-block; + padding-left: 0px; + padding-right: 0px; + margin: 0px; } -.button:hover { background-color: #9e71ed; transition: none; } -.button:active { position: relative; top: 1px } -.button.loading, .button.disabled { color: rgba(255,255,255,0.7);; pointer-events: none; border-bottom: 2px solid #666; background-color: #999; } -.button.loading { background: #999 url(../img/loading.gif) no-repeat center center; transition: all 0.5s ease-out; color: rgba(0,0,0,0); } -.button.done { background-color: #4dc758; transition: all 0.3s; border-color: #4dc758; pointer-events: none; } -.button.hidden { max-width: 0px; display: inline-block; padding-left: 0px; padding-right: 0px; margin: 0px; } /* List */ - .files { - width: 97%; box-sizing: border-box; color: #555; position: relative; z-index: 1; transition: all 0.6s; - font-size: 14px; box-shadow: 0px 9px 20px -15px #a5cbec; max-width: 400px; border: 1px solid #EEEEF5; + width: 97%; + box-sizing: border-box; + color: #555; + position: relative; + z-index: 1; + transition: all 0.6s; + font-size: 14px; + box-shadow: 0px 9px 20px -15px #a5cbec; + max-width: 400px; + border: 1px solid #EEEEF5; } -.files .tr { white-space: nowrap } -.files .td { display: inline-block; width: 60px } -.files .tbody .td { line-height: 18px; vertical-align: bottom; } -.files .td.name { min-width: 100px } -.files .td.size { width: 60px; text-align: right; padding-left: 5px; } -.files .td.status { text-align: right; } -.files .td.peer { width: 60px } -.files .td.uploaded { width: 130px; text-align: right; } -.files .td.added { width: 90px } -.files .orderby { color: inherit; text-decoration: none; transition: all 0.3s; outline: 5px solid transparent; } -.files .orderby:hover { text-decoration: underline; } -.files .orderby .icon-arrow-down { opacity: 0; transition: all 0.3s ease-in-out; } -.files .orderby.selected .icon-arrow-down { opacity: 0.3; } -.files .orderby:active { background-color: rgba(133, 239, 255, 0.09); outline: 5px solid rgba(133, 239, 255, 0.09); transition: none; } -.files .orderby:hover .icon-arrow-down { opacity: 0.5; } -.files .orderby:not(.desc) .icon-arrow-down { transform: rotateZ(180deg); } -.files .tr.editing .td { background-color: #ede1f582; border-top-color: #ece9ef; } -.files .thead { /*background: linear-gradient(358deg, #e7f1f7, #e9f2f72e);*/ } -.files .thead .td { - border-top: none; color: #8984c2; background-color: #f7f7fc; - font-size: 12px; /*text-transform: uppercase; background-color: transparent; font-weight: bold;*/ -} -.files .thead .td a:last-of-type { font-weight: bold; } -.files .thead .td a { text-decoration: none; } -.files .thead .td a:hover { text-decoration: underline; } -.files .tbody { max-height: calc(100vh - 95px); overflow-y: auto; overflow-x: hidden; } -.files .tr { background-color: white; } -.files .td { padding: 10px 20px; border-top: 1px solid #EEE; font-size: 13px; white-space: nowrap; } -.files .td.full { width: 100%; box-sizing: border-box; white-space: pre-line; } -.files .td.pre { width: 0px; color: transparent; padding-left: 0px; border-left: 2px solid transparent; } -.files .tbody .td { height: 18px; } -.files .tbody .td.full { height: auto; } -.files .td.pre .checkbox-outer { opacity: 0.6; margin-left: -11px; margin-top: -15px; width: 18px; height: 12px; display: inline-block; } -.files .tr.modified .td.pre { border-left-color: #7801F5 } -.files .tr.added .td.pre { border-left-color: #00ec93 } -.files .tr.ignored .td.pre { border-left-color: #999; } -.files .tr.ignored { opacity: 0.5; } -.files .tr.optional { background: linear-gradient(90deg, #fff6dd, 30%, white, 10%, white); } -.files .tr.optional_empty { color: #999; font-style: italic; } -.files .td.error { background-color: #F44336; color: white; } -.files .td.site { width: 70px } -.files .td.site .link { color: inherit; text-decoration: none } -.files .td.status .percent { - transition: all 1s ease-in-out; display: inline-block; width: 80px; background-color: #EEE; font-size: 10px; - height: 15px; line-height: 15px; text-align: center; margin-right: 20px; -} -.files .td.name { padding-left: 10px; width: calc(100% - 167px); max-height: 18px; padding-right: 10px; } -.files .tr.nobuttons .td.name { width: calc(100% - 127px); } -.files .tr.nobuttons .td.buttons { width: 0px; } -.files .td.name .title { color: inherit; text-decoration: none } -.files .td.name .link { display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: -4px; max-width: 100%; } -.files .pinned .td.name .link { max-width: calc(100% - 40px); } -.files .thead .td.uploaded { text-align: left } -.files .thead .td.uploaded .title { padding-left: 7px; } -.files .peer .icon-profile { background: currentColor; color: #47d094; font-size: 10px; top: 1px; margin-right: 13px } -.files .peer .icon-profile:before { background: currentColor } -.files .peer .num { color: #969696; } -.files .uploaded .uploaded-text { display: inline-block; text-align: right; } -.files .uploaded .dots-container { display: inline-block; width: 0px; padding-right: 65px;; } -.files .td.buttons { width: 40px; padding-left: 0px; padding-right: 0px; } -.files .td.buttons .edit { - background-color: #2196f336; border-radius: 15px; padding: 1px 9px; font-size: 80%; text-decoration: none; color: #1976D2; -} -.files .checkbox-outer { padding: 15px; padding-left: 20px; padding-right: 0px; } -.files .checkbox { - display: inline-block; width: 12px; height: 12px; border: 2px solid #00000014; - border-radius: 3px; vertical-align: -3px; margin-right: 10px; -} -.files .selected .checkbox { border-color: #dedede } -.files .selected .checkbox:after { - background-color: #dedede; content: ""; text-decoration: none; display: block; width: 10px; height: 10px; margin-left: 1px; margin-top: 1px; -} -.files .tbody .td.size { font-size: 13px } -.files .tbody .td.added, #PageFiles .files .td.access { font-size: 12px; color: #999 } -.files .tr.type-dir .name { font-weight: bold; } -.files .tr.type-parent .name .link { display: inline-block; width: 100%; padding: 5px; margin-top: -5px; } -.files .foot .td { color: #a4a4a4; background-color: #f7f7fc; } -.files .foot .create { float: right; text-decoration: none; position: relative; } -.files .foot .create .link { color: #8c42ed; text-decoration: none; } -.files .foot .create .link:active { background-color: #8c42ed3b; outline: 5px solid #8c42ed3b; } -.files .foot .create .menu { top: 40px; } +.files .tr { + white-space: nowrap +} + +.files .td { + display: inline-block; + width: 60px +} + +.files .tbody .td { + line-height: 18px; + vertical-align: bottom; +} + +.files .td.name { + min-width: 100px +} + +.files .td.size { + width: 60px; + text-align: right; + padding-left: 5px; +} + +.files .td.status { + text-align: right; +} + +.files .td.peer { + width: 60px +} + +.files .td.uploaded { + width: 130px; + text-align: right; +} + +.files .td.added { + width: 90px +} + +.files .orderby { + color: inherit; + text-decoration: none; + transition: all 0.3s; + outline: 5px solid transparent; +} + +.files .orderby:hover { + text-decoration: underline; +} + +.files .orderby .icon-arrow-down { + opacity: 0; + transition: all 0.3s ease-in-out; +} + +.files .orderby.selected .icon-arrow-down { + opacity: 0.3; +} + +.files .orderby:active { + background-color: rgba(133, 239, 255, 0.09); + outline: 5px solid rgba(133, 239, 255, 0.09); + transition: none; +} + +.files .orderby:hover .icon-arrow-down { + opacity: 0.5; +} + +.files .orderby:not(.desc) .icon-arrow-down { + transform: rotateZ(180deg); +} + +.files .tr.editing .td { + background-color: #ede1f582; + border-top-color: #ece9ef; +} + +.files .thead { + /*background: linear-gradient(358deg, #e7f1f7, #e9f2f72e);*/ +} + +.files .thead .td { + border-top: none; + color: #8984c2; + background-color: #f7f7fc; + font-size: 12px; + /*text-transform: uppercase; background-color: transparent; font-weight: bold;*/ +} + +.files .thead .td a:last-of-type { + font-weight: bold; +} + +.files .thead .td a { + text-decoration: none; +} + +.files .thead .td a:hover { + text-decoration: underline; +} + +.files .tbody { + max-height: calc(100vh - 95px); + overflow-y: auto; + overflow-x: hidden; +} + +.files .tr { + background-color: white; +} + +.files .td { + padding: 10px 20px; + border-top: 1px solid #EEE; + font-size: 13px; + white-space: nowrap; +} + +.files .td.full { + width: 100%; + box-sizing: border-box; + white-space: pre-line; +} + +.files .td.pre { + width: 0px; + color: transparent; + padding-left: 0px; + border-left: 2px solid transparent; +} + +.files .tbody .td { + height: 18px; +} + +.files .tbody .td.full { + height: auto; +} + +.files .td.pre .checkbox-outer { + opacity: 0.6; + margin-left: -11px; + margin-top: -15px; + width: 18px; + height: 12px; + display: inline-block; +} + +.files .tr.modified .td.pre { + border-left-color: #7801F5 +} + +.files .tr.added .td.pre { + border-left-color: #00ec93 +} + +.files .tr.ignored .td.pre { + border-left-color: #999; +} + +.files .tr.ignored { + opacity: 0.5; +} + +.files .tr.optional { + background: linear-gradient(90deg, #fff6dd, 30%, white, 10%, white); +} + +.files .tr.optional_empty { + color: #999; + font-style: italic; +} + +.files .td.error { + background-color: #F44336; + color: white; +} + +.files .td.site { + width: 70px +} + +.files .td.site .link { + color: inherit; + text-decoration: none +} + +.files .td.status .percent { + transition: all 1s ease-in-out; + display: inline-block; + width: 80px; + background-color: #EEE; + font-size: 10px; + height: 15px; + line-height: 15px; + text-align: center; + margin-right: 20px; +} + +.files .td.name { + padding-left: 10px; + width: calc(100% - 167px); + max-height: 18px; + padding-right: 10px; +} + +.files .tr.nobuttons .td.name { + width: calc(100% - 127px); +} + +.files .tr.nobuttons .td.buttons { + width: 0px; +} + +.files .td.name .title { + color: inherit; + text-decoration: none +} + +.files .td.name .link { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: -4px; + max-width: 100%; +} + +.files .pinned .td.name .link { + max-width: calc(100% - 40px); +} + +.files .thead .td.uploaded { + text-align: left +} + +.files .thead .td.uploaded .title { + padding-left: 7px; +} + +.files .peer .icon-profile { + background: currentColor; + color: #47d094; + font-size: 10px; + top: 1px; + margin-right: 13px +} + +.files .peer .icon-profile:before { + background: currentColor +} + +.files .peer .num { + color: #969696; +} + +.files .uploaded .uploaded-text { + display: inline-block; + text-align: right; +} + +.files .uploaded .dots-container { + display: inline-block; + width: 0px; + padding-right: 65px; + ; +} + +.files .td.buttons { + width: 40px; + padding-left: 0px; + padding-right: 0px; +} + +.files .td.buttons .edit { + background-color: #2196f336; + border-radius: 15px; + padding: 1px 9px; + font-size: 80%; + text-decoration: none; + color: #1976D2; +} + +.files .checkbox-outer { + padding: 15px; + padding-left: 20px; + padding-right: 0px; +} + +.files .checkbox { + display: inline-block; + width: 12px; + height: 12px; + border: 2px solid #00000014; + border-radius: 3px; + vertical-align: -3px; + margin-right: 10px; +} + +.files .selected .checkbox { + border-color: #dedede +} + +.files .selected .checkbox:after { + background-color: #dedede; + content: ""; + text-decoration: none; + display: block; + width: 10px; + height: 10px; + margin-left: 1px; + margin-top: 1px; +} + +.files .tbody .td.size { + font-size: 13px +} + +.files .tbody .td.added, #PageFiles .files .td.access { + font-size: 12px; + color: #999 +} + +.files .tr.type-dir .name { + font-weight: bold; +} + +.files .tr.type-parent .name .link { + display: inline-block; + width: 100%; + padding: 5px; + margin-top: -5px; +} + +.files .foot .td { + color: #a4a4a4; + background-color: #f7f7fc; +} + +.files .foot .create { + float: right; + text-decoration: none; + position: relative; +} + +.files .foot .create .link { + color: #8c42ed; + text-decoration: none; +} + +.files .foot .create .link:active { + background-color: #8c42ed3b; + outline: 5px solid #8c42ed3b; +} + +.files .foot .create .menu { + top: 40px; +} /* Editor */ - -.editor { background-color: #F7F7FC; float: left; width: calc(100% - 280px); box-sizing: border-box; transition: all 0.6s; } -.editor .CodeMirror { height: calc(100vh - 79px); visibility: hidden; } -.editor textarea { width: 100%; height: 800px; white-space: pre; } -.editor .title { margin-left: 20px; } -.editor .editor-head { - padding: 15px 20px; padding-left: 45px; font-size: 18px; font-weight: lighter; border: 1px solid #EEEEF5; - white-space: nowrap; overflow: hidden; +.editor { + background-color: #F7F7FC; + float: left; + width: calc(100% - 280px); + box-sizing: border-box; + transition: all 0.6s; +} + +.editor .CodeMirror { + height: calc(100vh - 79px); + visibility: hidden; +} + +.editor textarea { + width: 100%; + height: 800px; + white-space: pre; +} + +.editor .title { + margin-left: 20px; +} + +.editor .editor-head { + padding: 15px 20px; + padding-left: 45px; + font-size: 18px; + font-weight: lighter; + border: 1px solid #EEEEF5; + white-space: nowrap; + overflow: hidden; +} + +.editor.loaded .CodeMirror { + visibility: inherit; +} + +.editor.error .CodeMirror { + display: none; +} + +.editor .button.save { + min-width: 30px; + text-align: center; + transition: all 0.3s; +} + +.editor .button.save.done { + min-width: 80px; +} + +.editor .error-message { + text-align: center; + padding: 50px; } -.editor.loaded .CodeMirror { visibility: inherit; } -.editor.error .CodeMirror { display: none; } -.editor .button.save { min-width: 30px; text-align: center; transition: all 0.3s; } -.editor .button.save.done { min-width: 80px; } -.editor .error-message { text-align: center; padding: 50px; } .editor .CodeMirror-foldmarker { - line-height: .3; cursor: pointer; background-color: #ffeb3b61; text-shadow: none; font-family: inherit; - color: #050505; border: 1px solid #ffdf7f; padding: 0px 5px; + line-height: .3; + cursor: pointer; + background-color: #ffeb3b61; + text-shadow: none; + font-family: inherit; + color: #050505; + border: 1px solid #ffdf7f; + padding: 0px 5px; +} + +.editor .CodeMirror-activeline-background { + background-color: #F6F6F6 !important; } -.editor .CodeMirror-activeline-background { background-color: #F6F6F6 !important; } \ No newline at end of file