app

Esiur.Examples.StandaloneWebServerDemo/Web/css/style.css

@@ -23,6 +23,24 @@ i-app {
     height: 50px;
 }
 
+.label {
+    padding: 10;
+    margin: 10;
+    border: 1px solid #7b7b7b;
+    border-radius: 10px;
+    color: #000000;
+    background: #e3e3e3;
+    font-size: 32px;
+    width: 500px;
+}
+
+canvas {
+    border: 1px solid #b5b5b5;
+    height: 320px;
+    width: 400px;
+    margin: 10px;
+}
+
 i-router {
     padding: 10px 35px;
     height: calc(100vh - 150px);
@@ -30,7 +48,9 @@ i-router {
 }
 
 .content {
-
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .iui-error {
@@ -239,6 +259,7 @@ i-router {
     box-shadow: 0px 1px 3px 1px #dedede;
     background: #fff;
     margin: 10px;
+    padding: 5px;
 }
 
     .title-bar h1 {
@@ -359,3 +380,119 @@ i-modellist > i-repeat {
 .link {
     display: flex;
 }
+
+
+input[type=radio] {
+    display: none;
+}
+
+input[type=radio]:checked + label span {
+    transform: scale(1.25);
+}
+
+input[type=radio]:checked + label .red {
+    border: 2px solid #711313;
+}
+
+input[type=radio]:checked + label .orange {
+    border: 2px solid #873a08;
+}
+
+input[type=radio]:checked + label .yellow {
+    border: 2px solid #816102;
+}
+
+input[type=radio]:checked + label .olive {
+    border: 2px solid #505a0b;
+}
+
+input[type=radio]:checked + label .green {
+    border: 2px solid #0e4e1d;
+}
+
+input[type=radio]:checked + label .teal {
+    border: 2px solid #003633;
+}
+
+input[type=radio]:checked + label .blue {
+    border: 2px solid #103f62;
+}
+
+input[type=radio]:checked + label .violet {
+    border: 2px solid #321a64;
+}
+
+input[type=radio]:checked + label .purple {
+    border: 2px solid #501962;
+}
+
+input[type=radio]:checked + label .pink {
+    border: 2px solid #851554;
+}
+
+label {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+label:hover span {
+    transform: scale(1.25);
+}
+
+label span {
+    display: block;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.2s ease-in-out;
+}
+
+label span.black {
+    background: #000000;
+}
+
+label span.white {
+    background: #ffffff;
+}
+
+label span.red {
+    background: #DB2828;
+}
+
+label span.orange {
+    background: #F2711C;
+}
+
+label span.yellow {
+    background: #FBBD08;
+}
+
+label span.olive {
+    background: #B5CC18;
+}
+
+label span.green {
+    background: #21BA45;
+}
+
+label span.teal {
+    background: #00B5AD;
+}
+
+label span.blue {
+    background: #2185D0;
+}
+
+label span.violet {
+    background: #6435C9;
+}
+
+label span.purple {
+    background: #A333C8;
+}
+
+label span.pink {
+    background: #E03997;
+}