1
0
mirror of synced 2025-02-17 11:18:33 +01:00

Initial stab at fixing dark mode. Navigation and main colors are now better. Laid the groundwork for theme-based assets and fixed loading spinners for dark mode.

This commit is contained in:
Jennifer Taylor 2022-12-03 22:02:37 +00:00
parent df08de1339
commit 17291b0cb2
38 changed files with 59 additions and 52 deletions

View File

@ -374,6 +374,7 @@ def navigation() -> Dict[str, Any]:
return { return {
"components": components, "components": components,
"any": jinja2_any, "any": jinja2_any,
"assets": f"themes/{config.theme}/",
"theme_url": jinja2_theme, "theme_url": jinja2_theme,
"cache_bust": f"v={FRONTEND_CACHE_BUST}", "cache_bust": f"v={FRONTEND_CACHE_BUST}",
} }
@ -384,6 +385,7 @@ def navigation() -> Dict[str, Any]:
return { return {
"components": components, "components": components,
"any": jinja2_any, "any": jinja2_any,
"assets": f"themes/{config.theme}/",
"theme_url": jinja2_theme, "theme_url": jinja2_theme,
"cache_bust": f"v={FRONTEND_CACHE_BUST}", "cache_bust": f"v={FRONTEND_CACHE_BUST}",
} }
@ -938,6 +940,7 @@ def navigation() -> Dict[str, Any]:
"navigation": pages, "navigation": pages,
"components": components, "components": components,
"any": jinja2_any, "any": jinja2_any,
"assets": f"themes/{config.theme}/",
"theme_url": jinja2_theme, "theme_url": jinja2_theme,
"cache_bust": f"v={FRONTEND_CACHE_BUST}", "cache_bust": f"v={FRONTEND_CACHE_BUST}",
} }

View File

@ -5,6 +5,7 @@ var Add = createReactClass({
return ( return (
<Button <Button
className="add" className="add"
style={this.props.style}
disabled={this.props.disabled} disabled={this.props.disabled}
onClick={function(event) { onClick={function(event) {
this.props.onClick(event); this.props.onClick(event);

View File

@ -5,6 +5,7 @@ var Delete = createReactClass({
return ( return (
<Button <Button
className="delete" className="delete"
style={this.props.style}
disabled={this.props.disabled} disabled={this.props.disabled}
onClick={function(event) { onClick={function(event) {
this.props.onClick(event); this.props.onClick(event);

View File

@ -5,6 +5,7 @@ var Edit = createReactClass({
return ( return (
<Button <Button
className="edit" className="edit"
style={this.props.style}
disabled={this.props.disabled} disabled={this.props.disabled}
onClick={function(event) { onClick={function(event) {
this.props.onClick(event); this.props.onClick(event);

View File

@ -195,7 +195,7 @@ var GameSettings = createReactClass({
}.bind(this)} }.bind(this)}
/> />
{ this.state.settings_saving[this.state.current_setting] ? { this.state.settings_saving[this.state.current_setting] ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
{ this.state.settings_saved[this.state.current_setting] ? { this.state.settings_saved[this.state.current_setting] ?

View File

@ -139,7 +139,7 @@ var Table = createReactClass({
<span className="loading" style={ {float: 'right' } }> <span className="loading" style={ {float: 'right' } }>
<img <img
className="loading" className="loading"
src={Link.get('static', 'loading-16.gif')} src={Link.get('static', window.assets + 'loading-16.gif')}
/> loading more data... /> loading more data...
</span> : null </span> : null
} }

View File

@ -369,7 +369,7 @@ var api_management = createReactClass({
if (this.state.info[server.id].loading) { if (this.state.info[server.id].loading) {
return ( return (
<> <>
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} />
{' querying server for info...'} {' querying server for info...'}
</> </>
); );

View File

@ -90,7 +90,7 @@ var card_management = createReactClass({
/> />
<input type="submit" value="search" /> <input type="submit" value="search" />
{ this.state.searching ? { this.state.searching ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
</form> </form>

View File

@ -542,7 +542,7 @@ var arcade_management = createReactClass({
<> <>
PASELI Enabled PASELI Enabled
{ this.state.paseli_enabled_saving ? { this.state.paseli_enabled_saving ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
</> </>
@ -561,7 +561,7 @@ var arcade_management = createReactClass({
<> <>
PASELI Infinite PASELI Infinite
{ this.state.paseli_infinite_saving ? { this.state.paseli_infinite_saving ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
</> </>
@ -580,7 +580,7 @@ var arcade_management = createReactClass({
<> <>
Mask Web Address Mask Web Address
{ this.state.mask_services_url_saving ? { this.state.mask_services_url_saving ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
</> </>

View File

@ -216,7 +216,7 @@ var rivals_view = createReactClass({
/> />
<input type="submit" value="search" /> <input type="submit" value="search" />
{ this.state.searching ? { this.state.searching ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
</form> </form>

View File

@ -151,7 +151,7 @@ var network_scores = createReactClass({
<span className="loading" style={ {float: 'right' } }> <span className="loading" style={ {float: 'right' } }>
<img <img
className="loading" className="loading"
src={Link.get('static', 'loading-16.gif')} src={Link.get('static', window.assets + 'loading-16.gif')}
/> loading more scores... /> loading more scores...
</span> : null </span> : null
} }

View File

@ -323,7 +323,7 @@ var settings_view = createReactClass({
<> <>
Fast/Slow Display Fast/Slow Display
{ this.state.saving_early_late ? { this.state.saving_early_late ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
</> </>
@ -342,7 +342,7 @@ var settings_view = createReactClass({
<> <>
Combo Position Combo Position
{ this.state.saving_background_combo ? { this.state.saving_background_combo ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
</> </>
@ -395,7 +395,7 @@ var settings_view = createReactClass({
}.bind(this)} }.bind(this)}
/> />
{ this.state.options_saving[this.state.version] ? { this.state.options_saving[this.state.version] ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
{ this.state.options_saved[this.state.version] ? { this.state.options_saved[this.state.version] ?

View File

@ -163,7 +163,7 @@ var profile_view = createReactClass({
/> />
} }
{ this.state.updating_rivals ? { this.state.updating_rivals ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : null <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> : null
} }
</div> </div>
} }

View File

@ -191,7 +191,7 @@ var rivals_view = createReactClass({
/> />
<input type="submit" value="search" /> <input type="submit" value="search" />
{ this.state.searching ? { this.state.searching ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
</form> </form>

View File

@ -173,7 +173,7 @@ var network_scores = createReactClass({
<span className="loading" style={ {float: 'right' } }> <span className="loading" style={ {float: 'right' } }>
<img <img
className="loading" className="loading"
src={Link.get('static', 'loading-16.gif')} src={Link.get('static', window.assets + 'loading-16.gif')}
/> loading more scores... /> loading more scores...
</span> : null </span> : null
} }

View File

@ -452,7 +452,7 @@ var settings_view = createReactClass({
}.bind(this)} }.bind(this)}
/> />
{ this.state.qpro_saving[this.state.version] ? { this.state.qpro_saving[this.state.version] ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
{ this.state.qpro_saved[this.state.version] ? { this.state.qpro_saved[this.state.version] ?
@ -494,7 +494,7 @@ var settings_view = createReactClass({
}.bind(this)} }.bind(this)}
/> />
{ this.state.theme_saving[this.state.version] ? { this.state.theme_saving[this.state.version] ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
{ this.state.theme_saved[this.state.version] ? { this.state.theme_saved[this.state.version] ?
@ -534,7 +534,7 @@ var settings_view = createReactClass({
}.bind(this)} }.bind(this)}
/> />
{ this.state.menu_saving[this.state.version] ? { this.state.menu_saving[this.state.version] ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
{ this.state.menu_saved[this.state.version] ? { this.state.menu_saved[this.state.version] ?

View File

@ -175,7 +175,7 @@ var rivals_view = createReactClass({
/> />
<input type="submit" value="search" /> <input type="submit" value="search" />
{ this.state.searching ? { this.state.searching ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
</form> </form>

View File

@ -169,7 +169,7 @@ var network_scores = createReactClass({
<span className="loading" style={ {float: 'right' } }> <span className="loading" style={ {float: 'right' } }>
<img <img
className="loading" className="loading"
src={Link.get('static', 'loading-16.gif')} src={Link.get('static', window.assets + 'loading-16.gif')}
/> loading more scores... /> loading more scores...
</span> : null </span> : null
} }

View File

@ -246,7 +246,7 @@ var settings_view = createReactClass({
}.bind(this)} }.bind(this)}
/> />
{ this.state.emblem_saving[this.state.version] ? { this.state.emblem_saving[this.state.version] ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
{ this.state.emblem_saved[this.state.version] ? { this.state.emblem_saved[this.state.version] ?

View File

@ -160,7 +160,7 @@ var network_scores = createReactClass({
<span className="loading" style={ {float: 'right' } }> <span className="loading" style={ {float: 'right' } }>
<img <img
className="loading" className="loading"
src={Link.get('static', 'loading-16.gif')} src={Link.get('static', window.assets + 'loading-16.gif')}
/> loading more scores... /> loading more scores...
</span> : null </span> : null
} }

View File

@ -225,7 +225,7 @@ var rivals_view = createReactClass({
/> />
<input type="submit" value="search" /> <input type="submit" value="search" />
{ this.state.searching_name ? { this.state.searching_name ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
</form> </form>
@ -255,7 +255,7 @@ var rivals_view = createReactClass({
/> />
<input type="submit" value="search" /> <input type="submit" value="search" />
{ this.state.searching_id ? { this.state.searching_id ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
</form> </form>

View File

@ -169,7 +169,7 @@ var network_scores = createReactClass({
<span className="loading" style={ {float: 'right' } }> <span className="loading" style={ {float: 'right' } }>
<img <img
className="loading" className="loading"
src={Link.get('static', 'loading-16.gif')} src={Link.get('static', window.assets + 'loading-16.gif')}
/> loading more scores... /> loading more scores...
</span> : null </span> : null
} }

View File

@ -273,7 +273,7 @@ var rivals_view = createReactClass({
/> />
<input type="submit" value="search" /> <input type="submit" value="search" />
{ this.state.searching_name ? { this.state.searching_name ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
</form> </form>
@ -301,7 +301,7 @@ var rivals_view = createReactClass({
/> />
<input type="submit" value="search" /> <input type="submit" value="search" />
{ this.state.searching_id ? { this.state.searching_id ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
</form> </form>

View File

@ -164,7 +164,7 @@ var network_scores = createReactClass({
<span className="loading" style={ {float: 'right' } }> <span className="loading" style={ {float: 'right' } }>
<img <img
className="loading" className="loading"
src={Link.get('static', 'loading-16.gif')} src={Link.get('static', window.assets + 'loading-16.gif')}
/> loading more scores... /> loading more scores...
</span> : null </span> : null
} }

View File

@ -181,7 +181,7 @@ var rivals_view = createReactClass({
/> />
<input type="submit" value="search" /> <input type="submit" value="search" />
{ this.state.searching ? { this.state.searching ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> : <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
null null
} }
</form> </form>

View File

@ -153,7 +153,7 @@ var network_scores = createReactClass({
<span className="loading" style={ {float: 'right' } }> <span className="loading" style={ {float: 'right' } }>
<img <img
className="loading" className="loading"
src={Link.get('static', 'loading-16.gif')} src={Link.get('static', window.assets + 'loading-16.gif')}
/> loading more scores... /> loading more scores...
</span> : null </span> : null
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

View File

@ -46,14 +46,14 @@ div.buttons {
input[type="submit"] { input[type="submit"] {
border: 1px solid #19480a; border: 1px solid #19480a;
color: #242526; color: #242526;
background: #49B979; background: #49B979;
margin-right: 5px; margin-right: 5px;
} }
input[type="button"], button.nav, button.toggle, button.edit, button.add, button.viewmore, button.btn-default { input[type="button"], button.nav, button.toggle, button.edit, button.add, button.viewmore, button.btn-default {
border: 1px solid #6a6a6a; border: 1px solid #6a6a6a;
color: #b0b1b2; color: #b0b1b2;
background: #282828; background: #282828;
margin-right: 5px; margin-right: 5px;
} }
@ -71,17 +71,17 @@ input[type="text"], input[type="password"], textarea {
border: 1px solid #6a6a6a; border: 1px solid #6a6a6a;
padding: 4px; padding: 4px;
border-radius: 0px; border-radius: 0px;
background-color: #b3b4b5; background-color: #1f1f1f;
} }
select { select {
border: 1px solid #6a6a6a; border: 1px solid #6a6a6a;
padding: 4px 4px 3px 4px; padding: 4px 4px 3px 4px;
border-radius: 0px; border-radius: 0px;
background: #b3b4b5; background: #1f1f1f;
} }
input { input {
#b3b4b5 #1f1f1f
} }
input[type="button"] { input[type="button"] {
@ -95,9 +95,9 @@ button.toggle:not(:last-child):not(:only-child), button.edit:not(:last-child):no
span + button.edit, span + button.toggle, span + button.delete, span + button.add, span + button.edit, span + button.toggle, span + button.delete, span + button.add,
div + button.edit, div + button.toggle, div + button.delete, div + button.add { div + button.edit, div + button.toggle, div + button.delete, div + button.add {
margin-left: 15px; margin-left: 15px;
border: 1px solid #6a6a6a; border: 1px solid #6a6a6a;
background-color: #282828; background-color: #282828;
color: #b3b3b3; color: #cecece;
} }
button.nav { button.nav {
@ -125,8 +125,8 @@ button.active {
} }
button { button {
color: #b3b3b3; color: #cecece;
background-color: #282828; background-color: #282828;
} }
button.delete { button.delete {

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -1,6 +1,6 @@
body { body {
font-family: Helvetica; font-family: Helvetica;
color: #b3b3b3; color: #cecece;
margin: 0px; margin: 0px;
padding-bottom: 30px; padding-bottom: 30px;
background-color: #121212; background-color: #121212;
@ -29,11 +29,11 @@ div.container {
div.loading { div.loading {
margin-left: 50%; margin-left: 50%;
margin-right: 50%; margin-right: 50%;
height: 20px; height: 24px;
} }
div.navigation { div.navigation {
background-color: #b3b4b5; background-color: #1f1f1f;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
} }
@ -124,7 +124,7 @@ ul.navigation {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
margin: 0px; margin: 0px;
background-color: #b3b4b5; background-color: #1f1f1f;
position: relative; position: relative;
text-align: right; text-align: right;
-webkit-touch-callout: none; -webkit-touch-callout: none;
@ -144,7 +144,7 @@ ul.navigation li {
ul.navigation_sub { ul.navigation_sub {
display: none; display: none;
position: absolute; position: absolute;
background-color: #e4e4e4; background-color: #2d2d2d;
padding: 10px; padding: 10px;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -186,15 +186,15 @@ ul.navigation li a {
display: block; display: block;
text-decoration: none; text-decoration: none;
padding: 10px; padding: 10px;
color: #121212; color: #b5b5b5;
} }
ul.navigation li a:hover { ul.navigation li a:hover {
background-color: #d2d2d2; background-color: #343434;
} }
ul.navigation li a:active { ul.navigation li a:active {
background-color: #d2d2d2; background-color: #343434;
} }
ul.navigation > li > a.current { ul.navigation > li > a.current {

View File

@ -20,7 +20,7 @@ table.list th {
} }
table.list th.action { table.list th.action {
background-color: #b3b4b5; background-color: #1f1f1f;
border: none; border: none;
} }
@ -63,7 +63,7 @@ table.list tbody tr:nth-child(even) td {
} }
table td.subheader { table td.subheader {
background-color: #b3b4b5 ! important; background-color: #1f1f1f ! important;
font-weight: bold; font-weight: bold;
} }
@ -102,7 +102,7 @@ table.records a, table.attempts a, table.topscores a, table.players a, table.jub
} }
td.edit { td.edit {
background-color: #b3b4b5 ! important; background-color: #1f1f1f ! important;
border: none ! important; border: none ! important;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -23,7 +23,7 @@ div.container {
div.loading { div.loading {
margin-left: 50%; margin-left: 50%;
margin-right: 50%; margin-right: 50%;
height: 20px; height: 24px;
} }
div.navigation { div.navigation {

View File

@ -150,6 +150,7 @@
window.{{name}} = {{ val|tojson|safe }}; window.{{name}} = {{ val|tojson|safe }};
{% endfor %} {% endfor %}
{% endif %} {% endif %}
window.assets = {{ assets|tojson|safe }};
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
$(function () { $(function () {

View File

@ -5,7 +5,7 @@
{% block content %} {% block content %}
<div id="content"> <div id="content">
<div class="loading"> <div class="loading">
<img src="{{ url_for('static', filename='loading-20.gif') }}" /> <img src="{{ url_for('static', filename=assets + 'loading-24.gif') }}" />
</div> </div>
</div> </div>
{% endblock %} {% endblock %}