From 357fc6ddca2062bad7522eb0350481f99878dbf9 Mon Sep 17 00:00:00 2001 From: Devindra Payment Date: Sun, 1 Jun 2014 08:57:51 -0700 Subject: [PATCH 1/5] A lot of slight tweaking to the CSS, as well as Notes for more sections. --- GURPS/gurps.css | 233 +++++++++++++++++++++++++---------------------- GURPS/gurps.html | 160 +++++++++++++++++++------------- 2 files changed, 220 insertions(+), 173 deletions(-) diff --git a/GURPS/gurps.css b/GURPS/gurps.css index 0151101635..03487a3b3c 100644 --- a/GURPS/gurps.css +++ b/GURPS/gurps.css @@ -4,7 +4,7 @@ } .sheet-wrapper { - min-width: 490px; + min-width: 500px; } .sheet-box { @@ -21,25 +21,10 @@ text-align: right; } -.sheet-hr * { +.sheet-hr { box-shadow: 0 -1px 0 #000; } -.sheet-roll-tracker:before { - font-family: "Pictos" !important; - content: "t" !important; -} - -/* ===== MODULE SUPPORT ===== */ -input.sheet-module-roll:checked ~ .sheet-wrapper .sheet-module-on-roll, -.sheet-wrapper .sheet-module-off-roll { - display: inline-block; -} - -input.sheet-module-roll:checked ~ .sheet-wrapper .sheet-module-off-roll, -.sheet-wrapper .sheet-module-on-roll { - display: none; -} /* ===== CUSTOM TABLES ===== */ .sheet-table { @@ -61,6 +46,7 @@ input.sheet-module-roll:checked ~ .sheet-wrapper .sheet-module-off-roll, font-variant: small-caps; letter-spacing: 1px; white-space: nowrap; + height: 22px; } .sheet-row { @@ -80,66 +66,10 @@ input.sheet-module-roll:checked ~ .sheet-wrapper .sheet-module-off-roll, width: 100%; } -/* ===== TABLES ===== */ -/* -.sheet-box table.sheet-table { - border-collapse: collapse; - table-layout: fixed; - width: 100%; -} -.sheet-box tr *:not(.sheet-tooltip) { - white-space: nowrap; - overflow: hidden; - min-height: 22px; - max-height: 22px; - height: 22px; -} - -.sheet-box tbody tr:nth-child(odd) { - background: #EFEFF5; -} - -.sheet-box th { - font-weight: bold; - text-transform: lowercase; - font-variant: small-caps; - letter-spacing: 1px; -} - -.sheet-box table th:first-child { - font-size: 110%; - letter-spacing: normal; -} - -.sheet-box th, -.sheet-box td { - padding: 0; -} - -.sheet-box td { - padding-right: 2px; - text-align: center; -} -*/ - -/* ===== INPUTS ===== */ -input[type=number]::-webkit-inner-spin-button, -input[type=number]::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; -} - -button { +/* ===== BUTTONS ===== */ +.sheet-box button { margin: 0 !important; -} - -.btn[type="roll"] { - width: 22px; - background: none; -} - -.btn { height: 22px; border-radius: 0; line-height: 16px; @@ -147,19 +77,42 @@ button { border: none; } +.sheet-box button[type="roll"] { + width: 22px; + background: none; +} + +.sheet-box button.sheet-roll-tracker:before { + font-family: "Pictos" !important; + content: "t" !important; +} + + +/* ===== INPUTS ===== */ +.sheet-box input[type=number]::-webkit-inner-spin-button, +.sheet-box input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + .sheet-box select { width: 100%; - height: 100%; - margin: 0; + height: 20px; padding: 0; + margin: 0; + margin-top: -1px; } .sheet-box input { + width: 100% !important; + height: 20px; + margin-top: -1px; + padding: 0 2px; + line-height: 22px; + background: transparent; border: none; - width: 100% !important; box-shadow: none; - padding: 0 4px; cursor: initial; } @@ -172,11 +125,60 @@ button { box-shadow: inset 0px 0px 1px 0px rgba(98, 98, 94, 0.75); } -.sheet-box tbody tr:nth-child(odd) input:not(:disabled) { - background: #E0E0FA; + +/* ===== CUSTOM CHECKBOXES ===== */ +.sheet-box input[type="checkbox"] { + opacity: 0; + width: 22px; + height: 22px; + position: relative; + cursor: pointer; + z-index: 1; } -/* ===== UTILITY ==== */ +.sheet-box input[type="checkbox"] ~ .sheet-checkbox:before { + width: 18px; + height: 18px; + line-height: 22px; + + margin: 0; + padding: 0; + + position: relative; + top: -23px; + left: -1px; + + border: solid 1px #a8a8a8; + text-align: center; + display: inline-block; + vertical-align: middle; + + font-size: 18px; + font-family: "Pictos"; + content: ""; + + -moz-box-shadow: 0 0 2px #ccc; + -webkit-box-shadow: 0 0 2px #ccc; + box-shadow: 0 0 2px #ccc; + + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + + background: #f6f6f6; + background: -moz-radial-gradient(#f6f6f6, #dfdfdf); + background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); + background: -ms-radial-gradient(#f6f6f6, #dfdfdf); + background: -o-radial-gradient(#f6f6f6, #dfdfdf); + background: radial-gradient(#f6f6f6, #dfdfdf); +} + +.sheet-box input[type="checkbox"]:checked ~ .sheet-checkbox:before { + content: "3"; +} + + +/* ===== UTILITY ===== */ .sheet-right { float: right; } @@ -200,6 +202,7 @@ button { z-index: 0; } + /* ===== CSS TOOLTIP ===== */ .sheet-popup { color: darkred; @@ -251,7 +254,23 @@ button { background: #FFF; } + +/* ===== MODULE SUPPORT ===== */ +input.sheet-module-roll:checked ~ .sheet-wrapper .sheet-module-on-roll, +.sheet-wrapper .sheet-module-off-roll { + display: inline-block; +} + +input.sheet-module-roll:checked ~ .sheet-wrapper .sheet-module-off-roll, +.sheet-wrapper .sheet-module-on-roll { + display: none; +} + + /* ===== LAYOUT ===== */ +.sheet-box .sheet-row-desc .sheet-col0 { width: 40px; text-align: center; } +.sheet-box .sheet-row-desc .sheet-col1 { width: calc(100% - 40px); } + .sheet-attribute { width: 130px; } .sheet-attribute .sheet-header .sheet-col0 { width: 78px; } .sheet-attribute .sheet-header .sheet-col1 { width: 52px; } @@ -316,7 +335,6 @@ button { .sheet-traits .sheet-col1 { width: 30px; } .sheet-traits .sheet-col2 { width: 30px; } .sheet-traits .sheet-col3 { width: 40px; } -.sheet-traits .sheet-row-desc .sheet-col0 { width: 100%; } .sheet-skills { width: calc(100% - 0.4em); } .sheet-skills .sheet-col0 { width: calc(100% - 302px); } @@ -330,8 +348,8 @@ button { .sheet-skills .sheet-col8 { width: 22px; } .sheet-techniques { width: calc(100% - 0.4em); } -.sheet-techniques .sheet-col0 { width: calc(100% - 360px); } -.sheet-techniques .sheet-col1 { width: 120px; } +.sheet-techniques .sheet-col0 { width: calc((100% - 240px) * 0.5); } +.sheet-techniques .sheet-col1 { width: calc((100% - 240px) * 0.5); } .sheet-techniques .sheet-col2 { width: 30px; } .sheet-techniques .sheet-col3 { width: 30px; } .sheet-techniques .sheet-col4 { width: 40px; } @@ -341,36 +359,33 @@ button { .sheet-techniques .sheet-col8 { width: 40px; } .sheet-melee-attacks { width: calc(100% - 0.4em); } -.sheet-melee-attacks .sheet-col0 { width: 100px; } -.sheet-melee-attacks .sheet-col1 { width: 60px; } +.sheet-melee-attacks .sheet-col0 { width: calc(100% - 202px); } +.sheet-melee-attacks .sheet-col1 { width: 40px; } .sheet-melee-attacks .sheet-col2 { width: 40px; } .sheet-melee-attacks .sheet-col3 { width: 40px; } -.sheet-melee-attacks .sheet-col4 { width: 40px; } -.sheet-melee-attacks .sheet-col5 { width: calc(100% - 302px); } -.sheet-melee-attacks .sheet-col6 { width: 22px; } +.sheet-melee-attacks .sheet-col4 { width: 60px; } +.sheet-melee-attacks .sheet-col5 { width: 22px; } .sheet-ranged-attacks { width: calc(100% - 0.4em); } -.sheet-ranged-attacks .sheet-col0 { width: 100px; } -.sheet-ranged-attacks .sheet-col1 { width: 60px; } -.sheet-ranged-attacks .sheet-col2 { width: 40px; } +.sheet-ranged-attacks .sheet-col0 { width: calc(100% - 292px); } +.sheet-ranged-attacks .sheet-col1 { width: 40px; } +.sheet-ranged-attacks .sheet-col2 { width: 30px; } .sheet-ranged-attacks .sheet-col3 { width: 30px; } -.sheet-ranged-attacks .sheet-col4 { width: 30px; } -.sheet-ranged-attacks .sheet-col5 { width: 40px; } -.sheet-ranged-attacks .sheet-col6 { width: 30px; } -.sheet-ranged-attacks .sheet-col7 { width: 40px; } -.sheet-ranged-attacks .sheet-col8 { width: calc(100% - 392px); } -.sheet-ranged-attacks .sheet-col9 { width: 22px; } +.sheet-ranged-attacks .sheet-col4 { width: 40px; } +.sheet-ranged-attacks .sheet-col5 { width: 30px; } +.sheet-ranged-attacks .sheet-col6 { width: 40px; } +.sheet-ranged-attacks .sheet-col7 { width: 60px; } +.sheet-ranged-attacks .sheet-col8 { width: 22px; } .sheet-items { width: calc(100% - 0.4em); } -.sheet-items .sheet-col0 { width: 100px; } +.sheet-items .sheet-col0 { width: calc(100% - 270px); } .sheet-items .sheet-col1 { width: 20px; } -.sheet-items .sheet-col2 { width: 20px; } -.sheet-items .sheet-col3 { width: 20px; } -.sheet-items .sheet-col4 { width: 30px; } -.sheet-items .sheet-col5 { width: calc(100% - 250px); } -.sheet-items .sheet-col6 { width: 30px; } -.sheet-items .sheet-col7 { width: 30px; } -.sheet-items .sheet-row-totals .sheet-col0 { width: calc(100% - 200px); } -.sheet-items .sheet-row-totals .sheet-col1 { width: 50px; } +.sheet-items .sheet-col2 { width: 50px; } +.sheet-items .sheet-col3 { width: 50px; } +.sheet-items .sheet-col4 { width: 50px; } +.sheet-items .sheet-col5 { width: 50px; } +.sheet-items .sheet-col6 { width: 50px; } +.sheet-items .sheet-row-totals .sheet-col0 { width: calc(100% - 300px); } +.sheet-items .sheet-row-totals .sheet-col1 { width: 100px; } .sheet-items .sheet-row-totals .sheet-col2 { width: 100px; } -.sheet-items .sheet-row-totals .sheet-col3 { width: 50px; } +.sheet-items .sheet-row-totals .sheet-col3 { width: 100px; } diff --git a/GURPS/gurps.html b/GURPS/gurps.html index 91a29f86ac..4b0fb0ffd2 100644 --- a/GURPS/gurps.html +++ b/GURPS/gurps.html @@ -100,7 +100,7 @@ This character sheet is a work in progress.