From 7ffc1fc1673edc314581fb13d889a896236b5f9f Mon Sep 17 00:00:00 2001 From: Kyle Huckins Date: Mon, 29 Jan 2018 18:42:04 +0000 Subject: [PATCH] CAT-176 SCKO Font Size Tweaks - Provide three options for font sizes. Does not include changes to High Contrast Mode Signed-off-by: Kyle Huckins 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 --- .../var/templates_kcls/circ/selfcheck/style.css | 24 ++-- Open-ILS/web/css/skin/kcls/selfcheck-default.css | 33 +++-- Open-ILS/web/css/skin/kcls/selfcheck-font-b.css | 141 +++++++++++++++++++++ Open-ILS/web/css/skin/kcls/selfcheck-font-c.css | 141 +++++++++++++++++++++ 4 files changed, 313 insertions(+), 26 deletions(-) create mode 100644 Open-ILS/web/css/skin/kcls/selfcheck-font-b.css create mode 100644 Open-ILS/web/css/skin/kcls/selfcheck-font-c.css diff --git a/KCLS/openils/var/templates_kcls/circ/selfcheck/style.css b/KCLS/openils/var/templates_kcls/circ/selfcheck/style.css index a12f77d7de..72fa130444 100644 --- a/KCLS/openils/var/templates_kcls/circ/selfcheck/style.css +++ b/KCLS/openils/var/templates_kcls/circ/selfcheck/style.css @@ -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; } diff --git a/Open-ILS/web/css/skin/kcls/selfcheck-default.css b/Open-ILS/web/css/skin/kcls/selfcheck-default.css index c10a6bd46a..fc9604f0dc 100644 --- a/Open-ILS/web/css/skin/kcls/selfcheck-default.css +++ b/Open-ILS/web/css/skin/kcls/selfcheck-default.css @@ -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 index 0000000000..648842a1c5 --- /dev/null +++ b/Open-ILS/web/css/skin/kcls/selfcheck-font-b.css @@ -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 index 0000000000..b3adb28704 --- /dev/null +++ b/Open-ILS/web/css/skin/kcls/selfcheck-font-c.css @@ -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; + } +} -- 2.11.0