Files
custum-hyprpanel/scss/style/notifications/popups.scss
Jas Singh 4cdda38604 Implement framework for custom modules and out of the box custom modules as well. (#213)
* Create declarative module scaffolding

* Added ram module (WIP)

* Updates to options, styling and more.

* Added function for styling custom modules.

* Added utility functions and cleaned up code

* Type and fn name updates.

* Update module utils to handle absent values.

* Added icon color in style2 that was missing.

* Linted utils.ts

* Add CPU module and update RAM module to use /proc/meminfo.

* Added disk storage module.

* Consolidate code

* Added netstat module and removed elements from systray default ignore list.

* Added keyboard layout module.

* Fix hook types and move module to customModules directory

* Added updates modules.

* Spacing updates

* Added weather module.

* Added power menu and power module in bar. Increased update default interval to 6 ours.

* Updated styling of bar buttons, made power menu label toggleable, etc.

* Consolidate code and add dynamic tooltips based on data being used.

* Make default custom mogules matugen compatible

* Update base theme

* Fix custom module background coloring

* Remove testing opacity.

* Update themes to account for new modules

* Update nix stuff for libgtop (Need someone to test this)

* Update nix

* Update fractions to multiplications

* Move styling in style directory

* Implement a polling framework for variables that can dynamically adjust polling intervals.

* Netstat module updates when interface name is changed.

* Readme update
2024-09-02 21:10:59 -07:00

108 lines
2.1 KiB
SCSS

.notification-card {
color: $notification-text;
background: $notification-background;
margin: 0.45em;
border: 0.15em solid transparentize($notification-border, 0.5);
min-width: 26em;
min-height: 6rem;
border-radius: $notification-border_radius;
opacity: $notification-opacity * 0.01;
}
.notification-card-container {
* {
font-size: $font-size * $notification-scaling * 0.01;
}
padding: 1px;
}
.notification-card-image-container {
margin: 0.65em 0.65em;
border-radius: 0.4em;
}
.notification-card-image {
border-radius: 0.4em;
min-width: 1.5em;
min-height: 1.5em;
padding: 0.85em 0.85em;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.notification-card-content {
min-width: 2.9em;
min-height: 2.9em;
padding: 0.5em 0.5em;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
.notification-card-content.noimg {
margin-left: 0.5em;
margin-top: .15em;
}
.notification-card-header-label {
font-size: 0.95em;
margin-bottom: 0.5em;
color: $notification-label;
}
.notification-card-body-label {
font-size: 0.84em;
margin-bottom: 1em;
font-weight: 600;
}
.notification-card-actions {
margin-top: 0.25em;
margin-bottom: 0.4em;
}
.notification-action-buttons {
color: $notification-actions-text;
background: $notification-actions-background;
min-width: 4em;
min-height: 1.65em;
border-radius: 0.2em;
&:not(:last-child) {
margin-right: 2rem;
}
&:hover {
background: transparentize($notification-actions-background, 0.6);
}
}
.notification-icon {
color: $notification-labelicon;
margin-bottom: 0.4em;
min-width: 1em;
min-height: 1em;
font-size: 1.3em;
}
.notification-time {
font-size: 0.85em;
color: $notification-time;
}
.close-notification-button {
background: $notification-close_button-background;
color: $notification-close_button-label;
min-width: 2.1em;
border-radius: 0rem $notification-border_radius*0.7 $notification-border_radius*0.7 0em;
label {
font-size: 1.5em;
}
&:hover {
background: transparentize($notification-close_button-background, 0.5);
}
}