First pass on app management UI

core/client/app/styles/app.css

@@ -41,3 +41,4 @@
 @import "layouts/about.css";
 @import "layouts/tags.css";
 @import "layouts/error.css";
+@import "layouts/packages.css";

core/client/app/styles/layouts/packages.css

@@ -0,0 +1,256 @@
+/* Packages - Themes / Apps
+/* ---------------------------------------------------------- */
+
+.package-filter {
+    border-radius: 5px;
+}
+@media (max-width: 1460px) {
+    .package-filter {
+        max-width: 700px;
+    }
+}
+
+
+/* Main Layout
+/* ---------------------------------------------------------- */
+
+.package-grid {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: space-between;
+    margin: -10px -10px 4vw -10px;
+    max-width: 1200px;
+}
+
+
+/* Package Card
+/* ---------------------------------------------------------- */
+
+.package-card-app {
+    flex: 1 1 500px;
+    overflow: hidden;
+    margin: 10px;
+    padding: 20px;
+    max-width: 700px;
+    border: rgba(0,0,0,0.1) 1px solid;
+    border-radius: 5px;
+    transition: background 0.3s ease;
+}
+
+.package-card-app:hover {
+    background: rgba(0,20,60,0.03);
+    cursor: pointer;
+    transition: background 0.1s ease;
+}
+
+.package-card-content {
+    display: flex;
+}
+
+.package-card-app-icon {
+    flex: 0 0 60px;
+    margin: 0 15px 0 0;
+    width: 60px;
+    height: 60px;
+    background-position: center center;
+    background-size: cover;
+    border-radius: 15%;
+}
+
+.package-card-meta {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.package-card-app-title {
+    overflow: hidden;
+    margin: 0 0 4px 0;
+    padding: 0 70px 0 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 1.9rem;
+    font-weight: normal;
+}
+
+.package-card-stats {
+    position: absolute;
+    top: -5px;
+    right: 0;
+    display: flex;
+    align-items: center;
+}
+
+.package-downloads {
+    display: flex;
+    align-items: center;
+    height: 26px;
+    border: transparent 1px solid;
+    color: var(--midgrey);
+    font-size: 13px;
+    line-height: 24px;
+}
+
+.package-downloads:hover {
+    cursor: default;
+}
+
+.package-downloads i {
+    margin-right: 5px;
+    font-size: 15px;
+}
+
+
+.package-download-count {
+    font-size: 13px;
+}
+
+.package-card-app-desc {
+    display: -webkit-box;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    max-height: 4.2rem;
+    height: 38px;
+    color: var(--midgrey);
+    text-overflow: ellipsis;
+    font-size: 1.4rem;
+    line-height: 1.3em;
+    font-weight: 200;
+
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+@media (min-width: 600px) and (max-width: 1460px) {
+    .package-card-app-desc {
+        padding-right: 80px;
+    }
+}
+
+
+/* Package Card Footer
+/* ---------------------------------------------------------- */
+
+.package-card-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 15px;
+    width: 100%;
+}
+@media (max-width: 540px) {
+    .package-card-footer {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .package-card-footer .package-developer {
+        display: none;
+    }
+}
+
+.package-developer {
+    display: flex;
+    align-items: center;
+    color: var(--midgrey);
+}
+
+.package-developer:hover {
+    color: var(--blue);
+}
+
+.package-developer img {
+    flex-shrink: 0;
+    margin-right: 6px;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+}
+
+.package-developer-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 1.4rem;
+}
+
+.package-controls {
+    flex-shrink: 0;
+    display: flex;
+    overflow: hidden;
+    border: rgba(0,0,0,0.1) 1px solid;
+    border-radius: 4px;
+}
+
+.package-controls-button {
+    display: flex;
+    align-items: center;
+    padding: 7px 12px;
+    border-left: rgba(0,0,0,0.1) 1px solid;
+    background: #fff;
+    color: var(--midgrey);
+    font-size: 1.3rem;
+    line-height: 1;
+    transition: none;
+}
+
+.package-controls-button:first-child {
+    border: none;
+}
+
+.package-controls-button:hover {
+    color: var(--darkgrey);
+}
+
+.package-controls-button i {
+    margin-right: 5px;
+    width: 11px;
+    height: 11px;
+    font-size: 11px;
+}
+
+.package-disable {
+    border-right: var(--green) 3px solid;
+}
+
+.package-enable {
+    border-right: var(--red) 3px solid;
+}
+
+
+/* Media Queries
+/* ---------------------------------------------------------- */
+
+@media (max-width: 800px) {
+    .package-grid {
+        overflow: hidden;
+        margin: 0 0 4vw 0;
+        border: #e1e1e1 1px solid;
+        border-radius: 5px;
+    }
+
+    .package-card-app {
+        margin: 0;
+        border: none;
+        border-top: #e1e1e1 1px solid;
+        border-radius: 0;
+    }
+    .package-card-app:first-of-type {
+        border-top: none;
+    }
+}
+
+@media (max-width: 760px) {
+    .package-developer {
+        display: none;
+    }
+    .package-card-footer {
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 600px) {
+    .package-grid {
+        margin: -5px -20px 4vw -20px;
+        border: none;
+    }
+}

core/client/app/styles/patterns/icons.css

@@ -253,3 +253,9 @@
 .icon-add2:before {
     content: "\e045";
 }
+.icon-pause:before {
+    content: "\e046";
+}
+.icon-play:before {
+    content: "\e047";
+}