Report/style.css at main · MarcosSoftwareEngineering/Report · 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
/* =========================================
   RESET & BASE (Technical Document Style)
   ========================================= */
body {
    font-family: 'Arial', sans-serif; /* Standard technical font */
    background-color: #e9e9e9; /* Gray background outside the paper */
    margin: 0;
    padding: 20px;
    color: #000; /* Absolute black text */
}

/* Container simulates an A4/Letter paper sheet */
.container {
    background: white;
    max-width: 1200px;       /* Limit width on large screens */
    margin: 0 auto;          /* Center horizontally */
    padding: 25px;
    border: 1px solid #000;  /* Thin black border to outline the sheet */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2); /* Subtle shadow for depth */
}

/* =========================================
   HEADER & SEARCH (Monochrome style)
   ========================================= */
header h1 {
    text-transform: uppercase;
    border-bottom: 3px solid #000; /* Thick black underline */
    padding-bottom: 10px;
    margin-top: 0;
    font-size: 1.5rem;
}

.search-container input {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 2px solid #000; /* Solid black border */
    border-radius: 0;       /* Square corners for a serious look */
    font-size: 16px;        /* Prevents zoom on iPhone */
    box-sizing: border-box;
    background-color: #fff;
    color: #000;
}

.search-container input::placeholder {
    color: #555;
    font-style: italic;
}

/* =========================================
   TABLE STYLE (Excel-like, core of RDO)
   ========================================= */
/* Wrapper allows horizontal scroll on mobile */
.table-wrapper {
    width: 100%;
    overflow-x: auto;  /* Enables side scrolling */
    border: 2px solid #000; /* Thick outer border */
}

table {
    width: 100%;
    border-collapse: collapse; /* Compact like Excel */
    min-width: 800px; /* Prevents data from being squeezed */
}

/* Table Header */
thead th {
    background-color: #000; /* Black background */
    color: #fff;            /* White text */
    text-transform: uppercase;
    text-align: left;
    padding: 10px;
    border: 1px solid #fff; /* Subtle white dividers */
    font-size: 0.9rem;
    white-space: nowrap;    /* Prevents line breaks */
}

/* Table Body */
tbody td {
    padding: 8px 10px;
    border: 1px solid #000; /* Black grid lines */
    font-size: 0.95rem;
    vertical-align: middle;
}

/* Zebra rows in gray tones (better readability without colors) */
tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Hover effect to highlight row */
tbody tr:hover {
    background-color: #ddd;
    cursor: default;
}

/* Status & Alignment */
.status-ok {
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

.text-center { text-align: center; }

/* =========================================
   RESPONSIVENESS (Media Queries)
   Adapts layout without losing identity
   ========================================= */

/* Tablets & smaller laptops */
@media screen and (max-width: 1024px) {
    .container {
        width: 95%;
        padding: 15px;
    }
}

/* Mobile (Compact mode) */
@media screen and (max-width: 600px) {
    body {
        padding: 0; /* Remove body margin */
        background-color: #fff;
    }

    .container {
        width: 100%;
        border: none; /* Remove sheet border */
        box-shadow: none;
        padding: 10px;
    }

    header h1 {
        font-size: 1.2rem; /* Smaller title */
        text-align: center;
    }

    /* Adjust table cells for touch interaction */
    tbody td {
        padding: 12px 8px; /* More height for finger tap */
        font-size: 0.85rem;
    }

    /* First column (Name) highlighted */
    td:first-child {
        font-weight: bold;
        background-color: #e0e0e0; /* Gray highlight for names */
    }
}