diff options
Diffstat (limited to 'src/pages/stylesheets/styles.css')
| -rw-r--r-- | src/pages/stylesheets/styles.css | 365 |
1 files changed, 2 insertions, 363 deletions
diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index ca6f0dca..9e8fedb3 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -1,12 +1,3 @@ -body { - --text: #fff; - --bg-main: #121212; - --bg-secondary: #202020; - --active: #fbc117; - --danger: #f04141; - --light-grey: #c3c3c3; -} - @font-face { font-family: "Inter"; src: url("Inter-VariableFont_slnt,wght.ttf"); @@ -21,359 +12,7 @@ body { font-style: normal; } -body { - margin: auto; - padding: 0; - font-family: "Inter"; - font-size: 16px; - background-color: var(--bg-main); - color: var(--text); -} - -body * { - font-family: "Inter"; -} - -body.rtl { - font-family: "Vazirmatn"; -} - -body.rtl * { - font-family: "Vazirmatn"; -} - -div.block input[type="checkbox"] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; -} - -.title { - display: flex; - align-items: center; - text-decoration: none; - width: min-content; - color: var(--text); - transition: 0.1s; -} - -.title:hover { - opacity: 1 !important; -} - -.title:hover a { - color: var(--active); -} - -img, -svg { - margin-right: 10px; - height: 26px; - width: 26px; - color: var(--text); -} - -body.rtl img, -body.rtl svg { - margin-right: 0px; - margin-left: 10px; -} - -input[type="url"], -input[type="text"], -select { - font-weight: bold; - box-sizing: border-box; - border-style: solid; - border-color: #767676; - color: var(--text); - font-size: 16px; - padding: 8px; - background-color: var(--bg-secondary); - border: none; - margin: 0; - max-width: 500px; - border-radius: 3px; -} - -input[type="url"], -input[type="text"] { - width: 400px; - cursor: text; -} - -input:invalid { - color: var(--danger); -} - -.button svg { - height: 18px; - width: 18px; -} - -section.block-option { - width: 750px; - margin: 0 50px; -} - -section.block-option h2 { - margin: 0; -} - -body.option { - display: flex; - padding: 40px; - width: 1160px; -} - -section.links { - display: flex; - flex-wrap: wrap; - flex-direction: column; - width: 350px; - max-height: 1030px; -} - -section.links div { - margin: 10px; - width: max-content; -} - -a { - text-decoration: none; - color: var(--text); - transition: 0.1s; -} - -a:hover { - color: var(--active); -} - -section.links a { - display: flex; - align-items: center; - font-size: 18px; - text-decoration: none; - color: white; - transition: 0.1s; -} - -section.links a:hover, -section.links .selected { - opacity: 1 !important; -} - -section.links .selected a { - color: var(--active); -} - -::placeholder { - color: var(--text); - opacity: 0.7; -} - -hr { - height: 2px; - margin: 0 15px; - background-color: rgb(77, 77, 77); - border: none; -} - -div.block { - padding: 0 15px; - justify-content: space-between; - display: flex; - align-items: center; - margin-top: 10px; - margin-bottom: 10px; -} - -div.block-option { - margin: 30px 0; -} - -div.block-option label { - margin-right: 5px; - width: 80%; - min-width: 150px; - font-size: 18px; -} - -div.block-option h1 { - margin: 0; - font-size: 28px; - color: var(--text); -} - -div.block-option div { - text-align: center; -} - -div.block input[type="checkbox"] { - width: 46px; - height: 24px; - background-color: var(--light-grey); - border-radius: 50px; - transition: 0.4s; - cursor: pointer; -} - -div.block input[type="checkbox"]:checked { - background-color: var(--active); -} - -div.block input[type="checkbox"]::before { - content: ""; - display: inline-block; - width: 18px; - height: 18px; - box-sizing: border-box; - position: relative; - top: 2.5px; - left: 3.5px; - background-color: white; - border-radius: 50%; - transition: 0.3s; -} - -body.rtl div.block input[type="checkbox"]::before { - left: auto; - right: 4px; -} - -div.block input[type="checkbox"]:checked::before { - left: 24px; -} - -body.rtl div.block input[type="checkbox"]:checked::before { - left: auto; - right: 24px; -} - -div.buttons { - display: flex; - margin: 0 15px; - margin-bottom: 15px; - margin-top: 15px; - flex-wrap: wrap; - align-items: center; - justify-content: start; -} - -.button { - color: var(--text); - font-size: 16px; - font-weight: bold; - text-decoration: none; - cursor: pointer; - transition-duration: 0.1s; -} - -.button:hover { - color: var(--active); -} - -.button svg { - width: auto; - height: auto; - padding: 0; - margin-right: 5px; -} - -.button:hover svg { - color: var(--active); -} - -.button-inline { - display: inline-flex; - align-items: center; - margin: 7.5px 0; - background-color: var(--bg-secondary); - border-radius: 5px; - padding: 10px; -} - -.button:active { - transform: translateY(1px); -} - -button svg { - color: var(--text); -} - -div.checklist div { - justify-content: space-between; - margin: 5px 15px; - padding: 10px 0; - word-wrap: break-word; - display: flex; -} - -div.checklist a { - text-decoration: none; - color: var(--text); -} - -div.checklist a:hover { - text-decoration: underline; -} - -div.custom-checklist x a { - color: var(--active); -} - -button.add { - background-color: transparent; - border: none; - padding: 0; - margin: 0; - text-decoration: none; - display: inline-block; - cursor: pointer; -} - -body.light-theme { - --text: black; - --bg-main: white; - --bg-secondary: #e4e4e4; - --active: #fb9817; -} - -body.light-theme select { - border: 1px solid black; -} - -body.light-theme a { - color: black; -} - -body.light-theme a:hover { - color: var(--active); -} - -button { - background-color: transparent; - color: var(--text); - border: none; - text-decoration: none; - display: inline-block; - cursor: pointer; - border-radius: 5px; -} - -body div section { - display: none; -} - -select:disabled { - opacity: 0.6; - cursor: not-allowed; -} - -input:disabled { - opacity: 0.6; - cursor: not-allowed; -} +/* @media (max-width: 1250px) { body.option { @@ -446,4 +85,4 @@ html.mobile section.links { html.mobile section.block-option { width: 100%; -} +} */ \ No newline at end of file |