kopparhavet/styles/common.css

140 lines
2.5 KiB
CSS

:root {
--color-foreground: #221f20;
--color-background: #fff;
--color-highlight: #d1d2d4;
--color-secondary: #e1e2e4;
--color-border: #939598;
--font-editor: "IM Fell Great Primer", serif;
--font-input: "Poppins", sans-serif;
--font-special: "IM Fell DW Pica", serif;
--font-subheader: "IM Fell DW Pica SC", serif;
--font-table: "Poppins", sans-serif;
}
.kopparhavet.sheet .window-content form {
min-height: 0;
}
/********* Grid / Flex *********/
.grid-container {
display: grid;
grid-gap: 5px;
}
.flexrow {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
/********* Editor *********/
.editor,
editor-content {
font-family: var(--font-editor);
height: 100%;
padding: 5px;
width: 100%;
}
.info-small,
.info-small .description,
.info-small .description .editor {
height: 166px;
}
.info,
.info .description,
.info .description .editor {
height: 180px;
}
.info-bio,
.info-bio .description,
.info-bio .description .editor {
height: 190px;
}
.info-mid,
.info-mid .description,
.info-mid .description .editor {
height: 238px;
}
.info-high,
.info-high .description,
.info-high .description .editor {
height: 380px;
}
/********* Headers *********/
h5 {
border-bottom: 1px solid #782e22;
font-size: 1.15em;
margin-bottom: 5px;
margin-top: 10px;
text-align: center;
}
/********* Text *********/
.center-text {
text-align: center !important;
}
/********* Button *********/
.kopparhavet button {
background: transparent;
border: 0 none;
border-radius: 3px;
box-shadow: none;
color: var(--color-foreground);
cursor: pointer;
font-family: inherit;
font-size: inherit;
font-weight: bold;
height: auto;
line-height: inherit;
padding: 2px 4px;
width: auto;
}
.kopparhavet button:focus,
.kopparhavet button:hover {
background: var(--color-highlight);
}
/********* Border *********/
.kopparhavet .border {
border: 1px solid #00000f;
padding: 5px;
}
/********* Tabs *********/
.kopparhavet .sheet-body {
overflow: hidden;
flex-grow: 1;
}
.kopparhavet .tab {
height: 100%;
width: 100%;
}
.tabs .item.active {
border-bottom: none;
text-shadow: 0 0 10px red;
}
.tabs .item {
border: solid #333333 1px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
text-align: center;
/* margin: auto; */
}
/********* Dice rolls *********/
.rollable:hover,
.rollable:focus {
color: #000;
text-shadow: 0 0 10px red;
cursor: pointer;
}