LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement layout options

Browse Source
This commit is contained in:
Jas Singh
2024-07-24 09:46:38 -07:00
parent e90fd7cd29
commit 21393c122a
37 changed files with 1288 additions and 644 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/style/bar/bar.scss
View File

@@ -12,7 +12,7 @@
background-color: $bar-buttons-background;
border-radius: $bar-buttons-radius;
padding: 0.2rem 0.9rem;
margin: 0.5rem 0.25rem;
margin: 0.5rem $bar-buttons-spacing;
&:hover {
background: $bar-buttons-hover;

2
scss/style/menus/calendar.scss
View File

@@ -12,7 +12,7 @@
}
.calendar-menu-item-container {
border-radius: 0.4em;
border-radius: $bar-menus-card_radius;
margin-bottom: 1.35em;
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
}

5
scss/style/menus/media.scss
View File

@@ -14,7 +14,7 @@
}
.menu-items-section {
border-radius: 0.4em;
border-radius: $bar-menus-card_radius;
padding: 0em;
}
@@ -108,6 +108,9 @@
background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary);
}
}
slider {
background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-media-slider-puck);
}
&:hover {
trough {

4
scss/style/menus/notifications.scss
View File

@@ -3,7 +3,7 @@
.notification-card-container.menu {
margin: 0em;
min-width: 30.5em;
min-width: 30.6em;
min-height: 48em;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background);
border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border);
@@ -24,7 +24,7 @@
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-notifications-card);
margin: 1em 1em;
margin-bottom: 0.5em;
border-radius: 0.4em;
border-radius: $bar-menus-card_radius;
padding: 0.4em 0.75em;
}

31
scss/style/menus/power.scss
View File

@@ -1,4 +1,5 @@
@import "../colors";
@import '../../variables';
window#powermenu,
window#verification {
@@ -10,14 +11,14 @@ $popover-padding: 0.6rem * 1.6;
window#verification .verification {
@include floating-widget;
background: $crust;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-powermenu-confirmation-background);
padding: 0.35em * 1.6 * 1.5;
min-width: 20em;
min-height: 6em;
font-size: 1.3em;
.verification-content {
background: $base;
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-powermenu-confirmation-card);
border-radius: 0.4em;
padding: 1em;
}
@@ -27,12 +28,12 @@ window#verification .verification {
.title {
font-size: 1.5em;
color: $lavender;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-powermenu-confirmation-label);
margin-bottom: 0.5em;
}
.desc {
color: $text;
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-dashboard-powermenu-confirmation-body);
font-size: 1em;
margin-bottom: 0.55em;
padding: 1em 3em;
@@ -40,7 +41,7 @@ window#verification .verification {
}
.verification-button {
background: $base;
background: $bar-menus-buttons-default;
padding: 0.7em 0em;
margin: 0.4em 1.7em;
border-radius: 0.3em;
@@ -49,40 +50,40 @@ window#verification .verification {
transition: opacity .3s ease-in-out;
&.bar-verification_yes {
background-color: $green;
background-color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-confirm);
}
&.bar-verification_no {
background-color: $red;
background-color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-deny);
}
&:hover {
&.bar-verification_yes {
background: $lavender;
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-confirm), 0.6);
transition: background-color 0.2s ease-in-out;
}
&.bar-verification_no {
background: $lavender;
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-deny), 0.6);
transition: background-color 0.2s ease-in-out;
}
}
&:focus {
&.bar-verification_yes{
background: $lavender;
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-confirm), 0.6);
transition: background 0.2s ease-in-out;
}
&.bar-verification_no {
background: $lavender;
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-deny), 0.6);
transition: background 0.2s ease-in-out;
}
}
&:active {
&.bar-verification_yes {
background: rgb($lavender, 0.4);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-confirm), 0.6);
transition: background 0.2s ease-in-out;
}
&.bar-verification_no {
background: rgb($lavender, 0.4);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-deny), 0.6);
transition: background 0.2s ease-in-out;
}
@@ -97,10 +98,10 @@ window#verification .verification {
}
}
.bar-verification_no label {
color: $mantle;
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-powermenu-confirmation-button_text);
}
.bar-verification_yes label {
color: $mantle;
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-powermenu-confirmation-button_text);
}
}

428
scss/style/settings/dialog.scss
View File

@@ -1,172 +1,320 @@
@import '../../variables';
window.settings-dialog {
background-color: $bar-menus-cards;
color: $bar-menus-text;
background-color: $bar-menus-cards;
color: $bar-menus-text;
$padding: 1em;
$primary_bg: $bar-menus-background;
$spacing: 0.4em;
$radius: 0.5em;
$widget-bg: $bar-menus-cards;
$border: none;
$fg: $bar-menus-text;
$padding: 1em;
$primary_bg: $bar-menus-background;
$spacing: 0.4em;
$radius: 0.5em;
$widget-bg: $bar-menus-cards;
$border: none;
$fg: $bar-menus-text;
.header {
.header {
background-color: $bar-menus-background;
padding: $padding;
padding: $padding;
button {
font-weight: bold;
padding: $padding*.5 $padding;
button {
font-weight: bold;
}
button.close {
padding: $padding * .5;
}
button.reset {
padding: $padding*.5;
}
}
.page {
button.close {
color: $bar-menus-iconbuttons-passive;
image {
font-size: 2em;
}
.page-content {
padding: $padding*2;
padding-top: 0;
}
&:hover {
color: $bar-menus-iconbuttons-active;
}
}
.group {
.group-title {
color: $primary-bg;
margin-bottom: $spacing*.5;
}
button.reset {
color: $bar-menus-iconbuttons-passive;
padding: $padding*.5;
image {
font-size: 1.25em;
}
.group-reset {
margin: $spacing * .5;
padding: $padding * .5;
&:hover {
color: $bar-menus-iconbuttons-active;
}
}
}
&:disabled {
color: transparent;
}
}
.page {
&:not(:first-child) {
margin-top: $spacing;
}
.page-content {
padding: $padding*2;
padding-top: 0;
}
}
.group {
.group-title {
color: $primary-bg;
margin-bottom: $spacing*.5;
}
.row {
.group-reset {
margin: $spacing * .5;
padding: $padding * .5;
&:disabled {
color: transparent;
}
}
&:not(:first-child) {
margin-top: $spacing;
}
}
.row {
background-color: $widget-bg;
padding: $padding;
border: $border;
border-top: none;
&:first-child {
border-radius: $radius $radius 0em 0em;
border: $border;
}
&:last-child {
border-radius: 0em 0em $radius $radius;
}
&:first-child:last-child {
border-radius: $radius;
border: $border;
}
button.reset {
margin-left: $spacing;
}
label.id,
label.note {
color: transparentize($fg, .4)
}
entry,
button {
padding: $padding;
}
spinbutton {
entry {
border-radius: $radius 0em 0em $radius;
}
button {
border-radius: 0em;
}
button:last-child {
border-radius: 0em $radius $radius 0em;
}
}
.enum-setter {
label {
background-color: $widget-bg;
padding: $padding;
border: $border;
border-top: none;
padding: 0em $padding;
border-radius: $radius 0em 0em $radius;
}
&:first-child {
border-radius: $radius $radius 0em 0em;
border: $border;
}
button {
border-radius: 0em;
}
&:last-child {
border-radius: 0em 0em $radius $radius;
}
&:first-child:last-child {
border-radius: $radius;
border: $border;
}
button.reset {
margin-left: $spacing;
}
label.id,
label.note {
color: transparentize($fg, .4)
}
entry,
button {
padding: $padding;
}
spinbutton {
entry {
border-radius: $radius 0em 0em $radius;
}
button {
border-radius: 0em;
}
button:last-child {
border-radius: 0em $radius $radius 0em;
}
}
.enum-setter {
label {
background-color: $widget-bg;
border: $border;
padding: 0em $padding;
border-radius: $radius 0em 0em $radius;
}
button {
border-radius: 0em;
}
button:last-child {
border-radius: 0em $radius $radius 0em;
}
}
&.wallpaper {
button {
margin-top: $spacing * .5;
}
.preview {
border-radius: $radius;
}
}
button:last-child {
border-radius: 0em $radius $radius 0em;
}
}
&.wallpaper {
button {
margin-top: $spacing * .5;
}
.preview {
border-radius: $radius;
}
}
}
}
.option-item {
margin: 0em 2em;
margin-bottom: 1em;
margin: 0em 2em;
margin-bottom: 1em;
.reset {
color: $bar-menus-iconbuttons-passive;
}
.options-label {
color: $bar-menus-text;
}
.options-sublabel {
font-size: 0.75em;
margin-top: 0.2em;
color: $bar-menus-dimtext;
}
.inputter-container {
border-radius: $bar-menus-border-radius * 0.5;
:first-child {
border-radius: $bar-menus-border-radius * 0.5;
}
padding: 0.35em 0.35em;
background: $surface1;
margin-right: 1em;
.reset {
color: $bar-menus-iconbuttons-passive;
}
.options-label {
color: $bar-menus-text;
}
.options-sublabel {
font-size: 0.75em;
margin-top: 0.2em;
color: $bar-menus-dimtext;
}
.inputter-container {
border-radius: $bar-menus-border-radius * 0.5;
:first-child {
border-radius: $bar-menus-border-radius * 0.5;
}
padding: 0.35em 0.35em;
background: $surface1;
margin-right: 1em;
}
}
.options-header {
margin: 1em 1em;
.label-name {
color: $bar-menus-label;
font-size: 0.9em;
margin-right: 0.5em;
}
margin: 1em 1em;
.label-name {
color: $bar-menus-label;
font-size: 0.9em;
margin-right: 0.5em;
}
}
.pager-button {
margin: 0.5em 0.75em;
&.category label{
font-size: 1.4em;
}
&:hover {
color: $bar-menus-iconbuttons-active;
}
&.active {
color: $bar-menus-iconbuttons-active;
}
}
.bar-theme-page { min-height: 40em;
}
.settings-menu-stack {
background: $red;
}
.paged-container {
scrollbar {
margin-right: 0.2em;
min-width: 0.6em;
border-radius: $bar-menus-border-radius;
background: $bar-menus-background;
slider {
min-width: 0.6em;
border-radius: $bar-menus-border-radius;
background: $bar-menus-buttons-default;
}
}
selection {
background: $bar-menus-background;
}
switch {
font-size: 10px;
&:checked {
background: $bar-menus-switch-enabled;
}
slider {
background-color: $bar-menus-switch-puck;
}
&:active {
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
}
}
entry {
min-width: 15em;
}
}
dialog {
background: $bar-menus-cards;
headerbar {
border-bottom: 0.075em solid $bar-menus-border-color;
background: $bar-menus-cards;
padding: 0.5em;
font-size: 1.5em;
button {
color: $bar-menus-buttons-text;
min-width: 4.5em;
min-height: 2.5em;
border-radius: $bar-menus-border-radius;
background: $bar-menus-buttons-default;
&:hover {
background: transparentize($bar-menus-buttons-default, 0.5);
}
}
}
viewport {
border-right: .25em solid $bar-menus-border-color;
list {
row {
padding: 0em 1.5em;
&:hover {
background: $bar-menus-buttons-default;
color: $bar-menus-buttons-text;
}
label {
margin: 0.5em 0.5em;
font-size: 0.85em;
}
}
}
}
stack {
.horizontal .path-bar {
button {
background: $bar-menus-iconbuttons-active;
min-width: 3em;
min-height: 2em;
border-radius: $bar-menus-border-radius / 2;
&:disabled {
background: $bar-menus-buttons-disabled;
}
&:hover {
background: transparentize($bar-menus-buttons-active, 0.5);
}
label {
margin: 0em 0.25em;
color: $bar-menus-buttons-text
}
image {
margin: 0em 0.5em;
color: $bar-menus-buttons-text
}
margin: 0.25em;
}
}
}
treeview header button{
padding: 0.25em;
border: .15em solid $bar-menus-border-color;
}
headerbar {
color: $bar-menus-label;
}
}