diff --git a/assets/player_skin.png b/assets/player_skin.png index a66ab040c..e287f507b 100644 Binary files a/assets/player_skin.png and b/assets/player_skin.png differ diff --git a/assets/zombie.png b/assets/zombie.png index 53d883841..9941776a6 100644 Binary files a/assets/zombie.png and b/assets/zombie.png differ diff --git a/css/spectrum.css b/css/spectrum.css index fe1e46924..9e9e86629 100644 --- a/css/spectrum.css +++ b/css/spectrum.css @@ -89,7 +89,7 @@ License: MIT height: 30px; width: 12px; margin-top: -6px; - background-color: var(--color-back); + background-color: var(--color-ui); border: 1px solid var(--color-border); } .sp-alpha-inner:hover .sp-alpha-handle { @@ -258,7 +258,7 @@ License: MIT left: -3px; right: -3px; background: white; - background-color: var(--color-back); + background-color: var(--color-ui); border: 1px solid var(--color-border); margin-top: 5px; } diff --git a/css/style.css b/css/style.css index 6b0abd479..9cc429e30 100644 --- a/css/style.css +++ b/css/style.css @@ -180,9 +180,13 @@ font-size: 40pt; float: left; padding-right: 8px; + min-width: 61px; max-height: 54px; max-width: 62px; } + .dialog img.message_box_icon { + min-width: auto; + } /*Vars*/ body { @@ -360,6 +364,21 @@ border: none; font-weight: lighter; } + textarea { + width: 100%; + height: -webkit-fill-available; + padding: 4px; + border: 1px solid var(--color-border); + background: var(--color-back); + color: var(--color-text); + cursor: default; + resize: none; + outline: none; + } + .code { + font-family: consolas, monospace; + font-size: 16px; + } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button, { -webkit-appeareance: none; } @@ -563,11 +582,21 @@ grid-area: header; overflow: hidden; white-space: nowrap; - z-index: 10; } header > * { display: inline-block; } + #loading_error_message { + height: 100%; + width: 100%; + background-color: var(--color-dark); + border: 2px solid var(--color-accent); + text-align: center; + padding-top: 160px; + position: absolute; + z-index: 250; + } + .sidebar { background-color: var(--color-ui);; border: 1px solid var(--color-border); @@ -741,6 +770,9 @@ margin: 4px; margin-bottom: 0; } + .text_button:hover { + color: var(--color-light); + } select.tool { -webkit-appearance: none; @@ -1146,7 +1178,7 @@ border: 1px solid transparent; box-sizing: border-box; } - .animation:hover .animation_name { + .animation:hover { color: var(--color-light); } .animation.selected { @@ -1160,6 +1192,9 @@ .animation > * { float: left; } + .animation > .animation_name { + width: calc(100% - 28px); + } /*Timeline*/ #timeline { @@ -1168,7 +1203,7 @@ body.animation_mode #timeline { display: block; height: 130px; - background-color: var(--color-ui); + background-color: var(--color-dark); border-top: 1px solid var(--color-border); } body.animation_mode #preview .single_canvas_wrapper { @@ -1180,13 +1215,109 @@ position: relative; background-color: var(--color-back); height: 129px; + border-left: 1px solid var(--color-border); + } + #timeline_inner #timeline_marker { + position: absolute; + pointer-events: none; + height: 29px; + width: 20px; + top: 0; + margin-left: -9px; + border: 2px solid var(--color-accent); + border-top-width: 6px; + background-color: rgba(0, 0, 0, 0.2); + z-index: 3; + } + #timeline_inner #timeline_marker:before { + content: ""; + display: block; + margin-left: 7px; + margin-top: 23px; + height: 200px; + width: 2px; + background-color: var(--color-accent); } #timeline_inner .keyframe { position: absolute; + margin-left: -11px; + z-index: 3; } #timeline_inner .keyframe.selected { color: var(--color-accent); } + #timeline_head { + float: left; + width: 120px; + background-color: var(--color-ui); + } + #timeline_head > * { + height: 30px; + width: 100%; + border-bottom: 1px solid var(--color-border); + } + #timeline_head > #timeline_corner { + font-family: consolas, monospace; + background-color: var(--color-back); + padding: 3px; + padding-left: 8px; + } + #timeline_head > .channel_head { + height: 31px; + padding: 4px; + text-align: right; + } + #timeline_head > .channel_head span { + width: 86px; + float: right; + margin-top: -2px; + overflow: hidden; + } + #timeline_head > .channel_head .text_button { + width: 26px; + font-size: 16pt; + float: right; + } + #timeline_time { + height: 30px; + position: relative; + background-color: var(--color-ui); + border-bottom: 1px solid var(--color-border); + margin-left: 8px; + } + div#timeline_time:before, div#timeline_time:after { + content: ""; + background-color: var(--color-button); + width: 100%; + height: 2px; + display: block; + position: absolute; + top: 60px; + z-index: 0; + border-bottom: 1px solid var(--color-border); + } + div#timeline_time:after { + top: 90px; + } + .timeline_timecode { + border-left: 2px solid var(--color-border); + padding-left: 4px; + padding-top: 2px; + position: absolute; + pointer-events: none; + } + .timeline_timecode:first-child:before { + content: ""; + width: 8px; + margin-left: -14px; + z-index: 1; + top: -28px; + height: 125px; + position: absolute; + background-color: var(--color-ui); + margin-top: 28px; + border-right: 1px solid var(--color-border); + } /*Keyframe Panel*/ .panel#keyframe .tabs_small label { font-size: 1em; diff --git a/index.html b/index.html index f5b538cd6..f70a5d18c 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,7 @@
+ + @@ -69,6 +71,7 @@ +layout.color.ui.desc
+layout.color.bright_ui.desc
+layout.color.dark.desc
layout.color.ui.desc
-layout.color.accent.desc
layout.color.grid.desc
-layout.color.bright_ui.desc
+layout.color.grid.desc
+layout.color.wireframe.desc
panel.variable_placeholders.info
+