CAT-176 SCKO Font Size Tweaks
authorKyle Huckins <khuckins@catalyte.io>
Mon, 29 Jan 2018 18:42:04 +0000 (18:42 +0000)
committerBill Erickson <berickxx@gmail.com>
Thu, 21 Mar 2019 19:46:23 +0000 (15:46 -0400)
- Provide three options for font sizes. Does not include changes to
High Contrast Mode

Signed-off-by: Kyle Huckins <khuckins@catalyte.io>
 Changes to be committed:
modified:   KCLS/openils/var/templates_kcls/circ/selfcheck/style.css
modified:   Open-ILS/web/css/skin/kcls/selfcheck-default.css
new file:   Open-ILS/web/css/skin/kcls/selfcheck-font-b.css
new file:   Open-ILS/web/css/skin/kcls/selfcheck-font-c.css

KCLS/openils/var/templates_kcls/circ/selfcheck/style.css
Open-ILS/web/css/skin/kcls/selfcheck-default.css
Open-ILS/web/css/skin/kcls/selfcheck-font-b.css [new file with mode: 0644]
Open-ILS/web/css/skin/kcls/selfcheck-font-c.css [new file with mode: 0644]

index a12f77d..72fa130 100644 (file)
@@ -4,7 +4,7 @@
 html, body {
        margin:0;
        font-family: Arial, Helvetica, sans-serif;
-       font-size: 12px;
+       font-size: 14px;
        background:#333;
        width:100%;
 }
@@ -25,14 +25,14 @@ a:hover {
 h1 {
        margin:0;
        margin-bottom: 5px;
-       font-size: 20px;
+       font-size: 22px;
        font-weight:normal;
 }
 
 h2 {
        margin:0;
        margin-bottom: 5px;
-       font-size: 14px;
+       font-size: 16px;
        font-weight:bold;
 }
 
@@ -57,25 +57,25 @@ h2 {
 }
 
 .checkout {
-       font-size:16px;
+       font-size:18px;
 }
 
 .checkout h1 {
-       font-size:36px;
+       font-size:38px;
 }
 
 .checkout h2 {
-       font-size:24px;
+       font-size:26px;
 }
 
 .checkout .sidebar h3 {
-       font-size: 16px;
+       font-size: 18px;
        margin:0;
        padding-left:3px;
 }
 
 .checkout .sidebar a {
-       font-size:12px;
+       font-size:14px;
 }
 
 .checkout .sidebar a span {
@@ -88,7 +88,7 @@ h2 {
 }
 
 .checkout .sidebar div, .checkout .sidebar p {
-       font-size: 16px;
+       font-size: 18px;
        line-height: 1em;
 }
 
@@ -99,7 +99,7 @@ h2 {
        padding:2px;
        padding-top:1px;
        margin:0px;
-       font-size:16px;
+       font-size:18px;
 }
 
 .checkout .sidebar {
@@ -131,7 +131,7 @@ h2 {
 
 .checkout .userid {
        width:200px;
-       font-size:16px;
+       font-size:18px;
        font-weight:bold;
        padding:5px 6px 6px 6px !important;
        border:2px solid black !important;
@@ -144,7 +144,7 @@ h2 {
 }
 
 .checkout .item_table td {
-       font-size:16px;
+       font-size:18px;
        border:2px solid black;
        text-align: left;
 }
index c10a6bd..fc9604f 100644 (file)
@@ -2,22 +2,22 @@
        Basic Colors for Self-checkout interface
  */
 html, body {
-    font-size: 18px;
+    font-size: 20px;
 }
 a {
     color: #003399;
 }
 
 label {
-    font-size:16px;
+    font-size:18px;
 }
 
 h1 {
-    font-size: 22px;
+    font-size: 24px;
 }
 
 h2 {
-    font-size: 20px;
+    font-size: 22px;
 }
 
 #header {
@@ -25,11 +25,11 @@ h2 {
 }
 
 #main-content-scko h1 {
-    font-size: 20px;
+    font-size: 22px;
 }
 
 #main-content-scko h1 {
-    font-size: 16px;
+    font-size: 18px;
 }
 
 #main-content-scko li {
@@ -42,12 +42,12 @@ h2 {
 
 .navbar-text-scko {
     color:white;
-    font-size:25px;
+    font-size:27px;
 }
 
 .scko-container {
     color: #585d5e;
-    font-size: 13px;
+    font-size: 15px;
     background-color: #FFF;
 }
 
@@ -61,6 +61,11 @@ h2 {
     border-color: #ccc
 }
 
+.btn {
+    font-size: 16px;
+}
+
+
 .container-background {
     background: #353535;
 }
@@ -74,23 +79,23 @@ h2 {
 }
 
 .checkout {
-    font-size:14px;
+    font-size:16px;
 }
 
 .checkout h1 {
-    font-size:20px;
+    font-size:22px;
 }
 
 .checkout h2 {
-    font-size:16px;
+    font-size:18px;
 }
 
 .checkout .userid {
-    font-size:18px;
+    font-size:20px;
 }
 
 .checkout .item_table td {
-    font-size:18px;
+    font-size:20px;
     border:2px solid black;
 }
 
@@ -117,7 +122,7 @@ h2 {
         background:-o-linear-gradient(top, #008ec2 5%, #023a4f 100%);
         background:-ms-linear-gradient(top, #008ec2 5%, #023a4f 100%);
         background:linear-gradient(to bottom, #008ec2 5%, #023a4f 100%);
-        font-size:18px;
+        font-size:20px;
         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#008ec2', endColorstr='#023a4f',GradientType=0);
         background-color:#02729E;
         color:#ffffff;
diff --git a/Open-ILS/web/css/skin/kcls/selfcheck-font-b.css b/Open-ILS/web/css/skin/kcls/selfcheck-font-b.css
new file mode 100644 (file)
index 0000000..648842a
--- /dev/null
@@ -0,0 +1,141 @@
+/*
+       Basic Colors for Self-checkout interface
+ */
+html, body {
+    font-size: 21px;
+}
+a {
+    color: #003399;
+}
+
+label {
+    font-size:19px;
+}
+
+h1 {
+    font-size: 25px;
+}
+
+h2 {
+    font-size: 23px;
+}
+
+#header {
+    color: #bda964;
+}
+
+#main-content-scko h1 {
+    font-size: 23px;
+}
+
+#main-content-scko h1 {
+    font-size: 19px;
+}
+
+#main-content-scko li {
+    margin-top: 12px;
+}
+
+.navbar-scko {
+    background:#D2232A
+}
+
+.navbar-text-scko {
+    color:white;
+    font-size:28px;
+}
+
+.scko-container {
+    color: #585d5e;
+    font-size: 16px;
+    background-color: #FFF;
+}
+
+.scko-table-suspended {
+    color:#A8A8A8;
+}
+
+.btn-high-contrast {
+    color: #FFF;
+    background-color: #353535;
+    border-color: #ccc
+}
+
+.btn {
+    font-size: 17px;
+}
+
+
+.container-background {
+    background: #353535;
+}
+
+.checkout .header1 {
+    border-bottom:1px solid #a83135;
+}
+
+.checkout .userid {
+    border:2px solid black !important;
+}
+
+.checkout {
+    font-size:17px;
+}
+
+.checkout h1 {
+    font-size:23px;
+}
+
+.checkout h2 {
+    font-size:19px;
+}
+
+.checkout .userid {
+    font-size:21px;
+}
+
+.checkout .item_table td {
+    font-size:21px;
+    border:2px solid black;
+}
+
+.scko-table-striped>tbody>tr:nth-of-type(odd) {
+    background-color: #f3f3f3
+}
+
+.checkout .status_box {
+    color:red;
+}
+
+.checkout .oils-selfck-status-div {
+    color: blue;
+}
+
+.checkout_failure {
+    color: red !important;
+}
+@media screen and (min-width:768px) {
+    .scko-footer-btn {
+        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #008ec2), color-stop(1, #023a4f));
+        background:-moz-linear-gradient(top, #008ec2 5%, #023a4f 100%);
+        background:-webkit-linear-gradient(top, #008ec2 5%, #023a4f 100%);
+        background:-o-linear-gradient(top, #008ec2 5%, #023a4f 100%);
+        background:-ms-linear-gradient(top, #008ec2 5%, #023a4f 100%);
+        background:linear-gradient(to bottom, #008ec2 5%, #023a4f 100%);
+        font-size:21px;
+        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#008ec2', endColorstr='#023a4f',GradientType=0);
+        background-color:#02729E;
+        color:#ffffff;
+        text-shadow:0px 1px 5px #000000;
+    }
+
+    .scko-footer-btn:hover {
+        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #023a4f), color-stop(1, #008ec2));
+        background:-moz-linear-gradient(top, #023a4f 5%, #008ec2 100%);
+        background:-webkit-linear-gradient(top, #023a4f 5%, #008ec2 100%);
+        background:-o-linear-gradient(top, #023a4f 5%, #008ec2 100%);
+        background:-ms-linear-gradient(top, #023a4f 5%, #008ec2 100%);
+        background:linear-gradient(to bottom, #023a4f 5%, #008ec2 100%);
+        background-color:#02729E;
+    }
+}
diff --git a/Open-ILS/web/css/skin/kcls/selfcheck-font-c.css b/Open-ILS/web/css/skin/kcls/selfcheck-font-c.css
new file mode 100644 (file)
index 0000000..b3adb28
--- /dev/null
@@ -0,0 +1,141 @@
+/*
+       Basic Colors for Self-checkout interface
+ */
+html, body {
+    font-size: 22px;
+}
+a {
+    color: #003399;
+}
+
+label {
+    font-size:20px;
+}
+
+h1 {
+    font-size: 26px;
+}
+
+h2 {
+    font-size: 24px;
+}
+
+#header {
+    color: #bda964;
+}
+
+#main-content-scko h1 {
+    font-size: 24px;
+}
+
+#main-content-scko h1 {
+    font-size: 20px;
+}
+
+#main-content-scko li {
+    margin-top: 12px;
+}
+
+.navbar-scko {
+    background:#D2232A
+}
+
+.navbar-text-scko {
+    color:white;
+    font-size:29px;
+}
+
+.scko-container {
+    color: #585d5e;
+    font-size: 17px;
+    background-color: #FFF;
+}
+
+.scko-table-suspended {
+    color:#A8A8A8;
+}
+
+.btn-high-contrast {
+    color: #FFF;
+    background-color: #353535;
+    border-color: #ccc
+}
+
+.btn {
+    font-size: 18px;
+}
+
+
+.container-background {
+    background: #353535;
+}
+
+.checkout .header1 {
+    border-bottom:1px solid #a83135;
+}
+
+.checkout .userid {
+    border:2px solid black !important;
+}
+
+.checkout {
+    font-size:18px;
+}
+
+.checkout h1 {
+    font-size:24px;
+}
+
+.checkout h2 {
+    font-size:20px;
+}
+
+.checkout .userid {
+    font-size:22px;
+}
+
+.checkout .item_table td {
+    font-size:22px;
+    border:2px solid black;
+}
+
+.scko-table-striped>tbody>tr:nth-of-type(odd) {
+    background-color: #f3f3f3
+}
+
+.checkout .status_box {
+    color:red;
+}
+
+.checkout .oils-selfck-status-div {
+    color: blue;
+}
+
+.checkout_failure {
+    color: red !important;
+}
+@media screen and (min-width:768px) {
+    .scko-footer-btn {
+        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #008ec2), color-stop(1, #023a4f));
+        background:-moz-linear-gradient(top, #008ec2 5%, #023a4f 100%);
+        background:-webkit-linear-gradient(top, #008ec2 5%, #023a4f 100%);
+        background:-o-linear-gradient(top, #008ec2 5%, #023a4f 100%);
+        background:-ms-linear-gradient(top, #008ec2 5%, #023a4f 100%);
+        background:linear-gradient(to bottom, #008ec2 5%, #023a4f 100%);
+        font-size:22px;
+        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#008ec2', endColorstr='#023a4f',GradientType=0);
+        background-color:#02729E;
+        color:#ffffff;
+        text-shadow:0px 1px 5px #000000;
+    }
+
+    .scko-footer-btn:hover {
+        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #023a4f), color-stop(1, #008ec2));
+        background:-moz-linear-gradient(top, #023a4f 5%, #008ec2 100%);
+        background:-webkit-linear-gradient(top, #023a4f 5%, #008ec2 100%);
+        background:-o-linear-gradient(top, #023a4f 5%, #008ec2 100%);
+        background:-ms-linear-gradient(top, #023a4f 5%, #008ec2 100%);
+        background:linear-gradient(to bottom, #023a4f 5%, #008ec2 100%);
+        background-color:#02729E;
+    }
+}