File manager

File manager - Edit - /home/ipsc/assets/css/admin.css

Back
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800&display=swap'); { box-sizing:border-box; margin:0; padding:0; font-family:'Kanit',sans-serif; } body{ background:linear-gradient(180deg,#f4f6f9,#e9edf3); color:#2c2c2c; } / ================= CONTAINER ================= / .container{ max-width:1300px; margin:40px auto; padding:35px; background:#fff; border-radius:24px; box-shadow:0 20px 50px rgba(0,0,0,.15); } / ================= TITLE ================= / .title{ text-align:center; font-size:34px; font-weight:800; letter-spacing:1px; color:#213448; } / ================= CONTENT ================= / .admin-content{ display:flex; flex-direction:column; gap:25px; margin-top:30px; } / ================= SECTION ================= / .section{ background:#ffffff; border-radius:18px; padding:25px; box-shadow:0 10px 25px rgba(0,0,0,.1); } .section-title{ text-align:center; font-size:22px; font-weight:700; margin-bottom:18px; color:#213448; } / ================= EVENT FORM ================= / .event-center{ max-width:520px; margin:0 auto; } .form-row{ display:flex; gap:15px; align-items:flex-end; } .count-box{ flex:1; display:flex; flex-direction:column; } .count-box label{ font-weight:600; margin-bottom:6px; } .event-form input{ padding:10px; border-radius:10px; border:1px solid #ccc; font-size:15px; } .save-event-btn{ padding:10px 18px; border:none; border-radius:12px; background:linear-gradient(135deg,#547792,#213448); color:#fff; font-size:15px; font-weight:600; cursor:pointer; } .save-event-btn:hover{opacity:.9;} / ================= PLAYER GRID ================= / .admin-player-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:20px; } / ================= PLAYER CARD ================= / .player-card-admin{ display:flex; align-items:center; gap:18px; padding:20px; border-radius:18px; background:#f8fafc; box-shadow:0 8px 18px rgba(0,0,0,.1); transition:.25s; } .player-card-admin:hover{ transform:translateY(-3px); } / ===== STATUS ===== / .player-card-admin.running{ background:linear-gradient(135deg,#547792,#213448); color:#fff; border-left:6px solid #f44336; } .player-card-admin.finished{ background:#e7f1f6; border-left:6px solid #213448; } .player-card-admin.dq{ background:#d9534f; color:#fff; border-left:6px solid #8b0000; } / ================= IMAGE ================= / .player-image-box{ display:flex; flex-direction:column; align-items:center; } .player-img{ width:110px; height:110px; border-radius:16px; object-fit:cover; box-shadow:0 6px 15px rgba(0,0,0,.25); } .upload-form{margin-top:6px;} .upload-btn{ margin-top:8px; background:#213448; color:#fff; padding:6px 14px; border-radius:10px; font-size:13px; cursor:pointer; } .upload-btn:hover{opacity:.85;} .upload-form input[type=file]{display:none;} / ================= INFO ================= / .player-info{flex:1;} .name-row{ display:flex; align-items:center; gap:8px; } .name-row h3{ font-size:20px; font-weight:700; } .edit-btn{ width:18px; height:18px; cursor:pointer; opacity:.65; } .edit-btn:hover{opacity:1;} .player-code{ margin-top:6px; font-size:15px; font-weight:600; } .player-time{ margin-top:8px; font-size:16px; font-weight:600; } / ================= ACTIONS ================= / .side-actions{ display:flex; flex-direction:column; gap:12px; } .side-actions button{ width:46px; height:46px; border-radius:50%; border:none; font-size:20px; cursor:pointer; background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.2); } .side-actions button.dq{background:#ffdddd;} .side-actions button.delete{background:#f5f5f5;} / ================= FLOAT BUTTON ================= / .admin-btn{ position:fixed; right:30px; bottom:30px; padding:14px 26px; border-radius:40px; background:#213448; color:#fff; text-decoration:none; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.35); } / ================= LIVE STAT ================= / .live-stat-box{ max-width:420px; margin:0 auto; padding:30px 25px; border-radius:22px; background:linear-gradient(135deg,#213448,#547792); color:#fff; text-align:center; box-shadow:0 20px 45px rgba(0,0,0,.35); } .live-stat-title{ font-size:28px; font-weight:800; } .live-stat-number{ margin:18px 0 10px; font-size:96px; font-weight:900; line-height:1; } .live-stat-sub{ font-size:20px; opacity:.9; } / ================= RESPONSIVE ================= / @media(max-width:768px){ .admin-player-grid{grid-template-columns:1fr;} .title{font-size:26px;} .live-stat-number{font-size:72px;} } / ================= PLAYER HEADER (DASHBOARD) ================= / .player-header{ text-align:center; margin-bottom:30px; } .player-header-title{ font-size:34px; font-weight:900; letter-spacing:1px; color:#213448; position:relative; display:inline-block; padding:0 30px; } .player-header-title::before, .player-header-title::after{ content:""; position:absolute; top:50%; width:60px; height:3px; background:#213448; } .player-header-title::before{ left:-70px; } .player-header-title::after{ right:-70px; } .player-header-count{ margin-top:12px; font-size:22px; font-weight:600; color:#555; } .player-header-count span{ font-size:36px; font-weight:900; color:#d32f2f; margin:0 6px; } / ================= EVENT SECTION ================= / .event-section{ background:linear-gradient(180deg,#ffffff,#f6f8fb); } / header / .event-header{ text-align:center; margin-bottom:25px; } .event-header .section-title{ font-size:26px; font-weight:800; margin-bottom:10px; } / target stat / .event-target{ display:inline-block; padding:12px 26px; border-radius:20px; font-size:18px; font-weight:700; } .event-target span{ font-size:28px; font-weight:900; margin:0 6px; } / input focus / .event-form input:focus{ border-color:#213448; box-shadow:0 0 0 3px rgba(33,52,72,.15); } / responsive / @media(max-width:768px){ .event-target{ font-size:16px; } .event-target span{ font-size:22px; } } / เว้นระยะระหว่างฟอร์มใน EVENT / .event-form{ margin-bottom:24px; } / ไม่ให้ฟอร์มสุดท้ายมีช่องว่างเกิน / .event-form:last-child{ margin-bottom:0; } / ================= FOOTER EVENT STYLE ================= / .footer{ margin-top:80px; border-top:5px solid #547792; font-family:'Segoe UI',sans-serif; } .footer-inner{ max-width:1300px; margin:auto; padding:50px 20px 30px; text-align:center; } / TITLE WITH LINES / .footer-title{ display:flex; align-items:center; gap:20px; margin-bottom:30px; } .footer-title span{ flex:1; height:3px; background:linear-gradient(to right,transparent,#547792,transparent); } .footer-title h2{ font-size:30px; font-weight:900; letter-spacing:3px; color:#547792; } / LOGOS / .footer-logos{ display:flex; justify-content:center; gap:60px; margin:40px 0; } .footer-logos img{ height:140px; object-fit:contain; filter:drop-shadow(0 10px 20px rgba(0,0,0,.25)); transition:.3s; } .footer-logos img:hover{ transform:scale(1.05); } / TEXT / .footer-text h3{ font-size:26px; font-weight:800; margin-bottom:10px; } .footer-text p{ font-size:19px; line-height:1.7; color:#444; } / STUDENTS / .footer-students{ margin-top:40px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; } .student-card{ background:#fff; padding:20px; border-radius:18px; box-shadow:0 8px 20px rgba(0,0,0,.12); position:relative; } .student-card span{ position:absolute; top:-15px; left:20px; background:#547792; color:#fff; font-weight:900; padding:8px 14px; border-radius:12px; } .student-card p{ font-size:18px; font-weight:700; margin-top:20px; } .student-card small{ font-size:15px; color:#666; } / BOTTOM / .footer-bottom{ margin-top:50px; background:#547792; color:#fff; padding:16px; font-size:15px; font-weight:600; text-align:center; } / ================= RESPONSIVE ================= */ @media(max-width:768px){ .footer-logos{ gap:30px; } .footer-logos img{ height:110px; } .footer-title h2{ font-size:24px; } }

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.42 | proxy | phpinfo | Settings