Created client app with electronc

manager/stylesheets/style.css

@@ -0,0 +1,226 @@
+*  {
+    font-family: "Open Sans", sans-serif;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #181e25;
+}
+
+#header {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    color: #F2F2F2;
+    font-weight: bold;
+    font-size: 16px;
+    padding: 10px;
+}
+
+#header>div:first-child>div:last-child {
+    color: green;
+}
+
+.main-icon {
+    width: 60px;
+    height: 60px;
+    margin: 10px;
+}
+
+#main-div {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    row-gap: 30px;
+    column-gap: 30px;
+    flex-wrap: wrap;
+    padding: 15px;
+}
+
+body {
+    overflow-y: auto;
+    scrollbar-color: white transparent;
+    scrollbar-width: thin;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-bottom-right-radius: 10px;
+    border-top-right-radius: 10px;
+    margin-top: 0px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: white;
+    border-radius: 100px;
+    margin-top: 10px;
+    opacity: 0.8;
+}
+
+.instance-div {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    background-color: #3d4651;
+    height: fit-content;
+    padding: 20px 40px;
+    border-radius: 5px;
+    border-left: 5px solid #017DC1;
+    width: 600px;
+}
+
+.instance-content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 15px;
+}
+
+.folder-name {
+    color: #F2F2F2;
+    font-weight: bold;
+    display: flex;
+    border-bottom: 1px solid #F2F2F2;
+    padding-bottom: 10px;
+    width: 100%;
+}
+
+.folder-name span {
+    width: 500px;
+    overflow: hidden;
+    text-wrap: nowrap;
+    text-overflow: ellipsis;
+    direction: rtl;
+    text-align: left;
+}
+
+.folder {
+    width: 20px;
+    height: 20px;
+    background-image: url("../icons/folder-open-solid.svg");
+    margin-right: 15px;
+}
+
+.input-table {
+    padding: 0px;
+    margin: 0px;
+    border-width: 0px;
+    border-collapse: collapse;
+}
+
+.input-table td {
+    color: #F2F2F2;
+    padding: 5px 0px;
+    font-size: 13px;
+    vertical-align: top;
+}
+
+.input-table td>* {
+    margin: 2px 0px;
+}
+
+.action-buttons {
+    display: flex;
+    flex-direction: row;
+    column-gap: 12px;
+    justify-content: start;
+}
+
+.label {
+    display: flex;
+    align-items: center;
+    column-gap: 5px;
+}
+
+.icon {
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+}
+
+.button {
+    width: fit-content;
+    height: 40px;
+    color: #F2F2F2;
+    border: 1px solid #F2F2F2;
+    background-size: 40px 60%;
+    background-position: 0px 50%;
+    background-repeat: no-repeat;
+    border-radius: 5px;
+    padding: 5px 15px 5px 45px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    background-color: transparent;
+}
+
+.button:not(.disabled) {
+    cursor: pointer;
+}
+
+.apply {
+    background-image: url("../icons/check-solid.svg");
+    background-color: #017DC1;
+    border: 1px solid transparent;
+}
+
+.add {
+    padding: 5px 15px 5px 15px;
+}
+
+.update {
+    padding: 5px 15px 5px 15px;
+}
+
+.remove {
+    background-image: url("../icons/trash-can-regular.svg");
+}
+
+.disabled {
+    background-color: #797E83;
+}
+
+.hide {
+    display: none;
+}
+
+.message {
+    font-weight: 600;
+    height: 20px;
+    font-size: 13px;
+    color: #F2F2F2;
+}
+
+input {
+    font-weight: 600;
+    font-size: 13px;
+    width: 240px;
+    border-radius: 4px;
+}
+
+input:focus{
+    outline: none;
+}
+
+input.error {
+    border-color: #FF5858;
+}
+
+.error {
+    font-weight: bold;
+    color: #FF5858;
+}
+
+.accent-green {
+    color: #8bff63;
+}
+
+.info {
+    width: 12px;
+    height: 12px;
+    background-image: url("../icons/circle-info-solid.svg");
+    background-position: 50% 50%;
+}