/* ----------------------------------------- */ /* Fonts */ /* ----------------------------------------- */ /* russo-one-regular - latin */ @font-face { font-family: 'Russo One'; font-style: normal; font-weight: 400; src: url('./fonts/RussoOne.ttf'); } @font-face { font-family: 'Russo One'; font-style: italic; font-weight: 400; src: url('./fonts/RussoOne.ttf'); } @font-face { font-family: 'Russo One'; font-style: normal; font-weight: 700; src: url('./fonts/RussoOne.ttf'); } /* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('./fonts/OpenSans-Regular.ttf'); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url('./fonts/OpenSans-Italic.ttf'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('./fonts/OpenSans-Bold.ttf'); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: url('./fonts/OpenSans-BoldItalic.ttf'); } /* ----------------------------------------- */ /* Sheet Styles */ /* ----------------------------------------- */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } ::-webkit-scrollbar-track { border: 1px solid #0d99cc; border-radius: 4px; } ::-webkit-scrollbar-thumb { outline: none; border-radius: 4px; background: #0d99cc; border: none; } :root { scrollbar-width: thin; scrollbar-color: #0d99cc #afc6d6; } body { font-family: 'Open Sans'; font-size: 13px; font-weight: 400; } h1 { font-family: 'Russo One'; font-size: 34px; font-weight: 400; } h2 { font-family: 'Russo One'; font-size: 27px; font-weight: 400; } h3 { font-family: 'Russo One'; font-size: 21px; font-weight: 400; } h4 { font-family: 'Russo One'; font-size: 17px; font-weight: 400; } h5, h6 { font-family: 'Russo One'; font-size: 13px; font-weight: 400; } a { color: #c40f0f; text-decoration: none; } a:hover, a:active { text-shadow: none; text-decoration: underline; } .app { background: linear-gradient(90deg, #afc6d6 0%, #D6D6D6 30%, #D6D6D6 70%, #afc6d6); border: none; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); } #context-menu { background: none; border: none; border-radius: 0; color: #1C1C1C; padding: 0 8px; } #context-menu ol.context-items { background: white; border-radius: 4px; border: 1px solid #828282; box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); } #context-menu ol.context-items li.context-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } #context-menu ol.context-items li.context-item:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } #context-menu ol.context-items li.context-item i { color: #0d99cc; } #context-menu ol.context-items li.context-item:hover { background: #c40f0f; color: white; text-shadow: none; cursor: pointer; } #context-menu ol.context-items li.context-item:hover i { color: white; } #context-menu ol.context-items li.context-item + li { border-top: 1px solid #D6D6D6; } input[type="text"], input[type="number"], input[type="password"], input[type="date"], input[type="time"], select, textarea { border: 1px solid #828282; border-radius: 4px; color: #1C1C1C; transition: all 0.3s; } input[type="text"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="date"]:hover, input[type="time"]:hover, select:hover, textarea:hover { border-color: #4f4f4f; box-shadow: none; } input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus, select:focus, textarea:focus { border-color: #c40f0f; box-shadow: none; } input[type=range] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ width: 100%; /* Specific width is required for Firefox. */ background: transparent; /* Otherwise white in Chrome */ } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; background: #c40f0f; width: 12px; height: 12px; border-radius: 32px; cursor: pointer; box-shadow: none; } input[type=range]::-moz-range-thumb { -webkit-appearance: none; background: #c40f0f; width: 12px; height: 12px; border-radius: 32px; cursor: pointer; box-shadow: none; } input[type=range]::-ms-thumb { -webkit-appearance: none; background: #c40f0f; width: 12px; height: 12px; border-radius: 32px; cursor: pointer; box-shadow: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: #7ed6f7; border-radius: 4px; border: 1px solid #0d99cc; box-shadow: none; } input[type=range]:focus::-webkit-slider-runnable-track { background: #0d99cc; } input[type=range]::-moz-range-track { width: 100%; height: 6px; cursor: pointer; background: #7ed6f7; border-radius: 4px; border: 1px solid #0d99cc; box-shadow: none; } input[type=range]::-ms-track { width: 100%; height: 6px; cursor: pointer; background: #7ed6f7; border-radius: 4px; border: 1px solid #0d99cc; box-shadow: none; } input[type=range]:focus { outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ } input[type=range]::-ms-track { width: 100%; cursor: pointer; /* Hides the slider so custom styles can be added */ background: transparent; border-color: transparent; color: transparent; } button { font-family: 'Open Sans'; font-size: 13px; font-weight: 700; background: #c40f0f; color: white; text-align: center; border: none; border-radius: 4px; cursor: pointer; transition: all 0.3s; } button:hover, button:focus { box-shadow: none; background: #dc1111; } #sidebar { border: none; } #sidebar-tabs { border: none; box-shadow: none; background: white; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); } #sidebar-tabs > .collapse { color: #c40f0f; } #sidebar-tabs .item { font-size: 16px; } #sidebar-tabs .item.active { color: #c40f0f; border: none; border-bottom: 3px solid #c40f0f; box-shadow: none; background: none; text-shadow: none; } /*----------- ** Chat Tab -----------*/ #chat-log .chat-message { background: white; border: none; border-radius: 4px; margin-bottom: 8px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); } #chat-log .chat-message > header { color: #c40f0f; border-bottom: 2px solid #0d99cc; margin-bottom: 4px; } #chat-log .chat-message > header span { color: #1C1C1C; } .notification-pip { color: #0d99cc; text-shadow: none; } .sw5e.chat-card { font-size: 13px; } .sw5e.chat-card .card-header { padding: 0; border: none; } .sw5e.chat-card .card-header img { flex: 0 0 36px; margin-right: 4px; } .sw5e.chat-card .card-header h3 { flex: 1; margin: 0; line-height: 36px; font-family: 'Russo One'; font-size: 17px; font-weight: 400; color: #1C1C1C; } .sw5e.chat-card .card-header h3:hover { color: #1C1C1C; text-shadow: none; } .sw5e.chat-card .card-content { margin: 4px 0; } .sw5e.chat-card .card-content h3 { font-size: 12px; margin: 0; font-weight: bold; } .sw5e.chat-card .card-content > * { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .sw5e.chat-card .card-buttons { margin: 4px 0; } .sw5e.chat-card .card-buttons span { display: block; line-height: 28px; text-align: center; border: 1px solid #828282; } .sw5e.chat-card .card-buttons button { font-family: 'Open Sans'; font-size: 13px; font-weight: 700; padding: 4px 0; height: auto; line-height: 1.6; margin: 4px 0; background: #c40f0f; border: none; border-radius: 4px; } .sw5e.chat-card .card-buttons button:hover, .sw5e.chat-card .card-buttons button:focus { background-color: #dc1111; box-shadow: none; } .sw5e.chat-card .card-footer { padding: 4px 0 0; border-top: 1px solid #7ed6f7; } .sw5e.chat-card .card-footer span { border-right: 2px groove #FFF; padding: 0 3px 0 0; font-size: 10px; } .sw5e.chat-card .card-footer span:last-child { border-right: none; padding-right: 0; } .dice-roll .dice-formula { background: none; border: none; } .dice-roll .dice-total { background: #afc6d6; border: 1px solid #0d99cc; border-radius: 0; padding: 4px 0; box-shadow: 0 0 12px rgba(13, 153, 204, 0.5); } .dice-roll .dice-total.success { color: inherit; background: #c7d0c0; border: 1px solid #006c00; } .dice-roll .dice-total.failure { color: inherit; background: #ffdddd; border: 1px solid #6e0000; } .dice-roll .dice-total.critical { color: #0dce0d; background: #bcdcbe; box-shadow: 0 0 12px rgba(13, 206, 13, 0.5); } .dice-roll .dice-total.fumble { color: red; } #chat-controls { padding-top: 4px; } #chat-controls label { color: #1C1C1C; } #chat-form textarea { background: white; } #chat-form textarea:focus { box-shadow: none; outline: none; } /*----------- ** Combat Tab -----------*/ #combat #combat-round { color: #c40f0f; border-bottom: 2px solid #0d99cc; } #combat #combat-round .encounters h4 { color: #c40f0f; } #combat #combat-round .encounters a { color: #4f4f4f; } #combat #combat-round .encounters a:hover { color: #c40f0f; } #combat #combat-tracker li.combatant { padding: 4px 0; color: #1C1C1C; background: none; } #combat #combat-tracker li.combatant:nth-child(even) { background: rgba(175, 198, 214, 0.5); } #combat #combat-tracker li.combatant h4 { color: #1C1C1C; text-shadow: none; } #combat #combat-tracker li.combatant .roll { background: none; color: #4f4f4f; } #combat #combat-tracker li.combatant .roll::before { content: "\f6cf"; font-family: "Font Awesome 5 Free"; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; font-weight: 900; font-size: 28px; } #combat #combat-tracker li.combatant .roll:hover { color: #c40f0f; } #combat #combat-tracker li.combatant .combatant-control { color: #828282; text-shadow: none; } #combat #combat-tracker li.combatant .combatant-control.active { color: #363636; } #combat #combat-tracker li.combatant .token-resource { color: #4f4f4f; border-right: 1px solid #828282; } #combat #combat-tracker li.combatant .initiative { text-shadow: none; } #combat #combat-tracker li.combatant.active { color: #0d99cc; } #combat #combat-tracker li.combatant.active .initiative, #combat #combat-tracker li.combatant.active h4 { color: #0d99cc; } #combat #combat-tracker li.combatant.hidden { opacity: 0.5; color: #1C1C1C; } #combat #combat-controls { padding-top: 0; border-top: 1px solid #0d99cc; } /* ** Folders */ .sidebar-tab .directory-header { margin-bottom: 4px; } .sidebar-tab .directory-header .header-search { position: relative; } .sidebar-tab .directory-header .header-search i.fa-search { position: absolute; left: 8px; color: #0d99cc; } .sidebar-tab .directory-header .header-search input { text-align: left; padding-left: 22px; background: white; } .sidebar-tab .directory-header .header-search input:focus { box-shadow: none; } .sidebar-tab .subdirectory { border: none; margin-left: 8px; background: white; min-height: 8px; } .sidebar-tab .subdirectory .folder { border-left: 2px solid rgba(28, 28, 28, 0.4); } .sidebar-tab .directory-list { padding-bottom: 4px; } .sidebar-tab .directory-list li + li { border-top: 1px solid #0d99cc; } .sidebar-tab .directory-list .folder > .folder-header { line-height: default; padding: 0 0 0 8px; position: relative; border: none; background: white; } .sidebar-tab .directory-list .folder > .folder-header h3 { padding: 8px 4px; background: white; color: #1C1C1C; font-family: 'Open Sans'; font-size: 13px; font-weight: 700; line-height: 1.6; } .sidebar-tab .directory-list .folder > .folder-header h3 > i { margin-right: 4px; color: #0d99cc; } .sidebar-tab .directory-list .folder > .folder-header a { position: absolute; top: 0; right: 4px; height: 100%; padding: 0 4px; color: #828282; } .sidebar-tab .directory-list .folder > .folder-header a:hover { color: #c40f0f; } .sidebar-tab .directory-list .folder > .folder-header a i { margin-top: 12px; } .sidebar-tab .directory-list .folder > .folder-header a.create-folder { right: 28px; } .sidebar-tab .directory-list .folder.collapsed > .folder-header { background: white; } .sidebar-tab .directory-list .folder + .entity { border-top: 1px solid #0d99cc; } .sidebar-tab .directory-list .directory-item img { flex: 0 0 32px; height: 32px; width: 32px; align-self: center; } .sidebar-tab .directory-list .actor, .sidebar-tab .directory-list .item, .sidebar-tab .directory-list .journal, .sidebar-tab .directory-list .table { background: white; border: none; } .sidebar-tab .directory-list .actor .entity-name, .sidebar-tab .directory-list .item .entity-name, .sidebar-tab .directory-list .journal .entity-name, .sidebar-tab .directory-list .table .entity-name { font-family: 'Open Sans'; font-size: 13px; font-weight: 700; color: #1C1C1C; } .sidebar-tab .directory-list .actor:nth-child(even), .sidebar-tab .directory-list .item:nth-child(even), .sidebar-tab .directory-list .journal:nth-child(even), .sidebar-tab .directory-list .table:nth-child(even) { background: rgba(175, 198, 214, 0.3); } #scenes .subdirectory { border-left: none; } #scenes .scene { border: none; border-top: 1px solid #0d99cc; border-left: 4px solid #0d99cc; box-shadow: none; position: relative; height: 128px; } #scenes .scene + .scene { margin-top: 4px; } #scenes .scene::after { content: ''; display: block; width: 100%; height: 99px; position: absolute; top: 28px; left: 0; box-shadow: 0 0 20px #0d99cc inset; } #scenes .scene h3 { font-family: 'Open Sans'; font-size: 13px; font-weight: 700; text-align: left; text-shadow: none; padding: 4px 4px 4px 12px; background: white; line-height: 1.6; position: absolute; top: 0; left: 0; width: 100%; } #playlists .directory-list { padding: 0 8px; } #playlists .directory-list li.playlist { padding: 8px; border-radius: 4px; background: white; margin-bottom: 8px; border-top: inherit; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); } #playlists .directory-list li.playlist .playlist-header { background: white; color: #c40f0f; text-decoration: none; border-bottom: 2px solid #0d99cc; } #playlists .directory-list li.playlist li.sound { border: none; color: #1C1C1C; } #playlists .directory-list li.playlist li.sound h4 { font-family: 'Open Sans'; font-size: 13px; font-weight: 400; } #playlists .directory-list li.playlist a.sound-control { color: #c40f0f; } #compendium .compendium-entity { margin: 0 4px; padding: 8px; background: white !important; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); border-radius: 4px; border: none; } #compendium .compendium-entity + .compendium-entity { margin-top: 4px; } #compendium .compendium-entity h3 { border: none; color: #c40f0f; border-bottom: 2px solid #0d99cc; font-family: 'Russo One'; font-size: 17px; font-weight: 400; padding: 0; margin-bottom: 4px; } #compendium .compendium-entity ol.compendium-list li.compendium-pack { margin: 0; padding: 4px; border: none; } #compendium .compendium-entity ol.compendium-list li.compendium-pack:nth-child(even) { background: rgba(175, 198, 214, 0.3); } #compendium .compendium-entity ol.compendium-list li.compendium-pack .pack-title { margin: 0; position: relative; } #compendium .compendium-entity ol.compendium-list li.compendium-pack .pack-title a { font-family: 'Open Sans'; font-size: 13px; font-weight: 700; } #compendium .compendium-entity ol.compendium-list li.compendium-pack .pack-title a i { display: none; } #compendium .compendium-entity ol.compendium-list li.compendium-pack .pack-title .status-icons { top: 4px; color: #828282; font-size: 13px; } #compendium .compendium-entity ol.compendium-list li.compendium-pack footer.compendium-footer { color: #1C1C1C; } #settings h2 { color: #c40f0f; border: none; border-bottom: 2px solid #0d99cc; margin: 0 8px; padding: 0; } #settings #game-details, #settings #settings-game, #settings #settings-documentation, #settings #settings-access { padding: 0 8px; margin: 0 0 8px; color: #1C1C1C; }