ags: style
This commit is contained in:
parent
dfa96985d6
commit
6f2c1bed14
@ -1,4 +1,4 @@
|
||||
{ inputs, pkgs, ... }: {
|
||||
{ config, inputs, pkgs, ... }: {
|
||||
imports = [ inputs.ags.homeManagerModules.default ];
|
||||
|
||||
programs.ags = {
|
||||
|
||||
@ -4,7 +4,7 @@ import Bar from "./widget/Bar"
|
||||
|
||||
App.start({
|
||||
css: style,
|
||||
instanceName: "js",
|
||||
instanceName: "ags",
|
||||
requestHandler(request, res) {
|
||||
print(request)
|
||||
res("ok")
|
||||
|
||||
4
home-manager/modules/ags/colors.scss
Normal file
4
home-manager/modules/ags/colors.scss
Normal file
@ -0,0 +1,4 @@
|
||||
$bg: #1e1e2e; // base00
|
||||
$surface0: #313244; // base02
|
||||
$fg: #cdd6f4; // base05
|
||||
$accent: #a6e3a1; // base0B
|
||||
@ -1,106 +1,95 @@
|
||||
@use "sass:color";
|
||||
@use "colors.scss" as *;
|
||||
|
||||
$bg: #212223;
|
||||
$fg: #f1f1f1;
|
||||
$accent: #378DF7;
|
||||
$radius: 7px;
|
||||
$radius: 10px;
|
||||
|
||||
%item {
|
||||
all: unset;
|
||||
background: $bg;
|
||||
border-radius: $radius;
|
||||
padding: 4px;
|
||||
|
||||
& + &, .item + & { margin-left: 4px; }
|
||||
|
||||
label { margin: 0 8px; }
|
||||
}
|
||||
|
||||
window.Bar {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: $bg;
|
||||
background-color: transparent;
|
||||
color: $fg;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
|
||||
label {
|
||||
margin: 0 8px;
|
||||
.Container {
|
||||
margin: 10px 10px 0;
|
||||
}
|
||||
|
||||
.Workspaces {
|
||||
button {
|
||||
all: unset;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover label {
|
||||
background-color: color.adjust($fg, $alpha: -0.84);
|
||||
border-color: color.adjust($accent, $alpha: -0.8);
|
||||
background: $surface0;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
&:active label {
|
||||
background-color: color.adjust($fg, $alpha: -0.8)
|
||||
background: $surface0;
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
transition: 200ms;
|
||||
padding: 0 8px;
|
||||
padding: 0 6px;
|
||||
margin: 2px;
|
||||
border-radius: $radius;
|
||||
border: 1pt solid transparent;
|
||||
}
|
||||
|
||||
.focused label {
|
||||
color: $accent;
|
||||
background: $accent;
|
||||
color: $bg;
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.SysTray {
|
||||
margin-right: 8px;
|
||||
.SysTray button {
|
||||
all: unset;
|
||||
padding: 8px;
|
||||
border-radius: inherit;
|
||||
|
||||
button {
|
||||
padding: 0 4px;
|
||||
&:hover {
|
||||
background: $surface0;
|
||||
}
|
||||
}
|
||||
|
||||
.FocusedClient {
|
||||
color: $accent;
|
||||
.Media {
|
||||
&.playing {
|
||||
border: 2pt solid $accent;
|
||||
}
|
||||
|
||||
.Media .Cover {
|
||||
.Cover {
|
||||
min-height: 1.2em;
|
||||
min-width: 1.2em;
|
||||
border-radius: $radius;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.Battery label {
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.AudioSlider {
|
||||
* {
|
||||
all: unset;
|
||||
}
|
||||
.Time { padding: 0 8px; }
|
||||
|
||||
icon {
|
||||
margin-right: .6em;
|
||||
}
|
||||
.AudioSlider icon { margin-left: 8px; }
|
||||
|
||||
& {
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
trough {
|
||||
background-color: color.adjust($fg, $alpha: -0.8);
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
highlight {
|
||||
background-color: $accent;
|
||||
min-height: .8em;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
slider {
|
||||
background-color: $fg;
|
||||
border-radius: $radius;
|
||||
min-height: 1em;
|
||||
min-width: 1em;
|
||||
margin: -.2em;
|
||||
}
|
||||
.Workspaces, .Media, .SysTray, .AudioSlider, .Time {
|
||||
@extend %item;
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@ export default function Bar(monitor: Gdk.Monitor) {
|
||||
gdkmonitor={monitor}
|
||||
exclusivity={Astal.Exclusivity.EXCLUSIVE}
|
||||
anchor={TOP | LEFT | RIGHT}>
|
||||
<centerbox>
|
||||
<centerbox className="Container">
|
||||
<box hexpand halign={Gtk.Align.START}>
|
||||
<Workspaces />
|
||||
</box>
|
||||
|
||||
@ -4,12 +4,8 @@ import Wp from "gi://AstalWp"
|
||||
export default function Audio() {
|
||||
const speaker = Wp.get_default()?.audio.defaultSpeaker!
|
||||
|
||||
return <box className="AudioSlider" css="min-width: 140px">
|
||||
return <box className="AudioSlider">
|
||||
<icon icon={bind(speaker, "volumeIcon")} />
|
||||
<slider
|
||||
hexpand
|
||||
onDragged={({ value }) => speaker.volume = value}
|
||||
value={bind(speaker, "volume")}
|
||||
/>
|
||||
<label label={bind(speaker, "volume").as(v => `${Math.floor(v*100)}%`)} />
|
||||
</box>
|
||||
}
|
||||
|
||||
@ -1,12 +1,16 @@
|
||||
import { bind } from "astal"
|
||||
import { Variable, bind } from "astal"
|
||||
import { Gtk } from "astal/gtk3"
|
||||
import Mpris from "gi://AstalMpris"
|
||||
|
||||
export default function Media() {
|
||||
const mpris = Mpris.get_default()
|
||||
// console.log(bind(mpris, "players").as(ps => ps[0] ? `${ps[0].title} ${ps[0].artist} ${ps[0].get_playback_status()}` : "-"));
|
||||
|
||||
return <box className="Media">
|
||||
return <box>
|
||||
{bind(mpris, "players").as(ps => ps[0] ? (
|
||||
<button
|
||||
className={bind(ps[0], "playback-status").as(s => s == 0 ? "Media playing" : "Media")}
|
||||
onClicked={() => ps[0].play_pause()}>
|
||||
<box>
|
||||
<box
|
||||
className="Cover"
|
||||
@ -16,13 +20,10 @@ export default function Media() {
|
||||
)}
|
||||
/>
|
||||
<label
|
||||
label={bind(ps[0], "title").as(() =>
|
||||
`${ps[0].title} - ${ps[0].artist}`
|
||||
)}
|
||||
label={bind(ps[0], "title").as(() =>ps[0].title.length < 80 ? ps[0].title : `${ps[0].title.slice(0, 77)}...`)}
|
||||
/>
|
||||
</box>
|
||||
) : (
|
||||
"Nothing Playing"
|
||||
))}
|
||||
</button>
|
||||
) : ("") )}
|
||||
</box>
|
||||
}
|
||||
|
||||
@ -4,7 +4,9 @@ import Tray from "gi://AstalTray"
|
||||
export default function SysTray() {
|
||||
const tray = Tray.get_default()
|
||||
|
||||
return <box className="SysTray">
|
||||
return <box className="item">
|
||||
{bind(tray, "items").as(i => (i.length > 0) ? (
|
||||
<box className="SysTray">
|
||||
{bind(tray, "items").as(items => items.map(item => (
|
||||
<menubutton
|
||||
tooltipMarkup={bind(item, "tooltipMarkup")}
|
||||
@ -15,4 +17,6 @@ export default function SysTray() {
|
||||
</menubutton>
|
||||
)))}
|
||||
</box>
|
||||
) : ("") )}
|
||||
</box>
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Variable, GLib } from "astal"
|
||||
|
||||
export default function Time({ format = "%H:%M - %A %e." }) {
|
||||
export default function Time({ format = "%e %b - %H:%M %a" }) {
|
||||
const time = Variable<string>("").poll(1000, () =>
|
||||
GLib.DateTime.new_now_local().format(format)!)
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user