Complete SR5 rework

Mostly complete CSS rework, some HTML changes, thanks to the DnD4e guys
for a lot of the CSS stuff!
This commit is contained in:
NeirinD
2014-05-10 14:02:38 +02:00
parent 72c53e9230
commit 5c41eba2ff
5 changed files with 1369 additions and 811 deletions
+36 -29
View File
@@ -1,40 +1,47 @@
* If you want to use an (all) attribute(s) from the sheet (you HAVE TO do this for woundmod and paintolerance or no roll will work), you have to *select* them in the sheet at least once
* Values are inserted like they show in the book - so negative numbers should be written with a '-' in front
* Values are inserted like they show in the book - so negative numbers should be written with a '-' in front, positive numbers just as the number (DON'T write '+', it will break the rolls)
* In most Rolls there will be an option to include modifiers - the negative/positive value also applies here
* The Drain/Fade Attribute and Software/Spellcasting fields in the upper part of the sheet are needed if you want to use the integrated roll for the Spells you entered
* 'Quick Roll Collection' is everything you need if you don't want to use anything else
* A lot of buttons throughout the sheet to make your life easier
##Useful Attributes
## Useful Attributes
###Attribute Scores:
* Body @{body}
* Agility @{agility}
* Reaction @{reaction}
* Strength @{strength}
* Willpower @{willpower}
* Logic @{logic}
* Intuition @{intuition}
* Charisma @{charisma}
* Magic Resonance @{magicresonance}
* Edge @{edge}
### Attribute Scores:
* Body - @{body}
* Agility - @{agility}
* Reaction - @{reaction}
* Strength - @{strength}
* Willpower - @{willpower}
* Logic - @{logic}
* Intuition - @{intuition}
* Charisma - @{charisma}
* Magic / Resonance - @{magicresonance}
* Edge - @{edge}
###Combat Info
### Combat Info
####Wounds
#### Wounds
* @{physical} - physical condition monitor / wounds
* @{stun} - stun condition monitor / wounds
* @{paintolerance} - higher or lower pain tolerance (standard value 3)
* @{woundmod} - calculated wound modifier (see below for macro)
#####Every Attribute that starts with 'primary-' also has 'secondary-' and 'tertiary-' versions of it
####Defensive
* @{avoid} - @reaction+@intuition
* @{avoidmisc} - number to in- or decrease the avoid
* @{armor} - current worn armor - the amount in the 'Core Combat Info' block
* @{armormisc} - number to increase or decrese damage resistance rolls
####Skills
#### Offensive
* @{primaryweapon-} - and @{secondaryweapon-} are the two fixed Ranged Weapon slots, you can access all Attributes from these weapons directly with useing this as a prefix and then:
* @{-acc} - Accuracy
* @{-dam} - Damage Value
* @{-ap} - Armor Penetration
* @{-mode} - Weapon Modes
* @{-rc} - Recoil Compensation
* @{-ammo} - Max Ammo
* @{-skill} - Skill Value used for the Weapon Type
* Same goes for Melee weapons with the prefix @{primarymeleeweapon-} and @{secondarymeleeweapon-} (Of course without Weapon Mode, Recoil and Ammo)
#### Defensive
* @{avoid} - [[@reaction+@intuition]]
* @{avoidmisc} - number to in- or decrease the avoid - Accessable through the 'Core Combat Info' Section
* @{armor} - First armor in the Armor Sub-Section - the amount in the 'Core Combat Info' block
* @{armormisc} - First armor in the Armor Sub-Section - number to increase or decrese damage resistance rolls
#### Skills
There is no option to access the Skills directly at this point - sorry!
##Known Problems / Bugs / ToDo
* Text input fields can't be referenced into another field - Core Combat Info needs double entries
File diff suppressed because it is too large Load Diff
Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 71 KiB

+421 -111
View File
@@ -1,28 +1,239 @@
.charsheet {
background-color:#ECECEC;
/* CSS Reset */{}
.charsheet .sheet-wrapper div, .charsheet .sheet-wrapper span, .charsheet .sheet-wrapper label,
.charsheet .sheet-wrapper h1, .charsheet .sheet-wrapper h2, .charsheet .sheet-wrapper h3, .charsheet .sheet-wrapper h4, .charsheet .sheet-wrapper h5, .charsheet .sheet-wrapper h6, .charsheet .sheet-wrapper p,
.charsheet .sheet-wrapper table, .charsheet .sheet-wrapper caption, .charsheet .sheet-wrapper tbody, .charsheet .sheet-wrapper tfoot, .charsheet .sheet-wrapper thead, .charsheet .sheet-wrapper tr, .charsheet .sheet-wrapper th, .charsheet .sheet-wrapper td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
color: #404040;
vertical-align: baseline;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.charsheet h3 {
.charsheet .sheet-wrapper table {
border-collapse: collapse;
border-spacing: 0;
}
.charsheet .sheet-wrapper input::-webkit-outer-spin-button,
.charsheet .sheet-wrapper input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.charsheet .sheet-wrapper input[type="number"] {
-moz-appearance: textfield;
}
.charsheet .sheet-wrapper textarea {
resize: none;
}
/* Button Reset */
.charsheet .sheet-wrapper button[type="roll"]:before {
content: ""!important;
display: none;
}
.charsheet .sheet-wrapper button[type="roll"],
.charsheet .sheet-wrapper .sheet-btn {
width: 100%;
height:24px;
vertical-align: middle;
padding: 0;
display: inline-block;
margin: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
background-color: transparent;
border: 1px solid #ccc;
white-space: nowrap;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.charsheet .sheet-wrapper button[type="roll"]:hover,
.charsheet .sheet-wrapper .sheet-btn:hover,
.charsheet .sheet-wrapper .sheet-hider input[type=checkbox]:checked ~ .sheet-btn {
background-color: #8C001A;
border-color: #8C001A;
}
.charsheet .sheet-wrapper .sheet-hider input[type=checkbox]:checked ~ .sheet-btn {
}
.charsheet .sheet-wrapper button[type="roll"] label,
.charsheet .sheet-wrapper button[type="roll"] input {
height:24px;
line-height: 24px;
font-size: 12px;
vertical-align: middle;
text-align:center;
width: 99%;
cursor: pointer;
background: none;
box-shadow: none;
transition: none;
border-radius: none;
border:none;
}
.charsheet .sheet-wrapper button[type="roll"] input {
}
.charsheet .sheet-wrapper button[type="roll"]:hover label,
.charsheet .sheet-wrapper button[type="roll"]:hover input {
color: white;
border: none;
}
/* Main Styles */
.charsheet {
background-color: #ECECEC;
}
.charsheet .sheet-wrapper h3 {
background-color:#3F0001;
color:#fff;
padding-left:5px;
padding:3px;
margin-bottom:5px;
font-size:18px;
font-weight:700;
}
.charsheet textarea {
width:95%;
}
.charsheet .sheet-wrapper {
font-size:11px;
}
.charsheet .sheet-1colrow {
.charsheet .sheet-wrapper input, .charsheet .sheet-wrapper textarea, .charsheet .sheet-wrapper select, .charsheet .sheet-wrapper input[type="number"] {
display: inline-block;
border: 1px solid #aaa;
padding: 2px;
height: 24px;
width: 100%;
font-size: 12px;
line-height: 16px;
font-weight: normal;
margin: 0;
color: #555;
background-color: white;
vertical-align: middle;
cursor: auto;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
text-align: start;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-ms-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-writing-mode: horizontal-tb;
}
.charsheet .sheet-box {
.charsheet .sheet-wrapper input:not([type='checkbox']) {
-webkit-appearance: textfield;
}
.charsheet .sheet-wrapper input[type="checkbox"] {
margin-top: 7px;
height: 13px;
width: 13px;
color: #555;
border: 1px solid #aaa;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-ms-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
}
.charsheet .sheet-wrapper input[disabled],
.charsheet .sheet-wrapper select[disabled],
.charsheet .sheet-wrapper textarea[disabled],
.charsheet .sheet-wrapper input[readonly],
.charsheet .sheet-wrapper select[readonly],
.charsheet .sheet-wrapper textarea[readonly] {
background-color: transparent;
border-color: #aaa;
cursor: not-allowed;
}
.charsheet .sheet-wrapper textarea {
width: 98%;
height: 90px;
font-size: 13px;
line-height: 18px;
}
.charsheet .sheet-wrapper label {
display: inline-block;
width: 100%;
font-size: 12px;
text-align: left;
font-weight:700;
height: 22px;
line-height: 22px;
vertical-align: middle;
}
.charsheet .sheet-wrapper .sheet-3colrow .sheet-col {
width: calc(33% - 3px) !important;
margin-right: 2px !important;
}
.charsheet .sheet-wrapper .sheet-3colrow .sheet-col:last-child {
margin-right: 0 !important;
}
.charsheet .sheet-wrapper .sheet-2colrow .sheet-col {
width: calc(50% - 3px) !important;
margin-right: 2px !important;
}
.charsheet .sheet-wrapper .sheet-2colrow .sheet-col:last-child {
margin-right: 0 !important;
}
/* Special Styles */
.charsheet .sheet-wrapper .sheet-box {
padding: 5px;
margin-top:-10px;
margin-top:-5px;
border-top: 1px solid #8C001A;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#8C001A), to(transparent));
background-image: -webkit-linear-gradient(#8C001A, transparent);
@@ -44,122 +255,221 @@
background-repeat:no-repeat;
}
.charsheet label {
display: inline-block;
width: 90px;
text-align: right;
}
.charsheet label.sheet-left {
text-align:left;
}
.charsheet label.sheet-long {
width: 180px;
text-align: left;
}
.charsheet label.sheet-medium {
width: 110px;
text-align: left;
}
.charsheet label.sheet-short {
width: 50px;
text-align: left;
}
.charsheet input .charsheet select{
display: inline-block;
width: 150px;
}
.charsheet input.sheet-number {
width: 30px;
}
.charsheet input.sheet-short {
width: 40px;
}
.charsheet input.sheet-medium {
width: 100px;
}
.charsheet input.sheet-long {
width:250px;
}
.charsheet input.checkboxes {
width: 40px;
}
.charsheet table td, .charsheet table th {
font-size: 0.9em;
font-weight: bold;
text-align: center;
.charsheet .sheet-wrapper .sheet-transparent {
background:transparent;
border:transparent;
}
.charsheet select {
width: 150px;
.charsheet .sheet-wrapper .sheet-inline {
display:inline-block;
}
/* base info */
/* Rows and Items */
.sheet-baseinfo {
display: inline-block;
width: 149px;
margin-right: 3px;
font-size:0.9em;
.charsheet .sheet-wrapper .sheet-fiftypercent {
display:inline-block;
width: calc(50% - 3px) !important;
margin-right: 2px !important;
}
.sheet-baseinfo button {
display:block
.charsheet .sheet-wrapper .sheet-fiftypercent:last-child {
display:inline-block;
margin-right: 0 !important;
}
.sheet-baseinfo label, .sheet-baseinfo input, .sheet-baseinfo select {
display: block;
text-align: left;
width: 100%;
.charsheet .sheet-wrapper .sheet-sixtysixpercent {
width: calc(33% - 3px) !important;
margin-right: 2px !important;
}
.charsheet .sheet-wrapper .sheet-sixtysixypercent:last-child {
margin-right: 0 !important;
}
.charsheet .sheet-wrapper .sheet-thirtypercent {
width: calc(33% - 3px) !important;
margin-right: 2px !important;
}
.charsheet .sheet-wrapper .sheet-thirtypercent:last-child {
margin-right: 0 !important;
}
.charsheet .sheet-wrapper .sheet-sixteenpercent {
width: calc(16% - 3px) !important;
margin-right: 2px !important;
}
.charsheet .sheet-wrapper .sheet-sixteenpercent:last-child {
margin-right: 0 !important;
}
.charsheet .sheet-wrapper .sheet-row {
height: 28px;
margin: 0 0 2px;
}
.charsheet .sheet-wrapper .sheet-doublerow {
height: 48px;
margin: 0 0 2px;
}
.charsheet .sheet-wrapper .sheet-alternative:nth-child(even) {
background-color: #DBB0B1;
}
.charsheet .sheet-wrapper .sheet-alternative:nth-child(even) input {
background-color: transparent;
}
.charsheet .sheet-wrapper .sheet-header {
height: 20px;
margin: 0;
}
.sheet-baseinfo label {
.charsheet .sheet-wrapper .sheet-header label {
padding: 0;
font-size: 10px;
height: 20px;
line-height: 20px;
font-weight: 700;
}
.charsheet .sheet-wrapper .sheet-footer {
height: 20px;
margin-bottom: -5px;
}
.charsheet .sheet-wrapper .sheet-footer label {
padding: 0;
font-size: 10px;
height: 20px;
line-height: 20px;
font-weight: 700;
vertical-align: super;
}
.charsheet .sheet-wrapper .sheet-doublefooter {
height: 46px;
margin: 0;
}
.charsheet .sheet-wrapper .sheet-doublefooter label {
padding: 0;
font-size: 10px;
height: 20px;
line-height: 20px;
font-weight: 700;
vertical-align: super;
}
.charsheet .sheet-wrapper .sheet-item {
display: inline-block;
width: 100%;
height: 28px;
vertical-align: middle;
margin: 0 -2px;
text-align: left;
padding: 3px 2px;
}
.charsheet .sheet-wrapper .sheet-item.sheet-center {
text-align: center;
}
.charsheet .sheet-wrapper .sheet-item.sheet-multiline label {
line-height: 12px;
padding-top: 1px;
}
.charsheet .sheet-wrapper .sheet-item.sheet-puny {
width: calc(10% - 3%);
}
.charsheet .sheet-wrapper .sheet-item.sheet-little {
width: calc(12% - 0.5%);
}
.charsheet .sheet-wrapper .sheet-item.sheet-tiny {
width: calc(15% - 2.2%);
}
.charsheet .sheet-wrapper .sheet-item.sheet-small {
width: calc(20% - 0.5%);
}
.charsheet .sheet-wrapper textarea.sheet-small {
height: 32px;
}
.charsheet .sheet-wrapper .sheet-item.sheet-med {
width: calc(30% - 0.5%);
}
.charsheet .sheet-wrapper .sheet-item.sheet-large {
width: calc(40% - 4%);
}
.charsheet .sheet-wrapper .sheet-item.sheet-big {
width: calc(50% - 3%);
}
.charsheet .sheet-wrapper .sheet-item.sheet-morebig {
width: calc(60% - 3%);
}
.charsheet .sheet-wrapper .sheet-item.sheet-bigger {
width: calc(70% - 3%);
}
.charsheet .sheet-wrapper .sheet-item.sheet-huge {
width: calc(80% - 3%);
}
/* Notes Textfield */
.charsheet .sheet-wrapper .sheet-notesfield textarea {
resize: vertical;
padding: 2px;
height: 18px;
width: 95%;
font-size: 12px;
line-height: 18px;
font-weight: normal;
margin: 0;
color: #555;
background-color: white;
vertical-align: middle;
}
/* Drawing the Lines! */
.charsheet .sheet-wrapper .sheet-topline label {
border-top: 1px solid #8C001A;
width: 100%;
}
.sheet-baseinfo.sheet-longlist label {
border-bottom: 1px solid #8C001A;
border-top: 0px;
width: 100%;
margin-bottom: 3px;
}
.sheet-baseinfo.sheet-longlist input {
margin-bottom: 3px;
}
.sheet-baseinfo.sheet-number {
width: 39px;
margin-right: 7px;
margin:auto;
font-size:11px;
font-weight:bold;
vertical-align:super;
line-height:15px;
}
.sheet-baseinfo.sheet-longnumber {
width: 47px;
.charsheet .sheet-wrapper .sheet-footer.sheet-topline label {
margin-top:-10px;
}
.sheet-baseinfo.sheet-short {
width: 60px;
.charsheet .sheet-wrapper .sheet-bottomline label {
border-bottom: 1px solid #8C001A;
width: 100%;
margin:auto;
font-size:11px;
font-weight:bold;
}
.sheet-baseinfo.sheet-medium {
width: 100px;
}
.sheet-baseinfo.sheet-long {
width:250px;
.charsheet .sheet-wrapper .sheet-footer.sheet-bottomline label {
margin-bottom:-10px;
}
/* stats */
/* Baseinfo */
.sheet-weapon-stats {
display: inline-block;
margin-left: 25px;
}
.sheet-weapon-stats label, .sheet-weapon-stats input {
width: 40px;
text-align: left;
}
.sheet-weapon-stats select {
width: 100px;
text-align: left;
}
.charsheet .sheet-wrapper .sheet-baseinfo {
display: inline-block;
width: 145px;
}
+1 -1
View File
@@ -3,5 +3,5 @@
"css": "Shadowrun5Style.css",
"authors": "Neirin D., JoeIngledew",
"preview": "Shadowrun5Preview.png",
"instructions": "* If you want to use an (all) attribute(s) from the sheet (you HAVE TO do this for woundmod and paintolerance or no roll will work), you have to *select* them in the sheet at least once\r* Values are inserted like they show in the book - so negative numbers should be written with a '-' in front\r* In most Rolls there will be an option to include modifiers - the negative/positive value also applies here\r* The Drain/Fade Attribute and Software/Spellcasting fields in the upper part of the sheet are needed if you want to use the integrated roll for the Spells you entered\r\r##Useful Attributes\r\r###Attribute Scores:\r* Body @{body}\r* Agility @{agility}\r* Reaction @{reaction}\r* Strength @{strength}\r* Willpower @{willpower}\r* Logic @{logic}\r* Intuition @{intuition}\r* Charisma @{charisma}\r* Magic Resonance @{magicresonance}\r* Edge @{edge}\r \r###Combat Info\r\r####Wounds\r* @{physical} - physical condition monitor / wounds\r* @{stun} - stun condition monitor / wounds\r* @{paintolerance} - higher or lower pain tolerance (standard value 3)\r* @{woundmod} - calculated wound modifier (see below for macro)\r \r#####Every Attribute that starts with 'primary-' also has 'secondary-' and 'tertiary-' versions of it \r####Defensive\r* @{avoid} - @reaction+@intuition\r* @{avoidmisc} - number to in- or decrease the avoid \r* @{armor} - current worn armor - the amount in the 'Core Combat Info' block\r* @{armormisc} - number to increase or decrese damage resistance rolls\r\r####Skills\rThere is no option to access the Skills directly at this point - sorry!\r\r##Known Problems / Bugs / ToDo\r\r* Text input fields can't be referenced into another field - Core Combat Info needs double entries\r"
"instructions": "* Values are inserted like they show in the book - so negative numbers should be written with a '-' in front, positive numbers just as the number (DON'T write '+', it will break the rolls)\r* In most Rolls there will be an option to include modifiers - the negative/positive value also applies here\r* 'Quick Roll Collection' is everything you need if you don't want to use anything else\r* A lot of buttons throughout the sheet to make your life easier\r## Useful Attributes\r\r### Attribute Scores:\r* Body - @{body}\r* Agility - @{agility}\r* Reaction - @{reaction}\r* Strength - @{strength}\r* Willpower - @{willpower}\r* Logic - @{logic}\r* Intuition - @{intuition}\r* Charisma - @{charisma}\r* Magic / Resonance - @{magicresonance}\r* Edge - @{edge}\r### Combat Info\r\r#### Wounds\r* @{physical} - physical condition monitor / wounds\r* @{stun} - stun condition monitor / wounds\r* @{paintolerance} - higher or lower pain tolerance (standard value 3)\r* @{woundmod} - calculated wound modifier (see below for macro)\r#### Offensive\r* @{primaryweapon-} - and @{secondaryweapon-} are the two fixed Ranged Weapon slots, you can access all Attributes from these weapons directly with useing this as a prefix and then:\r* @{-acc} - Accuracy\r* @{-dam} - Damage Value\r* @{-ap} - Armor Penetration\r* @{-mode} - Weapon Modes\r* @{-rc} - Recoil Compensation\r* @{-ammo} - Max Ammo\r* @{-skill} - Skill Value used for the Weapon Type\r\r* Same goes for Melee weapons with the prefix @{primarymeleeweapon-} and @{secondarymeleeweapon-} (Of course without Weapon Mode, Recoil and Ammo)\r#### Defensive\r* @{avoid} - [[@reaction+@intuition]]\r* @{avoidmisc} - number to in- or decrease the avoid - Accessable through the 'Core Combat Info' Section\r* @{armor} - First armor in the Armor Sub-Section - the amount in the 'Core Combat Info' block\r* @{armormisc} - First armor in the Armor Sub-Section - number to increase or decrese damage resistance rolls\r\r#### Skills\rThere is no option to access the Skills directly at this point - sorry!"
}