Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-02-12 01:01:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix styles due to migration to SCSS

Browse Source
This commit is contained in:
Red Adaya 2024-11-22 16:30:20 +08:00
parent ac2e07c697
commit 145fcc282a
2 changed files with 66 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/app/notification/notificationbubbles.tsx
View File

@ -6,11 +6,12 @@ import { FloatingPortal, useFloating, useInteractions } from "@floating-ui/react
import clsx from "clsx";
import { useAtomValue } from "jotai";
import { useEffect, useState } from "react";
import "./notificationbubbles.scss";
import { NotificationItem } from "./notificationitem";
import { RatingBubble } from "./ratingbubble";
import { useNotification } from "./usenotification";
import "./notificationbubbles.scss";
const NotificationBubbles = () => {
const {
notifications,

128
frontend/app/notification/notificationitem.scss
View File

@ -1,26 +1,25 @@
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
.notification {
.notification-title {
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 18px;
margin-bottom: 3px;
.notification-title {
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 18px;
margin-bottom: 3px;
&.green {
color: var(--success-color);
}
&.green {
color: var(--success-color);
}
&.red {
color: var(--error-color);
}
&.red {
color: var(--error-color);
}
&.yellow {
color: var(--warning-color);
}
}
&.yellow {
color: var(--warning-color);
}
}
.notification-message {
font-size: 13px;
@ -49,71 +48,72 @@
}
.lock-btn {
position: absolute;
top: 5px;
right: 5px;
padding: 10px 8px;
font-size: 11px;
color: rgb(from var(--main-text-color) r g b / 0.5);
position: absolute;
top: 5px;
right: 5px;
padding: 10px 8px;
font-size: 11px;
color: rgb(from var(--main-text-color) r g b / 0.5);
}
.notification {
width: 100%;
color: var(--main-text-color);
padding: 12px 10px;
display: flex;
flex-direction: column;
position: relative;
width: 100%;
color: var(--main-text-color);
padding: 12px 10px;
display: flex;
flex-direction: column;
position: relative;
}
.notification-bubble {
position: relative;
display: flex;
width: 380px;
padding: 16px 24px 16px 16px;
align-items: flex-start;
gap: 12px;
border-radius: 8px;
border: 0.5px solid rgba(255, 255, 255, 0.12);
background: #232323;
box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25);
}
position: relative;
display: flex;
width: 380px;
padding: 16px 24px 16px 16px;
align-items: flex-start;
gap: 12px;
border-radius: 8px;
border: 0.5px solid rgba(255, 255, 255, 0.12);
background: #232323;
box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25);
.notification-inner {
&.hovered {
background: #292929;
}
}
.notification-inner {
display: flex;
align-items: flex-start;
column-gap: 6px;
.notification-icon {
margin-right: 5px;
margin-top: 1px;
margin-right: 5px;
margin-top: 1px;
i {
font-size: 16px;
}
i {
font-size: 16px;
}
i.green {
color: var(--success-color);
}
i.green {
color: var(--success-color);
}
i.red {
color: var(--error-color);
}
i.red {
color: var(--error-color);
}
i.yellow {
color: var(--warning-color);
}
i.yellow {
color: var(--warning-color);
}
}
.notification-timestamp {
font-size: 12px;
font-weight: 400;
line-height: 18px;
opacity: 0.5;
margin-bottom: 7px;
font-size: 12px;
font-weight: 400;
line-height: 18px;
opacity: 0.5;
margin-bottom: 7px;
}
}
&.hovered {
background: #292929;
}
}