forked from Shinonome/dots-hyprland
Material You schemes support, transparency in AGS, colorscheme UI and more (#337)
This commit is contained in:
@@ -120,6 +120,51 @@ export const ConfigSegmentedSelection = ({
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const ConfigMulipleSelection = ({
|
||||||
|
icon, name, desc = '',
|
||||||
|
optionsArr = [
|
||||||
|
[ { name: 'Option 1', value: 0 }, { name: 'Option 2', value: 1 } ],
|
||||||
|
[ { name: 'Option 3', value: 0 }, { name: 'Option 4', value: 1 } ],
|
||||||
|
],
|
||||||
|
initIndex = [0, 0],
|
||||||
|
onChange,
|
||||||
|
...rest
|
||||||
|
}) => {
|
||||||
|
let lastSelected = initIndex;
|
||||||
|
let value = optionsArr[initIndex[0]][initIndex[1]].value;
|
||||||
|
const widget = Box({
|
||||||
|
tooltipText: desc,
|
||||||
|
className: 'multipleselection-container spacing-v-3',
|
||||||
|
vertical: true,
|
||||||
|
children: optionsArr.map((options, grp) => {
|
||||||
|
return Box({
|
||||||
|
className: 'spacing-h-5',
|
||||||
|
hpack: 'center',
|
||||||
|
children: options.map((option, id) => {
|
||||||
|
return Button({
|
||||||
|
setup: setupCursorHover,
|
||||||
|
className: `multipleselection-btn ${id == initIndex[1] && grp == initIndex[0] ? 'multipleselection-btn-enabled' : ''}`,
|
||||||
|
label: option.name,
|
||||||
|
onClicked: (self) => {
|
||||||
|
const kidsg = widget.get_children();
|
||||||
|
const kids = kidsg.flatMap(widget => widget.get_children());
|
||||||
|
kids.forEach(kid => {
|
||||||
|
kid.toggleClassName('multipleselection-btn-enabled', false);
|
||||||
|
});
|
||||||
|
lastSelected = id;
|
||||||
|
self.toggleClassName('multipleselection-btn-enabled', true);
|
||||||
|
onChange(option.value, option.name);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
...rest,
|
||||||
|
});
|
||||||
|
return widget;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
export const ConfigGap = ({ vertical = true, size = 5, ...rest }) => Box({
|
export const ConfigGap = ({ vertical = true, size = 5, ...rest }) => Box({
|
||||||
className: `gap-${vertical ? 'v' : 'h'}-${size}`,
|
className: `gap-${vertical ? 'v' : 'h'}-${size}`,
|
||||||
...rest,
|
...rest,
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ export const isArchDistro = (distroID == 'arch' || distroID == 'endeavouros' ||
|
|||||||
export const hasFlatpak = !!exec(`bash -c 'command -v flatpak'`);
|
export const hasFlatpak = !!exec(`bash -c 'command -v flatpak'`);
|
||||||
|
|
||||||
const LIGHTDARK_FILE_LOCATION = `${GLib.get_user_cache_dir()}/ags/user/colormode.txt`;
|
const LIGHTDARK_FILE_LOCATION = `${GLib.get_user_cache_dir()}/ags/user/colormode.txt`;
|
||||||
export let darkMode = !(Utils.readFile(LIGHTDARK_FILE_LOCATION).trim() == '-l');
|
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 = () => {
|
export const getDistroIcon = () => {
|
||||||
// Arches
|
// Arches
|
||||||
|
|||||||
@@ -1,51 +1,208 @@
|
|||||||
|
const { Gio, GLib } = imports.gi;
|
||||||
|
import Variable from 'resource:///com/github/Aylur/ags/variable.js';
|
||||||
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
|
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
|
||||||
|
import { ConfigToggle, ConfigMulipleSelection } from '../.commonwidgets/configwidgets.js';
|
||||||
const { Box, Label } = Widget;
|
import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
|
||||||
|
const { execAsync } = Utils;
|
||||||
|
import { setupCursorHover } from '../.widgetutils/cursorhover.js';
|
||||||
import { showColorScheme } from '../../variables.js';
|
import { showColorScheme } from '../../variables.js';
|
||||||
|
import { MaterialIcon } from '../.commonwidgets/materialicon.js';
|
||||||
|
|
||||||
const ColorBox = ({
|
const ColorBox = ({
|
||||||
name = 'Color',
|
name = 'Color',
|
||||||
...rest
|
...rest
|
||||||
}) => Box({
|
}) => Widget.Box({
|
||||||
...rest,
|
...rest,
|
||||||
homogeneous: true,
|
homogeneous: true,
|
||||||
children: [
|
children: [
|
||||||
Label({
|
Widget.Label({
|
||||||
label: `${name}`,
|
label: `${name}`,
|
||||||
})
|
})
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
const ColorschemeContent = () => Box({
|
const ColorSchemeSettingsRevealer = () => {
|
||||||
|
const headerButtonIcon = MaterialIcon('expand_more', 'norm');
|
||||||
|
const header = Widget.Button({
|
||||||
|
className: 'osd-settings-btn-arrow',
|
||||||
|
onClicked: () => {
|
||||||
|
content.revealChild = !content.revealChild;
|
||||||
|
headerButtonIcon.label = content.revealChild ? 'expand_less' : 'expand_more';
|
||||||
|
},
|
||||||
|
setup: setupCursorHover,
|
||||||
|
hpack: 'end',
|
||||||
|
child: headerButtonIcon,
|
||||||
|
});
|
||||||
|
const content = Widget.Revealer({
|
||||||
|
revealChild: false,
|
||||||
|
transition: 'slide_down',
|
||||||
|
transitionDuration: 200,
|
||||||
|
child: ColorSchemeSettings(),
|
||||||
|
setup: (self) => self.hook(isHoveredColorschemeSettings, (revealer) => {
|
||||||
|
if (isHoveredColorschemeSettings.value == false) {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (isHoveredColorschemeSettings.value == false)
|
||||||
|
revealer.revealChild = false;
|
||||||
|
headerButtonIcon.label = 'expand_more';
|
||||||
|
}, 1500);
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
return Widget.EventBox({
|
||||||
|
onHover: (self) => {
|
||||||
|
isHoveredColorschemeSettings.setValue(true);
|
||||||
|
},
|
||||||
|
onHoverLost: (self) => {
|
||||||
|
isHoveredColorschemeSettings.setValue(false);
|
||||||
|
},
|
||||||
|
child: Widget.Box({
|
||||||
|
vertical: true,
|
||||||
|
children: [
|
||||||
|
header,
|
||||||
|
content,
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculateSchemeInitIndex(optionsArr, searchValue = 'tonalspot') {
|
||||||
|
if (searchValue == '')
|
||||||
|
searchValue = 'tonalspot';
|
||||||
|
const flatArray = optionsArr.flatMap(subArray => subArray);
|
||||||
|
const result = flatArray.findIndex(element => element.value === searchValue);
|
||||||
|
const rowIndex = Math.floor(result / optionsArr[0].length);
|
||||||
|
const columnIndex = result % optionsArr[0].length;
|
||||||
|
return [rowIndex, columnIndex];
|
||||||
|
}
|
||||||
|
|
||||||
|
const schemeOptionsArr = [
|
||||||
|
[
|
||||||
|
{ name: 'Tonal Spot', value: 'tonalspot' },
|
||||||
|
{ name: 'Fruit Salad', value: 'fruitsalad' },
|
||||||
|
{ name: 'Fidelity', value: 'fidelity' },
|
||||||
|
{ name: 'Rainbow', value: 'rainbow' },
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{ name: 'Neutral', value: 'neutral' },
|
||||||
|
{ name: 'Monochrome', value: 'monochrome' },
|
||||||
|
{ name: 'Expressive', value: 'expressive' },
|
||||||
|
{ name: 'Vibrant', value: 'vibrant' },
|
||||||
|
],
|
||||||
|
//[
|
||||||
|
// { name: 'Content', value: 'content' },
|
||||||
|
//]
|
||||||
|
];
|
||||||
|
|
||||||
|
const initColorMode = Utils.exec('bash -c "sed -n \'1p\' $HOME/.cache/ags/user/colormode.txt"');
|
||||||
|
const initColorVal = (initColorMode == "dark") ? 1 : 0;
|
||||||
|
const initTransparency = Utils.exec('bash -c "sed -n \'2p\' $HOME/.cache/ags/user/colormode.txt"');
|
||||||
|
const initTransparencyVal = (initTransparency == "transparent") ? 1 : 0;
|
||||||
|
const initScheme = Utils.exec('bash -c "sed -n \'3p\' $HOME/.cache/ags/user/colormode.txt"');
|
||||||
|
const initSchemeIndex = calculateSchemeInitIndex(schemeOptionsArr, initScheme);
|
||||||
|
|
||||||
|
const ColorSchemeSettings = () => Widget.Box({
|
||||||
|
className: 'osd-colorscheme-settings spacing-v-5',
|
||||||
|
vertical: true,
|
||||||
|
vpack: 'center',
|
||||||
|
children: [
|
||||||
|
Widget.Box({
|
||||||
|
children: [
|
||||||
|
ConfigToggle({
|
||||||
|
name: 'Dark Mode',
|
||||||
|
initValue: initColorVal,
|
||||||
|
onChange: (self, newValue) => {
|
||||||
|
let lightdark = newValue == 0 ? "light" : "dark";
|
||||||
|
execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "1s/.*/${lightdark}/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`])
|
||||||
|
.then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`]))
|
||||||
|
.catch(print);
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
ConfigToggle({
|
||||||
|
name: 'Transparency',
|
||||||
|
initValue: initTransparencyVal,
|
||||||
|
onChange: (self, newValue) => {
|
||||||
|
let transparency = newValue == 0 ? "opaque" : "transparent";
|
||||||
|
execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "2s/.*/${transparency}/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`])
|
||||||
|
.then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`]))
|
||||||
|
.catch(print);
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
ConfigMulipleSelection({
|
||||||
|
hpack: 'center',
|
||||||
|
vpack: 'center',
|
||||||
|
optionsArr: schemeOptionsArr,
|
||||||
|
initIndex: initSchemeIndex,
|
||||||
|
onChange: (value, name) => {
|
||||||
|
execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "3s/.*/${value}/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`])
|
||||||
|
.then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`]))
|
||||||
|
.catch(print);
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
const ColorschemeContent = () => Widget.Box({
|
||||||
className: 'osd-colorscheme spacing-v-5',
|
className: 'osd-colorscheme spacing-v-5',
|
||||||
vertical: true,
|
vertical: true,
|
||||||
hpack: 'center',
|
hpack: 'center',
|
||||||
children: [
|
children: [
|
||||||
Label({
|
Widget.Label({
|
||||||
xalign: 0,
|
xalign: 0,
|
||||||
className: 'txt-norm titlefont txt',
|
className: 'txt-norm titlefont txt',
|
||||||
label: 'Colorscheme',
|
label: 'Colorscheme',
|
||||||
|
hpack: 'center',
|
||||||
}),
|
}),
|
||||||
Box({
|
Widget.Box({
|
||||||
className: 'spacing-h-5',
|
className: 'spacing-h-5',
|
||||||
|
hpack: 'center',
|
||||||
children: [
|
children: [
|
||||||
ColorBox({ name: 'P', className: 'osd-color osd-color-primary' }),
|
ColorBox({ name: 'P', className: 'osd-color osd-color-primary' }),
|
||||||
ColorBox({ name: 'P-c', className: 'osd-color osd-color-primaryContainer' }),
|
|
||||||
ColorBox({ name: 'S', className: 'osd-color osd-color-secondary' }),
|
ColorBox({ name: 'S', className: 'osd-color osd-color-secondary' }),
|
||||||
ColorBox({ name: 'S-c', className: 'osd-color osd-color-secondaryContainer' }),
|
ColorBox({ name: 'T', className: 'osd-color osd-color-tertiary' }),
|
||||||
ColorBox({ name: 'Sf-v', className: 'osd-color osd-color-surfaceVariant' }),
|
ColorBox({ name: 'Sf', className: 'osd-color osd-color-surface' }),
|
||||||
ColorBox({ name: 'L1', className: 'osd-color osd-color-layer1' }),
|
ColorBox({ name: 'Sf-i', className: 'osd-color osd-color-inverseSurface' }),
|
||||||
ColorBox({ name: 'L0', className: 'osd-color osd-color-layer0' }),
|
ColorBox({ name: 'E', className: 'osd-color osd-color-error' }),
|
||||||
]
|
]
|
||||||
})
|
}),
|
||||||
|
Widget.Box({
|
||||||
|
className: 'spacing-h-5',
|
||||||
|
hpack: 'center',
|
||||||
|
children: [
|
||||||
|
ColorBox({ name: 'P-c', className: 'osd-color osd-color-primaryContainer' }),
|
||||||
|
ColorBox({ name: 'S-c', className: 'osd-color osd-color-secondaryContainer' }),
|
||||||
|
ColorBox({ name: 'T-c', className: 'osd-color osd-color-tertiaryContainer' }),
|
||||||
|
ColorBox({ name: 'Sf-c', className: 'osd-color osd-color-surfaceContainer' }),
|
||||||
|
ColorBox({ name: 'Sf-v', className: 'osd-color osd-color-surfaceVariant' }),
|
||||||
|
ColorBox({ name: 'E-c', className: 'osd-color osd-color-errorContainer' }),
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
ColorSchemeSettingsRevealer(),
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const isHoveredColorschemeSettings = Variable(false);
|
||||||
|
|
||||||
export default () => Widget.Revealer({
|
export default () => Widget.Revealer({
|
||||||
transition: 'slide_down',
|
transition: 'slide_down',
|
||||||
transitionDuration: userOptions.animations.durationLarge,
|
transitionDuration: userOptions.animations.durationLarge,
|
||||||
child: ColorschemeContent(),
|
child: ColorschemeContent(),
|
||||||
setup: (self) => self.hook(showColorScheme, (revealer) => {
|
setup: (self) => {
|
||||||
revealer.revealChild = showColorScheme.value;
|
self
|
||||||
}),
|
.hook(showColorScheme, (revealer) => {
|
||||||
|
if (showColorScheme.value == true)
|
||||||
|
revealer.revealChild = true;
|
||||||
|
else
|
||||||
|
revealer.revealChild = isHoveredColorschemeSettings.value;
|
||||||
|
})
|
||||||
|
.hook(isHoveredColorschemeSettings, (revealer) => {
|
||||||
|
if (isHoveredColorschemeSettings.value == false) {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (isHoveredColorschemeSettings.value == false)
|
||||||
|
revealer.revealChild = showColorScheme.value;
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -12,6 +12,9 @@ import { showMusicControls } from '../../variables.js';
|
|||||||
import { darkMode } from '../.miscutils/system.js';
|
import { darkMode } from '../.miscutils/system.js';
|
||||||
|
|
||||||
const COMPILED_STYLE_DIR = `${GLib.get_user_cache_dir()}/ags/user/generated`
|
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`;
|
||||||
|
const colorMode = Utils.exec('bash -c "sed -n \'1p\' $HOME/.cache/ags/user/colormode.txt"');
|
||||||
|
const lightDark = (colorMode == "light") ? '-l' : '';
|
||||||
const COVER_COLORSCHEME_SUFFIX = '_colorscheme.css';
|
const COVER_COLORSCHEME_SUFFIX = '_colorscheme.css';
|
||||||
var lastCoverPath = '';
|
var lastCoverPath = '';
|
||||||
|
|
||||||
@@ -199,7 +202,7 @@ const CoverArt = ({ player, ...rest }) => {
|
|||||||
|
|
||||||
// Generate colors
|
// Generate colors
|
||||||
execAsync(['bash', '-c',
|
execAsync(['bash', '-c',
|
||||||
`${App.configDir}/scripts/color_generation/generate_colors_material.py --path '${coverPath}' > ${App.configDir}/scss/_musicmaterial.scss ${darkMode ? '' : '-l'}`])
|
`${App.configDir}/scripts/color_generation/generate_colors_material.py --path '${coverPath}' --mode ${darkMode ? 'dark' : 'light'} > ${App.configDir}/scss/_musicmaterial.scss`])
|
||||||
.then(() => {
|
.then(() => {
|
||||||
exec(`wal -i "${player.coverPath}" -n -t -s -e -q ${darkMode ? '' : '-l'}`)
|
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(`cp ${GLib.get_user_cache_dir()}/wal/colors.scss ${App.configDir}/scss/_musicwal.scss`);
|
||||||
|
|||||||
@@ -28,16 +28,16 @@ export function launchCustomCommand(command) {
|
|||||||
execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/switchwall.sh`, `&`]).catch(print);
|
execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/switchwall.sh`, `&`]).catch(print);
|
||||||
}
|
}
|
||||||
else if (args[0] == '>color') { // Generate colorscheme from color picker
|
else if (args[0] == '>color') { // Generate colorscheme from color picker
|
||||||
execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/switchcolor.sh`, `&`]).catch(print);
|
execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/switchcolor.sh --pick`, `&`]).catch(print);
|
||||||
}
|
}
|
||||||
else if (args[0] == '>light') { // Light mode
|
else if (args[0] == '>light') { // Light mode
|
||||||
execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && echo "-l" > ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`])
|
execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "1s/.*/light/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`])
|
||||||
.then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchwall.sh --noswitch`]))
|
.then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`]))
|
||||||
.catch(print);
|
.catch(print);
|
||||||
}
|
}
|
||||||
else if (args[0] == '>dark') { // Dark mode
|
else if (args[0] == '>dark') { // Dark mode
|
||||||
execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && echo "" > ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`])
|
execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "1s/.*/dark/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`])
|
||||||
.then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchwall.sh --noswitch`]))
|
.then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`]))
|
||||||
.catch(print);
|
.catch(print);
|
||||||
}
|
}
|
||||||
else if (args[0] == '>badapple') { // Black and white
|
else if (args[0] == '>badapple') { // Black and white
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
#!/usr/bin/env bash
|
#!/usr/bin/env bash
|
||||||
|
|
||||||
term_alpha=100 # 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
|
if [ ! -d "$HOME"/.cache/ags/user/generated ]; then
|
||||||
mkdir -p "$HOME"/.cache/ags/user/generated
|
mkdir -p "$HOME"/.cache/ags/user/generated
|
||||||
fi
|
fi
|
||||||
@@ -34,7 +35,7 @@ get_light_dark() {
|
|||||||
if [ ! -f "$HOME"/.cache/ags/user/colormode.txt ]; then
|
if [ ! -f "$HOME"/.cache/ags/user/colormode.txt ]; then
|
||||||
echo "" > "$HOME"/.cache/ags/user/colormode.txt
|
echo "" > "$HOME"/.cache/ags/user/colormode.txt
|
||||||
else
|
else
|
||||||
lightdark=$(cat "$HOME"/.cache/ags/user/colormode.txt) # either "" or "-l"
|
lightdark=$(sed -n '1p' "$HOME/.cache/ags/user/colormode.txt")
|
||||||
fi
|
fi
|
||||||
echo "$lightdark"
|
echo "$lightdark"
|
||||||
}
|
}
|
||||||
@@ -132,7 +133,7 @@ apply_gtk() { # Using gradience-cli
|
|||||||
# Set light/dark preference
|
# Set light/dark preference
|
||||||
# And set GTK theme manually as Gradience defaults to light adw-gtk3
|
# And set GTK theme manually as Gradience defaults to light adw-gtk3
|
||||||
# (which is unreadable when broken when you use dark mode)
|
# (which is unreadable when broken when you use dark mode)
|
||||||
if [ "$lightdark" = "-l" ]; then
|
if [ "$lightdark" = "light" ]; then
|
||||||
gsettings set org.gnome.desktop.interface gtk-theme 'adw-gtk3'
|
gsettings set org.gnome.desktop.interface gtk-theme 'adw-gtk3'
|
||||||
gsettings set org.gnome.desktop.interface color-scheme 'prefer-light'
|
gsettings set org.gnome.desktop.interface color-scheme 'prefer-light'
|
||||||
else
|
else
|
||||||
|
|||||||
@@ -7,11 +7,22 @@ if [ $# -eq 0 ]; then
|
|||||||
fi
|
fi
|
||||||
|
|
||||||
# check if the file ~/.cache/ags/user/colormode.txt exists. if not, create it. else, read it to $lightdark
|
# check if the file ~/.cache/ags/user/colormode.txt exists. if not, create it. else, read it to $lightdark
|
||||||
lightdark=""
|
colormodefile="$HOME/.cache/ags/user/colormode.txt"
|
||||||
if [ ! -f "$HOME/.cache/ags/user/colormode.txt" ]; then
|
lightdark="dark"
|
||||||
echo "" > "$HOME/.cache/ags/user/colormode.txt"
|
transparency="opaque"
|
||||||
|
materialscheme="tonalspot"
|
||||||
|
if [ ! -f $colormodefile ]; then
|
||||||
|
echo "dark" > $colormodefile
|
||||||
|
echo "opaque" >> $colormodefile
|
||||||
|
echo "tonalspot" >> $colormodefile
|
||||||
|
elif [[ $(wc -l < $colormodefile) -ne 3 || $(wc -w < $colormodefile) -ne 3 ]]; then
|
||||||
|
echo "dark" > $colormodefile
|
||||||
|
echo "opaque" >> $colormodefile
|
||||||
|
echo "tonalspot" >> $colormodefile
|
||||||
else
|
else
|
||||||
lightdark=$(cat "$HOME/.cache/ags/user/colormode.txt") # either "" or "-l"
|
lightdark=$(sed -n '1p' $colormodefile)
|
||||||
|
transparency=$(sed -n '2p' $colormodefile)
|
||||||
|
materialscheme=$(sed -n '3p' $colormodefile)
|
||||||
fi
|
fi
|
||||||
backend="material" # color generator backend
|
backend="material" # color generator backend
|
||||||
if [ ! -f "$HOME/.cache/ags/user/colorbackend.txt" ]; then
|
if [ ! -f "$HOME/.cache/ags/user/colorbackend.txt" ]; then
|
||||||
@@ -22,13 +33,13 @@ fi
|
|||||||
|
|
||||||
cd "$HOME/.config/ags/scripts/" || exit
|
cd "$HOME/.config/ags/scripts/" || exit
|
||||||
if [[ "$1" = "#"* ]]; then # this is a color
|
if [[ "$1" = "#"* ]]; then # this is a color
|
||||||
color_generation/generate_colors_material.py --color "$1" "$lightdark" > "$HOME"/.cache/ags/user/generated/material_colors.scss
|
color_generation/generate_colors_material.py --color "$1" --mode "$lightdark" --scheme "$materialscheme" --transparency "$transparency" > "$HOME"/.cache/ags/user/generated/material_colors.scss
|
||||||
if [ "$2" = "--apply" ]; then
|
if [ "$2" = "--apply" ]; then
|
||||||
cp "$HOME"/.cache/ags/user/generated/material_colors.scss "$HOME/.config/ags/scss/_material.scss"
|
cp "$HOME"/.cache/ags/user/generated/material_colors.scss "$HOME/.config/ags/scss/_material.scss"
|
||||||
color_generation/applycolor.sh
|
color_generation/applycolor.sh
|
||||||
fi
|
fi
|
||||||
elif [ "$backend" = "material" ]; then
|
elif [ "$backend" = "material" ]; then
|
||||||
color_generation/generate_colors_material.py --path "$1" "$lightdark" > "$HOME"/.cache/ags/user/generated/material_colors.scss
|
color_generation/generate_colors_material.py --path "$1" --mode "$lightdark" --scheme "$materialscheme" --transparency "$transparency" > "$HOME"/.cache/ags/user/generated/material_colors.scss
|
||||||
if [ "$2" = "--apply" ]; then
|
if [ "$2" = "--apply" ]; then
|
||||||
cp "$HOME"/.cache/ags/user/generated/material_colors.scss "$HOME/.config/ags/scss/_material.scss"
|
cp "$HOME"/.cache/ags/user/generated/material_colors.scss "$HOME/.config/ags/scss/_material.scss"
|
||||||
color_generation/applycolor.sh
|
color_generation/applycolor.sh
|
||||||
|
|||||||
@@ -3,120 +3,96 @@ from material_color_utilities_python import *
|
|||||||
from pathlib import Path
|
from pathlib import Path
|
||||||
import sys
|
import sys
|
||||||
import subprocess
|
import subprocess
|
||||||
|
import argparse
|
||||||
|
import os
|
||||||
|
|
||||||
def darken(hex_color, factor=0.7):
|
from materialyoucolor.hct import Hct
|
||||||
if not (hex_color.startswith('#') and len(hex_color) in (4, 7)):
|
from materialyoucolor.dynamiccolor.material_dynamic_colors import MaterialDynamicColors
|
||||||
raise ValueError("Invalid hex color format")
|
|
||||||
hex_color = hex_color.lstrip('#')
|
|
||||||
rgb = tuple(int(hex_color[i:i + 2], 16) for i in (0, 2, 4))
|
|
||||||
darkened_rgb = tuple(int(max(0, val * factor)) for val in rgb)
|
|
||||||
darkened_hex = "#{:02X}{:02X}{:02X}".format(*darkened_rgb)
|
|
||||||
return darkened_hex
|
|
||||||
|
|
||||||
img = 0
|
parser = argparse.ArgumentParser(description='Color generation script')
|
||||||
newtheme=0
|
parser.add_argument('--path', type=str, default=None, help='generate colorscheme from image')
|
||||||
if len(sys.argv) > 1 and sys.argv[1] == '--path':
|
parser.add_argument('--color', type=str, default=None, help='generate colorscheme from color')
|
||||||
# try:
|
parser.add_argument('--mode', type=str , choices=['dark', 'light'], default='dark', help='dark or light mode')
|
||||||
img = Image.open(sys.argv[2])
|
parser.add_argument('--scheme', type=str, default=None, help='material scheme to use')
|
||||||
|
parser.add_argument('--transparency', type=str , choices=['opaque', 'transparent'], default='opaque', help='enable transparency')
|
||||||
|
parser.add_argument('--debug', action='store_true', default=False, help='debug mode')
|
||||||
|
args = parser.parse_args()
|
||||||
|
|
||||||
|
export_color_file=os.environ['HOME']+"/.cache/ags/user/color.txt"
|
||||||
|
|
||||||
|
# Default scheme -> Tonal Spot (Android Default)
|
||||||
|
from materialyoucolor.scheme.scheme_tonal_spot import SchemeTonalSpot as Scheme
|
||||||
|
if args.scheme is not None:
|
||||||
|
if args.scheme == 'fruitsalad':
|
||||||
|
from materialyoucolor.scheme.scheme_fruit_salad import SchemeFruitSalad as Scheme
|
||||||
|
elif args.scheme == 'expressive':
|
||||||
|
from materialyoucolor.scheme.scheme_expressive import SchemeExpressive as Scheme
|
||||||
|
elif args.scheme == 'monochrome':
|
||||||
|
from materialyoucolor.scheme.scheme_monochrome import SchemeMonochrome as Scheme
|
||||||
|
elif args.scheme == 'rainbow':
|
||||||
|
from materialyoucolor.scheme.scheme_rainbow import SchemeRainbow as Scheme
|
||||||
|
elif args.scheme == 'vibrant':
|
||||||
|
from materialyoucolor.scheme.scheme_vibrant import SchemeVibrant as Scheme
|
||||||
|
elif args.scheme == 'neutral':
|
||||||
|
from materialyoucolor.scheme.scheme_neutral import SchemeNeutral as Scheme
|
||||||
|
elif args.scheme == 'fidelity':
|
||||||
|
from materialyoucolor.scheme.scheme_fidelity import SchemeFidelity as Scheme
|
||||||
|
elif args.scheme == 'content':
|
||||||
|
from materialyoucolor.scheme.scheme_content import SchemeContent as Scheme
|
||||||
|
|
||||||
|
def hex_to_argb(hex_color):
|
||||||
|
color = hex_color.lstrip('#')
|
||||||
|
if len(color) != 6:
|
||||||
|
raise ValueError("Invalid color code!")
|
||||||
|
r = int(color[:2], 16)
|
||||||
|
g = int(color[2:4], 16)
|
||||||
|
b = int(color[4:], 16)
|
||||||
|
a = 255
|
||||||
|
argb = (a << 24) | (r << 16) | (g << 8) | b
|
||||||
|
return argb
|
||||||
|
|
||||||
|
def argb_to_hex(argb_value):
|
||||||
|
r = (argb_value >> 16) & 0xff
|
||||||
|
g = (argb_value >> 8) & 0xff
|
||||||
|
b = argb_value & 0xff
|
||||||
|
hex_r = format(r, '02x')
|
||||||
|
hex_g = format(g, '02x')
|
||||||
|
hex_b = format(b, '02x')
|
||||||
|
hex_color = f"#{hex_r}{hex_g}{hex_b}"
|
||||||
|
return hex_color
|
||||||
|
|
||||||
|
darkmode = (args.mode == 'dark')
|
||||||
|
transparent = (args.transparency == 'transparent')
|
||||||
|
print(f"$darkmode: {darkmode};")
|
||||||
|
print(f"$transparent: {transparent};")
|
||||||
|
|
||||||
|
if args.path is not None:
|
||||||
|
img = Image.open(args.path)
|
||||||
basewidth = 64
|
basewidth = 64
|
||||||
wpercent = (basewidth/float(img.size[0]))
|
wpercent = (basewidth/float(img.size[0]))
|
||||||
hsize = int((float(img.size[1])*float(wpercent)))
|
hsize = int((float(img.size[1])*float(wpercent)))
|
||||||
img = img.resize((basewidth,hsize),Image.Resampling.LANCZOS)
|
img = img.resize((basewidth,hsize),Image.Resampling.LANCZOS)
|
||||||
newtheme = themeFromImage(img)
|
argb = sourceColorFromImage(img)
|
||||||
# except FileNotFoundError:
|
with open(export_color_file, 'w') as file:
|
||||||
# print('[generate_colors_material.py] File not found', file=sys.stderr);
|
file.write(argb_to_hex(argb))
|
||||||
# exit()
|
elif args.color is not None:
|
||||||
# except:
|
argb = hex_to_argb(args.color)
|
||||||
# print('[generate_colors_material.py] Something went wrong', file=sys.stderr);
|
|
||||||
# exit()
|
|
||||||
elif len(sys.argv) > 1 and sys.argv[1] == '--color':
|
|
||||||
colorstr = sys.argv[2]
|
|
||||||
newtheme = themeFromSourceColor(argbFromHex(colorstr))
|
|
||||||
else:
|
|
||||||
# try:
|
|
||||||
# imagePath = subprocess.check_output("ags run-js 'wallpaper.get(0)'", shell=True)
|
|
||||||
imagePath = subprocess.check_output("swww query | head -1 | awk -F 'image: ' '{print $2}'", shell=True)
|
|
||||||
imagePath = imagePath[:-1].decode("utf-8")
|
|
||||||
img = Image.open(imagePath)
|
|
||||||
basewidth = 64
|
|
||||||
wpercent = (basewidth/float(img.size[0]))
|
|
||||||
hsize = int((float(img.size[1])*float(wpercent)))
|
|
||||||
img = img.resize((basewidth,hsize),Image.Resampling.LANCZOS)
|
|
||||||
newtheme = themeFromImage(img)
|
|
||||||
# except FileNotFoundError:
|
|
||||||
# print('[generate_colors_material.py] File not found', file=sys.stderr)
|
|
||||||
# exit()
|
|
||||||
# except:
|
|
||||||
# print('[generate_colors_material.py] Something went wrong', file=sys.stderr);
|
|
||||||
# exit()
|
|
||||||
|
|
||||||
colorscheme=0
|
scheme = Scheme(Hct.from_int(argb), darkmode, 0.0)
|
||||||
darkmode = True
|
|
||||||
if("-l" in sys.argv):
|
|
||||||
darkmode = False
|
|
||||||
colorscheme = newtheme.get('schemes').get('light')
|
|
||||||
print('$darkmode: false;')
|
|
||||||
else:
|
|
||||||
colorscheme = newtheme.get('schemes').get('dark')
|
|
||||||
print('$darkmode: true;')
|
|
||||||
|
|
||||||
primary = hexFromArgb(colorscheme.get_primary())
|
for color in vars(MaterialDynamicColors).keys():
|
||||||
onPrimary = hexFromArgb(colorscheme.get_onPrimary())
|
color_name = getattr(MaterialDynamicColors, color)
|
||||||
primaryContainer = hexFromArgb(colorscheme.get_primaryContainer())
|
if hasattr(color_name, "get_hct"):
|
||||||
onPrimaryContainer = hexFromArgb(colorscheme.get_onPrimaryContainer())
|
rgba = color_name.get_hct(scheme).to_rgba()
|
||||||
secondary = hexFromArgb(colorscheme.get_secondary())
|
r, g, b, a = rgba
|
||||||
onSecondary = hexFromArgb(colorscheme.get_onSecondary())
|
hex_color = f"#{r:02X}{g:02X}{b:02X}"
|
||||||
secondaryContainer = hexFromArgb(colorscheme.get_secondaryContainer())
|
print('$' + color + ': ' + hex_color + ';')
|
||||||
onSecondaryContainer = hexFromArgb(colorscheme.get_onSecondaryContainer())
|
|
||||||
tertiary = hexFromArgb(colorscheme.get_tertiary())
|
|
||||||
onTertiary = hexFromArgb(colorscheme.get_onTertiary())
|
|
||||||
tertiaryContainer = hexFromArgb(colorscheme.get_tertiaryContainer())
|
|
||||||
onTertiaryContainer = hexFromArgb(colorscheme.get_onTertiaryContainer())
|
|
||||||
error = hexFromArgb(colorscheme.get_error())
|
|
||||||
onError = hexFromArgb(colorscheme.get_onError())
|
|
||||||
errorContainer = hexFromArgb(colorscheme.get_errorContainer())
|
|
||||||
onErrorContainer = hexFromArgb(colorscheme.get_onErrorContainer())
|
|
||||||
background = hexFromArgb(colorscheme.get_background())
|
|
||||||
onBackground = hexFromArgb(colorscheme.get_onBackground())
|
|
||||||
surface = hexFromArgb(colorscheme.get_surface())
|
|
||||||
onSurface = hexFromArgb(colorscheme.get_onSurface())
|
|
||||||
surfaceVariant = hexFromArgb(colorscheme.get_surfaceVariant())
|
|
||||||
onSurfaceVariant = hexFromArgb(colorscheme.get_onSurfaceVariant())
|
|
||||||
outline = hexFromArgb(colorscheme.get_outline())
|
|
||||||
shadow = hexFromArgb(colorscheme.get_shadow())
|
|
||||||
inverseSurface = hexFromArgb(colorscheme.get_inverseSurface())
|
|
||||||
inverseOnSurface = hexFromArgb(colorscheme.get_inverseOnSurface())
|
|
||||||
inversePrimary = hexFromArgb(colorscheme.get_inversePrimary())
|
|
||||||
|
|
||||||
# make material less boring
|
if args.debug == True:
|
||||||
if darkmode:
|
for color in vars(MaterialDynamicColors).keys():
|
||||||
background = darken(background, 0.6)
|
color_name = getattr(MaterialDynamicColors, color)
|
||||||
|
if hasattr(color_name, "get_hct"):
|
||||||
print('$primary: ' + primary + ';')
|
rgba = color_name.get_hct(scheme).to_rgba()
|
||||||
print('$onPrimary: ' + onPrimary + ';')
|
r, g, b, a = rgba
|
||||||
print('$primaryContainer: ' + primaryContainer + ';')
|
hex_color = f"#{r:02X}{g:02X}{b:02X}"
|
||||||
print('$onPrimaryContainer: ' + onPrimaryContainer + ';')
|
print(color.ljust(32), "\x1B[38;2;{};{};{}m{}\x1B[0m".format(rgba[0], rgba[1], rgba[2], "\x1b[7m \x1b[7m"), hex_color)
|
||||||
print('$secondary: ' + secondary + ';')
|
|
||||||
print('$onSecondary: ' + onSecondary + ';')
|
|
||||||
print('$secondaryContainer: ' + secondaryContainer + ';')
|
|
||||||
print('$onSecondaryContainer: ' + onSecondaryContainer + ';')
|
|
||||||
print('$tertiary: ' + tertiary + ';')
|
|
||||||
print('$onTertiary: ' + onTertiary + ';')
|
|
||||||
print('$tertiaryContainer: ' + tertiaryContainer + ';')
|
|
||||||
print('$onTertiaryContainer: ' + onTertiaryContainer + ';')
|
|
||||||
print('$error: ' + error + ';')
|
|
||||||
print('$onError: ' + onError + ';')
|
|
||||||
print('$errorContainer: ' + errorContainer + ';')
|
|
||||||
print('$onErrorContainer: ' + onErrorContainer + ';')
|
|
||||||
print('$colorbarbg: ' + background + ';')
|
|
||||||
print('$background: ' + background + ';')
|
|
||||||
print('$onBackground: ' + onBackground + ';')
|
|
||||||
print('$surface: ' + surface + ';')
|
|
||||||
print('$onSurface: ' + onSurface + ';')
|
|
||||||
print('$surfaceVariant: ' + surfaceVariant + ';')
|
|
||||||
print('$onSurfaceVariant: ' + onSurfaceVariant + ';')
|
|
||||||
print('$outline: ' + outline + ';')
|
|
||||||
print('$shadow: ' + shadow + ';')
|
|
||||||
print('$inverseSurface: ' + inverseSurface + ';')
|
|
||||||
print('$inverseOnSurface: ' + inverseOnSurface + ';')
|
|
||||||
print('$inversePrimary: ' + inversePrimary + ';')
|
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
#!/usr/bin/env bash
|
#!/usr/bin/env bash
|
||||||
|
|
||||||
color=$(hyprpicker --no-fancy)
|
if [ "$1" == "--pick" ]; then
|
||||||
|
color=$(hyprpicker --no-fancy)
|
||||||
|
else
|
||||||
|
color=$(cut -f1 "${HOME}/.cache/ags/user/color.txt")
|
||||||
|
fi
|
||||||
|
|
||||||
# Generate colors for ags n stuff
|
# Generate colors for ags n stuff
|
||||||
"$HOME"/.config/ags/scripts/color_generation/colorgen.sh "${color}" --apply
|
"$HOME"/.config/ags/scripts/color_generation/colorgen.sh "${color}" --apply
|
||||||
|
|||||||
@@ -361,6 +361,7 @@ $bar_ws_width_focus_active: 2.045rem;
|
|||||||
|
|
||||||
.bar-statusicons-active {
|
.bar-statusicons-active {
|
||||||
background-color: $layer0Active;
|
background-color: $layer0Active;
|
||||||
|
color: $onLayer0Active;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar-util-btn {
|
.bar-util-btn {
|
||||||
@@ -391,6 +392,6 @@ $bar_ws_width_focus_active: 2.045rem;
|
|||||||
min-height: 1.032rem;
|
min-height: 1.032rem;
|
||||||
min-width: 1.032rem;
|
min-width: 1.032rem;
|
||||||
font-size: 1.032rem;
|
font-size: 1.032rem;
|
||||||
color: $barspacerightOnLayer0;
|
//color: $barspacerightOnLayer0;
|
||||||
padding: 0.205rem 0.341rem;
|
padding: 0.205rem 0.341rem;
|
||||||
}
|
}
|
||||||
+30
-173
@@ -1,58 +1,6 @@
|
|||||||
///////////// COLOR MODIFICATIONS /////////////
|
$transparency: 0.5;
|
||||||
// Material colors provide excellent readability, but can be uninteresting.
|
|
||||||
// This is an attempt to improve that.
|
|
||||||
$transparency_enabled: false;
|
|
||||||
|
|
||||||
@if $transparency_enabled ==false {
|
|
||||||
@if $darkmode ==true {
|
|
||||||
$primary: mix($primary, white, 70%);
|
|
||||||
$primaryContainer: mix($primaryContainer, white, 90%);
|
|
||||||
$background: mix(mix($background, $primary, 94%), #000000, 50%);
|
|
||||||
$surface: mix($surface, $primaryContainer, 98%);
|
|
||||||
$surfaceVariant: mix($surfaceVariant, #000000, 75%);
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $darkmode ==false {
|
|
||||||
$primaryContainer: mix($primaryContainer, white, 90%);
|
|
||||||
$surface: mix($surface, $primaryContainer, 98%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $transparency_enabled ==true {
|
|
||||||
@if $darkmode ==true {
|
|
||||||
$background: mix(mix($background, $primary, 94%), #000000, 50%);
|
|
||||||
$surface: mix($surface, $primaryContainer, 98%);
|
|
||||||
$surfaceVariant: mix($surfaceVariant, #000000, 55%);
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $darkmode ==false {
|
|
||||||
$background: mix($background, $primary, 94%);
|
|
||||||
$surface: mix($surface, $primary, 93%);
|
|
||||||
$surfaceVariant: mix($surfaceVariant, #ffffff, 55%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Amounts
|
|
||||||
$transparentize_amount: 0.3;
|
$transparentize_amount: 0.3;
|
||||||
$transparentize_surface_amount_less: 0.6;
|
|
||||||
$transparentize_surface_amount_less_less: 0.55;
|
|
||||||
$transparentize_surface_amount: 0.7;
|
$transparentize_surface_amount: 0.7;
|
||||||
$transparentize_surface_amount_more: 0.8;
|
|
||||||
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
|
|
||||||
|
|
||||||
@if $darkmode ==true {
|
|
||||||
// Less transparency
|
|
||||||
$transparentize_amount: 0.15;
|
|
||||||
$transparentize_surface_amount_less: 0.5;
|
|
||||||
$transparentize_surface_amount_less_less: 0.55;
|
|
||||||
$transparentize_surface_amount: 0.69;
|
|
||||||
$transparentize_surface_amount_more: 0.9;
|
|
||||||
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $transparency_enabled ==false {
|
|
||||||
$transparentize_amount: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Extended material
|
// Extended material
|
||||||
$success: #4f6354;
|
$success: #4f6354;
|
||||||
@@ -60,7 +8,7 @@ $onSuccess: #ffffff;
|
|||||||
$successContainer: #d1e8d5;
|
$successContainer: #d1e8d5;
|
||||||
$onSuccessContainer: #0c1f13;
|
$onSuccessContainer: #0c1f13;
|
||||||
|
|
||||||
@if $darkmode ==true {
|
@if $darkmode == True {
|
||||||
// Dark variant
|
// Dark variant
|
||||||
$success: #b5ccba;
|
$success: #b5ccba;
|
||||||
$onSuccess: #213528;
|
$onSuccess: #213528;
|
||||||
@@ -69,60 +17,35 @@ $onSuccessContainer: #0c1f13;
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Transparent versions
|
// Transparent versions
|
||||||
$t_primary: transparentize($primary, $transparentize_amount);
|
|
||||||
$t_onPrimary: transparentize($onPrimary, $transparentize_amount);
|
|
||||||
$t_primaryContainer: transparentize($primaryContainer, $transparentize_amount);
|
|
||||||
$t_onPrimaryContainer: transparentize($onPrimaryContainer, $transparentize_amount);
|
|
||||||
$t_secondary: transparentize($secondary, $transparentize_amount);
|
|
||||||
$t_onSecondary: transparentize($onSecondary, $transparentize_amount);
|
|
||||||
$t_secondaryContainer: transparentize($secondaryContainer, $transparentize_amount);
|
|
||||||
$l_t_secondaryContainer: transparentize($secondaryContainer, $transparentize_surface_amount_less);
|
|
||||||
$t_onSecondaryContainer: transparentize($onSecondaryContainer, $transparentize_amount);
|
|
||||||
$t_t_t_onSecondaryContainer: transparentize($onSecondaryContainer, 0.93);
|
|
||||||
$t_tertiary: transparentize($tertiary, $transparentize_amount);
|
|
||||||
$t_onTertiary: transparentize($onTertiary, $transparentize_amount);
|
|
||||||
$t_tertiaryContainer: transparentize($tertiaryContainer, $transparentize_amount);
|
|
||||||
$t_onTertiaryContainer: transparentize($onTertiaryContainer, $transparentize_amount);
|
|
||||||
$t_error: transparentize($error, $transparentize_amount);
|
|
||||||
$t_onError: transparentize($onError, $transparentize_amount);
|
|
||||||
$t_errorContainer: transparentize($errorContainer, $transparentize_amount);
|
|
||||||
$t_onErrorContainer: transparentize($onErrorContainer, $transparentize_amount);
|
|
||||||
$t_colorbarbg: transparentize($colorbarbg, $transparentize_amount);
|
|
||||||
$t_background: transparentize($background, $transparentize_amount);
|
$t_background: transparentize($background, $transparentize_amount);
|
||||||
$t_t_background: transparentize($background, $transparentize_surface_amount_more);
|
|
||||||
$t_onBackground: transparentize($onBackground, $transparentize_amount);
|
|
||||||
$t_surface: transparentize($surface, $transparentize_surface_amount);
|
$t_surface: transparentize($surface, $transparentize_surface_amount);
|
||||||
$t_t_surface: transparentize($surface, $transparentize_surface_amount_more);
|
|
||||||
$t_onSurface: transparentize($onSurface, $transparentize_surface_amount);
|
|
||||||
$t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount);
|
$t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount);
|
||||||
$t_onSurfaceVariant: transparentize($onSurfaceVariant, $transparentize_surface_amount);
|
|
||||||
$t_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_more);
|
@if $transparent == True {
|
||||||
$l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less);
|
$background: transparentize($background, $transparency);
|
||||||
$l_l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less_less);
|
$surface: transparentize($surface, $transparency);
|
||||||
$t_outline: transparentize($outline, $transparentize_amount);
|
$surfaceDim: transparentize($surfaceDim, $transparency);
|
||||||
$t_shadow: transparentize($shadow, $transparentize_amount);
|
$surfaceBright: transparentize($surfaceBright, $transparency);
|
||||||
$t_inverseSurface: transparentize($inverseSurface, $transparentize_amount);
|
$surfaceContainerLowest: transparentize($surfaceContainerLowest, $transparency);
|
||||||
$t_inverseOnSurface: transparentize($inverseOnSurface, $transparentize_amount);
|
$surfaceContainerLow: transparentize($surfaceContainerLow, $transparency);
|
||||||
$t_inversePrimary: transparentize($inversePrimary, $transparentize_amount);
|
$surfaceContainer: transparentize($surfaceContainer, $transparency);
|
||||||
// Transparent material (extended)
|
$surfaceContainerHigh: transparentize($surfaceContainerHigh, $transparency);
|
||||||
$t_success: transparentize($error, $transparentize_amount);
|
$surfaceContainerHighest: transparentize($surfaceContainerHighest, $transparency);
|
||||||
$t_onSuccess: transparentize($onError, $transparentize_amount);
|
$surfaceVariant: transparentize($surfaceVariant, $transparency);
|
||||||
$t_successContainer: transparentize($errorContainer, $transparentize_amount);
|
$inverseSurface: transparentize($inverseSurface, $transparency);
|
||||||
$t_onSuccessContainer: transparentize($onErrorContainer,
|
$surfaceTint: transparentize($surfaceTint, $transparency);
|
||||||
$transparentize_amount);
|
}
|
||||||
|
|
||||||
// Others
|
// Others
|
||||||
$hovercolor: mix($t_surface, $t_onSurface, 50%);
|
$subtext: $outline;
|
||||||
$activecolor: mix($t_surface, $t_onSurface, 30%);
|
|
||||||
$subtext: mix($onBackground, $background, 70%);
|
|
||||||
$actiontext: mix($onBackground, $background, 85%);
|
$actiontext: mix($onBackground, $background, 85%);
|
||||||
$black: black;
|
$black: black;
|
||||||
$white: white;
|
$white: white;
|
||||||
|
|
||||||
// Terminal colors
|
// Terminal colors
|
||||||
$termbg: mix($t_surfaceVariant, $t_onSurfaceVariant, 80%);
|
$termbg: $surfaceContainerHigh;
|
||||||
$termfg: $onSurfaceVariant;
|
$termfg: $onSurfaceVariant;
|
||||||
$term0: $t_background;
|
$term0: $background;
|
||||||
$term1: $error;
|
$term1: $error;
|
||||||
$term2: $inversePrimary;
|
$term2: $inversePrimary;
|
||||||
$term3: $onPrimaryContainer;
|
$term3: $onPrimaryContainer;
|
||||||
@@ -133,19 +56,20 @@ $term7: $onSurfaceVariant;
|
|||||||
|
|
||||||
/// Color mappings for more chaotic, dynamic colors like the average rice ///
|
/// Color mappings for more chaotic, dynamic colors like the average rice ///
|
||||||
// General
|
// General
|
||||||
$layer0: $t_background;
|
$layer0: $background;
|
||||||
$onLayer0: $onBackground;
|
$onLayer0: $onBackground;
|
||||||
$layer0Hover: mix($layer0, $onLayer0, 85%);
|
$layer0Hover: mix($layer0, $onLayer0, 85%);
|
||||||
$layer0Active: mix($layer0, $onLayer0, 70%);
|
$layer0Active: $primary;
|
||||||
|
$onLayer0Active: $onPrimary;
|
||||||
$onLayer0Inactive: mix($onLayer0, $layer0, 70%);
|
$onLayer0Inactive: mix($onLayer0, $layer0, 70%);
|
||||||
$layer1: $surface;
|
$layer1: $surfaceContainer;
|
||||||
$onLayer1: $onSurface;
|
$onLayer1: $onSurface;
|
||||||
$onLayer1Inactive: mix($onLayer1, $layer1, 45%);
|
$onLayer1Inactive: mix($onLayer1, $layer1, 45%);
|
||||||
$onLayer1: $onSurfaceVariant;
|
$onLayer1: $onSurfaceVariant;
|
||||||
|
$layer2: $secondaryContainer;
|
||||||
|
$onLayer2: $onSecondaryContainer;
|
||||||
$layer1Hover: mix($layer1, $onLayer1, 85%);
|
$layer1Hover: mix($layer1, $onLayer1, 85%);
|
||||||
$layer1Active: mix($layer1, $onLayer1, 70%);
|
$layer1Active: mix($layer1, $onLayer1, 70%);
|
||||||
$layer2: $surfaceVariant;
|
|
||||||
$onLayer2: $onSurfaceVariant;
|
|
||||||
$layer2Hover: mix($layer2, $onLayer2, 90%);
|
$layer2Hover: mix($layer2, $onLayer2, 90%);
|
||||||
$layer2Active: mix($layer2, $onLayer2, 80%);
|
$layer2Active: mix($layer2, $onLayer2, 80%);
|
||||||
// Elements
|
// Elements
|
||||||
@@ -172,9 +96,9 @@ $battOnLayer1: $onLayer1;
|
|||||||
$battLayer2: $secondaryContainer;
|
$battLayer2: $secondaryContainer;
|
||||||
$battOnLayer2: $onSecondaryContainer;
|
$battOnLayer2: $onSecondaryContainer;
|
||||||
$workspaceOnLayer1Inactive: $onLayer1Inactive;
|
$workspaceOnLayer1Inactive: $onLayer1Inactive;
|
||||||
$workspaceLayer3: $secondaryContainer;
|
$workspaceLayer3: $primary;
|
||||||
$workspaceOnLayer3: $onSecondaryContainer;
|
$workspaceOnLayer3: $onPrimary;
|
||||||
$workspaceOnLayer2: $onSurfaceVariant;
|
$workspaceOnLayer2: $onSecondaryContainer;
|
||||||
$trayOnLayer0: $onLayer0;
|
$trayOnLayer0: $onLayer0;
|
||||||
$cheatsheetTitle: $onSecondaryContainer;
|
$cheatsheetTitle: $onSecondaryContainer;
|
||||||
$cheatsheetColors: (
|
$cheatsheetColors: (
|
||||||
@@ -187,6 +111,7 @@ $cheatsheetColors: (
|
|||||||
$onSecondaryContainer,
|
$onSecondaryContainer,
|
||||||
$onSecondaryContainer
|
$onSecondaryContainer
|
||||||
);
|
);
|
||||||
|
|
||||||
$sessionColors: (
|
$sessionColors: (
|
||||||
$onLayer1,
|
$onLayer1,
|
||||||
$onLayer1,
|
$onLayer1,
|
||||||
@@ -199,71 +124,3 @@ $sessionColors: (
|
|||||||
$brightnessOnLayer0: $onLayer0;
|
$brightnessOnLayer0: $onLayer0;
|
||||||
$volumeOnLayer0: $onLayer0;
|
$volumeOnLayer0: $onLayer0;
|
||||||
|
|
||||||
///////////////////// test theme: amarena (kind of) /////////////////////////
|
|
||||||
// $layer0: #0e1116;
|
|
||||||
// $onLayer0: #FFFFFF;
|
|
||||||
// $layer0Hover: mix($layer0, $onLayer0, 85%);
|
|
||||||
// $layer0Active: mix($layer0, $onLayer0, 70%);
|
|
||||||
// $layer1: #171c22;
|
|
||||||
// $onLayer1Inactive: mix($onLayer1, $layer1, 45%);
|
|
||||||
// $onLayer1: $onSurfaceVariant;
|
|
||||||
// $layer1Hover: mix($layer1, $onLayer1, 85%);
|
|
||||||
// $layer1Active: mix($layer1, $onLayer1, 70%);
|
|
||||||
// $layer2: #252c35;
|
|
||||||
// $onLayer2: $onSurfaceVariant;
|
|
||||||
// $layer2Hover: mix($layer2, $onLayer2, 90%);
|
|
||||||
// $layer2Active: mix($layer2, $onLayer2, 80%);
|
|
||||||
// $layer3: #1C232A;
|
|
||||||
// // Bar
|
|
||||||
// $windowtitleOnLayer0Inactive: #70afa4;
|
|
||||||
// $windowtitleOnLayer0: #7FE3D1;
|
|
||||||
// $barspacerightOnLayer0: #7FE3D1;
|
|
||||||
// $timeOnLayer1: #cc7691;
|
|
||||||
// $dateOnLayer1: #cc7691;
|
|
||||||
// $ramOnLayer1: #6DC0D5;
|
|
||||||
// $ramLayer2: $layer2;
|
|
||||||
// $ramOnLayer2: #6DC0D5;
|
|
||||||
// $swapOnLayer1: #CC83C7;
|
|
||||||
// $swapLayer2: $layer2;
|
|
||||||
// $swapOnLayer2: #CC83C7;
|
|
||||||
// $cpuOnLayer1: #FA6295;
|
|
||||||
// $cpuLayer2: $layer2;
|
|
||||||
// $cpuOnLayer2: #FA6295;
|
|
||||||
// $musicOnLayer1: #94CF95;
|
|
||||||
// $musicLayer2: $layer2;
|
|
||||||
// $musicOnLayer2: #94CF95;
|
|
||||||
// $utilsLayer2: $layer2;
|
|
||||||
// $utilsOnLayer2: #CC83C7;
|
|
||||||
// $battOnLayer1: #94CF95;
|
|
||||||
// $battLayer2: $layer2;
|
|
||||||
// $battOnLayer2: #94CF95;
|
|
||||||
// $workspaceOnLayer1Inactive: $onLayer1Inactive;
|
|
||||||
// $workspaceLayer3: #33554f;
|
|
||||||
// $workspaceOnLayer3: #7FE3D1;
|
|
||||||
// $workspaceOnLayer2: #7FE3D1;
|
|
||||||
// $trayOnLayer0: #6DC0D5;
|
|
||||||
// // Cheatsheet
|
|
||||||
// $cheatsheetTitle: #6DC0D4;
|
|
||||||
// $cheatsheetColors: (
|
|
||||||
// #F692B2,
|
|
||||||
// #6EC1D6,
|
|
||||||
// #CD84C8,
|
|
||||||
// #7FE4D2,
|
|
||||||
// #94CF95,
|
|
||||||
// #CD84C8,
|
|
||||||
// #FB6396,
|
|
||||||
// #6EC1D6
|
|
||||||
// );
|
|
||||||
// $sessionColors: (
|
|
||||||
// #F692B2,
|
|
||||||
// #6EC1D6,
|
|
||||||
// #CD84C8,
|
|
||||||
// #7FE4D2,
|
|
||||||
// #94CF95,
|
|
||||||
// #CD84C8,
|
|
||||||
// #FB6396
|
|
||||||
// );
|
|
||||||
// // Osd
|
|
||||||
// $brightnessOnLayer0: #F692B2;
|
|
||||||
// $volumeOnLayer0: #94CF95;
|
|
||||||
|
|
||||||
|
|||||||
@@ -209,6 +209,33 @@ popover {
|
|||||||
color: $onSecondaryContainer;
|
color: $onSecondaryContainer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.multipleselection-container {
|
||||||
|
}
|
||||||
|
|
||||||
|
.multipleselection-btn {
|
||||||
|
@include small-rounding;
|
||||||
|
padding: 0rem 0.341rem;
|
||||||
|
border: 0.034rem solid $outlineVariant;
|
||||||
|
color: $onSurface;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multipleselection-btn:focus,
|
||||||
|
.multipleselection-btn:hover {
|
||||||
|
background-color: $hovercolor;
|
||||||
|
color: $onSurface;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multipleselection-btn-enabled {
|
||||||
|
background-color: $secondaryContainer;
|
||||||
|
color: $onSecondaryContainer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multipleselection-btn-enabled:hover,
|
||||||
|
.multipleselection-btn-enabled:focus {
|
||||||
|
background-color: $secondaryContainer;
|
||||||
|
color: $onSecondaryContainer;
|
||||||
|
}
|
||||||
|
|
||||||
.gap-v-5 {
|
.gap-v-5 {
|
||||||
min-height: 0.341rem;
|
min-height: 0.341rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,11 +12,11 @@
|
|||||||
|
|
||||||
.dock-app-btn:hover,
|
.dock-app-btn:hover,
|
||||||
.dock-app-btn:focus {
|
.dock-app-btn:focus {
|
||||||
background-color: mix($t_surface, $t_onSurface, 95%);
|
background-color: mix($t_surface, $onSurface, 95%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dock-app-btn:active {
|
.dock-app-btn:active {
|
||||||
background-color: mix($t_surface, $t_onSurface, 85%);
|
background-color: mix($t_surface, $onSurface, 85%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dock-app-icon {
|
.dock-app-icon {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
// Common colors
|
// Common colors
|
||||||
$hovercolor: rgba(128, 128, 128, 0.3);
|
$hovercolor: $surfaceContainerHigh;
|
||||||
$activecolor: rgba(128, 128, 128, 0.7);
|
$activecolor: $surfaceContainerHighest;
|
||||||
$rounding_small: 0.818rem;
|
$rounding_small: 0.818rem;
|
||||||
$rounding_mediumsmall: 0.955rem;
|
$rounding_mediumsmall: 0.955rem;
|
||||||
$rounding_medium: 1.159rem;
|
$rounding_medium: 1.159rem;
|
||||||
@@ -190,24 +190,24 @@ $overlay1: mix($onSurface, rgba(0, 0, 0, 0), 25%);
|
|||||||
$overlay2: mix($onSurface, rgba(0, 0, 0, 0), 40%);
|
$overlay2: mix($onSurface, rgba(0, 0, 0, 0), 40%);
|
||||||
|
|
||||||
@mixin elevation-border-softer {
|
@mixin elevation-border-softer {
|
||||||
border-top: 1px solid mix($t_t_surface, $t_onSurface, 90%);
|
border-top: 1px solid mix($t_surface, $onSurface, 90%);
|
||||||
border-left: 1px solid mix($t_t_surface, $t_onSurface, 90%);
|
border-left: 1px solid mix($t_surface, $onSurface, 90%);
|
||||||
border-right: 1px solid mix($t_t_surface, $t_onSurface, 95%);
|
border-right: 1px solid mix($t_surface, $onSurface, 95%);
|
||||||
border-bottom: 1px solid mix($t_t_surface, $t_onSurface, 95%);
|
border-bottom: 1px solid mix($t_surface, $onSurface, 95%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin elevation-border {
|
@mixin elevation-border {
|
||||||
border-top: 1px solid mix($t_t_surface, $onSurface, 90%);
|
border-top: 1px solid mix($t_surface, $onSurface, 80%);
|
||||||
border-left: 1px solid mix($t_t_surface, $onSurface, 90%);
|
border-left: 1px solid mix($t_surface, $onSurface, 80%);
|
||||||
border-right: 1px solid mix($t_t_surface, $onSurface, 95%);
|
border-right: 1px solid mix($t_surface, $onSurface, 85%);
|
||||||
border-bottom: 1px solid mix($t_t_surface, $onSurface, 95%);
|
border-bottom: 1px solid mix($t_surface, $onSurface, 85%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin elevation-border-heavier {
|
@mixin elevation-border-heavier {
|
||||||
border-top: 1px solid mix($t_t_surface, $onSurface, 80%);
|
border-top: 1px solid mix($t_surface, $onSurface, 70%);
|
||||||
border-left: 1px solid mix($t_t_surface, $onSurface, 80%);
|
border-left: 1px solid mix($t_surface, $onSurface, 70%);
|
||||||
border-right: 1px solid mix($t_t_surface, $onSurface, 85%);
|
border-right: 1px solid mix($t_surface, $onSurface, 75%);
|
||||||
border-bottom: 1px solid mix($t_t_surface, $onSurface, 85%);
|
border-bottom: 1px solid mix($t_surface, $onSurface, 75%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin elevation-border-transparent {
|
@mixin elevation-border-transparent {
|
||||||
|
|||||||
@@ -1,29 +1,56 @@
|
|||||||
$darkmode: true;
|
$darkmode: True;
|
||||||
$primary: #ffb4a9;
|
$transparent: False;
|
||||||
$onPrimary: #5f1410;
|
$primary_paletteKeyColor: #A76837;
|
||||||
$primaryContainer: #7e2b24;
|
$secondary_paletteKeyColor: #8F715C;
|
||||||
$onPrimaryContainer: #ffdad4;
|
$tertiary_paletteKeyColor: #777A4B;
|
||||||
$secondary: #e7bcb7;
|
$neutral_paletteKeyColor: #81756D;
|
||||||
$onSecondary: #442926;
|
$neutral_variant_paletteKeyColor: #84746A;
|
||||||
$secondaryContainer: #5d3f3b;
|
$background: #19120D;
|
||||||
$onSecondaryContainer: #ffdad5;
|
$onBackground: #F0DFD6;
|
||||||
$tertiary: #e0c38c;
|
$surface: #19120D;
|
||||||
$onTertiary: #3f2e04;
|
$surfaceDim: #19120D;
|
||||||
$tertiaryContainer: #574419;
|
$surfaceBright: #413731;
|
||||||
$onTertiaryContainer: #fddfa6;
|
$surfaceContainerLowest: #FFFFFF;
|
||||||
$error: #ffb4a9;
|
$surfaceContainerLow: #221A15;
|
||||||
$onError: #680003;
|
$surfaceContainer: #261E18;
|
||||||
$errorContainer: #930006;
|
$surfaceContainerHigh: #312822;
|
||||||
$onErrorContainer: #ffb4a9;
|
$surfaceContainerHighest: #3C332D;
|
||||||
$colorbarbg: #130F0F;
|
$onSurface: #F0DFD6;
|
||||||
$background: #130F0F;
|
$surfaceVariant: #52443B;
|
||||||
$onBackground: #ede0de;
|
$onSurfaceVariant: #D6C3B7;
|
||||||
$surface: #211a19;
|
$inverseSurface: #F0DFD6;
|
||||||
$onSurface: #ede0de;
|
$inverseOnSurface: #382F29;
|
||||||
$surfaceVariant: #534341;
|
$outline: #9F8D83;
|
||||||
$onSurfaceVariant: #d8c2bf;
|
$outlineVariant: #52443B;
|
||||||
$outline: #a08c89;
|
|
||||||
$shadow: #000000;
|
$shadow: #000000;
|
||||||
$inverseSurface: #ede0de;
|
$scrim: #000000;
|
||||||
$inverseOnSurface: #362f2e;
|
$surfaceTint: #FFB783;
|
||||||
$inversePrimary: #9c4239;
|
$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: #FFDCC5;
|
||||||
|
$primaryFixedDim: #FFB783;
|
||||||
|
$onPrimaryFixed: #301400;
|
||||||
|
$onPrimaryFixedVariant: #6D390B;
|
||||||
|
$secondaryFixed: #FFDCC5;
|
||||||
|
$secondaryFixedDim: #E4BFA7;
|
||||||
|
$onSecondaryFixed: #2A1708;
|
||||||
|
$onSecondaryFixedVariant: #5B412F;
|
||||||
|
$tertiaryFixed: #E4E6AE;
|
||||||
|
$tertiaryFixedDim: #C8CA94;
|
||||||
|
$onTertiaryFixed: #1B1D00;
|
||||||
|
$onTertiaryFixedVariant: #474920;
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
$notif_surface: $t_background;
|
$notif_surface: $surfaceContainer;
|
||||||
|
|
||||||
@mixin notif-rounding {
|
@mixin notif-rounding {
|
||||||
@include normal-rounding;
|
@include normal-rounding;
|
||||||
@@ -6,7 +6,7 @@ $notif_surface: $t_background;
|
|||||||
|
|
||||||
.notif-low {
|
.notif-low {
|
||||||
@include notif-rounding;
|
@include notif-rounding;
|
||||||
background-color: $l_l_t_surfaceVariant;
|
background-color: $surfaceContainerHigh;
|
||||||
color: $onSurfaceVariant;
|
color: $onSurfaceVariant;
|
||||||
padding: $rounding_small;
|
padding: $rounding_small;
|
||||||
padding-right: $rounding_small + 0.545rem;
|
padding-right: $rounding_small + 0.545rem;
|
||||||
@@ -14,7 +14,7 @@ $notif_surface: $t_background;
|
|||||||
|
|
||||||
.notif-normal {
|
.notif-normal {
|
||||||
@include notif-rounding;
|
@include notif-rounding;
|
||||||
background-color: $l_l_t_surfaceVariant;
|
background-color: $surfaceContainerHigh;
|
||||||
color: $onSurfaceVariant;
|
color: $onSurfaceVariant;
|
||||||
padding: $rounding_small;
|
padding: $rounding_small;
|
||||||
padding-right: $rounding_small + 0.545rem;
|
padding-right: $rounding_small + 0.545rem;
|
||||||
@@ -29,21 +29,23 @@ $notif_surface: $t_background;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.notif-clicked-low {
|
.notif-clicked-low {
|
||||||
background-color: mix($l_l_t_surfaceVariant, $t_onSurfaceVariant, 85%);
|
background-color: $surfaceContainerLow;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-clicked-normal {
|
.notif-clicked-normal {
|
||||||
background-color: mix($l_l_t_surfaceVariant, $t_onSurfaceVariant, 85%);
|
background-color: $surfaceContainerLow;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-clicked-critical {
|
.notif-clicked-critical {
|
||||||
background-color: mix($secondaryContainer, $onSecondaryContainer, 95%);
|
background-color: $onSecondary;
|
||||||
|
color: $onSecondaryContainer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-notif-low {
|
.popup-notif-low {
|
||||||
@include notif-rounding;
|
@include notif-rounding;
|
||||||
min-width: 30.682rem;
|
min-width: 30.682rem;
|
||||||
background-color: $notif_surface;
|
background-color: $notif_surface;
|
||||||
|
border: 0.034rem solid $outlineVariant;
|
||||||
color: $onSurfaceVariant;
|
color: $onSurfaceVariant;
|
||||||
padding: $rounding_small;
|
padding: $rounding_small;
|
||||||
padding-right: $rounding_small + 0.545rem;
|
padding-right: $rounding_small + 0.545rem;
|
||||||
@@ -53,6 +55,7 @@ $notif_surface: $t_background;
|
|||||||
@include notif-rounding;
|
@include notif-rounding;
|
||||||
min-width: 30.682rem;
|
min-width: 30.682rem;
|
||||||
background-color: $notif_surface;
|
background-color: $notif_surface;
|
||||||
|
border: 0.034rem solid $outlineVariant;
|
||||||
color: $onSurfaceVariant;
|
color: $onSurfaceVariant;
|
||||||
padding: $rounding_small;
|
padding: $rounding_small;
|
||||||
padding-right: $rounding_small + 0.545rem;
|
padding-right: $rounding_small + 0.545rem;
|
||||||
@@ -62,29 +65,31 @@ $notif_surface: $t_background;
|
|||||||
@include notif-rounding;
|
@include notif-rounding;
|
||||||
min-width: 30.682rem;
|
min-width: 30.682rem;
|
||||||
background-color: $secondaryContainer;
|
background-color: $secondaryContainer;
|
||||||
|
border: 0.034rem solid $onSecondaryContainer;
|
||||||
color: $onSecondaryContainer;
|
color: $onSecondaryContainer;
|
||||||
padding: $rounding_small;
|
padding: $rounding_small;
|
||||||
padding-right: $rounding_small + 0.545rem;
|
padding-right: $rounding_small + 0.545rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-notif-clicked-low {
|
.popup-notif-clicked-low {
|
||||||
background-color: mix($notif_surface, $onBackground, 94%);
|
background-color: $surfaceContainerLow;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-notif-clicked-normal {
|
.popup-notif-clicked-normal {
|
||||||
background-color: mix($notif_surface, $onBackground, 94%);
|
background-color: $surfaceContainerLow;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-notif-clicked-critical {
|
.popup-notif-clicked-critical {
|
||||||
background-color: mix($secondaryContainer, $onSecondaryContainer, 96%);
|
background-color: $onSecondary;
|
||||||
|
color: $onSecondaryContainer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-body-low {
|
.notif-body-low {
|
||||||
color: mix($onSurfaceVariant, $surfaceVariant, 67%);
|
color: $outline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-body-normal {
|
.notif-body-normal {
|
||||||
color: mix($onSurfaceVariant, $surfaceVariant, 67%);
|
color: $outline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-body-critical {
|
.notif-body-critical {
|
||||||
@@ -99,23 +104,23 @@ $notif_surface: $t_background;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.notif-icon-material {
|
.notif-icon-material {
|
||||||
background-color: $t_secondaryContainer;
|
background-color: $secondaryContainer;
|
||||||
color: $onSecondaryContainer;
|
color: $onSecondaryContainer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-icon-material-low {
|
.notif-icon-material-low {
|
||||||
background-color: $t_secondaryContainer;
|
background-color: $secondaryContainer;
|
||||||
color: $onSecondaryContainer;
|
color: $onSecondaryContainer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-icon-material-normal {
|
.notif-icon-material-normal {
|
||||||
background-color: $t_secondaryContainer;
|
background-color: $secondaryContainer;
|
||||||
color: $onSecondaryContainer;
|
color: $onSecondaryContainer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-icon-material-critical {
|
.notif-icon-material-critical {
|
||||||
background-color: $t_onSecondaryContainer;
|
background-color: $secondary;
|
||||||
color: $secondaryContainer;
|
color: $onSecondary;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-expand-btn {
|
.notif-expand-btn {
|
||||||
@@ -163,8 +168,7 @@ $notif_surface: $t_background;
|
|||||||
|
|
||||||
.osd-notif {
|
.osd-notif {
|
||||||
@include notif-rounding;
|
@include notif-rounding;
|
||||||
background-color: transparentize($background,
|
background-color: $background;
|
||||||
$transparentize_surface_amount_subtract_surface );
|
|
||||||
min-width: 30.682rem;
|
min-width: 30.682rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -201,43 +205,43 @@ $notif_surface: $t_background;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.notif-action-low {
|
.notif-action-low {
|
||||||
background-color: mix($t_onSurfaceVariant, $t_surface, 10%);
|
background-color: $surfaceContainerHighest;
|
||||||
color: $onSurfaceVariant;
|
color: $onSurfaceVariant;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-action-low:focus,
|
.notif-action-low:focus,
|
||||||
.notif-action-low:hover {
|
.notif-action-low:hover {
|
||||||
background-color: $hovercolor;
|
border: 0.040rem solid $outlineVariant;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-action-low:active {
|
.notif-action-low:active {
|
||||||
background-color: $activecolor;
|
background-color: $surfaceBright;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-action-normal {
|
.notif-action-normal {
|
||||||
background-color: mix($t_onSurfaceVariant, $t_surface, 10%);
|
background-color: $surfaceContainerHighest;
|
||||||
color: $onSurfaceVariant;
|
color: $onSurfaceVariant;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-action-normal:focus,
|
.notif-action-normal:focus,
|
||||||
.notif-action-normal:hover {
|
.notif-action-normal:hover {
|
||||||
background-color: $hovercolor;
|
border: 0.040rem solid $outlineVariant;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-action-normal:active {
|
.notif-action-normal:active {
|
||||||
background-color: $activecolor;
|
background-color: $surfaceBright;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-action-critical {
|
.notif-action-critical {
|
||||||
background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 10%);
|
background-color: mix($secondary, $onSecondary, 30%);
|
||||||
color: $onSurfaceVariant;
|
color: $onSurfaceVariant;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-action-critical:focus,
|
.notif-action-critical:focus,
|
||||||
.notif-action-critical:hover {
|
.notif-action-critical:hover {
|
||||||
background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 18%);
|
border: 0.040rem solid $outline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notif-action-critical:active {
|
.notif-action-critical:active {
|
||||||
background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 23%);
|
background-color: mix($secondary, $onSecondary, 40%);
|
||||||
}
|
}
|
||||||
@@ -78,19 +78,26 @@
|
|||||||
.osd-colorscheme {
|
.osd-colorscheme {
|
||||||
border-radius: 1.023rem;
|
border-radius: 1.023rem;
|
||||||
background-color: $layer0;
|
background-color: $layer0;
|
||||||
padding: 1.023rem;
|
padding: 0.313rem 0.626rem;
|
||||||
@include elevation2;
|
@include elevation2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.osd-colorscheme-settings {
|
||||||
|
background-color: $background;
|
||||||
|
padding: 0.313rem 0.626rem;
|
||||||
|
@include small-rounding;
|
||||||
|
}
|
||||||
|
|
||||||
.osd-color {
|
.osd-color {
|
||||||
@include full-rounding;
|
border-radius: 0.650rem;
|
||||||
|
-gtk-outline-radius: 0.650rem;
|
||||||
min-width: 2.727rem;
|
min-width: 2.727rem;
|
||||||
min-height: 1.705rem;
|
min-height: 1.705rem;
|
||||||
padding: 0rem 0.341rem;
|
padding: 0rem 0.341rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
box {
|
box {
|
||||||
@include full-rounding;
|
@include small-rounding;
|
||||||
margin: 0.409rem;
|
margin: 0.409rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -115,6 +122,48 @@
|
|||||||
color: $onSecondaryContainer;
|
color: $onSecondaryContainer;
|
||||||
box { background-color: $onSecondaryContainer; }
|
box { background-color: $onSecondaryContainer; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.osd-color-tertiary {
|
||||||
|
background-color: $tertiary;
|
||||||
|
color: $onTertiary;
|
||||||
|
box { background-color: $onTertiary; }
|
||||||
|
}
|
||||||
|
.osd-color-tertiaryContainer {
|
||||||
|
background-color: $tertiaryContainer;
|
||||||
|
color: $onTertiaryContainer;
|
||||||
|
box { background-color: $onTertiaryContainer; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.osd-color-error {
|
||||||
|
background-color: $error;
|
||||||
|
color: $onError;
|
||||||
|
box { background-color: $onError; }
|
||||||
|
}
|
||||||
|
.osd-color-errorContainer {
|
||||||
|
background-color: $errorContainer;
|
||||||
|
color: $onErrorContainer;
|
||||||
|
box { background-color: $onErrorContainer; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.osd-color-surface {
|
||||||
|
background-color: $surface;
|
||||||
|
color: $onSurface;
|
||||||
|
border: 0.068rem solid $outlineVariant;
|
||||||
|
box { background-color: $onSurface; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.osd-color-surfaceContainer {
|
||||||
|
background-color: $surfaceContainer;
|
||||||
|
color: $onSurface;
|
||||||
|
box { background-color: $onSurface; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.osd-color-inverseSurface {
|
||||||
|
background-color: $inverseSurface;
|
||||||
|
color: $inverseOnSurface;
|
||||||
|
box { background-color: $onSurfaceVariant; }
|
||||||
|
}
|
||||||
|
|
||||||
.osd-color-surfaceVariant {
|
.osd-color-surfaceVariant {
|
||||||
background-color: $surfaceVariant;
|
background-color: $surfaceVariant;
|
||||||
color: $onSurfaceVariant;
|
color: $onSurfaceVariant;
|
||||||
@@ -125,12 +174,28 @@
|
|||||||
color: $onLayer1;
|
color: $onLayer1;
|
||||||
box { background-color: $onLayer1; }
|
box { background-color: $onLayer1; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.osd-color-layer0 {
|
.osd-color-layer0 {
|
||||||
background-color: $layer0;
|
background-color: $layer0;
|
||||||
color: $onLayer0;
|
color: $onLayer0;
|
||||||
box { background-color: $onLayer0; }
|
box { background-color: $onLayer0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.osd-settings-btn-arrow {
|
||||||
|
@include full-rounding;
|
||||||
|
@include icon-material;
|
||||||
|
min-width: 1.705rem;
|
||||||
|
min-height: 1.705rem;
|
||||||
|
color: $onSurface;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $surfaceContainerHigh;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background-color: $surfaceContainerHighest;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.osd-show {
|
.osd-show {
|
||||||
transition: 200ms cubic-bezier(0.1, 1, 0, 1);
|
transition: 200ms cubic-bezier(0.1, 1, 0, 1);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
min-height: 3.409rem;
|
min-height: 3.409rem;
|
||||||
padding: 0rem 1.364rem;
|
padding: 0rem 1.364rem;
|
||||||
padding-right: 2.864rem;
|
padding-right: 2.864rem;
|
||||||
background-color: $t_background;
|
background-color: $background;
|
||||||
color: $onBackground;
|
color: $onBackground;
|
||||||
|
|
||||||
selection {
|
selection {
|
||||||
@@ -53,8 +53,8 @@
|
|||||||
@include elevation2;
|
@include elevation2;
|
||||||
min-width: 28.773rem;
|
min-width: 28.773rem;
|
||||||
padding: 0.682rem;
|
padding: 0.682rem;
|
||||||
background-color: $t_background;
|
background-color: $surfaceContainerLow;
|
||||||
color: $onBackground;
|
color: $onSurface;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview-search-results-icon {
|
.overview-search-results-icon {
|
||||||
@@ -97,7 +97,7 @@
|
|||||||
@include elevation-border;
|
@include elevation-border;
|
||||||
@include elevation2;
|
@include elevation2;
|
||||||
padding: 0.341rem;
|
padding: 0.341rem;
|
||||||
background-color: $t_background;
|
background-color: $background;
|
||||||
color: $onBackground;
|
color: $onBackground;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -105,33 +105,35 @@
|
|||||||
@include normal-rounding;
|
@include normal-rounding;
|
||||||
// @include elevation-border;
|
// @include elevation-border;
|
||||||
margin: 0.341rem;
|
margin: 0.341rem;
|
||||||
background-color: mix($t_t_surface, $t_onSurface, 93%);
|
background-color: $surfaceContainerLow;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview-tasks-workspace-number {
|
.overview-tasks-workspace-number {
|
||||||
@include mainfont;
|
@include mainfont;
|
||||||
color: mix($t_onSurface, $t_surface, 93%);
|
color: $onSurfaceVariant;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview-tasks-window {
|
.overview-tasks-window {
|
||||||
@include normal-rounding;
|
@include normal-rounding;
|
||||||
@include menu_decel;
|
@include menu_decel;
|
||||||
background-color: $t_surfaceVariant;
|
background-color: $surfaceContainerHigh;
|
||||||
color: $onSecondaryContainer;
|
color: $onSurface;
|
||||||
border: 0.068rem solid $t_t_t_onSecondaryContainer;
|
border: 0.068rem solid $outlineVariant;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview-tasks-window:hover,
|
.overview-tasks-window:hover,
|
||||||
.overview-tasks-window:focus {
|
.overview-tasks-window:focus {
|
||||||
background-color: mix($l_t_secondaryContainer, $primary, 95%);
|
background-color: $secondaryContainer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview-tasks-window:active {
|
.overview-tasks-window:active {
|
||||||
background-color: mix($l_t_secondaryContainer, $primary, 90%);
|
background-color: $tertiaryContainer;
|
||||||
|
background-color: mix($secondaryContainer, $hovercolor, 70%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview-tasks-window-selected {
|
.overview-tasks-window-selected {
|
||||||
background-color: mix($l_t_secondaryContainer, $primary, 90%);
|
background-color: $tertiaryContainer;
|
||||||
|
background-color: mix($secondaryContainer, $hovercolor, 70%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview-tasks-window-dragging {
|
.overview-tasks-window-dragging {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
$sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
|
$sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
|
||||||
$textboxColor: mix($surface, $surfaceVariant, 80%);
|
$textboxColor: $surfaceContainerHigh;
|
||||||
$system: $secondary;
|
$system: $secondary;
|
||||||
$onSystem: $onSecondary;
|
$onSystem: $onSecondary;
|
||||||
|
|
||||||
@@ -14,7 +14,7 @@ $onSystem: $onSecondary;
|
|||||||
border-radius: $rounding_large - $elevation_margin + 0.068rem;
|
border-radius: $rounding_large - $elevation_margin + 0.068rem;
|
||||||
min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
|
min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
|
||||||
// min-height: 29.591rem;
|
// min-height: 29.591rem;
|
||||||
background-color: $t_background;
|
background-color: $background;
|
||||||
padding: 1.023rem;
|
padding: 1.023rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -35,7 +35,7 @@ $onSystem: $onSecondary;
|
|||||||
border-radius: $rounding_large - $elevation_margin + 0.068rem;
|
border-radius: $rounding_large - $elevation_margin + 0.068rem;
|
||||||
min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
|
min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
|
||||||
// min-height: 29.591rem;
|
// min-height: 29.591rem;
|
||||||
background-color: $t_background;
|
background-color: $background;
|
||||||
padding: 1.023rem;
|
padding: 1.023rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -52,12 +52,12 @@ $onSystem: $onSecondary;
|
|||||||
.sidebar-group {
|
.sidebar-group {
|
||||||
@include normal-rounding;
|
@include normal-rounding;
|
||||||
@include group-padding;
|
@include group-padding;
|
||||||
background-color: $t_surface;
|
background-color: $surfaceContainer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-group-nopad {
|
.sidebar-group-nopad {
|
||||||
@include normal-rounding;
|
@include normal-rounding;
|
||||||
background-color: $t_surface;
|
background-color: $surfaceContainer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-group-invisible {
|
.sidebar-group-invisible {
|
||||||
@@ -71,7 +71,7 @@ $onSystem: $onSecondary;
|
|||||||
.sidebar-togglesbox {
|
.sidebar-togglesbox {
|
||||||
@include full-rounding;
|
@include full-rounding;
|
||||||
@include group-padding;
|
@include group-padding;
|
||||||
background-color: $t_surface;
|
background-color: $surfaceContainer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-iconbutton {
|
.sidebar-iconbutton {
|
||||||
@@ -94,8 +94,6 @@ $onSystem: $onSecondary;
|
|||||||
.sidebar-button {
|
.sidebar-button {
|
||||||
@include element_decel;
|
@include element_decel;
|
||||||
padding: 0rem $rounding_small;
|
padding: 0rem $rounding_small;
|
||||||
background-color: $t_secondaryContainer;
|
|
||||||
color: $onSecondaryContainer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-button:hover,
|
.sidebar-button:hover,
|
||||||
@@ -128,7 +126,7 @@ $onSystem: $onSecondary;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-navrail {
|
.sidebar-navrail {
|
||||||
// background-color: $t_surface;
|
// background-color: $surface;
|
||||||
padding: 0rem $rounding_medium;
|
padding: 0rem $rounding_medium;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -204,16 +202,16 @@ $onSystem: $onSecondary;
|
|||||||
@include element_decel;
|
@include element_decel;
|
||||||
min-width: 0.273rem;
|
min-width: 0.273rem;
|
||||||
min-height: 2.045rem;
|
min-height: 2.045rem;
|
||||||
background-color: $t_onSurfaceVariant;
|
background-color: transparentize($onSurfaceVariant, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
slider:hover,
|
slider:hover,
|
||||||
slider:focus {
|
slider:focus {
|
||||||
background-color: mix($t_onSurfaceVariant, $onSurfaceVariant, 80%);
|
background-color: transparentize($onSurfaceVariant, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
slider:active {
|
slider:active {
|
||||||
background-color: mix($onSurfaceVariant, $surfaceVariant, 50%);
|
background-color: transparentize($onSurface, 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -254,7 +252,7 @@ $onSystem: $onSecondary;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-calendar-btn-othermonth {
|
.sidebar-calendar-btn-othermonth {
|
||||||
color: mix($onSurface, $surface, 50%);
|
color: $outline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-calendar-header {
|
.sidebar-calendar-header {
|
||||||
@@ -265,19 +263,17 @@ $onSystem: $onSecondary;
|
|||||||
@include full-rounding;
|
@include full-rounding;
|
||||||
@include element_decel;
|
@include element_decel;
|
||||||
padding: 0rem 0.682rem;
|
padding: 0rem 0.682rem;
|
||||||
background-color: $t_surfaceVariant;
|
background-color: $surfaceContainer;
|
||||||
color: $onSurfaceVariant;
|
color: $outline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-calendar-monthyear-btn:hover,
|
.sidebar-calendar-monthyear-btn:hover,
|
||||||
.sidebar-calendar-monthyear-btn:focus {
|
.sidebar-calendar-monthyear-btn:focus {
|
||||||
background-color: $hovercolor;
|
background-color: $hovercolor;
|
||||||
color: mix($onSurfaceVariant, $surfaceVariant, 95%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-calendar-monthyear-btn:active {
|
.sidebar-calendar-monthyear-btn:active {
|
||||||
background-color: $activecolor;
|
background-color: $activecolor;
|
||||||
color: mix($onSurfaceVariant, $surfaceVariant, 85%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-calendar-monthshift-btn {
|
.sidebar-calendar-monthshift-btn {
|
||||||
@@ -285,28 +281,22 @@ $onSystem: $onSecondary;
|
|||||||
@include element_decel;
|
@include element_decel;
|
||||||
min-width: 2.045rem;
|
min-width: 2.045rem;
|
||||||
min-height: 2.045rem;
|
min-height: 2.045rem;
|
||||||
background-color: $t_surfaceVariant;
|
background-color: $surfaceContainer;
|
||||||
color: $onSurfaceVariant;
|
color: $outline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-calendar-monthshift-btn:hover {
|
.sidebar-calendar-monthshift-btn:hover {
|
||||||
background-color: $hovercolor;
|
background-color: $hovercolor;
|
||||||
color: mix($onSurfaceVariant, $surfaceVariant, 95%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-calendar-monthshift-btn:active {
|
.sidebar-calendar-monthshift-btn:active {
|
||||||
background-color: $activecolor;
|
background-color: $activecolor;
|
||||||
color: mix($onSurfaceVariant, $surfaceVariant, 85%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-todo-item {
|
.sidebar-todo-item {
|
||||||
padding-right: 0.545rem;
|
padding-right: 0.545rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-todo-item-even {
|
|
||||||
background-color: $t_t_surfaceVariant;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-todo-item-action {
|
.sidebar-todo-item-action {
|
||||||
@include element_decel;
|
@include element_decel;
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
@@ -347,11 +337,13 @@ $onSystem: $onSecondary;
|
|||||||
|
|
||||||
.sidebar-todo-new,
|
.sidebar-todo-new,
|
||||||
.sidebar-todo-new:focus {
|
.sidebar-todo-new:focus {
|
||||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%);
|
color: $onSecondaryContainer;
|
||||||
|
background-color: $secondaryContainer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-todo-new:active {
|
.sidebar-todo-new:active {
|
||||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
color: $onPrimaryContainer;
|
||||||
|
background-color: $primaryContainer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-todo-add {
|
.sidebar-todo-add {
|
||||||
@@ -365,11 +357,11 @@ $onSystem: $onSecondary;
|
|||||||
|
|
||||||
.sidebar-todo-add:hover,
|
.sidebar-todo-add:hover,
|
||||||
.sidebar-todo-add:focus {
|
.sidebar-todo-add:focus {
|
||||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%);
|
background-color: $surfaceContainerHigh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-todo-add:active {
|
.sidebar-todo-add:active {
|
||||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
background-color: $surfaceContainerHighest;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-todo-add-available {
|
.sidebar-todo-add-available {
|
||||||
@@ -384,11 +376,11 @@ $onSystem: $onSecondary;
|
|||||||
|
|
||||||
.sidebar-todo-add-available:hover,
|
.sidebar-todo-add-available:hover,
|
||||||
.sidebar-todo-add-available:focus {
|
.sidebar-todo-add-available:focus {
|
||||||
background-color: mix($primary, $onPrimary, 97%);
|
background-color: mix($primary, $hovercolor, 70%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-todo-add-available:active {
|
.sidebar-todo-add-available:active {
|
||||||
background-color: mix($primary, $onPrimary, 80%);
|
background-color: mix($primary, $hovercolor, 40%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-todo-entry {
|
.sidebar-todo-entry {
|
||||||
@@ -401,24 +393,24 @@ $onSystem: $onSecondary;
|
|||||||
min-height: 1.773rem;
|
min-height: 1.773rem;
|
||||||
min-width: 0rem;
|
min-width: 0rem;
|
||||||
padding: 0.205rem 0.682rem;
|
padding: 0.205rem 0.682rem;
|
||||||
border: 0.068rem solid mix($onSurfaceVariant, $surfaceVariant, 50%);
|
border: 0.068rem solid $outline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-todo-entry:focus {
|
.sidebar-todo-entry:focus {
|
||||||
border: 0.068rem solid mix($onSurfaceVariant, $surfaceVariant, 90%);
|
border: 0.068rem solid $onSurfaceVariant;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-module {
|
.sidebar-module {
|
||||||
@include normal-rounding;
|
@include normal-rounding;
|
||||||
@include group-padding;
|
@include group-padding;
|
||||||
background-color: $l_l_t_surfaceVariant;
|
background-color: $surfaceContainer;
|
||||||
padding: 0.682rem;
|
padding: 0.682rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-module-btn-arrow {
|
.sidebar-module-btn-arrow {
|
||||||
@include full-rounding;
|
@include full-rounding;
|
||||||
@include icon-material;
|
@include icon-material;
|
||||||
background-color: $l_l_t_surfaceVariant;
|
background-color: $surfaceContainerHigh;
|
||||||
min-width: 1.705rem;
|
min-width: 1.705rem;
|
||||||
min-height: 1.705rem;
|
min-height: 1.705rem;
|
||||||
|
|
||||||
@@ -430,7 +422,7 @@ $onSystem: $onSecondary;
|
|||||||
.sidebar-module-scripts-button {
|
.sidebar-module-scripts-button {
|
||||||
@include full-rounding;
|
@include full-rounding;
|
||||||
@include icon-material;
|
@include icon-material;
|
||||||
background-color: $l_l_t_surfaceVariant;
|
background-color: $surfaceContainer;
|
||||||
min-width: 1.705rem;
|
min-width: 1.705rem;
|
||||||
min-height: 1.705rem;
|
min-height: 1.705rem;
|
||||||
|
|
||||||
@@ -506,7 +498,7 @@ $colorpicker_rounding: 0.341rem;
|
|||||||
.sidebar-chat-apiswitcher {
|
.sidebar-chat-apiswitcher {
|
||||||
@include full-rounding;
|
@include full-rounding;
|
||||||
@include group-padding;
|
@include group-padding;
|
||||||
background-color: $t_surface;
|
background-color: $surfaceContainer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-chat-apiswitcher-icon {
|
.sidebar-chat-apiswitcher-icon {
|
||||||
@@ -571,11 +563,11 @@ $colorpicker_rounding: 0.341rem;
|
|||||||
|
|
||||||
.sidebar-chat-send:hover,
|
.sidebar-chat-send:hover,
|
||||||
.sidebar-chat-send:focus {
|
.sidebar-chat-send:focus {
|
||||||
background-color: $surfaceVariant;
|
background-color: $surfaceBright;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-chat-send:active {
|
.sidebar-chat-send:active {
|
||||||
background-color: mix($surfaceVariant, $onBackground, 80%);
|
background-color: $surfaceVariant;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-chat-send-available {
|
.sidebar-chat-send-available {
|
||||||
@@ -585,11 +577,11 @@ $colorpicker_rounding: 0.341rem;
|
|||||||
|
|
||||||
.sidebar-chat-send-available:hover,
|
.sidebar-chat-send-available:hover,
|
||||||
.sidebar-chat-send-available:focus {
|
.sidebar-chat-send-available:focus {
|
||||||
background-color: mix($primary, $onPrimary, 97%);
|
background-color: mix($primary, $hovercolor, 70%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-chat-send-available:active {
|
.sidebar-chat-send-available:active {
|
||||||
background-color: mix($primary, $onPrimary, 80%);
|
background-color: mix($primary, $hovercolor, 40%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-chat-message {
|
.sidebar-chat-message {
|
||||||
@@ -666,17 +658,17 @@ $colorpicker_rounding: 0.341rem;
|
|||||||
background-color: $termbg;
|
background-color: $termbg;
|
||||||
color: $termfg;
|
color: $termfg;
|
||||||
margin: 0rem 0.682rem;
|
margin: 0rem 0.682rem;
|
||||||
border: 0.068rem solid $t_t_t_onSecondaryContainer;
|
border: 0.068rem solid $outlineVariant;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-chat-codeblock-topbar {
|
.sidebar-chat-codeblock-topbar {
|
||||||
@include mainfont;
|
@include mainfont;
|
||||||
margin: 0.273rem;
|
margin: 0.273rem;
|
||||||
margin-bottom: 0rem;
|
margin-bottom: 0rem;
|
||||||
background-color: mix($t_secondaryContainer, $t_onSurfaceVariant, 30%);
|
background-color: $secondaryContainer;
|
||||||
color: $onSecondaryContainer;
|
color: $onSecondaryContainer;
|
||||||
border-radius: $rounding_medium - 0.273rem;
|
border-radius: $rounding_medium - 0.273rem;
|
||||||
border: 0.068rem solid mix($secondaryContainer, $onSecondaryContainer, 90%);
|
border: 0.068rem solid $outlineVariant;
|
||||||
border-top-left-radius: $rounding_small + 0.068rem;
|
border-top-left-radius: $rounding_small + 0.068rem;
|
||||||
border-top-right-radius: $rounding_small + 0.068rem;
|
border-top-right-radius: $rounding_small + 0.068rem;
|
||||||
padding: 0.341rem 0.477rem;
|
padding: 0.341rem 0.477rem;
|
||||||
@@ -695,11 +687,11 @@ $colorpicker_rounding: 0.341rem;
|
|||||||
|
|
||||||
.sidebar-chat-codeblock-topbar-btn:hover,
|
.sidebar-chat-codeblock-topbar-btn:hover,
|
||||||
.sidebar-chat-codeblock-topbar-btn:focus {
|
.sidebar-chat-codeblock-topbar-btn:focus {
|
||||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
background-color: mix($secondaryContainer, $onSecondaryContainer, 90%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-chat-codeblock-topbar-btn:active {
|
.sidebar-chat-codeblock-topbar-btn:active {
|
||||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
|
background-color: mix($secondaryContainer, $onSecondaryContainer, 80%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-chat-codeblock-code {
|
.sidebar-chat-codeblock-code {
|
||||||
@@ -807,11 +799,11 @@ $colorpicker_rounding: 0.341rem;
|
|||||||
|
|
||||||
.sidebar-pin-enabled:hover,
|
.sidebar-pin-enabled:hover,
|
||||||
.sidebar-pin-enabled:focus {
|
.sidebar-pin-enabled:focus {
|
||||||
background-color: mix($primary, $onPrimary, 90%);
|
background-color: mix($primary, $hovercolor, 70%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-pin-enabled:active {
|
.sidebar-pin-enabled:active {
|
||||||
background-color: mix($primary, $onPrimary, 80%);
|
background-color: mix($primary, $hovercolor, 40%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-waifu-heading {
|
.sidebar-waifu-heading {
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
# ####### Window rules ########
|
# ######## Window rules ########
|
||||||
windowrule = noblur,.* # Disables blur for windows. Substantially improves performance.
|
#windowrule = noblur,.* # Disables blur for windows. Substantially improves performance.
|
||||||
|
|
||||||
# windowrule = opacity 0.89 override 0.89 override, .* # Applies transparency to EVERY WINDOW
|
# windowrule = opacity 0.89 override 0.89 override, .* # Applies transparency to EVERY WINDOW
|
||||||
|
windowrule = float, ^(blueberry.py)$
|
||||||
windowrule = float, ^(steam)$
|
windowrule = float, ^(steam)$
|
||||||
windowrule = float, ^(guifetch)$ # FlafyDev/guifetch
|
windowrule = float, ^(guifetch)$ # FlafyDev/guifetch
|
||||||
windowrulev2 = tile,class:(wps)
|
windowrulev2 = tile,class:(wps)
|
||||||
@@ -16,8 +17,8 @@ windowrule=float,title:^(Open Folder)(.*)$
|
|||||||
windowrule=float,title:^(Save As)(.*)$
|
windowrule=float,title:^(Save As)(.*)$
|
||||||
windowrule=float,title:^(Library)(.*)$
|
windowrule=float,title:^(Library)(.*)$
|
||||||
|
|
||||||
# ####### Layer rules ########
|
# ######## Layer rules ########
|
||||||
layerrule = xray 1, .*
|
layerrule = xray 0, .*
|
||||||
# layerrule = noanim, .*
|
# layerrule = noanim, .*
|
||||||
layerrule = noanim, selection
|
layerrule = noanim, selection
|
||||||
layerrule = noanim, overview
|
layerrule = noanim, overview
|
||||||
@@ -42,23 +43,23 @@ layerrule = blur, session
|
|||||||
layerrule = noanim, sideright
|
layerrule = noanim, sideright
|
||||||
layerrule = noanim, sideleft
|
layerrule = noanim, sideleft
|
||||||
|
|
||||||
# layerrule = blur, bar
|
layerrule = blur, bar
|
||||||
# layerrule = ignorealpha 0.64, bar
|
layerrule = ignorealpha 0.20, bar
|
||||||
# layerrule = blur, corner.*
|
layerrule = blur, corner.*
|
||||||
# layerrule = ignorealpha 0.69, corner.*
|
layerrule = ignorealpha 0.20, corner.*
|
||||||
# layerrule = blur, dock
|
layerrule = blur, dock
|
||||||
# layerrule = ignorealpha 0.69, dock
|
layerrule = ignorealpha 0.20, dock
|
||||||
# layerrule = blur, indicator.*
|
layerrule = blur, indicator.*
|
||||||
# layerrule = ignorealpha 0.69, indicator.*
|
layerrule = ignorealpha 0.20, indicator.*
|
||||||
# layerrule = blur, overview
|
layerrule = blur, overview
|
||||||
# layerrule = ignorealpha 0.69, overview
|
layerrule = ignorealpha 0.20, overview
|
||||||
# layerrule = blur, cheatsheet
|
layerrule = blur, cheatsheet
|
||||||
# layerrule = ignorealpha 0.69, cheatsheet
|
layerrule = ignorealpha 0.20, cheatsheet
|
||||||
# layerrule = blur, sideright
|
layerrule = blur, sideright
|
||||||
# layerrule = ignorealpha 0.69, sideright
|
layerrule = ignorealpha 0.20, sideright
|
||||||
# layerrule = blur, sideleft
|
layerrule = blur, sideleft
|
||||||
# layerrule = ignorealpha 0.69, sideleft
|
layerrule = ignorealpha 0.20, sideleft
|
||||||
# layerrule = blur, indicator*
|
layerrule = blur, indicator*
|
||||||
# layerrule = ignorealpha 0.69, indicator*
|
layerrule = ignorealpha 0.20, indicator*
|
||||||
# layerrule = blur, osk
|
layerrule = blur, osk
|
||||||
# layerrule = ignorealpha 0.69, osk
|
layerrule = ignorealpha 0.20, osk
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ tinyxml2 gtkmm3 gtksourceviewmm cairomm
|
|||||||
|
|
||||||
### Python
|
### Python
|
||||||
# Add `python-setuptools-scm` and `python-wheel` explicitly to fix #197
|
# Add `python-setuptools-scm` and `python-wheel` explicitly to fix #197
|
||||||
python-build python-material-color-utilities python-pillow python-poetry python-pywal python-setuptools-scm python-wheel
|
python-build python-material-color-utilities python-materialyoucolor-git python-pillow python-poetry python-pywal python-setuptools-scm python-wheel
|
||||||
|
|
||||||
### Basic graphic env
|
### Basic graphic env
|
||||||
hyprland-git xorg-xrandr
|
hyprland-git xorg-xrandr
|
||||||
|
|||||||
Reference in New Issue
Block a user