36 lines
4.5 KiB
CSS
36 lines
4.5 KiB
CSS
|
.form-control, .form-select { background-color: var(--bg-element); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: var(--radius-md); padding: 0.6rem 1rem; }
|
||
|
|
.form-select option { background-color: var(--bg-element); color: var(--text-primary); }
|
||
|
|
.form-control::placeholder { color: var(--text-tertiary); opacity: 0.8; }
|
||
|
|
.form-control:focus, .form-select:focus { background-color: var(--bg-element-hover); border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-transparent); color: var(--text-primary); outline: none; }
|
||
|
|
|
||
|
|
.btn-control { background-color: var(--bg-element); border: 1px solid var(--border-color); color: var(--text-primary); padding: 0.6rem 1.2rem; border-radius: var(--radius-md); font-weight: 500; transition: var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; }
|
||
|
|
.btn-control .icon-placeholder::before { font-family: sans-serif; }
|
||
|
|
#prevPage .icon-placeholder::before { content: "\2190"; }
|
||
|
|
#nextPage .icon-placeholder::before { content: "\2192"; }
|
||
|
|
#playEpgProgramBtn .icon-placeholder::before { content: "\25B6"; }
|
||
|
|
#saveSettingsBtn .icon-placeholder::before { content: "\1F4BE"; }
|
||
|
|
#forceEpgRematchBtn .icon-placeholder::before { content: "\21BB"; }
|
||
|
|
#exportSettingsBtn .icon-placeholder::before { content: "\1F4E4"; }
|
||
|
|
#clearCacheBtn .icon-placeholder::before { content: "\1F5D1"; }
|
||
|
|
#importSettingsInput + label .icon-placeholder::before { content: "\1F4E5"; }
|
||
|
|
#sendM3UToServerBtn .icon-placeholder::before { content: "\1F4E1"; }
|
||
|
|
.btn-control:hover:not(:disabled) { background-color: var(--bg-element-hover); border-color: var(--border-color-strong); transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
|
||
|
|
.btn-control:active:not(:disabled) { transform: translateY(0px) scale(0.98); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
|
||
|
|
.btn-control.primary { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white !important; border: none; }
|
||
|
|
.btn-control.primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--accent-hover), var(--accent-primary)); transform: translateY(-1px); box-shadow: 0 3px 8px color-mix(in srgb, var(--accent-primary) 40%, transparent); }
|
||
|
|
.btn-control:disabled { opacity: 0.6; cursor: not-allowed; }
|
||
|
|
.btn-control.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.85rem; border-radius: var(--radius-sm); }
|
||
|
|
.btn-control.btn-danger { background-color: var(--danger); border-color: var(--danger); color: white !important; }
|
||
|
|
.btn-control.btn-danger:hover:not(:disabled) { background-color: color-mix(in srgb, var(--danger) 85%, black); border-color: color-mix(in srgb, var(--danger) 85%, black); box-shadow: 0 3px 8px color-mix(in srgb, var(--danger) 40%, transparent); }
|
||
|
|
|
||
|
|
#loading-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(var(--rgb-bg-tertiary), 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
|
||
|
|
#loading-overlay.show { opacity: 1; pointer-events: auto; }
|
||
|
|
.loader { width: 50px; height: 50px; border: 4px solid var(--accent-primary); border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
|
||
|
|
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
||
|
|
|
||
|
|
#notification { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(120%); padding: 0.8rem 1.5rem; border-radius: var(--radius-md); box-shadow: 0 5px 15px var(--shadow-color); z-index: 2050; color: white; font-weight: 500; max-width: 90%; text-align: center; opacity: 0; transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid transparent; font-size: 0.9rem; }
|
||
|
|
#notification.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
|
||
|
|
#notification.success { background-color: rgba(var(--rgb-accent-primary), 0.85); border-color: var(--accent-primary); }
|
||
|
|
#notification.error { background-color: rgba(220, 53, 69, 0.85); border-color: var(--danger); }
|
||
|
|
#notification.info { background-color: rgba(23, 162, 184, 0.85); border-color: var(--info); }
|
||
|
|
#notification.warning { background-color: rgba(255, 193, 7, 0.85); border-color: var(--warning); color: #333; }
|