main.css (9598B)
1 :root { 2 --zoning:#ff8b00; 3 --maincolor:#00b6a6; 4 --accent:#5a180c; 5 --widgetbg:#f0f0f0; 6 --rootbg:#fff; 7 --progressfill:var(--maincolor); 8 --totalprogressfill:var(--accent); 9 --progressbg:var(--zoning); 10 /* --zoning:#dcd; 11 --maincolor:#dff; 12 --accent:#f3f; 13 --widgetbg:#f0f0f0/*#4f4f4f*/; 14 /* --rootbg:#dbcfff;/*#aaeeaa*/ 15 /* --progressfill:var(--maincolor); 16 --totalprogressfill:var(--accent); 17 --progressbg:var(--zoning); 18 */ 19 } 20 /*testinput stylestart*/ 21 input:not([type="submit"]):not([type="checkbox"])/*[type="text"]*/ { 22 width: 200px; 23 display: block; 24 border: none; 25 padding: 10px 0; 26 border-bottom: solid 1px var(--accent); 27 transition: all 0.3s cubic-bezier(.64,.09,.08,1); 28 background: linear-gradient(to bottom, rgba(255,255,255,0) 90%, var(--accent) 10%); 29 background-position: -200px 0; 30 background-size: 200px 100%; 31 background-repeat: no-repeat; 32 color: darken(var(--accent), 20%); 33 &:focus, &:valid { 34 box-shadow: none; 35 outline: none; 36 background-position: 0 0; 37 &::-webkit-input-placeholder { 38 color: var(--accent); 39 font-size: 11px; 40 transform: translateY(-20px); 41 visibility: visible !important; 42 } 43 } 44 } 45 46 button a { 47 color:white; 48 } 49 button, input[type="submit"], input[type="checkbox"] { 50 border: none; 51 background: var(--accent); 52 cursor: pointer; 53 border-radius: 3px; 54 padding: 6px; 55 /*width: 200px;*/ 56 color: white; 57 /*margin-left: 25px;*/ 58 box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2); 59 &:hover { 60 transform: translateY(-2px); 61 box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2); 62 } 63 } 64 /*testend*/ 65 66 html,body {margin:0;padding:0;background-color:var(--rootbg);} 67 .appview {margin:0;padding:0;} 68 /* min-height: 100vh; /**/ 69 a,a.visited,a.hover { 70 text-decoration:none; 71 color:#000; 72 } 73 74 .user-summary{ 75 padding-top:2em; 76 } 77 dl { 78 text-align:justify; 79 } 80 81 ::selection{ 82 background: var(--zoning) 83 } 84 /********** GLOBAL SET **********/ 85 /***Printing***/ 86 @media print { 87 .pagebreak { 88 clear:both; 89 break-after:always !important; 90 } 91 header, footer, #doc, .reportswidget, .permissions, .activeusers { 92 display:none !important; 93 } 94 .admin-grid { 95 display:block !important; 96 } 97 .agreements,.admin-content { 98 padding: 0px !important; 99 margin: 0px !important; 100 background-color: #fff !important; 101 width:100vw !important; 102 } 103 @media (max-width:720px),@media (min-width:720px),@media (max-width: 414px),@media (min-width: 415px) { 104 .pagebreak { 105 clear:both; 106 break-after:always !important; 107 } 108 header, footer, #doc, .reportswidget, .permissions, .activeusers { 109 display:none !important; 110 } 111 .admin-grid { 112 display:block !important; 113 } 114 .agreements,.admin-content { 115 padding: 0px !important; 116 margin: 0px !important; 117 background-color: #fff !important; 118 width:100vw !important; 119 } 120 } 121 } 122 /***EndingPr***/ 123 #messagebanner p { 124 text-align: center; 125 color: var(--accent); 126 background-color: var(--zoning); 127 padding: 1em; 128 margin: 0 1em; 129 } 130 131 #button a { 132 border: none; 133 background: var(--accent); 134 cursor: pointer; 135 border-radius: 3px; 136 padding: 6px; 137 width: 200px; 138 color: white; 139 margin-left: 25px; 140 box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2); 141 /* &:hover { transform: translateY(-5px); box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2); };*/ 142 } 143 .action-button { 144 border: none; 145 background: var(--accent); 146 cursor: pointer; 147 border-radius: 3px; 148 padding: 6px; 149 width:150px; 150 height:1.2em; 151 color: white; 152 box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2); 153 } 154 /********** NAVIGATION **********/ 155 header { 156 font-size:1.5em; 157 align-items:center; 158 justify-items:center; 159 display:grid; 160 gap:0.5rem; 161 padding:0rem 1.5rem 0rem 1.5rem; 162 margin:1rem 0rem 1rem 0rem; 163 width:auto; 164 height:3em; 165 grid-template-columns: min-content auto min-content; 166 grid-template-areas: "logo navi logout"; 167 align-self:center; 168 } 169 header #logo { 170 grid-area:logo; 171 align-self:center; 172 } 173 header #navi { 174 grid-area:navi; 175 justify-content:center; 176 height:100%; 177 display:grid; 178 179 grid-auto-flow:column; 180 grid-auto-columns:max-content; 181 gap:0.5rem; 182 place-self:center; 183 184 } 185 header #logout { 186 grid-area:logout; 187 justify-self:end; 188 align-self:center; 189 } 190 /*}*/ 191 192 #doc { 193 position:fixed; 194 z-index:2; 195 bottom:1rem; 196 right:1.5rem; 197 align-self:center; 198 } 199 200 .user-settings { 201 font-size:1.5em; 202 align-items:center; 203 justify-items:center; 204 display:grid; 205 gap:0.5rem; 206 width:auto; 207 height:3em; 208 padding:0rem 1.5rem 0rem 1.5rem; 209 margin:1rem 0rem 1rem 0rem; 210 /* grid-template-columns: min-content auto min-content; 211 grid-template-areas: "logo navi logout"; 212 */ align-self:center; 213 } 214 215 /********** LOGIN PAGE **********/ 216 .login-grid { 217 display: grid; 218 grid-template-columns: repeat(3, 1fr); 219 margin-top: 1em; 220 margin-bottom: 1em; 221 } 222 223 .login { 224 display: grid; 225 align-items: center; 226 justify-items: center; 227 grid-row-start: 1; 228 grid-row-end: 2; 229 grid-column-start: 2; 230 grid-column-end: 3; 231 padding:4rem; 232 /* padding-bottom:4rem;*/ 233 background-color:var(--maincolor); 234 border-radius:.5em; 235 /* box-shadow: 0px 0px .1em .1em var(--accent);/* probably shouldn't have box-shadow for clean ui at intermediate page sizes (between laptop and phone off ratio) */ 236 } 237 /********** FULL PAGE **********/ 238 .hours-grid, .new-user-grid, .new-agreement-grid, .new-project-grid, .role-permissions, .activeusers-grid, .agreement-grid, .project-grid { 239 padding:5rem; 240 margin:1rem; 241 display: grid; 242 align-items: center; 243 justify-items: center; 244 text-align:center; 245 background-color: var(--widgetbg); 246 border-radius:.5em; 247 } 248 .hours-grid table tr:nth-child(even) { 249 background-color:var(--maincolor); 250 } 251 .hours-grid table,.hours-grid tr,.hours-grid td{ 252 border:1px; 253 border-color:var(--accent); 254 padding:1rem; 255 } 256 /*agreements here is actually for the tables in the admin pages. initially used for the Hours by Employee widget(/admin/employee_report/index.html) */ 257 .project-table-grid table tr:nth-child(even), .current-pay-period table tr:nth-child(even) .agreements table tr:nth-child(even) { 258 background-color:var(--maincolor); 259 } 260 .agreements table,.hours-grid tr,.hours-grid td{ 261 border:1px; 262 border-color:var(--accent); 263 padding:1rem; 264 } 265 266 /********** (In)Active Users PAGE **********/ 267 .activeusers-grid { 268 grid-auto-columns:auto; 269 } 270 .usercard { 271 width:fit-content; 272 border:1px solid; 273 border-color:var(--accent); 274 border-radius:.5em; 275 padding:0px; 276 margin:0px; 277 } 278 .activeusers-grid table,.activeusers-grid tr,.activeusers-grid td{ 279 padding:1rem; 280 } 281 .activeusers-grid table tr:nth-child(even) { 282 background-color:var(--maincolor); 283 } 284 .activeusers-grid table td:nth-child(odd) { 285 text-align:left; 286 } 287 .activeusers-grid table td:nth-child(even) { 288 text-align:right; 289 } 290 /********** WIDGETS **********/ 291 /*section h3 { 292 max-height: max-content; 293 }*/ 294 .permissions, .reportswidget, .activeusers, .agreements, .fleet, .punchclock { 295 height:max-content; 296 display: grid; 297 /*align-items: center;*/ 298 justify-items: center; 299 text-align:center; 300 background-color: var(--widgetbg); 301 border-radius:.5em; 302 } 303 @media (min-width: 415px) { 304 .punchclock { 305 height:-webkit-fill-available; 306 height:-moz-available; 307 width:-webkit-fill-available; 308 width:-moz-available; 309 } 310 .permissions, .reportswidget, .activeusers, .agreements, .fleet { 311 height:-webkit-fill-available; 312 height:-moz-available; 313 width:-webkit-fill-available; 314 width:-moz-available; 315 min-height:40vh; 316 } 317 } 318 @media (max-width: 414px) {/* try 240px width standard? https://dabblet.com/result/gist/1576044 */ 319 table,tr,td {display:block;}/* not sure if works, intended for table flow over rows */ 320 tr:nth-child(2n) {background:var(--maincolor);}/* not sure if works, intended for table flow over rows */ 321 .punchclock { 322 padding: 5em 8em; 323 } 324 .permissions, .reportswidget, .activeusers, .agreements, .fleet { 325 padding: 2em 5em 3em 5em; 326 } 327 } 328 .project-overlook table tr:nth-child(even), .employee-overlook table tr:nth-child(even) { 329 background-color:var(--maincolor); 330 } 331 .employee-overlook table td:nth-child(odd) { 332 text-align:left; 333 } 334 .employee-overlook table td:nth-child(even) { 335 text-align:right; 336 } 337 /***####### FLEET WIDGET #######***/ 338 .safetychecks{ 339 display:block; 340 text-align:center; 341 } 342 /*.safetychecks table tr:nth-child(even) { 343 background-color:var(--maincolor); 344 }*/ 345 .safetychecks table td:nth-child(even) { 346 text-align:left; 347 } 348 .safetychecks table td:nth-child(odd) { 349 text-align:right; 350 } 351 .fleet #notes { 352 width:100%; 353 } 354 /********** END WIDGETS **********/ 355 /********** PRIMARY LAYOUTS **********/ 356 .base-grid,.admin-grid { 357 display: grid; 358 grid-gap:1em; 359 margin:1em; 360 /* place-items:center; 361 * */ 362 } 363 @media (min-width:720px){ 364 .base-grid { 365 grid-template-columns: repeat(2, 1fr); 366 grid-auto-columns: minmax(100px, 600px); 367 } 368 .admin-grid { 369 grid-template-columns:repeat(5,1fr); 370 grid-auto-rows: auto; 371 } 372 373 .agreements,.admin-content { 374 grid-row:1/4; 375 grid-column:1/ span 4; 376 } 377 } 378 @media (max-width:720px){ 379 .base-grid { 380 } 381 .admin-grid { 382 } 383 .agreements,.admin-content { 384 } 385 } 386 /********** Progress display **********/ 387 .agreements a { 388 width:100%; 389 } 390 .progress { 391 margin:.5em 1em; 392 padding:1em; 393 border-radius:.5em; 394 background-color:var(--progressbg); 395 text-align:center; 396 } 397 .total-progress { 398 color:#fff; 399 margin:1em; 400 height:2em; 401 min-width:fit-content; 402 background-color:var(--totalprogressfill); 403 text-align:center; 404 } 405 .progress-bar { 406 margin:1em; 407 height:2em; 408 min-width:fit-content; 409 background-color:var(--progressfill); 410 text-align:left; 411 } 412 413 /********** DOCUMENTATION **********/ 414 .documentation-container { 415 text-align: center; 416 margin-left: 10vw; 417 margin-right: 10vw; 418 } 419 .documentation-header { 420 padding-top: 5vh; 421 } 422 .intro-documentation { 423 padding-top: 2vh; 424 } 425 .input-example { 426 width: 50px; 427 } 428 429 /********** Footer **********/ 430 footer { 431 margin-top:4em; 432 text-align:center; 433 } 434 footer img { 435 width:100%; 436 z-index:-1; 437 position:static; 438 }