.add-system-app-overlay { z-index: 2000; } .add-system-app-card { position: fixed; display: flex; top: 10%; flex-direction: column; align-items: center; width: calc(90vw - 60px); max-width: 400px; max-height: calc(80vh - 60px); overflow-y: scroll; padding: 30px; background-color: #fff; border-radius: 15px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); } .add-system-app-title { font-size: 26px; user-select: none; margin-bottom: 20px; } .add-system-app-content { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .add-system-app-content input { width: 100%; padding: 15px; background-color: #F5F5F5; border: 1px solid #ccc; outline-color: #007bff; border-radius: 10px; box-sizing: border-box; font-size: 16px; } .add-system-app-button { margin-top: 15px; width: 100%; padding: 12px; border: none; border-radius: 12px; font-size: 18px; font-weight: bold; background-color: #007bff; color: white; user-select: none; } .current-system-app-list { margin-top: 25px; margin-bottom: 10px; user-select: none; } .current-system-app-list-content { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; } .system-app-item { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 100%; border-bottom: 1px solid #ccc; padding: 10px; word-wrap: break-word; overflow-wrap: anywhere; word-break: break-all; } .system-app-item:last-child { border-bottom: none; } .remove-system-app-button { flex-shrink: 0; margin-left: 10px; background-color: #e84d4d; border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; } @media (prefers-color-scheme: dark) { .add-system-app-card { background-color: #343434; } .add-system-app-content input { background-color: #232323; color: #fff; border: 1px solid #6E6E6E; } .system-app-item { border-bottom: 1px solid #6E6E6E; } }