bol/styles/bol.less
Nicolas Delaforge 9f907c9417 initial import
2021-07-08 10:14:44 +02:00

378 lines
9.8 KiB
Plaintext

@import "flex";
@import "forms";
@import "typography";
@logo-width: 190px;
@logo-height: 115px;
@deco-width: 330px;
@deco-height: 62px;
@attributes-width: 64px;
@attributes-height: 64px;
@footer-height: 30px;
@sidebar-width: 250px;
@colorOlive: #4b4a44;
.bol {
&.sheet {
&.actor {
.window-content {
background-color: white;
background-image: url("/systems/bol/ui/logo.webp");
background-repeat: no-repeat;
background-size: @logo-width @logo-height;
height: 100%;
padding: 5px;
overflow-y: hidden;
form {
height: 100%;
.sheet-header {
//background-color: red;
background-image: url("/systems/bol/ui/banner.webp");
background-repeat: no-repeat;
background-size: @deco-width @deco-height;
background-position-y: -15px;
background-position-x: right;
//padding-left: @logo-width;
//padding-top: @deco-height;
height: @logo-height;
min-height: @logo-height;
max-height: @logo-height;
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items:flex-end;
padding-bottom: 10px;
.header-field {
//background-color: pink;
//border:1px solid black;
.header-field-group {
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items:baseline;
.header-field-label {
margin-right: 5px;
}
.charname,
.header-field-value{
color: @colorOlive;
font-family: 'Contrail One', cursive;
font-size: 1.5rem;
background-color: #EEE;
}
//.charname {
////color: @colorOlive;
//font-family: Wolfsbane2Expanded;
//height: 50px;
//padding: 0px;
//margin: -10px 0 10px 0;
//color: @colorOlive;
//font-family: Wolfsbane2Expanded;
//font-family: 'Contrail One', cursive;
//font-size: 1.5rem;
//background-color: #EEE;
//width: 100%;
//height: 100%;
//margin: 0;
//}
}
}
}
.sidebar {
//background-color: green;
//background-color: red;
padding-top: @logo-height;
min-width: @sidebar-width;
width: @sidebar-width;
max-width: @sidebar-width;
.profile-img {
cursor: pointer;
border: none;
background-color: #EEE;
height: auto;
width: calc(@sidebar-width - 10px);
min-width: calc(@sidebar-width - 10px);
max-width: calc(@sidebar-width - 10px);
margin-right: 10px;
}
}
.main {
//background-color: blue;
//background-image: url("/systems/bol/ui/border.webp");
//background-repeat: no-repeat;
////background-size: 40px 40px;
//background-position: top left;
/* Sheet Tabs */
.tabs {
flex: 0 0 40px;
background-color: black;
.item {
line-height: 40px;
font-weight: bold;
font-family: CCMeanwhile;
color: white;
font-size: 14px;
}
.item.active {
text-decoration: underline;
text-shadow: none;
}
}
.sheet-body {
overflow: hidden;
.tab {
height: 100%;
overflow-y: auto;
/* Items List */
.items-list {
list-style: none;
margin: 7px 0;
padding: 0;
overflow-y: auto;
.item {
min-height: 30px;
line-height: 24px;
padding: 3px 0 3px 3px;
border-bottom: 1px solid #BBB;
align-items: stretch;
img {
flex: 0 0 30px;
margin-right: 5px;
}
.item-image {
margin: 0;
}
.item-name {
margin: 0;
}
.item-controls {
flex: 0 0 36px;
}
.item-buttons {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
flex: 2;
justify-content: flex-start;
}
.item-button {
line-height: 1;
font-size: 11px;
flex: none;
width: auto;
}
}
.item-header {
//background-color: black;
//color: white;
font-family: CCMeanwhile;
//font-size: 1.2rem;
//.item-image {
// font-family: Wolfsbane2;
// font-size: 1.5rem;
//}
}
}
.attribute {
&.vigor {
background-image: url("/systems/bol/ui/attributes/vigor.webp");
background-repeat: no-repeat;
background-position: center center;
background-size: @attributes-width @attributes-height;
}
&.agility {
background-image: url("/systems/bol/ui/attributes/agility.webp");
background-repeat: no-repeat;
background-position: center center;
background-size: @attributes-width @attributes-height;
}
&.mind {
background-image: url("/systems/bol/ui/attributes/mind.webp");
background-repeat: no-repeat;
background-position: center center;
background-size: @attributes-width @attributes-height;
}
&.appeal {
background-image: url("/systems/bol/ui/attributes/appeal.webp");
background-repeat: no-repeat;
background-position: center center;
background-size: @attributes-width @attributes-height;
}
.stat-value {
margin-top:-10px;
}
}
&.description {
.editor, .editor-content {
background-color: red;
height: 100%;
}
}
}
}
}
}
}
.stat-value {
font-size: 1.5rem;
font-weight: bold;
color: darkred;
}
.stat-roll {
font-size: 1.5rem;
}
.header-field-label,
.stat-label {
font-weight: bold;
font-family: Wolfsbane2Expanded;
font-size: 2rem;
font-variant: small-caps;
}
.rounded {
//border : 2px solid black;
border-radius: 100px;
width: 4rem;
height: 4rem;
}
.rounded-border {
border: 3px solid @colorOlive;
border-radius: 100px;
width: 4rem;
height: 4rem;
}
.half-rounded {
border-radius: 100px 100px 0px 0px;
width: 4rem;
height: 4rem;
}
.half-rounded-border {
border-radius: 100px 100px 0px 0px;
border: 3px solid @colorOlive;
width: 4rem;
height: 4rem;
}
.bol-footer {
height: @deco-height;
max-height: @deco-height;
min-height: @deco-height;
.footer-left {
img {
border: none;
height: @deco-height;
max-height: @deco-height;
min-height: @deco-height;
transform: scaleX(-1);
}
}
.footer-center {
margin-top: 20px;
margin-left: calc(-@deco-width * 2);
margin-right: calc(-@deco-width * 2);
height: @footer-height;
max-height: @footer-height;
min-height: @footer-height;
background-color: black;
}
.footer-right {
text-align: right;
img {
border: none;
height: @deco-height;
max-height: @deco-height;
min-height: @deco-height;
}
}
}
min-width: 760px;
min-height: 700px;
max-height: 700px;
}
&.item {
.window-content {
background-color: white;
background-image: url("/systems/bol/ui/logo.webp");
background-repeat: no-repeat;
background-size: @logo-width @logo-height;
height: 100%;
padding: 5px;
overflow-y: hidden;
form {
height: 100%;
}
}
min-width: 460px;
min-height: 400px;
}
}
}
.editor, .editor-content {
height: 100%;
}
.rollable {
color: @colorOlive;
cursor: pointer;
}
.malus {
color: darkred;
}
.bonus {
color: darkgreen;
}