diff --git a/.config/ags/modules/.miscutils/system.js b/.config/ags/modules/.miscutils/system.js index d5e73b38..1c7f236e 100644 --- a/.config/ags/modules/.miscutils/system.js +++ b/.config/ags/modules/.miscutils/system.js @@ -1,3 +1,4 @@ +const { GLib } = imports.gi; import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'; const { execAsync, exec } = Utils; @@ -6,6 +7,10 @@ export const isDebianDistro = (distroID == 'linuxmint' || distroID == 'ubuntu' | export const isArchDistro = (distroID == 'arch' || distroID == 'endeavouros' || distroID == 'cachyos'); export const hasFlatpak = !!exec(`bash -c 'command -v flatpak'`); +const LIGHTDARK_FILE_LOCATION = `${GLib.get_user_cache_dir()}/ags/user/colormode.txt`; +const colorMode = Utils.exec('bash -c "sed -n \'1p\' $HOME/.cache/ags/user/colormode.txt"'); +export let darkMode = !(Utils.readFile(LIGHTDARK_FILE_LOCATION).trim() == 'light'); + export const getDistroIcon = () => { // Arches if(distroID == 'arch') return 'arch-symbolic'; @@ -40,4 +45,4 @@ export const getDistroName = () => { if(distroID == 'raspbian') return 'Raspbian'; if(distroID == 'kali') return 'Kali Linux'; return 'Linux'; -} \ No newline at end of file +} diff --git a/.config/ags/modules/bar/normal/music.js b/.config/ags/modules/bar/normal/music.js index ea9c3540..3879fafd 100644 --- a/.config/ags/modules/bar/normal/music.js +++ b/.config/ags/modules/bar/normal/music.js @@ -208,18 +208,20 @@ export default () => { return EventBox({ onScrollUp: (self) => switchToRelativeWorkspace(self, -1), onScrollDown: (self) => switchToRelativeWorkspace(self, +1), - onPrimaryClick: () => showMusicControls.setValue(!showMusicControls.value), - onSecondaryClick: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"` &']).catch(print), - onMiddleClick: () => execAsync('playerctl play-pause').catch(print), - setup: (self) => self.on('button-press-event', (self, event) => { - if (event.get_button()[1] === 8) // Side button - execAsync('playerctl previous').catch(print) - }), child: Box({ className: 'spacing-h-4', children: [ SystemResourcesOrCustomModule(), - BarGroup({ child: musicStuff }), + EventBox({ + child: BarGroup({ child: musicStuff }), + onPrimaryClick: () => showMusicControls.setValue(!showMusicControls.value), + onSecondaryClick: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"` &']).catch(print), + onMiddleClick: () => execAsync('playerctl play-pause').catch(print), + setup: (self) => self.on('button-press-event', (self, event) => { + if (event.get_button()[1] === 8) // Side button + execAsync('playerctl previous').catch(print) + }), + }) ] }) }); diff --git a/.config/ags/modules/bar/normal/spaceright.js b/.config/ags/modules/bar/normal/spaceright.js index 56ecbcc7..0b4fee7b 100644 --- a/.config/ags/modules/bar/normal/spaceright.js +++ b/.config/ags/modules/bar/normal/spaceright.js @@ -39,18 +39,6 @@ export default () => { }), }); const SpaceRightDefaultClicks = (child) => Widget.EventBox({ - onScrollUp: () => { - if (!Audio.speaker) return; - if (Audio.speaker.volume <= 0.09) Audio.speaker.volume += 0.01; - else Audio.speaker.volume += 0.03; - Indicator.popup(1); - }, - onScrollDown: () => { - if (!Audio.speaker) return; - if (Audio.speaker.volume <= 0.09) Audio.speaker.volume -= 0.01; - else Audio.speaker.volume -= 0.03; - Indicator.popup(1); - }, onHover: () => { barStatusIcons.toggleClassName('bar-statusicons-hover', true) }, onHoverLost: () => { barStatusIcons.toggleClassName('bar-statusicons-hover', false) }, onPrimaryClick: () => App.toggleWindow('sideright'), @@ -79,10 +67,24 @@ export default () => { ], }); - return Widget.Box({ - children: [ - actualContent, - Widget.Box({ className: 'bar-corner-spacing' }), - ] + return Widget.EventBox({ + onScrollUp: () => { + if (!Audio.speaker) return; + if (Audio.speaker.volume <= 0.09) Audio.speaker.volume += 0.01; + else Audio.speaker.volume += 0.03; + Indicator.popup(1); + }, + onScrollDown: () => { + if (!Audio.speaker) return; + if (Audio.speaker.volume <= 0.09) Audio.speaker.volume -= 0.01; + else Audio.speaker.volume -= 0.03; + Indicator.popup(1); + }, + child: Widget.Box({ + children: [ + actualContent, + SpaceRightDefaultClicks(Widget.Box({ className: 'bar-corner-spacing' })), + ] + }) }); } \ No newline at end of file diff --git a/.config/ags/modules/indicators/indicatorvalues.js b/.config/ags/modules/indicators/indicatorvalues.js index e373e491..18f22862 100644 --- a/.config/ags/modules/indicators/indicatorvalues.js +++ b/.config/ags/modules/indicators/indicatorvalues.js @@ -6,7 +6,11 @@ import { MarginRevealer } from '../.widgethacks/advancedrevealers.js'; import Brightness from '../../services/brightness.js'; import Indicator from '../../services/indicator.js'; -const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...rest }) => { +const OsdValue = ({ + name, nameSetup = undefined, labelSetup, progressSetup, + extraClassName = '', extraProgressClassName = '', + ...rest +}) => { const valueName = Label({ xalign: 0, yalign: 0, hexpand: true, className: 'osd-label', @@ -20,7 +24,7 @@ const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...r return Box({ // Volume vertical: true, hexpand: true, - className: 'osd-bg osd-value', + className: `osd-bg osd-value ${extraClassName}`, attribute: { 'disable': () => { valueNumber.label = '󰖭'; @@ -35,7 +39,7 @@ const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...r ] }), ProgressBar({ - className: 'osd-progress', + className: `osd-progress ${extraProgressClassName}`, hexpand: true, vertical: false, setup: progressSetup, @@ -48,6 +52,8 @@ const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...r export default () => { const brightnessIndicator = OsdValue({ name: 'Brightness', + extraClassName: 'osd-brightness', + extraProgressClassName: 'osd-brightness-progress', labelSetup: (self) => self.hook(Brightness, self => { self.label = `${Math.round(Brightness.screen_value * 100)}`; }, 'notify::screen-value'), @@ -59,9 +65,9 @@ export default () => { const volumeIndicator = OsdValue({ name: 'Volume', - attribute: { - headphones: undefined, - }, + extraClassName: 'osd-volume', + extraProgressClassName: 'osd-volume-progress', + attribute: { headphones: undefined }, nameSetup: (self) => Utils.timeout(1, () => { const updateAudioDevice = (self) => { const usingHeadphones = (Audio.speaker?.stream?.port)?.toLowerCase().includes('headphone'); diff --git a/.config/ags/modules/indicators/musiccontrols.js b/.config/ags/modules/indicators/musiccontrols.js index d6368522..61be3d14 100644 --- a/.config/ags/modules/indicators/musiccontrols.js +++ b/.config/ags/modules/indicators/musiccontrols.js @@ -1,4 +1,4 @@ -const { Gdk, GdkPixbuf, GLib, Gtk } = imports.gi; +const { GLib } = imports.gi; import App from 'resource:///com/github/Aylur/ags/app.js'; import Widget from 'resource:///com/github/Aylur/ags/widget.js'; import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'; @@ -9,6 +9,7 @@ const { Box, EventBox, Icon, Scrollable, Label, Button, Revealer } = Widget; import { fileExists } from '../.miscutils/files.js'; import { AnimatedCircProg } from "../.commonwidgets/cairo_circularprogress.js"; import { showMusicControls } from '../../variables.js'; +import { darkMode } from '../.miscutils/system.js'; const COMPILED_STYLE_DIR = `${GLib.get_user_cache_dir()}/ags/user/generated` const LIGHTDARK_FILE_LOCATION = `${GLib.get_user_cache_dir()}/ags/user/colormode.txt`; @@ -182,7 +183,7 @@ const CoverArt = ({ player, ...rest }) => { } const coverPath = player.coverPath; - const stylePath = `${player.coverPath}${lightDark}${COVER_COLORSCHEME_SUFFIX}`; + const stylePath = `${player.coverPath}${darkMode ? '' : '-l'}${COVER_COLORSCHEME_SUFFIX}`; if (player.coverPath == lastCoverPath) { // Since 'notify::cover-path' emits on cover download complete Utils.timeout(200, () => { // self.attribute.showImage(self, coverPath); @@ -201,9 +202,9 @@ const CoverArt = ({ player, ...rest }) => { // Generate colors execAsync(['bash', '-c', - `${App.configDir}/scripts/color_generation/generate_colors_material.py --path '${coverPath}' --mode '${colorMode}' > ${App.configDir}/scss/_musicmaterial.scss`]) + `${App.configDir}/scripts/color_generation/generate_colors_material.py --path '${coverPath}' --mode ${darkMode ? 'dark' : 'light'} > ${App.configDir}/scss/_musicmaterial.scss`]) .then(() => { - exec(`wal -i "${player.coverPath}" -n -t -s -e -q ${lightDark}`) + exec(`wal -i "${player.coverPath}" -n -t -s -e -q ${darkMode ? '' : '-l'}`) exec(`cp ${GLib.get_user_cache_dir()}/wal/colors.scss ${App.configDir}/scss/_musicwal.scss`); exec(`sass ${App.configDir}/scss/_music.scss ${stylePath}`); Utils.timeout(200, () => { diff --git a/.config/ags/modules/session/sessionscreen.js b/.config/ags/modules/session/sessionscreen.js index 1f90636e..eb2089c5 100644 --- a/.config/ags/modules/session/sessionscreen.js +++ b/.config/ags/modules/session/sessionscreen.js @@ -8,7 +8,7 @@ import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'; const { exec, execAsync } = Utils; -const SessionButton = (name, icon, command, props = {}) => { +const SessionButton = (name, icon, command, props = {}, colorid = 0) => { const buttonDescription = Widget.Revealer({ vpack: 'end', transitionDuration: userOptions.animations.durationSmall, @@ -21,7 +21,7 @@ const SessionButton = (name, icon, command, props = {}) => { }); return Widget.Button({ onClicked: command, - className: 'session-button', + className: `session-button session-color-${colorid}`, child: Widget.Overlay({ className: 'session-button-box', child: Widget.Label({ @@ -61,14 +61,14 @@ const SessionButton = (name, icon, command, props = {}) => { export default () => { // lock, logout, sleep - const lockButton = SessionButton('Lock', 'lock', () => { App.closeWindow('session'); execAsync(['loginctl', 'lock-session']) }); - const logoutButton = SessionButton('Logout', 'logout', () => { App.closeWindow('session'); execAsync(['bash', '-c', 'pkill Hyprland || pkill sway']) }); - const sleepButton = SessionButton('Sleep', 'sleep', () => { App.closeWindow('session'); execAsync('systemctl suspend') }); + const lockButton = SessionButton('Lock', 'lock', () => { App.closeWindow('session'); execAsync(['loginctl', 'lock-session']) }, {}, 1); + const logoutButton = SessionButton('Logout', 'logout', () => { App.closeWindow('session'); execAsync(['bash', '-c', 'pkill Hyprland || pkill sway']) }, {}, 2); + const sleepButton = SessionButton('Sleep', 'sleep', () => { App.closeWindow('session'); execAsync('systemctl suspend') }, {}, 3); // hibernate, shutdown, reboot - const hibernateButton = SessionButton('Hibernate', 'downloading', () => { App.closeWindow('session'); execAsync('systemctl hibernate') }); - const shutdownButton = SessionButton('Shutdown', 'power_settings_new', () => { App.closeWindow('session'); execAsync('systemctl poweroff') }); - const rebootButton = SessionButton('Reboot', 'restart_alt', () => { App.closeWindow('session'); execAsync('systemctl reboot') }); - const cancelButton = SessionButton('Cancel', 'close', () => App.closeWindow('session'), { className: 'session-button-cancel' }); + const hibernateButton = SessionButton('Hibernate', 'downloading', () => { App.closeWindow('session'); execAsync('systemctl hibernate') }, {}, 4); + const shutdownButton = SessionButton('Shutdown', 'power_settings_new', () => { App.closeWindow('session'); execAsync('systemctl poweroff') }, {}, 5); + const rebootButton = SessionButton('Reboot', 'restart_alt', () => { App.closeWindow('session'); execAsync('systemctl reboot') }, {}, 6); + const cancelButton = SessionButton('Cancel', 'close', () => App.closeWindow('session'), { className: 'session-button-cancel' }, 7); const sessionDescription = Widget.Box({ vertical: true, diff --git a/.config/ags/modules/sideleft/apis/ai_chatmessage.js b/.config/ags/modules/sideleft/apis/ai_chatmessage.js index 77525232..d7148984 100644 --- a/.config/ags/modules/sideleft/apis/ai_chatmessage.js +++ b/.config/ags/modules/sideleft/apis/ai_chatmessage.js @@ -283,19 +283,15 @@ export const ChatMessage = (message, modelName = 'Model') => { const messageContentBox = MessageContent(message.content); const thisMessage = Box({ className: 'sidebar-chat-message', + homogeneous: true, children: [ - Box({ - className: `sidebar-chat-indicator ${message.role == 'user' ? 'sidebar-chat-indicator-user' : 'sidebar-chat-indicator-bot'}`, - }), Box({ vertical: true, - hpack: 'fill', - hexpand: true, children: [ Label({ - hpack: 'fill', + hpack: 'start', xalign: 0, - className: 'txt txt-bold sidebar-chat-name', + className: `txt txt-bold sidebar-chat-name sidebar-chat-name-${message.role == 'user' ? 'user' : 'bot'}`, wrap: true, useMarkup: true, label: (message.role == 'user' ? USERNAME : modelName), @@ -324,17 +320,13 @@ export const SystemMessage = (content, commandName, scrolledWindow) => { const thisMessage = Box({ className: 'sidebar-chat-message', children: [ - Box({ - className: `sidebar-chat-indicator sidebar-chat-indicator-System`, - }), Box({ vertical: true, - hpack: 'fill', - hexpand: true, children: [ Label({ xalign: 0, - className: 'txt txt-bold sidebar-chat-name', + hpack: 'start', + className: 'txt txt-bold sidebar-chat-name sidebar-chat-name-system', wrap: true, label: `System • ${commandName}`, }), diff --git a/.config/ags/modules/sideleft/apis/booru.js b/.config/ags/modules/sideleft/apis/booru.js index 722462c0..2784d55c 100644 --- a/.config/ags/modules/sideleft/apis/booru.js +++ b/.config/ags/modules/sideleft/apis/booru.js @@ -204,9 +204,6 @@ const BooruPage = (taglist) => { overlays: [imageActions] }) } - const colorIndicator = Box({ - className: `sidebar-chat-indicator`, - }); const downloadState = Stack({ homogeneous: false, transition: 'slide_up_down', @@ -233,7 +230,7 @@ const BooruPage = (taglist) => { hscroll: 'automatic', child: Box({ hpack: 'fill', - className: 'sidebar-waifu-content spacing-h-5', + className: 'spacing-h-5', children: [ ...taglist.map((tag) => CommandButton(tag)), Box({ hexpand: true }), @@ -246,8 +243,7 @@ const BooruPage = (taglist) => { const pageImageGrid = Grid({ // columnHomogeneous: true, // rowHomogeneous: true, - className: 'sidebar-waifu-image', - // css: 'min-height: 90px;' + className: 'sidebar-booru-imagegrid', }); const pageImageRevealer = Revealer({ transition: 'slide_down', @@ -256,6 +252,7 @@ const BooruPage = (taglist) => { child: pageImageGrid, }); const thisPage = Box({ + homogeneous: true, className: 'sidebar-chat-message', attribute: { 'imagePath': '', @@ -289,20 +286,17 @@ const BooruPage = (taglist) => { downloadIndicator.attribute.hide(); }, }, - children: [ - colorIndicator, - Box({ - vertical: true, - className: 'spacing-v-5', - children: [ - pageHeading, - Box({ - vertical: true, - children: [pageImageRevealer], - }) - ] - }) - ], + children: [Box({ + vertical: true, + className: 'spacing-v-5', + children: [ + pageHeading, + Box({ + vertical: true, + children: [pageImageRevealer], + }) + ] + })], }); return thisPage; } diff --git a/.config/ags/modules/sideleft/apis/chatgpt.js b/.config/ags/modules/sideleft/apis/chatgpt.js index 312c4db2..ebcf47bb 100644 --- a/.config/ags/modules/sideleft/apis/chatgpt.js +++ b/.config/ags/modules/sideleft/apis/chatgpt.js @@ -247,7 +247,7 @@ const GPTWelcome = () => Box({ }); export const chatContent = Box({ - className: 'spacing-v-15', + className: 'spacing-v-5', vertical: true, setup: (self) => self .hook(GPTService, (box, id) => { diff --git a/.config/ags/modules/sideleft/apis/gemini.js b/.config/ags/modules/sideleft/apis/gemini.js index cd755c33..53ec25a7 100644 --- a/.config/ags/modules/sideleft/apis/gemini.js +++ b/.config/ags/modules/sideleft/apis/gemini.js @@ -151,7 +151,7 @@ const geminiWelcome = Box({ }); export const chatContent = Box({ - className: 'spacing-v-15', + className: 'spacing-v-5', vertical: true, setup: (self) => self .hook(GeminiService, (box, id) => { diff --git a/.config/ags/modules/sideleft/apis/waifu.js b/.config/ags/modules/sideleft/apis/waifu.js index 503c0992..89a06ad0 100644 --- a/.config/ags/modules/sideleft/apis/waifu.js +++ b/.config/ags/modules/sideleft/apis/waifu.js @@ -11,6 +11,7 @@ import { MaterialIcon } from '../../.commonwidgets/materialicon.js'; import { MarginRevealer } from '../../.widgethacks/advancedrevealers.js'; import { setupCursorHover, setupCursorHoverInfo } from '../../.widgetutils/cursorhover.js'; import WaifuService from '../../../services/waifus.js'; +import { darkMode } from '../../.miscutils/system.js'; async function getImageViewerApp(preferredApp) { Utils.execAsync(['bash', '-c', `command -v ${preferredApp}`]) @@ -117,9 +118,6 @@ const WaifuImage = (taglist) => { onClicked: action, setup: setupCursorHover, }) - const colorIndicator = Box({ - className: `sidebar-chat-indicator`, - }); const downloadState = Stack({ homogeneous: false, transition: 'slide_up_down', @@ -139,7 +137,7 @@ const WaifuImage = (taglist) => { }); const blockHeading = Box({ hpack: 'fill', - className: 'sidebar-waifu-content spacing-h-5', + className: 'spacing-h-5', children: [ ...taglist.map((tag) => CommandButton(tag)), Box({ hexpand: true }), @@ -248,14 +246,10 @@ const WaifuImage = (taglist) => { else Utils.execAsync(['bash', '-c', `wget -O '${thisBlock.attribute.imagePath}' '${url}'`]) .then(showImage) .catch(print); - blockHeading.get_children().forEach((child) => { - child.setCss(`border-color: ${dominant_color};`); - }) - colorIndicator.css = `background-color: ${dominant_color};`; + thisBlock.css = `background-color: mix(${darkMode ? 'black' : 'white'}, ${dominant_color}, 0.9);`; }, }, children: [ - colorIndicator, Box({ vertical: true, className: 'spacing-v-5', diff --git a/.config/ags/scripts/color_generation/applycolor.sh b/.config/ags/scripts/color_generation/applycolor.sh index 730d0869..e41d7c61 100755 --- a/.config/ags/scripts/color_generation/applycolor.sh +++ b/.config/ags/scripts/color_generation/applycolor.sh @@ -1,6 +1,6 @@ #!/usr/bin/env bash -term_alpha=80 #Set this to < 100 make all your terminals transparent +term_alpha=100 #Set this to < 100 make all your terminals transparent # sleep 0 # idk i wanted some delay or colors dont get applied properly if [ ! -d "$HOME"/.cache/ags/user/generated ]; then mkdir -p "$HOME"/.cache/ags/user/generated diff --git a/.config/ags/scss/_colors.scss b/.config/ags/scss/_colors.scss index e46632b5..77210262 100644 --- a/.config/ags/scss/_colors.scss +++ b/.config/ags/scss/_colors.scss @@ -68,8 +68,10 @@ $onLayer1Inactive: mix($onLayer1, $layer1, 45%); $onLayer1: $onSurfaceVariant; $layer2: $secondaryContainer; $onLayer2: $onSecondaryContainer; -$layer2Hover: mix($layer2, $onSurfaceVariant, 90%); -$layer2Active: mix($layer2, $onSurfaceVariant, 80%); +$layer1Hover: mix($layer1, $onLayer1, 85%); +$layer1Active: mix($layer1, $onLayer1, 70%); +$layer2Hover: mix($layer2, $onLayer2, 90%); +$layer2Active: mix($layer2, $onLayer2, 80%); // Elements $windowtitleOnLayer0Inactive: $onLayer0Inactive; $windowtitleOnLayer0: $onLayer0; @@ -110,3 +112,15 @@ $cheatsheetColors: ( $onSecondaryContainer ); +$sessionColors: ( + $onLayer1, + $onLayer1, + $onLayer1, + $onLayer1, + $onLayer1, + $onLayer1, + $onLayer1 +); +$brightnessOnLayer0: $onLayer0; +$volumeOnLayer0: $onLayer0; + diff --git a/.config/ags/scss/_common.scss b/.config/ags/scss/_common.scss index c4ee86c5..b63b381e 100644 --- a/.config/ags/scss/_common.scss +++ b/.config/ags/scss/_common.scss @@ -13,7 +13,7 @@ color: $onSecondary; } - caret-color: $primary; + caret-color: $onLayer2; } @keyframes appear { @@ -29,8 +29,8 @@ menu { @include elevation-border-softer; padding: 0.681rem; - background: $surfaceVariant; - color: $onSurfaceVariant; + background: $layer2; + color: $onLayer2; border-radius: 1.159rem; -gtk-outline-radius: 1.159rem; @@ -50,18 +50,18 @@ menubar>menuitem { menu>menuitem { padding: 0.4em 1.5rem; background: transparent; - transition: 0.2s ease background; + transition: 0.2s ease background-color; border-radius: 0.545rem; -gtk-outline-radius: 0.545rem; } menu>menuitem:hover, menu>menuitem:focus { - background-color: mix($surfaceVariant, $onSurfaceVariant, 90%); + background-color: $layer2Hover; } menu>menuitem:active { - background-color: mix($surfaceVariant, $onSurfaceVariant, 80%); + background-color: $layer2Active; } radio { diff --git a/.config/ags/scss/_material.scss b/.config/ags/scss/_material.scss index 9f9a981f..ddb659b0 100644 --- a/.config/ags/scss/_material.scss +++ b/.config/ags/scss/_material.scss @@ -1,56 +1,56 @@ $darkmode: True; $transparent: False; -$primary_paletteKeyColor: #427DA3; -$secondary_paletteKeyColor: #687987; -$tertiary_paletteKeyColor: #7D7195; -$neutral_paletteKeyColor: #73777B; -$neutral_variant_paletteKeyColor: #71787E; -$background: #101417; -$onBackground: #DFE3E8; -$surface: #101417; -$surfaceDim: #101417; -$surfaceBright: #353A3E; +$primary_paletteKeyColor: #A76837; +$secondary_paletteKeyColor: #8F715C; +$tertiary_paletteKeyColor: #777A4B; +$neutral_paletteKeyColor: #81756D; +$neutral_variant_paletteKeyColor: #84746A; +$background: #19120D; +$onBackground: #F0DFD6; +$surface: #19120D; +$surfaceDim: #19120D; +$surfaceBright: #413731; $surfaceContainerLowest: #FFFFFF; -$surfaceContainerLow: #181C20; -$surfaceContainer: #1C2024; -$surfaceContainerHigh: #262A2E; -$surfaceContainerHighest: #313539; -$onSurface: #DFE3E8; -$surfaceVariant: #41484D; -$onSurfaceVariant: #C1C7CE; -$inverseSurface: #DFE3E8; -$inverseOnSurface: #2D3135; -$outline: #8B9198; -$outlineVariant: #41484D; +$surfaceContainerLow: #221A15; +$surfaceContainer: #261E18; +$surfaceContainerHigh: #312822; +$surfaceContainerHighest: #3C332D; +$onSurface: #F0DFD6; +$surfaceVariant: #52443B; +$onSurfaceVariant: #D6C3B7; +$inverseSurface: #F0DFD6; +$inverseOnSurface: #382F29; +$outline: #9F8D83; +$outlineVariant: #52443B; $shadow: #000000; $scrim: #000000; -$surfaceTint: #94CDF7; -$primary: #94CDF7; -$onPrimary: #00344D; -$primaryContainer: #004C6D; -$onPrimaryContainer: #C8E6FF; -$inversePrimary: #246488; -$secondary: #B7C9D8; -$onSecondary: #21323F; -$secondaryContainer: #384956; -$onSecondaryContainer: #D3E5F5; -$tertiary: #CEC0E8; -$onTertiary: #352B4B; -$tertiaryContainer: #978BB0; +$surfaceTint: #FFB783; +$primary: #FFB783; +$onPrimary: #4F2500; +$primaryContainer: #6D390B; +$onPrimaryContainer: #FFDCC5; +$inversePrimary: #8A5021; +$secondary: #E4BFA7; +$onSecondary: #422B1B; +$secondaryContainer: #5B412F; +$onSecondaryContainer: #FFDCC5; +$tertiary: #C8CA94; +$onTertiary: #30330B; +$tertiaryContainer: #919463; $onTertiaryContainer: #000000; $error: #FFB4AB; $onError: #690005; $errorContainer: #93000A; $onErrorContainer: #FFDAD6; -$primaryFixed: #C8E6FF; -$primaryFixedDim: #94CDF7; -$onPrimaryFixed: #001E2E; -$onPrimaryFixedVariant: #004C6D; -$secondaryFixed: #D3E5F5; -$secondaryFixedDim: #B7C9D8; -$onSecondaryFixed: #0B1D29; -$onSecondaryFixedVariant: #384956; -$tertiaryFixed: #E9DDFF; -$tertiaryFixedDim: #CEC0E8; -$onTertiaryFixed: #1F1635; -$onTertiaryFixedVariant: #4B4163; +$primaryFixed: #FFDCC5; +$primaryFixedDim: #FFB783; +$onPrimaryFixed: #301400; +$onPrimaryFixedVariant: #6D390B; +$secondaryFixed: #FFDCC5; +$secondaryFixedDim: #E4BFA7; +$onSecondaryFixed: #2A1708; +$onSecondaryFixedVariant: #5B412F; +$tertiaryFixed: #E4E6AE; +$tertiaryFixedDim: #C8CA94; +$onTertiaryFixed: #1B1D00; +$onTertiaryFixedVariant: #474920; diff --git a/.config/ags/scss/_osd.scss b/.config/ags/scss/_osd.scss index 6a9d8b8f..16f49572 100644 --- a/.config/ags/scss/_osd.scss +++ b/.config/ags/scss/_osd.scss @@ -10,7 +10,7 @@ .osd-value { @include elevation-border; @include elevation2; - background-color: $background; + background-color: $layer0; border-radius: 1.023rem; padding: 0.625rem 1.023rem; padding-top: 0.313rem; @@ -27,7 +27,7 @@ min-height: 0.954rem; min-width: 0.068rem; border-radius: 10rem; - background-color: $secondaryContainer; + background-color: $layer2; // border: 0.068rem solid $onSecondaryContainer; } @@ -37,18 +37,13 @@ min-width: 0.680rem; margin: 0rem 0.137rem; border-radius: 10rem; - background-color: $onSecondaryContainer; + background-color: $onLayer2; } } -.osd-icon { - color: $onPrimaryContainer; -} - .osd-label { font-size: 1.023rem; font-weight: 500; - color: $onBackground; margin-top: 0.341rem; } @@ -56,7 +51,24 @@ @include titlefont; font-size: 1.688rem; font-weight: 500; - color: $onBackground; + color: $onLayer0; +} + +.osd-brightness { + color: $brightnessOnLayer0; +} +.osd-brightness-progress { + progress { + background-color: $brightnessOnLayer0; + } +} +.osd-volume { + color: $volumeOnLayer0; +} +.osd-volume-progress { + progress { + background-color: $volumeOnLayer0; + } } .osd-notifs { @@ -65,7 +77,7 @@ .osd-colorscheme { border-radius: 1.023rem; - background-color: $background; + background-color: $layer0; padding: 0.313rem 0.626rem; @include elevation2; } @@ -157,11 +169,16 @@ color: $onSurfaceVariant; box { background-color: $onSurfaceVariant; } } +.osd-color-L1 { + background-color: $layer1; + color: $onLayer1; + box { background-color: $onLayer1; } +} -.osd-color-background { - background-color: $background; - color: $onBackground; - box { background-color: $onBackground; } +.osd-color-layer0 { + background-color: $layer0; + color: $onLayer0; + box { background-color: $onLayer0; } } .osd-settings-btn-arrow { diff --git a/.config/ags/scss/_osk.scss b/.config/ags/scss/_osk.scss index fc22cfe6..6cefc4af 100644 --- a/.config/ags/scss/_osk.scss +++ b/.config/ags/scss/_osk.scss @@ -1,7 +1,7 @@ $osk_key_height: 2.5rem; $osk_key_width: 2.5rem; $osk_key_padding: 0.188rem; -$osk_key_rounding: 0.682rem; +$osk_key_rounding: 0.545rem; $osk_key_fontsize: 1.091rem; .osk-window { @@ -11,12 +11,12 @@ $osk_key_fontsize: 1.091rem; @include elevation2; // min-height: 29.591rem; // min-width: 50rem; - background-color: $t_background; + background-color: $layer0; } .osk-body { padding: 1.023rem; - padding-top: 0px; + padding-top: 0rem; } .osk-show { @@ -32,7 +32,7 @@ $osk_key_fontsize: 1.091rem; .osk-dragline { @include full-rounding; - background-color: $surfaceVariant; + background-color: $onLayer0Inactive; min-height: 0.273rem; min-width: 10.227rem; margin-top: 0.545rem; @@ -41,8 +41,8 @@ $osk_key_fontsize: 1.091rem; .osk-key { border-radius: $osk_key_rounding; - background-color: $t_surfaceVariant; - color: $onSurfaceVariant; + background-color: $layer1; + color: $onLayer1; padding: $osk_key_padding; font-weight: 500; font-size: $osk_key_fontsize; @@ -50,16 +50,16 @@ $osk_key_fontsize: 1.091rem; .osk-key:hover, .osk-key:focus { - background-color: $hovercolor; + background-color: $layer1Hover; } .osk-key:active { - background-color: $activecolor; + background-color: $layer1Active; font-size: $osk_key_fontsize; } .osk-key-active { - background-color: $activecolor; + background-color: $layer1Active; } .osk-key-normal { @@ -95,8 +95,8 @@ $osk_key_fontsize: 1.091rem; .osk-control-button { border-radius: $osk_key_rounding; - background-color: $t_surfaceVariant; - color: $onSurfaceVariant; + background-color: $layer1; + color: $onLayer1; font-weight: 500; font-size: $osk_key_fontsize; padding: 0.682rem; @@ -104,11 +104,11 @@ $osk_key_fontsize: 1.091rem; .osk-control-button:hover, .osk-control-button:focus { - background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%); + background-color: $layer1Hover; } .osk-control-button:active { - background-color: mix($t_surfaceVariant, $onSurfaceVariant, 70%); + background-color: $layer1Active; font-size: $osk_key_fontsize; } diff --git a/.config/ags/scss/_session.scss b/.config/ags/scss/_session.scss index cfa56206..16390829 100644 --- a/.config/ags/scss/_session.scss +++ b/.config/ags/scss/_session.scss @@ -1,24 +1,23 @@ .session-bg { - background-color: $t_surface; + background-color: transparentize($color: $layer0, $amount: 0.4); } .session-button { @include large-rounding; min-width: 8.182rem; min-height: 8.182rem; - background-color: $surfaceVariant; - color: $onSurfaceVariant; + background-color: $layer1; + color: $onLayer1; font-size: 3rem; } .session-button-focused { - background-color: $secondaryContainer; - color: $onSecondaryContainer; + background-color: $layer1Hover; } .session-button-desc { - background-color: mix($surface, $surfaceVariant, 50%); - color: mix($onSurface, $onSurfaceVariant, 50%); + background-color: $layer2; + color: $onLayer2; border-bottom-left-radius: $rounding_large; border-bottom-right-radius: $rounding_large; padding: 0.205rem 0.341rem; @@ -29,7 +28,13 @@ @include large-rounding; min-width: 8.182rem; min-height: 5.455rem; - background-color: $surfaceVariant; - color: $onSurfaceVariant; + background-color: $layer1; + color: $onLayer1; font-size: 3rem; } + +@for $i from 1 through 7 { + .session-color-#{$i} { + color: nth($sessionColors, $i); + } +} diff --git a/.config/ags/scss/_sidebars.scss b/.config/ags/scss/_sidebars.scss index 9cca76bd..ebb615dd 100644 --- a/.config/ags/scss/_sidebars.scss +++ b/.config/ags/scss/_sidebars.scss @@ -2,8 +2,6 @@ $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%); $textboxColor: $surfaceContainerHigh; $system: $secondary; $onSystem: $onSecondary; -$chatgpt: $primary; -$onChatgpt: $onPrimary; @mixin group-padding { padding: 0.341rem; @@ -588,32 +586,47 @@ $colorpicker_rounding: 0.341rem; .sidebar-chat-message { margin: 0.682rem; + @include normal-rounding; + @include group-padding; + background-color: $layer1; } .sidebar-chat-indicator { @include element_decel; @include full-rounding; min-width: 0.136rem; +} + +.sidebar-chat-indicator-waifu { + @include element_decel; + @include full-rounding; + min-width: 0.136rem; background-color: $onBackground; } -.sidebar-chat-indicator-user { - background-color: $onBackground; -} - -.sidebar-chat-indicator-bot { - background-color: $chatgpt; -} - -.sidebar-chat-indicator-System { - background-color: $system; -} - .sidebar-chat-name { @include titlefont; - padding: 0.341rem; - margin-left: -0.136rem; - padding-left: 0.818rem; + @include small-rounding; + padding: 0.341rem 0.818rem; + margin: 0.341rem; + // margin-left: 0rem; + background-color: $layer2; + color: $onLayer2; +} + +.sidebar-chat-name-user { + background-color: $layer2; + color: $onLayer2; +} + +.sidebar-chat-name-bot { + background-color: $secondary; + color: $onSecondary; +} + +.sidebar-chat-name-system { + background-color: $secondaryContainer; + color: $onSecondaryContainer; } .sidebar-chat-txtblock { @@ -800,17 +813,11 @@ $colorpicker_rounding: 0.341rem; padding-left: 0.818rem; } -.sidebar-waifu-content { - margin-left: 0.682rem; -} - .sidebar-waifu-txt { @include readingfont; - margin-left: 0.682rem; } .sidebar-waifu-image { - margin-left: 0.682rem; @include normal-rounding; background-size: cover; background-repeat: no-repeat; @@ -842,6 +849,10 @@ $waifu_image_overlay_transparency: 0.7; background-color: rgba(60, 60, 60, $waifu_image_overlay_transparency); } +.sidebar-booru-imagegrid { + @include normal-rounding; +} + .sidebar-booru-image { @include small-rounding; margin: 0.273rem;