webchess/responsive.css at master · Thorium/webchess · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/*
 * Mobile-friendly overrides for WebChess (added 2026).
 *
 * Loaded AFTER each page's own stylesheet so these rules win. Everything that
 * could affect the desktop layout is confined to the max-width media queries,
 * so the classic desktop appearance is unchanged on wide screens.
 */

/* Never let a page force the whole viewport to scroll sideways. */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}

/* Make decorative/content images flexible (the chess board sizes itself in JS
 * and is excluded below). */
.login-text img,
#header img {
	max-width: 100%;
	height: auto;
}

/* ----- Phone / small-tablet layout (<= 760px) ----- */
@media (max-width: 760px) {

	/* chess.css sets `html { min-width: 742px }`, which forces the whole page
	   wider than any phone and defeats the rules below. Release it. */
	html, body {
		min-width: 0 !important;
	}

	/* chess.css uses a fixed 742px wrapper with floated, fixed-width columns.
	   Make the whole thing a single fluid column. */
	div#wrapper,
	div#boardsection,
	html > body div#boardsection,
	div#content,
	div#rightcolumn,
	div#navcontainer {
		float: none !important;
		width: auto !important;
		min-width: 0 !important;
		margin-left: 8px !important;
		margin-right: 8px !important;
	}

	/* mainmenu.css positions the nav as an absolute left sidebar and offsets the
	   content 180px to clear it. On a phone, put the nav back in normal flow
	   (stacked above the content) and drop the offset/border. */
	div#navcontainer {
		position: static !important;
		left: auto !important;
		top: auto !important;
		margin-bottom: 10px !important;
	}

	div#rightcolumn {
		border-left: 0 !important;
		padding-left: 0 !important;
	}

	/* in-game control rows: wrap buttons and keep the info bar inside the
	   viewport instead of overflowing to the right */
	#gamebuttons,
	form[name="gamemenu"] {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
	}

	#moveinfo {
		box-sizing: border-box;
		width: 100% !important;
	}

	/* mainmenu.css / userlogin.css two-column "preferences" and "login" panels:
	   stack them instead of placing the form and the help text side by side. */
	.preferences,
	.preferences-form,
	.login,
	.login-form,
	.login-text,
	.viewmessage-form,
	.message-block {
		float: none !important;
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Wide data tables (game lists, move history, captures) would otherwise blow
	   out the page width. Let each scroll horizontally on its own. */
	table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#gamebody,
	#captures,
	#gamenav {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Touch-friendly form controls. 16px text also stops iOS from zooming in
	   when a field gains focus. */
	input,
	select,
	textarea,
	.button,
	button {
		font-size: 16px;
	}

	.button,
	input[type="submit"],
	input[type="button"] {
		padding: 8px 12px;
		min-height: 40px;
	}

	input[type="text"],
	input[type="password"],
	select,
	textarea {
		min-height: 38px;
		max-width: 100%;
		box-sizing: border-box;
	}
}