browser_bench/styles.css at main · GracelandToo/browser_bench · 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
135
/* General Styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 24px;
}

/* Section Styles */
section {
    margin: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

section h2 {
    font-family: "Arial Unicode MS", sans-serif; /* Unicode font for headings */
    font-size: 20px;
    color: #333;
    margin-top: 0;
}

section p {
    font-family: Arial, sans-serif; /* Sans-serif font for body text */
    font-size: 14px;
    color: #555;
}

/* Responsive Design */
@media (max-width: 768px) {
    header h1 {
        font-size: 20px;
    }

    section {
        margin: 10px;
        padding: 15px;
    }

    section h2 {
        font-size: 18px;
    }

    section p {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 18px;
    }

    section {
        margin: 5px;
        padding: 10px;
    }

    section h2 {
        font-size: 16px;
    }

    section p {
        font-size: 12px;
    }
}

/* Table Caption Styling */
caption {
    font-size: 20px; /* Larger font size */
    font-weight: bold; /* Bold font */
    text-align: center; /* Centered text */
    padding: 10px; /* Padding for spacing */
    background-color: #4CAF50; /* Green background color */
    color: white; /* White text color */
    border-radius: 5px 5px 0 0; /* Rounded corners at the top */
    margin-bottom: -1px; /* Aligns caption with the table border */
    display: table-caption; /* Ensures proper rendering */
}
caption.webxprt {
    background-color: #00008c; /* Green background color */
}

/* General Table Styling */
table {
    width: 100%;
    border-collapse: collapse; /* Removes space between cells */
    margin: 20px 0;
    font-family: Arial, sans-serif;
}

/* Header Row Styling */
thead th {
    background-color: #333; /* Dark background for header */
    color: #fff; /* White text */
    font-weight: bold; /* Bold font */
    padding: 10px;
    text-align: left;
    border-bottom: 2px solid #444; /* Darker border for separation */
}

/* Body Rows Styling */
tbody td {
    padding: 10px;
    border-bottom: 1px solid #ddd; /* Light border for rows */
    text-align: left;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

/* Alternate Row Coloring for Better Readability */
tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Light gray for even rows */
}

/* Hover Effect on Rows */
tbody tr:hover {
    background-color: #f1f1f1; /* Slightly darker gray on hover */
}