diff --git a/plugins/UiPluginManager/media/css/PluginManager.css b/plugins/UiPluginManager/media/css/PluginManager.css index 30f36717..23955a2e 100644 --- a/plugins/UiPluginManager/media/css/PluginManager.css +++ b/plugins/UiPluginManager/media/css/PluginManager.css @@ -1,75 +1,329 @@ -body { background-color: #EDF2F5; font-family: Roboto, 'Segoe UI', Arial, 'Helvetica Neue'; margin: 0px; padding: 0px; backface-visibility: hidden; } -h1, h2, h3, h4 { font-family: 'Roboto', Arial, sans-serif; font-weight: 200; font-size: 30px; margin: 0px; padding: 0px } -h1 { background: linear-gradient(33deg,#af3bff,#0d99c9); color: white; padding: 16px 30px; } -h2 { margin-top: 10px; } -h3 { font-weight: normal } -h4 { font-size: 19px; font-weight: lighter; margin-right: 100px; margin-top: 30px; } -a { color: #9760F9 } -a:hover { text-decoration: none } - -.link { background-color: transparent; outline: 5px solid transparent; transition: all 0.3s } -.link:active { background-color: #EFEFEF; outline: 5px solid #EFEFEF; transition: none } - -.content { max-width: 800px; margin: auto; background-color: white; padding: 60px 20px; box-sizing: border-box; padding-bottom: 150px; } -.section { margin: 0px 10%; } -.plugins { font-size: 19px; margin-top: 25px; margin-bottom: 75px; } -.plugin { transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1); position: relative; padding-bottom: 20px; padding-top: 10px; } -.plugin.hidden { opacity: 0; height: 0px; padding: 0px; } -.plugin .title { display: inline-block; line-height: 36px; } -.plugin .title h3 { font-size: 20px; font-weight: lighter; margin-right: 100px; } -.plugin .title .version { font-size: 70%; margin-left: 5px; } -.plugin .title .version .version-latest { color: #2ecc71; font-weight: normal; } -.plugin .title .version .version-missing { color: #ffa200; font-weight: normal; } -.plugin .title .version .version-update { padding: 0px 15px; margin-left: 5px; line-height: 28px; } -.plugin .description { font-size: 14px; color: #666; line-height: 24px; } -.plugin .description .source { color: #999; font-size: 90%; } -.plugin .description .source a { color: #666; } -.plugin .value { display: inline-block; white-space: nowrap; } -.plugin .value-right { right: 0px; position: absolute; } -.plugin .value-fullwidth { width: 100% } -.plugin .marker { - font-weight: bold; text-decoration: none; font-size: 25px; position: absolute; padding: 2px 15px; line-height: 32px; - opacity: 0; pointer-events: none; transition: all 0.6s; transform: scale(2); color: #9760F9; +body { + background-color: #EDF2F5; + font-family: Roboto, 'Segoe UI', Arial, 'Helvetica Neue'; + margin: 0px; + padding: 0px; + backface-visibility: hidden; } -.plugin .marker.visible { opacity: 1; pointer-events: all; transform: scale(1); } -.plugin .marker.changed { color: #2ecc71; } -.plugin .marker.pending { color: #ffa200; } +h1, h2, h3, h4 { + font-family: 'Roboto', Arial, sans-serif; + font-weight: 200; + font-size: 30px; + margin: 0px; + padding: 0px +} -.input-text, .input-select { padding: 8px 18px; border: 1px solid #CCC; border-radius: 3px; font-size: 17px; box-sizing: border-box; } -.input-text:focus, .input-select:focus { border: 1px solid #3396ff; outline: none; } -.input-textarea { overflow-x: auto; overflow-y: hidden; white-space: pre; line-height: 22px; } +h1 { + background: linear-gradient(33deg, #af3bff, #0d99c9); + color: white; + padding: 16px 30px; +} -.input-select { width: initial; font-size: 14px; padding-right: 10px; padding-left: 10px; } +h2 { + margin-top: 10px; +} -.value-right .input-text { text-align: right; width: 100px; } -.value-fullwidth .input-text { width: 100%; font-size: 14px; font-family: 'Segoe UI', Arial, 'Helvetica Neue'; } -.value-fullwidth { margin-top: 10px; } +h3 { + font-weight: normal +} + +h4 { + font-size: 19px; + font-weight: lighter; + margin-right: 100px; + margin-top: 30px; +} + +a { + color: #9760F9 +} + +a:hover { + text-decoration: none +} + +.link { + background-color: transparent; + outline: 5px solid transparent; + transition: all 0.3s +} + +.link:active { + background-color: #EFEFEF; + outline: 5px solid #EFEFEF; + transition: none +} + +.content { + max-width: 800px; + margin: auto; + background-color: white; + padding: 60px 20px; + box-sizing: border-box; + padding-bottom: 150px; +} + +.section { + margin: 0px 10%; +} + +.plugins { + font-size: 19px; + margin-top: 25px; + margin-bottom: 75px; +} + +.plugin { + transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1); + position: relative; + padding-bottom: 20px; + padding-top: 10px; +} + +.plugin.hidden { + opacity: 0; + height: 0px; + padding: 0px; +} + +.plugin .title { + display: inline-block; + line-height: 36px; +} + +.plugin .title h3 { + font-size: 20px; + font-weight: lighter; + margin-right: 100px; +} + +.plugin .title .version { + font-size: 70%; + margin-left: 5px; +} + +.plugin .title .version .version-latest { + color: #2ecc71; + font-weight: normal; +} + +.plugin .title .version .version-missing { + color: #ffa200; + font-weight: normal; +} + +.plugin .title .version .version-update { + padding: 0px 15px; + margin-left: 5px; + line-height: 28px; +} + +.plugin .description { + font-size: 14px; + color: #666; + line-height: 24px; +} + +.plugin .description .source { + color: #999; + font-size: 90%; +} + +.plugin .description .source a { + color: #666; +} + +.plugin .value { + display: inline-block; + white-space: nowrap; +} + +.plugin .value-right { + right: 0px; + position: absolute; +} + +.plugin .value-fullwidth { + width: 100% +} + +.plugin .marker { + font-weight: bold; + text-decoration: none; + font-size: 25px; + position: absolute; + padding: 2px 15px; + line-height: 32px; + opacity: 0; + pointer-events: none; + transition: all 0.6s; + transform: scale(2); + color: #9760F9; +} + +.plugin .marker.visible { + opacity: 1; + pointer-events: all; + transform: scale(1); +} + +.plugin .marker.changed { + color: #2ecc71; +} + +.plugin .marker.pending { + color: #ffa200; +} + +.input-text, .input-select { + padding: 8px 18px; + border: 1px solid #CCC; + border-radius: 3px; + font-size: 17px; + box-sizing: border-box; +} + +.input-text:focus, .input-select:focus { + border: 1px solid #3396ff; + outline: none; +} + +.input-textarea { + overflow-x: auto; + overflow-y: hidden; + white-space: pre; + line-height: 22px; +} + +.input-select { + width: initial; + font-size: 14px; + padding-right: 10px; + padding-left: 10px; +} + +.value-right .input-text { + text-align: right; + width: 100px; +} + +.value-fullwidth .input-text { + width: 100%; + font-size: 14px; + font-family: 'Segoe UI', Arial, 'Helvetica Neue'; +} + +.value-fullwidth { + margin-top: 10px; +} /* Checkbox */ -.checkbox-skin { background-color: #CCC; width: 50px; height: 24px; border-radius: 15px; transition: all 0.3s ease-in-out; display: inline-block; } -.checkbox-skin:before { - content: ""; position: relative; width: 20px; background-color: white; height: 20px; display: block; border-radius: 100%; margin-top: 2px; margin-left: 2px; - transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); +.checkbox-skin { + background-color: #CCC; + width: 50px; + height: 24px; + border-radius: 15px; + transition: all 0.3s ease-in-out; + display: inline-block; +} + +.checkbox-skin:before { + content: ""; + position: relative; + width: 20px; + background-color: white; + height: 20px; + display: block; + border-radius: 100%; + margin-top: 2px; + margin-left: 2px; + transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); +} + +.checkbox { + font-size: 14px; + font-weight: normal; + display: inline-block; + cursor: pointer; + margin-top: 5px; +} + +.checkbox .title { + display: inline; + line-height: 30px; + vertical-align: 4px; + margin-left: 11px +} + +.checkbox.checked .checkbox-skin:before { + margin-left: 27px; +} + +.checkbox.checked .checkbox-skin { + background-color: #2ECC71 } -.checkbox { font-size: 14px; font-weight: normal; display: inline-block; cursor: pointer; margin-top: 5px; } -.checkbox .title { display: inline; line-height: 30px; vertical-align: 4px; margin-left: 11px } -.checkbox.checked .checkbox-skin:before { margin-left: 27px; } -.checkbox.checked .checkbox-skin { background-color: #2ECC71 } /* Bottom */ - .bottom { - width: 100%; text-align: center; background-color: #ffffffde; padding: 25px; bottom: -120px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); - transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1); position: fixed; backface-visibility: hidden; box-sizing: border-box; + width: 100%; + text-align: center; + background-color: #ffffffde; + padding: 25px; + bottom: -120px; + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); + transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1); + position: fixed; + backface-visibility: hidden; + box-sizing: border-box; } -.bottom-content { max-width: 750px; width: 100%; margin: 0px auto; } -.bottom .button { float: right; } -.bottom.visible { bottom: 0px; box-shadow: 0px 0px 35px #dcdcdc; } -.bottom .title { padding: 10px 10px; color: #363636; float: left; text-transform: uppercase; letter-spacing: 1px; } -.bottom .title:before { content: "•"; display: inline-block; color: #2ecc71; font-size: 31px; vertical-align: -7px; margin-right: 8px; line-height: 25px; } -.bottom-restart .title:before { color: #ffa200; } -.animate { transition: all 0.3s ease-out !important; } -.animate-back { transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; } -.animate-inout { transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) !important; } \ No newline at end of file +.bottom-content { + max-width: 750px; + width: 100%; + margin: 0px auto; +} + +.bottom .button { + float: right; +} + +.bottom.visible { + bottom: 0px; + box-shadow: 0px 0px 35px #dcdcdc; +} + +.bottom .title { + padding: 10px 10px; + color: #363636; + float: left; + text-transform: uppercase; + letter-spacing: 1px; +} + +.bottom .title:before { + content: "•"; + display: inline-block; + color: #2ecc71; + font-size: 31px; + vertical-align: -7px; + margin-right: 8px; + line-height: 25px; +} + +.bottom-restart .title:before { + color: #ffa200; +} + +.animate { + transition: all 0.3s ease-out !important; +} + +.animate-back { + transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; +} + +.animate-inout { + transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) !important; +}