mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
Alien The Roleplaying Game - Character Sheet visual update (#7201)
* Cosmetic update Adjusted the layout so it scales easier, changed the fonts to give it more of a thematic feel and aligned many of the offset pieces to make it neater. Made some widgets larger and easier to understand for players. * Deleted .DS_Store Removed un-needed file * Removed Images Removed unused background, header and footer images
This commit is contained in:
Will-Maiden
@@ -1,49 +1,66 @@
|
||||
.sheet-background-wrap {
|
||||
background-color: #000000; /* Black */
|
||||
background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Alien%20Roleplaying%20Game/Images/Background-Stars.jpg?raw=true");
|
||||
background-size: cover;
|
||||
@import url('https://fonts.googleapis.com/css?family=Montserrat|Graduate|Courier+Prime|Share+Tech+Mono&display=swap');
|
||||
/* ORIGINAL */
|
||||
|
||||
.sheet-background-wrap{
|
||||
background-color: black;
|
||||
padding: 5px;
|
||||
min-width: 1128px;
|
||||
}
|
||||
.sheet-header-image{
|
||||
background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Alien%20Roleplaying%20Game/Images/Weyland-Yutani.png?raw=true");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
min-width: 1000px;
|
||||
padding: 5px 7px 5px 7px;
|
||||
background-size: contain;
|
||||
padding-top: 25px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.sheet-header-image {
|
||||
background-color: #000000; /* Black */
|
||||
background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Alien%20Roleplaying%20Game/Images/Header-Weyland-Yutani.png?raw=true");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 20px;
|
||||
padding: 0px 0px 15px 0px;
|
||||
}
|
||||
|
||||
.sheet-footer-image {
|
||||
background-color: #000000; /* Black */
|
||||
background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Alien%20Roleplaying%20Game/Images/Footer-Wwyland-Yutani.png?raw=true");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 10px;
|
||||
padding: 0px 0px 5px 0px;
|
||||
.sheet-footer-text{
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-family: 'Graduate';
|
||||
text-transform: uppercase;
|
||||
color: rgba(211, 211, 211, 1);
|
||||
}
|
||||
|
||||
.sheet-grid-container {
|
||||
display: grid;
|
||||
background-color: transparent;
|
||||
/* border: 1px solid rgba(211, 211, 211, 1); LightGrey */
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
border: 2px solid rgba(211, 211, 211, 1); /* LightGrey */
|
||||
border-radius: 0px;
|
||||
grid-gap: 10px;
|
||||
padding: 3px 10px 3px 10px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sheet-contains-thirteen-columns {
|
||||
grid-template-columns: 6.75% 6.75% 6.75% 6.75% 6.75% 6.75% 6.75% 6.75% 6.75% 6.75% 6.75% 6.75% 6.75%;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.sheet-contains-four-columns {
|
||||
grid-template-columns: 20% 20% auto auto;
|
||||
grid-template-columns: 20% 20% auto 25%;
|
||||
grid-gap: 0px;
|
||||
padding: 0px;
|
||||
text-align: left;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.sheet-roll-buttons{
|
||||
display: grid;
|
||||
grid-gap: 5px;
|
||||
}
|
||||
|
||||
.sheet-alpha-buttons{
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.sheet-beta-buttons{
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
margin: 5px 0px;
|
||||
|
||||
}
|
||||
.sheet-gamma-buttons{
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.sheet-span-one-two {
|
||||
@@ -168,6 +185,7 @@
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
line-height: 24px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.sheet-black-item {
|
||||
@@ -181,8 +199,23 @@
|
||||
|
||||
.sheet-weapon-item {
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(204, 217, 207, 1);
|
||||
width: auto;
|
||||
border-radius: 0px;
|
||||
border-right: 1px dashed rgb(0, 139, 139); /* Dark Cyan #008b8b */
|
||||
}
|
||||
|
||||
.sheet-weapon-item.sheet-range{
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.sheet-weapon-item.sheet-type{
|
||||
border-right-width: 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* - - - - - - - - - - AUTO EXPAND TEXTAREAS - - - - - - - - - - */
|
||||
.sheet-auto-expand {
|
||||
position: relative;
|
||||
@@ -190,16 +223,18 @@
|
||||
word-wrap: break-word;
|
||||
min-height: 1em;
|
||||
border: 1px Dashed #bfbfbf;
|
||||
text-align: left;
|
||||
font-family: 'Courier Prime';
|
||||
text-align: left;
|
||||
font-size: 0.9em;
|
||||
line-height: 1em;
|
||||
padding: 2px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.sheet-auto-expand span {
|
||||
visibility: hidden;
|
||||
white-space: pre-wrap;
|
||||
white-space: pre-wrap;
|
||||
display: block;
|
||||
font-family:
|
||||
}
|
||||
|
||||
.sheet-auto-expand textarea {
|
||||
@@ -224,6 +259,7 @@
|
||||
padding: inherit;
|
||||
text-align: inherit;
|
||||
text-transform: inherit;
|
||||
|
||||
}
|
||||
|
||||
.sheet-textarea-margin-correct {
|
||||
@@ -237,10 +273,28 @@
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.sheet-span-relationships .sheet-dotted-line,
|
||||
.sheet-span-critical-injuries .sheet-dotted-line{
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.sheet-teal-header {
|
||||
color: rgba(204, 217, 207, 1); /* Teal Varient */
|
||||
font-family: 'Graduate', cursive;
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
letter-spacing: .1em;
|
||||
}
|
||||
|
||||
button[type="roll"].sheet-button-skill, .sheet-medium-teal-header, .sheet-dark-teal-header{
|
||||
color: #008b8b; /* Dark Cyan #008b8b */
|
||||
font-family: 'Montserrat';
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.sheet-medium-teal-header {
|
||||
color: rgba(113, 142, 135, 1); /* Medium Teal #718e87 */
|
||||
}
|
||||
@@ -250,7 +304,7 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
.sheet-vertical-adjust-one {
|
||||
margin-top: 3px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.sheet-vertical-balance {
|
||||
@@ -262,12 +316,13 @@
|
||||
border: 1px solid rgba(0, 0, 0, 1); /* Black #000000 */
|
||||
border-radius: 0px 20px 20px 0px;
|
||||
float: left;
|
||||
width: 85%;
|
||||
height: 1em;
|
||||
width: 80%;
|
||||
line-height: 1em;
|
||||
margin: -14px 15% 0px -7px;
|
||||
text-align: left;
|
||||
padding: 0px 0px 0px 5px;
|
||||
|
||||
}
|
||||
|
||||
.sheet-more-curves {
|
||||
@@ -285,17 +340,26 @@
|
||||
}
|
||||
|
||||
.sheet-mini-header {
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-family: 'Montserrat';
|
||||
font-size: .75em;
|
||||
line-height: .75em;
|
||||
line-height: .75em;
|
||||
}
|
||||
|
||||
.sheet-bold {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
|
||||
.sheet-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
.sheet-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sheet-float-left {
|
||||
float: left;
|
||||
@@ -306,21 +370,13 @@
|
||||
float: right;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.sheet-fake-float {
|
||||
margin-right: 65%;
|
||||
.sheet-condition-title {
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.sheet-fake-float-two {
|
||||
margin-right: 64%;
|
||||
}
|
||||
|
||||
.sheet-fake-float-three {
|
||||
margin-right: 57%;
|
||||
}
|
||||
|
||||
.sheet-fake-float-four {
|
||||
margin-right: 59.5%;
|
||||
.sheet-relationship-title {
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.sheet-text-input {
|
||||
@@ -329,6 +385,21 @@
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
padding: 3px;
|
||||
font-family: 'Courier Prime';
|
||||
}
|
||||
|
||||
.sheet-select-input{
|
||||
color: #555;
|
||||
width: 100%;
|
||||
height: 1.95em;
|
||||
padding: 3px;
|
||||
margin-bottom: 0px;
|
||||
background: transparent;
|
||||
font-family: 'Courier Prime';
|
||||
}
|
||||
|
||||
.sheet-relationship-input{
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.sheet-seventy-seven-percent {
|
||||
@@ -351,24 +422,28 @@ input[type="number"].sheet-no-spin-input, input[type="number"].sheet-number-inpu
|
||||
}
|
||||
|
||||
input[type="number"].sheet-no-spin-input {
|
||||
font-family: 'Courier Prime';
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
background-color: White;
|
||||
border: 1px solid White;
|
||||
margin: -1px -2px;
|
||||
padding: 3px 0px 0px 0px;
|
||||
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
margin-top: -2px;
|
||||
margin-left: -3px;
|
||||
box-shadow: 1px 1px 7px rgba(0, 139, 139, 1), -1px -1px 7px rgba(0, 139, 139, 1), 1px 1px 10px white, -1px -1px 10px white;
|
||||
}
|
||||
|
||||
input[type="number"].sheet-number-input {
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border: 1px solid rgb(204, 204, 204);
|
||||
padding: 3px;
|
||||
font-family: 'Courier Prime';
|
||||
}
|
||||
|
||||
input[type="number"].sheet-shorter-number {
|
||||
@@ -471,9 +546,10 @@ input.sheet-tab {
|
||||
}
|
||||
|
||||
/* CUSTOM CHECKBOXES FOR ALIEN RPG */
|
||||
|
||||
input.sheet-numbered-box {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
@@ -490,16 +566,22 @@ input.sheet-numbered-box + span::before {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
background: #f5f5f5;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 9px;
|
||||
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
margin-left: -14px;
|
||||
margin-right: 2px;
|
||||
padding: 0px 0px 0px 0px;
|
||||
line-height: 14px;
|
||||
line-height: 16px;
|
||||
box-shadow: 0px 0px 5px #008b8b;
|
||||
}
|
||||
|
||||
input.sheet-condition + span::before {
|
||||
margin-right: 10px; /* Indent the conditions on the right-hand side */
|
||||
}
|
||||
|
||||
input.sheet-numbered-box:checked + span::before {
|
||||
color: #ffffff;
|
||||
background: #cc0000;
|
||||
@@ -550,6 +632,7 @@ input.sheet-letter-box + span::before {
|
||||
width: 28px;
|
||||
height: 14px;
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
margin-left: -28px;
|
||||
margin-right: 2px;
|
||||
padding: 0px 0px 0px 0px;
|
||||
@@ -564,6 +647,10 @@ input.sheet-letter-box:checked + span::before {
|
||||
box-shadow: 0px 0px 10px #008b8b;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* WOOHOO BUTTONS */
|
||||
button[type="roll"].sheet-button-alpha:before, button[type="roll"].sheet-button-skill:before, button[type="action"].sheet-action-modifier:before {
|
||||
content: ""!important;
|
||||
@@ -573,26 +660,25 @@ button[type="roll"].sheet-button-alpha:before, button[type="roll"].sheet-button-
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
button[type="roll"].sheet-button-skill {
|
||||
color: #008b8b; /* Dark Cyan #008b8b */
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
width: 60%;
|
||||
margin: 1px;
|
||||
margin: 4px 1px;
|
||||
background-color: transparent;
|
||||
border: 1px solid rgb(204, 217, 207); /* Teal Varient */
|
||||
border-radius: 5px;
|
||||
background-image: none;
|
||||
display: inline;
|
||||
text-shadow: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
button[type="roll"].sheet-button-skill:hover {
|
||||
color: rgb(204, 217, 207); /* Teal Varient */
|
||||
background-color: rgba(0, 139, 139, 1); /* Dark Cyan #008b8b */
|
||||
border: #008b8b;
|
||||
border: 1px solid #008b8b;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
@@ -607,23 +693,22 @@ button[type="roll"].sheet-bigger-skill {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
/* Attack button in weapon box */
|
||||
button[type="roll"].sheet-smaller-skill {
|
||||
width: 16%;
|
||||
border: 1px solid #008b8b; /* Gave it an outline as players were not realising it was a button */
|
||||
}
|
||||
|
||||
|
||||
button[type="roll"].sheet-button-alpha, button[type="roll"].sheet-button-beta, button[type="roll"].sheet-button-gamma{
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
border: 1px solid #008b8b;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
button[type="roll"].sheet-button-alpha {
|
||||
width: 16%;
|
||||
border: 1px solid #008b8b;
|
||||
}
|
||||
|
||||
button[type="roll"].sheet-button-beta {
|
||||
width: 29.5%;
|
||||
border: 1px solid #008b8b;
|
||||
}
|
||||
|
||||
button[type="roll"].sheet-button-gamma {
|
||||
width: 46%;
|
||||
border: 1px solid #008b8b;
|
||||
text-transform: lowercase; /* Exception because common usage of 1d6 is more important than consistency with theme. */
|
||||
}
|
||||
|
||||
button[type="roll"].sheet-button-skill:focus {
|
||||
|
||||
Reference in New Issue
Block a user