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