From b75aafd3cea4352fce615de85155ab0f61246ddc Mon Sep 17 00:00:00 2001 From: Nathanael Phillips Date: Wed, 4 Nov 2020 13:12:41 -0700 Subject: [PATCH] split styles to accomodate themes; added light/dark theme --- gulpfile.js | 16 +- lang/en.json | 6 +- less/update/_variables-dark.less | 95 +++ less/update/_variables-light.less | 93 +++ .../{variables.less => _variables.less} | 46 +- less/update/actor.less | 0 .../{forms.less => forms-global.less} | 18 +- less/update/components/forms-themes.less | 36 ++ less/update/components/sidebar-global.less | 369 +++++++++++ less/update/components/sidebar-themes.less | 295 +++++++++ less/update/components/sidebar.less | 2 +- less/update/sw5e-dark.less | 44 ++ less/update/sw5e-global.less | 108 ++++ less/update/sw5e-light.less | 44 ++ less/update/sw5e-update.less | 43 -- module/settings.js | 12 + sw5e-dark.css | 365 +++++++++++ sw5e-global.css | 598 ++++++++++++++++++ sw5e-light.css | 365 +++++++++++ sw5e.js | 3 + system.json | 2 +- 21 files changed, 2456 insertions(+), 104 deletions(-) create mode 100644 less/update/_variables-dark.less create mode 100644 less/update/_variables-light.less rename less/update/{variables.less => _variables.less} (65%) delete mode 100644 less/update/actor.less rename less/update/components/{forms.less => forms-global.less} (87%) create mode 100644 less/update/components/forms-themes.less create mode 100644 less/update/components/sidebar-global.less create mode 100644 less/update/components/sidebar-themes.less create mode 100644 less/update/sw5e-dark.less create mode 100644 less/update/sw5e-global.less create mode 100644 less/update/sw5e-light.less create mode 100644 sw5e-dark.css create mode 100644 sw5e-global.css create mode 100644 sw5e-light.css diff --git a/gulpfile.js b/gulpfile.js index 96969383..c56d2ae6 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -11,12 +11,22 @@ function compileLESS() { .pipe(less()) .pipe(gulp.dest("./")) } -function compileMORE() { - return gulp.src("less/update/sw5e-update.less") +function compileGlobalLess() { + return gulp.src("less/update/sw5e-global.less") .pipe(less()) .pipe(gulp.dest("./")) } -const css = gulp.series(compileLESS, compileMORE); +function compileLightLess() { + return gulp.src("less/update/sw5e-light.less") + .pipe(less()) + .pipe(gulp.dest("./")) +} +function compileDarkLess() { + return gulp.src("less/update/sw5e-dark.less") + .pipe(less()) + .pipe(gulp.dest("./")) +} +const css = gulp.series(compileLESS, compileGlobalLess, compileLightLess, compileDarkLess); /* ----------------------------------------- */ /* Watch Updates diff --git a/lang/en.json b/lang/en.json index b1716695..e324ecbd 100644 --- a/lang/en.json +++ b/lang/en.json @@ -855,5 +855,9 @@ "SETTINGS.5eRestN": "Rest Variant", "SETTINGS.5eRestPHB": "Player's Handbook (LR: 8 hours, SR: 1 hour)", "SETTINGS.5eRestGritty": "Gritty Realism (LR: 7 days, SR: 8 hours)", -"SETTINGS.5eRestEpic": "Epic Heroism (LR: 1 hour, SR: 1 min)" +"SETTINGS.5eRestEpic": "Epic Heroism (LR: 1 hour, SR: 1 min)", +"SETTINGS.SWColorL": "Set the color theme of the game", +"SETTINGS.SWColorN": "Display Theme", +"SETTINGS.SWColorLight": "Light Theme", +"SETTINGS.SWColorDark": "Dark Theme" } diff --git a/less/update/_variables-dark.less b/less/update/_variables-dark.less new file mode 100644 index 00000000..c8616206 --- /dev/null +++ b/less/update/_variables-dark.less @@ -0,0 +1,95 @@ +//override Primary Red +@colorRed: #E81111; +@colorDarkBg: #2b2b2b; +//Background +@primaryBackground: linear-gradient(90deg,#626262 0,#4d4d4d 30%,#4d4d4d 70%,#626262); + +//Typography +@headingColor: @colorRed; +@headerBorderColor: @colorBlue; +@bodyFontColor: white; +@linkColor: @colorRed; +@linkSecondaryColor: @colorPaleGray; + +@blockquoteBackground: @colorPaleRed; +@blockquoteBorder: @colorRed; +@blockquoteShadow: 0 0 20px rgba(@colorRed, 0.8); + +//forms +@inputBackgroundColor: @colorDarkGray; +@inputBorderNormal: @colorLightGray; +@inputBorderHover: @colorGray; +@inputBorderFocus: @colorRed; +@inputTextColor: white; + +@buttonBackground: @colorRed; +@buttonTextColor: white; +@buttonHoverBackground: lighten(@colorRed, 5); +@buttonSecondaryBackground: @colorLightGray; +@buttonSecondaryTextColor: white; +@buttonSecondaryHoverBackground: lighten(@colorLightGray, 5); + +//other bits +@hrColor: @colorBlue; +@tableTextColor: white; +@tableHeaderTextColor: @colorPaleGray; +@tableBackground: @colorGray; +@tableRowHoverBackground: lighten(@colorLightGray, 10); +@tableRowBorderColor: @colorLightGray; + +//Sidebar +@sidebarTabBackground: @colorDarkBg; +@sidebarTabLinkColor: @colorRed; +@sidebarTabLinkUnderline: @colorRed; + +@chatBackground: @colorDarkGray; +@chatHeaderColor: @colorRed; +@chatHeaderBottomBorderColor: @colorBlue; +@chatNotificationColor: @colorBlue; +@cardButtonBorder: @colorLightGray; +@cardFooterBorder: @colorLightBlue; +@cardFooterSeparator: @colorPaleGray; + +@diceFormulaBackground: @colorGray; +@diceFormualColor: white; +@diceTotalBackground: @colorPaleRed; +@diceTotalBorder: @colorRed; +@diceTotalShadow: @colorRed; +@diceSuccessColor: @colorGreen; +@diceFailureColor: @colorRed; +@diceCriticalBackground: @colorPaleGreen; +@diceCriticalColor: @colorGreen; +@diceFumbleBackground: @colorPaleRed; +@diceFumbleColor: @colorRed; + +@altRowBackground: @colorGray; + +@combatRoundColor: @colorRed; +@combatRoundBorder: @colorBlue; +@combatCombatantControlColor: @colorPaleGray; +@combatCombatantControlColorActive: @colorRed; +@combatActiveCombatantColor: @colorBlue; +@combatTokenResourceColor: white; +@combatTokenResouceBorder: @colorLightGray; +@combatControlsBorder: @colorBlue; + +@folderSearchIconColor: @colorBlue; +@folderSubdirectoryBackground: @colorDarkBg; +@folderSubdirectoryBorder: @colorLightGray; +@directoryListItemBorder: @colorBlue; +@folderHeaderBackground: @colorDarkBg; +@folderHeaderColor: white; +@folderIconColor: @colorBlue; + +@entityBackgroundColor: @colorDarkBg; +@entityNameColor: @colorBlack; + +@sceneBorderColor: @colorBlue; +@sceneBackgroundColor: @colorDarkBg; + +@playlistBackgroundColor: @colorDarkBg; +@playlistHeaderBorder: @colorBlue; +@playlistSoundColor: @colorBlack; + +@compendiumEntityBackground: @colorDarkBg; +@compendiumStatusIcon: @colorLightGray; \ No newline at end of file diff --git a/less/update/_variables-light.less b/less/update/_variables-light.less new file mode 100644 index 00000000..5465918d --- /dev/null +++ b/less/update/_variables-light.less @@ -0,0 +1,93 @@ +//Background +@primaryBackground: linear-gradient(90deg,#afc6d6 0,#d6d6d6 30%,#d6d6d6 70%,#afc6d6);// linear-gradient(90deg, @colorPaleBlue 0%, @colorPaleGray 30%, @colorPaleGray 70%, @colorPaleBlue); + +//Typography +@headingColor: @colorRed; +@headerBorderColor: @colorBlue; +@bodyFontColor: @colorBlack; +@linkColor: @colorRed; +@linkSecondaryColor: @colorGray; + +@blockquoteBackground: @colorPaleBlue; +@blockquoteBorder: @colorBlue; +@blockquoteShadow: 0 0 20px rgba(@colorBlue, 0.8); + +//forms +@inputBackgroundColor: white; +@inputBorderNormal: @colorLightGray; +@inputBorderHover: @colorGray; +@inputBorderFocus: @colorRed; +@inputTextColor: @colorBlack; + +@buttonBackground: @colorRed; +@buttonTextColor: white; +@buttonHoverBackground: lighten(@colorRed, 5); +@buttonSecondaryBackground: @colorPaleGray; +@buttonSecondaryTextColor: @colorBlack; +@buttonSecondaryHoverBackground: lighten(@colorPaleGray, 5); + +//other bits +@hrColor: @colorBlue; +@tableTextColor: @colorBlack; +@tableHeaderTextColor: @colorLightGray; +@tableBackground: white; +@tableRowHoverBackground: lighten(@colorPaleGray, 10); +@tableRowBorderColor: @colorPaleGray; + + +//Sidebar +@sidebarTabBackground: white; +@sidebarTabLinkColor: @colorRed; +@sidebarTabLinkUnderline: @colorRed; + +@chatBackground: white; +@chatHeaderColor: @colorRed; +@chatHeaderBottomBorderColor: @colorBlue; +@chatNotificationColor: @colorBlue; +@cardButtonBorder: @colorLightGray; +@cardFooterBorder: @colorLightBlue; +@cardFooterSeparator: @colorPaleGray; + +@diceFormulaBackground: @colorPaleGray; +@diceFormualColor: @colorBlack; +@diceTotalBackground: @colorPaleBlue; +@diceTotalBorder: @colorBlue; +@diceTotalShadow: @colorBlue; +@diceSuccessColor: @colorGreen; +@diceFailureColor: @colorRed; +@diceCriticalBackground: @colorPaleGreen; +@diceCriticalColor: @colorGreen; +@diceFumbleBackground: @colorPaleRed; +@diceFumbleColor: @colorRed; + +@altRowBackground: @colorPaleBlue; + +@combatRoundColor: @colorRed; +@combatRoundBorder: @colorBlue; +@combatCombatantControlColor: @colorLightGray; +@combatCombatantControlColorActive: @colorDarkGray; +@combatActiveCombatantColor: @colorBlue; +@combatTokenResourceColor: @colorGray; +@combatTokenResouceBorder: @colorLightGray; +@combatControlsBorder: @colorBlue; + +@folderSearchIconColor: @colorBlue; +@folderSubdirectoryBackground: white; +@folderSubdirectoryBorder: @colorBlack; +@directoryListItemBorder: @colorBlue; +@folderHeaderBackground: white; +@folderHeaderColor: @colorBlack; +@folderIconColor: @colorBlue; + +@entityBackgroundColor: white; +@entityNameColor: @colorBlack; + +@sceneBorderColor: @colorBlue; +@sceneBackgroundColor: white; + +@playlistBackgroundColor: white; +@playlistHeaderBorder: @colorBlue; +@playlistSoundColor: @colorBlack; + +@compendiumEntityBackground: white; +@compendiumStatusIcon: @colorLightGray; \ No newline at end of file diff --git a/less/update/variables.less b/less/update/_variables.less similarity index 65% rename from less/update/variables.less rename to less/update/_variables.less index 09bfa8f6..48558952 100644 --- a/less/update/variables.less +++ b/less/update/_variables.less @@ -2,56 +2,12 @@ /* ----------------------------------------- */ /* 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'); -} .russoOne(@size: 20px) { font-family: 'Russo One'; font-size: @size; font-weight: 400; } -/* 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'); -} + .openSans(@size: 13px, @weight: 400) { font-family: 'Open Sans'; font-size: @size; diff --git a/less/update/actor.less b/less/update/actor.less deleted file mode 100644 index e69de29b..00000000 diff --git a/less/update/components/forms.less b/less/update/components/forms-global.less similarity index 87% rename from less/update/components/forms.less rename to less/update/components/forms-global.less index eecb1a5a..9dc02f30 100644 --- a/less/update/components/forms.less +++ b/less/update/components/forms-global.less @@ -1,14 +1,10 @@ input[type="text"], input[type="number"], input[type="password"], input[type="date"], input[type="time"], select, textarea { - border: 1px solid @colorLightGray; border-radius: 4px; - color: @colorBlack; transition: all 0.3s; &:hover { - border-color: @colorGray; box-shadow: none; } &:focus { - border-color: @colorRed; box-shadow: none; } } @@ -16,7 +12,6 @@ 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{ @@ -91,10 +86,8 @@ input[type=range]::-ms-track { color: transparent; } -button { +button, input[type="button"], input[type="submit"], input[type="reset"] { .openSans(13px, 700); - background: @colorRed; - color: white; text-align: center; border: none; border-radius: 4px; @@ -102,6 +95,11 @@ button { transition: all 0.3s; &:hover, &:focus { box-shadow: none; - background: lighten(@colorRed, 5); } -} \ No newline at end of file + &:disabled { + opacity: 0.6; + cursor: default; + + } + +} diff --git a/less/update/components/forms-themes.less b/less/update/components/forms-themes.less new file mode 100644 index 00000000..0c692b60 --- /dev/null +++ b/less/update/components/forms-themes.less @@ -0,0 +1,36 @@ +input[type="text"], input[type="number"], input[type="password"], input[type="date"], input[type="time"], select, textarea { + border: 1px solid @inputBorderNormal; + color: @inputTextColor; + &:hover { + border-color: @inputBorderHover; + } + &:focus { + border-color: @inputBorderFocus; + } +} + +button, input[type="button"], input[type="submit"], input[type="reset"] { + background: @buttonBackground; + color: @buttonTextColor; + &:hover, &:focus { + background: @buttonHoverBackground; + } + &:disabled { + &:hover, &:focus { + background: @buttonBackground; + } + } + +} +input[type="reset"], button.secondary, button[type="reset"], input[type="button"].secondary, input[type="submit"].secondary { + background: @buttonSecondaryBackground; + color: @buttonSecondaryTextColor; + &:hover { + background: @buttonSecondaryHoverBackground; + } + &:disabled { + &:hover, &:focus { + background: @buttonSecondaryBackground; + } + } +} \ No newline at end of file diff --git a/less/update/components/sidebar-global.less b/less/update/components/sidebar-global.less new file mode 100644 index 00000000..3c68e11c --- /dev/null +++ b/less/update/components/sidebar-global.less @@ -0,0 +1,369 @@ +#sidebar { + border: none; //1px solid @colorBlue; +} + +#sidebar-tabs { + border: none; + box-shadow: none; + .dropShadow1(); + .item { + font-size: 16px; + } + .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; + .dropShadow1(); + & > header { + color: @colorRed; + border-bottom: 2px solid @colorBlue; + margin-bottom: 4px; + span { + color: @colorBlack; + } + } + + } +} +.notification-pip { + color: @colorBlue; +} + +.sw5e.chat-card { + .card-header { + padding: 0; + border: none; + img { + flex: 0 0 36px; + margin-right: 4px; + } + + h3 { + flex: 1; + margin: 0; + line-height: 36px; + .russoOne(17px); + border-bottom: none; + &:hover { + text-shadow: none; + } + } + } + + .card-content { + margin: 4px 0; + + h3 { + font-size: 12px; + margin: 0; + font-weight: bold; + } + + > * { + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + } + } + + .card-buttons { + margin: 4px 0; + + span { + display: block; + line-height: 28px; + text-align: center; + } + + button { + .openSans(13px, 700); + padding: 4px 0; + height: auto; + line-height: 1.6; + margin: 4px 0; + border: none; + border-radius: 4px; + &:hover, &:focus { + box-shadow: none; + } + } + } + + .card-footer { + padding: 4px 0 0; + + span { + padding: 0 4px 0 0; + font-size: 10px; + + &:last-child { + border-right: none; + padding-right: 0; + } + } + } +} +.dice-roll { + .dice-formula { + border: none; + box-shadow: none; + border-radius: 4px; + } + .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-tracker { + li.combatant { + padding: 4px 0; + background: none; + .token-name { + text-shadow: none; + } + h4 { + color: @colorBlack; + } + .roll { + background: none; + &::before { + content: "\f6cf"; + .fontAwesome(); + font-size: 28px; + } + + } + + + .initiative { + text-shadow: none; + } + + &.hidden { + opacity: 0.5; + } + } + } + #combat-controls { + padding-top: 0; + } + } + +/* +** Folders +*/ +.sidebar-tab { +.directory-header { + margin-bottom: 4px; + .header-search { + position: relative; + i.fa-search { + position: absolute; + left: 8px; + } + input { + text-align: left; + padding-left: 22px; + &:focus { + box-shadow: none; + } + } + } +} +.subdirectory { + border: none; + margin-left: 8px; + min-height: 8px; + +} +.directory-list { + padding-bottom: 4px; + .folder { + & > .folder-header { + line-height: default; + padding: 0 0 0 8px; + position: relative; + border: none; + h3 { + padding: 8px 4px; + .openSans(13px, 700); + line-height: 1.6; + & > i { + margin-right: 4px; + } + } + a { + position: absolute; + top: 0; + right: 4px; + height: 100%; + padding: 0 4px; + i { + margin-top: 12px; + } + + &.create-folder { + right: 28px; + } + } + } + } + .directory-item img { + flex: 0 0 32px; + height: 32px; + width: 32px; + align-self: center; + } + .actor, .item, .journal, .table { + border: none; + .entity-name { + .openSans(13px, 700); + } + + } +} +} +#scenes { + .subdirectory { + border-left: none; + } + .scene { + border: none; + box-shadow: none; + position: relative; + height: 128px; + & + .scene { + margin-top: 4px; + } + &::after { + content: ''; + display: block; + width: 100%; + height: 99px; + position: absolute; + top: 28px; + left: 0; + } + h3 { + .openSans(13px, 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; + li.playlist { + padding: 8px; + border-radius: 4px; + margin-bottom: 8px; + border-top: inherit; + .dropShadow1(); + .playlist-header { + text-decoration: none; + } + li.sound { + border: none; + h4 { + .openSans(13px, 400); + } + + } + } + } + +} +#compendium { + .compendium-entity { + margin: 0 4px; + padding: 8px; + .dropShadow1(); + border-radius: 4px; + border: none; + &+ .compendium-entity { + margin-top: 4px; + } + h3 { + background: none; + border: none; + .russoOne(17px); + padding: 0; + margin-bottom: 4px; + } + ol.compendium-list { + li.compendium-pack { + margin: 0; + padding: 4px; + border: none; + .pack-title { + margin: 0; + position: relative; + a { + .openSans(13px, 700); + i { + display: none; + } + } + .status-icons { + top: 4px; + font-size: 13px; + } + } + + } + } + } +} + +#settings { + h2 { + border: none; + margin: 0 8px; + padding: 0; + background: none; + } + #game-details, #settings-game, #settings-documentation, #settings-access { + padding: 0 8px; + margin: 0 0 8px; + } +} \ No newline at end of file diff --git a/less/update/components/sidebar-themes.less b/less/update/components/sidebar-themes.less new file mode 100644 index 00000000..b7d53e7a --- /dev/null +++ b/less/update/components/sidebar-themes.less @@ -0,0 +1,295 @@ +#sidebar-tabs { + background: @sidebarTabBackground; + & > .collapse { + color: @sidebarTabLinkColor; + } + .item.active { + color: @sidebarTabLinkColor; + border-bottom: 3px solid @sidebarTabLinkUnderline; + } +} + +/*----------- +** Chat Tab +-----------*/ + +#chat-log { + .chat-message { + background: @chatBackground; + color: @bodyFontColor; + & > header { + color: @chatHeaderColor; + border-bottom: 2px solid @chatHeaderBottomBorderColor; + span { + color: @bodyFontColor; + } + } + + } +} +.notification-pip { + color: @chatNotificationColor; +} + +.sw5e.chat-card { + + .card-header { + h3 { + color: @bodyFontColor; + &:hover { + color: @bodyFontColor; + } + } + } + + + .card-buttons { + span { + border: 1px solid @cardButtonBorder; + } + + } + + .card-footer { + border-top: 1px solid @cardFooterBorder; + + span { + border-right: 1px solid @cardFooterSeparator; + &:last-child { + border-right: none; + } + } + } +} +.dice-roll { + + .dice-formula { + background: @diceFormulaBackground; + color: @diceFormualColor; + box-shadow: none; + border-radius: 4px; + } + +.dice-total { + background: @diceTotalBackground; + border: 1px solid @diceTotalBorder; + box-shadow: 0 0 12px rgba(@diceTotalShadow,.8); + &.success { + color: @diceSuccessColor; + } + &.failure { + color: @diceFailureColor; + } + &.critical { + color: @diceCriticalColor; + background: @diceCriticalBackground; + box-shadow: 0 0 12px rgba(@diceCriticalColor,.5); + } + &.fumble { + color: @diceFumbleColor; + background: @diceFumbleBackground; + box-shadow: 0 0 12px rgba(@diceFumbleColor,.5); + } +} +} +#chat-controls { + .roll-type-select { + background: @inputBackgroundColor; + } + label { + color: @bodyFontColor; + } + +} +#chat-form textarea { + background: @inputBackgroundColor; + +} + +/*----------- +** Combat Tab +-----------*/ +#combat { +#combat-round { + color: @combatRoundColor; + border-bottom: 2px solid @combatRoundColor; + .encounters { + h4 { + color: @combatRoundColor; + } + a { + color: @linkSecondaryColor; + &:hover { + color: @linkColor; + } + } + } +} + #combat-tracker { + //padding-top: 4px; + li.combatant { + color: @bodyFontColor; + &:nth-child(even) { + background: rgba(@altRowBackground, 0.5); + } + h4 { + color: @bodyFontColor + } + .roll { + color: @linkSecondaryColor; + &:hover { + color: @linkColor; + } + } + .combatant-control { + color: @combatCombatantControlColor; + &.active { + color: @combatCombatantControlColorActive; + } + } + .token-resource { + color: @combatTokenResourceColor; + border-right: 1px solid @combatTokenResouceBorder; + } + &.active { + color: @combatActiveCombatantColor; + .initiative, h4 { + color: @combatActiveCombatantColor; + } + } + &.hidden { + color: @bodyFontColor; + } + } + } + #combat-controls { + border-top: 1px solid @combatControlsBorder; + } +} + +/* +** Folders +*/ +.sidebar-tab { +.directory-header { + .header-search { + i.fa-search { + color: @folderSearchIconColor; + } + input { + background: @inputBackgroundColor; + } + } +} +.subdirectory { + background: @folderSubdirectoryBackground; + .folder { + border-left: 2px solid rgba(@folderSubdirectoryBorder, 0.4); + } +} +.directory-list { + li + li { + border-top: 1px solid @directoryListItemBorder; + } + .folder { + & > .folder-header { + background: @folderHeaderBackground; + h3 { + background: @folderHeaderBackground; + color: @folderHeaderColor; + & > i { + color: @folderIconColor; + } + } + a { + color: @linkSecondaryColor; + &:hover { + color: @linkColor; + } + } + } + &.collapsed > .folder-header { + background: @folderHeaderBackground; + } + & + .entity { + border-top: 1px solid @directoryListItemBorder; + } + } + + .actor, .item, .journal, .table { + background: @entityBackgroundColor; + .entity-name { + color: @entityNameColor; + } + &:nth-child(even) { + background: rgba(@altRowBackground, 0.3); + } + } +} +} +#scenes { + .scene { + border-top: 1px solid @sceneBorderColor; + border-left: 4px solid @sceneBorderColor; + &::after { + box-shadow: 0 0 20px @sceneBorderColor inset; + } + h3 { + background: @sceneBackgroundColor; + } + } +} + +#playlists { + .directory-list { + li.playlist { + background: @playlistBackgroundColor; + .playlist-header { + background: @playlistBackgroundColor; + color: @colorRed; + border-bottom: 2px solid @playlistHeaderBorder; + } + li.sound { + color: @playlistSoundColor; + + } + a.sound-control { + color: @linkColor; + } + } + } + +} +#compendium { + .compendium-entity { + background: @compendiumEntityBackground !important; + h3 { + border-bottom: 2px solid @headerBorderColor; + } + ol.compendium-list { + li.compendium-pack { + &:nth-child(even) { + background: rgba(@altRowBackground, 0.3); + } + .pack-title { + .status-icons { + color: @compendiumStatusIcon; + } + } + footer.compendium-footer { + color: @bodyFontColor; + } + } + } + } +} + +#settings { + h2 { + color: @headingColor; + border-bottom: 2px solid @headerBorderColor; + } + #game-details, #settings-game, #settings-documentation, #settings-access { + color: @bodyFontColor; + } +} \ No newline at end of file diff --git a/less/update/components/sidebar.less b/less/update/components/sidebar.less index 8c673ba3..2cfb6737 100644 --- a/less/update/components/sidebar.less +++ b/less/update/components/sidebar.less @@ -345,7 +345,7 @@ width: 32px; align-self: center; } - .actor, .item, .journal, .table,{ + .actor, .item, .journal, .table { background: white; border: none; .entity-name { diff --git a/less/update/sw5e-dark.less b/less/update/sw5e-dark.less new file mode 100644 index 00000000..a6ef2c8f --- /dev/null +++ b/less/update/sw5e-dark.less @@ -0,0 +1,44 @@ +@import "_variables.less"; +@import "_variables-dark.less"; + +body.dark-theme { + .app { + background: @primaryBackground; + } + h1, + h2, + h3, + h4, + h5, + h6 { + color: @headingColor; + } + h3 { + border-bottom: 2px solid @headerBorderColor; + } + + a { + color: @linkColor; + text-decoration: none; + + &:hover, + &:active { + text-shadow: none; + text-decoration: underline; + } + } + + blockquote { + padding: 4px 8px; + background-color: @blockquoteBackground; + border: 1px solid @blockquoteBorder; + box-shadow: @blockquoteShadow; + } + + hr { + border-width: 0 0 1px 0; + border-bottom: 1px solid @hrColor; + } + @import "components/forms-themes.less"; + @import "components/sidebar-themes.less"; +} \ No newline at end of file diff --git a/less/update/sw5e-global.less b/less/update/sw5e-global.less new file mode 100644 index 00000000..c57abed3 --- /dev/null +++ b/less/update/sw5e-global.less @@ -0,0 +1,108 @@ +/* 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'); +} +@import "_variables.less"; + +html { + box-sizing: border-box; +} +*, *:before, *:after { + box-sizing: inherit; +} +// ::-webkit-scrollbar { +// width: 6px; +// height: 6px; +// } +::-webkit-scrollbar-track { + border: 1px solid @colorBlue; + border-radius: 4px; +} +::-webkit-scrollbar-thumb { + outline: none; + border-radius: 4px; + background: @colorBlue; + border: none; +} +:root { + scrollbar-width: thin; + scrollbar-color: @colorBlue @colorPaleBlue; +} + +body { + .openSans(13px, 400); +} + +h1 { + .russoOne(34px); +} +h2 { + .russoOne(27px); +} +h3 { + .russoOne(21px); +} +h4 { + .russoOne(17px); +} +h5, h6 { + .russoOne(13px); +} + +a { + text-decoration: none; + &:hover, &:active { + text-shadow: none; + text-decoration: underline; + } +} + +.app { + border: none;// 1px solid @colorBlue; + .dropShadow1(); +} +#pause h3 { + border-bottom: 0; +} +@import "components/forms-global.less"; +@import "components/sidebar-global.less"; \ No newline at end of file diff --git a/less/update/sw5e-light.less b/less/update/sw5e-light.less new file mode 100644 index 00000000..1565c4c3 --- /dev/null +++ b/less/update/sw5e-light.less @@ -0,0 +1,44 @@ +@import "_variables.less"; +@import "_variables-light.less"; + +body.light-theme { + .app { + background: @primaryBackground; + } + h1, + h2, + h3, + h4, + h5, + h6 { + color: @headingColor; + } + h3 { + border-bottom: 2px solid @headerBorderColor; + } + + a { + color: @linkColor; + text-decoration: none; + + &:hover, + &:active { + text-shadow: none; + text-decoration: underline; + } + } + + blockquote { + padding: 4px 8px; + background-color: @blockquoteBackground; + border: 1px solid @blockquoteBorder; + box-shadow: @blockquoteShadow; + } + + hr { + border-width: 0 0 1px 0; + border-bottom: 1px solid @hrColor; + } + @import "components/forms-themes.less"; + @import "components/sidebar-themes.less"; +} \ No newline at end of file diff --git a/less/update/sw5e-update.less b/less/update/sw5e-update.less index ca8bacef..15b7badd 100644 --- a/less/update/sw5e-update.less +++ b/less/update/sw5e-update.less @@ -1,49 +1,6 @@ @import "variables.less"; -html { - box-sizing: border-box; -} -*, *:before, *:after { - box-sizing: inherit; -} -// ::-webkit-scrollbar { -// width: 6px; -// height: 6px; -// } -::-webkit-scrollbar-track { - border: 1px solid @colorBlue; - border-radius: 4px; -} -::-webkit-scrollbar-thumb { - outline: none; - border-radius: 4px; - background: @colorBlue; - border: none; -} -:root { - scrollbar-width: thin; - scrollbar-color: @colorBlue @colorPaleBlue; -} -body { - .openSans(13px, 400); -} - -h1 { - .russoOne(34px); -} -h2 { - .russoOne(27px); -} -h3 { - .russoOne(21px); -} -h4 { - .russoOne(17px); -} -h5, h6 { - .russoOne(13px); -} a { color: @colorRed; diff --git a/module/settings.js b/module/settings.js index 5c40216b..f7c6c8a4 100644 --- a/module/settings.js +++ b/module/settings.js @@ -142,4 +142,16 @@ export const registerSystemSettings = function() { transformTokens: true } }); + game.settings.register("sw5e", "colorTheme", { + name: "SETTINGS.SWColorN", + hint: "SETTINGS.SWColorL", + scope: "world", + config: true, + default: "light", + type: String, + choices: { + "light": "SETTINGS.SWColorLight", + "dark": "SETTINGS.SWColorDark" + } + }); }; diff --git a/sw5e-dark.css b/sw5e-dark.css new file mode 100644 index 00000000..f001dade --- /dev/null +++ b/sw5e-dark.css @@ -0,0 +1,365 @@ +/* ----------------------------------------- */ +/* Fonts */ +/* ----------------------------------------- */ +/* ----------------------------------------- */ +/* Sheet Styles */ +/* ----------------------------------------- */ +body.dark-theme { + /*----------- +** Chat Tab +-----------*/ + /*----------- +** Combat Tab +-----------*/ + /* +** Folders +*/ +} +body.dark-theme .app { + background: linear-gradient(90deg, #626262 0, #4d4d4d 30%, #4d4d4d 70%, #626262); +} +body.dark-theme h1, +body.dark-theme h2, +body.dark-theme h3, +body.dark-theme h4, +body.dark-theme h5, +body.dark-theme h6 { + color: #E81111; +} +body.dark-theme h3 { + border-bottom: 2px solid #0d99cc; +} +body.dark-theme a { + color: #E81111; + text-decoration: none; +} +body.dark-theme a:hover, +body.dark-theme a:active { + text-shadow: none; + text-decoration: underline; +} +body.dark-theme blockquote { + padding: 4px 8px; + background-color: #FBF4F4; + border: 1px solid #E81111; + box-shadow: 0 0 20px rgba(232, 17, 17, 0.8); +} +body.dark-theme hr { + border-width: 0 0 1px 0; + border-bottom: 1px solid #0d99cc; +} +body.dark-theme input[type="text"], +body.dark-theme input[type="number"], +body.dark-theme input[type="password"], +body.dark-theme input[type="date"], +body.dark-theme input[type="time"], +body.dark-theme select, +body.dark-theme textarea { + border: 1px solid #828282; + color: white; +} +body.dark-theme input[type="text"]:hover, +body.dark-theme input[type="number"]:hover, +body.dark-theme input[type="password"]:hover, +body.dark-theme input[type="date"]:hover, +body.dark-theme input[type="time"]:hover, +body.dark-theme select:hover, +body.dark-theme textarea:hover { + border-color: #4f4f4f; +} +body.dark-theme input[type="text"]:focus, +body.dark-theme input[type="number"]:focus, +body.dark-theme input[type="password"]:focus, +body.dark-theme input[type="date"]:focus, +body.dark-theme input[type="time"]:focus, +body.dark-theme select:focus, +body.dark-theme textarea:focus { + border-color: #E81111; +} +body.dark-theme button, +body.dark-theme input[type="button"], +body.dark-theme input[type="submit"], +body.dark-theme input[type="reset"] { + background: #E81111; + color: white; +} +body.dark-theme button:hover, +body.dark-theme input[type="button"]:hover, +body.dark-theme input[type="submit"]:hover, +body.dark-theme input[type="reset"]:hover, +body.dark-theme button:focus, +body.dark-theme input[type="button"]:focus, +body.dark-theme input[type="submit"]:focus, +body.dark-theme input[type="reset"]:focus { + background: #ef2424; +} +body.dark-theme button:disabled:hover, +body.dark-theme input[type="button"]:disabled:hover, +body.dark-theme input[type="submit"]:disabled:hover, +body.dark-theme input[type="reset"]:disabled:hover, +body.dark-theme button:disabled:focus, +body.dark-theme input[type="button"]:disabled:focus, +body.dark-theme input[type="submit"]:disabled:focus, +body.dark-theme input[type="reset"]:disabled:focus { + background: #E81111; +} +body.dark-theme input[type="reset"], +body.dark-theme button.secondary, +body.dark-theme button[type="reset"], +body.dark-theme input[type="button"].secondary, +body.dark-theme input[type="submit"].secondary { + background: #828282; + color: white; +} +body.dark-theme input[type="reset"]:hover, +body.dark-theme button.secondary:hover, +body.dark-theme button[type="reset"]:hover, +body.dark-theme input[type="button"].secondary:hover, +body.dark-theme input[type="submit"].secondary:hover { + background: #8f8f8f; +} +body.dark-theme input[type="reset"]:disabled:hover, +body.dark-theme button.secondary:disabled:hover, +body.dark-theme button[type="reset"]:disabled:hover, +body.dark-theme input[type="button"].secondary:disabled:hover, +body.dark-theme input[type="submit"].secondary:disabled:hover, +body.dark-theme input[type="reset"]:disabled:focus, +body.dark-theme button.secondary:disabled:focus, +body.dark-theme button[type="reset"]:disabled:focus, +body.dark-theme input[type="button"].secondary:disabled:focus, +body.dark-theme input[type="submit"].secondary:disabled:focus { + background: #828282; +} +body.dark-theme #sidebar-tabs { + background: #2b2b2b; +} +body.dark-theme #sidebar-tabs > .collapse { + color: #E81111; +} +body.dark-theme #sidebar-tabs .item.active { + color: #E81111; + border-bottom: 3px solid #E81111; +} +body.dark-theme #chat-log .chat-message { + background: #363636; + color: white; +} +body.dark-theme #chat-log .chat-message > header { + color: #E81111; + border-bottom: 2px solid #0d99cc; +} +body.dark-theme #chat-log .chat-message > header span { + color: white; +} +body.dark-theme .notification-pip { + color: #0d99cc; +} +body.dark-theme .sw5e.chat-card .card-header h3 { + color: white; +} +body.dark-theme .sw5e.chat-card .card-header h3:hover { + color: white; +} +body.dark-theme .sw5e.chat-card .card-buttons span { + border: 1px solid #828282; +} +body.dark-theme .sw5e.chat-card .card-footer { + border-top: 1px solid #7ed6f7; +} +body.dark-theme .sw5e.chat-card .card-footer span { + border-right: 1px solid #D6D6D6; +} +body.dark-theme .sw5e.chat-card .card-footer span:last-child { + border-right: none; +} +body.dark-theme .dice-roll .dice-formula { + background: #4f4f4f; + color: white; + box-shadow: none; + border-radius: 4px; +} +body.dark-theme .dice-roll .dice-total { + background: #FBF4F4; + border: 1px solid #E81111; + box-shadow: 0 0 12px rgba(232, 17, 17, 0.8); +} +body.dark-theme .dice-roll .dice-total.success { + color: #0dce0d; +} +body.dark-theme .dice-roll .dice-total.failure { + color: #E81111; +} +body.dark-theme .dice-roll .dice-total.critical { + color: #0dce0d; + background: #bcdcbe; + box-shadow: 0 0 12px rgba(13, 206, 13, 0.5); +} +body.dark-theme .dice-roll .dice-total.fumble { + color: #E81111; + background: #FBF4F4; + box-shadow: 0 0 12px rgba(232, 17, 17, 0.5); +} +body.dark-theme #chat-controls .roll-type-select { + background: #363636; +} +body.dark-theme #chat-controls label { + color: white; +} +body.dark-theme #chat-form textarea { + background: #363636; +} +body.dark-theme #combat #combat-round { + color: #E81111; + border-bottom: 2px solid #E81111; +} +body.dark-theme #combat #combat-round .encounters h4 { + color: #E81111; +} +body.dark-theme #combat #combat-round .encounters a { + color: #D6D6D6; +} +body.dark-theme #combat #combat-round .encounters a:hover { + color: #E81111; +} +body.dark-theme #combat #combat-tracker li.combatant { + color: white; +} +body.dark-theme #combat #combat-tracker li.combatant:nth-child(even) { + background: rgba(79, 79, 79, 0.5); +} +body.dark-theme #combat #combat-tracker li.combatant h4 { + color: white; +} +body.dark-theme #combat #combat-tracker li.combatant .roll { + color: #D6D6D6; +} +body.dark-theme #combat #combat-tracker li.combatant .roll:hover { + color: #E81111; +} +body.dark-theme #combat #combat-tracker li.combatant .combatant-control { + color: #D6D6D6; +} +body.dark-theme #combat #combat-tracker li.combatant .combatant-control.active { + color: #E81111; +} +body.dark-theme #combat #combat-tracker li.combatant .token-resource { + color: white; + border-right: 1px solid #828282; +} +body.dark-theme #combat #combat-tracker li.combatant.active { + color: #0d99cc; +} +body.dark-theme #combat #combat-tracker li.combatant.active .initiative, +body.dark-theme #combat #combat-tracker li.combatant.active h4 { + color: #0d99cc; +} +body.dark-theme #combat #combat-tracker li.combatant.hidden { + color: white; +} +body.dark-theme #combat #combat-controls { + border-top: 1px solid #0d99cc; +} +body.dark-theme .sidebar-tab .directory-header .header-search i.fa-search { + color: #0d99cc; +} +body.dark-theme .sidebar-tab .directory-header .header-search input { + background: #363636; +} +body.dark-theme .sidebar-tab .subdirectory { + background: #2b2b2b; +} +body.dark-theme .sidebar-tab .subdirectory .folder { + border-left: 2px solid rgba(130, 130, 130, 0.4); +} +body.dark-theme .sidebar-tab .directory-list li + li { + border-top: 1px solid #0d99cc; +} +body.dark-theme .sidebar-tab .directory-list .folder > .folder-header { + background: #2b2b2b; +} +body.dark-theme .sidebar-tab .directory-list .folder > .folder-header h3 { + background: #2b2b2b; + color: white; +} +body.dark-theme .sidebar-tab .directory-list .folder > .folder-header h3 > i { + color: #0d99cc; +} +body.dark-theme .sidebar-tab .directory-list .folder > .folder-header a { + color: #D6D6D6; +} +body.dark-theme .sidebar-tab .directory-list .folder > .folder-header a:hover { + color: #E81111; +} +body.dark-theme .sidebar-tab .directory-list .folder.collapsed > .folder-header { + background: #2b2b2b; +} +body.dark-theme .sidebar-tab .directory-list .folder + .entity { + border-top: 1px solid #0d99cc; +} +body.dark-theme .sidebar-tab .directory-list .actor, +body.dark-theme .sidebar-tab .directory-list .item, +body.dark-theme .sidebar-tab .directory-list .journal, +body.dark-theme .sidebar-tab .directory-list .table { + background: #2b2b2b; +} +body.dark-theme .sidebar-tab .directory-list .actor .entity-name, +body.dark-theme .sidebar-tab .directory-list .item .entity-name, +body.dark-theme .sidebar-tab .directory-list .journal .entity-name, +body.dark-theme .sidebar-tab .directory-list .table .entity-name { + color: #1C1C1C; +} +body.dark-theme .sidebar-tab .directory-list .actor:nth-child(even), +body.dark-theme .sidebar-tab .directory-list .item:nth-child(even), +body.dark-theme .sidebar-tab .directory-list .journal:nth-child(even), +body.dark-theme .sidebar-tab .directory-list .table:nth-child(even) { + background: rgba(79, 79, 79, 0.3); +} +body.dark-theme #scenes .scene { + border-top: 1px solid #0d99cc; + border-left: 4px solid #0d99cc; +} +body.dark-theme #scenes .scene::after { + box-shadow: 0 0 20px #0d99cc inset; +} +body.dark-theme #scenes .scene h3 { + background: #2b2b2b; +} +body.dark-theme #playlists .directory-list li.playlist { + background: #2b2b2b; +} +body.dark-theme #playlists .directory-list li.playlist .playlist-header { + background: #2b2b2b; + color: #E81111; + border-bottom: 2px solid #0d99cc; +} +body.dark-theme #playlists .directory-list li.playlist li.sound { + color: #1C1C1C; +} +body.dark-theme #playlists .directory-list li.playlist a.sound-control { + color: #E81111; +} +body.dark-theme #compendium .compendium-entity { + background: #2b2b2b !important; +} +body.dark-theme #compendium .compendium-entity h3 { + border-bottom: 2px solid #0d99cc; +} +body.dark-theme #compendium .compendium-entity ol.compendium-list li.compendium-pack:nth-child(even) { + background: rgba(79, 79, 79, 0.3); +} +body.dark-theme #compendium .compendium-entity ol.compendium-list li.compendium-pack .pack-title .status-icons { + color: #828282; +} +body.dark-theme #compendium .compendium-entity ol.compendium-list li.compendium-pack footer.compendium-footer { + color: white; +} +body.dark-theme #settings h2 { + color: #E81111; + border-bottom: 2px solid #0d99cc; +} +body.dark-theme #settings #game-details, +body.dark-theme #settings #settings-game, +body.dark-theme #settings #settings-documentation, +body.dark-theme #settings #settings-access { + color: white; +} diff --git a/sw5e-global.css b/sw5e-global.css new file mode 100644 index 00000000..e9955e1b --- /dev/null +++ b/sw5e-global.css @@ -0,0 +1,598 @@ +/* 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; +} diff --git a/sw5e-light.css b/sw5e-light.css new file mode 100644 index 00000000..a6b84694 --- /dev/null +++ b/sw5e-light.css @@ -0,0 +1,365 @@ +/* ----------------------------------------- */ +/* Fonts */ +/* ----------------------------------------- */ +/* ----------------------------------------- */ +/* Sheet Styles */ +/* ----------------------------------------- */ +body.light-theme { + /*----------- +** Chat Tab +-----------*/ + /*----------- +** Combat Tab +-----------*/ + /* +** Folders +*/ +} +body.light-theme .app { + background: linear-gradient(90deg, #afc6d6 0, #d6d6d6 30%, #d6d6d6 70%, #afc6d6); +} +body.light-theme h1, +body.light-theme h2, +body.light-theme h3, +body.light-theme h4, +body.light-theme h5, +body.light-theme h6 { + color: #c40f0f; +} +body.light-theme h3 { + border-bottom: 2px solid #0d99cc; +} +body.light-theme a { + color: #c40f0f; + text-decoration: none; +} +body.light-theme a:hover, +body.light-theme a:active { + text-shadow: none; + text-decoration: underline; +} +body.light-theme blockquote { + padding: 4px 8px; + background-color: #afc6d6; + border: 1px solid #0d99cc; + box-shadow: 0 0 20px rgba(13, 153, 204, 0.8); +} +body.light-theme hr { + border-width: 0 0 1px 0; + border-bottom: 1px solid #0d99cc; +} +body.light-theme input[type="text"], +body.light-theme input[type="number"], +body.light-theme input[type="password"], +body.light-theme input[type="date"], +body.light-theme input[type="time"], +body.light-theme select, +body.light-theme textarea { + border: 1px solid #828282; + color: #1C1C1C; +} +body.light-theme input[type="text"]:hover, +body.light-theme input[type="number"]:hover, +body.light-theme input[type="password"]:hover, +body.light-theme input[type="date"]:hover, +body.light-theme input[type="time"]:hover, +body.light-theme select:hover, +body.light-theme textarea:hover { + border-color: #4f4f4f; +} +body.light-theme input[type="text"]:focus, +body.light-theme input[type="number"]:focus, +body.light-theme input[type="password"]:focus, +body.light-theme input[type="date"]:focus, +body.light-theme input[type="time"]:focus, +body.light-theme select:focus, +body.light-theme textarea:focus { + border-color: #c40f0f; +} +body.light-theme button, +body.light-theme input[type="button"], +body.light-theme input[type="submit"], +body.light-theme input[type="reset"] { + background: #c40f0f; + color: white; +} +body.light-theme button:hover, +body.light-theme input[type="button"]:hover, +body.light-theme input[type="submit"]:hover, +body.light-theme input[type="reset"]:hover, +body.light-theme button:focus, +body.light-theme input[type="button"]:focus, +body.light-theme input[type="submit"]:focus, +body.light-theme input[type="reset"]:focus { + background: #dc1111; +} +body.light-theme button:disabled:hover, +body.light-theme input[type="button"]:disabled:hover, +body.light-theme input[type="submit"]:disabled:hover, +body.light-theme input[type="reset"]:disabled:hover, +body.light-theme button:disabled:focus, +body.light-theme input[type="button"]:disabled:focus, +body.light-theme input[type="submit"]:disabled:focus, +body.light-theme input[type="reset"]:disabled:focus { + background: #c40f0f; +} +body.light-theme input[type="reset"], +body.light-theme button.secondary, +body.light-theme button[type="reset"], +body.light-theme input[type="button"].secondary, +body.light-theme input[type="submit"].secondary { + background: #D6D6D6; + color: #1C1C1C; +} +body.light-theme input[type="reset"]:hover, +body.light-theme button.secondary:hover, +body.light-theme button[type="reset"]:hover, +body.light-theme input[type="button"].secondary:hover, +body.light-theme input[type="submit"].secondary:hover { + background: #e3e3e3; +} +body.light-theme input[type="reset"]:disabled:hover, +body.light-theme button.secondary:disabled:hover, +body.light-theme button[type="reset"]:disabled:hover, +body.light-theme input[type="button"].secondary:disabled:hover, +body.light-theme input[type="submit"].secondary:disabled:hover, +body.light-theme input[type="reset"]:disabled:focus, +body.light-theme button.secondary:disabled:focus, +body.light-theme button[type="reset"]:disabled:focus, +body.light-theme input[type="button"].secondary:disabled:focus, +body.light-theme input[type="submit"].secondary:disabled:focus { + background: #D6D6D6; +} +body.light-theme #sidebar-tabs { + background: white; +} +body.light-theme #sidebar-tabs > .collapse { + color: #c40f0f; +} +body.light-theme #sidebar-tabs .item.active { + color: #c40f0f; + border-bottom: 3px solid #c40f0f; +} +body.light-theme #chat-log .chat-message { + background: white; + color: #1C1C1C; +} +body.light-theme #chat-log .chat-message > header { + color: #c40f0f; + border-bottom: 2px solid #0d99cc; +} +body.light-theme #chat-log .chat-message > header span { + color: #1C1C1C; +} +body.light-theme .notification-pip { + color: #0d99cc; +} +body.light-theme .sw5e.chat-card .card-header h3 { + color: #1C1C1C; +} +body.light-theme .sw5e.chat-card .card-header h3:hover { + color: #1C1C1C; +} +body.light-theme .sw5e.chat-card .card-buttons span { + border: 1px solid #828282; +} +body.light-theme .sw5e.chat-card .card-footer { + border-top: 1px solid #7ed6f7; +} +body.light-theme .sw5e.chat-card .card-footer span { + border-right: 1px solid #D6D6D6; +} +body.light-theme .sw5e.chat-card .card-footer span:last-child { + border-right: none; +} +body.light-theme .dice-roll .dice-formula { + background: #D6D6D6; + color: #1C1C1C; + box-shadow: none; + border-radius: 4px; +} +body.light-theme .dice-roll .dice-total { + background: #afc6d6; + border: 1px solid #0d99cc; + box-shadow: 0 0 12px rgba(13, 153, 204, 0.8); +} +body.light-theme .dice-roll .dice-total.success { + color: #0dce0d; +} +body.light-theme .dice-roll .dice-total.failure { + color: #c40f0f; +} +body.light-theme .dice-roll .dice-total.critical { + color: #0dce0d; + background: #bcdcbe; + box-shadow: 0 0 12px rgba(13, 206, 13, 0.5); +} +body.light-theme .dice-roll .dice-total.fumble { + color: #c40f0f; + background: #FBF4F4; + box-shadow: 0 0 12px rgba(196, 15, 15, 0.5); +} +body.light-theme #chat-controls .roll-type-select { + background: white; +} +body.light-theme #chat-controls label { + color: #1C1C1C; +} +body.light-theme #chat-form textarea { + background: white; +} +body.light-theme #combat #combat-round { + color: #c40f0f; + border-bottom: 2px solid #c40f0f; +} +body.light-theme #combat #combat-round .encounters h4 { + color: #c40f0f; +} +body.light-theme #combat #combat-round .encounters a { + color: #4f4f4f; +} +body.light-theme #combat #combat-round .encounters a:hover { + color: #c40f0f; +} +body.light-theme #combat #combat-tracker li.combatant { + color: #1C1C1C; +} +body.light-theme #combat #combat-tracker li.combatant:nth-child(even) { + background: rgba(175, 198, 214, 0.5); +} +body.light-theme #combat #combat-tracker li.combatant h4 { + color: #1C1C1C; +} +body.light-theme #combat #combat-tracker li.combatant .roll { + color: #4f4f4f; +} +body.light-theme #combat #combat-tracker li.combatant .roll:hover { + color: #c40f0f; +} +body.light-theme #combat #combat-tracker li.combatant .combatant-control { + color: #828282; +} +body.light-theme #combat #combat-tracker li.combatant .combatant-control.active { + color: #363636; +} +body.light-theme #combat #combat-tracker li.combatant .token-resource { + color: #4f4f4f; + border-right: 1px solid #828282; +} +body.light-theme #combat #combat-tracker li.combatant.active { + color: #0d99cc; +} +body.light-theme #combat #combat-tracker li.combatant.active .initiative, +body.light-theme #combat #combat-tracker li.combatant.active h4 { + color: #0d99cc; +} +body.light-theme #combat #combat-tracker li.combatant.hidden { + color: #1C1C1C; +} +body.light-theme #combat #combat-controls { + border-top: 1px solid #0d99cc; +} +body.light-theme .sidebar-tab .directory-header .header-search i.fa-search { + color: #0d99cc; +} +body.light-theme .sidebar-tab .directory-header .header-search input { + background: white; +} +body.light-theme .sidebar-tab .subdirectory { + background: white; +} +body.light-theme .sidebar-tab .subdirectory .folder { + border-left: 2px solid rgba(28, 28, 28, 0.4); +} +body.light-theme .sidebar-tab .directory-list li + li { + border-top: 1px solid #0d99cc; +} +body.light-theme .sidebar-tab .directory-list .folder > .folder-header { + background: white; +} +body.light-theme .sidebar-tab .directory-list .folder > .folder-header h3 { + background: white; + color: #1C1C1C; +} +body.light-theme .sidebar-tab .directory-list .folder > .folder-header h3 > i { + color: #0d99cc; +} +body.light-theme .sidebar-tab .directory-list .folder > .folder-header a { + color: #4f4f4f; +} +body.light-theme .sidebar-tab .directory-list .folder > .folder-header a:hover { + color: #c40f0f; +} +body.light-theme .sidebar-tab .directory-list .folder.collapsed > .folder-header { + background: white; +} +body.light-theme .sidebar-tab .directory-list .folder + .entity { + border-top: 1px solid #0d99cc; +} +body.light-theme .sidebar-tab .directory-list .actor, +body.light-theme .sidebar-tab .directory-list .item, +body.light-theme .sidebar-tab .directory-list .journal, +body.light-theme .sidebar-tab .directory-list .table { + background: white; +} +body.light-theme .sidebar-tab .directory-list .actor .entity-name, +body.light-theme .sidebar-tab .directory-list .item .entity-name, +body.light-theme .sidebar-tab .directory-list .journal .entity-name, +body.light-theme .sidebar-tab .directory-list .table .entity-name { + color: #1C1C1C; +} +body.light-theme .sidebar-tab .directory-list .actor:nth-child(even), +body.light-theme .sidebar-tab .directory-list .item:nth-child(even), +body.light-theme .sidebar-tab .directory-list .journal:nth-child(even), +body.light-theme .sidebar-tab .directory-list .table:nth-child(even) { + background: rgba(175, 198, 214, 0.3); +} +body.light-theme #scenes .scene { + border-top: 1px solid #0d99cc; + border-left: 4px solid #0d99cc; +} +body.light-theme #scenes .scene::after { + box-shadow: 0 0 20px #0d99cc inset; +} +body.light-theme #scenes .scene h3 { + background: white; +} +body.light-theme #playlists .directory-list li.playlist { + background: white; +} +body.light-theme #playlists .directory-list li.playlist .playlist-header { + background: white; + color: #c40f0f; + border-bottom: 2px solid #0d99cc; +} +body.light-theme #playlists .directory-list li.playlist li.sound { + color: #1C1C1C; +} +body.light-theme #playlists .directory-list li.playlist a.sound-control { + color: #c40f0f; +} +body.light-theme #compendium .compendium-entity { + background: white !important; +} +body.light-theme #compendium .compendium-entity h3 { + border-bottom: 2px solid #0d99cc; +} +body.light-theme #compendium .compendium-entity ol.compendium-list li.compendium-pack:nth-child(even) { + background: rgba(175, 198, 214, 0.3); +} +body.light-theme #compendium .compendium-entity ol.compendium-list li.compendium-pack .pack-title .status-icons { + color: #828282; +} +body.light-theme #compendium .compendium-entity ol.compendium-list li.compendium-pack footer.compendium-footer { + color: #1C1C1C; +} +body.light-theme #settings h2 { + color: #c40f0f; + border-bottom: 2px solid #0d99cc; +} +body.light-theme #settings #game-details, +body.light-theme #settings #settings-game, +body.light-theme #settings #settings-documentation, +body.light-theme #settings #settings-access { + color: #1C1C1C; +} diff --git a/sw5e.js b/sw5e.js index 64a16371..a1d763da 100644 --- a/sw5e.js +++ b/sw5e.js @@ -159,6 +159,9 @@ Hooks.once("setup", function() { } // add DND5E translation for module compatability game.i18n.translations.DND5E = game.i18n.translations.SW5E; + // console.log(game.settings.get("sw5e", "colorTheme")); + let theme = game.settings.get("sw5e", "colorTheme") + '-theme'; + document.body.classList.add(theme); }); /* -------------------------------------------- */ diff --git a/system.json b/system.json index 4c35a245..c6ce8988 100644 --- a/system.json +++ b/system.json @@ -6,7 +6,7 @@ "author": "Dev Team", "scripts": [], "esmodules": ["sw5e.js"], - "styles": ["sw5e.css", "sw5e-update.css"], + "styles": ["sw5e.css", "sw5e-global.css", "sw5e-light.css", "sw5e-dark.css"], "packs": [ { "name": "adventuringgear",