File manager - Edit - /home/webapp68.cm.in.th/u68319090026/final/news/style.css
Back
/* styles.css */ /* ตั้งค่าสีพื้นหลังแบบไล่โทนสีฟ้า-เขียวอ่อน */ body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #2bc0e4, #eaecc6); color: #333; min-height: 100vh; } /* จัดตำแหน่งและดีไซน์ dashboard cards */ #dashboardCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding: 30px; max-width: 1000px; margin: 40px auto; } .card { background: white; border-radius: 12px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); padding: 25px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; text-align: center; } .card:hover { transform: translateY(-8px); box-shadow: 0 16px 32px rgba(0,0,0,0.15); } .card h2 { font-size: 3rem; margin: 0 0 10px 0; color: #2bc0e4; } .card p { font-size: 1.25rem; font-weight: 600; margin: 0; } /* ตกแต่งปุ่ม logout */ button.logout-btn { position: fixed; top: 20px; right: 20px; background-color: #2bc0e4; border: none; color: white; padding: 10px 18px; font-size: 1rem; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 10px rgba(43,192,228,0.5); transition: background-color 0.3s ease; } button.logout-btn:hover { background-color: #2396c9; } /* ฟอร์มทั่วไป */ form { background: white; max-width: 500px; margin: 40px auto; padding: 25px 30px; border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); } form label { display: block; margin-bottom: 8px; font-weight: 600; } form input[type="text"], form input[type="password"], form select, form textarea { width: 100%; padding: 10px 14px; margin-bottom: 20px; border: 1.5px solid #ccc; border-radius: 8px; font-size: 1rem; transition: border-color 0.3s ease; } form input[type="text"]:focus, form input[type="password"]:focus, form select:focus, form textarea:focus { border-color: #2bc0e4; outline: none; } /* ปุ่มฟอร์ม */ form button { background-color: #2bc0e4; border: none; color: white; padding: 12px 25px; font-size: 1.1rem; border-radius: 10px; cursor: pointer; transition: background-color 0.3s ease; } form button:hover { background-color: #2396c9; } /* ตารางจัดการ */ table { border-collapse: collapse; width: 90%; margin: 40px auto; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); } th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #2bc0e4; color: white; font-weight: 600; } tr:hover { background-color: #f1f9ff; } /* ลิงก์และปุ่มจัดการ */ button.edit-btn, button.delete-btn { background-color: #2bc0e4; color: white; border: none; padding: 6px 14px; border-radius: 8px; cursor: pointer; margin-right: 8px; font-size: 0.9rem; transition: background-color 0.3s ease; } button.delete-btn { background-color: #e74c3c; } button.edit-btn:hover { background-color: #2396c9; } button.delete-btn:hover { background-color: #c0392b; } /* Responsive */ @media (max-width: 600px) { #dashboardCards { grid-template-columns: 1fr; padding: 20px; } table { width: 100%; } form { width: 90%; } }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.42 |
proxy
|
phpinfo
|
Settings