ConsoleGamesWASM

1
.page {
2
	position: relative;
3
	display: flex;
4
	flex-direction: column;
5
}
6

7
main {
8
	flex: 1;
9
}
10

11
.sidebar {
12
	background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
13
}
14

15
.top-row {
16
	background-color: #f7f7f7;
17
	border-bottom: 1px solid #d6d5d5;
18
	justify-content: flex-end;
19
	height: 3.5rem;
20
	display: flex;
21
	align-items: center;
22
}
23

24
	.top-row ::deep a, .top-row ::deep .btn-link {
25
		white-space: nowrap;
26
		margin-left: 1.5rem;
27
		text-decoration: none;
28
	}
29

30
		.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
31
			text-decoration: underline;
32
		}
33

34
		.top-row ::deep a:first-child {
35
			overflow: hidden;
36
			text-overflow: ellipsis;
37
		}
38

39
@media (max-width: 640.98px) {
40
	.top-row:not(.auth) {
41
		display: none;
42
	}
43

44
	.top-row.auth {
45
		justify-content: space-between;
46
	}
47

48
	.top-row ::deep a, .top-row ::deep .btn-link {
49
		margin-left: 0;
50
	}
51
}
52

53
@media (min-width: 641px) {
54
	.page {
55
		flex-direction: row;
56
	}
57

58
	.sidebar {
59
		width: 250px;
60
		height: 100vh;
61
		position: sticky;
62
		top: 0;
63
	}
64

65
	.top-row {
66
		position: sticky;
67
		top: 0;
68
		z-index: 1;
69
	}
70

71
		.top-row.auth ::deep a:first-child {
72
			flex: 1;
73
			text-align: right;
74
			width: 0;
75
		}
76

77
	.top-row, article {
78
		padding-left: 2rem !important;
79
		padding-right: 1.5rem !important;
80
	}
81
}
82