mirror of
https://github.com/oguzhaninan/Stacer.git
synced 2026-04-18 21:50:08 -04:00
1ce539f097
1 . Option to edit an already added command
1.1 Added a 24*24 icon for edit (assets/img/edit.png)
1.2 Fire an event named 'edit' from STApp to parent StartupApps where the actual editing operation is done. (Helps reuse a lot of code and better design too)
2. Changed the display style property of both delete and edit command (felt it is more intuitive)
3. Add translation for "Update" in English
926 lines
13 KiB
CSS
Executable File
926 lines
13 KiB
CSS
Executable File
body * {
|
|
outline: 0;
|
|
font-family: 'Ubuntu', sans-serif;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Ubuntu', sans-serif;
|
|
src: url(../font/Ubuntu-Regular.ttf) format("truetype");
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
float: left;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
#main {
|
|
width: calc(100% - 55px);
|
|
padding: 0px;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
|
|
.fl {
|
|
float: left;
|
|
}
|
|
|
|
.fr {
|
|
float: right;
|
|
}
|
|
|
|
.w100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.content {
|
|
float: left;
|
|
width: calc(100% - 10px);
|
|
height: 1000px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.content h1 {
|
|
width: calc(100% - 20px);
|
|
float: left;
|
|
display: block;
|
|
margin: 0 0 10px 10px;
|
|
padding: 5px 0 10px 0;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
}
|
|
|
|
|
|
/*---------SIDEBAR---------*/
|
|
|
|
.sidebar-nav {
|
|
width: 55px;
|
|
height: 620px;
|
|
position: fixed;
|
|
top: 0px;
|
|
text-align: center;
|
|
left: 0;
|
|
z-index: 99;
|
|
}
|
|
|
|
.sidebar-nav ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.sidebar-nav ul li {
|
|
float: left;
|
|
display: inline-block;
|
|
padding: 15px 13px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sidebar-nav ul li label {
|
|
padding: 5px 0px 0 45px;
|
|
display: none;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sidebar-nav ul li:hover>label {
|
|
display: block;
|
|
}
|
|
|
|
.sidebar-nav ul li img {
|
|
width: 43px;
|
|
}
|
|
|
|
.sidebar-nav ul li i {
|
|
font-size: 29px;
|
|
height: 28px;
|
|
display: block;
|
|
float: left;
|
|
}
|
|
|
|
|
|
/*---------SIDEBAR---------*/
|
|
|
|
|
|
/*---------DASHBOARD---------*/
|
|
|
|
.cont,
|
|
.line-cont {
|
|
width: 200px;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
margin: 15px;
|
|
padding: 10px 30px 20px 30px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.cont h3,
|
|
.line-cont h3,
|
|
.system-info h3 {
|
|
display: block;
|
|
letter-spacing: 1px;
|
|
padding: 0;
|
|
margin: 0px 0px 12px 0px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.line-cont span {
|
|
display: block;
|
|
text-align: right;
|
|
}
|
|
|
|
.line-cont h3 {
|
|
text-align: left;
|
|
}
|
|
|
|
.line-cont {
|
|
float: right;
|
|
width: 350px;
|
|
padding: 20px 30px;
|
|
}
|
|
|
|
.system-info {
|
|
width: 330px;
|
|
float: left;
|
|
display: block;
|
|
font-size: 16px;
|
|
margin: 20px;
|
|
padding: 10px 25px 15px 25px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.system-info ul {
|
|
padding: 0;
|
|
list-style: none;
|
|
font-weight: normal;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.line-cont div {
|
|
margin: 0px 0px 15px 0px;
|
|
}
|
|
|
|
.circle-bar {
|
|
background-repeat: no-repeat;
|
|
background-position: center 65px;
|
|
}
|
|
|
|
|
|
/*---------DASHBOARD---------*/
|
|
|
|
|
|
/*--------SWITCH-----------*/
|
|
|
|
.switch {
|
|
display: none;
|
|
}
|
|
|
|
.switch+label,
|
|
.switch+label::after {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 44px;
|
|
height: 22px;
|
|
border-radius: 9999px;
|
|
transition: 300ms;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.switch+label::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 3px;
|
|
width: 17px;
|
|
height: 17px;
|
|
margin-top: 2px;
|
|
box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.2), 0 0 0 2px #EF4836;
|
|
}
|
|
|
|
.switch:checked+label::after {
|
|
left: 22px;
|
|
box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.2), 0 0 0 2px #4BD865;
|
|
}
|
|
|
|
.switch+label:hover:active::after {
|
|
width: 23px;
|
|
}
|
|
|
|
.switch:checked+label:hover:active::after {
|
|
left: 17px;
|
|
}
|
|
|
|
|
|
/*--------SWITCH-----------*/
|
|
|
|
|
|
/*----------SCROLL--------*/
|
|
|
|
.scroll {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.scroll::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.scroll::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
.scroll::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
|
|
/*----------SCROLL--------*/
|
|
|
|
|
|
/*---------ITEM LIST---------*/
|
|
|
|
.item-list {
|
|
width: 700px;
|
|
height: 520px;
|
|
margin: 15px auto 20px auto;
|
|
}
|
|
|
|
.item-list ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
height: calc(100% - 40px);
|
|
width: 100%;
|
|
}
|
|
|
|
.item-list ul li {
|
|
position: relative;
|
|
float: left;
|
|
display: block;
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
margin: 6px 3px;
|
|
width: calc(100% - 70px);
|
|
border-radius: 4px;
|
|
padding: 10px 15px 10px 50px;
|
|
}
|
|
|
|
.item-list h3,
|
|
.processes h3 {
|
|
margin: 0px;
|
|
float: left;
|
|
display: block;
|
|
height: 20px;
|
|
padding: 10px 0px 10px 15px;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.item-list ul li span {
|
|
display: block;
|
|
float: left;
|
|
width: calc(100% - 120px);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.item-list input[type=text],
|
|
.processes input[type=text] {
|
|
border-radius: 50px;
|
|
font-size: 13px;
|
|
float: right;
|
|
padding: 5px 10px;
|
|
margin: 6px 10px 6px 0px;
|
|
}
|
|
|
|
|
|
/*---------ITEM LIST---------*/
|
|
|
|
|
|
/*---------STARTUP APPS---------*/
|
|
|
|
.startup-apps-list {
|
|
width: 600px;
|
|
height: 460px;
|
|
margin-top: 45px;
|
|
}
|
|
|
|
.startup-apps-list ul li {
|
|
background-image: url(../img/app.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 13px 9px;
|
|
}
|
|
|
|
.startup-apps-list ul li:hover .remove-startup-app {
|
|
display: block;
|
|
}
|
|
|
|
.remove-startup-app {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin: -2px 10px 0px 0px;
|
|
background: transparent url(../img/trash.png) no-repeat;
|
|
display: block;
|
|
float: right;
|
|
border: 0;
|
|
}
|
|
|
|
.edit-startup-app {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin: -2px 10px 0px 0px;
|
|
background: transparent url(../img/edit.png) no-repeat;
|
|
display: block;
|
|
float: right;
|
|
border: 0;
|
|
}
|
|
|
|
.add-startup-app {
|
|
border: 0;
|
|
padding: 8px 15px;
|
|
float: right;
|
|
margin: 10px 140px 0px 0px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
|
|
/*---------STARTUP APPS---------*/
|
|
|
|
|
|
/*---------SYSTEM SERVICES---------*/
|
|
|
|
.services-list {
|
|
margin-top: 45px;
|
|
}
|
|
|
|
.services-list ul {
|
|
float: left;
|
|
}
|
|
|
|
.services-list ul li {
|
|
background-image: url(../img/service.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 13px 11px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
|
|
/*---------SYSTEM SERVICES---------*/
|
|
|
|
|
|
/*---------UNINSTALLER---------*/
|
|
|
|
.uninstaller-list {
|
|
height: 490px;
|
|
margin-top: 45px;
|
|
}
|
|
|
|
.uninstaller-list ul {
|
|
float: left;
|
|
}
|
|
|
|
.uninstaller-list ul li {
|
|
background-image: url(../img/package.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 13px 9px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.uninstaller-list .spin-loader {
|
|
margin: 20px 0 0 100px;
|
|
}
|
|
|
|
.uninstaller-list label {
|
|
float: right;
|
|
margin: 1px 5px 0px 0px;
|
|
border-radius: 100%;
|
|
position: relative;
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 100px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#uninstall-selected {
|
|
padding: 7px 15px;
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
margin: 15px 268px;
|
|
background-color: transparent;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#uninstall-selected:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
|
|
/*---------UNINSTALLER---------*/
|
|
|
|
|
|
/*---------ITEM TABLE---------*/
|
|
|
|
.item-table {
|
|
float: right;
|
|
margin: 10px 10px 0px 0px;
|
|
width: 630px;
|
|
height: 480px;
|
|
}
|
|
|
|
.item-table ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.item-table ul li {
|
|
width: 100%;
|
|
display: block;
|
|
float: left;
|
|
padding: 2px 0px;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=checkbox] {
|
|
display: none;
|
|
}
|
|
|
|
.cleaner-side i,
|
|
.item-table i {
|
|
border-radius: 50%;
|
|
display: block;
|
|
height: 12px;
|
|
position: absolute;
|
|
top: 9px;
|
|
width: 12px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cleaner-side input[type=checkbox]:checked+i::after,
|
|
.item-table input[type=checkbox]:checked+i::after {
|
|
border-radius: 50%;
|
|
content: '';
|
|
display: block;
|
|
height: 6px;
|
|
left: 3px;
|
|
position: absolute;
|
|
top: 3px;
|
|
width: 6px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.item-table span {
|
|
display: block;
|
|
float: left;
|
|
width: 550px;
|
|
overflow: hidden;
|
|
margin-left: 25px;
|
|
text-overflow: ellipsis;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.item-table label {
|
|
cursor: pointer;
|
|
display: block;
|
|
float: left;
|
|
line-height: 30px;
|
|
padding: 0 15px;
|
|
position: relative;
|
|
}
|
|
|
|
.item-table h3 {
|
|
display: block;
|
|
float: left;
|
|
margin: 0;
|
|
font-weight: 500;
|
|
width: 100%;
|
|
}
|
|
|
|
.item-table h3 span {
|
|
font-size: 14px;
|
|
}
|
|
|
|
|
|
/*---------ITEM TABLE---------*/
|
|
|
|
|
|
/*---------CLEANER SIDEBAR---------*/
|
|
|
|
.cleaner-side {
|
|
margin: 10px 0 0 10px;
|
|
width: 200px;
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
|
|
.cleaner-side ul {
|
|
float: left;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.cleaner-side ul li {
|
|
padding: 0;
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.cleaner-side ul li label {
|
|
display: block;
|
|
padding: 10px 0px 10px 10px;
|
|
width: 195px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.cleaner-side i {
|
|
margin: 4px 0 0 0;
|
|
}
|
|
|
|
.cleaner-side span {
|
|
margin-left: 22px;
|
|
width: 160px;
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
/*---------CLEANER SIDEBAR---------*/
|
|
|
|
|
|
/*---------STATISTICS---------*/
|
|
|
|
.resources {
|
|
padding: 0px 20px;
|
|
}
|
|
|
|
.resources h4 {
|
|
display: block;
|
|
float: left;
|
|
padding: 10px;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
|
|
.resources h4 i {
|
|
margin: 1px 0 0 10px;
|
|
cursor: pointer;
|
|
display: block;
|
|
float: right;
|
|
font-size: 16px;
|
|
}
|
|
|
|
#cpus-chart,
|
|
#memory-chart,
|
|
#network-chart {
|
|
float: left;
|
|
height: 125px;
|
|
width: calc(100% - 20px);
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
|
|
/*---------STATISTICS---------*/
|
|
|
|
.empty-list {
|
|
font-size: 22px;
|
|
text-align: center;
|
|
padding: 180px 0px;
|
|
width: 100%;
|
|
float: left;
|
|
margin: 30px auto;
|
|
display: block;
|
|
background: url(../img/not-found.png) no-repeat center 30px;
|
|
}
|
|
|
|
#clean-btn,
|
|
#system-scan-btn {
|
|
clear: right;
|
|
float: right;
|
|
margin: 10px 10px 0 0;
|
|
border-radius: 5px;
|
|
padding: 8px 20px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
background-color: transparent;
|
|
}
|
|
|
|
#system-scan-btn {
|
|
float: left;
|
|
}
|
|
|
|
.slide-fade-enter-active {
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
.slide-fade-leave-active {
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
.slide-fade-enter,
|
|
.slide-fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.update-check {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: left;
|
|
padding: 7px 0;
|
|
z-index: 99999;
|
|
}
|
|
|
|
.update-check span {
|
|
float: left;
|
|
display: block;
|
|
padding: 5px 20px;
|
|
margin: 0;
|
|
}
|
|
|
|
.update-check button {
|
|
border: 0;
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
float: right;
|
|
display: block;
|
|
border-radius: 4px;
|
|
padding: 6px 15px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
|
|
/*prompt style*/
|
|
|
|
.promptDialog {
|
|
background-color: rgba(0, 0, 0, .4);
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 999;
|
|
position: fixed;
|
|
}
|
|
|
|
.promptDialog .dialog {
|
|
width: 350px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
top: 40%;
|
|
transform: translateY(-50%);
|
|
box-shadow: 0px 0px 20px #10161b;
|
|
}
|
|
|
|
.promptDialog .dialog div:first-child {
|
|
border-radius: 4px;
|
|
background-color: #202b33;
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.dialog span {
|
|
color: #ddd;
|
|
display: block;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.dialog input,
|
|
.dialog select {
|
|
color: #ddd;
|
|
border-radius: 4px;
|
|
padding: 9px 15px;
|
|
width: 280px;
|
|
font-size: 15px;
|
|
border: 0;
|
|
background-color: #293945;
|
|
margin: 8px 0px;
|
|
}
|
|
|
|
.dialog button {
|
|
padding: 7px 15px;
|
|
border: 0;
|
|
color: #ddd;
|
|
border: 1px solid #293945;
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
margin: 5px 10px;
|
|
background-color: transparent;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.dialog button:hover {
|
|
background-color: #293945;
|
|
}
|
|
|
|
|
|
/*----SETTINGS-----*/
|
|
|
|
.settings div {
|
|
float: left;
|
|
margin: 10px 15px 0 10px;
|
|
}
|
|
|
|
.settings div label {
|
|
float: left;
|
|
font-size: 15px;
|
|
padding: 0 0 5px 0;
|
|
}
|
|
|
|
.settings div select {
|
|
float: left;
|
|
border: 0px;
|
|
border-radius: 3px;
|
|
clear: left;
|
|
margin: 8px 0 0 0;
|
|
padding: 5px 10px;
|
|
width: 150px;
|
|
}
|
|
|
|
.settings-btn {
|
|
position: fixed;
|
|
top: 7px;
|
|
padding: 0;
|
|
right: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-top-left-radius: 5px;
|
|
border-bottom-left-radius: 5px;
|
|
border: 0;
|
|
}
|
|
|
|
|
|
/*------Processes--------*/
|
|
|
|
.processes {
|
|
float: left;
|
|
position: relative;
|
|
margin: 0 10px;
|
|
padding: 0;
|
|
width: calc(100% - 20px);
|
|
}
|
|
|
|
.processes button {
|
|
display: block;
|
|
float: right;
|
|
margin: 10px 0;
|
|
padding: 6px 15px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.processes button:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.processes .tbody {
|
|
height: 440px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.refreshCont {
|
|
float: left;
|
|
margin: 12px 0 0 0;
|
|
}
|
|
|
|
.refreshCont label {
|
|
display: block;
|
|
font-size: 15px;
|
|
padding: 3px 0 0 0;
|
|
float: left;
|
|
}
|
|
|
|
.refreshProcesses {
|
|
-webkit-appearance: none;
|
|
width: 80px;
|
|
height: 2px;
|
|
margin: 0 0 0 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.refreshProcesses::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 100%;
|
|
position: relative;
|
|
z-index: 99;
|
|
}
|
|
|
|
|
|
/*-----Datatable-----*/
|
|
|
|
.datatable {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: left;
|
|
box-sizing: border-box;
|
|
font-size: 15px;
|
|
border-top-right-radius: 5px;
|
|
border-top-left-radius: 5px;
|
|
table-layout: fixed;
|
|
border-spacing: 1px;
|
|
}
|
|
|
|
.datatable tr:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.datatable th i {
|
|
font-size: 13px;
|
|
display: block;
|
|
float: right;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.datatable td,
|
|
.datatable th {
|
|
padding: 8px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
/*----Spinner Loader------*/
|
|
|
|
.spin-loader {
|
|
position: relative;
|
|
width: 45px;
|
|
height: 10px;
|
|
}
|
|
|
|
.spin-loader div {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 100%;
|
|
background: #2285c3;
|
|
position: absolute;
|
|
animation-duration: 0.5s;
|
|
animation-timing-function: ease;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.dot1,
|
|
.dot2 {
|
|
left: 0;
|
|
}
|
|
|
|
.dot3 {
|
|
left: 1em;
|
|
}
|
|
|
|
.dot4 {
|
|
left: 2em;
|
|
}
|
|
|
|
@keyframes reveal {
|
|
from {
|
|
transform: scale(0.001);
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes slide {
|
|
to {
|
|
transform: translateX(1em)
|
|
}
|
|
}
|
|
|
|
.dot1 {
|
|
animation-name: reveal;
|
|
}
|
|
|
|
.dot2,
|
|
.dot3 {
|
|
animation-name: slide;
|
|
}
|
|
|
|
.dot4 {
|
|
animation-name: reveal;
|
|
animation-direction: reverse;
|
|
} |