X-Git-Url: https://git-public.kairo.at/?a=blobdiff_plain;ds=sidebyside;f=LCARStrek%2Fdevtools%2Fapp-manager%2Fprojects.css;fp=LCARStrek%2Fdevtools%2Fapp-manager%2Fprojects.css;h=7eea30c081657f6ce3f3dce5b8997101f7a1f60d;hb=dc9d5d64a3f915cb832f43050545b432f33504f7;hp=0000000000000000000000000000000000000000;hpb=ecfc58b0361c617fa298d4b1bb69ea2484d37de2;p=themes.git diff --git a/LCARStrek/devtools/app-manager/projects.css b/LCARStrek/devtools/app-manager/projects.css new file mode 100644 index 00000000..7eea30c0 --- /dev/null +++ b/LCARStrek/devtools/app-manager/projects.css @@ -0,0 +1,596 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-size: 0.9rem; +} + +html, body { + height: 100%; +} + +template { + display: none; +} + +body { + display: flex; + color: #FF9F00; + background-color: #000000; + font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; + overflow: hidden; +} + +body:not(.connected) button.device-action { + display: none; +} + +strong { + color: #FFCF00; +} + + +/********* SIDEBAR ***********/ + + + +#sidebar { + display: flex; + flex-direction: column; + flex: 0 0 350px; + overflow: hidden; + z-index: 100; + background-color: #000000; + position: relative; + border-right: 1px solid #9C9CFF; +} + +#project-list { + height: 100%; + overflow: auto; +} + +#project-list:not([projects-count="0"]) > #no-project { + display: none; +} + +#no-project { + padding: 100px 20px 0; + font-weight: bold; + color: #A09090; + font-size: 22px; +} + + +/********* PROJECT MENU ***********/ + + +.project-item { + padding: 10px 0; + background-color: #000000; + border-top: 1px solid #9C9CFF; + color: #FF9F00; + line-height: 120%; + cursor: pointer; + display: flex; + position: relative; +} + +.project-item:hover { + background-color: #FFCF00; + color: #000000; +} + +.project-item:hover strong, +.project-item:hover p, +.project-item:hover span { + color: #000000; +} + +.project-item > * { + flex-shrink: 0; +} + +.project-item.selected { + background-color: #008484; +} + +.project-item.selected strong { + color: #FFCF00; +} + +.project-item.selected p, +.project-item.selected span { + color: #000000; +} + +.button-remove { + background-image: url('remove.svg'); + background-size: 20px; + width: 20px; + height: 20px; + position: absolute; + right: 5px; + bottom: 5px; + visibility: hidden; +} + +.project-item:hover .button-remove { + visibility: visible; +} + +.project-item-status { + width: 6px; + margin: -10px 0; + border-right: 1px solid #9C9CFF; +} + +.project-item-status[status="valid"] { + background-color: #008484; +} + +.project-item-status[status~="warning"] { + background-color: #FFCF00; +} + +.project-item-status[status~="error"] { + background-color: #FF0000; +} + +.project-item-icon { + width: 32px; + height: 32px; + margin: 0 10px; +} + +.project-item-meta { + flex-grow: 1; + flex-shrink: 1 !important; +} + +.project-item-type { + font-size: 10px; + line-height: 20px; + float: right; + padding-right: 10px; + color: #9C9CFF; + text-transform: uppercase; +} + +.project-item-description { + color: #A09090; + font-size: 90%; +} + +/********* ADD PROJECT ***********/ + +#new-packaged-project { + background-position: calc(100% - 10px) 10px; +} + +#new-packaged-project, +#new-hosted-project { + background-color: #000000; + border: none; + border-top: 1px solid #9C9CFF; + padding: 10px; + font-weight: bold; +} + +#new-packaged-project:hover, +#new-hosted-project:hover { + background-color: #FFCF00; + color: #000000; +} + +#new-hosted-project-wrapper { + display: flex; + align-items: center; +} + +#new-packaged-project, +#new-hosted-project-click { + background-image: url('plus.svg'); + background-size: 20px; + background-repeat: no-repeat; + cursor: pointer; +} + +#new-hosted-project-click { + background-position: top right; + width: 20px; + height: 20px; + margin-left: 5px; +} + +#url-input { + flex-grow: 1; + width: 90%; + box-shadow: none; + border-radius: 3px; + border: 1px solid #9C9CFF; + padding: 4px; + margin-top: 4px; +} + + +/********* LENSE ***********/ + + +#lense { + height: 100%; + flex-grow: 1; + display: flex; + z-index: 1; + overflow: hidden; + background-color: #000000; + background-image: url('rocket.svg'); + background-repeat: no-repeat, repeat; + background-size: 35%, auto; + background-position: center center, top left; +} + +#lense > div { + display: flex; + flex-grow: 1; + flex-direction: column; +} + + +/********* PROJECT ***********/ + + +.project-details { + background-color: #000000; + padding: 10px; + line-height: 160%; + display: flex; + flex-direction: column; +} + +.project-metadata { + flex-grow: 1; +} + +.project-status { + display: flex; +} + +.project-title { + flex-direction: row; + display: flex; + align-items: flex-start; + padding-bottom: 10px; + border-bottom: 1px solid #A09090; + margin-bottom: 10px; +} + +.project-title > h1 { + flex-grow: 1; + font-size: 24px; +} + +.project-location { + color: gray; + font-size: 10px; + cursor: pointer; + font-family: monospace; +} + +.project-location:hover { + text-decoration: underline; +} + +.project-header { + display: flex; + border-bottom: 1px solid #A09090; + margin: 10px 20px 10px 20px; + padding-bottom: 10px; +} + +.project-icon { + flex-shrink: 0; + width: 64px; + height: 64px; + margin-right: 10px; +} + +.project-location { + font-size: 11px; + color: #9C9CFF; +} + +.project-description { + font-style: italic; + color: #A09090; +} + +.project-status > p { + text-transform: uppercase; + font-size: 10px; + padding: 2px 10px; + border-radius: 2px; + margin-top: 6px; + line-height: 10px; +} + +.project-validation { + color: #000000; + display: none; + margin-left: 10px; +} + +.project-validation.valid { + background-color: #008484; +} + +.project-validation.warning { + background-color: #FF9F00; +} + +.project-validation.error { + background-color: #FF0000; +} + +[status="valid"] > .project-validation.valid, +[status~="warning"] > .project-validation.warning, +[status~="error"] > .project-validation.error { + display: inline; +} + +.project-type { + display: none; + margin-left: 10px; +} +[type="hosted"] > .project-type.hosted, +[type="packaged"] > .project-type.packaged { + display: inline; +} + + +/********* PROJECT BUTTONS ***********/ + + + +.project-buttons { + display: flex; + margin-left: 20px; + color: #FF9F00; +} + +.project-buttons > button { + margin: 0; + font-size: 11px; + border-left-width: 0; + padding-top: 1px; + padding-bottom: 2px; + -moz-padding-start: .5em; + -moz-padding-end: calc(.5em + 1px); + border: none; + border-radius: 300px; + cursor: pointer; + background-color: #C09070; + text-transform: uppercase; +} + +.project-buttons > button:hover:active { + padding-top: 2px; + padding-bottom: 1px; + -moz-padding-start: calc(.5em + 1px); + -moz-padding-end: .5em; +} + +.project-buttons > button:not([disabled]):hover { + background-color: #FFCF00; + color: #000000; +} + +.project-buttons > button[disabled] { + background-color: #402858; + color: #000000; + pointer-events: none; +} + +.project-buttons > button:first-child { + border-left-width: 1px; +} +/* +.project-button-debug { + color: #3498DB; +} + +.project-button-debug:hover { + background-color: #3498DB; + color: #FFF; +} + +.project-button-debug[disabled] { + color: #3498DB; +} + +.project-button-update { + color: #777; +} + +.project-button-update:hover { + background-color: #777; + color: #FFF; +} + +.project-button-update[disabled] { + color: #777; +} +*/ + + +/********* ERRORS AND WARNINGS ***********/ + +.project-warnings, +.project-errors, +.project-item-warnings, +.project-item-errors { + display: none; +} + +[status~="warning"] .project-item-warnings, +[status~="error"] .project-item-errors { + display: inline-block; +} + +[status~="warning"] > .project-warnings, +[status~="error"] > .project-errors { + display: block; +} + +.project-warnings, +.project-errors { + margin: 20px 20px 0; + padding: 10px 10px; + font-family: monospace; + color: #000000; +} + +.project-warnings { + border-left: 3px solid #9C9CFF; + background-color: #FF9F00; +} + +.project-errors { + border-left: 3px solid #9C9CFF; + background-color: #FF0000; +} + +.project-item-warnings { + background-image: url('warning.svg'); + color: #FFCF00; +} + +.project-item-errors { + background-image: url('error.svg'); + color: #FF0000; +} + +.project-item-warnings, +.project-item-errors { + background-repeat: no-repeat; + background-size: 12px; + background-position: left center; + margin-top: 6px; +} + +.project-item-warnings > span, +.project-item-errors > span { + font-size: 11px; + padding-left: 16px; + font-weight: bold; +} + + +/********* MANIFEST EDITOR ***********/ + +.manifest-editor { + display: flex; + flex-direction: column; + flex-grow: 1; + background-color: #000000; +} + +.manifest-header { + display: flex; + flex-direction: row; +} + +.manifest-header > h2 { + font-size: 18px; + margin: 1em 15px 1em 30px; + display: none; +} + +.manifest-header > button { + margin: 18px 0; + font-size: 11px; + border-right-width: 0; + padding-top: 1px; + padding-bottom: 2px; + -moz-padding-start: .5em; + -moz-padding-end: calc(.5em + 1px); + border: none; + border-radius: 300px; + cursor: pointer; + background-color: #C09070; + text-transform: uppercase; + display: none; +} + +.manifest-header > button:hover:active { + padding-top: 2px; + padding-bottom: 1px; + -moz-padding-start: calc(.5em + 1px); + -moz-padding-end: .5em; +} + +.manifest-header > button:not([disabled]):hover { + background-color: #FFCF00; + color: #000000; +} + +.manifest-header > button[disabled] { + background-color: #402858; + color: #000000; + pointer-events: none; +} + +.manifest-header > button:last-child { + border-right-width: 1px; +} + +[type="packaged"] > .editable { + display: block; +} + +[type="hosted"] > .viewable { + display: block; +} +/* +.manifest-button-save { + color: #777; +} + +.manifest-button-save:hover { + background-color: #777; + color: #FFF; +} + +.manifest-button-save[disabled] { + color: #777; +} +*/ +.variables-view { + flex-grow: 1; + border: 0; + border-top: 5px solid #9C9CFF; +} + +/* Bug 925921: Remove when the manifest editor is always on */ + +.manifest-editor { + display: none; +} + +.project-details { + flex-grow: 1; +} + +#lense[manifest-editable] .manifest-editor { + display: flex; +} + +#lense[manifest-editable] .project-details { + flex-grow: 0; +} + +/* End blocks to remove */