diff --git a/desktop/views/css/room.css b/desktop/views/css/room.css index d665ffb..f982a59 100644 --- a/desktop/views/css/room.css +++ b/desktop/views/css/room.css @@ -589,10 +589,16 @@ input:focus, .form-input:focus { border-radius: 10px; font-weight: 700; cursor: pointer; } .anime-results { - flex: 1; overflow-y: auto; - display: flex; flex-direction: column; gap: 12px; - min-height: 300px; + flex: 1; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 12px; + min-height: 0; + max-height: 60vh; + padding-right: 8px; } + .anime-result-item, .search-item { display: flex; gap: 16px; padding: 12px; background: rgba(255, 255, 255, 0.03); @@ -625,24 +631,74 @@ input:focus, .form-input:focus { margin-bottom: 8px; font-weight: 700; } +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +input[type=number] { + -moz-appearance: textfield; /* Firefox */ +} + +/* Enhanced Episode Control Container */ .ep-control { - display: flex; align-items: center; - background: rgba(255,255,255,0.05); - border: 1px solid var(--glass-border); - border-radius: 10px; padding: 4px; width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + background: rgba(0, 0, 0, 0.4); /* Darker background for visibility */ + border: 1px solid rgba(255, 255, 255, 0.2); /* brighter border */ + border-radius: 12px; + padding: 4px; + width: 100%; + height: 48px; /* Fixed height */ + margin-top: 8px; + box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); } + +/* Button Styling */ .ep-btn { - width: 36px; height: 36px; - display: flex; align-items: center; justify-content: center; - background: rgba(255,255,255,0.1); - border: none; color: white; border-radius: 8px; - cursor: pointer; transition: 0.2s; + width: 40px; /* Fixed width */ + height: 38px; /* Fixed height */ + flex-shrink: 0; /* Prevent shrinking */ + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255,255,255,0.05); + color: white; + border-radius: 8px; + cursor: pointer; + font-size: 1.2rem; + transition: all 0.2s ease; } -.ep-btn:hover { background: rgba(255,255,255,0.2); } + +.ep-btn:hover { + background: var(--brand-color); + border-color: var(--brand-color); + transform: translateY(-1px); +} + +.ep-btn:active { + transform: translateY(1px); +} + +/* Input Styling */ .ep-input { - flex: 1; background: transparent; border: none; - color: white; text-align: center; font-size: 1.1rem; - font-weight: 700; outline: none; + flex: 1; + min-width: 0; /* Allows flex item to shrink below content size */ + background: transparent; + border: none; + color: white; + text-align: center; + font-size: 1.2rem; + font-weight: 800; + outline: none; + font-family: monospace; /* Better number alignment */ +} + +.ep-input:focus { + background: transparent; + border: none; } .cat-toggle { diff --git a/docker/views/css/room.css b/docker/views/css/room.css index d665ffb..f982a59 100644 --- a/docker/views/css/room.css +++ b/docker/views/css/room.css @@ -589,10 +589,16 @@ input:focus, .form-input:focus { border-radius: 10px; font-weight: 700; cursor: pointer; } .anime-results { - flex: 1; overflow-y: auto; - display: flex; flex-direction: column; gap: 12px; - min-height: 300px; + flex: 1; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 12px; + min-height: 0; + max-height: 60vh; + padding-right: 8px; } + .anime-result-item, .search-item { display: flex; gap: 16px; padding: 12px; background: rgba(255, 255, 255, 0.03); @@ -625,24 +631,74 @@ input:focus, .form-input:focus { margin-bottom: 8px; font-weight: 700; } +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +input[type=number] { + -moz-appearance: textfield; /* Firefox */ +} + +/* Enhanced Episode Control Container */ .ep-control { - display: flex; align-items: center; - background: rgba(255,255,255,0.05); - border: 1px solid var(--glass-border); - border-radius: 10px; padding: 4px; width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + background: rgba(0, 0, 0, 0.4); /* Darker background for visibility */ + border: 1px solid rgba(255, 255, 255, 0.2); /* brighter border */ + border-radius: 12px; + padding: 4px; + width: 100%; + height: 48px; /* Fixed height */ + margin-top: 8px; + box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); } + +/* Button Styling */ .ep-btn { - width: 36px; height: 36px; - display: flex; align-items: center; justify-content: center; - background: rgba(255,255,255,0.1); - border: none; color: white; border-radius: 8px; - cursor: pointer; transition: 0.2s; + width: 40px; /* Fixed width */ + height: 38px; /* Fixed height */ + flex-shrink: 0; /* Prevent shrinking */ + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255,255,255,0.05); + color: white; + border-radius: 8px; + cursor: pointer; + font-size: 1.2rem; + transition: all 0.2s ease; } -.ep-btn:hover { background: rgba(255,255,255,0.2); } + +.ep-btn:hover { + background: var(--brand-color); + border-color: var(--brand-color); + transform: translateY(-1px); +} + +.ep-btn:active { + transform: translateY(1px); +} + +/* Input Styling */ .ep-input { - flex: 1; background: transparent; border: none; - color: white; text-align: center; font-size: 1.1rem; - font-weight: 700; outline: none; + flex: 1; + min-width: 0; /* Allows flex item to shrink below content size */ + background: transparent; + border: none; + color: white; + text-align: center; + font-size: 1.2rem; + font-weight: 800; + outline: none; + font-family: monospace; /* Better number alignment */ +} + +.ep-input:focus { + background: transparent; + border: none; } .cat-toggle {