François-Xavier Guillois
546 lines
18 KiB
CSS
546 lines
18 KiB
CSS
/* **************************************************************** */
|
|
/* Module: css */
|
|
/* Description: Theme oriented CSS */
|
|
/* Using CSS variables to apply a coheherent */
|
|
/* styling of elements */
|
|
/* */
|
|
/* Extra information: */
|
|
/* To set no color(or initial) use, */
|
|
/* box-shadow: none; */
|
|
/* text-shadow:none; */
|
|
/* filter:none; */
|
|
/* color:initial; */
|
|
/* ================================================================ */
|
|
/* Date Version Author Description */
|
|
/* ---------- -------- -------------------- ----------------------- */
|
|
/* 2021-05-06 1.0.0 Ramses800 css created. */
|
|
/* 2021-10-29 1.1.0 Ramses800 fixed table background */
|
|
/* **************************************************************** */
|
|
|
|
/* */
|
|
/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
|
|
/* */
|
|
/* CSS variables */
|
|
/* */
|
|
/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
|
|
/* */
|
|
:root {
|
|
|
|
--label_font-size:13px;
|
|
--label_font-family:Garamond, serif;
|
|
--label_color:black;
|
|
--label_height:20px;
|
|
|
|
--name_font-family:Garamond, serif;
|
|
--name_font-size:32px;
|
|
|
|
--input_font-family: Garamond, serif;
|
|
--input_color:black;
|
|
--input_font-size:13px;
|
|
--input_height:24px;
|
|
--input_border:1px solid #7a7971;
|
|
--input_border-radius:3px;
|
|
|
|
--table_background-color:#e3dac9;
|
|
--tableheader_font-family:Garamond, serif;
|
|
--tableheader_font-size:14px;
|
|
--tableheader_color:rgb(59, 51, 6);
|
|
--tableheader_backgroundcolor:#9b7653;
|
|
|
|
--panel_background-color:rgb(59, 51, 6);;
|
|
--panel_color:tan;
|
|
--panel_font-family:Garamond, serif;
|
|
--panel_font-size:20px;
|
|
--panel_padding:3px 5px;
|
|
|
|
--editablecolor:Linen;
|
|
--disabledcolor:#a99a86;
|
|
|
|
--linkcolor:rgb(59, 51, 6);;
|
|
--radiocolor:rgb(59, 51, 6);
|
|
--hovercolor: rgb(59, 51, 6); /* color used for illumniating clickable element */
|
|
--focuscolor: rgb(59, 51, 6); /* color used for illumniating focus/active selection */
|
|
--box-shadow-size:0 0 5px;
|
|
--text-shadow-size:0 0 8px;
|
|
--drop-shadow-size:0 0 11px;
|
|
}
|
|
|
|
/* */
|
|
/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
|
|
/* */
|
|
/* Elements */
|
|
/* */
|
|
/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
|
|
/* */
|
|
|
|
.sandbox.sheet{
|
|
|
|
}
|
|
.sandbox.sheet .window-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
color:initial;
|
|
|
|
/*--------------------------------*/
|
|
/*To use a single background color*/
|
|
/*background-color:tan;*/
|
|
/*background-image:none;*/
|
|
/*--------------------------------*/
|
|
|
|
/*--------------------------------*/
|
|
/*To use a background image*/
|
|
background-image: url("../ui/parchment.jpg");
|
|
/* Replace no-repeat with repeat for pattern images */
|
|
background-repeat:repeat;*/
|
|
/*--------------------------------*/
|
|
/* change between hidden and auto to show vertical scroll bar in sheets. Good for long sheets */
|
|
overflow-y: auto;
|
|
}
|
|
/* ---------------------------------------------------------------- */
|
|
/* Navigational */
|
|
/* ---------------------------------------------------------------- */
|
|
.sandbox.sheet .tab-button{
|
|
font-family: Garamond, serif;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color:var(--linkcolor);
|
|
|
|
}
|
|
.sandbox.sheet .tab-button:hover{text-shadow: var(--text-shadow-size) var(--hovercolor);}
|
|
.sandbox.sheet a:hover{text-shadow: var(--text-shadow-size) var(--hovercolor);}
|
|
|
|
.sandbox.sheet .profile-img:hover{filter: drop-shadow(var(--drop-shadow-size) var(--hovercolor));}
|
|
|
|
.sandbox.sheet .leftarrow:hover{filter: drop-shadow(var(--drop-shadow-size) var(--hovercolor));}
|
|
.sandbox.sheet .rightarrow:hover{filter: drop-shadow(var(--drop-shadow-size) var(--hovercolor));}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* Panels */
|
|
/* ---------------------------------------------------------------- */
|
|
.sandbox.sheet .panelheader {
|
|
background-color:var(--panel_background-color);
|
|
color: var(--panel_color);
|
|
|
|
padding: var(--panel_padding);
|
|
font-family: var(--panel_font-family);
|
|
font-size: var(--panel_font-size);
|
|
font-weight: bold;
|
|
text-align: center;
|
|
|
|
text-shadow: none; /*1px 1px black;*/
|
|
border-bottom: none; /* 1px solid black;*/
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* Labels */
|
|
/* ---------------------------------------------------------------- */
|
|
|
|
.sandbox.sheet .label-mini,
|
|
.sandbox.sheet .label-small,
|
|
.sandbox.sheet .label-med,
|
|
.sandbox.sheet .label-medlarge,
|
|
.sandbox.sheet .label-large,
|
|
.sandbox.sheet .label-free{
|
|
color:var(--label_color);
|
|
font-family:var(--label_font-family);
|
|
font-size: var(--label_font-size);
|
|
height:var(--label_height);
|
|
}
|
|
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* Inputs */
|
|
/* ---------------------------------------------------------------- */
|
|
|
|
/* ------------------------------------ */
|
|
/* Generic Input Styling for all inputs */
|
|
/* ------------------------------------ */
|
|
|
|
.sandbox.sheet input:not(.input-disabled):not([readonly=true]):hover{
|
|
box-shadow:var(--box-shadow-size) var(--hovercolor);
|
|
}
|
|
.sandbox.sheet input:not(.input-disabled):not([readonly=true]):focus{
|
|
box-shadow:var(--box-shadow-size) var(--focuscolor);
|
|
}
|
|
|
|
/* ----------- */
|
|
/* Text inputs */
|
|
/* ----------- */
|
|
|
|
/* Editable text*/
|
|
.sandbox.sheet input[type=text]:not(.entityname):not(.itemname):not(.input-disabled):not([readonly=true]){
|
|
background-color:var(--editablecolor) !important;
|
|
color: var(--input_color) !important;
|
|
font-size: var(--input_font-size);
|
|
font-family:var(--input_font-family);
|
|
height:var(--input_height) !important;
|
|
border:var(--input_border);
|
|
border-radius: var(--input_border-radius);
|
|
padding: 1px 3px;
|
|
text-align:left;
|
|
}
|
|
|
|
/*Disabled */
|
|
.sandbox.sheet input[type=text].input-disabled,.sandbox.sheet input[type=text][readonly=true]{
|
|
font-family:var(--input_font-family);
|
|
color: var(--input_color) !important;
|
|
font-size: var(--input_font-size) !important;
|
|
height:var(--input_height) !important;
|
|
border:var(--input_border);
|
|
border-radius: var(--input_border-radius);
|
|
background-color:var(--disabledcolor) !important;
|
|
box-shadow: none !important;
|
|
padding: 1px 3px;
|
|
}
|
|
|
|
/*Up/down arrows of simplenumerics */
|
|
.sandbox.sheet .arrup:hover{
|
|
filter: drop-shadow(var(--drop-shadow-size) var(--hovercolor));
|
|
}
|
|
.sandbox.sheet .arrdown:hover{
|
|
filter: drop-shadow(var(--drop-shadow-size) var(--hovercolor));
|
|
}
|
|
|
|
/* ----------------------------- */
|
|
/* Sandbox specifics text inputs */
|
|
/* ----------------------------- */
|
|
/*Actor header, citem header*/
|
|
.sandbox.sheet input[type=text].entityname,.sandbox.sheet input[type=text].itemname{
|
|
color: var(--input_color) !important;
|
|
background-color:var(--editablecolor) !important;
|
|
border:var(--input_border);
|
|
border-radius: var(--input_border-radius);
|
|
font-family: var(--name_font-family); /*Default is :font-family: "Signika", sans-serif; */
|
|
font-size:var(--name_font-size);
|
|
}
|
|
.sandbox.sheet input[type=text].input-small{
|
|
width:70px !important; /*Default value is :70px*/
|
|
}
|
|
.sandbox.sheet input[type=text].input-med{
|
|
width:110px !important; /*Default value is :110px*/
|
|
}
|
|
.sandbox.sheet input[type=text].input-large{
|
|
width: calc(100% - 5px); /*Default value is :150 px */
|
|
}
|
|
|
|
.sandbox.sheet input[type=text].input-free {
|
|
width:calc(100% - 5px); /*Default value is :100% */
|
|
}
|
|
|
|
|
|
/* ------------- */
|
|
/* Number inputs */
|
|
/* ------------- */
|
|
|
|
/*Editable number*/
|
|
.sandbox.sheet input[type=number]:not(.table-empty-small):not(.input-disabled):not([readonly=true]){
|
|
color: var(--input_color) !important;
|
|
font-family:var(--input_font-family);
|
|
font-size: var(--input_font-size) !important;
|
|
height:var(--input_height) !important;
|
|
border:var(--input_border);
|
|
border-radius: var(--input_border-radius);
|
|
background-color:var(--editablecolor) !important;
|
|
padding: 0px 0px !important;
|
|
}
|
|
|
|
/* disabled number*/
|
|
.sandbox.sheet input[type=number][readonly=true],.sandbox.sheet input[type=number].input-disabled{
|
|
color: var(--input_color) !important;
|
|
font-family:var(--input_font-family);
|
|
font-size: var(--input_font-size) !important;
|
|
height:var(--input_height) !important;
|
|
border:var(--input_border);
|
|
border-radius: var(--input_border-radius);
|
|
background-color:var(--disabledcolor) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
/* special one used in table*/
|
|
.sandbox.sheet input[type=number].table-empty-small{
|
|
visibility: hidden;
|
|
|
|
}
|
|
/*Spin buttons*/
|
|
.sandbox.sheet input[type=number]:not(.input-disabled):not([readonly="true"]):hover::-webkit-inner-spin-button,
|
|
.sandbox.sheet input[type=number]:not(.input-disabled):not([readonly="true"]):hover::-webkit-outer-spin-button {
|
|
opacity: 0.5 ;
|
|
margin:0px;
|
|
height:var(--input_height);
|
|
cursor:pointer;
|
|
-webkit-appearance: textfield ;
|
|
}
|
|
|
|
|
|
/* -------------- */
|
|
/* Checkbox Input */
|
|
/* -------------- */
|
|
.sandbox.sheet input[type=checkbox] {
|
|
-webkit-filter:none;
|
|
-webkit-appearance: none;
|
|
appearance:none;
|
|
background-color: var(--editablecolor) !important;
|
|
border:var(--input_border);
|
|
border-radius: var(--input_border-radius);
|
|
height:var(--input_height) !important;
|
|
width:var(--input_height) !important;
|
|
cursor:pointer;
|
|
|
|
color: var(--input_color) !important;
|
|
}
|
|
|
|
.sandbox.sheet input[type=checkbox]:after{
|
|
content: '?';
|
|
color: var(--editablecolor) !important;
|
|
}
|
|
|
|
.sandbox.sheet input[type=checkbox]:checked {
|
|
-webkit-filter:none;
|
|
-webkit-appearance: none;
|
|
appearance:none;
|
|
background: var(--editablecolor) !important;
|
|
background-color: var(--editablecolor) !important;
|
|
}
|
|
|
|
.sandbox.sheet input[type=checkbox]:checked:after {
|
|
content: '?';
|
|
font-weight: bolder;
|
|
font-size: var(--input_font-size);
|
|
color: var(--input_color) !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* select(dropdowns) */
|
|
/* ---------------------------------------------------------------- */
|
|
.sandbox.sheet select{
|
|
font-family:var(--input_font-family);
|
|
background-color:var(--editablecolor) !important;
|
|
color: var(--input_color) !important;
|
|
font-size: var(--input_font-size) !important;
|
|
height:var(--input_height) !important;
|
|
border:var(--input_border);
|
|
border-radius: var(--input_border-radius);
|
|
}
|
|
.sandbox.sheet select:hover{box-shadow:var(--box-shadow-size) var(--hovercolor);}
|
|
.sandbox.sheet select:focus{box-shadow:var(--box-shadow-size) var(--focuscolor);}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* Textareas */
|
|
/* ---------------------------------------------------------------- */
|
|
.sandbox.sheet textarea{
|
|
background-color:var(--editablecolor) !important;
|
|
color: var(--input_color) !important;
|
|
font-size: var(--input_font-size) !important;
|
|
border:var(--input_border);
|
|
border-radius: var(--input_border-radius);
|
|
font-family:var(--input_font-family);
|
|
}
|
|
.sandbox.sheet textarea:hover{box-shadow:var(--box-shadow-size) var(--hovercolor);}
|
|
.sandbox.sheet textarea:focus{box-shadow:var(--box-shadow-size) var(--focuscolor);}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* Sandbox specific elements */
|
|
/* ---------------------------------------------------------------- */
|
|
|
|
/*Radio buttons*/
|
|
.sandbox.sheet .radio-input {
|
|
vertical-align: middle;
|
|
padding: 4px 4px;
|
|
white-space: nowrap;
|
|
}
|
|
.sandbox.sheet .radio-element{
|
|
color:var(--radiocolor) ;
|
|
|
|
}
|
|
|
|
.sandbox.sheet .radio-element:hover {text-shadow:var(--text-shadow-size) var(--hovercolor);}
|
|
|
|
/*badge */
|
|
.sandbox.sheet .badge-image{color:var(--linkcolor) ;}
|
|
.sandbox.sheet .badge-image:hover{text-shadow: var(--text-shadow-size) var(--hovercolor);}
|
|
.sandbox.sheet .badge-clickgm{color:var(--linkcolor) ;}
|
|
.sandbox.sheet .badge-clickgm:hover{text-shadow: var(--text-shadow-size) var(--hovercolor);}
|
|
|
|
/* citems related */
|
|
.sandbox.sheet .citem-edit{color:var(--linkcolor) ;}
|
|
.sandbox.sheet .citem-edit:hover{text-shadow: var(--text-shadow-size) var(--hovercolor);}
|
|
|
|
.sandbox.sheet .citem-delete{color:var(--linkcolor) ;}
|
|
.sandbox.sheet .citem-delete:hover{text-shadow: var(--text-shadow-size) var(--hovercolor);}
|
|
|
|
.sandbox.sheet .ci-delete{color:var(--linkcolor) ;}
|
|
.sandbox.sheet .ci-delete:hover{text-shadow: var(--text-shadow-size) var(--hovercolor);}
|
|
|
|
.sandbox.sheet .consumable-button{color:var(--linkcolor) ;}
|
|
.sandbox.sheet .consumable-button:hover{text-shadow: var(--text-shadow-size) var(--hovercolor);}
|
|
|
|
|
|
|
|
/*Reload template button*/
|
|
.sandbox.sheet .sheet-reload:hover{text-shadow: var(--text-shadow-size) var(--hovercolor);}
|
|
/*Editor on BIO*/
|
|
.sandbox.sheet .editor-edit:hover{text-shadow: var(--text-shadow-size) var(--hovercolor);}
|
|
/* Rollable links*/
|
|
.sandbox.sheet .rollable{color: var(--linkcolor);}
|
|
.sandbox.sheet .rollable:hover{color: var(--hovercolor);}
|
|
/*rollable die label*/
|
|
.sandbox.sheet .rollable > div > i:hover{text-shadow: var(--text-shadow-size) var(--hovercolor);}
|
|
|
|
/* links*/
|
|
.sandbox.sheet .linkable{color:var(--linkcolor);}
|
|
.sandbox.sheet .linkable:hover{color: var(--hovercolor);}
|
|
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* Tables */
|
|
/* ---------------------------------------------------------------- */
|
|
/* Table Body background color */
|
|
.sandbox.sheet tbody.table {
|
|
background-color: var(--table_background-color);
|
|
}
|
|
|
|
|
|
.sandbox.sheet thead {
|
|
background-color: var(--tableheader_backgroundcolor);
|
|
color: var(--tableheader_color);
|
|
padding: 1px 5px;
|
|
font-family: var(--tableheader_font-family);
|
|
font-size: var(--tableheader_font-size);
|
|
font-weight: bold;
|
|
text-align: center;
|
|
text-shadow: none; /* Default is 1px 1px black;*/
|
|
border-bottom: 1px solid black;
|
|
}
|
|
|
|
/*Table header cell*/
|
|
.sandbox.sheet th,
|
|
.sandbox.sheet th.input-min,
|
|
.sandbox.sheet th.input-med,
|
|
.sandbox.sheet th.input-free {
|
|
font-family:var(--tableheader_font-family) !important;
|
|
font-size:var(--tableheader_font-size) !important;
|
|
color:var(--tableheader_color) !important;
|
|
}
|
|
/* Tableheader, First column*/
|
|
.sandbox.sheet th:first-child {
|
|
text-align:left;
|
|
|
|
}
|
|
|
|
/* table rows*/
|
|
.sandbox.sheet tbody tr {
|
|
background-color: var(--table_background-color);
|
|
}
|
|
|
|
|
|
/* Table cells fonts */
|
|
.sandbox.sheet td {
|
|
font-size: var(--input_font-size);
|
|
font-family:var(--input_font-family);
|
|
background-color: transparent !important;
|
|
height:var(--label_height);
|
|
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* Misc. */
|
|
/* ---------------------------------------------------------------- */
|
|
/*scrollbars*/
|
|
.sheet-body ::-webkit-scrollbar-thumb {
|
|
background: var(--linkcolor);
|
|
border: 1px solid var(--linkcolor);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* Sheet sizing */
|
|
/* ---------------------------------------------------------------- */
|
|
.sandbox.sheet.actor{
|
|
/* uncomment this to set a custom fixed width for actor sheet*/
|
|
/* width:800px!important; */
|
|
}
|
|
|
|
|
|
/* ----------------------------------------- */
|
|
/* General settings for sheets(actors/items) */
|
|
/* ----------------------------------------- */
|
|
.sandbox.sheet .new-block {
|
|
padding: 0px 0px;
|
|
width: 100%;
|
|
max-width:100%;
|
|
min-width: 100%;
|
|
}
|
|
.sandbox.sheet .new-multiblock{
|
|
display: contents;
|
|
}
|
|
/* ----------------------------------- */
|
|
/* Widths for panels, columns, dialogs */
|
|
/* ----------------------------------- */
|
|
.sandbox.sheet [class*="1-1"]{
|
|
width:100%;
|
|
max-width:100%;
|
|
min-width:100%;
|
|
}
|
|
.sandbox.sheet [class*="1-2"]{
|
|
width:50%;
|
|
max-width:50%;
|
|
min-width:50%;
|
|
}
|
|
.sandbox.sheet [class*="1-3"]{
|
|
width:33.33%;
|
|
max-width:33.33%;
|
|
min-width:33.33%;
|
|
}
|
|
.sandbox.sheet [class*="1-4"]{
|
|
width:25%;
|
|
max-width:25%;
|
|
min-width:25%;
|
|
}
|
|
.sandbox.sheet [class*="1-6"]{
|
|
width:16.66%;
|
|
max-width:16.66%;
|
|
min-width:16.66%;
|
|
}
|
|
.sandbox.sheet [class*="1-8"]{
|
|
width:12.5%;
|
|
max-width:12.5%;
|
|
min-width:12.5%;
|
|
}
|
|
.sandbox.sheet [class*="3-10"]{
|
|
width:30%;
|
|
max-width:30%;
|
|
min-width:30%;
|
|
}
|
|
.sandbox.sheet [class*="1-16"]{
|
|
width:6.25%;
|
|
max-width:6.25%;
|
|
min-width:6.25%;
|
|
}
|
|
.sandbox.sheet [class*="3-8"]{
|
|
width:37.5%;
|
|
max-width:37.5%;
|
|
min-width:37.5%;
|
|
}
|
|
.sandbox.sheet [class*="5-8"]{
|
|
width:62.5%;
|
|
max-width:62.5%;
|
|
min-width:62.5%;
|
|
}
|
|
.sandbox.sheet [class*="2-3"]{
|
|
width:66.66%;
|
|
max-width:66.66%;
|
|
min-width:66.66%;
|
|
}
|
|
.sandbox.sheet [class*="3-4"]{
|
|
width:75%;
|
|
max-width:75%;
|
|
min-width:75%;
|
|
}
|
|
.sandbox.sheet [class*="5-6"]{
|
|
width:83.33%;
|
|
max-width:83.33%;
|
|
min-width:83.33%;
|
|
} |