/* * Toothradio */ /* * Custom Radio */ /* * Custom Radio Squared */ /* * Checkboxes underscored. */ /* * Create Clock */ /* * Turf Block */ /* * Toothradio single elements */ /* * Custom Radio Round */ /* * General Styles */ * { font-family: Georgia, "Bitstream Charter", "Times New Roman", serif; } * ul { list-style: none; } * form.actor-sheet { padding: 20px; } * textarea { margin-top: 10px; } * td { padding: 5px; } * .section { margin-bottom: 10px; display: flex; flex-direction: row; justify-content: space-between; } * .section > * { margin-right: 10px; } * .section > *:last-child { margin-right: 0px; } * .section .grow-one { flex-grow: 1; } * .section .grow-two { flex-grow: 2; } * .section.experience { margin-bottom: 0px; justify-content: center; } * .editor, * .editor-content { min-height: 280px; } * .flex-horizontal { display: flex; flex-direction: row; justify-content: space-between; } * .flex-vertical { display: flex; flex-direction: column; } * .black-label { background-color: black; color: white; font-size: 21px; text-align: center; padding: 0px 5px; height: 30px !important; text-transform: capitalize; } * .gray-label { background-color: #999; color: black; font-size: 21px; text-align: center; padding: 0px 5px; height: 30px !important; text-transform: capitalize; } * .label-stripe { text-transform: uppercase; background-color: #888; margin-bottom: 10px; position: relative; padding-left: 10px; } * #stress-trauma { border-top: 3px solid black; display: flex; flex-direction: row; margin-bottom: 0px; /* Trauma */ } * #stress-trauma > * { margin-right: 10px; } * #stress-trauma:last-child { margin-right: 0px; } * #stress-trauma #character-stress { display: flex; /* Hide the browser's default checkbox */ } * #stress-trauma #character-stress label { height: 50px; width: 17px; background-image: url("assets/teeth/stresstooth-red.png"); background-repeat: no-repeat; background-size: contain; margin-right: 5px; } * #stress-trauma #character-stress label:last-of-type { margin-right: 0px; } * #stress-trauma #character-stress label[for$="-0"] { width: auto; height: auto; background-image: none !important; background: black !important; margin-right: 0px; } * #stress-trauma #character-stress input { display: none; } * #stress-trauma #character-stress input:checked ~ label { background-image: url("assets/teeth/stresstooth-halfgrey.png"); } * #stress-trauma #character-stress input:checked + label { background-image: url("assets/teeth/stresstooth-red.png"); } * #stress-trauma #character-trauma-container #character-trauma { display: flex; /* Hide the browser's default checkbox */ flex-direction: column; } * #stress-trauma #character-trauma-container #character-trauma label { height: 50px; width: 17px; background-image: url("assets/teeth/shorttooth-red.png"); background-repeat: no-repeat; background-size: contain; margin-right: 5px; } * #stress-trauma #character-trauma-container #character-trauma label:last-of-type { margin-right: 0px; } * #stress-trauma #character-trauma-container #character-trauma label[for$="-0"] { width: auto; height: auto; background-image: none !important; background: black !important; margin-right: 0px; } * #stress-trauma #character-trauma-container #character-trauma input { display: none; } * #stress-trauma #character-trauma-container #character-trauma input:checked ~ label { background-image: url("assets/teeth/shorttooth-grey.png"); } * #stress-trauma #character-trauma-container #character-trauma input:checked + label { background-image: url("assets/teeth/shorttooth-red.png"); } * #stress-trauma #character-trauma-container #character-trauma #trauma-teeth { display: flex; flex-direction: row; } * #stress-trauma #trauma-list { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } * #stress-trauma #trauma-list label { cursor: pointer; font-size: 19px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-right: 10px; /* Hide the browser's default checkbox */ } * #stress-trauma #trauma-list label input { display: none; } * #stress-trauma #trauma-list label input:checked ~ .checkmark { color: red; } * #stress-trauma #trauma-list label .checkmark { text-decoration: none; font-weight: bold; } * #abilities #character-experience { display: flex; /* Hide the browser's default checkbox */ position: absolute; top: 0px; right: 10px; } * #abilities #character-experience label { height: 30px; width: 10px; background-image: url("assets/teeth/stresstooth-red.png"); background-repeat: no-repeat; background-size: contain; margin-right: 5px; } * #abilities #character-experience label:last-of-type { margin-right: 0px; } * #abilities #character-experience label[for$="-0"] { width: auto; height: auto; background-image: none !important; background: black !important; margin-right: 0px; } * #abilities #character-experience input { display: none; } * #abilities #character-experience input:checked ~ label { background-image: url("assets/teeth/stresstooth-halfgrey.png"); } * #abilities #character-experience input:checked + label { background-image: url("assets/teeth/stresstooth-red.png"); } * #abilities .item-name { width: 70px; } * #abilities .item-body { width: auto; } * #abilities .item-description { width: 200px; } * #harm-armor { display: flex; } * #harm-armor #character-harm { width: 100%; } * #harm-armor #character-harm table { width: 100%; } * #harm-armor #character-harm table th { background-color: black; color: white; } * #harm-armor #character-harm table input[type=text] { width: 100%; } * #harm-armor #character-health-clock { position: relative; border: 3px solid black; padding: 0; width: 80px; height: 80px; border-radius: 50%; list-style: none; overflow: hidden; margin: 0 auto; } * #harm-armor #character-health-clock label { overflow: hidden; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; transform-origin: 0% 100%; background-color: red; } * #harm-armor #character-health-clock input { position: absolute; display: none; } * #harm-armor #character-health-clock input:checked ~ label { background-color: white; } * #harm-armor #character-health-clock input:checked + label { background-color: red; } * #harm-armor #character-health-clock input[value="0"] { display: none; } * #harm-armor #character-health-clock *:nth-child(3) { transform: rotate(0deg) skewY(180deg); } * #harm-armor #character-health-clock *:nth-child(5) { transform: rotate(90deg) skewY(180deg); } * #harm-armor #character-health-clock *:nth-child(7) { transform: rotate(180deg) skewY(180deg); } * #harm-armor #character-health-clock *:nth-child(9) { transform: rotate(270deg) skewY(180deg); } * #harm-armor #character-armor-uses div { display: flex; flex-direction: row; justify-content: space-between; } * #attributes { display: flex; flex-direction: column; } * #attributes .stripe { background-color: black; color: white; font-size: 17px; padding-left: 5px; } * #attributes .attributes-exp { position: relative; margin-bottom: 10px; } * #attributes .attributes-exp .stripe-tooth-body { display: flex; /* Hide the browser's default checkbox */ position: absolute; top: 0px; right: 0px; } * #attributes .attributes-exp .stripe-tooth-body label { height: 30px; width: 10px; background-image: url("assets/teeth/xptooth-red.png"); background-repeat: no-repeat; background-size: contain; margin-right: 5px; } * #attributes .attributes-exp .stripe-tooth-body label:last-of-type { margin-right: 0px; } * #attributes .attributes-exp .stripe-tooth-body label[for$="-0"] { width: auto; height: auto; background-image: none !important; background: black !important; margin-right: 0px; } * #attributes .attributes-exp .stripe-tooth-body input { display: none; } * #attributes .attributes-exp .stripe-tooth-body input:checked ~ label { background-image: url("assets/teeth/xptooth-white.png"); } * #attributes .attributes-exp .stripe-tooth-body input:checked + label { background-image: url("assets/teeth/xptooth-red.png"); } * #attributes .attributes-container { display: flex; margin: 5px 0px; display: flex; /* Hide the browser's default checkbox */ } * #attributes .attributes-container label { height: 15px; width: 15px; background-color: black; vertical-align: middle; border: 2px solid black; border-radius: 24px; } * #attributes .attributes-container label[for$="-0"] { height: 5px; width: 5px; border-radius: 24px; background-image: none !important; background-color: red !important; margin-right: 0px; } * #attributes .attributes-container input { display: none; } * #attributes .attributes-container input:checked ~ label { background-color: white; } * #attributes .attributes-container input:checked + label { background-color: black; } * #attributes .attributes-container * { margin-right: 5px; } * .item { justify-content: space-between; } * .item .item-body { margin-bottom: 10px; } * .item .item-body * { margin-right: 10px; } * .item .item-body .item-description { font-style: italic; text-align: justify; } * .item div { flex-grow: 2; } * .item .item-control { flex-grow: 1; } * .item .item-body, * .item .item-class-label { width: 100px; } * #name, * #alias { margin-bottom: 10px; } * .profile-img { margin: 0px 30px; } * .coins { display: flex; /* Hide the browser's default checkbox */ flex-wrap: wrap; } * .coins label { height: 15px; width: 15px; background-color: grey; vertical-align: middle; border: 1px solid black; } * .coins label[for$="-0"] { margin-right: 0px; } * .coins input { display: none; } * .coins input:checked ~ label { background-color: white; } * .coins input:checked + label { background-color: grey; } * .coins label { margin-right: 3px; margin-bottom: 3px; } * .coins label[for$="0"] { border-width: 2px; } * .coins.coins-hands { width: 36px; } * .coins.coins-stashed { width: 190px; } * #crew-reputation { border-top: 2px solid black; display: flex; /* Hide the browser's default checkbox */ } * #crew-reputation label { height: 50px; width: 17px; background-image: url("assets/teeth/stresstooth-red.png"); background-repeat: no-repeat; background-size: contain; margin-right: 5px; } * #crew-reputation label:last-of-type { margin-right: 0px; } * #crew-reputation label[for$="-0"] { width: auto; height: auto; background-image: none !important; background: black !important; margin-right: 0px; } * #crew-reputation input { display: none; } * #crew-reputation input:checked ~ label { background-image: url("assets/teeth/stresstooth-halfgrey.png"); } * #crew-reputation input:checked + label { background-image: url("assets/teeth/stresstooth-red.png"); } * #crew-reputation input[disabled=disabled] + label { background-image: url(assets/teeth/stresstooth-black.png); } * #turf-list { display: flex; flex-direction: column; } * #turf-list .turf-row { display: flex; flex-direction: row; flex-wrap: wrap; } * #turf-list .turf-row *:first-child { margin-left: 0px; } * #turf-list .turf-row *:last-child { margin-right: 0px; } * #turf-list.section-non-editable .turf-block { width: 130px; height: 100px; background-color: lightgray; position: relative; margin: 20px; flex-grow: initial; } * #turf-list.section-non-editable .turf-block.turf-selected .connector { background-color: gray; z-index: 1; } * #turf-list.section-non-editable .turf-block .connector { position: absolute; display: block; background-color: lightgray; } * #turf-list.section-non-editable .turf-block .connector.right, * #turf-list.section-non-editable .turf-block .connector.left { width: 40px; height: 20px; top: 40px; } * #turf-list.section-non-editable .turf-block .connector.left { left: -40px; } * #turf-list.section-non-editable .turf-block .connector.right { left: 130px; } * #turf-list.section-non-editable .turf-block .connector.top, * #turf-list.section-non-editable .turf-block .connector.bottom { height: 40px; width: 20px; left: 55px; } * #turf-list.section-non-editable .turf-block .connector.top { top: -40px; } * #turf-list.section-non-editable .turf-block .connector.bottom { top: 100px; } * #turf-list.section-non-editable .turf-block.turf-selected { background-color: gray; } * #turf-list.section-non-editable .turf-block .turf-description { border: none; background: none; resize: none; width: 130px; text-align: center; min-height: auto; font-size: 12px; } * #turf-list.section-non-editable .turf-block .turf-name { border: none; border-radius: 0px; text-align: center; font-weight: bold; } * #turf-list.section-non-editable .turf-block input[type=checkbox] { transform: scale(1); } * #turf-list.section-non-editable .turf-block .turf-control.turf-select { position: absolute; top: -7px; left: -7px; } * #turf-list.section-editable .turf-block { width: 130px; height: 125px; background-color: lightgray; position: relative; margin: 20px; flex-grow: initial; } * #turf-list.section-editable .turf-block.turf-selected .connector { background-color: gray; z-index: 1; } * #turf-list.section-editable .turf-block .connector { position: absolute; display: block; background-color: lightgray; } * #turf-list.section-editable .turf-block .connector.right, * #turf-list.section-editable .turf-block .connector.left { width: 40px; height: 25px; top: 50px; } * #turf-list.section-editable .turf-block .connector.left { left: -40px; } * #turf-list.section-editable .turf-block .connector.right { left: 130px; } * #turf-list.section-editable .turf-block .connector.top, * #turf-list.section-editable .turf-block .connector.bottom { height: 40px; width: 25px; left: 52.5px; } * #turf-list.section-editable .turf-block .connector.top { top: -40px; } * #turf-list.section-editable .turf-block .connector.bottom { top: 125px; } * #turf-list.section-editable .turf-block.turf-selected { background-color: gray; } * #turf-list.section-editable .turf-block .turf-description { border: none; background: none; resize: none; width: 130px; text-align: center; min-height: auto; font-size: 12px; } * #turf-list.section-editable .turf-block .turf-name { border: none; border-radius: 0px; text-align: center; font-weight: bold; } * #turf-list.section-editable .turf-block input[type=checkbox] { transform: scale(1); } * #turf-list.section-editable .turf-block .turf-control.turf-select { position: absolute; top: -7px; left: -7px; } * #crew-hold { border-top: 2px solid black; display: flex; /* Hide the browser's default checkbox */ } * #crew-hold label { height: 50px; width: 17px; background-image: url("assets/teeth/stresstooth-halfgrey.png"); background-repeat: no-repeat; background-size: contain; margin-right: 5px; } * #crew-hold label:last-of-type { margin-right: 0px; } * #crew-hold input { display: none; } * #crew-hold input:checked + label { background-image: url("assets/teeth/stresstooth-red.png"); } * #crew-tier { background-color: #999; height: 30px; display: flex; align-items: center; display: flex; /* Hide the browser's default checkbox */ } * #crew-tier label:not([for$="-0"]) { height: 18px; width: 18px; background-color: black; vertical-align: middle; border: 2px solid black; border-radius: 9px; } * #crew-tier input { display: none; } * #crew-tier input:checked ~ label:not([for$="-0"]) { border-color: gray; background-color: #CCC; } * #crew-tier input:checked + label:not([for$="-0"]) { background-color: black; border-color: black; } * #crew-tier > * { margin-right: 5px; } /*# sourceMappingURL=style.css.map */