* { box-sizing: border-box; } html, body { padding: 0; margin: 0; font-family: 'Droid Sans', 'Ubuntu Sans', sans-serif; background-size: contain; background-position: center; background-color: rgb(34, 107, 160); width: 100%; height: 100%; color: white; overflow-x: hidden; } .alert.alert-default { border-radius: 4px; border: 1px solid #ddd; } /* Launcher View */ .launcher { display: flex; width: 100%; height: 100%; flex-direction: column; background: url('../img/background.png') no-repeat; background-size: cover; } .launcher .category-header { padding: 40px 50px 0; font-size: 50px; } .launcher .category-header a.goback { text-decoration: none; color: white; } .launcher .category-header a.goback:hover { -webkit-animation: 500ms pulse-large infinite; } .launcher .category-header > .category-label { float: right; } .launcher .category-header .goback { font-weight: normal; } .launcher ul.apps-list { margin: 0; padding: 0; display: flex; flex-direction: row; list-style: none; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; flex-grow: 1; } .launcher li.app-item { margin: 5px; border-radius: 5px; background-color: rgba(0,0,0,0.4); box-shadow: 5px 5px 30px -2px rgba(0,0,0,0.5); cursor: pointer; padding: 10px 5px; text-align: center; margin-top: 5px; transition: 150ms linear; position: relative; overflow: hidden; width: 125px; height: 125px; } .launcher li.app-item::after { content: ' '; display: block; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); width: 150%; height: 125%; position: absolute; left: -50%; top: -75%; } .launcher li.app-item:hover { background-color: rgba(0,0,0,0.6); } .launcher li.app-item > .app-icon { width: 70%; height: auto; } .launcher li.app-item > .app-label { display: block; text-align: center; color: white; white-space: nowrap; text-overflow: ellipsis; max-width: 90%; overflow: hidden; margin: auto; } /* Edit View */ .edit { display: flex; width: 100%; height: 100%; flex-direction: column; } .edit .menu-bar { padding: 5px 10px; } .edit .menu-bar button { margin-right: 3px; } .edit .workspace { display: flex; flex-direction: row; padding: 10px; flex: 3; } .edit .left-menu { display: flex; flex-direction: column; flex: 1; overflow-y: auto; } .edit .item-form { display: flex; flex-direction: row; flex: 2; } .edit .item-form > form { width: 100%; } .edit .apps-list .icon-theme-selector > select { width: 100%; } .edit .apps-list ul.desktop-apps { list-style: none; padding: 0; height: 100%; margin: 10px 0 0 0; padding: 0 10px 0 0; } .edit .apps-list li.desktop-app { } .edit .desktop-app > .app-icon { height: 35px; width: 35px; display: inline-block; vertical-align: middle; margin-right: 10px; } .edit .profile-tree { flex: 3; padding: 0 5px; } .edit .profile-tree ul { list-style: none; margin: 0; } .edit .profile-tree > .tree-item > ul { padding: 0; } .edit .profile-tree .tree-item .alert { padding: 5px; margin-bottom: 2px; } .edit .profile-tree .tree-item .app-icon { height: 25px; margin-right: 5px; } .edit .app-item-edit { flex: 1; padding: 0 5px; } /* Animations */ .pulse { -webkit-animation: 1s pulse infinite; } @-webkit-keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @-webkit-keyframes pulse-large { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } @-webkit-keyframes slide-in-left { 0% { transform: translateX(-100%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slide-in-right { 0% { transform: translateX(100%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slide-out-left { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } @-webkit-keyframes slide-out-right { 0% { transform: translateX(0%); } 100% { transform: translateX(100%); } }