nwg-panel: stylize
This commit is contained in:
parent
f9d856b3bb
commit
14616f9b61
|
|
@ -6,7 +6,7 @@
|
|||
"position": "top",
|
||||
"controls": "right",
|
||||
"width": "auto",
|
||||
"height": 30,
|
||||
"height": 40,
|
||||
"homogeneous": true,
|
||||
"margin-top": 0,
|
||||
"margin-bottom": 0,
|
||||
|
|
@ -38,16 +38,10 @@
|
|||
"interval": 1,
|
||||
"icon-size": 16,
|
||||
"hover-opens": false,
|
||||
"leave-closes": true,
|
||||
"leave-closes": false,
|
||||
"click-closes": false,
|
||||
"css-name": "controls-window",
|
||||
"custom-items": [
|
||||
{
|
||||
"name": "Panel settings",
|
||||
"icon": "nwg-panel",
|
||||
"cmd": "nwg-panel-config"
|
||||
}
|
||||
],
|
||||
"custom-items": [],
|
||||
"menu": {
|
||||
"name": "Exit",
|
||||
"icon": "system-shutdown-symbolic",
|
||||
|
|
@ -152,17 +146,9 @@
|
|||
"icon-size": 16,
|
||||
"chars": 30,
|
||||
"scroll": false,
|
||||
"button-css-name": "",
|
||||
"label-css-name": "",
|
||||
"interval": 1
|
||||
},
|
||||
"button-sample": {
|
||||
"command": "notify-send 'sample button'",
|
||||
"icon": "view-grid",
|
||||
"label": "",
|
||||
"label-position": "right",
|
||||
"css-name": "button-custom",
|
||||
"icon-size": 16
|
||||
"button-css-name": "playerctl-button",
|
||||
"label-css-name": "playerctl-label",
|
||||
"interval": 2
|
||||
},
|
||||
"menu-start": "off",
|
||||
"exclusive-zone": true,
|
||||
|
|
@ -178,4 +164,4 @@
|
|||
"start-hidden": false,
|
||||
"keyboard-layout": {}
|
||||
}
|
||||
]
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,59 +1,145 @@
|
|||
/***** SUGGESTED TO CHANGE CAREFULLY *****/
|
||||
/* foreground (text)/background */
|
||||
@define-color fg0 #d8d8d8;
|
||||
@define-color fg1 #ffffff;
|
||||
@define-color bg0 #130c0c;
|
||||
@define-color bg1 #1c1716;
|
||||
/* green accents */
|
||||
@define-color accent-g0 #1f5e54;
|
||||
@define-color accent-g1 #418379;
|
||||
@define-color accent-g2 #63a89c;
|
||||
/* red accents */
|
||||
@define-color accent-r0 #c96262;
|
||||
@define-color accent-r1 #d27871;
|
||||
@define-color accent-r2 #ff968b;
|
||||
/* light (teal-white) accents */
|
||||
@define-color accent-l0 #e1f0ef;
|
||||
@define-color accent-l1 #f9fffc;
|
||||
|
||||
/* Recommended if panel "height" unset or smaller then your theme default button height */
|
||||
button {
|
||||
margin: 2px
|
||||
|
||||
* {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
/* SwayTaskBar and SwayWorkspaces use custom widgets, that need this and the next name
|
||||
to highlight currently focused task / workspace. */
|
||||
#task-box {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
#task-box-focused {
|
||||
background-color: rgba (255, 255, 255, 0.12);
|
||||
background-color: @accent-g2;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
|
||||
/***** MODIFY TO YOUR TASTE *****/
|
||||
|
||||
/* Sample button in sample config w/ no background nor border */
|
||||
#button-custom {
|
||||
background: rgba (0, 0, 0, 0.0);
|
||||
border: 0
|
||||
#playerctl-button {
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
background-image: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
margin: -1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Top panel in sample config uses this name */
|
||||
#panel-top {
|
||||
background: #101010;
|
||||
color: #eeeeee
|
||||
background: @accent-g1;
|
||||
color: @fg1;
|
||||
}
|
||||
|
||||
/* Bottom panel in sample config uses this name */
|
||||
#panel-bottom {
|
||||
background: #101010;
|
||||
color: #eeeeee
|
||||
/* increase the size of each workspace icon */
|
||||
#sway-workspaces-item > label {
|
||||
padding-left: 1px;
|
||||
padding-right: 1px;
|
||||
}
|
||||
/* default config highlights hovered workspace with a gray border */
|
||||
#sway-workspaces > widget:selected {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Controls window in sample config uses this name */
|
||||
#controls-window {
|
||||
border-radius: 15px;
|
||||
background: #36364f;
|
||||
color: #eeeeee
|
||||
}
|
||||
#controls-window scale value {
|
||||
color: #eeeeee
|
||||
background: @bg1;
|
||||
color: @fg1;
|
||||
}
|
||||
|
||||
/* default config highlights selected items with a green border */
|
||||
#controls-window widget:selected {
|
||||
box-shadow: none;
|
||||
background-color: @accent-r0;
|
||||
}
|
||||
|
||||
/* default config puts a *ridiculous* amount of padding around the whole controls window */
|
||||
#controls-window > widget > .vertical {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
#controls-window > widget > .vertical > .horizontal {
|
||||
margin-top: -14px; /* full reset would be -20px */
|
||||
margin-bottom: -20px;
|
||||
}
|
||||
/* add back in a little bit of padding, but in a way such that my highlights apply to it */
|
||||
#controls-window .horizontal widget > box,
|
||||
#controls-window > widget > .vertical > .horizontal > .vertical > .horizontal
|
||||
{
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
#controls-window > widget > .vertical > .horizontal > .vertical > widget > box
|
||||
{
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
#controls-window > widget > .vertical > .horizontal > .vertical > box > widget > box
|
||||
{
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
/* hierarchy is .horizontal > {image, scale > { value, contents > trough > { slider, highlight } } } */
|
||||
scale {
|
||||
padding-right: 0px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
scale trough {
|
||||
padding-left: 9px;
|
||||
padding-right: 9px;
|
||||
border-radius: 9px;
|
||||
border-color: rgba(0, 0, 0, 0);
|
||||
background: @bg0;
|
||||
}
|
||||
scale highlight {
|
||||
border-radius: 9px;
|
||||
border-color: rgba(0, 0, 0, 0);
|
||||
margin: 0px;
|
||||
margin-left: -9px;
|
||||
background: @accent-r1;
|
||||
}
|
||||
scale slider {
|
||||
margin-top: -3px;
|
||||
margin-bottom: -3px;
|
||||
background: @accent-l1;
|
||||
min-height: 25px;
|
||||
min-width: 25px;
|
||||
}
|
||||
|
||||
/*#clock {
|
||||
font-family: monospace;
|
||||
font-size: 16px
|
||||
}*/
|
||||
|
||||
/* UNUSED IN MY CURRENT CONFIG: COPIED FROM SAMPLE CONFIG */
|
||||
|
||||
/* Controls window in sample config uses this name */
|
||||
/* Brightness slider popup window in sample config uses this name */
|
||||
#brightness-popup {
|
||||
border-radius: 15px;
|
||||
background: #36364f;
|
||||
color: #eeeeee
|
||||
background: @bg1;
|
||||
color: @fg1;
|
||||
}
|
||||
#brightness-popup box {
|
||||
padding: 15px;
|
||||
|
|
@ -61,24 +147,24 @@ button {
|
|||
|
||||
/* Executors usually behave better in monospace fonts */
|
||||
#executor-label {
|
||||
font-family: monospace
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* and so does the Clock */
|
||||
#clock {
|
||||
font-family: monospace;
|
||||
font-size: 16px
|
||||
/* Bottom panel in sample config uses this name */
|
||||
#panel-bottom {
|
||||
background: #101010;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
/* Sample executor-weather uses "css-name": "weather" */
|
||||
#weather {
|
||||
font-size: 16px
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* dwl-tags module */
|
||||
#dwl-tag-box {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
#dwl-tag-occupied {
|
||||
|
|
@ -107,5 +193,5 @@ button {
|
|||
|
||||
#dwl-tag-selected {
|
||||
border: solid 2px;
|
||||
border-color: #81a1c1
|
||||
border-color: #81a1c1;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user