style-settings.css
1 .source-list { 2 display: flex; 3 flex-direction: column; 4 gap: 1rem; 5 margin-bottom: 2rem; 6 } 7 8 .empty-state { 9 text-align: center; 10 padding: 3rem; 11 border: 1px dashed rgba(255, 255, 255, 0.1); 12 border-radius: 8px; 13 background: rgba(255, 255, 255, 0.03); 14 } 15 16 .hint { 17 color: rgba(255, 255, 255, 0.6); 18 font-size: 0.9rem; 19 } 20 21 .source-item { 22 display: flex; 23 justify-content: space-between; 24 align-items: center; 25 padding: 1rem; 26 border: 1px solid rgba(255, 255, 255, 0.05); 27 border-radius: 15px; 28 background-color: rgba(255, 255, 255, 0.03); 29 backdrop-filter: blur(10px); 30 box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); 31 transition: all 0.3s ease; 32 } 33 34 .source-item:hover { 35 border-color: rgba(255, 255, 255, 0.1); 36 box-shadow: 0 8px 32px 0 rgba(74, 222, 128, 0.1); 37 } 38 39 .source-info { 40 flex: 1; 41 } 42 43 .source-info h3 { 44 margin: 0; 45 margin-bottom: 0.5rem; 46 color: #e1e1e3; 47 } 48 49 .url { 50 color: rgba(255, 255, 255, 0.6); 51 margin: 0.25rem 0; 52 word-break: break-all; 53 max-width: 90%; 54 } 55 56 .method-badge { 57 display: inline-block; 58 padding: 0.2rem 0.5rem; 59 background-color: rgba(255, 255, 255, 0.05); 60 border-radius: 4px; 61 font-size: 0.8rem; 62 margin-right: 0.5rem; 63 color: #e1e1e3; 64 } 65 66 .status-badge { 67 display: inline-block; 68 padding: 0.2rem 0.5rem; 69 background-color: rgba(255, 255, 255, 0.05); 70 color: rgba(255, 255, 255, 0.7); 71 border-radius: 4px; 72 font-size: 0.8rem; 73 } 74 75 .status-badge.enabled { 76 background-color: rgba(74, 222, 128, 0.15); 77 color: #4ade80; 78 text-shadow: 0 0 10px rgba(74, 222, 128, 0.3); 79 } 80 81 .source-actions { 82 display: flex; 83 gap: 0.5rem; 84 } 85 86 .action-btn { 87 padding: 0.4rem 0.75rem; 88 border: none; 89 border-radius: 4px; 90 cursor: pointer; 91 font-size: 0.9rem; 92 transition: all 0.2s ease; 93 } 94 95 .action-btn.toggle { 96 background-color: rgba(255, 255, 255, 0.05); 97 color: #e1e1e3; 98 } 99 100 .action-btn.toggle:hover { 101 background-color: rgba(255, 255, 255, 0.1); 102 } 103 104 .action-btn.delete { 105 background-color: rgba(239, 68, 68, 0.15); 106 color: #ef4444; 107 } 108 109 .action-btn.delete:hover { 110 background-color: rgba(239, 68, 68, 0.25); 111 } 112 113 .add-button { 114 position: fixed; 115 bottom: 2rem; 116 right: 2rem; 117 width: 56px; 118 height: 56px; 119 border-radius: 50%; 120 background: linear-gradient(45deg, #4ade80, #3b82f6); 121 color: white; 122 display: flex; 123 align-items: center; 124 justify-content: center; 125 border: none; 126 box-shadow: 0 0 20px rgba(74, 222, 128, 0.3); 127 cursor: pointer; 128 transition: 129 transform 0.2s, 130 box-shadow 0.2s; 131 } 132 133 .add-button:hover { 134 transform: scale(1.05); 135 box-shadow: 0 0 30px rgba(74, 222, 128, 0.4); 136 } 137 138 .dialog-backdrop { 139 position: fixed; 140 top: 0; 141 left: 0; 142 width: 100%; 143 height: 100%; 144 background-color: rgba(0, 0, 0, 0.7); 145 display: flex; 146 align-items: center; 147 justify-content: center; 148 z-index: 100; 149 backdrop-filter: blur(3px); 150 } 151 152 .dialog { 153 width: 90%; 154 max-width: 550px; 155 background-color: #171721; 156 border: 1px solid rgba(255, 255, 255, 0.05); 157 border-radius: 15px; 158 padding: 1.5rem; 159 box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); 160 color: #e1e1e3; 161 max-height: 95vh; 162 overflow-y: auto; 163 z-index: 200; 164 } 165 166 .form-group { 167 margin-bottom: 1.25rem; 168 } 169 170 .settings label { 171 display: block; 172 margin-bottom: 0.5rem; 173 font-weight: 500; 174 color: rgba(255, 255, 255, 0.8); 175 } 176 177 .settings input, 178 .settings select, 179 .settings textarea { 180 width: 100%; 181 padding: 0.75rem; 182 background: rgba(255, 255, 255, 0.05); 183 border: 1px solid rgba(255, 255, 255, 0.1); 184 color: #e1e1e3; 185 border-radius: 8px; 186 font-size: 1rem; 187 font-family: inherit; 188 transition: all 0.3s ease; 189 outline: none; 190 } 191 192 .settings input:focus, 193 .settings select:focus, 194 .settings textarea:focus { 195 border-color: rgba(74, 222, 128, 0.5); 196 box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.2); 197 } 198 199 .settings input:hover, 200 .settings select:hover, 201 .settings textarea:hover { 202 background-color: rgba(255, 255, 255, 0.08); 203 } 204 205 .settings textarea { 206 min-height: 15vh; 207 font-family: monospace; 208 resize: vertical; 209 } 210 211 .settings select { 212 appearance: none; 213 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e1e1e3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); 214 background-repeat: no-repeat; 215 background-position: right 10px center; 216 background-size: 16px; 217 padding-right: 40px; 218 } 219 220 .settings option { 221 background-color: #171721; 222 color: #e1e1e3; 223 padding: 0.75rem; 224 font-size: 1rem; 225 } 226 227 option:hover, option:focus { 228 background-color: rgba(74, 222, 128, 0.2); 229 } 230 231 .dialog-actions { 232 display: flex; 233 flex-wrap: wrap; 234 justify-content: space-between; 235 gap: 1rem; 236 margin-top: 1.5rem; 237 } 238 239 .dialog-actions button { 240 padding: 0.75rem 1.5rem; 241 border-radius: 8px; 242 font-weight: 500; 243 cursor: pointer; 244 transition: all 0.2s ease; 245 } 246 247 .settings button.cancel { 248 background-color: rgba(255, 255, 255, 0.05); 249 color: #e1e1e3; 250 border: 1px solid rgba(255, 255, 255, 0.1); 251 } 252 253 .settings button.cancel:hover { 254 background-color: rgba(255, 255, 255, 0.08); 255 } 256 257 .settings button.submit { 258 background: linear-gradient(45deg, #4ade80, #3b82f6); 259 color: white; 260 border: none; 261 box-shadow: 0 0 10px rgba(74, 222, 128, 0.2); 262 } 263 264 .settings button.submit:hover { 265 box-shadow: 0 0 15px rgba(74, 222, 128, 0.3); 266 } 267 268 .settings button.test { 269 display: flex; 270 align-items: center; 271 gap: 0.5rem; 272 background-color: rgba(23, 255, 236, 0.2); 273 color: #e1e1e3; 274 border: 1px solid rgba(255, 255, 255, 0.1); 275 } 276 .settings button.test:hover { 277 background-color: rgba(23, 255, 236, 0.1); 278 } 279 .settings button.test:active { 280 transition: all 0s; 281 background-color: rgba(5, 37, 35, 0.6); 282 }