/* 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'); } /* 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'); } /* ----------------------------------------- */ /* Fonts */ /* ----------------------------------------- */ /* ----------------------------------------- */ /* 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 { text-decoration: none; } a:hover, a:active { text-shadow: none; text-decoration: underline; } .app { 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); } #pause h3 { border-bottom: 0; } input[type="text"], input[type="number"], input[type="password"], input[type="date"], input[type="time"], select, textarea { border-radius: 4px; 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 { 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 { 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, input[type="button"], input[type="submit"], input[type="reset"] { font-family: 'Open Sans'; font-size: 13px; font-weight: 700; text-align: center; border: none; border-radius: 4px; cursor: pointer; transition: all 0.3s; } button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus { box-shadow: none; } button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled { opacity: 0.6; cursor: default; } #sidebar { border: none; } #sidebar-tabs { border: none; box-shadow: 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); } #sidebar-tabs .item { font-size: 16px; } #sidebar-tabs .item.active { border: none; box-shadow: none; background: none; text-shadow: none; } /*----------- ** Chat Tab -----------*/ #chat-log .chat-message { 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; } .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; border-bottom: none; } .sw5e.chat-card .card-header h3:hover { 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; } .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; border: none; border-radius: 4px; } .sw5e.chat-card .card-buttons button:hover, .sw5e.chat-card .card-buttons button:focus { box-shadow: none; } .sw5e.chat-card .card-footer { padding: 4px 0 0; } .sw5e.chat-card .card-footer span { padding: 0 4px 0 0; font-size: 10px; } .sw5e.chat-card .card-footer span:last-child { border-right: none; padding-right: 0; } .dice-roll .dice-formula { border: none; box-shadow: none; border-radius: 4px; } .dice-roll .dice-total { border-radius: 0; padding: 4px 0; } #chat-controls { padding-top: 4px; } #chat-form textarea:focus { box-shadow: none; outline: none; } /*----------- ** Combat Tab -----------*/ #combat h3 { border: none; } #combat #combat-tracker li.combatant { padding: 4px 0; background: none; } #combat #combat-tracker li.combatant .token-name { text-shadow: none; } #combat #combat-tracker li.combatant h4 { color: #1C1C1C; } #combat #combat-tracker li.combatant .roll { background: none; } #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 .initiative { text-shadow: none; } #combat #combat-tracker li.combatant.hidden { opacity: 0.5; } #combat #combat-controls { padding-top: 0; } /* ** 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; } .sidebar-tab .directory-header .header-search input { text-align: left; padding-left: 22px; } .sidebar-tab .directory-header .header-search input:focus { box-shadow: none; } .sidebar-tab .subdirectory { border: none; margin-left: 8px; min-height: 8px; } .sidebar-tab .directory-list { padding-bottom: 4px; } .sidebar-tab .directory-list .folder > .folder-header { line-height: default; padding: 0 0 0 8px; position: relative; border: none; } .sidebar-tab .directory-list .folder > .folder-header h3 { padding: 8px 4px; 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; } .sidebar-tab .directory-list .folder > .folder-header a { position: absolute; top: 0; right: 4px; height: 100%; padding: 0 4px; } .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 .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 { 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; } #scenes .subdirectory { border-left: none; } #scenes .scene { border: none; 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; } #scenes .scene h3 { font-family: 'Open Sans'; font-size: 13px; font-weight: 700; text-align: left; text-shadow: none; padding: 4px 4px 4px 12px; 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; 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 { text-decoration: none; } #playlists .directory-list li.playlist li.sound { border: none; } #playlists .directory-list li.playlist li.sound h4 { font-family: 'Open Sans'; font-size: 13px; font-weight: 400; } #compendium .compendium-entity { margin: 0 4px; padding: 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); border-radius: 4px; border: none; } #compendium .compendium-entity + .compendium-entity { margin-top: 4px; } #compendium .compendium-entity h3 { background: none; border: none; 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 .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; font-size: 13px; } #settings h2 { border: none; margin: 0 8px; padding: 0; background: none; } #settings #game-details, #settings #settings-game, #settings #settings-documentation, #settings #settings-access { padding: 0 8px; margin: 0 0 8px; }