Payroll/style.css at main · MarcosSoftwareEngineering/Payroll · 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
/* Base styles for the page */
body {
    font-family: Arial, sans-serif; /* Sets a clean, readable font */
    background-color: #f4f4f4; /* Light gray background for contrast */
    padding: 20px; /* Adds spacing around the page */
    margin: 0; /* Removes default browser margin */
}

/* Main container */
.container {
    max-width: 100%; /* Ensures container adapts to screen width */
    margin: auto; /* Centers the container horizontally */
    background: white; /* White background for content area */
    padding: 20px; /* Inner spacing */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

/* Header */
h2 {
    text-align: center; /* Centers the title text */
    background-color: #000; /* Black background */
    color: #fff; /* White text */
    padding: 10px; /* Inner spacing */
    margin-top: 0; /* Removes default top margin */
    font-size: 1.5rem; /* Larger font size for emphasis */
}

/* Search input */
#inputBusca {
    width: 100%; /* Full width input field */
    padding: 12px; /* Inner spacing */
    margin-bottom: 20px; /* Space below input */
    border: 1px solid #ddd; /* Light gray border */
    border-radius: 4px; /* Rounded corners */
    box-sizing: border-box; /* Ensures padding doesn’t affect width */
    font-size: 16px; /* Readable font size */
}

/* Table */
table {
    width: 100%; /* Full width table */
    border-collapse: collapse; /* Removes gaps between cells */
    font-size: 14px; /* Default table font size */
}

/* Table header */
th {
    background-color: #ffff00; /* Yellow background for header cells */
    color: #000; /* Black text for contrast */
    text-align: left; /* Aligns text to the left */
    padding: 10px; /* Inner spacing */
    font-size: 14px; /* Header font size */
}

/* Table cells */
td {
    padding: 10px; /* Inner spacing */
    border-bottom: 1px solid #eee; /* Light border between rows */
}

/* Hover effect */
tr:hover {
    background-color: #f9f9f9; /* Light gray highlight when hovering over a row */
}

/* Responsiveness for tablets and medium screens */
@media (max-width: 768px) {
    .container {
        padding: 10px; /* Reduce container padding */
    }
    h2 {
        font-size: 1.2rem; /* Smaller header font */
    }
    table, th, td {
        font-size: 12px; /* Smaller table font */
    }
    #inputBusca {
        font-size: 14px; /* Slightly smaller input font */
        padding: 10px; /* Reduce input padding */
    }
}

/* Responsiveness for mobile screens */
@media (max-width: 480px) {
    table, th, td {
        display: block; /* Stack table elements vertically */
        width: 100%; /* Full width for each element */
    }
    th {
        display: none; /* Hide headers on very small screens */
    }
    td {
        border: none; /* Remove borders for cleaner mobile view */
        padding: 8px; /* Reduce padding */
        position: relative; /* Allows pseudo-element positioning */
    }
    td::before {
        content: attr(data-label); /* Displays column label before value */
        font-weight: bold; /* Bold labels for clarity */
        display: block; /* Places label above value */
        margin-bottom: 4px; /* Space between label and value */
    }
}