diff --git a/celeGossips/style.css b/celeGossips/style.css index 341c964..98490f7 100644 --- a/celeGossips/style.css +++ b/celeGossips/style.css @@ -25,3 +25,87 @@ header { padding: 20px; } +main { + padding: 20px; +} + +.controls { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 20px; +} + +.controls label { + margin-right: 10px; +} + +.controls input { + padding: 5px; + font-size: 16px; + margin-right: 10px; + width: 60px; + text-align: center; + border: 2px solid #ddd; + border-radius: 5px; +} + +button { + padding: 10px 20px; + font-size: 16px; + border: none; + border-radius: 5px; + background: #6200ea; + color: #fff; + cursor: pointer; + transition: background 0.3s ease; +} + +button:hover { + background: #3700b3; +} + +.display { + background: #e0e0e0; + padding: 20px; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + margin-bottom: 20px; + max-height: 200px; + overflow-y: auto; +} + +.actions { + display: flex; + justify-content: center; + gap: 10px; + margin-bottom: 20px; +} + +.scrollable { + max-height: 150px; + overflow-y: auto; + padding-right: 10px; +} + +#gossip-history { + list-style-type: none; + padding: 0; + margin: 0; +} + +#gossip-history li { + background: #fff3e0; + padding: 10px; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + margin-bottom: 10px; + transition: background 0.3s, box-shadow 0.3s; +} + +footer { + text-align: center; + margin-top: 20px; + font-size: 14px; + color: #4e342e; +}