[Weaverdice] V.2.00 - layout refactoring (#5553)

* Weaverdice v.2.00: Sheet refactored down to skills

* Weaverdice v.2.00: Sheet refactored

* Weaverdice v.2.00: update img-link names

Weaverdice/CHANGELOG-Weaverdice.md

@@ -1,3 +1,10 @@
+### Version 2.00(2019-10-15):
+
+- sheet code refactored to use CSS Flexbox and CSS Grid(previously the sheet used >
+`<table>` for layout)
+
+- adjusted layout to more closely resemble latest Gdocs version of the character sheet
+
 ### Version 1.41(2018-9-25):
 
 - crit fails/successes add back to skill rolls(roll of highest/lowest shows red/green)

Weaverdice/README.md

@@ -15,18 +15,17 @@ Any improvements to the sheet are welcome.
 
 - create power-generation and luck tables so character creation can be made quicker in Roll20
 
-- make the layout more flexible to resizing, it's still quite crude atm
 
 ## WeaverDice Resources & Community Links
 Resources | Link
 ------ | ---------------
 **Rulebook:** | https://docs.google.com/document/d/1e-H--GkPrbJq4WRNYndBnjjLjE7-2kOZkjwltkP1Ong/
-**Online charsheet:** | https://docs.google.com/document/d/15peMSA3fdp9EK9urwvYps4Q0z06EQ6iJdVggD81a2bg/
+**Online charsheet:** | https://docs.google.com/document/d/1TBYprvESCqI7rt13h85FWsTobcoQ7AuMh1-L8T5fMq8/
 **Getting Started:** | https://docs.google.com/document/d/1Py-zQBE94hm8Iu0Oqoy_p_svALXYkKVpTiq-i7PwCwE/
 **Character Creation Guide** | https://docs.google.com/document/d/1Eo7AZpjm-mIQBVxXpjvxgNoHMpSBa9M0onzhYaX-HDU/
 
 Community | Link
 ------- | ---------------
-**IRC-channel** | https://kiwiirc.com/client/irc.parahumans.net/#weaverdice
+**Discord** | https://discord.gg/TYsRHpG
 **Worm Web serial:** | https://parahumans.wordpress.com/
 **Subreddit:** | https://www.reddit.com/r/Weaverdice/

Weaverdice/Weaverdice.css

@@ -1,232 +1,405 @@
-/*@import url('https://themes.googleusercontent.com/fonts/css?kit=fpjTOVmNbO4Lz34iLyptLUXza5VhXqVC6o75Eld_V98');*/
+
+/* Sheet Version */
+.charsheet .sheet-version::after {
+	content: 'Sheet Version 2.00';
+}
+
+/* ----------------------- */
+/*          new css        */
+/* ----------------------- */
+
+/* --------- General Styling ------- */
+
+span{
+	padding:2px 4px 2px 4px;
+}
+
+*{ /* Defines a CSS variable */
+
+	--gray: #d9d9d9;
+}
 .charsheet {
 	background-color: white;
-}        
-
-.charsheet .sheet-version::after {
-	content: 'Sheet Version 1.41';
 }
 
-.charsheet  .sheet-bg-gray {
-	background-color: #d9d9d9;
-}
-.charsheet  .sheet-bg-black {
-	background-color: #000000;
-}
-.charsheet  .sheet-bg-white {
-	background-color: #ffffff
+textarea{
+	width: 98%;
+	height: 110px;
 }
 
-.charsheet  .sheet-def-txt {
-	font-size: 11pt;
-	font-family: "Calibri";
-	font-weight: 700;
+div.sheet-main{
+	width: 750px;
+	padding: 15px;
 }
-.charsheet  .sheet-tab-collps {
+
+div.sheet-section{
+	display: flex;
+	flex-direction: column;
+	margin: 0em 0em 1em 0em;
+	border: 2px solid var(--gray);
+}
+
+div.sheet-title,
+div.sheet-sub-title{
+	background-color: var(--gray);
+	text-align: center;
+	width: 100%;
+}
+div.sheet-title span,
+div.sheet-sub-title span,
+span.sheet-sub-title{
+	font-weight: 600;
+}
+
+
+
+/* ----  Section specific ------ */
+
+/*   Header  */
+div.sheet-header{
+	flex-flow: row wrap;
+	align-items: center;
+	background-image: url(https://parahumans.files.wordpress.com/2011/06/cityscape2.jpg);
+	background-size: 750px 110px;
+	background-repeat: no-repeat;
+	text-shadow:-2px 0 #000000,0 2px #000000,2px 0 #000000,0 -2px #000000;
+	color: white;
+}
+
+div.sheet-header span.sheet-title{
+	font-size: 300%;
+	width: 250px;
+}
+
+div.sheet-header span.sheet-version{
+	font-size: small; 
+}
+
+div.sheet-header{
+	display: flex;
+	justify-content: center;
+}
+
+div.sheet-header input{
+	width: 350px;
+	font-size: 28px;
+	margin-bottom: 20px;
+}
+
+
+
+/*   Main info  */
+div.sheet-main-info{
+	display: flex;
+	flex-flow: row wrap;
+}
+
+div.sheet-main-info div{
+	display: flex;
+	flex-flow: row nowrap;
+	width: 50%;
+}
+
+div.sheet-main-info span{
+	background-color: var(--gray);
+	font-weight: 600;
+	width: 100px;
+}
+
+div.sheet-main-info input{
+	width: 255px;
+	margin: 0px 0px 4px 2px;
+	padding-bottom: 1px;
+	border-style: none none solid none;
+	border-width: 1px;
+	border-color: black;
+	border-radius: 0px;
+}
+
+
+/*  WOUNDS */
+div.sheet-wounds{
+	display:grid;
+	grid-template-columns: 5.5em repeat(8, 1fr);
+	grid-template-rows: 0.5fr repeat(3, 1fr);
+	height: 125px;
+}
+
+div.sheet-wounds div.sheet-title{
+	grid-column: span 9;
+	grid-row: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+div.sheet-wounds div.sheet-title span{
+	padding: 1px;
+}
+
+div.sheet-wounds input[type="text"]{
+	width: 80px;
+	margin-left: 2px;
+}
+
+div.sheet-wounds div{
+	border: 1px solid var(--gray);
+}
+
+
+
+/* Stats & Gear */
+
+div.sheet-stats-inventory{
+	display: flex;
+}
+
+/* Stats */
+div.sheet-stats{
+	display: grid;
+	grid-auto-flow: column;
+	grid-template-rows: 0.2fr 1fr 1fr 1fr 1fr;
+	grid-template-columns: 1fr 1fr 1fr 1fr;
+	grid-auto-flow: column;
+	height:520px;
+	width: 46%;
+}
+
+div.sheet-stats div{
+	border: 1px solid var(--gray);
+}
+
+div.sheet-stats div.sheet-title{
+	grid-column: span 4;
+	grid-row: 1;
+	display: flex;
+	justify-content: center;
+}
+div.sheet-stats div:not(.sheet-title){
+	display: flex;
+	flex-flow: column;
+	justify-content: center;	
+}
+
+div.sheet-stats div.sheet-img-size{
+	background-size: 75px 75px;
+	background-repeat: no-repeat;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+div.sheet-stats div.sheet-img-size span{
+	font-weight: 600;
+}
+
+div.sheet-stats div.sheet-info span{
+	display: flex;
+	flex-flow: column;
+	align-items: center;
+}
+
+
+div.sheet-stats div.sheet-brawn-img{
+	background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Weaverdice/images/brawn.png);
+}
+div.sheet-stats div.sheet-athletics-img{
+	background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Weaverdice/images/athletics.png);
+}
+div.sheet-stats div.sheet-dexterity-img{
+	background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Weaverdice/images/dexterity.png);
+}
+div.sheet-stats div.sheet-wits-img{
+	background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Weaverdice/images/wits.png);
+}
+div.sheet-stats div.sheet-social-img{
+	background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Weaverdice/images/social.png);
+}
+div.sheet-stats div.sheet-knowledge-img{
+	background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Weaverdice/images/knowledge.png);
+}
+div.sheet-stats div.sheet-guts-img{
+	background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Weaverdice/images/guts.png);
+}
+
+
+/* Inventory */
+div.sheet-inventory{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 53%;
+	margin-left: 1em;
+}
+
+div.sheet-inventory div.sheet-title{
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	width: 100%;
+}
+
+div.sheet-inventory span{
+	text-align: center;
+}
+div.sheet-inventory input[name="attr_gearname"]{
+	width: 120px;
+}
+div.sheet-inventory input[name="attr_gearnotes"]{
+	width: 225px;
+}
+div.sheet-inventory input[type="number"]{
+	width: 32px;
+}
+
+
+
+/* Skills */
+div.sheet-skill{
+	display: flex;
+	flex-flow: row nowrap;
+}
+div.sheet-skill .sheet-name{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-start;
+	width: 115px;
+}
+div.sheet-skill .sheet-name input[type="text"]{
+	width: 110px;
+	margin-top: 5px;
+}
+div.sheet-skill .sheet-info{
+	display: flex;
+	flex-direction: column;
+	width: 600px;
+}
+
+div.sheet-skill .sheet-dice-row{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	padding: 4px 5px 4px 5px;
+}
+div.sheet-skill select.sheet-dice{
+	width: 40px;
+	margin-bottom: 0px;
+}
+div.sheet-skill select.sheet-stat{
+	width: 90px;
+	margin-bottom: 0px;
+}
+div.sheet-skill .sheet-dice-row input[type="text"]{
+	width: 90px;
+}
+div.sheet-skill textarea{
+	width: 102%;
+	margin-left: 3px;
+}
+
+/* territory, allies  */
+p {
+	margin-bottom: 0px;
+}
+table{
 	border-collapse: collapse;
 	margin-right: auto;
+	margin-bottom: 1em;
 }
-
-.sheet-n {
-	display:inline;
+table  .sheet-section {
+	width: 345px;
 }
-
-.charsheet  .sheet-left {
-	text-align: left;
-}
-.charsheet  .sheet-center {
-	text-align: center;
-}
-
-.charsheet  .sheet-gap {
-	height: 7pt;
-}
-
-.charsheet  .sheet-gap2 {
-	height: 13pt;
-}
-
-.charsheet  .sheet-ability-img {
-	overflow: hidden;
-	display: inline-block;
-	margin: 0.00px 0.00px;
-	border: 0.00px solid #000000;
-	transform: rotate(0.00rad) translateZ(0px);
-	-webkit-transform: rotate(0.00rad) translateZ(0px);
-	width: 96.00px;
-	height: 96.00px;
- }
-
- .charsheet  .sheet-ability-img-2 {
-	width: 96.00px; 
-	height: 96.00px; 
-	margin-left: 0.00px; 
-	margin-top: 0.00px; 
-	transform: rotate(0.00rad) translateZ(0px); 
-	-webkit-transform: rotate(0.00rad) translateZ(0px);
- }
-
-.charsheet .sheet-gray-border {
-	border-right-style: solid;
-	padding: 2pt 2pt 2pt 2pt;
-	border-bottom-color: #d9d9d9;
-	border-top-width: 1pt;
-	border-right-width: 1pt;
-	border-left-color: #d9d9d9;
-	vertical-align: top;
-	border-right-color: #d9d9d9;
-	border-left-width: 1pt;
-	border-top-style: solid;
-	border-left-style: solid;
-	border-bottom-width: 1pt;
-	border-top-color: #d9d9d9;
-	border-bottom-style: solid;
-}  
-
-.charsheet  .sheet-c56 {
-	width: 24pt;
-}
-
-.charsheet  .sheet-c11 {
-	width: 64pt;
-}
-
-.charsheet  .sheet-c4 {
-	width: 82pt;
-}    
-.charsheet  .sheet-c45 {
+table  .sheet-name {
 	width: 88pt;
 }       
-
-.charsheet  .sheet-c52 {
-	width: 98pt;
-}
-
-.charsheet  .sheet-c64 {
-	width: 155pt;
-}
-.charsheet  .sheet-c53 {
-	width: 165pt;
-} 
-.charsheet  .sheet-c15 {
+table .sheet-notes {
 	width: 196pt;
 }
-.charsheet  .sheet-c3 {
-	width: 207pt;
-}
-
-.charsheet  .sheet-c35 {
-	width: 277pt;
-}
-.charsheet  .sheet-c22 {
-	width: 286pt;
-}  
-.charsheet  .sheet-c10 {
-	width: 575pt;
-}
-.charsheet  .sheet-c29 {
-	width: 575pt;
-	height: 140px;
-}
-     
-.charsheet  .sheet-c43 {
-	width: 483pt;
-}
-
-.charsheet  .sheet-c17 {
-	line-height: 1.0;
-	orphans: 2;
-	widows: 2;
-	text-align: left;
-	height: 7pt;
-}		
-.charsheet  .sheet-graysides {
+table .sheet-gray-border {
 	border-right-style: solid;
-	padding: 2pt 2pt 2pt 2pt;
-	border-bottom-color: #ffffff;
-	border-top-width: 1pt;
-	border-right-width: 1pt;
-	border-left-color: #d9d9d9;
+	padding: 2pt;
 	vertical-align: top;
-	border-right-color: #d9d9d9;
-	border-left-width: 1pt;
-	border-top-style: solid;
-	border-left-style: solid;
-	border-bottom-width: 1pt;
-	width: 18pt;
-	border-top-color: #ffffff;
-	border-bottom-style: solid;
+	border: 1pt solid #d9d9d9;
 }
-.charsheet  .sheet-l-font {
-	font-weight: 400;
-	font-size: 24pt;
-	font-family: "Times New Roman";
+table .sheet-bg-gray {
+	background-color: #d9d9d9;
+}
+table .sheet-graysides {
+	padding: 2pt;
+	vertical-align: top;
+	border-width: 1pt;
+	border-color: white var(--gray);
+	border-style: solid;
+}
+p.sheet-gap {
+	height: 4pt;
+	width: 1em;
+}
+table .sheet-center{
+	display: flex;
+	justify-content: center;
 }
 
-.charsheet  .sheet-title {
-	padding-top: 12pt;
-	color: #000000;
-	font-weight: 700;
-	font-size: 16pt;
-	padding-bottom: 3pt;
-	font-family: "Arial";
-	line-height: 1.0;
-	orphans: 2;
-	widows: 2;
+
+/*   Appearance  */
+div.sheet-appearance{
+	display: flex;
+	flex-direction: row;
+}
+
+div.sheet-appearance div.sheet-section{
+	display: flex;
+	flex-direction: column;
+	width: 49%;
+}
+div.sheet-appearance div.sheet-section:last-child{
+	margin-left: 1em;
+}
+
+div.sheet-appearance span{
+	background-color: var(--gray);
 	text-align: center;
-}        
-.charsheet  .sheet-subtitle {
-	color: #000000;
-	font-size: 12pt;
-	padding-bottom: 3pt;
-	font-family: "Arial";
-	line-height: 1.0;
-	orphans: 2;
-	widows: 2;
+	font-weight: 600;
+}
+
+div.sheet-appearance textarea{
+	width: 97%;
+}
+
+/* footer */
+p.sheet-footer{
 	text-align: center;
-}		
-.charsheet button[type=roll].sheet-d6-dice::before {	/*new die changes die roller to d6*/
+	font-size:10px;
+}
+
+/* ------------------ Old CSS ------------------- */
+
+
+/* changes die button icon to d6*/
+.charsheet button[type=roll].sheet-d6-dice::before {
 	font-family: 'dicefontd6',arial;
 	content: 'F ';
 	color: red;
 }
 
-.charsheet  .sheet-header-container {
-	position: relative;
-	text-align: center;
-	color: white;
-	font-size: 450%;
-	text-shadow:-2px 0 #000000,0 2px #000000,2px 0 #000000,0 -2px #000000;
-}
-.charsheet  .sheet-header-upper-centered {
-	position: absolute;
-	top: 30%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}
-.charsheet  .sheet-header-lower-centered {
-	position: absolute;
-	top: 60%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}	
+
+/* Change wounds tracker into hearts */
 		
-/* Hide actual radio */
+/* 1 - Hide actual radio */
 .charsheet input[type="radio"]{
 	opacity: 0;
-	width: 16px;
-	height: 16px;
+	width: 20px;
+	height: 20px;
 	position: relative;
-	top: 5px;
-	left: 6px;
+	left: 45px;
 	margin: -10px;
 	cursor: pointer;
 	z-index: 1;
 }
 
-/* Fake radio */
+/* 2 - Fake radio */
 .charsheet input[type="radio"] + span::before{
-	margin-right: 4px;
+	margin-left: 30px;
 	border: solid 1px #a8a8a8;
 	line-height: 14px;
 	text-align: center;
@@ -248,7 +421,7 @@
 	color: red;
 	width: 12px;
 	height: 12px;
-	font-size: 28px;
+	font-size: 35px;
 	
 	-moz-border-radius: 50%;
 	-webkit-border-radius: 50%;
@@ -259,6 +432,7 @@
 .charsheet input[type="radio"]:checked ~ input[type="radio"] + span::before {    
 	content: "";
 }
+
 /*-------------------------------------------*/
 /*------------- Roll Templates---------------*/