566 lines
11 KiB
CSS
566 lines
11 KiB
CSS
textarea, select, .uneditable-input {
|
|
display: inline-block;
|
|
width: 100%;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
color: #555;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
/*********************************** Test stress ********************************/
|
|
.cb1{
|
|
grid-area: cb1;
|
|
}
|
|
.cb2{
|
|
grid-area: cb2;
|
|
}
|
|
.cb3{
|
|
grid-area: cb3;
|
|
}
|
|
.cb4{
|
|
grid-area: cb4;
|
|
}
|
|
.cb5{
|
|
grid-area: cb5;
|
|
}
|
|
.cb6{
|
|
grid-area: cb6;
|
|
}
|
|
|
|
.checkboxline {
|
|
display: grid;
|
|
grid-template-areas: 'cb1 cb2 cb3 cb4 cb5 cb6';
|
|
width: 180px;
|
|
gap:4px
|
|
}
|
|
|
|
.checkboxlabel {
|
|
display: block;
|
|
position: relative;
|
|
margin: 0px;
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
height: 27px;
|
|
}
|
|
/* Hide the default checkbox */
|
|
input[type=checkbox] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* Creating a custom checkbox
|
|
based on demand */
|
|
.sheet-stress-check {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 25px;
|
|
width: 25px;
|
|
margin-top: 5px;
|
|
background-color: white;
|
|
border: solid 1px grey;
|
|
}
|
|
|
|
.checkboxline {
|
|
display: grid;
|
|
grid-template-areas: 'cb1 cb2 cb3 cb4 cb5 cb6';
|
|
gap:30px;
|
|
width: 180px;
|
|
}
|
|
|
|
/* Specify the background color to be
|
|
shown when hovering over checkbox */
|
|
.checkboxlabel:hover input ~ .sheet-stress-check {
|
|
background-color: silver;
|
|
border: solid 2px whitesmoke;
|
|
}
|
|
|
|
/* Specify the background color to be
|
|
shown when checkbox is checked */
|
|
.checkboxlabel input:checked ~ .sheet-stress-check {
|
|
background-color: grey;
|
|
}
|
|
|
|
/* Checkmark to be shown in checkbox */
|
|
/* It is not be shown when not checked */
|
|
.sheet-stress-check:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
|
|
/* Display checkmark when checked */
|
|
.checkboxlabel input:checked ~ .sheet-stress-check:after {
|
|
display: block;
|
|
}
|
|
|
|
/* Styling the checkmark using webkit */
|
|
/* Rotated the rectangle by 45 degree and
|
|
showing only two border to make it look
|
|
like a tickmark */
|
|
.checkboxlabel .sheet-stress-check:after {
|
|
left: 8px;
|
|
bottom: 5px;
|
|
width: 6px;
|
|
height: 12px;
|
|
border: solid white;
|
|
border-width: 0 4px 4px 0;
|
|
-webkit-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/* *********************** end test *************************** */
|
|
|
|
|
|
/*********************************** Test conditions ********************************/
|
|
.cond-cb1{
|
|
grid-area: cond-cb1;
|
|
padding: 0;
|
|
margin:0;
|
|
width: 15px;
|
|
}
|
|
.cond-cb2{
|
|
grid-area: cond-cb2;
|
|
padding: 0;
|
|
margin:0;
|
|
width: 15px;
|
|
|
|
}
|
|
.cond-cb3{
|
|
grid-area: cond-cb3;
|
|
padding: 0;
|
|
margin:0;
|
|
width: 15px;
|
|
}
|
|
.cond-cb4{
|
|
grid-area: cond-cb4;
|
|
padding: 0;
|
|
margin:0;
|
|
width: 15px;
|
|
}
|
|
|
|
.condition-name {
|
|
grid-area: condition-name;
|
|
width: 290px;
|
|
margin-top: 4px;
|
|
margin-right: 0px;
|
|
margin-bottom: 2px;
|
|
height: 20px;
|
|
}
|
|
.spec-condition-name {
|
|
grid-area: spec-condition-name;
|
|
text-align: left;
|
|
width: 340px;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 15px;
|
|
margin-top: 2px;
|
|
height: 24px;
|
|
}
|
|
|
|
.cond-checkboxline {
|
|
display: grid;
|
|
grid-template-areas: 'cond-cb1 cond-cb2 cond-cb3 cond-cb4 spec-condition-name';
|
|
background-color: rgb(255, 255, 255);
|
|
margin-left: 5px;
|
|
width: 478px;
|
|
height: 28px;
|
|
gap: 10px;
|
|
margin-top: 4px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.cond-checkboxlabel {
|
|
display: block;
|
|
position: relative;
|
|
margin: 0px;
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
height: 27px;
|
|
}
|
|
/* Hide the default checkbox */
|
|
input[type=checkbox] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* Creating a custom checkbox
|
|
based on demand */
|
|
.sheet-cond-check {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 15px;
|
|
width: 15px;
|
|
margin-top: 5px;
|
|
background-color: white;
|
|
border: solid 1px grey;
|
|
}
|
|
|
|
/* Specify the background color to be
|
|
shown when hovering over checkbox */
|
|
.cond-checkboxlabel:hover input ~ .sheet-cond-check {
|
|
background-color: silver;
|
|
border: solid 2px whitesmoke;
|
|
}
|
|
|
|
/* Specify the background color to be
|
|
shown when checkbox is checked */
|
|
.cond-checkboxlabel input:checked ~ .sheet-cond-check {
|
|
background-color: grey;
|
|
}
|
|
|
|
/* Checkmark to be shown in checkbox */
|
|
/* It is not be shown when not checked */
|
|
.sheet-cond-check:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
|
|
/* Display checkmark when checked */
|
|
.cond-checkboxlabel input:checked ~ .sheet-cond-check:after {
|
|
display: block;
|
|
}
|
|
|
|
/* Styling the checkmark using webkit */
|
|
/* Rotated the rectangle by 45 degree and
|
|
showing only two border to make it look
|
|
like a tickmark */
|
|
.cond-checkboxlabel .sheet-cond-check:after {
|
|
left: 4px;
|
|
bottom: 3px;
|
|
width: 4px;
|
|
height: 8px;
|
|
border: solid white;
|
|
border-width: 0 4px 4px 0;
|
|
-webkit-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/* *********************** end test *************************** */
|
|
|
|
input {
|
|
width: 100%;
|
|
color: #555;
|
|
}
|
|
|
|
select, .uneditable-input {
|
|
height: 20px;
|
|
}
|
|
|
|
textarea {
|
|
margin: 0;
|
|
height: 120px;
|
|
resize: vertical;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ctitle {
|
|
grid-area: ctitle;
|
|
display: flex;
|
|
padding-left: 5px;
|
|
height: 40px;
|
|
background-color: black;
|
|
align-items: left;
|
|
}
|
|
.ctitle > p {
|
|
color:white;
|
|
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
|
|
font-size: 24px;
|
|
text-align: left;
|
|
height: 32px;
|
|
margin-top: 8px;
|
|
margin-bottom: 0px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
}
|
|
.hcontent {
|
|
margin-top: 0px;
|
|
padding-top: 0px;
|
|
height: 38px;
|
|
grid-area: hcontent;
|
|
background-color: rgb(255, 255, 255);
|
|
border: solid black 1px;
|
|
}
|
|
.hcontent>input {
|
|
height: 26px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
margin-top: 0px;
|
|
padding-top: 0px;
|
|
border: 0px;
|
|
}
|
|
.ccontent {
|
|
margin-top: 0px;
|
|
grid-area: ccontent;
|
|
background-color: white;
|
|
border: solid black 1px;
|
|
}
|
|
.ccontent > p {
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.hcategory{
|
|
grid-area: hcategory;
|
|
display: grid;
|
|
grid-template-columns: 200px auto;
|
|
grid-template-areas:
|
|
'ctitle hcontent';
|
|
}
|
|
|
|
.vcategory{
|
|
grid-area: vcategory;
|
|
display: grid;
|
|
grid-template-areas:
|
|
'ctitle'
|
|
'ccontent';
|
|
}
|
|
|
|
/* conditions */
|
|
.stress-cb {
|
|
height: 32px;
|
|
width: 32px;
|
|
margin-left: 5px;
|
|
background: rgb(255, 255, 255);
|
|
|
|
}
|
|
.stress-cb > input {
|
|
grid-area: stress-cb;
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-top: 1px;
|
|
margin-left: 1px;
|
|
}
|
|
|
|
.condition-cb1 {
|
|
grid-area: condition-cb1;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-top: 4px;
|
|
margin-right: 0px;
|
|
}
|
|
.condition-cb2 {
|
|
grid-area: condition-cb2;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-top: 4px;
|
|
margin-left: 0px;
|
|
}
|
|
.condition-cb2 > p {
|
|
font-size: 18px;
|
|
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
|
color: white;
|
|
margin-top:0px;
|
|
}
|
|
.condition-cb3 {
|
|
grid-area: condition-cb3;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-top: 4px;
|
|
margin-left: 0px;
|
|
}
|
|
.condition-cb4 {
|
|
grid-area: condition-cb4;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-top: 4px;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.condition-name > p {
|
|
text-align: left;
|
|
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
|
margin-top: 0px;
|
|
margin-left: 6px;
|
|
color: white;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.condition-line {
|
|
display: grid;
|
|
grid-template-areas:
|
|
'condition-cb1 condition-cb2 condition-cb3 condition-cb4 condition-name';
|
|
background-color: dimgray;
|
|
align-items: left;
|
|
margin: 4px;
|
|
height: 28px;
|
|
}
|
|
|
|
.header-name {
|
|
grid-area: header-name;
|
|
|
|
}
|
|
|
|
.header-refresh {
|
|
grid-area: header-refresh;
|
|
width: 200px;
|
|
}
|
|
|
|
.header-refresh > p {
|
|
font-size: 40px;
|
|
color: slateblue;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
|
|
}
|
|
|
|
.header-line {
|
|
grid-area: header-line;
|
|
width: 400px;
|
|
}
|
|
|
|
.footer {
|
|
grid-area: footer
|
|
}
|
|
|
|
.logo {
|
|
grid-area: logo;
|
|
background-image:url(Berlinlogo.png);
|
|
background-size: contain;
|
|
width: 162px;
|
|
height: 230px;
|
|
}
|
|
|
|
.app-value{
|
|
grid-area: app-value;
|
|
width: 40px;
|
|
height: 30px;
|
|
margin-top: 5px;
|
|
margin-right: 5px;
|
|
text-align: center;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.app-name{
|
|
grid-area: app-name;
|
|
width: auto;
|
|
height: 30px;
|
|
width: 150px;
|
|
}
|
|
.app-name > p {
|
|
font-family: Verdana, Geneva, Tahoma, sans-serif, Bold;
|
|
font-size: 20px;
|
|
color: white;
|
|
margin-top: 8px;
|
|
padding: 0 10px;
|
|
display: flex;
|
|
}
|
|
|
|
.app-dice{
|
|
grid-area: app-dice;
|
|
/*
|
|
margin-top: 0x;
|
|
width: 32px;
|
|
height: 32px; */
|
|
}
|
|
|
|
.approach-line{
|
|
display: grid;
|
|
grid-template-areas:
|
|
'app-dice app-name app-value';
|
|
background-color: dimgrey;
|
|
align-items: left;
|
|
gap: 5px;
|
|
width: 280px;
|
|
height: 40px;
|
|
}
|
|
|
|
.approaches{
|
|
grid-area: approaches;
|
|
display: grid;
|
|
grid-template-rows: auto auto auto auto auto auto;
|
|
margin-top: 10px;
|
|
margin-left: 10px;
|
|
margin-bottom: 10px;
|
|
gap :10px;
|
|
}
|
|
|
|
.aspect {
|
|
height: 30px;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.spacer {
|
|
height: 10px;
|
|
}
|
|
.hspacer{
|
|
width: 10px;
|
|
}
|
|
.main-left {
|
|
grid-area: main-left;
|
|
grid-template-rows: auto auto auto;
|
|
gap: 10px;
|
|
width: 300px;
|
|
}
|
|
|
|
.main-right {
|
|
grid-area: main-right;
|
|
}
|
|
|
|
.notes {
|
|
grid-area: notes
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-areas:
|
|
'header-name header-name header-name header-name logo'
|
|
'header-line header-line header-line header-refresh logo'
|
|
'header-line header-line header-line header-refresh logo'
|
|
'header-line header-line header-line header-refresh logo'
|
|
'main-left main-right main-right main-right main-right'
|
|
'main-left main-right main-right main-right main-right'
|
|
'main-left main-right main-right main-right main-right'
|
|
'notes notes notes notes notes';
|
|
width: 800px;
|
|
grid-gap: 10px;
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
.grid-container>div {
|
|
text-align: center;
|
|
padding: 0px 0;
|
|
font-size: 30px;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-FAE table {
|
|
width: 189px;
|
|
padding: 2px;
|
|
border: 1px solid;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.sheet-rolltemplate-FAE th {
|
|
color: rgb(126, 45, 64);
|
|
padding-left: 5px;
|
|
line-height: 1.6em;
|
|
font-size: 1.2em;
|
|
text-align: left;
|
|
font-family: "Times New Roman", Times, serif;
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
.sheet-rolltemplate-FAE .sheet-arrow-right {
|
|
border-top: 3px solid transparent;
|
|
border-bottom: 3px solid transparent;
|
|
border-left: 180px solid rgb(126, 45, 64);
|
|
}
|
|
|
|
.sheet-rolltemplate-FAE .sheet-tcat {
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-rolltemplate-FAE td {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-FAE-Approaches .inlinerollresult {
|
|
background-color: #ffffff;
|
|
border: none;
|
|
}
|