Settings Template and Popup in Header bar
This commit is contained in:
parent
fcc1ff392c
commit
d2533ee98f
@ -10,10 +10,7 @@ import IFrontendSettings from "./modules/interfaces/IFrontendSettings";
|
||||
export default function App(){
|
||||
const [connected, setConnected] = React.useState(false);
|
||||
const [showSearch, setShowSearch] = React.useState(false);
|
||||
const [showQueue, setShowQueue] = React.useState(false);
|
||||
const [lastMangaListUpdate, setLastMangaListUpdate] = React.useState<Date>(new Date());
|
||||
const [lastJobListUpdate, setLastJobListUpdate] = React.useState<Date>(new Date());
|
||||
const [joblistUpdateInterval, setJoblistUpdateInterval] = React.useState<number>();
|
||||
const [frontendSettings, setFrontendSettings] = useState<IFrontendSettings>({jobInterval: new Date(0,0,0,3)});
|
||||
|
||||
useEffect(() => {
|
||||
checkConnection().then(res => setConnected(res)).catch(() => setConnected(false));
|
||||
@ -27,7 +24,7 @@ export default function App(){
|
||||
}
|
||||
|
||||
return(<div>
|
||||
<Header/>
|
||||
<Header settings={frontendSettings} changeSettings={setFrontendSettings}/>
|
||||
{connected
|
||||
? <>
|
||||
{showSearch
|
||||
|
||||
BIN
Website/media/connector-icons/bato.ico
Normal file
BIN
Website/media/connector-icons/bato.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
Website/media/connector-icons/gotify-logo.png
Normal file
BIN
Website/media/connector-icons/gotify-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
Website/media/connector-icons/kavita.png
Normal file
BIN
Website/media/connector-icons/kavita.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 440 B |
43
Website/media/connector-icons/komga.svg
Normal file
43
Website/media/connector-icons/komga.svg
Normal file
@ -0,0 +1,43 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="512pt"
|
||||
viewBox="0 0 512 512"
|
||||
width="512pt"
|
||||
version="1.1"
|
||||
id="svg4586">
|
||||
<path
|
||||
d="m512 256c0 141.386719-114.613281 256-256 256s-256-114.613281-256-256 114.613281-256 256-256 256 114.613281 256 256zm0 0"
|
||||
fill="#005ed3"
|
||||
id="path4556"/>
|
||||
<path
|
||||
d="m 512,256 c 0,-11.71094 -0.80469,-23.23047 -2.32422,-34.52344 L 382.48047,94.28125 320.52344,121.85938 256,56.933594 212.69531,131.30469 129.51953,94.28125 141.86719,178.42187 49.949219,193.81641 114.32031,256 l -64.371091,62.18359 82.121091,82.16016 -2.55078,17.375 91.95703,91.95703 C 232.76953,511.19531 244.28906,512 256,512 397.38672,512 512,397.38672 512,256 Z"
|
||||
id="path4558"
|
||||
style="fill:#00459f"/>
|
||||
<path
|
||||
d="m256 86.742188 37.109375 63.738281 70.574219-31.414063-10.527344 71.71875 77.078125 12.910156-54.144531 52.304688 54.144531 52.304688-77.078125 12.910156 10.527344 71.71875-70.574219-31.414063-37.109375 63.738281-37.109375-63.738281-70.574219 31.414063 10.527344-71.71875-77.078125-12.910156 54.144531-52.304688-54.144531-52.304688 77.078125-12.910156-10.527344-71.71875 70.574219 31.414063zm0 0"
|
||||
fill="#ff0335"
|
||||
id="path4560"/>
|
||||
<path
|
||||
d="m430.230469 308.300781-77.070313 12.910157 10.519532 71.71875-70.570313-31.410157-37.109375 63.742188v-338.523438l37.109375 63.742188 70.570313-31.410157-6.757813 46.101563-3.761719 25.617187 58.800782 9.851563 18.269531 3.058594-13.390625 12.929687-40.75 39.371094 11.378906 10.988281zm0 0"
|
||||
fill="#c2001b"
|
||||
id="path4562"/>
|
||||
<path
|
||||
d="m256 455.066406-43.304688-74.371094-83.175781 37.023438 12.347657-84.140625-91.917969-15.394531 64.371093-62.183594-64.371093-62.183594 91.917969-15.394531-12.347657-84.140625 83.179688 37.023438 43.300781-74.371094 43.304688 74.371094 83.175781-37.023438-12.347657 84.140625 91.917969 15.394531-64.371093 62.183594 64.371093 62.183594-91.917969 15.398437 12.347657 84.136719-83.175781-37.023438zm-30.917969-112.722656 30.917969 53.101562 30.917969-53.101562 57.964843 25.800781-8.703124-59.292969 62.238281-10.425781-43.917969-42.425781 43.917969-42.425781-62.238281-10.425781 8.703124-59.292969-57.964843 25.800781-30.917969-53.101562-30.917969 53.101562-57.964843-25.800781 8.703124 59.292969-62.238281 10.425781 43.917969 42.425781-43.917969 42.425781 62.238281 10.425781-8.703124 59.292969zm0 0"
|
||||
fill="#ffdf47"
|
||||
id="path4564"/>
|
||||
<path
|
||||
d="m403.308594 261.441406-5.628906-5.441406 25.160156-24.300781 39.210937-37.878907-55.75-9.339843-36.171875-6.058594 2.800782-19.09375 9.550781-65.046875-83.179688 37.019531-43.300781-74.371093v59.621093l30.921875 53.109375 57.957031-25.808594-3.910156 26.667969-2.546875 17.378907-2.242187 15.25 2.480468.421874 59.761719 10.007813-43.921875 42.421875 16.96875 16.390625 26.953125 26.03125-62.242187 10.429687 8.699218 59.296876-57.957031-25.808594-30.921875 53.109375v59.621093l43.300781-74.371093 83.179688 37.019531-12.351563-84.140625 91.921875-15.398437zm0 0"
|
||||
fill="#fec000"
|
||||
id="path4566"/>
|
||||
<g
|
||||
aria-label="K"
|
||||
transform="matrix(1.1590846,-0.34467221,0.22789693,0.794981,0,0)"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:296.55969238px;line-height:125%;font-family:Impact;-inkscape-font-specification:Impact;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.54528999;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="text4596">
|
||||
<path
|
||||
d="m 220.91497,266.9035 -34.89789,105.85211 38.2284,128.58643 H 161.2555 L 136.63873,400.84769 V 501.34204 H 75.676021 V 266.9035 h 60.962709 v 91.08205 l 27.07845,-91.08205 z"
|
||||
style="font-size:296.55969238px;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.54528999;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path824"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
BIN
Website/media/connector-icons/lunasea.png
Normal file
BIN
Website/media/connector-icons/lunasea.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
1
Website/media/connector-icons/mangadex-logo.svg
Normal file
1
Website/media/connector-icons/mangadex-logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.0 KiB |
BIN
Website/media/connector-icons/mangakatana.png
Normal file
BIN
Website/media/connector-icons/mangakatana.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
Website/media/connector-icons/mangalife.png
Normal file
BIN
Website/media/connector-icons/mangalife.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 477 B |
BIN
Website/media/connector-icons/manganato.png
Normal file
BIN
Website/media/connector-icons/manganato.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
BIN
Website/media/connector-icons/mangasee.png
Normal file
BIN
Website/media/connector-icons/mangasee.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
Website/media/connector-icons/mangaworld.png
Normal file
BIN
Website/media/connector-icons/mangaworld.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
40
Website/media/connector-icons/ntfy.svg
Normal file
40
Website/media/connector-icons/ntfy.svg
Normal file
@ -0,0 +1,40 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50mm" height="50mm" viewBox="0 0 50 50">
|
||||
<defs>
|
||||
<linearGradient id="b">
|
||||
<stop offset="0" style="stop-color:#348878;stop-opacity:1"/>
|
||||
<stop offset="1" style="stop-color:#52bca6;stop-opacity:1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="a">
|
||||
<stop offset="0" style="stop-color:#348878;stop-opacity:1"/>
|
||||
<stop offset="1" style="stop-color:#56bda8;stop-opacity:1"/>
|
||||
</linearGradient>
|
||||
<linearGradient xlink:href="#a" id="e" x1="160.722" x2="168.412" y1="128.533" y2="134.326" gradientTransform="matrix(3.74959 0 0 3.74959 -541.79 -387.599)" gradientUnits="userSpaceOnUse"/>
|
||||
<linearGradient xlink:href="#b" id="c" x1=".034" x2="50.319" y1="0" y2="50.285" gradientTransform="matrix(.99434 0 0 .99434 -.034 0)" gradientUnits="userSpaceOnUse"/>
|
||||
<filter id="d" width="1.176" height="1.211" x="-.076" y="-.092" style="color-interpolation-filters:sRGB">
|
||||
<feFlood flood-color="#fff" flood-opacity=".192" result="flood"/>
|
||||
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/>
|
||||
<feGaussianBlur in="composite1" result="blur" stdDeviation="4"/>
|
||||
<feOffset dx="3" dy="2.954" result="offset"/>
|
||||
<feComposite in="SourceGraphic" in2="offset" result="composite2"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g style="display:inline">
|
||||
<path d="M0 0h50v50H0z" style="fill:url(#c);fill-opacity:1;stroke:none;stroke-width:.286502;stroke-linejoin:bevel"/>
|
||||
</g>
|
||||
<g style="display:inline">
|
||||
<path d="M50.4 46.883c-9.168 0-17.023 7.214-17.023 16.387v.007l.09 71.37-2.303 16.992 31.313-8.319h77.841c9.17 0 17.024-7.224 17.024-16.396V63.27c0-9.17-7.85-16.383-17.016-16.387h-.008zm0 11.566h89.926c3.222.004 5.45 2.347 5.45 4.82v63.655c0 2.475-2.232 4.82-5.457 4.82h-79.54l-15.908 4.807.162-.938-.088-72.343c0-2.476 2.23-4.82 5.455-4.82z" style="color:#fff;display:inline;fill:#fff;stroke:none;stroke-width:1.93113;-inkscape-stroke:none;filter:url(#d)" transform="scale(.26458)"/>
|
||||
</g>
|
||||
<g style="display:inline">
|
||||
<path d="M88.2 95.309H64.92c-1.601 0-2.91 1.236-2.91 2.746l.022 18.602-.435 2.506 6.231-1.881H88.2c1.6 0 2.91-1.236 2.91-2.747v-16.48c0-1.51-1.31-2.746-2.91-2.746z" style="color:#fff;fill:url(#e);stroke:none;stroke-width:2.49558;-inkscape-stroke:none" transform="translate(-51.147 -81.516)"/>
|
||||
<path d="M50.4 46.883c-9.168 0-17.023 7.214-17.023 16.387v.007l.09 71.37-2.303 16.992 31.313-8.319h77.841c9.17 0 17.024-7.224 17.024-16.396V63.27c0-9.17-7.85-16.383-17.016-16.387h-.008zm0 11.566h89.926c3.222.004 5.45 2.347 5.45 4.82v63.655c0 2.475-2.232 4.82-5.457 4.82h-79.54l-15.908 4.807.162-.938-.088-72.343c0-2.476 2.23-4.82 5.455-4.82z" style="color:#fff;fill:#fff;stroke:none;stroke-width:1.93113;-inkscape-stroke:none" transform="scale(.26458)"/>
|
||||
<g style="font-size:8.48274px;font-family:sans-serif;letter-spacing:0;word-spacing:0;fill:#fff;stroke:none;stroke-width:.525121">
|
||||
<path d="M62.57 116.77v-1.312l3.28-1.459q.159-.068.306-.102.158-.045.283-.068l.271-.022v-.09q-.136-.012-.271-.046-.125-.023-.283-.057-.147-.045-.306-.113l-3.28-1.459v-1.323l5.068 2.319v1.413z" style="color:#fff;-inkscape-font-specification:"JetBrains Mono, Bold";fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.45366 0 0 1.72815 -75.122 -171.953)"/>
|
||||
<path d="M62.309 110.31v1.903l3.437 1.53.022.007-.022.008-3.437 1.53v1.892l.37-.17 5.221-2.39v-1.75zm.525.817 4.541 2.08v1.076l-4.541 2.078v-.732l3.12-1.389.003-.002a1.56 1.56 0 0 1 .258-.086h.006l.008-.002c.094-.027.176-.047.246-.06l.498-.041v-.574l-.24-.02a1.411 1.411 0 0 1-.231-.04l-.008-.001-.008-.002a9.077 9.077 0 0 1-.263-.053 2.781 2.781 0 0 1-.266-.097l-.004-.002-3.119-1.39z"
|
||||
style="color:#fff;-inkscape-font-specification:"JetBrains Mono, Bold";fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.45366 0 0 1.72815 -75.122 -171.953)"/>
|
||||
</g>
|
||||
<g style="font-size:8.48274px;font-family:sans-serif;letter-spacing:0;word-spacing:0;fill:#fff;stroke:none;stroke-width:.525121">
|
||||
<path d="M69.171 117.754h5.43v1.278h-5.43Z" style="color:#fff;-inkscape-font-specification:"JetBrains Mono, Bold";fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.44935 0 0 1.66414 -74.104 -166.906)"/>
|
||||
<path d="M68.908 117.492v1.802h5.955v-1.802zm.526.524h4.904v.754h-4.904z" style="color:#fff;-inkscape-font-specification:"JetBrains Mono, Bold";fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.44935 0 0 1.66414 -74.104 -166.906)"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
@ -1,12 +1,15 @@
|
||||
import React from 'react';
|
||||
import '../styles/header.css'
|
||||
import Settings from "./Settings";
|
||||
import IFrontendSettings from "./interfaces/IFrontendSettings";
|
||||
|
||||
export default function Header(){
|
||||
export default function Header({settings, changeSettings} : {settings: IFrontendSettings, changeSettings(settings: IFrontendSettings): void}){
|
||||
return (
|
||||
<header>
|
||||
<div id="titlebox">
|
||||
<img alt="website image is Blahaj" src="media/blahaj.png"/>
|
||||
<img alt="website image is Blahaj" src="../media/blahaj.png"/>
|
||||
<span>Tranga</span>
|
||||
</div>
|
||||
<Settings settings={settings} changeSettings={changeSettings} />
|
||||
</header>)
|
||||
}
|
||||
161
Website/modules/Settings.tsx
Normal file
161
Website/modules/Settings.tsx
Normal file
@ -0,0 +1,161 @@
|
||||
import React, {useState} from 'react';
|
||||
import IFrontendSettings from "./interfaces/IFrontendSettings";
|
||||
import '../styles/settings.css';
|
||||
|
||||
export default function Settings({settings, changeSettings} : {settings: IFrontendSettings, changeSettings(settings: IFrontendSettings): void}) {
|
||||
const [frontendSettings] = useState<IFrontendSettings>(settings);
|
||||
const [showSettings, setShowSettings] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<div id="Settings">
|
||||
<img id="SettingsIcon" src="../media/settings-cogwheel.svg" alt="cogwheel" onClick={() => setShowSettings(true)}/>
|
||||
{showSettings
|
||||
? <div className="popup">
|
||||
<div className="popupHeader">
|
||||
<h1>Settings</h1>
|
||||
<img alt="Close Settings" className="close" src="../media/close-x.svg" onClick={() => setShowSettings(false)}/>
|
||||
</div>
|
||||
<div id="settingsPopupBody" className="popupBody">
|
||||
<div className="settings-section">
|
||||
TRANGA
|
||||
<div className="settings-section-content">
|
||||
<div className="section-item">
|
||||
<span className="settings-section-title">API Settings</span>
|
||||
<label htmlFor="settingApiUri">API URI:</label>
|
||||
<input placeholder="https://" type="text" id="settingApiUri" />
|
||||
<label htmlFor="userAgent">User Agent:</label>
|
||||
<input placeholder="UserAgent" id="userAgent" type="text" />
|
||||
</div>
|
||||
<div className="section-item">
|
||||
<span className="settings-section-title">Rate Limits</span>
|
||||
<label htmlFor="DefaultRL">Default:</label>
|
||||
<input id="defaultRL" type="text" />
|
||||
<label htmlFor="CoverRL">Manga Covers:</label>
|
||||
<input id="coverRL" type="text" />
|
||||
<label htmlFor="ImageRL">Manga Images:</label>
|
||||
<input id="imageRL" type="text" />
|
||||
<label htmlFor="InfoRL">Manga Info:</label>
|
||||
<input id="infoRL" type="text" />
|
||||
</div>
|
||||
<div className="section-item">
|
||||
<span className="settings-section-title">Appearance</span>
|
||||
<label htmlFor="cssStyle">Library Style:</label>
|
||||
<select id="cssStyle">
|
||||
<option id="card_compact" value="card_compact">Cards (Compact)</option>
|
||||
<option id="card_hover" value="card_hover">Cards (Hover)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="settings-section">
|
||||
<span className="settings-section-title">Sources</span>
|
||||
<div className="settings-section-content">
|
||||
<div className="section-item">
|
||||
<span className="settings-section-title">
|
||||
<img src="../media/connector-icons/mangadex-logo.svg" alt="Mangadex Logo" />
|
||||
<a href="https://mangadex.org">MangaDex</a>
|
||||
</span>
|
||||
<label htmlFor="mDexFeedRL">Feed Rate Limit:</label>
|
||||
<input id="mDexFeedRL" type="text" />
|
||||
<label htmlFor="mDexImageRL">Image Rate Limit:</label>
|
||||
<input id="mDexImageRL" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="settings-section">
|
||||
LIBRARY CONNECTORS
|
||||
<div className="settings-section-content">
|
||||
<div className="section-item">
|
||||
<span className="settings-section-title">
|
||||
<img src='../media/connector-icons/komga.svg' alt="Komga Logo" />
|
||||
Komga
|
||||
</span>
|
||||
<label htmlFor="komgaUrl"></label>
|
||||
<input placeholder="URL" id="komgaUrl" type="text" />
|
||||
<label htmlFor="komgaUsername"></label>
|
||||
<input placeholder="Username" id="komgaUsername" type="text" />
|
||||
<label htmlFor="komgaPassword"></label>
|
||||
<input placeholder="Password" id="komgaPassword" type="password" />
|
||||
<div className="section-buttons-container">
|
||||
<span>Test</span>
|
||||
<span>Reset</span>
|
||||
<span>Apply</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="section-item">
|
||||
<span className="settings-section-title">
|
||||
<img src='../media/connector-icons/kavita.png' alt="Kavita Logo" />
|
||||
Kavita
|
||||
</span>
|
||||
<label htmlFor="kavitaUrl"></label>
|
||||
<input placeholder="URL" id="kavitaUrl" type="text" />
|
||||
<label htmlFor="kavitaUsername"></label>
|
||||
<input placeholder="Username" id="kavitaUsername" type="text" />
|
||||
<label htmlFor="kavitaPassword"></label>
|
||||
<input placeholder="Password" id="kavitaPassword" type="password"/>
|
||||
<div className="section-buttons-container">
|
||||
<span>Test</span>
|
||||
<span>Reset</span>
|
||||
<span>Apply</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="settings-section">
|
||||
NOTIFICATION CONNECTORS
|
||||
<div className="settings-section-content">
|
||||
<div className="section-item">
|
||||
<span className="settings-section-title">
|
||||
<img src='../media/connector-icons/gotify-logo.png' alt="Gotify Logo" />
|
||||
Gotify
|
||||
</span>
|
||||
<label htmlFor="gotifyUrl"></label>
|
||||
<input placeholder="URL" id="gotifyUrl" type="text" />
|
||||
<label htmlFor="gotifyAppToken"></label>
|
||||
<input placeholder="App-Token" id="gotifyAppToken" type="text" />
|
||||
<div className="section-buttons-container">
|
||||
<span>Test</span>
|
||||
<span>Reset</span>
|
||||
<span>Apply</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="section-item">
|
||||
<span className="settings-section-title">
|
||||
<img src='../media/connector-icons/lunasea.png' alt="Lunasea Logo" />
|
||||
LunaSea
|
||||
</span>
|
||||
<label htmlFor="lunaseaWebhook"></label>
|
||||
<input placeholder="device/:id or user/:id" id="lunaseaWebhook" type="text"/>
|
||||
<div className="section-buttons-container">
|
||||
<span>Test</span>
|
||||
<span>Reset</span>
|
||||
<span>Apply</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="section-item">
|
||||
<span className="settings-section-title">
|
||||
<img src='../media/connector-icons/ntfy.svg' alt="ntfy Logo" />
|
||||
Ntfy
|
||||
</span>
|
||||
<label htmlFor="ntfyEndpoint"></label>
|
||||
<input placeholder="URL" id="ntfyEndpoint" type="text" />
|
||||
<label htmlFor="ntfyAuth"></label>
|
||||
<input placeholder="Auth" id="ntfyAuth" type="text" />
|
||||
<div className="section-buttons-container">
|
||||
<span>Test</span>
|
||||
<span>Reset</span>
|
||||
<span>Apply</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
: <></>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
3
Website/modules/interfaces/IFrontendSettings.tsx
Normal file
3
Website/modules/interfaces/IFrontendSettings.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export default interface IFrontendSettings {
|
||||
jobInterval: Date;
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: var(--topbar-height);
|
||||
background-color: var(--secondary-color);
|
||||
z-index: 100;
|
||||
|
||||
66
Website/styles/settings.css
Normal file
66
Website/styles/settings.css
Normal file
@ -0,0 +1,66 @@
|
||||
#Settings {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#SettingsIcon {
|
||||
height: calc(100% - 20px);
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#settingsPopupBody {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin: 5px 5px 10px;
|
||||
font-size: 10pt;
|
||||
font-weight: 100;
|
||||
display: block;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
border-top-color: lightgray;
|
||||
width: calc(100% - 10px);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.settings-section-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
|
||||
.section-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 22%;
|
||||
min-width: 300px;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: lightgray;
|
||||
margin: 7px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.section-item > .settings-section-title {
|
||||
font-weight: bold;
|
||||
vertical-align: bottom;
|
||||
line-height: 32px;
|
||||
font-size: 12pt;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-item > .settings-section-title > img {
|
||||
width: auto;
|
||||
height: 32px;
|
||||
margin: 5px;
|
||||
vertical-align: middle;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user