diff options
| author | crupest <crupest@outlook.com> | 2023-07-21 17:02:05 +0800 |
|---|---|---|
| committer | crupest <crupest@outlook.com> | 2023-07-21 17:02:05 +0800 |
| commit | d7b050ef7f047f841ffcda96fbdc9857574e97b9 (patch) | |
| tree | b37ccef507cbb6b9ca497715088ffe313e3d2011 /FrontEnd/src/pages/setting/index.css | |
| parent | 2226efed8c8604a938d060d62565b611722e837c (diff) | |
| download | timeline-d7b050ef7f047f841ffcda96fbdc9857574e97b9.tar.gz timeline-d7b050ef7f047f841ffcda96fbdc9857574e97b9.tar.bz2 timeline-d7b050ef7f047f841ffcda96fbdc9857574e97b9.zip | |
...
Diffstat (limited to 'FrontEnd/src/pages/setting/index.css')
| -rw-r--r-- | FrontEnd/src/pages/setting/index.css | 54 |
1 files changed, 46 insertions, 8 deletions
diff --git a/FrontEnd/src/pages/setting/index.css b/FrontEnd/src/pages/setting/index.css index ccf7a97a..af5ccf20 100644 --- a/FrontEnd/src/pages/setting/index.css +++ b/FrontEnd/src/pages/setting/index.css @@ -1,3 +1,5 @@ +/* TODO: Make item prettier. */
+
.change-avatar-cropper-row {
max-height: 400px;
}
@@ -8,20 +10,56 @@ max-height: 400px;
}
-.settings-item {
+.setting-section {
+ padding: 1em 0;
+ margin: 1em 0;
+}
+
+.setting-section-title {
+ padding: 0 1em;
+}
+
+.setting-section-item-area {
+ margin-top: 1em;
+ border-top: 1px solid var(--cru-key-container-color);
+}
+
+.setting-item-container {
padding: 0.5em 1em;
- transition: background 0.3s;
- border-bottom: 1px solid #e9ecef;
+ transition: background-color 0.3s;
+ color: var(--cru-surface-on-color);
+ background-color: var(--cru-surface-color);
+ border-bottom: 1px solid var(--cru-key-container-color);
+ display: flex;
align-items: center;
}
-.settings-item.first {
- border-top: 1px solid #e9ecef;
+
+.setting-item-container:hover {
+ background-color: var(--cru-key-container-1-color);
+ border-bottom-color: var(--cru-key-container-1-color);
+}
+
+.setting-item-label-sub {
+ color: var(--cru-secondary-text-color);
}
-.settings-item.clickable {
+
+.setting-item-container.setting-type-button {
cursor: pointer;
}
-.settings-item:hover {
- background: #dee2e6;
+
+.setting-item-container.setting-type-button.danger {
+ color: var(--cru-danger-color);
+}
+
+
+@media (max-width: 576) {
+ .setting-item-container.setting-type-select {
+ flex-direction: column;
+ }
+
+ .setting-item-container.setting-type-select .setting-item-value-area {
+ margin-top: 1em;
+ }
}
.register-code {
|