diff options
Diffstat (limited to 'frontend/coverage/src/components/Settings.css.html')
| -rw-r--r-- | frontend/coverage/src/components/Settings.css.html | 361 |
1 files changed, 299 insertions, 62 deletions
diff --git a/frontend/coverage/src/components/Settings.css.html b/frontend/coverage/src/components/Settings.css.html index 28a1915..4109bba 100644 --- a/frontend/coverage/src/components/Settings.css.html +++ b/frontend/coverage/src/components/Settings.css.html @@ -223,7 +223,86 @@ <a name='L158'></a><a href='#L158'>158</a> <a name='L159'></a><a href='#L159'>159</a> <a name='L160'></a><a href='#L160'>160</a> -<a name='L161'></a><a href='#L161'>161</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral"> </span> +<a name='L161'></a><a href='#L161'>161</a> +<a name='L162'></a><a href='#L162'>162</a> +<a name='L163'></a><a href='#L163'>163</a> +<a name='L164'></a><a href='#L164'>164</a> +<a name='L165'></a><a href='#L165'>165</a> +<a name='L166'></a><a href='#L166'>166</a> +<a name='L167'></a><a href='#L167'>167</a> +<a name='L168'></a><a href='#L168'>168</a> +<a name='L169'></a><a href='#L169'>169</a> +<a name='L170'></a><a href='#L170'>170</a> +<a name='L171'></a><a href='#L171'>171</a> +<a name='L172'></a><a href='#L172'>172</a> +<a name='L173'></a><a href='#L173'>173</a> +<a name='L174'></a><a href='#L174'>174</a> +<a name='L175'></a><a href='#L175'>175</a> +<a name='L176'></a><a href='#L176'>176</a> +<a name='L177'></a><a href='#L177'>177</a> +<a name='L178'></a><a href='#L178'>178</a> +<a name='L179'></a><a href='#L179'>179</a> +<a name='L180'></a><a href='#L180'>180</a> +<a name='L181'></a><a href='#L181'>181</a> +<a name='L182'></a><a href='#L182'>182</a> +<a name='L183'></a><a href='#L183'>183</a> +<a name='L184'></a><a href='#L184'>184</a> +<a name='L185'></a><a href='#L185'>185</a> +<a name='L186'></a><a href='#L186'>186</a> +<a name='L187'></a><a href='#L187'>187</a> +<a name='L188'></a><a href='#L188'>188</a> +<a name='L189'></a><a href='#L189'>189</a> +<a name='L190'></a><a href='#L190'>190</a> +<a name='L191'></a><a href='#L191'>191</a> +<a name='L192'></a><a href='#L192'>192</a> +<a name='L193'></a><a href='#L193'>193</a> +<a name='L194'></a><a href='#L194'>194</a> +<a name='L195'></a><a href='#L195'>195</a> +<a name='L196'></a><a href='#L196'>196</a> +<a name='L197'></a><a href='#L197'>197</a> +<a name='L198'></a><a href='#L198'>198</a> +<a name='L199'></a><a href='#L199'>199</a> +<a name='L200'></a><a href='#L200'>200</a> +<a name='L201'></a><a href='#L201'>201</a> +<a name='L202'></a><a href='#L202'>202</a> +<a name='L203'></a><a href='#L203'>203</a> +<a name='L204'></a><a href='#L204'>204</a> +<a name='L205'></a><a href='#L205'>205</a> +<a name='L206'></a><a href='#L206'>206</a> +<a name='L207'></a><a href='#L207'>207</a> +<a name='L208'></a><a href='#L208'>208</a> +<a name='L209'></a><a href='#L209'>209</a> +<a name='L210'></a><a href='#L210'>210</a> +<a name='L211'></a><a href='#L211'>211</a> +<a name='L212'></a><a href='#L212'>212</a> +<a name='L213'></a><a href='#L213'>213</a> +<a name='L214'></a><a href='#L214'>214</a> +<a name='L215'></a><a href='#L215'>215</a> +<a name='L216'></a><a href='#L216'>216</a> +<a name='L217'></a><a href='#L217'>217</a> +<a name='L218'></a><a href='#L218'>218</a> +<a name='L219'></a><a href='#L219'>219</a> +<a name='L220'></a><a href='#L220'>220</a> +<a name='L221'></a><a href='#L221'>221</a> +<a name='L222'></a><a href='#L222'>222</a> +<a name='L223'></a><a href='#L223'>223</a> +<a name='L224'></a><a href='#L224'>224</a> +<a name='L225'></a><a href='#L225'>225</a> +<a name='L226'></a><a href='#L226'>226</a> +<a name='L227'></a><a href='#L227'>227</a> +<a name='L228'></a><a href='#L228'>228</a> +<a name='L229'></a><a href='#L229'>229</a> +<a name='L230'></a><a href='#L230'>230</a> +<a name='L231'></a><a href='#L231'>231</a> +<a name='L232'></a><a href='#L232'>232</a> +<a name='L233'></a><a href='#L233'>233</a> +<a name='L234'></a><a href='#L234'>234</a> +<a name='L235'></a><a href='#L235'>235</a> +<a name='L236'></a><a href='#L236'>236</a> +<a name='L237'></a><a href='#L237'>237</a> +<a name='L238'></a><a href='#L238'>238</a> +<a name='L239'></a><a href='#L239'>239</a> +<a name='L240'></a><a href='#L240'>240</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> @@ -383,18 +462,151 @@ <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js">.settings-page { - padding: 2rem; +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js">.settings-page.variant-glass { + padding: 2.5rem; max-width: 800px; margin: 0 auto; + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-radius: 24px; + border: 1px solid rgba(255, 255, 255, 0.1); + font-family: system-ui, -apple-system, sans-serif; + color: var(--text-color); + margin-top: 2rem; + margin-bottom: 2rem; +} + +.settings-page.variant-glass h2, +.settings-page.variant-glass h3 { + font-weight: 700; + letter-spacing: -0.02em; + color: var(--text-color); + opacity: 0.9; } -.add-feed-section { - background: var(--sidebar-bg); +.add-feed-section, +.appearance-section, +.import-section, +.export-section, +.feed-list-section { + background: rgba(255, 255, 255, 0.03); padding: 1.5rem; - border-radius: 8px; + border-radius: 16px; margin-bottom: 2rem; - border: 1px solid var(--border-color); + border: 1px solid rgba(255, 255, 255, 0.05); + transition: all 0.3s ease; +} + +.add-feed-section:hover, +.appearance-section:hover, +.import-section:hover, +.export-section:hover, +.feed-list-section:hover { + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.1); +} + +.font-selector { + display: flex; + align-items: center; + gap: 1rem; +} + +.font-select { + padding: 0.6rem 1rem; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(0, 0, 0, 0.1); + color: var(--text-color); + border-radius: 20px; + font-size: 1rem; + min-width: 200px; + cursor: pointer; + outline: none; + transition: border-color 0.2s; +} + +.font-select:focus { + border-color: rgba(255, 255, 255, 0.3); } .add-feed-form { @@ -404,32 +616,45 @@ .feed-input { flex: 1; - padding: 0.5rem; - border: 1px solid var(--border-color); - background: var(--bg-color); + padding: 0.6rem 1.2rem; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(0, 0, 0, 0.1); color: var(--text-color); - border-radius: 4px; + border-radius: 20px; font-size: 1rem; + outline: none; + transition: border-color 0.2s; +} + +.feed-input:focus { + border-color: rgba(255, 255, 255, 0.3); } .error-message { - color: #d32f2f; + color: #ff5252; margin-top: 1rem; + font-weight: 600; } .settings-feed-list { list-style: none; padding: 0; - border: 1px solid var(--border-color); - border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: 12px; + overflow: hidden; } .settings-feed-item { display: flex; justify-content: space-between; align-items: center; - padding: 1rem; - border-bottom: 1px solid var(--border-color); + padding: 1.2rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + transition: background 0.2s; +} + +.settings-feed-item:hover { + background: rgba(255, 255, 255, 0.02); } .settings-feed-item:last-child { @@ -439,109 +664,121 @@ .feed-info { display: flex; flex-direction: column; + gap: 0.2rem; } .feed-title { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-weight: bold; - font-size: 1.1rem; + font-weight: 600; + font-size: 1.05rem; + opacity: 0.9; } .feed-url { color: var(--text-color); - opacity: 0.6; - font-size: 0.9rem; + opacity: 0.5; + font-size: 0.85rem; } .delete-btn { - background: #ff5252; - color: white; - border: none; + background: rgba(255, 82, 82, 0.15); + color: #ff8a80; + border: 1px solid rgba(255, 82, 82, 0.2); padding: 0.5rem 1rem; - border-radius: 4px; + border-radius: 12px; cursor: pointer; + font-weight: 600; + transition: all 0.2s; } -.delete-btn:hover { - background: #ff1744; -} - -.delete-btn:disabled { - background: #ffcdd2; - cursor: not-allowed; +.delete-btn:hover:not(:disabled) { + background: rgba(255, 82, 82, 0.3); + color: #fff; + border-color: rgba(255, 82, 82, 0.4); + transform: scale(1.05); } .import-export-section { display: flex; gap: 2rem; - margin-bottom: 2rem; } @media (max-width: 600px) { + .settings-page.variant-glass { + padding: 1.5rem; + margin-top: 1rem; + } + + .add-feed-form { + flex-direction: column; + } + .import-export-section { flex-direction: column; + gap: 1rem; } -} -.import-section, -.export-section { - flex: 1; - background: var(--sidebar-bg); - padding: 1.5rem; - border-radius: 8px; - border: 1px solid var(--border-color); + .settings-feed-item { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } } .import-form { display: flex; flex-direction: column; - gap: 1rem; + gap: 1.2rem; } .file-input { font-size: 0.9rem; max-width: 100%; + color: var(--text-color); + opacity: 0.8; } .export-buttons { display: flex; - gap: 1rem; + gap: 0.8rem; flex-wrap: wrap; } .export-btn { display: inline-block; - padding: 0.5rem 1rem; - background: var(--bg-color); - color: var(--link-color); + padding: 0.6rem 1.2rem; + background: rgba(255, 255, 255, 0.05); + color: var(--text-color); text-decoration: none; - border: 1px solid var(--border-color); - border-radius: 4px; - font-weight: bold; - text-align: center; - min-width: 70px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + font-weight: 600; + transition: all 0.2s; } .export-btn:hover { - background: var(--sidebar-bg); + background: rgba(255, 255, 255, 0.1); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } -button { +button:not(.delete-btn) { cursor: pointer; - padding: 0.5rem 1rem; - border-radius: 4px; - border: 1px solid var(--border-color); - background: var(--bg-color); + padding: 0.6rem 1.2rem; + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.1); color: var(--text-color); - font-weight: bold; + font-weight: 600; + transition: all 0.2s; } -button:hover:not(:disabled) { - background: var(--sidebar-bg); +button:not(.delete-btn):hover:not(:disabled) { + background: rgba(255, 255, 255, 0.2); + transform: scale(1.02); } button:disabled { - opacity: 0.5; + opacity: 0.4; cursor: not-allowed; }</pre></td></tr></table></pre> @@ -550,7 +787,7 @@ button:disabled { <div class='footer quiet pad2 space-top1 center small'> Code coverage generated by <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a> - at 2026-02-14T18:02:09.004Z + at 2026-02-15T05:30:50.842Z </div> <script src="../../prettify.js"></script> <script> |