diff --git a/Private Eye/privateeye.css b/Private Eye/privateeye.css index e69de29bb2..8a5f2e4eb1 100644 --- a/Private Eye/privateeye.css +++ b/Private Eye/privateeye.css @@ -0,0 +1,258 @@ +@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap'); + +body.sheet-darkmode button, +body.sheet-darkmode input, +body.sheet-darkmode optgroup, +body.sheet-darkmode select, +body.sheet-darkmode textarea, +body.sheet-darkmode .charsheet { + color: #eee; + background-color: #1e2021; +} + +body.sheet-darkmode .btn, +body.sheet-darkmode .btn.btn-default { + color: #c8c3bc; + text-shadow: rgba(24,26,27,.75) 0px 1px 1px; + background-color: #1e2021; + background-image: linear-gradient(#181a1b, #26292b); + border-color: #3e4446 #3e4446 #43494c; + box-shadow: rgba(24,26,27,.2) 0px 1px 0px inset,rgba(0,0,0,.05) 0px 1px 2px +} + +.sheet-darkmode .sheetform { + background-color: inherit; + color: #fff; +} + +.pe-header { + display: flex; + justify-content: center; + margin-bottom: 25px; +} + +.pe-header > img { + width: 50%; +} + +.pe-sheet-wrapper { + display: flex; + flex-wrap: nowrap; + gap: 20px; + margin-top: 40px; +} + +.pe-sheet-section { + border-width: 1px; + border-style: solid; + padding: 10px; + border-radius: 10px; +} + +.pe-borderless { + border-width: 0 !important; +} + +.pe-centered { + display: flex; + justify-content: center; +} + +.sheet-darkmode .pe-sheet-section { + border-color: #ababab; +} + +.pe-width-50 { + flex: 50%; +} + +.pe-width-25 { + flex: 25%; +} + +.pe-width-75 { + flex: 75%; +} + +.pe-width-100 { + flex: 100%; +} + +.pe-break { + flex-basis: 100%; + height: 0; +} + +.pe-sheet-section>h1,h2,h3,h4,h5 { + font-family: "Great Vibes", cursive; + margin-top: -30px; + margin-bottom: 30px; + padding-left: 10px; + padding-right: 10px; + display: block; + border-width: 1px; + border-style: dashed; + border-radius: 5px; +} + +.pe-sheet-section>h1 { + font-size: 17pt; + line-height: 30pt; +} + +.sheetform .pe-sheet-section>h1,h2,h3,h4,h5 { + background-color: #fff; +} + +.sheet-darkmode .sheetform .pe-sheet-section>h1,h2,h3,h4,h5 { + color: #fff; + border-color: #ababab; + background-color: rgb(31, 31, 31); +} + +.pe-bold { + font-weight: bold; +} + +.pe-sheet-section>.pe-sheet-row { + display:flex; + gap:5px; + align-items: center; + margin-top:5px; + margin-bottom: 5px; + flex-direction: row; +} + +.pe-sheet-section>.pe-sheet-row>.pe-grow { + flex-grow: 1; +} + +.pe-sheet-section>.pe-sheet-row>select { + margin-bottom: 0px; +} + +.pe-sheet-section>.pe-sheet-row>.pe-label { + display:block; + padding-left: 10px; + padding-right: 10px; +} + +.pe-sheet-section>.pe-empty-sheet-line { + height: 1.2em; +} + +.pe-sheet-section>.pe-skill-grid { + display: flex; + flex-direction: column; +} + +.pe-sheet-section>.pe-skill-grid>.pe-skill-row { + flex-basis: 100%; + display: flex; + flex-wrap: wrap; + align-items: center; + gap:5px; + padding: 6px; + border-bottom: 1px dotted +} + +.pe-sheet-section>.pe-skill-grid>.pe-skill-row.border-dashed { + border-bottom: 1px dashed + } + +.pe-sheet-section>.pe-skill-grid>.pe-skill-row.border-none, +.pe-sheet-section>.pe-skill-grid>.pe-skill-row:last-child{ + border-bottom: none; +} + +.pe-sheet-section>.pe-skill-grid>.pe-skill-row:nth-child(even) { + background-color: rgb(29, 29, 29); +} + +.pe-sheet-section>.pe-skill-grid>.pe-skill-row>* { + flex-basis:11%; + text-align: center; +} + +.pe-sheet-section>.pe-skill-grid>.pe-skill-row>.pe-wider { + flex-basis: 30%; + text-align: left; +} + +.pe-sheet-section>.pe-skill-grid>.pe-skill-row>.pe-narrow { + flex-basis: 6%; +} + +.pe-sheet-section>.pe-skill-grid>.pe-skill-row>.pe-fullrow { + flex-basis: 100%; + text-align: left; +} + +.sheet-rolltemplate-pe-combat, +.sheet-rolltemplate-pe-challenge { + padding: 10px 0; +} + +.sheet-rolltemplate-pe-combat > table, +.sheet-rolltemplate-pe-challenge > table { + width:250px; +} + +.sheet-rolltemplate-pe-combat > table > tbody > tr > th, +.sheet-rolltemplate-pe-combat > table > tbody > tr > td, +.sheet-rolltemplate-pe-challenge > table > tbody > tr > th, +.sheet-rolltemplate-pe-challenge > table > tbody > tr > td { + line-height: 2em; + border: 3px solid #2c2d2e; + padding: 5px; +} + +.sheet-rolltemplate-pe-challenge > table > tbody > tr > th, +.sheet-rolltemplate-pe-challenge > table > tbody > tr > th { + background-color: #3b3b3c; + color: #fff; +} + +.sheet-rolltemplate-pe-combat > table > tbody > tr > th.sheet-pe-fixed-width, +.sheet-rolltemplate-pe-challenge > table > tbody > tr > th.sheet-pe-fixed-width { + width: 90px; +} + + +.sheet-rolltemplate-pe-combat.sheet-rolltemplate-darkmode > table > tbody > tr > th, +.sheet-rolltemplate-pe-combat.sheet-rolltemplate-darkmode > table > tbody > tr > td, +.sheet-rolltemplate-pe-challenge.sheet-rolltemplate-darkmode > table > tbody > tr > th, +.sheet-rolltemplate-pe-challenge.sheet-rolltemplate-darkmode > table > tbody > tr > td { + border: 3px solid #9e9ea0; +} + +.sheet-rolltemplate-pe-combat.sheet-rolltemplate-darkmode > table > tbody > tr > td, +.sheet-rolltemplate-pe-challenge.sheet-rolltemplate-darkmode > table > tbody > tr > td { + background-color: #565656; + color: #d9d9d9 !important; +} + +.sheet-rolltemplate-pe-combat.sheet-rolltemplate-darkmode > table > tbody > tr > th, +.sheet-rolltemplate-pe-challenge.sheet-rolltemplate-darkmode > table > tbody > tr > th { + background-color: #e0dddd; + color: #404040 !important; +} + +.sheet-rolltemplate-pe-combat > table > tbody > tr > td.sheet-success, +.sheet-rolltemplate-pe-challenge > table > tbody > tr > td.sheet-success { + background-color: #4cf06f; + color: #404040 !important; + font-weight: bold; + text-align: center; +} + +.sheet-rolltemplate-pe-combat > table > tbody > tr > td.sheet-failure, +.sheet-rolltemplate-pe-challenge > table > tbody > tr > td.sheet-failure { + background-color: #810505; + color: #fff !important; + font-weight: bold; + text-align: center; +} + + + diff --git a/Private Eye/privateeye.html b/Private Eye/privateeye.html index bb0d790f9c..a4dd367d60 100644 --- a/Private Eye/privateeye.html +++ b/Private Eye/privateeye.html @@ -1,13 +1,974 @@ -