sepia/gomoku
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Style the title box

Browse source
This commit is contained in:
sepia 2025-07-20 16:16:28 -05:00
parent c112fa99cf
commit 605c111c73
5 changed files with 82 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

3
public/icons/disconnected.svg Executable file
View file

@ -0,0 +1,3 @@
<svg data-slot="icon" aria-hidden="true" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m3 3 8.735 8.735m0 0a.374.374 0 1 1 .53.53m-.53-.53.53.53m0 0L21 21M14.652 9.348a3.75 3.75 0 0 1 0 5.304m2.121-7.425a6.75 6.75 0 0 1 0 9.546m2.121-11.667c3.808 3.807 3.808 9.98 0 13.788m-9.546-4.242a3.733 3.733 0 0 1-1.06-2.122m-1.061 4.243a6.75 6.75 0 0 1-1.625-6.929m-.496 9.05c-3.068-3.067-3.664-7.67-1.79-11.334M12 12h.008v.008H12V12Z" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 562 B

27
public/style.css
View file

@ -1,6 +1,6 @@
:root {
--color-background-light-pink: #ffe0f0;
--color-text-dark: #333;
--color-text: #333;
--color-game-container-bg: white;
--color-game-container-shadow: rgba(0, 0, 0, 0.1);
--color-board-bg: #ffefff;
@ -23,7 +23,7 @@ body {
min-height: 100vh;
margin: 0;
background-color: var(--color-background-light-pink);
color: var(--color-text-dark);
color: var(--color-text);
}
#game-container {
@ -122,13 +122,12 @@ body {
#messages {
margin-top: 10px;
font-size: 0.9em;
color: var(--color-text-dark);
color: var(--color-text);
}
#player-info {
margin-top: 10px;
#title-box {
font-weight: bold;
color: var(--color-text-dark);
color: var(--color-text);
}
#game-link-container {
@ -140,25 +139,20 @@ body {
margin-top: 20px;
}
#copy-link-button,
#copy-success-message {
#copy-link-button {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
top: 0; bottom: 0;
transition: opacity 0.3s ease;
padding: 8px 15px;
border-radius: 5px;
white-space: nowrap;
box-sizing: border-box;
}
#copy-link-button {
background-color: var(--color-board-border);
color: var(--color-text-dark);
color: var(--color-text);
border: none;
cursor: pointer;
gap: 8px;
@ -173,7 +167,8 @@ body {
background-color: var(--color-success-purple);
}
#copy-link-button img.icon {
width: 20px;
height: 20px;
img.icon {
width: 1em;
height: 1em;
vertical-align: middle;
}