seating_randomiser/page_2.css at main · npsboy/seating_randomiser · 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
/* Page 2 Styles */

/* Styling for the material icons */
.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24; /* This can be kept low, we will scale it up below */
    transform: scale(2); /* Scale the icon to make it bigger */
    transition: transform 0.2s; /* Optional: smooth transition on hover */
}

.material-symbols-outlined:hover {
    transform: scale(2.2); /* Slightly increase size on hover for effect */
}

.icon-button {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center icon and text horizontally */
    justify-content: center; /* Center icon and text vertically */
    cursor: pointer;
    margin: 0 20px; /* Add spacing between buttons */
    color: white; /* Ensure text color is visible */
}

.icon-button span {
    margin-top: 5px;
    font-size: 14px; /* Font size for text below icon */
}

/* Body styling */
body {
    font-family: Arial, sans-serif;
    background-color: bisque;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
}

/* Classroom styling */
.classroom {
    display: grid;
    grid-gap: 20px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    padding-bottom: 80px; /* Padding to avoid overlap with the banner */
}

/* Banner at the bottom */
.banner {
    display: flex;
    justify-content: center;
    background-color: #8B4513; /* Brown color */
    color: white;
    padding: 10px;
    width: 100%;
    text-align: center;
    border-radius: 10px 10px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
}

/* Bench and classroom layout */
.bench-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.bench {
    background-color: #8B4513;
    color: white;
    font-weight: bold;
    text-align: center;
    border-radius: 8px;
    height: 60px;
    position: relative;
    margin-top: -30px;
    width: calc(100% - 20px);
    max-width: 400px;
}

.bench-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
}

.students {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 10px;
}

.student {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    margin-bottom: 10px;
}

.head {
    width: 40px;
    height: 40px;
    background-color: #ffd966;
    border-radius: 50%;
}

.body {
    width: 60px;
    height: 100px;
    background-color: #ffeb3b;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
    padding-top: 30px;
}