/* -- tailwind utilities ---------------------------------------------------- */ .sheet-flex { display: flex !important; } .sheet-flex-row { flex-direction: row !important; } .sheet-flex-no-wrap { flex-wrap: nowrap !important; } .sheet-items-center { align-items: center !important; } .sheet-justify-between { justify-content: space-between !important; } .sheet-flex-1 { flex: 1 1 0% !important; } .sheet-flex-none { flex: none !important; } .sheet-font-mono { font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } .sheet-font-bold { font-weight: 700 !important; } .sheet-h-20 { height: 5rem !important; } .sheet-leading-none { line-height: 1 !important; } .sheet-mb-0 { margin-bottom: 0 !important; } .sheet-mr-2 { margin-right: 0.5rem !important; } .sheet-mb-2 { margin-bottom: 0.5rem !important; } .sheet-mr-3 { margin-right: 0.75rem !important; } .sheet-mt-8 { margin-top: 2rem !important; } .sheet-py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .sheet-pr-4 { padding-right: 1rem !important; } .sheet-absolute { position: absolute !important; } .sheet-relative { position: relative !important; } .sheet-top-0 { top: 0 !important; } .sheet-bottom-0 { bottom: 0 !important; } .sheet-left-0 { left: 0 !important; } .sheet-text-center { text-align: center !important; } .sheet-text-right { text-align: right !important; } .sheet-text-red-700 { color: #c53030 !important; } .sheet-text-green-700 { color: #2f855a !important; } .sheet-text-xs { font-size: 0.875rem !important; } .sheet-text-sm { font-size: 1.125rem !important; } .sheet-text-xl { font-size: 1.9rem !important; } .sheet-w-full { width: 100% !important; } .sheet-col-span-1 { grid-column: span 1 / span 1 !important; } /* -- styling --------------------------------------------------------------- */ /* -- sheet wrapper --------------------------------------------------------- */ .sheet-wrapper { width: 100%; box-sizing: border-box; padding-right: 2.5rem; } /* -- tab ------------------------------------------------------------------- */ /* -- button ---------------------------------------------------------------- */ .sheet-button { border-width: 1px !important; margin-left: 0 !important; margin-right: 0 !important; width: 1.9rem; height: 2.1rem; padding: 2px 3px; font-size: 1.3em; } /* When the button is hidden for purposes of spacing, we set its height to 0 to avoid increasing the container's height. */ .sheet-button.sheet-button--hidden { visibility: hidden !important; height: 0 !important; } /* Utility styling which makes action buttons look similar to roll buttons. */ .sheet-button.sheet-button--action-roll { background-color: rgb(245, 245, 245); background-image: -webkit-linear-gradient(top, #fff, #e6e6e6); background-repeat: repeat-x; border-radius: 4px; border-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(187, 187, 187); border-left-color: rgb(204, 204, 204); } .sheet-button.sheet-button--action-roll:hover { color: #333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; transition: background-position .1s linear; } .sheet-button.sheet-button--action-roll:active { background-image: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); background-color: #e6e6e6; } /* Icons */ .sheet-button.sheet-button--chat::before { font-family: 'Pictos' !important; content: "w" !important; } .sheet-button.sheet-button--remove::before { font-family: 'Pictos' !important; content: "*" !important; } /* -- textarea -------------------------------------------------------------- */ /* -- checkbox -------------------------------------------------------------- */ /* -- radio ----------------------------------------------------------------- */ /* -- label ----------------------------------------------------------------- */ /* Sheet wrapper */ .sheet-wrapper { min-width: 780px; } /* Panel classes */ .sheet-panel-container { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); } .sheet-panel-container.sheet-panel-container--center { align-items: center; } .sheet-panel { width: 100%; grid-column: 1 / 1; grid-row: 1 / 1; } /* View: player */ /* Quality grid */ .sheet-id-view-player .sheet-container-quality-headers, .sheet-id-view-player .sheet-container-quality { display: grid; grid-gap: 0.5rem; grid-gap: 0.5rem; gap: 0.5rem; align-items: center; grid-template-columns: 1fr 10rem 0.5rem 9rem 0.5rem 9rem 0.5rem 9rem 0.5rem 8.5rem auto auto; } .sheet-id-view-player .sheet-container-quality-headers { padding-left: 1rem; padding-right: 1rem; } .sheet-id-view-player .sheet-container-quality { background-color: #f7fafc; padding: 1rem; } .sheet-id-view-player .sheet-container-quality .sheet-id-label-out-of-scene { display: none; } .sheet-id-view-player .sheet-container-quality .sheet-id-attr-quality-out-of-scene[value="true"] ~ .sheet-id-label-out-of-scene { display: inline; } .sheet-id-view-player .sheet-container-quality .sheet-id-container-roll-str { display: none; } .sheet-id-view-player .sheet-container-quality .sheet-id-attr-quality-out-of-scene:not([value="true"]) ~ .sheet-id-container-roll-str { display: flex; } .sheet-id-view-player .sheet-container-quality .sheet-id-container-roll-str { height: 2.6rem; } .sheet-id-view-player .sheet-container-quality .sheet-id-container-roll-str .sheet-id-attr-quality-status[value="downshifted"] ~ .sheet-id-label-roll-str { color: #c53030; } .sheet-id-view-player .sheet-container-quality .sheet-id-container-roll-str .sheet-id-attr-quality-status[value="upshifted"] ~ .sheet-id-label-roll-str { color: #2f855a; } .sheet-id-view-player .sheet-container-quality .sheet-id-container-roll-str .sheet-id-attr-quality-status[value="downshifted"] ~ .sheet-id-label-target-num { color: #c53030; } .sheet-id-view-player .sheet-container-quality .sheet-id-container-roll-str .sheet-id-attr-quality-status[value="upshifted"] ~ .sheet-id-label-target-num { color: #2f855a; }/* Roll templates */ .sheet-rolltemplate-chat, .sheet-rolltemplate-roll { /* -- styling ----------------------------------------------------------- */ display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; background-color: #fff; } /* -- tailwind utilities ------------------------------------------------ */ .sheet-rolltemplate-chat .sheet-flex, .sheet-rolltemplate-roll .sheet-flex { display: flex !important; } .sheet-rolltemplate-chat .sheet-flex-row, .sheet-rolltemplate-roll .sheet-flex-row { flex-direction: row !important; } .sheet-rolltemplate-chat .sheet-flex-no-wrap, .sheet-rolltemplate-roll .sheet-flex-no-wrap { flex-wrap: nowrap !important; } .sheet-rolltemplate-chat .sheet-items-center, .sheet-rolltemplate-roll .sheet-items-center { align-items: center !important; } .sheet-rolltemplate-chat .sheet-justify-between, .sheet-rolltemplate-roll .sheet-justify-between { justify-content: space-between !important; } .sheet-rolltemplate-chat .sheet-flex-1, .sheet-rolltemplate-roll .sheet-flex-1 { flex: 1 1 0% !important; } .sheet-rolltemplate-chat .sheet-flex-none, .sheet-rolltemplate-roll .sheet-flex-none { flex: none !important; } .sheet-rolltemplate-chat .sheet-font-mono, .sheet-rolltemplate-roll .sheet-font-mono { font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } .sheet-rolltemplate-chat .sheet-font-bold, .sheet-rolltemplate-roll .sheet-font-bold { font-weight: 700 !important; } .sheet-rolltemplate-chat .sheet-h-20, .sheet-rolltemplate-roll .sheet-h-20 { height: 5rem !important; } .sheet-rolltemplate-chat .sheet-leading-none, .sheet-rolltemplate-roll .sheet-leading-none { line-height: 1 !important; } .sheet-rolltemplate-chat .sheet-mb-0, .sheet-rolltemplate-roll .sheet-mb-0 { margin-bottom: 0 !important; } .sheet-rolltemplate-chat .sheet-mr-2, .sheet-rolltemplate-roll .sheet-mr-2 { margin-right: 0.5rem !important; } .sheet-rolltemplate-chat .sheet-mb-2, .sheet-rolltemplate-roll .sheet-mb-2 { margin-bottom: 0.5rem !important; } .sheet-rolltemplate-chat .sheet-mr-3, .sheet-rolltemplate-roll .sheet-mr-3 { margin-right: 0.75rem !important; } .sheet-rolltemplate-chat .sheet-mt-8, .sheet-rolltemplate-roll .sheet-mt-8 { margin-top: 2rem !important; } .sheet-rolltemplate-chat .sheet-py-4, .sheet-rolltemplate-roll .sheet-py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .sheet-rolltemplate-chat .sheet-pr-4, .sheet-rolltemplate-roll .sheet-pr-4 { padding-right: 1rem !important; } .sheet-rolltemplate-chat .sheet-absolute, .sheet-rolltemplate-roll .sheet-absolute { position: absolute !important; } .sheet-rolltemplate-chat .sheet-relative, .sheet-rolltemplate-roll .sheet-relative { position: relative !important; } .sheet-rolltemplate-chat .sheet-top-0, .sheet-rolltemplate-roll .sheet-top-0 { top: 0 !important; } .sheet-rolltemplate-chat .sheet-bottom-0, .sheet-rolltemplate-roll .sheet-bottom-0 { bottom: 0 !important; } .sheet-rolltemplate-chat .sheet-left-0, .sheet-rolltemplate-roll .sheet-left-0 { left: 0 !important; } .sheet-rolltemplate-chat .sheet-text-center, .sheet-rolltemplate-roll .sheet-text-center { text-align: center !important; } .sheet-rolltemplate-chat .sheet-text-right, .sheet-rolltemplate-roll .sheet-text-right { text-align: right !important; } .sheet-rolltemplate-chat .sheet-text-red-700, .sheet-rolltemplate-roll .sheet-text-red-700 { color: #c53030 !important; } .sheet-rolltemplate-chat .sheet-text-green-700, .sheet-rolltemplate-roll .sheet-text-green-700 { color: #2f855a !important; } .sheet-rolltemplate-chat .sheet-text-xs, .sheet-rolltemplate-roll .sheet-text-xs { font-size: 0.875rem !important; } .sheet-rolltemplate-chat .sheet-text-sm, .sheet-rolltemplate-roll .sheet-text-sm { font-size: 1.125rem !important; } .sheet-rolltemplate-chat .sheet-text-xl, .sheet-rolltemplate-roll .sheet-text-xl { font-size: 1.9rem !important; } .sheet-rolltemplate-chat .sheet-w-full, .sheet-rolltemplate-roll .sheet-w-full { width: 100% !important; } .sheet-rolltemplate-chat .sheet-col-span-1, .sheet-rolltemplate-roll .sheet-col-span-1 { grid-column: span 1 / span 1 !important; } .sheet-rolltemplate-chat .sheet-rt-header, .sheet-rolltemplate-roll .sheet-rt-header { flex: none; display: flex; flex-direction: row; flex-wrap: nowrap; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; background-color: #000; } .sheet-rolltemplate-chat .sheet-rt-header .sheet-rt-header__title, .sheet-rolltemplate-roll .sheet-rt-header .sheet-rt-header__title { flex: 1 1 0%; font-size: 1.125rem; color: #fff; font-weight: 700; } .sheet-rolltemplate-chat .sheet-rt-header .sheet-rt-header__subtitle, .sheet-rolltemplate-roll .sheet-rt-header .sheet-rt-header__subtitle { flex: none; font-size: 1.125rem; color: #e2e8f0; font-style: italic; margin-left: 1rem; } .sheet-rolltemplate-chat .sheet-rt-grid, .sheet-rolltemplate-roll .sheet-rt-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-column-gap: 1rem; grid-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; padding-left: 1rem; padding-right: 1rem; align-items: center; } .sheet-rolltemplate-chat .sheet-rt-grid .sheet-rt-grid__item, .sheet-rolltemplate-roll .sheet-rt-grid .sheet-rt-grid__item { grid-column: span 3 / span 3; font-size: 1.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 0.5rem; padding-bottom: 0.5rem; } .sheet-rolltemplate-chat .sheet-rt-grid .sheet-rt-grid__item.sheet-rt-grid__item--1\/3, .sheet-rolltemplate-roll .sheet-rt-grid .sheet-rt-grid__item.sheet-rt-grid__item--1\/3 { grid-column: span 4 / span 4; } .sheet-rolltemplate-chat .sheet-rt-grid .sheet-rt-grid__item.sheet-rt-grid__item--2\/3, .sheet-rolltemplate-roll .sheet-rt-grid .sheet-rt-grid__item.sheet-rt-grid__item--2\/3 { grid-column: span 8 / span 8; } .sheet-rolltemplate-chat .sheet-rt-separator, .sheet-rolltemplate-roll .sheet-rt-separator { flex: none; border-style: solid; border-width: 0; border-bottom-width: 1px; border-color: #cbd5e0; } .sheet-rolltemplate-chat .sheet-rt-text, .sheet-rolltemplate-roll .sheet-rt-text { flex: none; font-size: 1.125rem; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }