mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-02 05:02:28 +00:00
Cassie Levett
c8b6b8d46d
* refactor roll skill template * add matrix buttons * add running silent * save hot sim configuration * make buttons longer on cyber deck
459 lines
11 KiB
SCSS
459 lines
11 KiB
SCSS
@import 'src/scss/abstracts/variables';
|
|
@import 'src/scss/abstracts/mixins';
|
|
|
|
@import 'src/scss/base/base';
|
|
@import 'src/scss/base/utilities';
|
|
@import 'src/scss/base/typography';
|
|
|
|
@import 'src/scss/components/switch';
|
|
@import 'src/scss/components/switch-3';
|
|
@import 'src/scss/components/collapse';
|
|
@import 'src/scss/components/indicator';
|
|
@import 'src/scss/components/cyberdeck';
|
|
@import 'src/scss/components/hexagons';
|
|
@import 'src/scss/components/conditionmonitor';
|
|
|
|
@import 'src/scss/layout/tabs';
|
|
|
|
/***** TABS FOR SHEETS *****/
|
|
.sheet-settings-toggle,
|
|
.sheet-settings-flag {
|
|
input {
|
|
width: 3em;
|
|
}
|
|
|
|
input[type='checkbox'] + span {
|
|
background : transparent;
|
|
@extend .sheet-pictos;
|
|
font-size : 20px;
|
|
height : 20px;
|
|
text-align : center;
|
|
width : 20px;
|
|
}
|
|
}
|
|
|
|
/***** GENERIC STYLES *****/
|
|
select {
|
|
&.sheet-attribute-select {
|
|
option:nth-of-type(1n+5) { color: $red; }
|
|
option:nth-of-type(1n+9) { color: $purple; }
|
|
}
|
|
|
|
&.sheet-limit-select {
|
|
option:nth-of-type(1n+5) { color: $red; }
|
|
}
|
|
}
|
|
|
|
@import 'src/scss/_matrixdevice';
|
|
|
|
/***** GRID *****/
|
|
%gridGap {
|
|
grid-column-gap: 1%;
|
|
grid-row-gap: 1%;
|
|
}
|
|
|
|
/***************************************************************************************/
|
|
/************************** START OF THE PC SHEET *************************************/
|
|
/*************************************************************************************/
|
|
.sheet-pc {
|
|
background-color: #333;
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Shadowrun5thEdition/images/Blackbackground.jpg');
|
|
background-size : cover;
|
|
border : 3px solid;
|
|
box-shadow : inset 0px 0px 3px 1px $grayshadow;
|
|
margin-left : -1%;
|
|
padding-left : 0.5%;
|
|
|
|
button[name*='shots']:hover,
|
|
button > h2:hover,
|
|
button > span:hover,
|
|
label > button[type='roll']:hover,
|
|
.sheet-repeat-box button[type='roll']:hover,
|
|
.sheet-con-track button[type='action']:hover,
|
|
button[data-i18n='default']:hover {
|
|
color : $white;
|
|
text-shadow: $text-shadow;
|
|
}
|
|
|
|
button:hover > span {
|
|
color: $white;
|
|
}
|
|
|
|
h1 {
|
|
background-color: $red;
|
|
color : $white;
|
|
font-size : 1em;
|
|
letter-spacing : 2px;
|
|
line-height : 20px;
|
|
padding-left : 5px;
|
|
padding-right : 5px;
|
|
text-transform : uppercase;
|
|
}
|
|
|
|
h2 {
|
|
font-size : 0.9em;
|
|
line-height: 25px;
|
|
text-transform: capitalize;
|
|
@extend %display-inline-grid;
|
|
}
|
|
|
|
h3 {
|
|
color : hsla(0, 0%, 20%, 0.59);
|
|
font-size: 0.8em;
|
|
text-transform: capitalize;
|
|
|
|
@extend %display-inline-grid;
|
|
}
|
|
|
|
hr { margin: 7px 0px -2px 0px; }
|
|
|
|
input {
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.sheet-tabs {
|
|
@extend %display-inline-grid;
|
|
grid-template-columns: 1fr 5em 1fr 5em 2.5em 5em 5em 5em 5em 5em 5em 5em;
|
|
grid-column-gap: 0.25%;
|
|
padding: 0px 1% 3% 1%;
|
|
margin-top: 1%;
|
|
grid-row-gap: 10%;
|
|
|
|
button[type='roll'] {
|
|
grid-area: 2 / 5 / 2 / 5;
|
|
}
|
|
|
|
/***** PLAYER DATA INPUTS *****/
|
|
h1 {
|
|
background-color: transparent;
|
|
color: $white;
|
|
display: inline-block;
|
|
font-size : 1em;
|
|
grid-column: 6 / 8;
|
|
letter-spacing: 2px;
|
|
line-height : 20px;
|
|
margin-left: 5%;
|
|
text-align: right;
|
|
text-transform : uppercase;
|
|
}
|
|
|
|
h2 {
|
|
&[data-i18n-title='/w GM'] { grid-area: 2 / 1 / 2 / 1; }
|
|
&[data-i18n-title='wounds'] { grid-area: 2 / 3 / 2 / 4; }
|
|
&[data-i18n-title='modifiers'] { grid-area: 3 / 1 / 3 / 1; }
|
|
&[data-i18n-title='edge'] { grid-area: 3 / 3 / 3 / 4; }
|
|
}
|
|
|
|
@each $highlightButton in $tabs {
|
|
input[value*='#{$highlightButton}'] ~ button[name*='#{$highlightButton}'] {
|
|
@extend %highlight-button;
|
|
}
|
|
}
|
|
|
|
img {
|
|
grid-area: 1 / 1 / 2 / 6;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
label {
|
|
&[data-i18n-title='character name'] > input[type='text'],
|
|
&[data-i18n-title='player name'] > input[type='text'] {
|
|
color : $white;
|
|
font-weight : bolder;
|
|
background-color: transparent;
|
|
border : none;
|
|
box-shadow : none;
|
|
border-bottom : 2px solid $white;
|
|
border-radius : 0px;
|
|
height : 30px;
|
|
width : 100%;
|
|
grid-column: 4;
|
|
}
|
|
|
|
&[data-i18n-title='character name'] { grid-area: 1 / 8 / 1 / 14; }
|
|
&[data-i18n-title='player name'] { grid-area: 2 / 8 / 2 / 14; }
|
|
|
|
&[data-i18n-title='whisper rolls to gm']{ grid-area: 2 / 2 / 2 / 3; }
|
|
&[data-i18n-title='wounds'] { grid-area: 2 / 4 / 2 / 5;}
|
|
&[data-i18n-title='modifiers'] { grid-area: 3 / 2 / 3 / 3;}
|
|
&[data-i18n-title='edge'] { grid-area: 3 / 4 / 3 / 5;}
|
|
}
|
|
}
|
|
|
|
input.sheet-settings-toggle,
|
|
input.sheet-settings-flag,
|
|
input.sheet-collapse-flag {
|
|
@extend %toggleRelative;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.sheet-settings-toggle + span {
|
|
font-family: 'pictos';
|
|
}
|
|
|
|
&:checked + span {
|
|
color: $red;
|
|
}
|
|
|
|
&:hover + span {
|
|
transform: $button-scale-small;
|
|
}
|
|
}
|
|
|
|
select {
|
|
height: 1.8em;
|
|
padding: 0px;
|
|
color: $blacker;
|
|
}
|
|
|
|
div.sheet-core-info {
|
|
h2{ margin-right: 1%; }
|
|
|
|
input[type='text'], input[type='number'] {
|
|
background-color: transparent;
|
|
border: none;
|
|
|
|
&:placeholder-shown {
|
|
background-color: $graytrans;
|
|
}
|
|
}
|
|
}
|
|
|
|
input.sheet-display-flag { position: absolute; }
|
|
|
|
/***** DECORATIVE BOX THAT ADDS THE RED OUTLINE ON PC SHEET *****/
|
|
div.sheet-border-box {
|
|
background-image: -moz-linear-gradient($red, transparent), -moz-linear-gradient($red, transparent);
|
|
background-image: -o-linear-gradient($red, transparent), -o-linear-gradient($red, transparent);
|
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($red), to(transparent));
|
|
background-image: -webkit-linear-gradient($red, transparent);
|
|
background-image: linear-gradient($red, transparent), linear-gradient($red, transparent);
|
|
border-top : 2px solid $red;
|
|
clear : both;
|
|
border-top-right-radius: 10px;
|
|
border-top-left-radius : 0px;
|
|
|
|
button[type='roll'] {
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.sheet-pc-box {
|
|
border-top-right-radius: 10px;
|
|
border-top-left-radius : 0px;
|
|
}
|
|
}
|
|
|
|
/***** REPEATING CONTAINERS *****/
|
|
div.sheet-repeating-container {
|
|
div.repitem {
|
|
display: inline-grid;
|
|
padding: 1% 0.5%;
|
|
@extend %gridGap;
|
|
@extend %borderBottom;
|
|
|
|
button[type='roll'] {
|
|
text-align: left;
|
|
margin: 0px;
|
|
}
|
|
|
|
input {
|
|
&:nth-of-type(1n+2) { text-align: center; }
|
|
|
|
&[type='text'],
|
|
&[type='number'] {
|
|
@extend %borderBottom;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
label {
|
|
padding-right: 0px;
|
|
|
|
input[name='attr_name'],
|
|
input[name='attr_weapon'],
|
|
input[name='attr_quality'] {
|
|
text-align: left;
|
|
}
|
|
|
|
&[data-i18n-title='modifier'] {
|
|
width: 3em;
|
|
}
|
|
}
|
|
|
|
div.sheet-settings {
|
|
background-color: $ccc;
|
|
border-left: 2px solid $gray;
|
|
@extend %gridGap;
|
|
padding: 2% 1%;
|
|
width: 100%;
|
|
|
|
select { text-transform: capitalize; }
|
|
}
|
|
|
|
div.sheet-collapse { padding-left: 5%; }
|
|
}
|
|
}
|
|
|
|
div.repitem {
|
|
width: 100%;
|
|
|
|
input[type='number'] { text-align: center; }
|
|
}
|
|
|
|
@import 'src/scss/pages/tabs/static';
|
|
|
|
@import 'src/scss/pages/tabs/core';
|
|
|
|
/***** SKILLS *****/
|
|
div.sheet-skill-box {
|
|
$skillGrid: 1fr 3.5em 5em 5em 1em 1em;
|
|
|
|
h2:nth-of-type(1n+2) { text-align: center; }
|
|
|
|
label {
|
|
display : inline-block;
|
|
font-size : 0.8em;
|
|
text-transform: capitalize;
|
|
|
|
&[data-i18n-title='ratingmodifier'] {
|
|
grid-area: 1 / 3 / 1 / 7;
|
|
width: 100%;
|
|
|
|
input[type='number'] { width: 3em; }
|
|
}
|
|
|
|
&[data-i18n-title='specialization'] { grid-area: 3 / 1 / 3 / 7; }
|
|
&[data-i18n-title='notes'], textarea { grid-area: 4 / 1 / 4 / 7; }
|
|
|
|
& > input {
|
|
@extend %borderBottom;
|
|
text-align: left;
|
|
border-radius: 0px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
div.sheet-buttons {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1.5fr);
|
|
overflow: hidden;
|
|
}
|
|
|
|
input[name='attr_specialization'][value=''] ~ div.sheet-buttons {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
input[name='attr_skill'] { @extend %borderBottom; }
|
|
|
|
input[name='attr_rating_modifier'] { width: 3.5em; }
|
|
|
|
input[name='attr_specialization'][value=' '] ~ div.sheet-buttons button[name*='specialization'],
|
|
input[name='attr_specialization'][value=''] ~ div.sheet-buttons button[name*='specialization'] { @extend %display-none; }
|
|
|
|
div.sheet-row-long {
|
|
grid-template-columns: $skillGrid;
|
|
padding: 1% 0.5%;
|
|
width: 100%;
|
|
|
|
@extend %display-inline-grid;
|
|
@extend %gridGap;
|
|
|
|
h3:nth-of-type(1n+2) { text-align: center; }
|
|
}
|
|
|
|
option.sheet-option-headers {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
option.sheet-option-groups {
|
|
font-size: 1em;
|
|
font-style: italic;
|
|
}
|
|
|
|
div.repitem {
|
|
grid-template-columns: $skillGrid;
|
|
|
|
@include repeatingInformation(7, false);
|
|
|
|
input[name='attr_damage'],
|
|
input[name='attr_dicepool_modifier'] {
|
|
width: 3.5em;
|
|
}
|
|
|
|
div.sheet-settings {
|
|
grid-column: 1 / 7;
|
|
grid-template-columns: $skillGrid;
|
|
}
|
|
}
|
|
}
|
|
|
|
@import 'src/scss/pages/tabs/arms';
|
|
|
|
@import 'src/scss/pages/tabs/augs';
|
|
|
|
@import 'src/scss/pages/tabs/gear';
|
|
|
|
|
|
//used in magic & complex forms
|
|
select.sheet-attribute-select {
|
|
margin-top: 1%;
|
|
}
|
|
|
|
@import 'src/scss/pages/tabs/magic';
|
|
|
|
@import 'src/scss/pages/tabs/matrix';
|
|
|
|
@import 'src/scss/pages/tabs/social';
|
|
|
|
@import 'src/scss/pages/tabs/vehicle';
|
|
|
|
@import 'src/scss/pages/tabs/options';
|
|
}
|
|
|
|
@import 'src/scss/pages/_pc';
|
|
|
|
|
|
/******************************************************************************************/
|
|
/**************************** START OF THE NPC SHEET *************************************/
|
|
/****************************************************************************************/
|
|
@import 'src/scss/pages/npc';
|
|
|
|
/**************************************************************************/
|
|
/***************** PC & NPC SHEET SHOW & HIDE SETTINGS *******************/
|
|
/************************************************************************/
|
|
|
|
/* DISPLAY SETTINGS
|
|
============================= */
|
|
@import 'src/scss/_hide';
|
|
|
|
|
|
/*****************************************************************************************/
|
|
/**************************************** FOOTER ****************************************/
|
|
/***************************************************************************************/
|
|
@import 'src/scss/layout/footer';
|
|
|
|
/********************************************************************************************************/
|
|
/**************************************** REPEATING SECTIONS *******************************************/
|
|
/********************************************************************************************************/
|
|
@import 'src/scss/_repeatingsection';
|
|
|
|
/********************************************************************************************************/
|
|
/**************************************** Roll template *******************************************/
|
|
/********************************************************************************************************/
|
|
|
|
@import 'src/scss/_rolltemplate';
|
|
|
|
/********************************************************************************************************/
|
|
/******************************* Charactermancer ****************************************/
|
|
/******************************************************************************************************/
|
|
@import 'src/scss/_importer';
|
|
|
|
|
|
|
|
@import 'src/scss/layout/firefox';
|
|
|
|
@import 'src/scss/layout/lang-fr'; |