diff --git a/fonts/Aurebesh.ttf b/fonts/Aurebesh.ttf new file mode 100644 index 00000000..82e0cf5b Binary files /dev/null and b/fonts/Aurebesh.ttf differ diff --git a/less/update/_variables-dark.less b/less/update/_variables-dark.less index c8616206..db200f10 100644 --- a/less/update/_variables-dark.less +++ b/less/update/_variables-dark.less @@ -37,9 +37,13 @@ @tableRowHoverBackground: lighten(@colorLightGray, 10); @tableRowBorderColor: @colorLightGray; +//universalColors +@windowHeaderBackground: @colorDarkBg; +@windowHeaderLinkColor: @colorRed; + //Sidebar -@sidebarTabBackground: @colorDarkBg; -@sidebarTabLinkColor: @colorRed; +@sidebarTabBackground: @windowHeaderBackground; +@sidebarTabLinkColor: @windowHeaderLinkColor; @sidebarTabLinkUnderline: @colorRed; @chatBackground: @colorDarkGray; @@ -92,4 +96,18 @@ @playlistSoundColor: @colorBlack; @compendiumEntityBackground: @colorDarkBg; -@compendiumStatusIcon: @colorLightGray; \ No newline at end of file +@compendiumStatusIcon: @colorLightGray; + +@foundryNavBgColor: rgba(@colorLightBlue, 0.4); +@foundryNavTextColor: white; +@foundryNavBorderColor: @colorBlue; +@foundryNavBgColorGM: @colorBlue; +@foundryNavBorderColorGM: @colorPaleBlue; +@foundryNavSceneLinkColor: white; +@foundryNavActiveBgColor: rgba(@colorRed, 0.6); +@foundryNavActiveBorderColor: lighten(@colorRed, 20); +@foundryNavActiveGlow: darken(@colorRed, 20); +@foundryNavContextShadow: darken(@colorBlue, 20); +@foundryNavContextBorderColor: @colorBlue; + +@foundryPlayersArrowColor: @colorLightGray; \ No newline at end of file diff --git a/less/update/_variables-light.less b/less/update/_variables-light.less index 5465918d..dd46b2a6 100644 --- a/less/update/_variables-light.less +++ b/less/update/_variables-light.less @@ -34,10 +34,13 @@ @tableRowHoverBackground: lighten(@colorPaleGray, 10); @tableRowBorderColor: @colorPaleGray; +//universalColors +@windowHeaderBackground: white; +@windowHeaderLinkColor: @colorRed; //Sidebar -@sidebarTabBackground: white; -@sidebarTabLinkColor: @colorRed; +@sidebarTabBackground: @windowHeaderBackground; +@sidebarTabLinkColor: @windowHeaderLinkColor; @sidebarTabLinkUnderline: @colorRed; @chatBackground: white; @@ -90,4 +93,18 @@ @playlistSoundColor: @colorBlack; @compendiumEntityBackground: white; -@compendiumStatusIcon: @colorLightGray; \ No newline at end of file +@compendiumStatusIcon: @colorLightGray; + +@foundryNavBgColor: rgba(@colorLightBlue, 0.4); +@foundryNavTextColor: white; +@foundryNavBorderColor: @colorBlue; +@foundryNavBgColorGM: @colorBlue; +@foundryNavBorderColorGM: @colorPaleBlue; +@foundryNavSceneLinkColor: white; +@foundryNavActiveBgColor: rgba(@colorRed, 0.6); +@foundryNavActiveBorderColor: lighten(@colorRed, 20); +@foundryNavActiveGlow: darken(@colorRed, 20); +@foundryNavContextShadow: darken(@colorBlue, 20); +@foundryNavContextBorderColor: @colorBlue; + +@foundryPlayersArrowColor: @colorLightGray; \ No newline at end of file diff --git a/less/update/_variables.less b/less/update/_variables.less index 48558952..61855f1d 100644 --- a/less/update/_variables.less +++ b/less/update/_variables.less @@ -6,6 +6,7 @@ font-family: 'Russo One'; font-size: @size; font-weight: 400; + letter-spacing: 0.5px; } .openSans(@size: 13px, @weight: 400) { diff --git a/less/update/components/forms-themes.less b/less/update/components/forms-themes.less index 0c692b60..45ca5f2d 100644 --- a/less/update/components/forms-themes.less +++ b/less/update/components/forms-themes.less @@ -7,6 +7,14 @@ input[type="text"], input[type="number"], input[type="password"], input[type="da &:focus { border-color: @inputBorderFocus; } + &::placeholder { + color: @inputTextColor; + opacity: 0.5; + } + ::-ms-input-placeholder { /* Microsoft Edge */ + color: @inputTextColor; + opacity: 0.5; + } } button, input[type="button"], input[type="submit"], input[type="reset"] { @@ -33,4 +41,13 @@ input[type="reset"], button.secondary, button[type="reset"], input[type="button" background: @buttonSecondaryBackground; } } +} + +form { + button { + border: none; + } + .notes, .hint { + color: rgba(@bodyFontColor, 0.8); + } } \ No newline at end of file diff --git a/less/update/components/foundry-app-window-themes.less b/less/update/components/foundry-app-window-themes.less new file mode 100644 index 00000000..c43a1834 --- /dev/null +++ b/less/update/components/foundry-app-window-themes.less @@ -0,0 +1,42 @@ +.window-app { + border-radius: 4px; + border: none; + .dropShadow2(); + header { + background: @windowHeaderBackground; + border-radius: 4px 4px 0 0; + border: none; + .dropShadow1(); + margin-bottom: 4px; + } + .window-content { + background: @primaryBackground; + color: @bodyFontColor; + footer { + margin-top: 8px; + } + } +} + +#client-settings { + nav.tabs { + border: none; + font-size: 17px; + line-height: 1.6; + a.item { + border-bottom: 3px solid transparent; + color: @bodyFontColor; + &:hover { + text-decoration: none; + } + &.active { + text-shadow: none; + border-bottom-color: @sidebarTabLinkUnderline; + } + } + } + section.content { + border: none; + margin-top: 4px; + } +} \ No newline at end of file diff --git a/less/update/components/foundry-nav-themes.less b/less/update/components/foundry-nav-themes.less new file mode 100644 index 00000000..daa1a47a --- /dev/null +++ b/less/update/components/foundry-nav-themes.less @@ -0,0 +1,82 @@ +#navigation { + #nav-toggle { + background: @foundryNavBgColor; + color: @foundryNavTextColor; + .nav-item { + transform: rotate(-90deg); + } + } + .nav-item { + border: 1px solid @foundryNavBorderColor; + } + #scene-list { + .scene { + border: 1px solid @foundryNavBorderColor; + background: rgba(@foundryNavBgColor, 0.4); + a { + color: @foundryNavSceneLinkColor; + } + &.gm { + border: 1px solid @foundryNavBorderColorGM; + background: rgba(@foundryNavBgColorGM, 0.4); + } + &.view, &.context { + box-shadow: 0 0 8px @foundryNavContextShadow; + border-color: @foundryNavContextBorderColor; + } + &.active { + border-color: @foundryNavActiveBorderColor; + background: @foundryNavActiveBgColor; + box-shadow: 0 0 8px @foundryNavActiveGlow; + } + } + } +} +#controls { + .scene-control, .control-tool { + background: @foundryNavBgColor; + color: @foundryNavTextColor; + border: 1px solid @foundryNavBorderColor; + box-shadow: none; + &:hover { + box-shadow: 0 0 8px @foundryNavContextShadow; + } + &.active { + border-color: @foundryNavActiveBorderColor; + background: @foundryNavActiveBgColor; + box-shadow: 0 0 8px @foundryNavActiveGlow; + } + } +} +#players { + border: none; + border-radius: 4px; + h3 { + background: @sidebarTabBackground; + border: none; + margin: 0; + padding: 8px; + font-size: 17px; + .dropShadow1(); + border-radius: 4px 4px 0 0; + .players-mode { + color: @foundryPlayersArrowColor; + } + } + ol { + margin: 4px 0; + .player-name.self { + color: inherit; + font-weight: 700; + } + .player { + color: @bodyFontColor; + } + .player-active { + margin-top: 7px; + &.active { + box-shadow: none; + } + } + } +} \ No newline at end of file diff --git a/less/update/sw5e-dark.less b/less/update/sw5e-dark.less index a6ef2c8f..49b59659 100644 --- a/less/update/sw5e-dark.less +++ b/less/update/sw5e-dark.less @@ -41,4 +41,6 @@ body.dark-theme { } @import "components/forms-themes.less"; @import "components/sidebar-themes.less"; + @import "components/foundry-nav-themes.less"; + @import "components/foundry-app-window-themes.less"; } \ No newline at end of file diff --git a/less/update/sw5e-global.less b/less/update/sw5e-global.less index c57abed3..d32716d1 100644 --- a/less/update/sw5e-global.less +++ b/less/update/sw5e-global.less @@ -42,6 +42,12 @@ font-weight: 700; src: url('./fonts/RussoOne.ttf'); } +@font-face { + font-family: 'Aurebesh'; + font-style: normal; + font-weight: 400; + src: url('./fonts/Aurebesh.ttf'); +} @import "_variables.less"; html { @@ -101,8 +107,77 @@ a { border: none;// 1px solid @colorBlue; .dropShadow1(); } -#pause h3 { - border-bottom: 0; +#pause { + img {display: none;} + background: none; + height: 128px; + &::before { + content: ''; + position: absolute; + top: 0; + margin-left: -64px; + left: 50%; + width: 128px; + height: 128px; + background: url("ui/pause-inner.svg") no-repeat 50% 50%; + animation-name: pause-spin; + animation-duration: 10000ms; + animation-iteration-count: infinite; + animation-timing-function: linear; + } + &::after { + content: ''; + position: absolute; + top: 0; + margin-left: -64px; + left: 50%; + width: 128px; + height: 128px; + background: url("ui/pause-outer.svg") no-repeat 50% 50%; + animation-name: pause-spin; + animation-duration: 5000ms; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-direction: reverse; + } + h3 { + border-bottom: 0; + line-height: 1; + position: absolute; + top: 50%; + left: 50%; + width: 256px; + margin-left: -128px; + margin-top: -13px; + text-shadow: 0 0 24px @colorBlue; + &::before, &::after { + position: absolute; + font-family: "Aurebesh", sans-serif; + font-size: 13px; + color: @colorBlack; + animation: none; + opacity: 0.7; + } + &::before { + content: "GAME"; + top: -13px; + left: 42px; + } + &::after { + content: "PAUSED"; + bottom: -13px; + right: 42px; + } + } } @import "components/forms-global.less"; -@import "components/sidebar-global.less"; \ No newline at end of file +@import "components/sidebar-global.less"; + +@keyframes pause-spin { + from { + transform:rotate(0deg); + } + to { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/less/update/sw5e-light.less b/less/update/sw5e-light.less index 1565c4c3..9f17669a 100644 --- a/less/update/sw5e-light.less +++ b/less/update/sw5e-light.less @@ -41,4 +41,6 @@ body.light-theme { } @import "components/forms-themes.less"; @import "components/sidebar-themes.less"; + @import "components/foundry-nav-themes.less"; + @import "components/foundry-app-window-themes.less"; } \ No newline at end of file diff --git a/sw5e-dark.css b/sw5e-dark.css index f001dade..d3d18263 100644 --- a/sw5e-dark.css +++ b/sw5e-dark.css @@ -76,6 +76,27 @@ body.dark-theme select:focus, body.dark-theme textarea:focus { border-color: #E81111; } +body.dark-theme input[type="text"]::placeholder, +body.dark-theme input[type="number"]::placeholder, +body.dark-theme input[type="password"]::placeholder, +body.dark-theme input[type="date"]::placeholder, +body.dark-theme input[type="time"]::placeholder, +body.dark-theme select::placeholder, +body.dark-theme textarea::placeholder { + color: white; + opacity: 0.5; +} +body.dark-theme input[type="text"] ::-ms-input-placeholder, +body.dark-theme input[type="number"] ::-ms-input-placeholder, +body.dark-theme input[type="password"] ::-ms-input-placeholder, +body.dark-theme input[type="date"] ::-ms-input-placeholder, +body.dark-theme input[type="time"] ::-ms-input-placeholder, +body.dark-theme select ::-ms-input-placeholder, +body.dark-theme textarea ::-ms-input-placeholder { + /* Microsoft Edge */ + color: white; + opacity: 0.5; +} body.dark-theme button, body.dark-theme input[type="button"], body.dark-theme input[type="submit"], @@ -130,6 +151,13 @@ body.dark-theme input[type="button"].secondary:disabled:focus, body.dark-theme input[type="submit"].secondary:disabled:focus { background: #828282; } +body.dark-theme form button { + border: none; +} +body.dark-theme form .notes, +body.dark-theme form .hint { + color: rgba(255, 255, 255, 0.8); +} body.dark-theme #sidebar-tabs { background: #2b2b2b; } @@ -363,3 +391,122 @@ body.dark-theme #settings #settings-documentation, body.dark-theme #settings #settings-access { color: white; } +body.dark-theme #navigation #nav-toggle { + background: rgba(126, 214, 247, 0.4); + color: white; +} +body.dark-theme #navigation #nav-toggle .nav-item { + transform: rotate(-90deg); +} +body.dark-theme #navigation .nav-item { + border: 1px solid #0d99cc; +} +body.dark-theme #navigation #scene-list .scene { + border: 1px solid #0d99cc; + background: rgba(126, 214, 247, 0.4); +} +body.dark-theme #navigation #scene-list .scene a { + color: white; +} +body.dark-theme #navigation #scene-list .scene.gm { + border: 1px solid #afc6d6; + background: rgba(13, 153, 204, 0.4); +} +body.dark-theme #navigation #scene-list .scene.view, +body.dark-theme #navigation #scene-list .scene.context { + box-shadow: 0 0 8px #07516c; + border-color: #0d99cc; +} +body.dark-theme #navigation #scene-list .scene.active { + border-color: #f46b6b; + background: rgba(232, 17, 17, 0.6); + box-shadow: 0 0 8px #890a0a; +} +body.dark-theme #controls .scene-control, +body.dark-theme #controls .control-tool { + background: rgba(126, 214, 247, 0.4); + color: white; + border: 1px solid #0d99cc; + box-shadow: none; +} +body.dark-theme #controls .scene-control:hover, +body.dark-theme #controls .control-tool:hover { + box-shadow: 0 0 8px #07516c; +} +body.dark-theme #controls .scene-control.active, +body.dark-theme #controls .control-tool.active { + border-color: #f46b6b; + background: rgba(232, 17, 17, 0.6); + box-shadow: 0 0 8px #890a0a; +} +body.dark-theme #players { + border: none; + border-radius: 4px; +} +body.dark-theme #players h3 { + background: #2b2b2b; + border: none; + margin: 0; + padding: 8px; + font-size: 17px; + 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 4px 0 0; +} +body.dark-theme #players h3 .players-mode { + color: #828282; +} +body.dark-theme #players ol { + margin: 4px 0; +} +body.dark-theme #players ol .player-name.self { + color: inherit; + font-weight: 700; +} +body.dark-theme #players ol .player { + color: white; +} +body.dark-theme #players ol .player-active { + margin-top: 7px; +} +body.dark-theme #players ol .player-active.active { + box-shadow: none; +} +body.dark-theme .window-app { + border-radius: 4px; + border: none; + 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); +} +body.dark-theme .window-app header { + background: #2b2b2b; + border-radius: 4px 4px 0 0; + 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); + margin-bottom: 4px; +} +body.dark-theme .window-app .window-content { + background: linear-gradient(90deg, #626262 0, #4d4d4d 30%, #4d4d4d 70%, #626262); + color: white; +} +body.dark-theme .window-app .window-content footer { + margin-top: 8px; +} +body.dark-theme #client-settings nav.tabs { + border: none; + font-size: 17px; + line-height: 1.6; +} +body.dark-theme #client-settings nav.tabs a.item { + border-bottom: 3px solid transparent; + color: white; +} +body.dark-theme #client-settings nav.tabs a.item:hover { + text-decoration: none; +} +body.dark-theme #client-settings nav.tabs a.item.active { + text-shadow: none; + border-bottom-color: #E81111; +} +body.dark-theme #client-settings section.content { + border: none; + margin-top: 4px; +} diff --git a/sw5e-global.css b/sw5e-global.css index e9955e1b..59321129 100644 --- a/sw5e-global.css +++ b/sw5e-global.css @@ -42,6 +42,12 @@ font-weight: 700; src: url('./fonts/RussoOne.ttf'); } +@font-face { + font-family: 'Aurebesh'; + font-style: normal; + font-weight: 400; + src: url('./fonts/Aurebesh.ttf'); +} /* ----------------------------------------- */ /* Fonts */ /* ----------------------------------------- */ @@ -79,27 +85,32 @@ h1 { font-family: 'Russo One'; font-size: 34px; font-weight: 400; + letter-spacing: 0.5px; } h2 { font-family: 'Russo One'; font-size: 27px; font-weight: 400; + letter-spacing: 0.5px; } h3 { font-family: 'Russo One'; font-size: 21px; font-weight: 400; + letter-spacing: 0.5px; } h4 { font-family: 'Russo One'; font-size: 17px; font-weight: 400; + letter-spacing: 0.5px; } h5, h6 { font-family: 'Russo One'; font-size: 13px; font-weight: 400; + letter-spacing: 0.5px; } a { text-decoration: none; @@ -113,8 +124,71 @@ a:active { 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 { + background: none; + height: 128px; +} +#pause img { + display: none; +} +#pause::before { + content: ''; + position: absolute; + top: 0; + margin-left: -64px; + left: 50%; + width: 128px; + height: 128px; + background: url("ui/pause-inner.svg") no-repeat 50% 50%; + animation-name: pause-spin; + animation-duration: 10000ms; + animation-iteration-count: infinite; + animation-timing-function: linear; +} +#pause::after { + content: ''; + position: absolute; + top: 0; + margin-left: -64px; + left: 50%; + width: 128px; + height: 128px; + background: url("ui/pause-outer.svg") no-repeat 50% 50%; + animation-name: pause-spin; + animation-duration: 5000ms; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-direction: reverse; +} #pause h3 { border-bottom: 0; + line-height: 1; + position: absolute; + top: 50%; + left: 50%; + width: 256px; + margin-left: -128px; + margin-top: -13px; + text-shadow: 0 0 24px #0d99cc; +} +#pause h3::before, +#pause h3::after { + position: absolute; + font-family: "Aurebesh", sans-serif; + font-size: 13px; + color: #1C1C1C; + animation: none; + opacity: 0.7; +} +#pause h3::before { + content: "GAME"; + top: -13px; + left: 42px; +} +#pause h3::after { + content: "PAUSED"; + bottom: -13px; + right: 42px; } input[type="text"], input[type="number"], @@ -303,6 +377,7 @@ input[type="reset"]:disabled { font-family: 'Russo One'; font-size: 17px; font-weight: 400; + letter-spacing: 0.5px; border-bottom: none; } .sw5e.chat-card .card-header h3:hover { @@ -559,6 +634,7 @@ input[type="reset"]:disabled { font-family: 'Russo One'; font-size: 17px; font-weight: 400; + letter-spacing: 0.5px; padding: 0; margin-bottom: 4px; } @@ -596,3 +672,11 @@ input[type="reset"]:disabled { padding: 0 8px; margin: 0 0 8px; } +@keyframes pause-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/sw5e-light.css b/sw5e-light.css index a6b84694..c7e6ffb8 100644 --- a/sw5e-light.css +++ b/sw5e-light.css @@ -76,6 +76,27 @@ body.light-theme select:focus, body.light-theme textarea:focus { border-color: #c40f0f; } +body.light-theme input[type="text"]::placeholder, +body.light-theme input[type="number"]::placeholder, +body.light-theme input[type="password"]::placeholder, +body.light-theme input[type="date"]::placeholder, +body.light-theme input[type="time"]::placeholder, +body.light-theme select::placeholder, +body.light-theme textarea::placeholder { + color: #1C1C1C; + opacity: 0.5; +} +body.light-theme input[type="text"] ::-ms-input-placeholder, +body.light-theme input[type="number"] ::-ms-input-placeholder, +body.light-theme input[type="password"] ::-ms-input-placeholder, +body.light-theme input[type="date"] ::-ms-input-placeholder, +body.light-theme input[type="time"] ::-ms-input-placeholder, +body.light-theme select ::-ms-input-placeholder, +body.light-theme textarea ::-ms-input-placeholder { + /* Microsoft Edge */ + color: #1C1C1C; + opacity: 0.5; +} body.light-theme button, body.light-theme input[type="button"], body.light-theme input[type="submit"], @@ -130,6 +151,13 @@ body.light-theme input[type="button"].secondary:disabled:focus, body.light-theme input[type="submit"].secondary:disabled:focus { background: #D6D6D6; } +body.light-theme form button { + border: none; +} +body.light-theme form .notes, +body.light-theme form .hint { + color: rgba(28, 28, 28, 0.8); +} body.light-theme #sidebar-tabs { background: white; } @@ -363,3 +391,122 @@ body.light-theme #settings #settings-documentation, body.light-theme #settings #settings-access { color: #1C1C1C; } +body.light-theme #navigation #nav-toggle { + background: rgba(126, 214, 247, 0.4); + color: white; +} +body.light-theme #navigation #nav-toggle .nav-item { + transform: rotate(-90deg); +} +body.light-theme #navigation .nav-item { + border: 1px solid #0d99cc; +} +body.light-theme #navigation #scene-list .scene { + border: 1px solid #0d99cc; + background: rgba(126, 214, 247, 0.4); +} +body.light-theme #navigation #scene-list .scene a { + color: white; +} +body.light-theme #navigation #scene-list .scene.gm { + border: 1px solid #afc6d6; + background: rgba(13, 153, 204, 0.4); +} +body.light-theme #navigation #scene-list .scene.view, +body.light-theme #navigation #scene-list .scene.context { + box-shadow: 0 0 8px #07516c; + border-color: #0d99cc; +} +body.light-theme #navigation #scene-list .scene.active { + border-color: #f14848; + background: rgba(196, 15, 15, 0.6); + box-shadow: 0 0 8px #650808; +} +body.light-theme #controls .scene-control, +body.light-theme #controls .control-tool { + background: rgba(126, 214, 247, 0.4); + color: white; + border: 1px solid #0d99cc; + box-shadow: none; +} +body.light-theme #controls .scene-control:hover, +body.light-theme #controls .control-tool:hover { + box-shadow: 0 0 8px #07516c; +} +body.light-theme #controls .scene-control.active, +body.light-theme #controls .control-tool.active { + border-color: #f14848; + background: rgba(196, 15, 15, 0.6); + box-shadow: 0 0 8px #650808; +} +body.light-theme #players { + border: none; + border-radius: 4px; +} +body.light-theme #players h3 { + background: white; + border: none; + margin: 0; + padding: 8px; + font-size: 17px; + 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 4px 0 0; +} +body.light-theme #players h3 .players-mode { + color: #828282; +} +body.light-theme #players ol { + margin: 4px 0; +} +body.light-theme #players ol .player-name.self { + color: inherit; + font-weight: 700; +} +body.light-theme #players ol .player { + color: #1C1C1C; +} +body.light-theme #players ol .player-active { + margin-top: 7px; +} +body.light-theme #players ol .player-active.active { + box-shadow: none; +} +body.light-theme .window-app { + border-radius: 4px; + border: none; + 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); +} +body.light-theme .window-app header { + background: white; + border-radius: 4px 4px 0 0; + 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); + margin-bottom: 4px; +} +body.light-theme .window-app .window-content { + background: linear-gradient(90deg, #afc6d6 0, #d6d6d6 30%, #d6d6d6 70%, #afc6d6); + color: #1C1C1C; +} +body.light-theme .window-app .window-content footer { + margin-top: 8px; +} +body.light-theme #client-settings nav.tabs { + border: none; + font-size: 17px; + line-height: 1.6; +} +body.light-theme #client-settings nav.tabs a.item { + border-bottom: 3px solid transparent; + color: #1C1C1C; +} +body.light-theme #client-settings nav.tabs a.item:hover { + text-decoration: none; +} +body.light-theme #client-settings nav.tabs a.item.active { + text-shadow: none; + border-bottom-color: #c40f0f; +} +body.light-theme #client-settings section.content { + border: none; + margin-top: 4px; +} diff --git a/ui/pause-inner.svg b/ui/pause-inner.svg new file mode 100644 index 00000000..ed8663b0 --- /dev/null +++ b/ui/pause-inner.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/pause-outer.svg b/ui/pause-outer.svg new file mode 100644 index 00000000..9160d5f9 --- /dev/null +++ b/ui/pause-outer.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/ui/pause-spinner.afdesign b/ui/pause-spinner.afdesign new file mode 100644 index 00000000..911bf400 Binary files /dev/null and b/ui/pause-spinner.afdesign differ