diff options
| author | crupest <crupest@outlook.com> | 2023-07-15 23:54:25 +0800 |
|---|---|---|
| committer | crupest <crupest@outlook.com> | 2023-07-15 23:54:25 +0800 |
| commit | 2514e709c3ad0a5b7fc62b67462c8ba668f89d2c (patch) | |
| tree | a74511641a553774c7ca3dad38890b73956ca5fc /FrontEnd/src/views/common/AppBar.css | |
| parent | 85659d977ac501a13886c1c7098763935af416e2 (diff) | |
| download | timeline-2514e709c3ad0a5b7fc62b67462c8ba668f89d2c.tar.gz timeline-2514e709c3ad0a5b7fc62b67462c8ba668f89d2c.tar.bz2 timeline-2514e709c3ad0a5b7fc62b67462c8ba668f89d2c.zip | |
...
Diffstat (limited to 'FrontEnd/src/views/common/AppBar.css')
| -rw-r--r-- | FrontEnd/src/views/common/AppBar.css | 53 |
1 files changed, 26 insertions, 27 deletions
diff --git a/FrontEnd/src/views/common/AppBar.css b/FrontEnd/src/views/common/AppBar.css index 272a99ad..67fd9516 100644 --- a/FrontEnd/src/views/common/AppBar.css +++ b/FrontEnd/src/views/common/AppBar.css @@ -1,6 +1,4 @@ .app-bar {
- display: flex;
- align-items: center;
height: 56px;
position: fixed;
z-index: 1030;
@@ -8,52 +6,53 @@ left: 0;
right: 0;
background-color: var(--cru-primary-color);
- transition: background-color 1s;
}
-.app-bar .cru-avatar {
- background-color: white;
+.app-bar.desktop {
+ display: flex;
}
-.app-bar a {
- color: var(--cru-primary-on-color);
- text-decoration: none;
- margin: 0 1em;
- transition: color 1s;
+.app-bar.desktop .app-bar-brand {
+ display: flex;
+ align-items: center;
}
-.app-bar a:hover {
- color: var(--cru-primary-on-color);
+.app-bar.desktop .app-bar-brand-icon {
+ height: 2em;
}
-.app-bar a.active {
- color: var(--cru-primary-on-color);
+.app-bar.desktop .app-bar-main-area {
+ display: flex;
+ flex-grow: 1;
}
-.app-bar-brand {
+.app-bar.desktop .app-bar-link-area {
+ display: flex;
+}
+
+.app-bar.desktop a {
+ background-color: var(--cru-primary-color);
+ color: var(--cru-primary-on-color);
+ text-decoration: none;
display: flex;
align-items: center;
+ padding: 0 1em;
}
-.app-bar-brand-icon {
- height: 2em;
+.app-bar.desktop a:hover {
+ filter: brightness(var(--cru-hover-brightness));
}
-.app-bar-main-area {
- display: flex;
- flex-grow: 1;
+.app-bar.desktop a:focus {
+ filter: brightness(var(--cru-focus-brightness));
}
-.app-bar-link-area {
- display: flex;
- align-items: center;
- flex-shrink: 0;
+.app-bar.desktop a:active {
+ filter: brightness(var(--cru-press-brightness));
}
-.app-bar-user-area {
+.app-bar.desktop .app-bar-user-area {
display: flex;
- align-items: center;
- flex-shrink: 0;
margin-left: auto;
}
|