abtmtr-v4/views/projects/item/dice/style.css
2023-12-07 10:34:09 -06:00

375 lines
7 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap');
@font-face {
font-family: 'PFW';
src: url('assets/ProFontWindows.ttf');
}
:root {
--mainColor: #f80;
--mainColorThemed: #fdb;
--mainColorThemedLight: #fed;
--mainFG: #000;
--mainFGDark: #FFF;
--mainFGTP: #0002;
--mainFGDarkTP: #FFF2;
--mainFGTP4: #0008;
--mainFGDarkTP4: #FFF8;
--negColor: #f00;
--negColorThemed: #fbb;
--negColorThemedLight: #fdd;
--posColor: #f80;
--posColorThemed: #ffd0a0;
--material-outline-boxshadow: #0004 0 0 4px;
--material-outline-border: none;
}
* {
font-family: 'PFW', 'Roboto', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
transition: background-color 0.25s;
}
@media (prefers-color-scheme: dark) {
:root {
--mainColorThemed: #840;
--mainColorThemedLight: #420;
--mainFG: #FFF;
--mainFGDark: #000;
--mainFGTP: #FFF2;
--mainFGDarkTP: #0002;
--mainFGTP4: #FFF8;
--mainFGDarkTP4: #0008;
--negColorThemed: #800;
--negColorThemedLight: #400;
--posColorThemed: #840;
--posColorThemedLight: #630;
--material-outline-boxshadow: none;
--material-outline-border: var(--mainFGTP) 1px solid;
}
}
body {padding:0;margin:0;background-color:var(--mainColorThemedLight);}
.headerBar {
width: 100%;
height: 56px;
z-index: 9;
display: inline-grid;
grid-template-columns: auto auto;
grid-template-rows: 40px;
position: fixed;
-webkit-user-select: none;
user-select: none;
top: 0;
background-color: var(--mainColorThemed);
box-shadow: var(--material-outline-boxshadow);
border-bottom: var(--material-outline-border);
line-height: 40px;
color: var(--mainFG);
font-size: 24px;
font-weight: bold;
padding: 8px 16px;
box-sizing: border-box;
transition: box-shadow 0.25s, background-color 0.25s;
}
.fab {
position: fixed;
z-index: 9;
background-color: var(--mainColorThemed);
border-radius: 64px;
height: 64px;
width: 192px;
right: 32px;
bottom: 32px;
display: grid;
overflow: hidden;
user-select: none;
grid-template-columns: auto auto auto;
box-shadow: #0004 0 0 4px 0;
}
.fab button {
border: none;
background-color: transparent;
color: var(--mainFG);
font-size: 32px;
}
.fab button:hover {
background-color: var(--mainFGTP);
}
.fab button:active {
transition: none;
background-color: var(--mainColor);
}
.headerBar button {
height: 40px;
background-color: transparent;
padding: 4px; margin: 0;
margin-left: 8px;
color: var(--mainFG);
border: none;
border-radius: 40px;
transition: background 0.25s;
vertical-align: middle;
}
.headerBar button:hover {
background-color: var(--mainFGTP);
}
.content {
background-color: var(--mainColorThemedLight);
color: var(--mainFG);
height: calc(100vh - 56px);
margin-top: 56px;
overflow-y: auto;
box-sizing: border-box;
padding: 0 64px;
}
.content > div:empty::before {
position: absolute;
top: 56px;
left: 0;
width: 100vw;
text-align: center;
padding: 8px;
box-sizing: border-box;
content: "No dice.";
font-size: 24px;
}
.content > div {
padding-bottom: 64px;
min-height: calc(100% - 16px);
box-sizing:border-box;
}
templates, template {
display: none;
}
div.die {
width: 100%;
border: var(--material-outline-border);
box-shadow: var(--material-outline-boxshadow);
color: var(--mainFG);
margin: 16px 0;
border-radius: 8px;
padding: 16px;
padding-bottom: 8px;
box-sizing: border-box;
display: grid;
grid-template-columns: auto auto;
animation-name: horizontal-shaking;
animation-duration: 0.25s;
}
.counter .hideIfCounter {
display: none;
}
.compactMode .hos {
display: none;
}
div.hideIfCounter {
display: inline-block;
}
body:not(.compactMode) .headerBar button.toc {
color: var(--posColor);
}
.compactMode div.die h2 {
height: 32px;
line-height: 32px;
margin-top: -16px;
margin-right: 8px;
}
div.bag {
grid-template-columns: auto;
grid-template-rows: auto auto;
height: max-content;
}
div.die > div {
user-select: none;
}
div.bag > div.dropHere {
border: var(--mainFGTP) 1px solid;
border-radius: 4px;
padding: 16px;
padding-bottom: 64px;
position: relative;
}
div.bag > div.dropHere:empty {
padding: 32px;
}
div.bag > div.dropHere:empty::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
padding: 8px;
box-sizing: border-box;
content: "No dice.";
font-size: 24px;
}
div.die h2 {
padding: 0; margin: 0;
display: inline-block;
}
div.die input {
border-radius: 4px;
padding: 4px;
margin: 0;
font-size: 16px;
margin-bottom: 8px;
background-color: var(--mainFGDarkTP4);
border: 1px solid var(--mainFGTP);
color: var(--mainFG);
outline: none;
transition: border 0.25s, border-radius 0.25s, background-color 0.25s;
vertical-align: middle;
}
div.die input[type=color] {
height: 34px;
width: 34px;
margin-left: -8px;
position: absolute;
left: -10000px;
}
div.bag > div > input[type=color] {
margin-left: 0;
}
div.die input[type=color]:hover {
position: static;
}
div.die input[type=color]:focus {
position: static;
}
div.die input[type=text]:hover + input[type=color] {
position: static;
}
div.die .die-value {
vertical-align: middle;
}
div.die input.die-sides {
vertical-align: baseline;
width: 48px;
height: 24px;
}
div.die input.title {
padding: 8px;
}
div.die input:focus {
background-color: var(--mainFGTP);
border: 1px solid var(--mainFG);
}
div.die input.title:not(:placeholder-shown) {
border: none;
border-radius: 0;
background-color: transparent;
}
div.die input.title:not(:placeholder-shown):hover {
border-bottom: 1px solid var(--mainFG);
}
div.die button {
border-radius: 4px;
padding: 8px;
margin: 0;
font-size: 12px;
background-color: transparent;
border: 1px solid var(--mainFGTP);
color: var(--mainFG);
transition: background-color 0.25s;
}
div.die button.icon {
margin-bottom: 8px;
font-size: 19px;
vertical-align: middle;
}
div.die button:hover {
background-color: var(--mainFGTP);
}
div.die button:active {
border: 1px solid var(--mainFG);
}
.indi.neg {
background-color: var(--negColorThemed);
}
.indi.neg:hover {
background-color: var(--negColorThemedLight);
}
.indi.pos {
background-color: var(--posColorThemed);
}
.ident {
font-size: 19px;
vertical-align: top;
margin: 6px;
margin-right: 8px;
}
@media (max-width: 675px) {
div.content {
padding: 0 16px;
}
}
@media (min-width: 875px) {
div.content {
padding: 0 20%;
}
}
@media (min-width: 1200px) {
div.content {
padding: 0 10%;
padding-top: 16px;
padding-bottom: 16px;
overflow-y: auto;
}
div.content > div {
column-count: 2;
}
div.die {
break-inside: avoid-column;
list-style-type: none;
margin-top: 0;
border: var(--mainFGTP) 1px solid;
box-shadow: none;
}
div.bag {
column-span: all;
margin-top: 16px;
}
div.bag div.dropHere {
column-count: 2;
}
}
@media (min-width: 1775px) {
div.content > div {
column-count: 3;
}
}