foundry-sw5e/less/apps.less
supervj b56a074697 DND5e Core 1.3.5
DND5e Core 1.3.5 modded to SW5e System

Combining with DND5e Core 1.3.2 to see one big commit since last core update

DND5e Core 1.3.2 modded to SW5e System
2021-06-22 22:01:19 -04:00

550 lines
10 KiB
Text

@import "./variables.less";
@navHeight: 30px;
@headerHeight: 100px;
@detailsHeight: 40px;
/* ----------------------------------------- */
/* All SW5e Apps */
/* ----------------------------------------- */
.sw5e {
.window-content {
font-size: 13px;
}
/* ----------------------------------------- */
/* Element Styles */
/* ----------------------------------------- */
// Item Sheet form fields
input[type="text"],
input[type="number"],
select {
height: calc(100% - 2px);
border: 1px solid @colorTan;
background: rgba(0, 0, 0, 0.05);
color: @colorDark;
}
// Hovered Fields
input[type="text"],
input[type="number"] {
&:hover,
&:focus {
border: 1px solid #111;
box-shadow: 0 0 8px red;
}
}
// Disabled Fields
input:disabled,
select:disabled,
textarea:disabled {
color: @colorOlive;
border: 1px solid transparent !important;
outline: none !important;
&:hover,
&:focus {
box-shadow: none !important;
border: 1px solid transparent !important;
outline: none !important;
}
}
// Buttons
button {
background: rgba(0, 0, 0, 0.10);
border: @borderGroove;
}
/* Form Groups */
.form-group {
label {
flex: 2;
color: @colorOlive;
font-weight: bold;
}
.form-fields {
.flexrow();
> * {
margin: 0 3px 0 0;
&:last-child { margin-right: 0; }
}
}
}
// Stacked Groups
.form-group.stacked {
> label {
flex: 0 0 100%;
margin: 0;
}
label.checkbox,
label.radio {
flex: auto;
text-align: left;
}
}
// Form Headers
.form-header {
margin: 0 0 0.25em 0;
padding: 2px 0;
border-top: @borderGroove;
border-bottom: @borderGroove;
.modesto();
}
/* Tags */
.tag {
display: inline-block;
margin: 0 2px 0 0;
padding: 0 3px;
font-size: 10px;
line-height: 16px;
border: 1px solid #999;
border-radius: 3px;
background: rgba(0, 0, 0, 0.05);
}
}
/* ----------------------------------------- */
/* Hit Dice Config Sheet Specifically */
/* ----------------------------------------- */
.sw5e.hd-config {
.form-group {
button.increment, button.decrement {
flex: 0 0 1rem;
line-height: 1rem;
}
button.decrement {
margin-right: 0;
}
span.sep {
margin: 0;
}
input {
flex: 0 0 2rem;
text-align: center;
margin-left: 2px;
margin-right: 2px;
}
}
}
/* ----------------------------------------- */
/* Entity Sheets Specifically */
/* ----------------------------------------- */
.sw5e.sheet {
.window-content {
overflow-y: hidden;
padding: 5px;
background: @sheetBackground;
font-size: 13px;
color: @colorDark;
form {
height: 100%;
overflow: hidden;
}
.tab {
height: 100%;
overflow-y: auto;
align-content: flex-start;
}
}
/* ----------------------------------------- */
/* Element Styles */
/* ----------------------------------------- */
// Input Fields
input[type="text"],
input[type="number"] {
background: none;
border: 1px solid transparent;
&:hover,
&:focus {
border: 1px solid #111;
}
}
// Select Fields
select {
flex: 1;
font-size: 12px;
height: 22px;
background: transparent;
}
// Rollable Titles
.editable .rollable:hover {
cursor: pointer;
}
.editable h4.rollable:hover,
.editable .rollable:hover > h4 {
color: #000;
text-shadow: 0 0 10px red;
}
// Separators
span.sep {
flex: none;
margin: 0 1px;
display: inline;
position: relative;
color: @colorTan;
font-weight: normal;
}
/* ----------------------------------------- */
/* TinyMCE */
/* ----------------------------------------- */
.editor {
height: 100%;
.tox-toolbar-overlord,
.tox-toolbar__primary {
background: none;
}
}
/* ----------------------------------------- */
/* Sheet Header */
/* ----------------------------------------- */
.sheet-header {
flex: 0 0 @headerHeight;
border-bottom: @borderGroove;
.header-details {
.modesto();
}
/* Character Name */
h1 {
flex: 1;
border-bottom: none;
height: 60px;
margin: 0;
padding: 5px;
input {
display: block;
height: 50px;
font-size: 32px;
margin: 0;
}
}
/* Profile Image */
img.profile {
flex: 0 0 @headerHeight;
max-width: @headerHeight;
height: @headerHeight;
object-fit: contain;
border: none;
border-right: @borderGroove;
}
/* Header Summary Details */
.summary {
flex: 0 0 100%;
height: @detailsHeight;
margin: 0;
padding: 0;
list-style: none;
border-top: @borderGroove;
border-bottom: none;
li {
height: calc(100% - 6px);
float: left;
margin: 2px 0;
padding: 0;
border-right: @borderGroove;
line-height: 34px;
color: @colorOlive;
&:last-child {
border-right: none;
}
}
}
}
/* ----------------------------------------- */
/* Sheet Navigation */
/* ----------------------------------------- */
.sheet-navigation {
flex: 0 0 @navHeight;
margin-bottom: 5px;
.modesto();
.item {
height: 30px;
line-height: 32px;
margin: 0 24px;
border-bottom: 3px solid @colorBeige;
&.active {
border-bottom: 3px solid @colorCrimson;
}
}
}
/* ----------------------------------------- */
/* Sheet Body */
/* ----------------------------------------- */
.sheet-body {
flex: 1;
overflow: hidden;
}
/* ----------------------------------------- */
/* List Filters */
/* ----------------------------------------- */
.filter-list {
align-items: center;
list-style: none;
margin: 0;
padding: 0;
line-height: 16px;
max-width: 70%;
.filter-icon {
flex: none;
font-size: 14px;
color: @colorTan;
}
.filter-item {
text-align: center;
font-size: 12px;
margin: 0 6px 0 0;
border-bottom: 3px solid @colorBeige;
white-space: nowrap;
&:last-child {
margin: 0;
}
&:hover {
text-shadow: 0 0 4px red;
border-bottom: 3px solid @colorTan;
}
&.active {
border-bottom: 3px solid @colorCrimson;
}
}
}
/* ----------------------------------------- */
/* Trait Lists */
/* ----------------------------------------- */
.traits {
margin: 5px 0 0;
.trait-selector {
flex: 0 0 16px;
padding: 2px 0;
color: #999;
font-size: 10px;
}
.traits-list {
flex: 0 0 100%;
line-height: 20px;
list-style: none;
margin: 0;
padding: 0;
}
}
/* ----------------------------------------- */
/* Items Lists */
/* ----------------------------------------- */
.items-list {
list-style: none;
margin: 0;
padding: 0;
overflow-y: auto;
scrollbar-width: thin;
color: @colorTan;
// Child lists
.item-list {
list-style: none;
margin: 0;
padding: 0;
}
// Item Name
.item-name {
flex: 2;
margin: 0;
overflow: hidden;
font-size: 13px;
text-align: left;
align-items: center;
h3, h4 {
margin: 0;
white-space: nowrap;
overflow-x: hidden;
}
}
// Control Buttons
.item-controls {
flex: 0 0 60px;
justify-content: space-between;
a {
font-size: 12px;
text-align: center;
}
}
// Individual Item
.item {
align-items: center;
padding: 0 2px; // to align with the header border
border-bottom: 1px solid @colorFaint;
&:last-child { border-bottom: none; }
.item-name {
color: @colorDark;
.item-image {
flex: 0 0 30px;
height: 30px;
background-size: 30px;
border: none;
margin-right: 5px;
}
}
}
// Section Header
.items-header {
height: 28px;
margin: 2px 0;
padding: 0;
align-items: center;
background: rgba(0, 0, 0, 0.05);
border: @borderGroove;
font-weight: bold;
> * {
font-size: 12px;
text-align: center;
}
h3 {
padding-left: 5px;
.modesto();
text-align: left;
font-size: 16px;
}
}
}
/* ----------------------------------------- */
/* Active Effects */
/* ----------------------------------------- */
.effects .item {
.effect-source,
.effect-duration,
.effect-controls {
text-align: center;
border-left: 1px solid @colorFaint;
border-right: 1px solid @colorFaint;
font-size: 12px;
}
.effect-controls {
border: none;
}
}
}
/* ----------------------------------------- */
/* Trait Selector
/* ----------------------------------------- */
.trait-selector {
.trait-list {
list-style: none;
margin: 0;
padding: 0;
}
input[type="text"] {
height: 24px;
margin: 2px;
}
}
/* ----------------------------------------- */
/* Actor Type Config Sheet Specifically */
/* ----------------------------------------- */
.actor-type {
.trait-list {
display: flex;
flex-wrap: wrap;
li {
flex-basis: 50%;
flex-grow: 1;
}
li.form-group {
flex-basis: 100%;
}
}
label.radio {
display: flex;
flex: auto;
font-size: 12px;
line-height: 20px;
font-weight: normal;
> input[type="radio"] {
margin: 0 5px 0 0;
}
}
li.custom-type input[type="radio"] {
display: none;
}
}
/* ----------------------------------------- */
/* Add Feature Prompt Specifically */
/* ----------------------------------------- */
.sw5e.select-items-prompt {
.dialog-content {
margin-bottom: 1em;
}
.items-list {
margin-top: 0.5em;
}
.item-name > label, .item-image, input {
cursor: pointer;
}
.item-name > label {
align-items: center;
}
}