src/reducers/ocsApiReducer.js

+const electron = window.require('electron');
+const ipcRenderer = electron.ipcRenderer;
+
+export const OcsApiReducerInitialState = {
+    loading:true,
+    installTypes:[],
+    installedItems:[],
+    installedItemTypes:[],
+    updateItems:[],
+    downloadItems:[]
+}
+
+function OcsApiReducer(state,action){
+    switch(action.type){
+        case 'SET_API':{
+            return { ...state, ocsManagerApi:action.ocsManagerApi,loading:false}
+        }
+        case 'SET_INSTALL_TYPES':{
+            return { ...state, installTypes:action.installTypes}
+        }
+        case 'SET_INSTALLED_ITEMS':{
+            const installedItems = Object.keys(action.installedItems).map((k) => action.installedItems[k]);
+            let installedItemTypes = [];
+            installedItems.forEach(function(item,index){
+                const installedItemType = item.install_type;
+                if (installedItemTypes.indexOf(installedItemType) === -1) installedItemTypes.push(installedItemType);
+            });
+            return { ...state, installedItems:installedItems, installedItemTypes:installedItemTypes }
+        }
+        case 'SET_DOWNLOAD_ITEM':{
+            const item = { ...action.item,status:'Downloading' }
+            console.log(item);
+            const downloadItems = [ ...state.downloadItems, item ]
+            return { ...state, downloadItems:downloadItems}
+        }
+        case 'UPDATE_ITEM_DOWNLOAD_PROGRESS':{
+            const downloadItemIndex = state.downloadItems.findIndex((item) => item.url === action.itemUrl);
+            const newDownloadItem = { ...state.downloadItems[downloadItemIndex] }
+            if (action.bytesRecieved) newDownloadItem.bytesRecieved = action.bytesRecieved;
+            if (action.bytesTotal) newDownloadItem.bytesTotal = action.bytesTotal
+            if (action.status) newDownloadItem.status = action.status;
+            const downloadItems = [
+                ...state.downloadItems.slice(0,downloadItemIndex),
+                newDownloadItem,
+                ...state.downloadItems.slice(downloadItemIndex + 1, state.downloadItems.length)
+            ];
+            return { ...state, downloadItems:downloadItems }
+        }
+        case 'SET_UPDATE_CHECK':{
+            return { ...state, updateCheckedAt:action.updateCheckedAt,updateCheckAfter:action.updateCheckAfter}
+        }
+        default: {
+            return state;
+        }
+    }
+}
+
+export default OcsApiReducer;
\ No newline at end of file

src/styles/App.css

+#main {
+  width: 100%;
+  height: 100%;
+  padding-top: 40px;
+  position: relative;
+}
+#main #webview-wrapper {
+  height: 100%;
+  width: 100%;
+}
+#main #webview-container {
+  height: 100%;
+  width: 100%;
+}
+#main #webview-container webview {
+  height: 100%;
+}
+#main #webview-mask {
+  background-color: #fff;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 40px;
+  left: 0;
+}

src/styles/App.less

+#main {
+    width:100%;
+    height: 100%;
+    padding-top:40px;
+    position: relative;
+
+    #webview-wrapper {
+        height:100%;
+        width:100%;
+    }
+
+    #webview-container {
+        height: 100%;
+        width: 100%;
+   
+        webview {
+            height: 100%;
+        }
+    }
+
+    #webview-mask {
+        background-color: #fff;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 40px;
+        left: 0;
+    }
+
+}
\ No newline at end of file

src/styles/AppDialogs.css

+div#dialog-overlay-background {
+  display: flex;
+  flex-flow: column nowrap;
+  z-index: 1000;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+div#dialog-overlay {
+  display: flex;
+  flex-flow: column nowrap;
+  z-index: 1000;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+div#dialog-overlay.inactive {
+  display: none;
+}
+article.dialog {
+  display: flex;
+  flex-flow: column nowrap;
+  min-width: auto;
+  max-width: auto;
+  min-height: auto;
+  max-height: auto;
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  box-shadow: 0 0 20px 10px var(--color-shadow);
+  background-color: var(--color-content);
+  z-index: 1001;
+}
+article.dialog header {
+  display: flex;
+  flex-flow: row nowrap;
+  flex: 0 0 auto;
+  align-items: center;
+  padding: 5px 10px;
+  border-bottom: 1px solid var(--color-border);
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+article.dialog header div.header-content {
+  flex: 1 1 auto;
+}
+article.dialog header div.header-control {
+  flex: 0 0 auto;
+}
+article.dialog header div.header-control button {
+  height: 30px;
+  width: 30px;
+}
+article.dialog header div.header-control button i {
+  height: 24px;
+}
+article.dialog header.inactive {
+  display: none;
+}
+article.dialog article.content {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1 1 auto;
+}
+article.dialog article.content .inner-content {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+  padding: 1em;
+}
+article.dialog article.content .inner-content h4,
+article.dialog article.content .inner-content p {
+  margin: 0.5em 0;
+  text-align: center;
+  color: #444444;
+}
+article.dialog article.content figure {
+  display: inline-block;
+  width: 128px;
+  height: 128px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 128px 128px;
+  text-align: center;
+}
+article.dialog article.content figure img {
+  width: auto;
+  height: 100%;
+  margin: 0 auto;
+}
+article.dialog article.content h3 {
+  margin: 1em;
+}
+article.dialog footer {
+  flex: 0 0 auto;
+  padding: 5px 10px;
+  border-top: 1px solid var(--color-border);
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+article.dialog footer.inactive {
+  display: none;
+}
+article.dialog#loading-dialog {
+  width: 400px;
+  height: 300px;
+}
+article.dialog#about-dialog {
+  width: 500px;
+  height: auto;
+}
+article.dialog#collections-dialog {
+  width: 80%;
+  height: 80%;
+}

src/styles/AppDialogs.less

+div#dialog-overlay-background {
+    display: flex;
+    flex-flow: column nowrap;
+    z-index: 1000;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;    
+}
+
+div#dialog-overlay {
+    display: flex;
+    flex-flow: column nowrap;
+    z-index: 1000;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+
+    &.inactive {
+        display: none;
+    }
+}
+
+article.dialog {
+    display: flex;
+    flex-flow: column nowrap;
+    min-width: auto;
+    max-width: auto;
+    min-height:auto;
+    max-height:auto;
+    border: 1px solid var(--color-border);
+    border-radius: 5px;
+    box-shadow: 0 0 20px 10px var(--color-shadow);
+    background-color: var(--color-content);
+    z-index: 1001;
+
+    header {
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 0 0 auto;
+        align-items: center;
+        padding: 5px 10px;
+        border-bottom: 1px solid var(--color-border);
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+
+        div.header-content {
+            flex: 1 1 auto;
+        }
+        
+        div.header-control {
+            flex: 0 0 auto;
+
+            button {
+                height: 30px;
+                width: 30px;
+                
+                i {
+                    height: 24px;
+                }
+            }
+        }
+    }
+    
+    header.inactive {
+        display: none;
+    }
+    
+    article.content {
+        display: flex;
+        flex-flow: column nowrap;
+        flex: 1 1 auto;
+
+        .inner-content {
+            display: flex;
+            flex-flow: column nowrap;
+            flex: 1 1 auto;
+            align-items: center;
+            justify-content: center;
+            padding:1em;
+
+            h4, p {
+                margin: 0.5em 0;
+                text-align: center;
+                color:#444444;
+            }
+        }
+
+        figure {
+            display: inline-block;
+            width: 128px;
+            height: 128px;
+            background-position: center center;
+            background-repeat: no-repeat;
+            background-size: 128px 128px;
+            text-align: center;
+
+            img {
+                width: auto;
+                height:100%;
+                margin: 0 auto;
+            }
+        }
+        
+        h3 {
+            margin: 1em;
+        }
+    }
+    
+    footer {
+        flex: 0 0 auto;
+        padding: 5px 10px;
+        border-top: 1px solid var(--color-border);
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
+    
+    footer.inactive {
+        display: none;
+    }
+
+    &#loading-dialog {
+        width:400px;
+        height:300px;
+    }
+
+    &#about-dialog {
+        width:500px;
+        height:auto;
+    }
+
+    &#collections-dialog {
+        width:80%;
+        height:80%;
+    }
+}
\ No newline at end of file

src/styles/Collections.css

+/*---------------------------------------------------
+    LESS Elements 0.9
+  ---------------------------------------------------
+    A set of useful LESS mixins
+    More info at: http://lesselements.com
+  ---------------------------------------------------*/
+/* MIXINS */
+/* /MIXINS */
+/* COLORS */
+/* /COLORS */
+#collections-container {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1 1 auto;
+  position: relative;
+  padding-left: 200px;
+}
+#collections-container aside {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1 1 auto;
+  border-right: 1px solid var(--color-border);
+  background-color: var(--color-widget);
+  overflow: auto;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 200px;
+  height: 100%;
+}
+#collections-container aside h4 {
+  padding: 0.5em 1em;
+}
+#collections-container aside ul.task {
+  border-bottom: 1px solid var(--color-border);
+}
+#collections-container aside ul li a {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  width: 100%;
+  padding: 0.5em 1em;
+  background-color: transparent;
+  color: var(--color-text);
+  cursor: pointer;
+}
+#collections-container aside ul li a.selected {
+  background-color: var(--color-active);
+}
+#collections-container aside ul li a span.name {
+  flex: 1 1 auto;
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 1;
+  text-transform: capitalize;
+}
+#collections-container aside ul li a span.app-badge {
+  flex: 0 0 auto;
+}
+#collections-container #collections-switch-view {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1 1 auto;
+  overflow: auto;
+}
+#collections-container #collections-switch-view ul {
+  list-style: none;
+}
+#collections-container #collections-switch-view ul li {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  margin: 1em;
+  padding: 1em 2em;
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  -webkit-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+#collections-container #collections-switch-view ul li:hover {
+  border-color: rgba(0, 0, 0, 0.3);
+}
+#collections-container #collections-switch-view ul + ul li:first-of-type {
+  margin-top: 0;
+}
+#collections-container #collections-switch-view figure {
+  flex: 0 0 auto;
+  width: 64px;
+  height: 64px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+#collections-container #collections-switch-view figure i .MuiSvgIcon-root {
+  font-size: inherit;
+}
+#collections-container #collections-switch-view div.item-main {
+  flex: 1 1 auto;
+  padding: 0 1em;
+}
+#collections-container #collections-switch-view nav.actions {
+  flex: 0 0 auto;
+}
+#collections-container #collections-switch-view nav.actions button {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-block;
+  width: inherit;
+  height: inherit;
+  padding: 0.5em 1em;
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  background-color: var(--color-content);
+  outline: none;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+#collections-container #collections-switch-view nav.actions button:enabled {
+  cursor: pointer;
+}
+#collections-container #collections-switch-view nav.actions button:enabled:hover {
+  background-color: var(--color-active);
+}
+#collections-container #collections-switch-view nav.actions button:checked,
+#collections-container #collections-switch-view nav.actions button:checked:hover {
+  background-color: var(--color-information-secondary);
+}
+#collections-container #collections-switch-view nav.actions button + button {
+  margin-left: 3px;
+}
+#collections-container #collections-switch-view .progress-bar-container {
+  display: inline-block;
+  width: 100%;
+  margin: 0.5em 0;
+}
+#collections-container #collections-switch-view .progress-bar-container progress {
+  width: 100%;
+}

src/styles/Collections.less

+@import "elements.less";
+
+#collections-container {
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 1 1 auto;
+    position: relative;
+    padding-left: 200px;
+
+    aside {
+        display: flex;
+        flex-flow: column nowrap;
+        width: 200px;
+        flex: 1 1 auto;
+        border-right: 1px solid var(--color-border);
+        background-color: var(--color-widget);
+        overflow: auto;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 200px;
+        height: 100%;
+    
+        h4 {
+            padding: 0.5em 1em;
+        }
+    
+        ul.task {
+            border-bottom: 1px solid var(--color-border);
+        }
+    
+        ul li a {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            width: 100%;
+            padding: 0.5em 1em;
+            background-color: transparent;
+            color: var(--color-text);
+            cursor: pointer;
+    
+            &.selected {
+                background-color: var(--color-active);
+            }
+    
+            span.name {
+                flex: 1 1 auto;
+                display: inline-block;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                line-height: 1;
+                text-transform:capitalize;
+            }
+    
+            span.app-badge {
+                flex: 0 0 auto;
+            }
+        }
+    }
+
+    #collections-switch-view {
+        display: flex;
+        flex-flow: column nowrap;
+        flex: 1 1 auto;
+        overflow: auto;
+
+        ul {
+            list-style: none;
+
+            li {
+                display: flex;
+                flex-flow: row nowrap;
+                align-items: center;
+                margin: 1em;
+                padding: 1em 2em;
+                border: 1px solid var(--color-border);
+                border-radius: 5px;
+                .transition();
+
+                &:hover {
+                    border-color: rgba(0,0,0,0.3);
+                }
+            }
+        }
+
+        ul + ul {
+            li:first-of-type {
+                margin-top:0;
+            }
+        }
+
+        figure {
+            flex: 0 0 auto;
+            width: 64px;
+            height: 64px;
+            background-position: center center;
+            background-repeat: no-repeat;
+            background-size: contain;
+
+            i {
+                .MuiSvgIcon-root {
+                    font-size:inherit;
+                }
+            }
+        }
+
+        div.item-main {
+            flex: 1 1 auto;
+            padding: 0 1em;
+        }
+
+        nav.actions {
+            flex: 0 0 auto;
+
+            button {
+                -webkit-appearance: none;
+                appearance: none;
+                display: inline-block;
+                width: inherit;
+                height: inherit;
+                padding: 0.5em 1em;
+                border: 1px solid var(--color-border);
+                border-radius: 3px;
+                background-color: var(--color-content);
+                outline: none;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+
+                &:enabled {
+                    cursor: pointer;
+            
+                    &:hover {
+                        background-color: var(--color-active);
+                    }
+                }
+            
+                &:checked, &:checked:hover {
+                    background-color: var(--color-information-secondary);
+                }
+            }
+
+            button + button {
+                margin-left:3px;
+            }
+        
+        }
+        
+        .progress-bar-container {
+            display: inline-block;
+            width: 100%;
+            margin: 0.5em 0;
+
+            progress {
+                width:100%;
+            }
+        }
+    }
+}
\ No newline at end of file

src/styles/Index.css

+@import url('default/color.css');
+@import url('default/component.css');
+@import url('default/global.css');
+@import url('default/reset.css');
+#root {
+  height: 100%;
+  width: 100%;
+}
+button {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: inherit;
+  height: inherit;
+  border: 0;
+  border-radius: 3px;
+  background-color: transparent;
+  outline: none;
+  transition: background-color 0.2s ease-out;
+}
+button:enabled {
+  cursor: pointer;
+}
+button:enabled:hover {
+  background-color: var(--color-active);
+}
+button:checked,
+button:checked:hover {
+  background-color: var(--color-information-secondary);
+}
+span.app-badge {
+  display: inline-block;
+  padding: 3px 6px;
+  border-radius: 10px;
+  font-size: 11px;
+  line-height: 1;
+}
+span.app-badge.low-emphasis {
+  background-color: var(--color-active-secondary);
+  color: var(--color-text);
+}
+span.app-badge.medium-emphasis {
+  background-color: var(--color-information);
+  color: var(--color-content);
+}
+span.app-badge.high-emphasis {
+  background-color: var(--color-important);
+  color: var(--color-content);
+}

src/styles/Index.less

+@import url('./default/color.css');
+@import url('./default/component.css');
+@import url('./default/global.css');
+@import url('./default/reset.css');
+
+#root {
+    height:100%;
+    width:100%;
+}
+
+button {
+    -webkit-appearance: none;
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: inherit;
+    height: inherit;
+    border: 0;
+    border-radius: 3px;
+    background-color: transparent;
+    outline: none;
+    transition: background-color 0.2s ease-out;
+
+    &:enabled {
+        cursor: pointer;
+
+        &:hover {
+            background-color: var(--color-active);
+        }
+    }
+
+    &:checked, &:checked:hover {
+        background-color: var(--color-information-secondary);
+    }
+}
+
+span.app-badge {
+    display: inline-block;
+    padding: 3px 6px;
+    border-radius: 10px;
+    font-size: 11px;
+    line-height: 1;
+
+    &.low-emphasis {
+        background-color: var(--color-active-secondary);
+        color: var(--color-text);
+    }
+
+    &.medium-emphasis {
+        background-color: var(--color-information);
+        color: var(--color-content);
+    }
+
+    &.high-emphasis {
+        background-color: var(--color-important);
+        color: var(--color-content);
+    }
+}

src/styles/MenuBar.css

+/*---------------------------------------------------
+    LESS Elements 0.9
+  ---------------------------------------------------
+    A set of useful LESS mixins
+    More info at: http://lesselements.com
+  ---------------------------------------------------*/
+/* MIXINS */
+/* /MIXINS */
+/* COLORS */
+/* /COLORS */
+div.background-overlay {
+  z-index: 999;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+/** MENU BAR **/
+nav#menu-bar {
+  top: 0;
+  left: 0;
+  position: absolute;
+  height: 40px;
+  width: 100%;
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-widget);
+}
+nav#menu-bar #main-menu {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  height: inherit;
+  margin: 0 4px;
+}
+nav#menu-bar #main-menu > li {
+  flex: 0 0 auto;
+  height: 30px;
+  margin: 0 2px;
+  width: 30px;
+}
+nav#menu-bar #main-menu > li > button {
+  height: 30px;
+  width: 30px;
+}
+nav#menu-bar #main-menu > li > button i {
+  height: 24px;
+  position: relative;
+}
+nav#menu-bar #main-menu > li span.app-badge {
+  display: inline-block;
+  padding: 3px 6px;
+  border-radius: 10px;
+  font-size: 11px;
+  line-height: 1;
+  z-index: 1;
+  position: absolute;
+  top: -5px;
+  right: -12px;
+  font-style: initial;
+}
+nav#menu-bar #main-menu > li span.app-badge.low-emphasis {
+  background-color: var(--color-active-secondary);
+  color: var(--color-text);
+}
+nav#menu-bar #main-menu > li span.app-badge.medium-emphasis {
+  background-color: var(--color-information);
+  color: var(--color-content);
+}
+nav#menu-bar #main-menu > li span.app-badge.high-emphasis {
+  background-color: var(--color-important);
+  color: var(--color-content);
+}
+nav#menu-bar #main-menu > li#omnibox-menu {
+  display: flex;
+  flex-flow: row nowrap;
+  flex: 1 1 auto;
+  justify-content: center;
+}
+nav#menu-bar #main-menu > li #user-menu-container button {
+  padding-top: 3px;
+  height: 30px;
+}
+nav#menu-bar #main-menu > li ul#user-menu {
+  z-index: 1000;
+  position: relative;
+  top: 0;
+  left: -220px;
+  width: 250px;
+  min-width: auto;
+  max-width: auto;
+  height: auto;
+  min-height: auto;
+  max-height: auto;
+  padding: 3px 0;
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  box-shadow: 0 5px 20px 0 var(--color-shadow);
+  background-color: var(--color-content);
+}
+nav#menu-bar #main-menu > li ul#user-menu li {
+  width: 100%;
+  height: 30px;
+  margin: 0;
+}
+nav#menu-bar #main-menu > li ul#user-menu li a {
+  display: block;
+  padding: 0.5em 1em;
+  background-color: transparent;
+  color: var(--color-text);
+  line-height: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+nav#menu-bar #main-menu > li ul#user-menu li a:hover {
+  background-color: var(--color-active);
+  color: var(--color-text);
+}
+@media (min-width: 900px) {
+  nav#menu-bar ul li#omnibox-menu {
+    margin-right: calc(128px);
+  }
+}
+/** OMNI BOX **/
+div#omnibox-container {
+  max-width: 500px;
+  width: 100%;
+  height: 30px;
+}
+div#omnibox-container div#omnibox {
+  position: relative;
+  width: inherit;
+  height: inherit;
+}
+div#omnibox-container div#omnibox.active::after {
+  background-color: var(--color-important);
+}
+div#omnibox-container div#omnibox.download-active::after {
+  background: linear-gradient(90deg, transparent, var(--color-information) 50%, transparent);
+  background-size: 300% 300%;
+  animation: gradient 2s ease-in-out infinite alternate;
+  position: absolute;
+  width: 101%;
+  height: 36px;
+  left: -2.5px;
+}
+div#omnibox-container div#omnibox div#omnibox-wrapper {
+  z-index: 10;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 3px;
+  background-color: var(--color-widget);
+  overflow: hidden;
+}
+div#omnibox-container div#omnibox #progress-bar-container {
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  z-index: 11;
+  overflow: hidden;
+  border-radius: 0 3px 3px 0;
+}
+div#omnibox-container div#omnibox::after {
+  display: block;
+  content: '';
+  z-index: 9;
+  position: absolute;
+  top: calc(-3px);
+  width: calc(106%);
+  height: calc(106%);
+  border-radius: calc(6px);
+}
+div#omnibox-container div#omnibox-content {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-active-secondary);
+  line-height: 1;
+  transition: background-color 0.2s ease-out;
+}
+div#omnibox-container div#omnibox-content #open-in-browser-container i .MuiSvgIcon-root {
+  font-size: inherit;
+}
+div#omnibox-container div#omnibox-content:hover {
+  background-color: var(--color-active);
+}
+div#omnibox-container div#omnibox-content h3 {
+  flex: 1 1 auto;
+  border-right: 1px solid var(--color-border);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 24px;
+  text-align: center;
+  cursor: pointer;
+}
+div#omnibox-container div#omnibox-content div {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+}
+div#omnibox-container div#omnibox-palette {
+  z-index: 1000;
+  position: relative;
+  top: 0;
+  left: 0;
+  width: inherit;
+  padding: 1em;
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  box-shadow: 0 5px 20px 0 var(--color-shadow);
+  background-color: var(--color-content);
+}
+div#omnibox-container div#omnibox-palette.inactive {
+  display: none;
+}
+div#omnibox-container div#omnibox-palette div.palette-content {
+  padding: 1em;
+  border-bottom: 1px solid var(--color-border);
+}
+div#omnibox-container div#omnibox-palette div.palette-content:last-child {
+  border-bottom: 0;
+}
+div#omnibox-container div#omnibox-palette div.palette-content h4 {
+  margin: 1em 0;
+  text-align: center;
+}
+div#omnibox-container div#omnibox-palette div.palette-content h4 i {
+  position: relative;
+  top: 3px;
+}
+div#omnibox-container div#omnibox-palette div.palette-content p {
+  text-align: center;
+}
+div#omnibox-container div#omnibox-palette div.palette-content nav ul {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+}
+div#omnibox-container div#omnibox-palette div.palette-content nav ul li {
+  width: 50%;
+  padding: 5px;
+}
+div#omnibox-container div#omnibox-palette div.palette-content nav ul li button {
+  padding: 5px;
+  width: 100%;
+  border: 1px solid #ccc;
+  -webkit-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+div#omnibox-container div#omnibox-palette div.palette-content nav ul li button:hover {
+  background-color: white;
+  border-color: #999999;
+}
+div#omnibox-container div#omnibox-palette div.palette-content nav ul li button.active {
+  border-color: #4949f3;
+}
+@keyframes gradient {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 100% 0%;
+  }
+}

src/styles/MenuBar.less

+@import "elements.less";
+
+div.background-overlay {
+  z-index: 999;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/** MENU BAR **/
+nav#menu-bar {
+  top: 0;
+  left: 0;
+  position: absolute;
+  height: 40px;
+  width: 100%;
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-widget);
+
+    #main-menu {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        height: inherit;
+        margin: 0 4px;
+
+        > li {
+            flex: 0 0 auto;
+            height: 30px;
+            margin: 0 2px;
+            width: 30px;
+
+            > button {
+                height: 30px;
+                width: 30px;
+                
+                i {
+                    height: 24px;
+                    position: relative;
+                }
+            }
+
+            span.app-badge {
+              display: inline-block;
+              padding: 3px 6px;
+              border-radius: 10px;
+              font-size: 11px;
+              line-height: 1;
+              z-index: 1;
+              position: absolute;
+              top: -5px;
+              right: -12px;
+              font-style: initial;
+          
+              &.low-emphasis {
+                  background-color: var(--color-active-secondary);
+                  color: var(--color-text);
+              }
+          
+              &.medium-emphasis {
+                  background-color: var(--color-information);
+                  color: var(--color-content);
+              }
+          
+              &.high-emphasis {
+                  background-color: var(--color-important);
+                  color: var(--color-content);
+              }
+          }
+          
+            &#omnibox-menu {
+                display: flex;
+                flex-flow: row nowrap;
+                flex: 1 1 auto;
+                justify-content: center;
+            }
+
+            #user-menu-container {
+              button {
+                padding-top: 3px;
+                height: 30px;
+              }
+            }
+
+            ul#user-menu {
+                z-index: 1000;
+                position: relative;
+                top: 0;
+                left: -220px;
+                width: 250px;
+                min-width: auto;
+                max-width: auto;
+                height: auto;
+                min-height: auto;
+                max-height: auto;
+                padding: 3px 0;
+                border: 1px solid var(--color-border);
+                border-radius: 5px;
+                box-shadow: 0 5px 20px 0 var(--color-shadow);
+                background-color: var(--color-content);
+
+                li {
+                    width: 100%;
+                    height: 30px;
+                    margin: 0;
+
+                    a {
+                        display: block;
+                        padding: 0.5em 1em;
+                        background-color: transparent;
+                        color: var(--color-text);
+                        line-height: 1;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        cursor: pointer;
+
+                        &:hover {
+                            background-color: var(--color-active);
+                            color: var(--color-text);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: 900px) {
+  nav#menu-bar ul li#omnibox-menu {
+    margin-right: calc(128px);
+  }
+}
+
+/** OMNI BOX **/
+
+div#omnibox-container {
+    max-width: 500px;
+    width: 100%;
+    height: 30px;
+
+    div#omnibox {
+        position: relative;
+        width: inherit;
+        height: inherit;
+    
+        &.active::after {
+            background-color: var(--color-important);
+        }
+
+        &.download-active::after {
+            background: linear-gradient(90deg, transparent, var(--color-information) 50%, transparent);
+            background-size: 300% 300%;
+            animation: gradient 2s ease-in-out infinite alternate;
+            position: absolute;
+            width: 101%;
+            height: 36px;
+            left: -2.5px;
+        }
+    
+        div#omnibox-wrapper {
+            z-index: 10;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 3px;
+            background-color: var(--color-widget);
+            overflow: hidden;
+        }
+
+        #progress-bar-container {
+            width: 100%;
+            height: 2px;
+            position: absolute;
+            bottom: 0px;
+            left: 0;
+            z-index: 11;
+            overflow: hidden;
+            border-radius: 0 3px 3px 0;
+        }    
+    }
+
+    div#omnibox::after {
+        display: block;
+        content: '';
+        z-index: 9;
+        position: absolute;
+        top: calc(-3px);
+        width: calc(106%);
+        height: calc(106%);
+        border-radius: calc(6px);
+    }
+
+    div#omnibox-content {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      background-color: var(--color-active-secondary);
+      line-height: 1;
+      transition: background-color 0.2s ease-out;
+
+      #open-in-browser-container {
+        i {
+          .MuiSvgIcon-root {
+              font-size:inherit;
+          }
+        }
+      }
+
+      &:hover {
+        background-color: var(--color-active);
+      }
+    
+      h3 {
+        flex: 1 1 auto;
+        border-right: 1px solid var(--color-border);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        line-height: 24px;
+        text-align: center;
+        cursor: pointer;
+      }
+
+      div {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        justify-content: center;
+        width: 30px;
+      }
+    }
+
+    div#omnibox-palette {
+      z-index: 1000;
+      position: relative;
+      top: 0;
+      left: 0;
+      width: inherit;
+      padding: 1em;
+      border: 1px solid var(--color-border);
+      border-radius: 5px;
+      box-shadow: 0 5px 20px 0 var(--color-shadow);
+      background-color: var(--color-content);
+    
+      &.inactive {
+        display: none;
+      }
+
+      div.palette-content {
+        padding: 1em;
+        border-bottom: 1px solid var(--color-border);
+        &:last-child {
+          border-bottom: 0;
+        }
+
+        h4 {
+          margin: 1em 0;
+          text-align: center;
+
+          i {
+            position: relative;
+            top: 3px;
+          }  
+        }
+
+        p {
+          text-align: center;
+        }
+
+        nav ul {
+          display: flex;
+          flex-flow: row wrap;
+          justify-content: center;
+
+          li {
+            width: 50%;
+            padding: 5px;
+
+            button {
+              padding:5px;
+              width: 100%;
+              border: 1px solid #ccc;
+              .transition();
+
+              &:hover {
+                background-color: white;
+                border-color: darken(#ccc,20%);
+              }
+
+              &.active {
+                border-color:rgb(73, 73, 243)
+              }
+            }
+          }
+        }
+      }
+    }
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 100% 0%;
+  }
+}

src/styles/default/color.css

+:root,
+:host {
+    --color-text: #444444;
+    --color-text-secondary: #666666;
+    --color-content: #ffffff;
+    --color-widget: #f5f5f5;
+    --color-border: rgba(0,0,0,0.15);
+    --color-shadow: rgba(0,0,0,0.2);
+
+    --color-active: rgba(0,0,0,0.1);
+    --color-active-secondary: rgba(100,100,100,0.1);
+
+    --color-information: #4496d3;
+    --color-information-secondary: #68a4d9;
+    --color-help: var(--color-information);
+    --color-help-secondary: var(--color-information-secondary);
+    --color-important: #f3981d;
+    --color-important-secondary: #ed6d35;
+    --color-accept: #37a34a;
+    --color-accept-secondary: #79c06e;
+    --color-error: #ea5549;
+    --color-error-secondary: #d83473;
+    --color-warning: var(--color-error);
+    --color-warning-secondary: var(--color-error-secondary);
+}

src/styles/default/component.css

+:host {
+    color: var(--color-text);
+}
+a {
+    color: var(--color-information);
+}
+a:hover {
+    color: var(--color-information-secondary);
+}
+
+.fade-in,
+.fade-out {
+    animation: fade 0.2s;
+}
+.fade-out {
+    animation-direction: reverse;
+    animation-fill-mode: forwards;
+}
+@keyframes fade {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1.0;
+    }
+}

src/styles/default/global.css

+html,
+body,
+app-root {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}

src/styles/default/material-icons.css

+
+/* Rules for sizing the icon. */
+.material-icons.md-smaller,
+.material-icons.md-12 { font-size: 12px ; }
+.material-icons.md-small,
+.material-icons.md-18 { font-size: 18px; }
+.material-icons.md-medium,
+.material-icons.md-24 { font-size: 24px; }
+.material-icons.md-large,
+.material-icons.md-36 { font-size: 36px; }
+.material-icons.md-larger,
+.material-icons.md-48 { font-size: 48px; }
+
+/* Rules for using icons as black on a light background. */
+.material-icons.md-dark,
+.material-icons.md-dark.md-active { color: rgba(0, 0, 0, 0.54); }
+.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
+
+/* Rules for using icons as white on a dark background. */
+.material-icons.md-light,
+.material-icons.md-light.md-active { color: rgba(255, 255, 255, 1); }
+.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

src/styles/default/reset.css

+*,
+::before,
+::after {
+    box-sizing: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+}
+
+:root,
+:host {
+    box-sizing: border-box;
+}
+
+:host {
+    display: block;
+}
+
+:host,
+body {
+    font-family: Arial, sans-serif;
+    font-size: 13px;
+    line-height: 1.4;
+    cursor: default;
+}
+
+article,
+section,
+nav,
+aside,
+header,
+footer,
+figure,
+figcaption,
+main,
+embed,
+canvas,
+details,
+summary {
+    display: block;
+}
+
+time,
+mark,
+ruby,
+rt,
+rp,
+wbr,
+datalist,
+keygen,
+progress,
+meter {
+    display: inline;
+}
+
+body,
+article,
+section,
+nav,
+aside,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+footer,
+address,
+p,
+hr,
+pre,
+blockquote,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+figure,
+figcaption,
+div,
+main,
+img,
+iframe,
+embed,
+object,
+video,
+audio,
+table,
+caption,
+tbody,
+thead,
+tfoot,
+tr,
+td,
+th,
+form,
+input,
+button,
+select,
+textarea,
+fieldset,
+legend,
+canvas,
+details,
+summary {
+    margin: 0;
+    padding: 0;
+}
+
+nav ul {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+    outline: none;
+}

src/styles/elements.less

+/*---------------------------------------------------
+    LESS Elements 0.9
+  ---------------------------------------------------
+    A set of useful LESS mixins
+    More info at: http://lesselements.com
+  ---------------------------------------------------*/
+
+/* MIXINS */
+
+  .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
+    background: @color;
+    background: -webkit-gradient(linear,
+                                 left bottom,
+                                 left top,
+                                 color-stop(0, @start),
+                                 color-stop(1, @stop));
+    background: -ms-linear-gradient(bottom,
+                                    @start,
+                                    @stop);
+    background: -moz-linear-gradient(center bottom,
+                                     @start 0%,
+                                     @stop 100%);
+    background: -o-linear-gradient(@stop,
+                                   @start);
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
+  }
+  .bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
+    background: @color;
+    background: -webkit-gradient(linear,
+                                 left bottom,
+                                 left top,
+                                 color-stop(0, rgb(@start,@start,@start)),
+                                 color-stop(1, rgb(@stop,@stop,@stop)));
+    background: -ms-linear-gradient(bottom,
+                                    rgb(@start,@start,@start) 0%,
+                                    rgb(@stop,@stop,@stop) 100%);
+    background: -moz-linear-gradient(center bottom,
+                                     rgb(@start,@start,@start) 0%,
+                                     rgb(@stop,@stop,@stop) 100%);
+    background: -o-linear-gradient(rgb(@stop,@stop,@stop),
+                                   rgb(@start,@start,@start));
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start)));
+  }
+  .bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
+    border-top: solid 1px @top-color;
+    border-left: solid 1px @left-color;
+    border-right: solid 1px @right-color;
+    border-bottom: solid 1px @bottom-color;
+  }
+  .drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
+    -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+    -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+    box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+  }
+  .rounded(@radius: 2px) {
+    -webkit-border-radius: @radius;
+    -moz-border-radius: @radius;
+    border-radius: @radius;
+  }
+  .border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
+    -webkit-border-top-right-radius: @topright;
+    -webkit-border-bottom-right-radius: @bottomright;
+    -webkit-border-bottom-left-radius: @bottomleft;
+    -webkit-border-top-left-radius: @topleft;
+    -moz-border-radius-topright: @topright;
+    -moz-border-radius-bottomright: @bottomright;
+    -moz-border-radius-bottomleft: @bottomleft;
+    -moz-border-radius-topleft: @topleft;
+    border-top-right-radius: @topright;
+    border-bottom-right-radius: @bottomright;
+    border-bottom-left-radius: @bottomleft;
+    border-top-left-radius: @topleft;
+    .background-clip(padding-box);
+  }
+  .opacity(@opacity: 0.5) {
+    -moz-opacity: @opacity;
+    -khtml-opacity: @opacity;
+    -webkit-opacity: @opacity;
+    opacity: @opacity;
+    @opperc: @opacity * 100;
+    -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
+    filter: ~"alpha(opacity=@{opperc})";
+  }
+  .transition-duration(@duration: 0.2s) {
+    -moz-transition-duration: @duration;
+    -webkit-transition-duration: @duration;
+    -o-transition-duration: @duration;
+    transition-duration: @duration;
+  }
+  .transform(...) {
+    -webkit-transform: @arguments;
+    -moz-transform: @arguments;
+    -o-transform: @arguments;
+    -ms-transform: @arguments;
+    transform: @arguments;
+  }
+  .rotation(@deg:5deg){
+    .transform(rotate(@deg));
+  }
+  .scale(@ratio:1.5){
+    .transform(scale(@ratio));
+  }
+  .transition(@duration:0.2s, @ease:ease-out) {
+    -webkit-transition: all @duration @ease;
+    -moz-transition: all @duration @ease;
+    -o-transition: all @duration @ease;
+    transition: all @duration @ease;
+  }
+  .inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
+    -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
+    -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
+    box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
+  }
+  .box-shadow(@arguments) {
+    -webkit-box-shadow: @arguments;
+    -moz-box-shadow: @arguments;
+    box-shadow: @arguments;
+  }
+  .box-sizing(@sizing: border-box) {
+    -ms-box-sizing: @sizing;
+    -moz-box-sizing: @sizing;
+    -webkit-box-sizing: @sizing;
+    box-sizing: @sizing;
+  }
+  .user-select(@argument: none) {
+    -webkit-user-select: @argument;
+    -moz-user-select: @argument;
+    -ms-user-select: @argument;
+    user-select: @argument;
+  }
+
+  .grayscale(@argument: 100%) {
+    -webkit-filter: grayscale(@argument);
+    -moz-filter: grayscale(@argument);
+    -ms-filter: grayscale(@argument);
+    -o-filter: grayscale(@argument);
+    filter: grayscale(@argument);    
+  }
+
+  .columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
+    -moz-column-width: @colwidth;
+    -moz-column-count: @colcount;
+    -moz-column-gap: @colgap;
+    -moz-column-rule-color: @columnRuleColor;
+    -moz-column-rule-style: @columnRuleStyle;
+    -moz-column-rule-width: @columnRuleWidth;
+    -webkit-column-width: @colwidth;
+    -webkit-column-count: @colcount;
+    -webkit-column-gap: @colgap;
+    -webkit-column-rule-color: @columnRuleColor;
+    -webkit-column-rule-style: @columnRuleStyle;
+    -webkit-column-rule-width: @columnRuleWidth;
+    column-width: @colwidth;
+    column-count: @colcount;
+    column-gap: @colgap;
+    column-rule-color: @columnRuleColor;
+    column-rule-style: @columnRuleStyle;
+    column-rule-width: @columnRuleWidth;
+  }
+  .translate(@x:0, @y:0) {
+    .transform(translate(@x, @y));
+  }
+  .background-clip(@argument: padding-box) {
+    -moz-background-clip: @argument;
+    -webkit-background-clip: @argument;
+    background-clip: @argument;
+  }
+
+/* /MIXINS */
+
+/* COLORS */
+
+
+/* /COLORS */
\ No newline at end of file