Pabloler21 Claude Sonnet 4.6 commited on
Commit
7676f37
·
1 Parent(s): 0508e33

style(game): minimal top-right control cluster, de-emphasized restart

Browse files
Files changed (2) hide show
  1. app.py +1 -1
  2. styles.css +30 -12
app.py CHANGED
@@ -1234,7 +1234,7 @@ with gr.Blocks(title="Hollow") as demo:
1234
  '<div id="game-groundfog"></div>')
1235
  with gr.Row(elem_id="game-topbar"):
1236
  title_panel = gr.HTML(value=_render_title(_init_state()))
1237
- restart_btn = gr.Button("↺ begin again", elem_classes="restart-btn",
1238
  scale=0)
1239
  voice_btn = gr.Button("🔊", elem_classes="voice-btn", scale=0)
1240
 
 
1234
  '<div id="game-groundfog"></div>')
1235
  with gr.Row(elem_id="game-topbar"):
1236
  title_panel = gr.HTML(value=_render_title(_init_state()))
1237
+ restart_btn = gr.Button("↺", elem_classes="restart-btn",
1238
  scale=0)
1239
  voice_btn = gr.Button("🔊", elem_classes="voice-btn", scale=0)
1240
 
styles.css CHANGED
@@ -854,20 +854,38 @@ footer { display: none !important; }
854
  peace_settle render lands seamlessly as the relief sigh plays */
855
  .entity-convulse-soft .entity-settle-face { animation-duration: 1.95s; }
856
 
857
- /* restart findable but on-theme: sits top-right by the title */
858
  .restart-btn {
859
- max-width: 170px; align-self: flex-start;
860
- background: rgba(30, 20, 42, 0.85) !important;
861
- border: 1px solid #4a3a64 !important;
862
- color: #bca0d8 !important;
863
- font-size: 12.5px !important; letter-spacing: 2px; text-transform: lowercase;
864
- opacity: 1; box-shadow: none !important;
 
 
865
  }
866
  .restart-btn:hover {
 
867
  opacity: 1;
868
- border-color: #7a5f96 !important;
869
- color: #c8b0e0 !important;
870
- background: rgba(40, 26, 56, 0.8) !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
871
  }
872
 
873
  /* the voice channel: mounted in the DOM (so the <audio> plays) but collapsed
@@ -1476,10 +1494,10 @@ footer { display: none !important; }
1476
 
1477
  #game-title {
1478
  font-family: 'Special Elite', monospace;
1479
- font-size: 1.05rem;
1480
  letter-spacing: 0.22em;
1481
  text-transform: uppercase;
1482
- color: #c4bcd8;
1483
  text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 12px rgba(120,90,160,0.35);
1484
  }
1485
  #game-title .named {
 
854
  peace_settle render lands seamlessly as the relief sigh plays */
855
  .entity-convulse-soft .entity-settle-face { animation-duration: 1.95s; }
856
 
857
+ /* restart + mute minimal icon cluster, top-right, low-contrast */
858
  .restart-btn {
859
+ background: transparent !important;
860
+ border: none !important;
861
+ max-width: none; min-width: 0; width: auto !important;
862
+ font-size: 1rem !important; letter-spacing: normal; text-transform: none;
863
+ color: #8b83a2 !important;
864
+ opacity: .7; box-shadow: none !important;
865
+ padding: 4px 6px;
866
+ margin-left: 10px;
867
  }
868
  .restart-btn:hover {
869
+ color: #e0cdb0 !important;
870
  opacity: 1;
871
+ background: transparent !important;
872
+ border: none !important;
873
+ }
874
+ .voice-btn {
875
+ background: transparent !important;
876
+ border: none !important;
877
+ max-width: none; min-width: 0; width: auto !important;
878
+ font-size: 1rem !important;
879
+ color: #b6acd0 !important;
880
+ opacity: .7; box-shadow: none !important;
881
+ padding: 4px 6px;
882
+ margin-left: 10px;
883
+ }
884
+ .voice-btn:hover {
885
+ color: #e0cdb0 !important;
886
+ opacity: 1;
887
+ background: transparent !important;
888
+ border: none !important;
889
  }
890
 
891
  /* the voice channel: mounted in the DOM (so the <audio> plays) but collapsed
 
1494
 
1495
  #game-title {
1496
  font-family: 'Special Elite', monospace;
1497
+ font-size: 0.9rem;
1498
  letter-spacing: 0.22em;
1499
  text-transform: uppercase;
1500
+ color: #7d7596;
1501
  text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 12px rgba(120,90,160,0.35);
1502
  }
1503
  #game-title .named {