UIFixes: Minor Appmanager and Launcher UI fixes
Change-Id: I1eabedd0191e6ae03cd6dcd945d569a93956a5d2
diff --git a/core/installer/welcome/static/appmanager.css b/core/installer/welcome/static/appmanager.css
index f48a1ea..5bd3dc4 100644
--- a/core/installer/welcome/static/appmanager.css
+++ b/core/installer/welcome/static/appmanager.css
@@ -18,18 +18,38 @@
--pico-grid-spacing-horizontal: 0;
--search-background-color: #d6d6d6;
--pico-color: #3a3a3a;
- --pico-form-element-color: var(--pico-muted-color);
+ --pico-form-element-color: #3a3a3a;
--pico-primary-inverse: #3a3a3a;
+ --pico-tooltip-background-color: #3a3a3a;
+ --pico-tooltip-color: #d6d6d6;
+ --pico-icon-color: #3a3a3a;
+ --icon-width: 50px;
+ --icon-height: 50px;
+ --icon-margin-left: 6px;
+ --icon-margin-right: 6px;
+ --app-details-padding-right: calc(
+ var(--icon-margin-right) + var(--icon-margin-left) + var(--icon-width)
+ );
h3,
p {
- color: var(--pico-accordion-open-summary-color);
+ --pico-color: #3a3a3a;
}
label {
- color: var(--pico-secondary);
+ color: var(--pico-color);
}
input:is([type="checkbox"]) {
--pico-form-element-focus-color: none;
- --pico-border-color: var(--pico-secondary);
+ --pico-border-color: var(--pico-color);
+ }
+ [data-tooltip]:not(a, button, input) {
+ text-decoration: none;
+ cursor: pointer;
+ }
+ #menu-nav nav ul li a {
+ --pico-primary: #3a3a3a;
+ }
+ .icon {
+ color: var(--pico-icon-color);
}
}
@@ -45,6 +65,14 @@
margin-left: 0;
margin-right: 0;
}
+
+ #content {
+ width: 100% !important;
+ }
+
+ .app-details {
+ padding-right: 22px !important;
+ }
}
body > header {
@@ -89,7 +117,7 @@
body > main {
display: grid;
grid-template-rows: auto auto 1fr;
- grid-template-columns: 11rem 1fr;
+ grid-template-columns: 11rem calc(100% - 11rem);
grid-template-areas: "menu content";
column-gap: 2rem;
margin-top: 1rem;
@@ -102,6 +130,10 @@
color: var(--pico-primary-hover);
}
+header > svg {
+ margin-right: var(--pico-spacing);
+}
+
.search-bar {
max-width: 616px;
width: 100%;
@@ -117,9 +149,10 @@
}
.icon {
- margin: 0 6px;
+ margin: 0 var(--icon-margin-right) 0 var(--icon-margin-left);
flex-shrink: 0;
- color: var(--pico-accordion-open-summary-color);
+ /* --pico-primary: #3a3a3a;
+ color: var(--pico-color); */
}
.app-details {
@@ -127,6 +160,7 @@
flex-direction: column;
flex-grow: 1;
position: relative;
+ padding-right: var(--app-details-padding-right);
}
.app-name-container {
@@ -148,15 +182,17 @@
color: var(--pico-primary-hover);
}
-.description {
- margin-bottom: 3px;
- margin-left: 5px;
- text-decoration: none !important;
-}
-
.app-link:hover .app {
text-decoration: underline;
}
+.primary:hover {
+ text-decoration: underline;
+ color: var(--pico-primary-hover);
+}
+
+.description {
+ margin: 0 0 3px 5px;
+}
.instance-count {
display: flex;
@@ -210,6 +246,10 @@
padding-bottom: 0;
}
+nav hr {
+ border-color: var(--pico-color);
+}
+
input[type="search"] {
margin-bottom: 0;
height: 100%;
@@ -253,6 +293,7 @@
#content {
grid-area: content;
+ width: calc(100% - 11rem);
}
main > aside#menu-nav nav {
@@ -278,3 +319,7 @@
.progress li {
list-style-type: none;
}
+
+.primary {
+ color: #7f9f7f;
+}