diff options
| author | crupest <crupest@outlook.com> | 2021-06-15 16:23:44 +0800 |
|---|---|---|
| committer | crupest <crupest@outlook.com> | 2021-06-15 16:23:44 +0800 |
| commit | ddce03a67708249eec129eb36744be460345bd75 (patch) | |
| tree | 58417f657467e89d06c58b848db621c021803254 /FrontEnd/src/views/home/index.css | |
| parent | e0b766203d7576ab67b16ba556ba14120d0bc876 (diff) | |
| download | timeline-ddce03a67708249eec129eb36744be460345bd75.tar.gz timeline-ddce03a67708249eec129eb36744be460345bd75.tar.bz2 timeline-ddce03a67708249eec129eb36744be460345bd75.zip | |
...
Diffstat (limited to 'FrontEnd/src/views/home/index.css')
| -rw-r--r-- | FrontEnd/src/views/home/index.css | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/FrontEnd/src/views/home/index.css b/FrontEnd/src/views/home/index.css new file mode 100644 index 00000000..516aba52 --- /dev/null +++ b/FrontEnd/src/views/home/index.css @@ -0,0 +1,73 @@ +.timeline-board {
+ min-height: 200px;
+ height: 100%;
+ position: relative;
+}
+
+.timeline-board-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.timeline-board-item {
+ font-size: 1.1em;
+ height: 48px;
+ transition: background 0.3s;
+ display: flex;
+ align-items: center;
+}
+.timeline-board-item .icon {
+ height: 1.3em;
+ color: black;
+}
+.timeline-board-item:hover {
+ background: #dee2e6;
+}
+.timeline-board-item .right {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+}
+.timeline-board-item .title {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.home-timeline-list-item {
+ display: flex;
+ align-items: center;
+}
+
+.home-timeline-list-item-timeline {
+ transition: background 0.8s;
+ animation: 0.8s home-timeline-list-item-timeline-enter;
+}
+.home-timeline-list-item-timeline:hover {
+ background: #e9ecef;
+}
+
+@keyframes home-timeline-list-item-timeline-enter {
+ from {
+ transform: translate(-100%, 0);
+ opacity: 0;
+ }
+}
+.home-timeline-list-item-line {
+ width: 80px;
+ flex-shrink: 0;
+}
+
+@keyframes home-timeline-list-loading-head-animation {
+ from {
+ transform: translate(0, -30px);
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+.home-timeline-list-loading-head {
+ animation: 1s infinite home-timeline-list-loading-head-animation;
+}
|