Upgrade to Agsv2 + Astal (#533)
* migrate to astal * Reorganize project structure. * progress * Migrate Dashboard and Window Title modules. * Migrate clock and notification bar modules. * Remove unused code * Media menu * Rework network and volume modules * Finish custom modules. * Migrate battery bar module. * Update battery module and organize helpers. * Migrate workspace module. * Wrap up bar modules. * Checkpoint before I inevitbly blow something up. * Updates * Fix event propagation logic. * Type fixes * More type fixes * Fix padding for event boxes. * Migrate volume menu and refactor scroll event handlers. * network module WIP * Migrate network service. * Migrate bluetooth menu * Updates * Migrate notifications * Update scrolling behavior for custom modules. * Improve popup notifications and add timer functionality. * Migration notifications menu header/controls. * Migrate notifications menu and consolidate notifications menu code. * Migrate power menu. * Dashboard progress * Migrate dashboard * Migrate media menu. * Reduce media menu nesting. * Finish updating media menu bindings to navigate active player. * Migrate battery menu * Consolidate code * Migrate calendar menu * Fix workspace logic to update on client add/change/remove and consolidate code. * Migrate osd * Consolidate hyprland service connections. * Implement startup dropdown menu position allocation. * Migrate settings menu (WIP) * Settings dialo menu fixes * Finish Dashboard menu * Type updates * update submoldule for types * update github ci * ci * Submodule update * Ci updates * Remove type checking for now. * ci fix * Fix a bunch of stuff, losing track... need rest. Brb coffee * Validate dropdown menu before render. * Consolidate code and add auto-hide functionality. * Improve auto-hide behavior. * Consolidate audio menu code * Organize bluetooth code * Improve active player logic * Properly dismiss a notification on action button resolution. * Implement CLI command engine and migrate CLI commands. * Handle variable disposal * Bar component fixes and add hyprland startup rules. * Handle potentially null bindings network and bluetooth bindings. * Handle potentially null wired adapter. * Fix GPU stats * Handle poller for GPU * Fix gpu bar logic. * Clean up logic for stat bars. * Handle wifi and wired bar icon bindings. * Fix battery percentages * Fix switch behavior * Wifi staging fixes * Reduce redundant hyprland service calls. * Code cleanup * Document the option code and reduce redundant calls to optimize performance. * Remove outdated comment. * Add JSDocs * Add meson to build hyprpanel * Consistency updates * Organize commands * Fix images not showing up on notifications. * Remove todo * Move hyprpanel configuration to the ~/.config/hyprpanel directory and add utility commands. * Handle SRC directory for the bundled/built hyprpanel. * Add namespaces to all windows * Migrate systray * systray updates * Update meson to include ts, tsx and scss files. * Remove log from meson * Fix file choose path and make it float. * Added a command to check the dependency status * Update dep names. * Get scale directly from env * Add todo
This commit is contained in:
Jas Singh
GitHub
54
src/scss/main.scss
Normal file
54
src/scss/main.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
* {
|
||||
all: unset;
|
||||
font-family: $font-name;
|
||||
font-size: $font-size;
|
||||
font-weight: $font-weight;
|
||||
}
|
||||
|
||||
//general
|
||||
@import 'style/colors';
|
||||
@import 'style/common/common.scss';
|
||||
@import 'style/common/floating-widget.scss';
|
||||
@import 'style/common/widget-button.scss';
|
||||
@import 'style/common/popover_menu.scss';
|
||||
|
||||
//general styles
|
||||
@import 'style/common/general';
|
||||
|
||||
//modules - bar
|
||||
@import 'style/bar/bar';
|
||||
@import 'style/bar/menu';
|
||||
@import 'style/bar/audio';
|
||||
@import 'style/bar/media';
|
||||
@import 'style/bar/network';
|
||||
@import 'style/bar/bluetooth';
|
||||
@import 'style/bar/clock';
|
||||
@import 'style/bar/workspace';
|
||||
@import 'style/bar/window_title';
|
||||
@import 'style/bar/systray';
|
||||
@import 'style/bar/notifications';
|
||||
@import 'style/bar/power';
|
||||
@import 'style/bar/battery';
|
||||
@import 'style/bar/style';
|
||||
|
||||
//notifications
|
||||
@import 'style/notifications/popups';
|
||||
|
||||
//modules - menus
|
||||
@import 'style/menus/menu';
|
||||
@import 'style/menus/power';
|
||||
@import 'style/menus/powerdropdown';
|
||||
@import 'style/menus/audiomenu';
|
||||
@import 'style/menus/network';
|
||||
@import 'style/menus/bluetooth';
|
||||
@import 'style/menus/media';
|
||||
@import 'style/menus/notifications';
|
||||
@import 'style/menus/calendar';
|
||||
@import 'style/menus/energy';
|
||||
@import 'style/menus/dashboard';
|
||||
|
||||
//osd
|
||||
@import 'style/osd/index';
|
||||
|
||||
//settings dialog
|
||||
@import 'style/settings/dialog';
|
||||
44
src/scss/optionsTrackers.ts
Normal file
44
src/scss/optionsTrackers.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import icons from '../lib/icons/icons';
|
||||
import { bash, dependencies, Notify, isAnImage } from '../lib/utils';
|
||||
import options from '../options';
|
||||
import Wallpaper from '../services/Wallpaper';
|
||||
|
||||
const { matugen } = options.theme;
|
||||
|
||||
const ensureMatugenWallpaper = (): void => {
|
||||
const wallpaperPath = options.wallpaper.image.get();
|
||||
|
||||
if (matugen.get() && (!options.wallpaper.image.get().length || !isAnImage(wallpaperPath))) {
|
||||
Notify({
|
||||
summary: 'Matugen Failed',
|
||||
body: "Please select a wallpaper in 'Theming > General' first.",
|
||||
iconName: icons.ui.warning,
|
||||
timeout: 7000,
|
||||
});
|
||||
matugen.set(false);
|
||||
}
|
||||
};
|
||||
|
||||
export const initializeTrackers = (resetCssFunc: () => void): void => {
|
||||
matugen.subscribe(() => {
|
||||
ensureMatugenWallpaper();
|
||||
});
|
||||
|
||||
Wallpaper.connect('changed', () => {
|
||||
console.info('Wallpaper changed, regenerating Matugen colors...');
|
||||
if (options.theme.matugen.get()) {
|
||||
resetCssFunc();
|
||||
}
|
||||
});
|
||||
|
||||
options.wallpaper.image.subscribe(() => {
|
||||
if ((!Wallpaper.isRunning() && options.theme.matugen.get()) || !options.wallpaper.enable.get()) {
|
||||
console.info('Wallpaper path changed, regenerating Matugen colors...');
|
||||
resetCssFunc();
|
||||
}
|
||||
if (options.wallpaper.pywal.get() && dependencies('wal')) {
|
||||
const wallpaperPath = options.wallpaper.image.get();
|
||||
bash(`wal -i ${wallpaperPath}`);
|
||||
}
|
||||
});
|
||||
};
|
||||
118
src/scss/style.ts
Normal file
118
src/scss/style.ts
Normal file
@@ -0,0 +1,118 @@
|
||||
import options from '../options';
|
||||
import { bash, dependencies } from '../lib/utils';
|
||||
import { MatugenColors, RecursiveOptionsObject } from '../lib/types/options';
|
||||
import { initializeTrackers } from './optionsTrackers';
|
||||
import { generateMatugenColors, getMatugenHex, replaceHexValues } from '../services/matugen/index';
|
||||
import { isHexColor } from '../globals/variables';
|
||||
import { readFile, writeFile } from 'astal/file';
|
||||
import { App } from 'astal/gtk3';
|
||||
import { initializeHotReload } from './utils/hotReload';
|
||||
import { defaultFile } from 'src/lib/option';
|
||||
|
||||
const deps = ['font', 'theme', 'bar.flatButtons', 'bar.position', 'bar.battery.charging', 'bar.battery.blocks'];
|
||||
|
||||
function extractVariables(theme: RecursiveOptionsObject, prefix = '', matugenColors?: MatugenColors): string[] {
|
||||
let result = [] as string[];
|
||||
for (const key in theme) {
|
||||
if (!theme.hasOwnProperty(key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const themeValue = theme[key];
|
||||
|
||||
const newPrefix = prefix ? `${prefix}-${key}` : key;
|
||||
|
||||
const replacedValue =
|
||||
isHexColor(themeValue.value) && matugenColors !== undefined
|
||||
? replaceHexValues(themeValue.value, matugenColors)
|
||||
: themeValue.value;
|
||||
|
||||
if (typeof themeValue === 'function') {
|
||||
result.push(`$${newPrefix}: ${replacedValue};`);
|
||||
continue;
|
||||
}
|
||||
if (typeof themeValue !== 'object' || themeValue === null || Array.isArray(themeValue)) continue;
|
||||
|
||||
if (typeof themeValue.value !== 'undefined') {
|
||||
result.push(`$${newPrefix}: ${replacedValue};`);
|
||||
} else {
|
||||
result = result.concat(extractVariables(themeValue, newPrefix, matugenColors));
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
async function extractMatugenizedVariables(matugenColors: MatugenColors): Promise<string[]> {
|
||||
try {
|
||||
const result = [] as string[];
|
||||
|
||||
const defaultFileContent = JSON.parse(readFile(defaultFile) || '{}');
|
||||
|
||||
for (const key in defaultFileContent) {
|
||||
if (key.startsWith('theme.') === false) {
|
||||
continue;
|
||||
}
|
||||
const configValue = defaultFileContent[key];
|
||||
|
||||
if (!isHexColor(configValue) && matugenColors !== undefined) {
|
||||
result.push(`$${key.replace('theme.', '').split('.').join('-')}: ${configValue};`);
|
||||
continue;
|
||||
}
|
||||
|
||||
const matugenColor = getMatugenHex(configValue, matugenColors);
|
||||
|
||||
result.push(`$${key.replace('theme.', '').split('.').join('-')}: ${matugenColor};`);
|
||||
}
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export const resetCss = async (): Promise<void> => {
|
||||
if (!dependencies('sass')) return;
|
||||
|
||||
let variables: string[] = [];
|
||||
try {
|
||||
const matugenColors = await generateMatugenColors();
|
||||
|
||||
if (options.theme.matugen.get() && matugenColors) {
|
||||
variables = await extractMatugenizedVariables(matugenColors);
|
||||
} else {
|
||||
variables = extractVariables(options.theme as RecursiveOptionsObject, '', undefined);
|
||||
}
|
||||
|
||||
const vars = `${TMP}/variables.scss`;
|
||||
const css = `${TMP}/main.css`;
|
||||
const scss = `${TMP}/entry.scss`;
|
||||
const localScss = `${SRC_DIR}/src/scss/main.scss`;
|
||||
|
||||
const themeVariables = variables;
|
||||
const integratedVariables = themeVariables;
|
||||
|
||||
const imports = [vars].map((f) => `@import '${f}';`);
|
||||
|
||||
writeFile(vars, integratedVariables.join('\n'));
|
||||
|
||||
let mainScss = readFile(localScss);
|
||||
mainScss = `${imports}\n${mainScss}`;
|
||||
|
||||
writeFile(scss, mainScss);
|
||||
|
||||
await bash(`sass --load-path=${SRC_DIR}/src/scss ${scss} ${css}`);
|
||||
|
||||
App.apply_css(css, true);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
initializeTrackers(resetCss);
|
||||
initializeHotReload();
|
||||
|
||||
options.handler(deps, resetCss);
|
||||
|
||||
await resetCss();
|
||||
60
src/scss/style/bar/audio.scss
Normal file
60
src/scss/style/bar/audio.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
.bar-button-icon.volume {
|
||||
font-size: 1.3em;
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon);
|
||||
}
|
||||
|
||||
.bar-button-label.volume {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-volume-text);
|
||||
min-width: 2.2em;
|
||||
margin-left: $bar-buttons-volume-spacing;
|
||||
}
|
||||
|
||||
.style2 {
|
||||
.bar-button-icon.volume {
|
||||
border-top-left-radius: $bar-buttons-radius;
|
||||
border-bottom-left-radius: $bar-buttons-radius;
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-volume-icon_background);
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-left: $bar-buttons-padding_x;
|
||||
padding-right: $bar-buttons-volume-spacing;
|
||||
border-top-left-radius: if(
|
||||
$bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-left-radius: if(
|
||||
$bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon);
|
||||
}
|
||||
|
||||
.bar-button-label.volume {
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-right: $bar-buttons-padding_x;
|
||||
padding-left: $bar-buttons-volume-spacing;
|
||||
margin-left: 0em;
|
||||
}
|
||||
&.no-label.volume-container {
|
||||
.bar-button-icon.volume {
|
||||
border-top-right-radius: if(
|
||||
$bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-right-radius: if(
|
||||
$bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bar_item_box_visible.volume {
|
||||
border: if(
|
||||
$bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-volume-border),
|
||||
0em
|
||||
);
|
||||
}
|
||||
181
src/scss/style/bar/bar.scss
Normal file
181
src/scss/style/bar/bar.scss
Normal file
@@ -0,0 +1,181 @@
|
||||
.bar {
|
||||
* {
|
||||
font-size: $font-size * $bar-scaling * 0.01;
|
||||
}
|
||||
|
||||
.bar-panel-container {
|
||||
margin-top: if($bar-floating, $bar-margin_top, 0em);
|
||||
margin-bottom: if($bar-floating, $bar-margin_bottom, 0em);
|
||||
margin-left: if($bar-floating, $bar-margin_sides, 0em);
|
||||
margin-right: if($bar-floating, $bar-margin_sides, 0em);
|
||||
}
|
||||
|
||||
.bar-panel {
|
||||
$bar-opacity-ratio: $bar-opacity * 0.01;
|
||||
$transparency-value: 1 - $bar-opacity-ratio;
|
||||
background: if($bar-transparent, transparent, transparentize($bar-background, $transparency-value));
|
||||
border-radius: if($bar-floating, $bar-border_radius, 0em);
|
||||
|
||||
&.withBorder {
|
||||
border-top: if(
|
||||
$bar-border_location == 'top' or $bar-border_location == 'horizontal' or $bar-border_location == 'full',
|
||||
$bar-border_width solid,
|
||||
none
|
||||
);
|
||||
border-bottom: if(
|
||||
$bar-border_location == 'bottom' or $bar-border_location == 'horizontal' or $bar-border_location ==
|
||||
'full',
|
||||
$bar-border_width solid,
|
||||
none
|
||||
);
|
||||
border-left: if(
|
||||
$bar-border_location == 'left' or $bar-border_location == 'vertical' or $bar-border_location == 'full',
|
||||
$bar-border_width solid,
|
||||
none
|
||||
);
|
||||
border-right: if(
|
||||
$bar-border_location == 'right' or $bar-border_location == 'vertical' or $bar-border_location == 'full',
|
||||
$bar-border_width solid,
|
||||
none
|
||||
);
|
||||
border-color: $bar-border_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$bar-button-background-opacity-ratio: $bar-buttons-background_opacity * 0.01;
|
||||
$transparency-value: 1 - $bar-button-background-opacity-ratio;
|
||||
|
||||
$bar-button-background-hover-opacity-ratio: $bar-buttons-background_hover_opacity * 0.01;
|
||||
$transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
|
||||
|
||||
.bar_item_box_visible {
|
||||
background-color: transparentize($bar-buttons-background, $transparency-value);
|
||||
border-radius: $bar-buttons-radius;
|
||||
margin: $bar-buttons-y_margins $bar-buttons-spacing;
|
||||
opacity: $bar-buttons-opacity * 0.01;
|
||||
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
|
||||
|
||||
&.style3 {
|
||||
border-bottom-left-radius: 1.3em;
|
||||
border-top-right-radius: 1.3em;
|
||||
}
|
||||
|
||||
&.style4 {
|
||||
border-bottom-right-radius: 1.3em;
|
||||
border-top-left-radius: 1.3em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: $bar-buttons-background_hover_opacity * 0.01;
|
||||
}
|
||||
|
||||
&.battery {
|
||||
background-color: transparentize(
|
||||
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-battery-background),
|
||||
$transparency-value
|
||||
);
|
||||
}
|
||||
|
||||
&.bluetooth {
|
||||
background-color: transparentize(
|
||||
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-bluetooth-background),
|
||||
$transparency-value
|
||||
);
|
||||
}
|
||||
|
||||
&.clock {
|
||||
background-color: transparentize(
|
||||
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-clock-background),
|
||||
$transparency-value
|
||||
);
|
||||
}
|
||||
|
||||
&.media {
|
||||
background-color: transparentize(
|
||||
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-media-background),
|
||||
$transparency-value
|
||||
);
|
||||
}
|
||||
|
||||
&.dashboard {
|
||||
background-color: transparentize(
|
||||
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-background),
|
||||
$transparency-value
|
||||
);
|
||||
}
|
||||
|
||||
&.network {
|
||||
background-color: transparentize(
|
||||
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-network-background),
|
||||
$transparency-value
|
||||
);
|
||||
}
|
||||
|
||||
&.notifications {
|
||||
background-color: transparentize(
|
||||
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-notifications-background),
|
||||
$transparency-value
|
||||
);
|
||||
}
|
||||
|
||||
&.systray {
|
||||
background-color: transparentize(
|
||||
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-systray-background),
|
||||
$transparency-value
|
||||
);
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.volume {
|
||||
background-color: transparentize(
|
||||
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-volume-background),
|
||||
$transparency-value
|
||||
);
|
||||
}
|
||||
|
||||
&.windowtitle {
|
||||
background-color: transparentize(
|
||||
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-windowtitle-background),
|
||||
$transparency-value
|
||||
);
|
||||
}
|
||||
|
||||
&.workspaces {
|
||||
background-color: transparentize(
|
||||
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-workspaces-background),
|
||||
$transparency-value
|
||||
);
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.style2 {
|
||||
padding: 0em;
|
||||
}
|
||||
}
|
||||
|
||||
.no-label.style2 {
|
||||
.bar-button-icon {
|
||||
border-top-right-radius: $bar-buttons-radius;
|
||||
border-bottom-right-radius: $bar-buttons-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.bar_item_box_hidden {
|
||||
background: none;
|
||||
border-radius: 0rem;
|
||||
padding: 0rem 0rem 0rem 0rem;
|
||||
margin: 0rem 0rem 0rem 0rem;
|
||||
}
|
||||
|
||||
.box-left {
|
||||
margin-left: $bar-outer_spacing;
|
||||
}
|
||||
|
||||
.box-right {
|
||||
margin-right: $bar-outer_spacing;
|
||||
}
|
||||
64
src/scss/style/bar/battery.scss
Normal file
64
src/scss/style/bar/battery.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
.bar-button-label.battery {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-battery-text);
|
||||
margin-left: $bar-buttons-battery-spacing;
|
||||
}
|
||||
|
||||
.bar-button-icon.battery {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon);
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
.style2 {
|
||||
.bar-button-icon.battery {
|
||||
border-top-left-radius: $bar-buttons-radius;
|
||||
border-bottom-left-radius: $bar-buttons-radius;
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-battery-icon_background);
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-left: $bar-buttons-padding_x;
|
||||
padding-right: $bar-buttons-battery-spacing;
|
||||
border-top-left-radius: if(
|
||||
$bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-left-radius: if(
|
||||
$bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
|
||||
&:last-child {
|
||||
border-radius: $bar-buttons-radius;
|
||||
}
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon);
|
||||
}
|
||||
|
||||
.bar-button-label.battery {
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-right: $bar-buttons-padding_x;
|
||||
padding-left: $bar-buttons-battery-spacing;
|
||||
margin-left: 0em;
|
||||
}
|
||||
&.no-label.battery-container {
|
||||
.bar-button-icon.battery {
|
||||
border-top-right-radius: if(
|
||||
$bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-right-radius: if(
|
||||
$bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar_item_box_visible.battery {
|
||||
border: if(
|
||||
$bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-battery-border),
|
||||
0em
|
||||
);
|
||||
}
|
||||
72
src/scss/style/bar/bluetooth.scss
Normal file
72
src/scss/style/bar/bluetooth.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
.bar-button-icon.bluetooth {
|
||||
font-size: 1.15em;
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon);
|
||||
}
|
||||
|
||||
.bar-button-label.bluetooth {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-bluetooth-text);
|
||||
margin-left: $bar-buttons-bluetooth-spacing;
|
||||
}
|
||||
|
||||
.bluetooth-disabled-menu {
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
color: $surface2;
|
||||
margin: 6rem 0rem;
|
||||
}
|
||||
|
||||
.menu-button-isactive {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-bluetooth-text);
|
||||
}
|
||||
|
||||
.style2 {
|
||||
.bar-button-icon.bluetooth {
|
||||
border-top-left-radius: $bar-buttons-radius;
|
||||
border-bottom-left-radius: $bar-buttons-radius;
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-bluetooth-icon_background);
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-left: $bar-buttons-padding_x;
|
||||
padding-right: $bar-buttons-bluetooth-spacing;
|
||||
border-top-left-radius: if(
|
||||
$bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-left-radius: if(
|
||||
$bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon);
|
||||
}
|
||||
|
||||
.bar-button-label.bluetooth {
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-right: $bar-buttons-padding_x;
|
||||
padding-left: $bar-buttons-bluetooth-spacing;
|
||||
margin-left: 0em;
|
||||
}
|
||||
&.no-label.bluetooth-container {
|
||||
.bar-button-icon.bluetooth {
|
||||
border-top-right-radius: if(
|
||||
$bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-right-radius: if(
|
||||
$bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar_item_box_visible.bluetooth {
|
||||
border: if(
|
||||
$bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-borderSize solid
|
||||
if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-bluetooth-border),
|
||||
0em
|
||||
);
|
||||
}
|
||||
60
src/scss/style/bar/clock.scss
Normal file
60
src/scss/style/bar/clock.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
.bar-button-label.clock {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-clock-text);
|
||||
margin-left: $bar-buttons-clock-spacing;
|
||||
}
|
||||
|
||||
.bar-button-icon.clock {
|
||||
font-size: 1.2em;
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-clock-icon);
|
||||
}
|
||||
|
||||
.style2 {
|
||||
.bar-button-icon.clock {
|
||||
border-top-left-radius: $bar-buttons-radius;
|
||||
border-bottom-left-radius: $bar-buttons-radius;
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-clock-icon_background);
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-left: $bar-buttons-padding_x;
|
||||
padding-right: $bar-buttons-clock-spacing;
|
||||
border-top-left-radius: if(
|
||||
$bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-left-radius: if(
|
||||
$bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-clock-icon);
|
||||
}
|
||||
|
||||
.bar-button-label.clock {
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-right: $bar-buttons-padding_x;
|
||||
padding-left: $bar-buttons-clock-spacing;
|
||||
margin-left: 0em;
|
||||
}
|
||||
&.no-label.clock-container {
|
||||
.bar-button-icon.clock {
|
||||
border-top-right-radius: if(
|
||||
$bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-right-radius: if(
|
||||
$bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar_item_box_visible.clock {
|
||||
border: if(
|
||||
$bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-clock-border),
|
||||
0em
|
||||
);
|
||||
}
|
||||
44
src/scss/style/bar/media.scss
Normal file
44
src/scss/style/bar/media.scss
Normal file
@@ -0,0 +1,44 @@
|
||||
.bar-button-label.media {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-media-text);
|
||||
margin-left: $bar-buttons-media-spacing;
|
||||
}
|
||||
|
||||
.bar-button-icon.media {
|
||||
font-size: 1.2em;
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon);
|
||||
}
|
||||
|
||||
.style2 {
|
||||
.bar-button-icon.media {
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-media-icon_background);
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-left: $bar-buttons-padding_x;
|
||||
padding-right: $bar-buttons-media-spacing;
|
||||
border-top-left-radius: if(
|
||||
$bar-buttons-media-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-left-radius: if(
|
||||
$bar-buttons-media-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon);
|
||||
}
|
||||
|
||||
.bar-button-label.media {
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-right: $bar-buttons-padding_x;
|
||||
padding-left: $bar-buttons-media-spacing;
|
||||
margin-left: 0em;
|
||||
}
|
||||
}
|
||||
|
||||
.bar_item_box_visible.media {
|
||||
border: if(
|
||||
$bar-buttons-media-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-media-border),
|
||||
0em
|
||||
);
|
||||
}
|
||||
26
src/scss/style/bar/menu.scss
Normal file
26
src/scss/style/bar/menu.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
.bar-menu_label {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-dashboard-icon);
|
||||
font-size: 1.3em;
|
||||
border-radius: $bar-buttons-radius;
|
||||
}
|
||||
|
||||
.bar_item_box_visible.style2.dashboard {
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-dashboard-background);
|
||||
|
||||
.bar-menu_label {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-icon);
|
||||
}
|
||||
}
|
||||
|
||||
.style2 .bar-menu_label {
|
||||
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
|
||||
}
|
||||
|
||||
.bar_item_box_visible.dashboard {
|
||||
border: if(
|
||||
$bar-buttons-dashboard-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-borderSize solid
|
||||
if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-dashboard-border),
|
||||
0em
|
||||
);
|
||||
}
|
||||
59
src/scss/style/bar/network.scss
Normal file
59
src/scss/style/bar/network.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
.bar-button-label.network-label {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-network-text);
|
||||
margin-left: $bar-buttons-network-spacing;
|
||||
}
|
||||
|
||||
.bar-button-icon.network-icon {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon);
|
||||
}
|
||||
|
||||
.style2 {
|
||||
.bar-button-icon.network-icon {
|
||||
border-top-left-radius: $bar-buttons-radius;
|
||||
border-bottom-left-radius: $bar-buttons-radius;
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-network-icon_background);
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-left: $bar-buttons-padding_x;
|
||||
padding-right: $bar-buttons-network-spacing;
|
||||
border-top-left-radius: if(
|
||||
$bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-left-radius: if(
|
||||
$bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon);
|
||||
}
|
||||
|
||||
.bar-button-label.network-label {
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-right: $bar-buttons-padding_x;
|
||||
padding-left: $bar-buttons-network-spacing;
|
||||
margin-left: 0em;
|
||||
}
|
||||
&.no-label.network-container {
|
||||
.bar-button-icon.network-icon {
|
||||
border-top-right-radius: if(
|
||||
$bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-right-radius: if(
|
||||
$bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar_item_box_visible.network {
|
||||
border: if(
|
||||
$bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-network-border),
|
||||
0em
|
||||
);
|
||||
}
|
||||
71
src/scss/style/bar/notifications.scss
Normal file
71
src/scss/style/bar/notifications.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
.bar-button-icon.notifications {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon);
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.bar-button-label.notifications {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-notifications-total);
|
||||
margin-left: $bar-buttons-notifications-spacing;
|
||||
min-width: 1em;
|
||||
}
|
||||
|
||||
.style2 {
|
||||
.bar-button-icon.notifications {
|
||||
border-top-left-radius: $bar-buttons-radius;
|
||||
border-bottom-left-radius: $bar-buttons-radius;
|
||||
background: if(
|
||||
$bar-buttons-monochrome,
|
||||
$bar-buttons-icon_background,
|
||||
$bar-buttons-notifications-icon_background
|
||||
);
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-left: $bar-buttons-padding_x;
|
||||
padding-right: $bar-buttons-notifications-spacing;
|
||||
border-top-left-radius: if(
|
||||
$bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-left-radius: if(
|
||||
$bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
&:last-child {
|
||||
border-radius: $bar-buttons-radius;
|
||||
}
|
||||
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon);
|
||||
}
|
||||
|
||||
.bar-button-label.notifications {
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-right: $bar-buttons-padding_x;
|
||||
padding-left: $bar-buttons-notifications-spacing;
|
||||
margin-left: 0em;
|
||||
}
|
||||
|
||||
&.no-label.notifications-container {
|
||||
.bar-button-icon.notifications {
|
||||
border-top-right-radius: if(
|
||||
$bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-right-radius: if(
|
||||
$bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar_item_box_visible.notifications {
|
||||
border: if(
|
||||
$bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-borderSize solid
|
||||
if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-notifications-border),
|
||||
0em
|
||||
);
|
||||
}
|
||||
4
src/scss/style/bar/power.scss
Normal file
4
src/scss/style/bar/power.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
.bar-power_label {
|
||||
color: $red;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
450
src/scss/style/bar/style.scss
Normal file
450
src/scss/style/bar/style.scss
Normal file
@@ -0,0 +1,450 @@
|
||||
/*
|
||||
* #################################
|
||||
* # Default Styling #
|
||||
* #################################
|
||||
*/
|
||||
.bar-button-label {
|
||||
margin-left: 0.5em;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.module-icon {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.style2 {
|
||||
.bar-button-icon {
|
||||
border-top-left-radius: $bar-buttons-radius;
|
||||
border-bottom-left-radius: $bar-buttons-radius;
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-left: $bar-buttons-padding_x;
|
||||
padding-right: 0.5em;
|
||||
background: $text;
|
||||
color: $bar-background;
|
||||
}
|
||||
|
||||
.bar-button-label {
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-right: $bar-buttons-padding_x;
|
||||
padding-left: 0.5em;
|
||||
margin-left: 0em;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Styling Function #
|
||||
* #################################
|
||||
*/
|
||||
@mixin styleModule(
|
||||
$class,
|
||||
$textColor,
|
||||
$iconColor,
|
||||
$iconBackground,
|
||||
$labelBackground,
|
||||
$spacing,
|
||||
$borderEnabled,
|
||||
$borderColor,
|
||||
$fontSize: 1em
|
||||
) {
|
||||
$bar-button-background-opacity-ratio: $bar-buttons-background_opacity * 0.01;
|
||||
$transparency-value: 1 - $bar-button-background-opacity-ratio;
|
||||
|
||||
$bar-button-background-hover-opacity-ratio: $bar-buttons-background_hover_opacity * 0.01;
|
||||
$transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
|
||||
.bar_item_box_visible {
|
||||
&.#{$class} {
|
||||
background: transparentize(
|
||||
if($bar-buttons-monochrome, $bar-buttons-background, $labelBackground),
|
||||
$transparency-value
|
||||
);
|
||||
border: if(
|
||||
$borderEnabled or $bar-buttons-enableBorders,
|
||||
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-borderColor, $borderColor),
|
||||
0em
|
||||
);
|
||||
|
||||
&.style2 {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: $bar-buttons-background_hover_opacity * 0.01;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-label.#{$class} {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $textColor);
|
||||
margin-left: $spacing;
|
||||
border-radius: $bar-buttons-radius;
|
||||
}
|
||||
|
||||
.module-icon.#{$class} {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $iconColor);
|
||||
font-size: if($fontSize, $fontSize, 1em);
|
||||
}
|
||||
|
||||
.style2 {
|
||||
.module-icon.#{$class} {
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $iconBackground);
|
||||
padding-right: $spacing;
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $iconColor);
|
||||
border-top-left-radius: if(
|
||||
$borderEnabled or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-left-radius: if(
|
||||
$borderEnabled or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
}
|
||||
|
||||
.module-label.#{$class} {
|
||||
background: transparentize($labelBackground, $transparency-value);
|
||||
padding-left: $spacing * 1.5;
|
||||
margin-left: 0em;
|
||||
border-top-left-radius: 0em;
|
||||
border-bottom-left-radius: 0em;
|
||||
}
|
||||
&.no-label.#{$class} {
|
||||
.module-icon {
|
||||
border-top-right-radius: if(
|
||||
$borderEnabled or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-right-radius: if(
|
||||
$borderEnabled or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Ram Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule(
|
||||
//
|
||||
// class name
|
||||
'ram',
|
||||
// label color
|
||||
$bar-buttons-modules-ram-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-ram-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-ram-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-ram-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-ram-spacing,
|
||||
//
|
||||
// if border enabled
|
||||
$bar-buttons-modules-ram-enableBorder,
|
||||
// border color
|
||||
$bar-buttons-modules-ram-border
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Cpu Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule(
|
||||
//
|
||||
// class name
|
||||
'cpu',
|
||||
// label color
|
||||
$bar-buttons-modules-cpu-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-cpu-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-cpu-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-cpu-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-cpu-spacing,
|
||||
// if border enabled
|
||||
$bar-buttons-modules-cpu-enableBorder,
|
||||
// border color
|
||||
$bar-buttons-modules-cpu-border,
|
||||
// custom font size
|
||||
1.05em //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Cpu Temp Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule(
|
||||
//
|
||||
// class name
|
||||
'cpu-temp',
|
||||
// label color
|
||||
$bar-buttons-modules-cpuTemp-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-cpuTemp-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-cpuTemp-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-cpuTemp-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-cpuTemp-spacing,
|
||||
// if border enabled
|
||||
$bar-buttons-modules-cpuTemp-enableBorder,
|
||||
// border color
|
||||
$bar-buttons-modules-cpuTemp-border,
|
||||
// custom font size
|
||||
1.05em //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Storage Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule(
|
||||
//
|
||||
// class name
|
||||
'storage',
|
||||
// label color
|
||||
$bar-buttons-modules-storage-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-storage-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-storage-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-storage-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-storage-spacing,
|
||||
// if border enabled
|
||||
$bar-buttons-modules-storage-enableBorder,
|
||||
// border color
|
||||
$bar-buttons-modules-storage-border,
|
||||
// custom font size
|
||||
1.3em //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Netstat Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule(
|
||||
//
|
||||
// class name
|
||||
'netstat',
|
||||
// label color
|
||||
$bar-buttons-modules-netstat-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-netstat-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-netstat-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-netstat-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-netstat-spacing,
|
||||
// if border enabled
|
||||
$bar-buttons-modules-netstat-enableBorder,
|
||||
// border color
|
||||
$bar-buttons-modules-netstat-border,
|
||||
// custom font size
|
||||
1.2em //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # KB Layout Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule(
|
||||
//
|
||||
// class name
|
||||
'kblayout',
|
||||
// label color
|
||||
$bar-buttons-modules-kbLayout-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-kbLayout-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-kbLayout-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-kbLayout-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-kbLayout-spacing,
|
||||
// if border enabled
|
||||
$bar-buttons-modules-kbLayout-enableBorder,
|
||||
// border color
|
||||
$bar-buttons-modules-kbLayout-border,
|
||||
// custom font size
|
||||
1.2em //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Updates Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule(
|
||||
//
|
||||
// class name
|
||||
'updates',
|
||||
// label color
|
||||
$bar-buttons-modules-updates-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-updates-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-updates-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-updates-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-updates-spacing,
|
||||
// if border enabled
|
||||
$bar-buttons-modules-updates-enableBorder,
|
||||
// border color
|
||||
$bar-buttons-modules-updates-border,
|
||||
// custom font size
|
||||
1.2em //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Submap Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule(
|
||||
//
|
||||
// class name
|
||||
'submap',
|
||||
// label color
|
||||
$bar-buttons-modules-submap-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-submap-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-submap-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-submap-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-submap-spacing,
|
||||
// if border enabled
|
||||
$bar-buttons-modules-submap-enableBorder,
|
||||
// border color
|
||||
$bar-buttons-modules-submap-border,
|
||||
// custom font size
|
||||
1.2em //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Weather Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule(
|
||||
//
|
||||
// class name
|
||||
'weather-custom',
|
||||
// label color
|
||||
$bar-buttons-modules-weather-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-weather-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-weather-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-weather-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-weather-spacing,
|
||||
// if border enabled
|
||||
$bar-buttons-modules-weather-enableBorder,
|
||||
// border color
|
||||
$bar-buttons-modules-weather-border,
|
||||
// custom font size
|
||||
1.2em //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Power Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule(
|
||||
//
|
||||
// class name
|
||||
'powermodule',
|
||||
// label color
|
||||
$red,
|
||||
// icon color
|
||||
$bar-buttons-modules-power-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-power-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-power-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-power-spacing,
|
||||
// if border enabled
|
||||
$bar-buttons-modules-power-enableBorder,
|
||||
// border color
|
||||
$bar-buttons-modules-power-border,
|
||||
// custom font size
|
||||
1.3em //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Hyprsunset Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule(
|
||||
//
|
||||
// class name
|
||||
'hyprsunset',
|
||||
// label color
|
||||
$bar-buttons-modules-hyprsunset-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-hyprsunset-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-hyprsunset-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-hyprsunset-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-hyprsunset-spacing,
|
||||
// if border enabled
|
||||
$bar-buttons-modules-hyprsunset-enableBorder,
|
||||
// border color
|
||||
$bar-buttons-modules-hyprsunset-border,
|
||||
// custom font size
|
||||
1.3em //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Hypridle Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule(
|
||||
//
|
||||
// class name
|
||||
'hypridle',
|
||||
// label color
|
||||
$bar-buttons-modules-hypridle-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-hypridle-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-hypridle-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-hypridle-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-hypridle-spacing,
|
||||
// if border enabled
|
||||
$bar-buttons-modules-hypridle-enableBorder,
|
||||
// border color
|
||||
$bar-buttons-modules-hypridle-border,
|
||||
// custom font size
|
||||
1.075em //
|
||||
);
|
||||
23
src/scss/style/bar/systray.scss
Normal file
23
src/scss/style/bar/systray.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
.systray button:not(:first-child) {
|
||||
margin-left: $bar-buttons-systray-spacing;
|
||||
}
|
||||
|
||||
.systray-icon {
|
||||
font-size: 1.3em;
|
||||
|
||||
&.txt-icon {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-systray-customIcon);
|
||||
}
|
||||
}
|
||||
|
||||
.style2.systray {
|
||||
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
|
||||
}
|
||||
|
||||
.bar_item_box_visible.systray {
|
||||
border: if(
|
||||
$bar-buttons-systray-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-systray-border),
|
||||
0em
|
||||
);
|
||||
}
|
||||
68
src/scss/style/bar/window_title.scss
Normal file
68
src/scss/style/bar/window_title.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
.bar-button-icon.windowtitle {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-icon);
|
||||
}
|
||||
|
||||
.bar-button-label.windowtitle {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-text);
|
||||
margin-left: $bar-buttons-windowtitle-spacing;
|
||||
|
||||
&.no-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.style2 {
|
||||
.bar-button-icon.windowtitle {
|
||||
border-top-left-radius: $bar-buttons-radius;
|
||||
border-bottom-left-radius: $bar-buttons-radius;
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-windowtitle-icon_background);
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-left: $bar-buttons-padding_x;
|
||||
padding-right: $bar-buttons-windowtitle-spacing;
|
||||
border-top-left-radius: if(
|
||||
$bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-left-radius: if(
|
||||
$bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-windowtitle-icon);
|
||||
}
|
||||
|
||||
.bar-button-label.windowtitle {
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-right: $bar-buttons-padding_x;
|
||||
padding-left: $bar-buttons-windowtitle-spacing;
|
||||
margin-left: 0em;
|
||||
|
||||
&.no-icon {
|
||||
padding-left: $bar-buttons-padding_x;
|
||||
}
|
||||
}
|
||||
&.no-label.windowtitle-container {
|
||||
.bar-button-icon.windowtitle {
|
||||
border-top-right-radius: if(
|
||||
$bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
border-bottom-right-radius: if(
|
||||
$bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
|
||||
$bar-buttons-radius
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar_item_box_visible.windowtitle {
|
||||
border: if(
|
||||
$bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-borderSize solid
|
||||
if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-windowtitle-border),
|
||||
0em
|
||||
);
|
||||
}
|
||||
93
src/scss/style/bar/workspace.scss
Normal file
93
src/scss/style/bar/workspace.scss
Normal file
@@ -0,0 +1,93 @@
|
||||
.workspaces {
|
||||
label {
|
||||
font-size: 0.2em;
|
||||
min-width: 4em;
|
||||
min-height: 4em;
|
||||
border-radius: 1.9rem * 0.6;
|
||||
transition: 300ms * 0.5;
|
||||
background-color: $bar-buttons-workspaces-available;
|
||||
color: $bar-buttons-workspaces-available;
|
||||
|
||||
&.occupied {
|
||||
background-color: $bar-buttons-workspaces-occupied;
|
||||
color: $bar-buttons-workspaces-occupied;
|
||||
min-width: 4em;
|
||||
min-height: 4em;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $bar-buttons-workspaces-active;
|
||||
color: $bar-buttons-workspaces-active;
|
||||
min-width: 12em;
|
||||
min-height: 4em;
|
||||
}
|
||||
|
||||
&.workspace-icon {
|
||||
background-color: transparent;
|
||||
min-width: 0em;
|
||||
min-height: 0em;
|
||||
border-radius: 0em;
|
||||
transition: 300ms * 0.5;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
&.workspace-number {
|
||||
background-color: transparent;
|
||||
min-width: 0em;
|
||||
min-height: 0em;
|
||||
border-radius: 0em;
|
||||
transition: 0ms;
|
||||
padding: 0em 0.2em;
|
||||
font-size: $bar-buttons-workspaces-fontSize;
|
||||
}
|
||||
|
||||
&.underline {
|
||||
border-top: 0.1em solid transparent;
|
||||
border-bottom: 0.1em solid $bar-buttons-workspaces-numbered_active_underline_color;
|
||||
transition: 0ms;
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
transition: 0ms;
|
||||
color: $bar-buttons-workspaces-numbered_active_highlighted_text_color;
|
||||
border-radius: $bar-buttons-workspaces-numbered_active_highlight_border;
|
||||
background-color: $bar-buttons-workspaces-active;
|
||||
padding: 0em $bar-buttons-workspaces-numbered_active_highlight_padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-button {
|
||||
&:hover label {
|
||||
color: $bar-buttons-workspaces-hover;
|
||||
|
||||
&.default {
|
||||
background-color: $bar-buttons-workspaces-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .can_underline {
|
||||
border-top: 0.1em solid transparent;
|
||||
border-bottom: 0.1em solid
|
||||
if($bar-buttons-monochrome, $bar-buttons-workspaces-hover, $bar-buttons-workspaces-hover);
|
||||
}
|
||||
|
||||
&:hover .can_highlight {
|
||||
background-color: $bar-buttons-workspaces-hover;
|
||||
color: $bar-buttons-workspaces-numbered_active_highlighted_text_color;
|
||||
border-radius: $bar-buttons-workspaces-numbered_active_highlight_border;
|
||||
}
|
||||
}
|
||||
|
||||
.style2.workspaces {
|
||||
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
|
||||
}
|
||||
|
||||
.bar_item_box_visible.workspaces {
|
||||
border: if(
|
||||
$bar-buttons-workspaces-enableBorder or $bar-buttons-enableBorders,
|
||||
$bar-buttons-borderSize solid
|
||||
if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-workspaces-border),
|
||||
0em
|
||||
);
|
||||
}
|
||||
52
src/scss/style/colors.scss
Normal file
52
src/scss/style/colors.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
$primary-color: #CDD6F4;
|
||||
$dark-background: #0e0e1e;
|
||||
$light-background: #1e1e2e;
|
||||
$mauve: #cba6f7;
|
||||
$red: #f38ba8;
|
||||
$yellow: #f9e2af;
|
||||
$orange: #fab387;
|
||||
$teal: #94e2d5;
|
||||
$lightteal: #bac2de;
|
||||
$pink: #f5c2e7;
|
||||
$green: #a6e3a1;
|
||||
$grey: #585b70;
|
||||
$blue: #89b4fa;
|
||||
$lightgrey: #a6adc8;
|
||||
$lightblue: #74c7ec;
|
||||
|
||||
$rosewater: #f5e0dc;
|
||||
$flamingo: #f2cdcd;
|
||||
$pink: #f5c2e7;
|
||||
$mauve: #cba6f7;
|
||||
$red: #f38ba8;
|
||||
$maroon: #eba0ac;
|
||||
$peach: #fab387;
|
||||
$yellow: #f9e2af;
|
||||
$green: #a6e3a1;
|
||||
$teal: #94e2d5;
|
||||
$sky: #89dceb;
|
||||
$sapphire: #74c7ec;
|
||||
$blue: #89b4fa;
|
||||
$lavender: #b4befe;
|
||||
$text: #cdd6f4;
|
||||
$subtext1: #bac2de;
|
||||
$subtext2: #a6adc8;
|
||||
$overlay2: #9399b2;
|
||||
$overlay1: #7f849c;
|
||||
$overlay0: #6c7086;
|
||||
$surface2: #585b70;
|
||||
$surface1: #45475a;
|
||||
$surface0: #313244;
|
||||
$base: #1e1e2e;
|
||||
$base2: #242438;
|
||||
$mantle: #181825;
|
||||
$crust: #11111b;
|
||||
|
||||
$default_fg: $primary-color;
|
||||
$default_bg: #000000;
|
||||
$primary_bg: $dark-background;
|
||||
// $primary_fg: mix($mauve, $primary_bg, 70%);
|
||||
$primary_fg: mix($mauve, $primary_bg, 70%);
|
||||
$secondary_fg: $green;
|
||||
$secondary_bg: $light-background;
|
||||
$shadow-color: #1e1e2e;
|
||||
240
src/scss/style/common/common.scss
Normal file
240
src/scss/style/common/common.scss
Normal file
@@ -0,0 +1,240 @@
|
||||
@import '../colors';
|
||||
|
||||
menu {
|
||||
margin: 6px;
|
||||
padding: 6px;
|
||||
background-color: $primary_bg;
|
||||
background-clip: border-box;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $secondary_bg;
|
||||
|
||||
menuitem {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
min-height: 20px;
|
||||
min-width: 40px;
|
||||
padding: 4px 8px;
|
||||
color: #ffffff;
|
||||
font: initial;
|
||||
text-shadow: none;
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: $secondary_bg;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $secondary_bg;
|
||||
}
|
||||
|
||||
arrow {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
separator {
|
||||
min-height: 1px;
|
||||
margin: 4px 0;
|
||||
background-color: $secondary_bg;
|
||||
}
|
||||
}
|
||||
|
||||
menu > arrow {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
padding: 4px;
|
||||
color: $secondary_bg;
|
||||
}
|
||||
|
||||
menu > arrow.top {
|
||||
margin-top: 0;
|
||||
border-radius: 6px;
|
||||
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
||||
}
|
||||
|
||||
menu > arrow.bottom {
|
||||
margin-top: 8px;
|
||||
margin-bottom: -12px;
|
||||
border-radius: 6px;
|
||||
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
||||
}
|
||||
|
||||
check,
|
||||
radio {
|
||||
min-height: 15px;
|
||||
min-width: 15px;
|
||||
margin: 4px;
|
||||
padding: 0;
|
||||
color: transparent;
|
||||
background-color: $secondary_bg;
|
||||
transition:
|
||||
all 75ms cubic-bezier(0, 0, 0.2, 1),
|
||||
box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
radio {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
check {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
check:hover,
|
||||
radio:hover {
|
||||
box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
|
||||
background-color: $primary_bg;
|
||||
}
|
||||
|
||||
check:active,
|
||||
radio:active {
|
||||
box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
|
||||
background-color: $primary_bg;
|
||||
}
|
||||
|
||||
check:checked,
|
||||
check:indeterminate,
|
||||
radio:checked,
|
||||
radio:indeterminate {
|
||||
color: $primary_bg;
|
||||
background-color: $primary_fg;
|
||||
}
|
||||
|
||||
check:checked:hover,
|
||||
check:indeterminate:hover,
|
||||
radio:checked:hover,
|
||||
radio:indeterminate:hover {
|
||||
box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
|
||||
background-color: $primary_fg;
|
||||
}
|
||||
|
||||
check:checked:active,
|
||||
check:indeterminate:active,
|
||||
radio:checked:active,
|
||||
radio:indeterminate:active {
|
||||
box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
|
||||
background-color: $primary_fg;
|
||||
}
|
||||
|
||||
switch {
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
margin: 4px 0;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
background-color: $secondary_bg;
|
||||
background-clip: padding-box;
|
||||
font-size: 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
switch:checked {
|
||||
background-color: $primary_fg;
|
||||
}
|
||||
|
||||
switch:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
switch slider {
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
min-width: 18px;
|
||||
min-height: 18px;
|
||||
margin: 3px;
|
||||
border-radius: 9999px;
|
||||
outline: none;
|
||||
background-color: $default_fg;
|
||||
border: none;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
scale {
|
||||
min-height: 2px;
|
||||
min-width: 2px;
|
||||
}
|
||||
|
||||
scale.horizontal {
|
||||
padding: 17px 12px;
|
||||
}
|
||||
|
||||
scale.vertical {
|
||||
padding: 12px 17px;
|
||||
}
|
||||
|
||||
scale slider {
|
||||
min-height: 18px;
|
||||
min-width: 18px;
|
||||
margin: -8px;
|
||||
}
|
||||
|
||||
scale trough {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
outline: none;
|
||||
background-color: $secondary_bg;
|
||||
}
|
||||
|
||||
scale highlight {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
background-color: $primary_fg;
|
||||
}
|
||||
|
||||
scale highlight:disabled {
|
||||
background-color: #1e1e2e;
|
||||
}
|
||||
|
||||
scale fill {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
scale fill:disabled {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
scale slider {
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
border-radius: 9999px;
|
||||
color: $primary_fg;
|
||||
background-color: $primary_bg;
|
||||
box-shadow: inset 0 0 0 2px $primary_fg;
|
||||
}
|
||||
|
||||
scale slider:hover {
|
||||
box-shadow:
|
||||
inset 0 0 0 2px $primary_fg,
|
||||
0 0 0 8px transparentize($primary_fg, 0.9);
|
||||
}
|
||||
|
||||
scale slider:active {
|
||||
box-shadow:
|
||||
inset 0 0 0 4px $primary_fg,
|
||||
0 0 0 8px transparentize($primary_fg, 0.9);
|
||||
}
|
||||
|
||||
tooltip {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
separator {
|
||||
min-width: 1px;
|
||||
min-height: 1px;
|
||||
background-color: $secondary_bg;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
-gtk-icon-transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
spinner {
|
||||
background: none;
|
||||
opacity: 0;
|
||||
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
|
||||
}
|
||||
|
||||
spinner:checked {
|
||||
opacity: 1;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
10
src/scss/style/common/floating-widget.scss
Normal file
10
src/scss/style/common/floating-widget.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
@import "../colors";
|
||||
|
||||
@mixin floating-widget {
|
||||
margin: max($spacing, 8px);
|
||||
border: 0.2rem solid $surface0;
|
||||
background-color: $base;
|
||||
color: $primary_fg;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
50
src/scss/style/common/general.scss
Normal file
50
src/scss/style/common/general.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
@import '../colors.scss';
|
||||
|
||||
.txt-icon {
|
||||
font-family: 'JetBrainsMono Nerd Font Propo', monospace;
|
||||
font-size: 1.5em;
|
||||
|
||||
&.bluetooth {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
&.playback {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
&.input {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.bar.txt-icon {
|
||||
font-family: 'JetBrainsMono Nerd Font Propo', monospace;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
tooltip {
|
||||
* {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
opacity: $bar-menus-opacity * 0.01;
|
||||
|
||||
font-size: 1.1em * $tooltip-scaling * 0.01;
|
||||
|
||||
> * > * {
|
||||
padding: 0.6em;
|
||||
border-radius: $bar-menus-tooltip-radius;
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-tooltip-text);
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-tooltip-background);
|
||||
}
|
||||
}
|
||||
|
||||
check:not(:checked) {
|
||||
background-color: $bar-menus-check_radio_button-background;
|
||||
border: 1px solid $bar-menus-check_radio_button-active;
|
||||
}
|
||||
|
||||
check:checked {
|
||||
background-color: $bar-menus-check_radio_button-active;
|
||||
border: 1px solid $bar-menus-check_radio_button-background;
|
||||
}
|
||||
116
src/scss/style/common/popover_menu.scss
Normal file
116
src/scss/style/common/popover_menu.scss
Normal file
@@ -0,0 +1,116 @@
|
||||
@import '../colors';
|
||||
|
||||
$popoverScaling: $bar-menus-popover-scaling * 0.01;
|
||||
|
||||
window.popup {
|
||||
opacity: $bar-menus-opacity * $popoverScaling;
|
||||
|
||||
menu {
|
||||
border-radius: $bar-menus-popover-radius;
|
||||
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-popover-border);
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
|
||||
}
|
||||
|
||||
menuitem {
|
||||
transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1);
|
||||
padding: 0.3em * $popoverScaling 0.3em * $popoverScaling;
|
||||
border-radius: $bar-menus-popover-radius;
|
||||
|
||||
label {
|
||||
font-size: 1.2rem * $popoverScaling;
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.6);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
arrow {
|
||||
min-height: 1.2em * $popoverScaling;
|
||||
min-width: 1.2em * $popoverScaling;
|
||||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||||
margin-left: 0.5em * $popoverScaling;
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text);
|
||||
}
|
||||
}
|
||||
|
||||
separator {
|
||||
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
|
||||
min-height: 0.075em * $popoverScaling;
|
||||
}
|
||||
|
||||
arrow.top {
|
||||
margin-top: 0;
|
||||
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
||||
}
|
||||
|
||||
arrow.bottom {
|
||||
margin-top: 0.5em * $popoverScaling;
|
||||
margin-bottom: -0.6em * $popoverScaling;
|
||||
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
||||
}
|
||||
|
||||
check,
|
||||
radio {
|
||||
min-height: 0.8em * $popoverScaling;
|
||||
min-width: 0.8em * $popoverScaling;
|
||||
margin-right: 0.5em * $popoverScaling;
|
||||
padding: 0;
|
||||
color: transparent;
|
||||
background-color: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
|
||||
transition:
|
||||
all 100ms cubic-bezier(0, 0, 0.2, 1),
|
||||
box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
radio {
|
||||
border-radius: 9999px;
|
||||
border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
check {
|
||||
border-radius: $bar-menus-buttons-radius * 0.2;
|
||||
border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
check:hover,
|
||||
radio:hover {
|
||||
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
|
||||
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
|
||||
}
|
||||
|
||||
check:active,
|
||||
radio:active {
|
||||
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
|
||||
background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
check:checked,
|
||||
check:indeterminate,
|
||||
radio:checked,
|
||||
radio:indeterminate {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
check:checked:hover,
|
||||
check:indeterminate:hover,
|
||||
radio:checked:hover,
|
||||
radio:indeterminate:hover {
|
||||
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
|
||||
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
|
||||
}
|
||||
|
||||
check:checked:active,
|
||||
check:indeterminate:active,
|
||||
radio:checked:active,
|
||||
radio:indeterminate:active {
|
||||
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
|
||||
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
|
||||
}
|
||||
}
|
||||
52
src/scss/style/common/widget-button.scss
Normal file
52
src/scss/style/common/widget-button.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
$popover-padding: 7px * 1.6;
|
||||
$padding: 7px;
|
||||
$spacing: 12px;
|
||||
$radius: 11px;
|
||||
|
||||
.widget-button {
|
||||
background: $crust;
|
||||
opacity: 1;
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
margin: 10px;
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px;
|
||||
border: 3px solid;
|
||||
border-color: $crust;
|
||||
transition: border-color .3s ease-in-out;
|
||||
transition: opacity .3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
border: 3px solid;
|
||||
border-color: $lavender;
|
||||
transition: border-color .3s ease-in-out;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border: 3px solid;
|
||||
border-color: $lavender;
|
||||
}
|
||||
|
||||
image {
|
||||
border-radius: $radius + ($popover-padding * 1.4);
|
||||
min-width: 1.2em;
|
||||
min-height: 1.2em;
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-top: $spacing;
|
||||
}
|
||||
|
||||
&:active {
|
||||
image {
|
||||
opacity: .3;
|
||||
transition: opacity .3s ease-in-out;
|
||||
}
|
||||
label {
|
||||
opacity: .3;
|
||||
transition: opacity .3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
222
src/scss/style/highlights.scss
Normal file
222
src/scss/style/highlights.scss
Normal file
@@ -0,0 +1,222 @@
|
||||
@import "colors";
|
||||
|
||||
* {
|
||||
color: $default_fg;
|
||||
font-family: "JetBrainsMono NF";
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: $primary_bg;
|
||||
}
|
||||
|
||||
// scrollbar {
|
||||
// background-color: red;
|
||||
// min-width: 5em;
|
||||
// }
|
||||
|
||||
.code {
|
||||
background: $light-background;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
.code-header {
|
||||
background: $light-background;
|
||||
border-top-left-radius: 0.5rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-bottom: 1px solid $primary_fg;
|
||||
padding: 5px;
|
||||
|
||||
> button {
|
||||
color: $default_fg;
|
||||
background: transparent;
|
||||
float: right;
|
||||
border: none;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$languages-map: (
|
||||
arduino: "",
|
||||
armasm: "",
|
||||
avrasm: "",
|
||||
bash: "",
|
||||
c: "",
|
||||
clojure: "",
|
||||
coffeescript: "",
|
||||
cpp: "",
|
||||
csharp: "",
|
||||
css: "",
|
||||
dockerfile: "",
|
||||
go: "",
|
||||
gradle: "",
|
||||
haskell: "",
|
||||
html: "",
|
||||
java: "",
|
||||
javascript: "",
|
||||
json: "",
|
||||
latex: "",
|
||||
lua: "",
|
||||
makefile: "",
|
||||
markdown: "",
|
||||
mipsasm: "",
|
||||
nginx: "",
|
||||
nix: "",
|
||||
php: "",
|
||||
prolog: "",
|
||||
python: "",
|
||||
r: "",
|
||||
ruby: "",
|
||||
rust: "",
|
||||
scss: "",
|
||||
shell: "",
|
||||
typescript: "",
|
||||
wasm: "",
|
||||
x86asm: "",
|
||||
xml: "",
|
||||
);
|
||||
|
||||
@each $lang, $content in $languages-map {
|
||||
[data-language="#{$lang}"]:before {
|
||||
content: $content;
|
||||
font-size: 1.1rem;
|
||||
color: $primary_fg;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 5px;
|
||||
overflow-x: scroll;
|
||||
|
||||
code.hljs {
|
||||
color: $default_fg;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
& .hljs-keyword {
|
||||
color: $mauve;
|
||||
}
|
||||
|
||||
& .hljs-built_in {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
& .hljs-type {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
& .hljs-literal,
|
||||
& .hljs-number {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
& .hljs-operator {
|
||||
color: $teal;
|
||||
}
|
||||
|
||||
& .hljs-punctuation {
|
||||
color: $lightteal;
|
||||
}
|
||||
|
||||
& .hljs-property,
|
||||
& .hljs-variable.language_,
|
||||
& .hljs-symbol {
|
||||
color: $teal;
|
||||
}
|
||||
|
||||
& .hljs-regexp {
|
||||
color: $pink;
|
||||
}
|
||||
|
||||
& .hljs-string,
|
||||
& .hljs-char.escape_,
|
||||
& .hljs-subst {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
& .hljs-comment {
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
& .hljs-doctag {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
& .hljs-meta,
|
||||
& .hljs-title.function_,
|
||||
& .hljs-section {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
& .hljs-tag,
|
||||
& .hljs-attribute {
|
||||
color: $lightgrey;
|
||||
}
|
||||
|
||||
& .hljs-name,
|
||||
& .hljs-selector-attr {
|
||||
color: $mauve;
|
||||
}
|
||||
|
||||
& .hljs-params,
|
||||
& .hljs-selector-class,
|
||||
& .hljs-template-variable {
|
||||
color: $default_fg;
|
||||
}
|
||||
|
||||
& .hljs-selector-tag {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
& .hljs-selector-id {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
& .hljs-bullet,
|
||||
& .hljs-code,
|
||||
& .hljs-formula {
|
||||
color: $teal;
|
||||
}
|
||||
|
||||
& .hljs-emphasis {
|
||||
color: $red;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
& .hljs-strong {
|
||||
color: $red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& .hljs-link {
|
||||
color: $lightblue;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
& .hljs-quote {
|
||||
color: $green;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
& .hljs-addition {
|
||||
color: $green;
|
||||
background: rgba(166, 227, 161, 0.15);
|
||||
}
|
||||
|
||||
& .hljs-deletion {
|
||||
color: $red;
|
||||
background: rgba(243, 139, 168, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
215
src/scss/style/menus/audiomenu.scss
Normal file
215
src/scss/style/menus/audiomenu.scss
Normal file
@@ -0,0 +1,215 @@
|
||||
.menu-items-container.audio {
|
||||
min-width: 18em * $bar-menus-menu-volume-scaling * 0.01;
|
||||
|
||||
@import './menu.scss';
|
||||
|
||||
* {
|
||||
font-size: $font-size * $bar-menus-menu-volume-scaling * 0.01;
|
||||
}
|
||||
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-volume-background-color);
|
||||
|
||||
.menu-items {
|
||||
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-volume-border-color);
|
||||
opacity: $bar-menus-opacity * 0.01;
|
||||
}
|
||||
|
||||
.menu-dropdown-label.audio {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
|
||||
}
|
||||
|
||||
.menu-label.audio {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
|
||||
}
|
||||
|
||||
.menu-active.playback,
|
||||
.menu-active.input {
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
|
||||
}
|
||||
|
||||
.menu-button-isactive.audio {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
|
||||
}
|
||||
|
||||
.menu-slider.playback {
|
||||
trough {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-slider-background,
|
||||
$bar-menus-menu-volume-audio_slider-background
|
||||
);
|
||||
|
||||
highlight,
|
||||
progress {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-slider-primary,
|
||||
$bar-menus-menu-volume-audio_slider-primary
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-slider-backgroundhover,
|
||||
$bar-menus-menu-volume-audio_slider-backgroundhover
|
||||
);
|
||||
}
|
||||
|
||||
slider {
|
||||
background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-audio_slider-puck);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-slider.input {
|
||||
trough {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-slider-background,
|
||||
$bar-menus-menu-volume-input_slider-background
|
||||
);
|
||||
|
||||
highlight,
|
||||
progress {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-slider-primary,
|
||||
$bar-menus-menu-volume-input_slider-primary
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-slider-backgroundhover,
|
||||
$bar-menus-menu-volume-input_slider-backgroundhover
|
||||
);
|
||||
}
|
||||
|
||||
slider {
|
||||
background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-input_slider-puck);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active-percentage.playback,
|
||||
.menu-active-percentage.input {
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
|
||||
}
|
||||
|
||||
.menu-active-button {
|
||||
.menu-active-icon.playback,
|
||||
.menu-active-icon.input {
|
||||
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.muted {
|
||||
.menu-active-icon.playback,
|
||||
.menu-active-icon.input {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-iconbuttons-passive,
|
||||
$bar-menus-menu-volume-iconbutton-passive
|
||||
);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.menu-active-icon.playback,
|
||||
.menu-active-icon.input {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-iconbuttons-passive,
|
||||
$bar-menus-menu-volume-iconbutton-passive
|
||||
);
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
&.muted:hover {
|
||||
.menu-active-icon.playback,
|
||||
.menu-active-icon.input {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-iconbuttons-active,
|
||||
$bar-menus-menu-volume-iconbutton-active
|
||||
);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button-icon.playback,
|
||||
.menu-button-icon.input {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-volume-icons-passive);
|
||||
|
||||
&.active {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button.audio {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-volume-icons-passive);
|
||||
|
||||
.menu-button-name.playback,
|
||||
.menu-button-name.input {
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.menu-button-name.playback,
|
||||
.menu-button-name.input {
|
||||
color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-volume-listitems-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-section-container.volume {
|
||||
margin-bottom: 0.65em;
|
||||
}
|
||||
|
||||
.menu-section-container.playback {
|
||||
margin-top: 0em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.menu-section-container.input {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
.menu-label-container.input {
|
||||
border-radius: 0em;
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
|
||||
}
|
||||
|
||||
.menu-label-container.playback {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
|
||||
}
|
||||
|
||||
.menu-items-section.input {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
|
||||
}
|
||||
|
||||
.menu-items-section.playback {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
|
||||
}
|
||||
|
||||
.menu-label-container.selected {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
|
||||
}
|
||||
|
||||
.menu-items-section.selected {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
|
||||
}
|
||||
|
||||
.menu-items-section.playback {
|
||||
border-radius: 0em;
|
||||
}
|
||||
}
|
||||
197
src/scss/style/menus/bluetooth.scss
Normal file
197
src/scss/style/menus/bluetooth.scss
Normal file
@@ -0,0 +1,197 @@
|
||||
.menu-items-container.bluetooth * {
|
||||
font-size: $font-size * $bar-menus-menu-bluetooth-scaling * 0.01;
|
||||
}
|
||||
|
||||
@import './menu.scss';
|
||||
|
||||
.menu-items.bluetooth {
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-bluetooth-background-color);
|
||||
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-bluetooth-border-color);
|
||||
opacity: $bar-menus-opacity * 0.01;
|
||||
font-size: $font-size * $bar-menus-menu-bluetooth-scaling * 0.01;
|
||||
}
|
||||
|
||||
.menu-items-container.bluetooth {
|
||||
min-width: 18em * $bar-menus-menu-bluetooth-scaling * 0.01;
|
||||
|
||||
font-size: 1.3em;
|
||||
|
||||
.menu-section-container {
|
||||
margin: 1em 0em;
|
||||
}
|
||||
|
||||
.menu-label-container {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-bluetooth-card-color);
|
||||
|
||||
.menu-label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-bluetooth-label-color);
|
||||
}
|
||||
|
||||
.controls-container {
|
||||
margin: 0.5em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-items-section {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-bluetooth-card-color);
|
||||
min-height: 20em * $bar-menus-menu-bluetooth-scaling * 0.01;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 0.5em;
|
||||
|
||||
&.search {
|
||||
image {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-iconbuttons-passive,
|
||||
$bar-menus-menu-bluetooth-iconbutton-passive
|
||||
);
|
||||
}
|
||||
|
||||
&:hover image {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-iconbuttons-active,
|
||||
$bar-menus-menu-bluetooth-iconbutton-active
|
||||
);
|
||||
}
|
||||
|
||||
font-size: 0.8em;
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-iconbuttons-active,
|
||||
$bar-menus-menu-bluetooth-iconbutton-active
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon-button.bluetooth {
|
||||
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-bluetooth-iconbutton-passive);
|
||||
|
||||
&:hover {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-iconbuttons-active,
|
||||
$bar-menus-menu-bluetooth-iconbutton-active
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bluetooth-element-item {
|
||||
margin-bottom: 0.4em;
|
||||
|
||||
&:hover {
|
||||
.menu-button-icon,
|
||||
.menu-button-name {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-iconbuttons-active,
|
||||
$bar-menus-menu-bluetooth-iconbutton-active
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
margin-right: 0em;
|
||||
margin-top: 0em;
|
||||
min-height: 1em;
|
||||
min-width: 1em;
|
||||
|
||||
&.active {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-bluetooth-icons-active);
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-bluetooth-text);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.menu-button-icon {
|
||||
font-size: 1.5em;
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-bluetooth-icons-passive);
|
||||
|
||||
&.active {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-bluetooth-icons-active);
|
||||
}
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
font-size: 0.9em;
|
||||
margin-left: 0.6rem;
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-bluetooth-text);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.battery {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
spinner {
|
||||
min-height: 1.3em;
|
||||
min-width: 1.3em;
|
||||
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
|
||||
}
|
||||
|
||||
.menu-separator {
|
||||
margin: 0em 1em;
|
||||
}
|
||||
|
||||
.menu-switch.bluetooth {
|
||||
background-color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-switch-disabled,
|
||||
$bar-menus-menu-bluetooth-switch-disabled
|
||||
);
|
||||
|
||||
&:checked {
|
||||
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
|
||||
}
|
||||
|
||||
slider {
|
||||
background-color: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-bluetooth-switch-puck);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-switch-disabled,
|
||||
$bar-menus-menu-bluetooth-switch-disabled
|
||||
);
|
||||
}
|
||||
|
||||
slider {
|
||||
background: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-bluetooth-switch-puck);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
|
||||
}
|
||||
}
|
||||
|
||||
.no-bluetooth-devices.dim,
|
||||
.search-bluetooth-label.dim,
|
||||
.bluetooth-disabled.dim {
|
||||
&:last-child {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-bluetooth-text);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.menu-separator.bluetooth-battery {
|
||||
margin: 0.2em 0.5em;
|
||||
min-width: 0.1em;
|
||||
}
|
||||
.connection-status.txt-icon {
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
}
|
||||
188
src/scss/style/menus/calendar.scss
Normal file
188
src/scss/style/menus/calendar.scss
Normal file
@@ -0,0 +1,188 @@
|
||||
.calendar-menu-content * {
|
||||
font-size: $font-size * $bar-menus-menu-clock-scaling * 0.01;
|
||||
}
|
||||
|
||||
.calendar-content-container {
|
||||
margin-top: 0em;
|
||||
min-width: 27em;
|
||||
min-height: 6em;
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-clock-background-color);
|
||||
border: $bar-menus-border-size solid
|
||||
if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-clock-border-color);
|
||||
border-radius: $bar-menus-border-radius;
|
||||
margin-right: 0.5em;
|
||||
opacity: $bar-menus-opacity * 0.01;
|
||||
}
|
||||
|
||||
.calendar-menu-item-container {
|
||||
border-radius: $bar-menus-card_radius;
|
||||
margin-bottom: 1.35em;
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
|
||||
}
|
||||
|
||||
.calendar-content-items {
|
||||
margin: 1.35em;
|
||||
}
|
||||
|
||||
.calendar-container-box {
|
||||
margin: 0.75em;
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
.calendar-menu-widget {
|
||||
border-radius: 0.4em;
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days);
|
||||
|
||||
&:selected {
|
||||
box-shadow:
|
||||
inset 0 -0.5em 0 0 if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-currentday),
|
||||
inset -0.4em -0.3em 0 0 if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color),
|
||||
inset 0.4em 0 0 0.01em if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-currentday);
|
||||
border-radius: 0em;
|
||||
}
|
||||
|
||||
&.header {
|
||||
background-color: transparent;
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-yearmonth);
|
||||
}
|
||||
|
||||
&.button {
|
||||
color: $text;
|
||||
font-weight: 900;
|
||||
font-size: 900em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-paginator);
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-weekdays);
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days), 0.65);
|
||||
}
|
||||
|
||||
font-size: 1.1em;
|
||||
padding: 0.35em;
|
||||
}
|
||||
|
||||
.clock-content-items {
|
||||
min-height: 8em;
|
||||
|
||||
.clock-content-time {
|
||||
font-size: 4em;
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-time-time);
|
||||
}
|
||||
|
||||
.clock-content-period {
|
||||
font-size: 1.75em;
|
||||
margin-bottom: 1.35em;
|
||||
margin-right: -0.875em;
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-time-timeperiod);
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-menu-item-container {
|
||||
margin-bottom: 0.65em;
|
||||
&:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
}
|
||||
|
||||
.weather-container-box {
|
||||
margin: 1.5em;
|
||||
margin-top: 2.5em;
|
||||
min-width: 3em;
|
||||
|
||||
.calendar-menu-weather.today.icon {
|
||||
label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-icon);
|
||||
font-size: 5em;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-menu-weather.today.temp.label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-weather-temperature);
|
||||
margin-left: 0.2em;
|
||||
font-size: 2.5em;
|
||||
|
||||
&.icon {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-menu-weather.today.condition.label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-status);
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
.calendar-menu-weather.today.temp.label.icon.weather-color.red {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-icons-active,
|
||||
$bar-menus-menu-clock-weather-thermometer-extremelyhot
|
||||
);
|
||||
}
|
||||
|
||||
.calendar-menu-weather.today.temp.label.icon.weather-color.orange {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-hot);
|
||||
}
|
||||
|
||||
.calendar-menu-weather.today.temp.label.icon.weather-color.lavender {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-moderate);
|
||||
}
|
||||
|
||||
.calendar-menu-weather.today.temp.label.icon.weather-color.blue {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-cold);
|
||||
}
|
||||
|
||||
.calendar-menu-weather.today.temp.label.icon.weather-color.sky {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-icons-active,
|
||||
$bar-menus-menu-clock-weather-thermometer-extremelycold
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-menu-weather.today.stats.container {
|
||||
margin-bottom: 0.75em;
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-stats);
|
||||
|
||||
.weather.label {
|
||||
margin-left: 0.35em;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-separator.weather {
|
||||
margin: 1.5em 0em;
|
||||
}
|
||||
|
||||
.hourly-weather-time {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-hourly-time);
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.hourly-weather-icon {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-hourly-icon);
|
||||
margin-bottom: 0.25em;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.hourly-weather-temp {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-hourly-temperature);
|
||||
}
|
||||
|
||||
.weather.precip.icon {
|
||||
min-width: 1em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.weather.wind.icon {
|
||||
min-width: 1em;
|
||||
font-size: 1em;
|
||||
}
|
||||
592
src/scss/style/menus/dashboard.scss
Normal file
592
src/scss/style/menus/dashboard.scss
Normal file
@@ -0,0 +1,592 @@
|
||||
.dashboard-menu-content * {
|
||||
font-size: $font-size * $bar-menus-menu-dashboard-scaling * 0.01;
|
||||
}
|
||||
|
||||
.dashboard-content-items {
|
||||
margin-left: 0.5em;
|
||||
min-width: 28.5em;
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color);
|
||||
border: $bar-menus-border-size solid
|
||||
if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color);
|
||||
border-radius: $bar-menus-border-radius;
|
||||
opacity: $bar-menus-opacity * 0.01;
|
||||
|
||||
button {
|
||||
border-radius: $bar-menus-buttons-radius;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-card-color);
|
||||
margin: 0em 1.3em;
|
||||
border-radius: $bar-menus-card_radius;
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
.profile-picture-container {
|
||||
margin-right: 0.65em;
|
||||
|
||||
.profile-picture {
|
||||
min-width: $bar-menus-menu-dashboard-profile-size;
|
||||
min-height: $bar-menus-menu-dashboard-profile-size;
|
||||
border-radius: $bar-menus-menu-dashboard-profile-radius;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-size: 1.5em;
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-profile-name);
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.power-menu-container {
|
||||
margin-left: 0em;
|
||||
|
||||
.dashboard-button {
|
||||
min-width: 3em;
|
||||
min-height: 2.5em;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
&.shutdown {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-shutdown
|
||||
);
|
||||
|
||||
label {
|
||||
font-size: 1.9em;
|
||||
}
|
||||
}
|
||||
|
||||
&.reboot {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-restart
|
||||
);
|
||||
|
||||
label {
|
||||
font-size: 1.9em;
|
||||
}
|
||||
}
|
||||
|
||||
&.logout {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-logout
|
||||
);
|
||||
}
|
||||
|
||||
&.sleep {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-sleep
|
||||
);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&.shutdown {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-shutdown
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.reboot {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-restart
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.logout {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-logout
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.sleep {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-sleep
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shortcuts-container {
|
||||
font-size: 1em;
|
||||
|
||||
.dashboard-card {
|
||||
padding: 1.5em;
|
||||
|
||||
button {
|
||||
min-height: 2.5em;
|
||||
min-width: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.card-button-section-container.visible {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
||||
.top-button.paired {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 0em;
|
||||
|
||||
&.most-used {
|
||||
margin-right: 0.65em;
|
||||
}
|
||||
|
||||
&.utilities.paired {
|
||||
margin-left: 0em;
|
||||
}
|
||||
|
||||
button {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-shortcuts-background
|
||||
);
|
||||
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
|
||||
min-height: 3em;
|
||||
|
||||
label {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
&.record.active {
|
||||
background: $red;
|
||||
|
||||
&:hover {
|
||||
background: transparentize($red, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-shortcuts-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controls-container {
|
||||
&.dashboard-card {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0em;
|
||||
min-height: 3em;
|
||||
min-width: 3.8em;
|
||||
|
||||
label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-controls-wifi-text);
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
&.wifi {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-wifi-background
|
||||
);
|
||||
}
|
||||
|
||||
&.bluetooth {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-bluetooth-background
|
||||
);
|
||||
}
|
||||
|
||||
&.notifications {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-notifications-background
|
||||
);
|
||||
}
|
||||
|
||||
&.playback {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-volume-background
|
||||
);
|
||||
}
|
||||
|
||||
&.input {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-input-background
|
||||
);
|
||||
}
|
||||
|
||||
&.wifi:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-wifi-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.bluetooth:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-bluetooth-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.notifications:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-notifications-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.playback:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-volume-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.input:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-input-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-disabled,
|
||||
$bar-menus-menu-dashboard-controls-disabled
|
||||
);
|
||||
|
||||
&.wifi:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-wifi-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.bluetooth:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-bluetooth-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.notifications:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-notifications-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.playback:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-volume-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.input:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-input-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.directories-container {
|
||||
&.dashboard-card {
|
||||
margin-top: 0em;
|
||||
padding-left: 1.5em;
|
||||
padding-right: 0em;
|
||||
}
|
||||
|
||||
.directory-link {
|
||||
padding: 0.5em 0em;
|
||||
min-width: 9em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
&.right.top {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-directories-right-top-color
|
||||
);
|
||||
}
|
||||
|
||||
&.right.middle {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-directories-right-middle-color
|
||||
);
|
||||
}
|
||||
|
||||
&.right.bottom {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-directories-right-bottom-color
|
||||
);
|
||||
}
|
||||
|
||||
&.left.top {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-directories-left-top-color
|
||||
);
|
||||
}
|
||||
|
||||
&.left.middle {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-directories-left-middle-color
|
||||
);
|
||||
}
|
||||
|
||||
&.left.bottom {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-directories-left-bottom-color
|
||||
);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
margin-top: 0em;
|
||||
|
||||
.stat {
|
||||
label {
|
||||
margin-right: 0.75em;
|
||||
font-size: 1.3em;
|
||||
min-width: 1.65em;
|
||||
}
|
||||
|
||||
&.cpu label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-cpu-icon);
|
||||
}
|
||||
|
||||
&.ram label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-ram-icon);
|
||||
}
|
||||
|
||||
&.gpu label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-gpu-icon);
|
||||
}
|
||||
|
||||
&.storage label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-disk-icon);
|
||||
}
|
||||
|
||||
.stats-bar {
|
||||
levelbar * {
|
||||
transition: 200ms;
|
||||
}
|
||||
|
||||
trough {
|
||||
min-height: 1.05em;
|
||||
}
|
||||
|
||||
block {
|
||||
border-radius: $bar-menus-progressbar-radius;
|
||||
|
||||
&.empty {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-progressbar-background,
|
||||
$bar-menus-menu-dashboard-monitors-bar_background
|
||||
);
|
||||
}
|
||||
|
||||
&.filled {
|
||||
padding-left: 0.85em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.cpu .stats-bar block.filled {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-progressbar-foreground,
|
||||
$bar-menus-menu-dashboard-monitors-cpu-bar
|
||||
);
|
||||
}
|
||||
|
||||
&.ram .stats-bar block.filled {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-progressbar-foreground,
|
||||
$bar-menus-menu-dashboard-monitors-ram-bar
|
||||
);
|
||||
}
|
||||
|
||||
&.gpu .stats-bar block.filled {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-progressbar-foreground,
|
||||
$bar-menus-menu-dashboard-monitors-gpu-bar
|
||||
);
|
||||
}
|
||||
|
||||
&.storage .stats-bar block.filled {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-progressbar-foreground,
|
||||
$bar-menus-menu-dashboard-monitors-disk-bar
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 0.9em;
|
||||
|
||||
&.cpu {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-cpu-label);
|
||||
}
|
||||
|
||||
&.ram {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-ram-label);
|
||||
}
|
||||
|
||||
&.gpu {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-gpu-label);
|
||||
}
|
||||
|
||||
&.storage {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-disk-label);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-content-items > :not(:first-child):not(:last-child) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.65em;
|
||||
}
|
||||
|
||||
.dashboard-content-items > :first-child {
|
||||
margin-top: 1.3em;
|
||||
margin-bottom: 0.65em;
|
||||
}
|
||||
|
||||
.dashboard-content-items > :last-child {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.3em;
|
||||
}
|
||||
|
||||
.dashboard-content-items > :only-child {
|
||||
margin-top: 1.3em;
|
||||
margin-bottom: 1.3em;
|
||||
}
|
||||
108
src/scss/style/menus/energy.scss
Normal file
108
src/scss/style/menus/energy.scss
Normal file
@@ -0,0 +1,108 @@
|
||||
.menu-items-container.energy * {
|
||||
font-size: $font-size * $bar-menus-menu-battery-scaling * 0.01;
|
||||
}
|
||||
|
||||
.menu-items.energy {
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-battery-background-color);
|
||||
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-battery-border-color);
|
||||
opacity: $bar-menus-opacity * 0.01;
|
||||
font-size: $font-size * $bar-menus-menu-battery-scaling * 0.01;
|
||||
}
|
||||
|
||||
@import "./menu.scss";
|
||||
|
||||
.menu-items-container.energy {
|
||||
min-width: 18em * $bar-menus-menu-battery-scaling * 0.01;
|
||||
|
||||
.menu-label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-battery-label-color);
|
||||
}
|
||||
|
||||
.menu-label-container {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-battery-card-color);
|
||||
}
|
||||
|
||||
.uptime {
|
||||
font-size: 0.92em;
|
||||
}
|
||||
|
||||
.menu-items-section {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-battery-card-color);
|
||||
}
|
||||
|
||||
.power-profile-item {
|
||||
color: if($bar-menus-monochrome, $bar-menus-listitems-passive, $bar-menus-menu-battery-listitems-passive);
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
label {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
image {
|
||||
font-size: 1.3em;
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-battery-icons-passive);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-battery-listitems-active);
|
||||
|
||||
label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
|
||||
}
|
||||
|
||||
image {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-battery-listitems-active);
|
||||
|
||||
image {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brightness-container {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.brightness-slider-icon {
|
||||
font-size: 1.4em;
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
|
||||
}
|
||||
|
||||
.brightness-slider-label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-battery-text);
|
||||
font-size: 0.9em;
|
||||
min-width: 2.5em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.menu-slider.brightness {
|
||||
trough {
|
||||
background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-battery-slider-background);
|
||||
|
||||
highlight,
|
||||
progress {
|
||||
background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-battery-slider-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background: if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-battery-slider-backgroundhover);
|
||||
}
|
||||
|
||||
slider {
|
||||
background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-battery-slider-puck);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
147
src/scss/style/menus/media.scss
Normal file
147
src/scss/style/menus/media.scss
Normal file
@@ -0,0 +1,147 @@
|
||||
.menu-items.media {
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-media-background-color);
|
||||
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color);
|
||||
opacity: $bar-menus-opacity * 0.01;
|
||||
}
|
||||
|
||||
.menu-items-container.media {
|
||||
* {
|
||||
font-size: $font-size * $bar-menus-menu-media-scaling * 0.01;
|
||||
}
|
||||
|
||||
min-width: 23em * $bar-menus-menu-media-scaling * 0.01;
|
||||
min-height: 10em * $bar-menus-menu-media-scaling * 0.01;
|
||||
|
||||
.menu-section-container {
|
||||
margin: 1em 0em;
|
||||
}
|
||||
|
||||
.menu-items-section {
|
||||
border-radius: $bar-menus-card_radius;
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
border-radius: $bar-menus-buttons-radius;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.media-indicator-current-song-name {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.media-indicator-current-song-author {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.media-indicator-current-song-name-label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-song);
|
||||
font-size: 1.35em;
|
||||
}
|
||||
|
||||
.media-indicator-current-song-author-label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-artist);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.media-indicator-current-song-album-label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-album);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.media-indicator-current-controls {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.media-indicator-control-button {
|
||||
margin: 0rem 0.5rem;
|
||||
}
|
||||
|
||||
.media-indicator-control-button {
|
||||
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background);
|
||||
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-media-buttons-text);
|
||||
min-height: 1.8em;
|
||||
min-width: 2.5em;
|
||||
border-radius: $bar-menus-buttons-radius * 0.75;
|
||||
|
||||
&.disabled {
|
||||
background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-media-buttons-inactive);
|
||||
}
|
||||
|
||||
&.enabled {
|
||||
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background);
|
||||
|
||||
&:hover {
|
||||
background: transparentize(
|
||||
if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-media-buttons-enabled
|
||||
);
|
||||
|
||||
&:hover {
|
||||
background: transparentize(
|
||||
if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.menu-slider.media.progress {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
trough {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-slider-background,
|
||||
$bar-menus-menu-media-slider-background
|
||||
);
|
||||
border-radius: $bar-menus-slider-progress-radius;
|
||||
|
||||
highlight,
|
||||
progress {
|
||||
border-radius: $bar-menus-slider-progress-radius;
|
||||
min-height: 0.85em;
|
||||
background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary);
|
||||
}
|
||||
}
|
||||
|
||||
slider {
|
||||
background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-media-slider-puck);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-slider-backgroundhover,
|
||||
$bar-menus-menu-media-slider-backgroundhover
|
||||
),
|
||||
0.3
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-label {
|
||||
color: $bar-menus-menu-media-timestamp;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
}
|
||||
256
src/scss/style/menus/menu.scss
Normal file
256
src/scss/style/menus/menu.scss
Normal file
@@ -0,0 +1,256 @@
|
||||
.menu-slider {
|
||||
trough {
|
||||
border-radius: $bar-menus-slider-progress-radius;
|
||||
background: $surface0;
|
||||
|
||||
highlight,
|
||||
progress {
|
||||
background: $peach;
|
||||
border-radius: $bar-menus-slider-progress-radius;
|
||||
}
|
||||
}
|
||||
|
||||
slider {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
min-height: 0.6rem;
|
||||
min-width: 0.6rem;
|
||||
border: 0rem solid transparent;
|
||||
border-radius: $bar-menus-slider-slider-radius;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background: $surface0;
|
||||
}
|
||||
|
||||
slider {
|
||||
background: $overlay0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-switch {
|
||||
font-size: 1.3em;
|
||||
background-color: $surface0;
|
||||
border-radius: $bar-menus-switch-radius;
|
||||
|
||||
&:checked {
|
||||
background: $sky;
|
||||
}
|
||||
|
||||
trough {
|
||||
highlight,
|
||||
progress {
|
||||
background-color: $peach;
|
||||
border-radius: $bar-menus-switch-radius;
|
||||
}
|
||||
}
|
||||
|
||||
slider {
|
||||
box-shadow: none;
|
||||
background-color: $overlay0;
|
||||
min-height: 1em;
|
||||
min-width: 1em;
|
||||
border: 0em solid transparent;
|
||||
border-radius: $bar-menus-switch-slider-radius;
|
||||
margin: 0.1em 0.15em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background: $surface0;
|
||||
}
|
||||
|
||||
slider {
|
||||
background: $overlay0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $sky;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-separator {
|
||||
min-height: 0.1rem;
|
||||
margin: 0.6rem 0rem;
|
||||
background: $surface1;
|
||||
}
|
||||
|
||||
.menu-items {
|
||||
background: $crust;
|
||||
border: $bar-menus-border-size solid $bar-menus-border-color;
|
||||
border-radius: $bar-menus-border-radius;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.menu-items-container {
|
||||
border-radius: 0.4em;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.menu-section-container {
|
||||
margin: 1em 0em;
|
||||
|
||||
.menu-label {
|
||||
color: $text;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-label-container {
|
||||
background: $base;
|
||||
border-radius: $bar-menus-card_radius;
|
||||
border-bottom-left-radius: 0em;
|
||||
border-bottom-right-radius: 0em;
|
||||
margin: 0em 1em;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.menu-items-section {
|
||||
background: $base;
|
||||
border-radius: $bar-menus-card_radius;
|
||||
border-top-left-radius: 0em;
|
||||
border-top-right-radius: 0em;
|
||||
padding: 0.9em;
|
||||
margin: 0em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active {
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
margin: 0rem 1em;
|
||||
margin-bottom: 0.9em;
|
||||
}
|
||||
|
||||
.menu-active-container {
|
||||
&:first-child {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active-button {
|
||||
padding: 0.1em;
|
||||
margin-bottom: -0.2em;
|
||||
|
||||
.menu-active-icon {
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.muted image {
|
||||
color: $maroon;
|
||||
}
|
||||
|
||||
&:hover image {
|
||||
color: $maroon;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active-percentage {
|
||||
font-size: 0.9em;
|
||||
min-width: 2.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-active-slider {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.menu-active-slider * {
|
||||
min-height: 0.85em;
|
||||
border-radius: $bar-menus-slider-progress-radius;
|
||||
}
|
||||
|
||||
.menu-slider-container {
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.menu-label-dim {
|
||||
color: $overlay0;
|
||||
margin-right: 1rem;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-icon-button {
|
||||
&:hover {
|
||||
color: $surface2;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-dropdown-label-container {
|
||||
background: $base;
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
.menu-button-name {
|
||||
font-size: 0.95em;
|
||||
font-weight: bold;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 1.2rem;
|
||||
}
|
||||
|
||||
.menu-button-icon {
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.menu-item-box {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.dropdown-menu-container {
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
margin: 0.5em 1em;
|
||||
color: $sky;
|
||||
}
|
||||
|
||||
.event-box-container {
|
||||
min-height: 0em;
|
||||
margin-top: $bar-dropdownGap;
|
||||
}
|
||||
|
||||
.event-top-padding * {
|
||||
min-height: 0em;
|
||||
margin-top: if($bar-floating and $bar-location == 'top', $bar-margin_top, 0);
|
||||
margin-bottom: if($bar-floating and $bar-location == 'bottom', $bar-margin_bottom, 0);
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
-gtk-icon-transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
.spinning-icon {
|
||||
animation-name: spin;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
184
src/scss/style/menus/network.scss
Normal file
184
src/scss/style/menus/network.scss
Normal file
@@ -0,0 +1,184 @@
|
||||
.menu-items-container.network * {
|
||||
font-size: $font-size * $bar-menus-menu-network-scaling * 0.01;
|
||||
}
|
||||
|
||||
@import './menu.scss';
|
||||
|
||||
.menu-items.network {
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-network-background-color);
|
||||
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-network-border-color);
|
||||
opacity: $bar-menus-opacity * 0.01;
|
||||
font-size: $font-size * $bar-menus-menu-network-scaling * 0.01;
|
||||
}
|
||||
|
||||
.menu-items-container.network {
|
||||
min-width: 18em * $bar-menus-menu-network-scaling * 0.01;
|
||||
font-size: 1.3em;
|
||||
|
||||
.menu-items-section {
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-network-label-color);
|
||||
}
|
||||
|
||||
.network-icon {
|
||||
font-size: 1.3em;
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-network-icons-passive);
|
||||
|
||||
&.active {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-network-icons-active);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon-button.network {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.connection-container {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.connection-status.dim {
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
|
||||
opacity: 0.5;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.menu-section-container.wifi {
|
||||
margin-top: 0.65em;
|
||||
|
||||
.menu-items-section {
|
||||
min-height: 12em;
|
||||
}
|
||||
}
|
||||
|
||||
.network-element-item {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
&.staging {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.network-icon {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-network-icons-active);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.active-connection {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-iconbuttons-active,
|
||||
$bar-menus-menu-network-iconbuttons-active
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.active-connection {
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
|
||||
}
|
||||
|
||||
.active-connection.dim {
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner.wap {
|
||||
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
|
||||
}
|
||||
|
||||
.network-password-input-container {
|
||||
background: darken(if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-network-card-color), 5%);
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
|
||||
border-radius: 0.4em;
|
||||
margin: 0em 2em;
|
||||
margin-top: 0.75em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.close-network-password-input-button {
|
||||
padding: 0em 0.5em;
|
||||
|
||||
&:hover image {
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon-button.network.search {
|
||||
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-network-iconbuttons-passive);
|
||||
|
||||
&:hover {
|
||||
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon-button.network.disconnect {
|
||||
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-network-iconbuttons-passive);
|
||||
margin: 0em;
|
||||
margin-top: -0.2em;
|
||||
margin-left: 1em;
|
||||
|
||||
label {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
|
||||
}
|
||||
}
|
||||
|
||||
.waps-not-found.dim {
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.menu-label-container {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-network-card-color);
|
||||
}
|
||||
|
||||
.menu-items-section {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-network-card-color);
|
||||
}
|
||||
|
||||
.menu-switch.network {
|
||||
background-color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-switch-disabled,
|
||||
$bar-menus-menu-network-switch-disabled
|
||||
);
|
||||
|
||||
&:checked {
|
||||
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-network-switch-enabled);
|
||||
}
|
||||
|
||||
slider {
|
||||
background-color: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-network-switch-puck);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-switch-disabled,
|
||||
$bar-menus-menu-network-switch-disabled
|
||||
);
|
||||
}
|
||||
|
||||
slider {
|
||||
background: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-network-switch-puck);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-network-switch-enabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
246
src/scss/style/menus/notifications.scss
Normal file
246
src/scss/style/menus/notifications.scss
Normal file
@@ -0,0 +1,246 @@
|
||||
.notification-menu-content * {
|
||||
font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01;
|
||||
}
|
||||
|
||||
.notification-card-container.menu {
|
||||
margin: 0em;
|
||||
min-width: 30.6em * $bar-menus-menu-notifications-scaling * 0.01;
|
||||
min-height: $bar-menus-menu-notifications-height * $bar-menus-menu-notifications-scaling * 0.01;
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background);
|
||||
border: $bar-menus-border-size solid
|
||||
if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border);
|
||||
border-radius: $bar-menus-border-radius;
|
||||
margin-right: 0.45em;
|
||||
opacity: $bar-menus-opacity * 0.01;
|
||||
|
||||
.window-content.notificationsmenu-window {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.menu-content-container.notifications {
|
||||
margin: 1em;
|
||||
margin-bottom: 0em;
|
||||
min-height: 4em;
|
||||
}
|
||||
|
||||
.notification-menu-controls {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-notifications-card);
|
||||
margin: 1em 1em;
|
||||
margin-bottom: 0.5em;
|
||||
border-radius: $bar-menus-card_radius;
|
||||
padding: 0.4em 0.75em;
|
||||
}
|
||||
|
||||
.notification-card.menu {
|
||||
background: $notification-background;
|
||||
min-width: 0em;
|
||||
min-height: 0em;
|
||||
font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01;
|
||||
border: 0.15em solid $notification-border;
|
||||
border-radius: 0em;
|
||||
border-bottom-left-radius: $notification-border_radius;
|
||||
border-top-left-radius: $notification-border_radius;
|
||||
margin: 0em;
|
||||
}
|
||||
|
||||
.notification-card-content-container {
|
||||
.notification-card {
|
||||
margin-bottom: 0.65em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-card-content {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.menu-label.notifications {
|
||||
margin: 0em;
|
||||
font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01;
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-notifications-label);
|
||||
}
|
||||
|
||||
.menu-separator.notification-controls {
|
||||
min-width: 0.1em;
|
||||
background-color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-dropdownmenu-divider,
|
||||
$bar-menus-menu-notifications-switch_divider
|
||||
);
|
||||
margin: 0em 1em;
|
||||
}
|
||||
|
||||
.menu-switch.notifications {
|
||||
* {
|
||||
font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01;
|
||||
}
|
||||
|
||||
background-color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-switch-disabled,
|
||||
$bar-menus-menu-notifications-switch-disabled
|
||||
);
|
||||
|
||||
&:checked {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-switch-enabled,
|
||||
$bar-menus-menu-notifications-switch-enabled
|
||||
);
|
||||
}
|
||||
|
||||
slider {
|
||||
background-color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-switch-puck,
|
||||
$bar-menus-menu-notifications-switch-puck
|
||||
);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-switch-disabled,
|
||||
$bar-menus-menu-notifications-switch-disabled
|
||||
);
|
||||
}
|
||||
|
||||
slider {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-switch-puck,
|
||||
$bar-menus-menu-notifications-switch-puck
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-switch-enabled,
|
||||
$bar-menus-menu-notifications-switch-enabled
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.clear-notifications-button {
|
||||
margin-right: 0.3em;
|
||||
|
||||
&:hover label:not(.removing) {
|
||||
color: transparentize(
|
||||
if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.clear-notifications-label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear);
|
||||
font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01;
|
||||
|
||||
&.removing {
|
||||
color: $bar-menus-buttons-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
scrollbar {
|
||||
margin-right: 0.2em;
|
||||
min-width: $bar-menus-menu-notifications-scrollbar-width * $bar-menus-menu-notifications-scaling * 0.01;
|
||||
border-radius: $bar-menus-menu-notifications-scrollbar-radius;
|
||||
background: transparent;
|
||||
|
||||
slider {
|
||||
min-width: $bar-menus-menu-notifications-scrollbar-width * $bar-menus-menu-notifications-scaling * 0.01;
|
||||
border-radius: $bar-menus-menu-notifications-scrollbar-radius;
|
||||
background: $bar-menus-menu-notifications-scrollbar-color;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-card-header-label {
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.notification-card-body-label {
|
||||
font-size: 0.84em;
|
||||
}
|
||||
.notification-icon {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.notification-time {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-label-container {
|
||||
margin-bottom: 8em;
|
||||
|
||||
label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-feinttext, $bar-menus-menu-notifications-no_notifications_label);
|
||||
}
|
||||
|
||||
.bell {
|
||||
font-size: 10em * $bar-menus-menu-notifications-scaling * 0.01;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01;
|
||||
}
|
||||
}
|
||||
|
||||
.close-notification-button.menu {
|
||||
background: $notification-close_button-background;
|
||||
color: $notification-close_button-label;
|
||||
min-width: 2.1em * $bar-menus-menu-notifications-scaling * 0.01;
|
||||
border-radius: 0rem $notification-border_radius $notification-border_radius 0em;
|
||||
|
||||
label {
|
||||
font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: transparentize($notification-close_button-background, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.notification-menu-pager {
|
||||
background: $bar-menus-menu-notifications-pager-background;
|
||||
border-radius: $bar-menus-border-radius;
|
||||
border-top-left-radius: 0em;
|
||||
border-top-right-radius: 0em;
|
||||
|
||||
.pager-button {
|
||||
margin: 0em;
|
||||
padding: 0.25em 1em;
|
||||
color: $bar-menus-menu-notifications-pager-button;
|
||||
|
||||
.pager-button-label {
|
||||
font-size: 2em * $bar-menus-menu-notifications-scaling * 0.01;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.pager-button-label {
|
||||
color: transparentize($bar-menus-menu-notifications-pager-button, 0.4);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pager-label {
|
||||
color: $bar-menus-menu-notifications-pager-label;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: transparentize($bar-menus-menu-notifications-pager-button, 0.8);
|
||||
|
||||
&:hover {
|
||||
.pager-button-label {
|
||||
color: transparentize($bar-menus-menu-notifications-pager-button, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
292
src/scss/style/menus/power.scss
Normal file
292
src/scss/style/menus/power.scss
Normal file
@@ -0,0 +1,292 @@
|
||||
window#powermenu,
|
||||
window#verification {
|
||||
// the fraction has to be more than hyprland ignorealpha
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
$popover-padding: 0.6rem * 1.6;
|
||||
|
||||
window#verification .verification {
|
||||
* {
|
||||
font-size: $font-size * $bar-menus-menu-dashboard-confirmation_scaling * 0.01;
|
||||
}
|
||||
|
||||
@include floating-widget;
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-background,
|
||||
$bar-menus-menu-dashboard-powermenu-confirmation-background
|
||||
);
|
||||
border: $bar-menus-border-size solid
|
||||
if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-powermenu-confirmation-border);
|
||||
padding: 0.35em * 1.6 * 1.5;
|
||||
min-width: 20em;
|
||||
min-height: 6em;
|
||||
opacity: $bar-menus-opacity * 0.01;
|
||||
|
||||
.verification-content {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-powermenu-confirmation-card);
|
||||
border-radius: $bar-menus-border-radius * 0.5;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.text-box {
|
||||
margin-bottom: 0.3em;
|
||||
|
||||
.title {
|
||||
font-size: 1.5em;
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-powermenu-confirmation-label);
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-dashboard-powermenu-confirmation-body);
|
||||
font-size: 1em;
|
||||
margin-bottom: 0.55em;
|
||||
padding: 1em 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.verification-button {
|
||||
background: $bar-menus-buttons-default;
|
||||
padding: 0.7em 0em;
|
||||
margin: 0.4em 1.7em;
|
||||
border-radius: $bar-menus-border-radius * 0.5;
|
||||
opacity: 1;
|
||||
transition: border-color 0.2s ease-in-out;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
|
||||
&.bar-verification_yes {
|
||||
background-color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-confirmation-confirm
|
||||
);
|
||||
}
|
||||
|
||||
&.bar-verification_no {
|
||||
background-color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-confirmation-deny
|
||||
);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&.bar-verification_yes {
|
||||
background-color: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-confirmation-confirm
|
||||
),
|
||||
0.6
|
||||
);
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&.bar-verification_no {
|
||||
background-color: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-confirmation-deny
|
||||
),
|
||||
0.6
|
||||
);
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&.bar-verification_yes {
|
||||
background-color: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-confirmation-confirm
|
||||
),
|
||||
0.6
|
||||
);
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&.bar-verification_no {
|
||||
background-color: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-confirmation-deny
|
||||
),
|
||||
0.6
|
||||
);
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
&.bar-verification_yes {
|
||||
background-color: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-confirmation-confirm
|
||||
),
|
||||
0.6
|
||||
);
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&.bar-verification_no {
|
||||
background-color: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-confirmation-deny
|
||||
),
|
||||
0.6
|
||||
);
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
image {
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
label {
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar-verification_no label {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-text,
|
||||
$bar-menus-menu-dashboard-powermenu-confirmation-button_text
|
||||
);
|
||||
}
|
||||
|
||||
.bar-verification_yes label {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-text,
|
||||
$bar-menus-menu-dashboard-powermenu-confirmation-button_text
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
window#powermenu .powermenu {
|
||||
@include floating-widget;
|
||||
|
||||
&.line {
|
||||
padding: $popover-padding * 1.5;
|
||||
}
|
||||
|
||||
&.box {
|
||||
padding: $popover-padding * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-button {
|
||||
border-color: $crust;
|
||||
min-width: 4.5em;
|
||||
min-height: 4.5em;
|
||||
opacity: 1;
|
||||
transition: border-color 0.2s ease-in-out;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
&.powermenu-button-shutdown {
|
||||
border-color: $red;
|
||||
}
|
||||
|
||||
&.powermenu-button-logout {
|
||||
border-color: $green;
|
||||
}
|
||||
|
||||
&.powermenu-button-sleep {
|
||||
border-color: $sky;
|
||||
}
|
||||
|
||||
&.powermenu-button-reboot {
|
||||
border-color: $peach;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&.powermenu-button-shutdown {
|
||||
border-color: $red;
|
||||
}
|
||||
|
||||
&.powermenu-button-logout {
|
||||
border-color: $green;
|
||||
}
|
||||
|
||||
&.powermenu-button-sleep {
|
||||
border-color: $sky;
|
||||
}
|
||||
|
||||
&.powermenu-button-reboot {
|
||||
border-color: $peach;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
&.powermenu-button-shutdown {
|
||||
border-color: rgba($red, 0.5);
|
||||
}
|
||||
|
||||
&.powermenu-button-logout {
|
||||
border-color: rgba($green, 0.5);
|
||||
}
|
||||
|
||||
&.powermenu-button-sleep {
|
||||
border-color: rgba($sky, 0.5);
|
||||
}
|
||||
|
||||
&.powermenu-button-reboot {
|
||||
border-color: rgba($peach, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.system-button_icon {
|
||||
font-size: 3em;
|
||||
|
||||
&.shutdown {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
&.logout {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
&.reboot {
|
||||
color: $peach;
|
||||
}
|
||||
|
||||
&.sleep {
|
||||
color: $sky;
|
||||
}
|
||||
}
|
||||
|
||||
.system-button_label {
|
||||
&.shutdown {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
&.logout {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
&.reboot {
|
||||
color: $peach;
|
||||
}
|
||||
|
||||
&.sleep {
|
||||
color: $sky;
|
||||
}
|
||||
}
|
||||
136
src/scss/style/menus/powerdropdown.scss
Normal file
136
src/scss/style/menus/powerdropdown.scss
Normal file
@@ -0,0 +1,136 @@
|
||||
.menu-items-container.power-dropdown * {
|
||||
font-size: $font-size * $bar-menus-menu-power-scaling * 0.01;
|
||||
}
|
||||
|
||||
@import "./menu.scss";
|
||||
|
||||
.menu-items.power-dropdown {
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-power-background-color);
|
||||
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-power-border-color);
|
||||
opacity: $bar-menus-opacity * 0.01;
|
||||
font-size: $font-size * $bar-menus-menu-power-scaling * 0.01;
|
||||
}
|
||||
|
||||
.menu-items-container.power-dropdown {
|
||||
&.reboot {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-restart-background);
|
||||
}
|
||||
|
||||
&.logout {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-logout-background);
|
||||
}
|
||||
|
||||
&.sleep {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-sleep-background);
|
||||
}
|
||||
|
||||
min-height: 3.5em * $bar-menus-menu-power-scaling * 0.01;
|
||||
font-size: 1.3em;
|
||||
margin: 1em;
|
||||
|
||||
.menu-items-section {
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.power-menu-button {
|
||||
border-radius: $bar-menus-border-radius * 0.6;
|
||||
|
||||
// This doubles the border-radius so it doesn't show up as
|
||||
// an artifact behind the button as that has a radius as well
|
||||
border-top-left-radius: $bar-menus-border-radius * 2;
|
||||
border-bottom-left-radius: $bar-menus-border-radius * 2;
|
||||
|
||||
&.no-label {
|
||||
// This doubles the border-radius so it doesn't show up as
|
||||
// an artifact behind the button as that has a radius as well
|
||||
border-top-right-radius: $bar-menus-border-radius * 2;
|
||||
border-bottom-right-radius: $bar-menus-border-radius * 2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.power-button-label {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
&.shutdown {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-shutdown-background);
|
||||
}
|
||||
|
||||
&.reboot {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-restart-background);
|
||||
}
|
||||
|
||||
&.logout {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-logout-background);
|
||||
}
|
||||
|
||||
&.sleep {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-sleep-background);
|
||||
}
|
||||
|
||||
.show-label {
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.no-label {
|
||||
border-top-right-radius: $bar-menus-border-radius * 0.35;
|
||||
border-bottom-right-radius: $bar-menus-border-radius * 0.35;
|
||||
}
|
||||
|
||||
.shutdown-label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-shutdown-text);
|
||||
}
|
||||
|
||||
.reboot-label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-restart-text);
|
||||
}
|
||||
|
||||
.logout-label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-logout-text);
|
||||
}
|
||||
|
||||
.sleep-label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-sleep-text);
|
||||
}
|
||||
}
|
||||
|
||||
label:not(.txt-icon) {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
label.txt-icon {
|
||||
min-width: 3.75rem * $bar-menus-menu-power-scaling * 0.01;
|
||||
min-height: 3.75rem * $bar-menus-menu-power-scaling * 0.01;
|
||||
background: $red;
|
||||
border-top-left-radius: $bar-menus-border-radius * 0.35;
|
||||
border-bottom-left-radius: $bar-menus-border-radius * 0.35;
|
||||
font-size: 1.75em;
|
||||
|
||||
&.shutdown-icon {
|
||||
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-shutdown-icon_background);
|
||||
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-power-buttons-shutdown-icon);
|
||||
}
|
||||
|
||||
&.reboot-icon {
|
||||
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-restart-icon_background);
|
||||
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-power-buttons-restart-icon);
|
||||
}
|
||||
|
||||
&.logout-icon {
|
||||
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-logout-icon_background);
|
||||
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-power-buttons-logout-icon);
|
||||
}
|
||||
|
||||
&.sleep-icon {
|
||||
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-sleep-icon_background);
|
||||
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-power-buttons-sleep-icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
114
src/scss/style/notifications/popups.scss
Normal file
114
src/scss/style/notifications/popups.scss
Normal file
@@ -0,0 +1,114 @@
|
||||
.notification-card {
|
||||
color: $notification-text;
|
||||
background: $notification-background;
|
||||
margin: 0.45em;
|
||||
border: 0.15em solid transparentize($notification-border, 0.5);
|
||||
min-width: 26em;
|
||||
min-height: 4em;
|
||||
border-radius: $notification-border_radius;
|
||||
opacity: $notification-opacity * 0.01;
|
||||
}
|
||||
|
||||
.notification-card-container {
|
||||
* {
|
||||
font-size: $font-size * $notification-scaling * 0.01;
|
||||
}
|
||||
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.notification-card-image-container {
|
||||
margin: 0.65em 0.65em;
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
|
||||
.notification-card-image {
|
||||
border-radius: 0.4em;
|
||||
min-width: 2.5em;
|
||||
min-height: 2.5em;
|
||||
padding: 0.85em 0.85em;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
&.icon {
|
||||
min-width: 0em;
|
||||
padding: 0em;
|
||||
min-height: 0em;
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-card-content {
|
||||
min-width: 2.9em;
|
||||
min-height: 2.9em;
|
||||
padding: 0.5em 0.5em;
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.notification-card-content.noimg {
|
||||
margin-left: 0.5em;
|
||||
margin-top: 0.15em;
|
||||
}
|
||||
|
||||
.notification-card-header-label {
|
||||
font-size: 0.95em;
|
||||
margin-bottom: 0.5em;
|
||||
color: $notification-label;
|
||||
}
|
||||
|
||||
.notification-card-body-label {
|
||||
font-size: 0.84em;
|
||||
margin-bottom: 1em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.notification-card-actions {
|
||||
margin-top: 0.25em;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
.notification-action-buttons {
|
||||
color: $notification-actions-text;
|
||||
background: $notification-actions-background;
|
||||
min-width: 4em;
|
||||
min-height: 1.65em;
|
||||
border-radius: $bar-menus-buttons-radius;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: transparentize($notification-actions-background, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
color: $notification-labelicon;
|
||||
margin-bottom: 0.4em;
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.notification-time {
|
||||
font-size: 0.85em;
|
||||
color: $notification-time;
|
||||
}
|
||||
|
||||
.close-notification-button {
|
||||
background: $notification-close_button-background;
|
||||
color: $notification-close_button-label;
|
||||
min-width: 2.1em;
|
||||
border-radius: 0rem $notification-border_radius * 0.7 $notification-border_radius * 0.7 0em;
|
||||
|
||||
label {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: transparentize($notification-close_button-background, 0.5);
|
||||
}
|
||||
}
|
||||
81
src/scss/style/osd/index.scss
Normal file
81
src/scss/style/osd/index.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
.indicator {
|
||||
* {
|
||||
font-size: $font-size * $osd-scaling * 0.01;
|
||||
}
|
||||
|
||||
.osd-container {
|
||||
margin: $osd-margins;
|
||||
opacity: $osd-opacity * 0.01;
|
||||
}
|
||||
|
||||
.osd-label-container {
|
||||
background: $osd-bar_container;
|
||||
|
||||
border-radius: if($osd-orientation =="vertical", $osd-radius $osd-radius 0em 0em, 0em $osd-radius $osd-radius 0em);
|
||||
|
||||
.osd-label {
|
||||
font-size: 1em;
|
||||
padding-top: if($osd-orientation =="vertical", 1em, 0em);
|
||||
padding-right: if($osd-orientation =="horizontal", 1em, 0em);
|
||||
color: $osd-label;
|
||||
|
||||
&.overflow {
|
||||
color: $osd-bar_overflow_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.osd-icon-container {
|
||||
background: $osd-icon_container;
|
||||
|
||||
border-radius: if($osd-orientation =="vertical", 0em 0em $osd-radius $osd-radius, $osd-radius 0em 0em $osd-radius );
|
||||
|
||||
.osd-icon {
|
||||
font-size: 2.1em;
|
||||
padding: if($osd-orientation =="vertical", 0.2em 0em, 0em 0.4em);
|
||||
color: $osd-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.osd-bar-container {
|
||||
padding: 1.25em;
|
||||
background: $osd-bar_container;
|
||||
|
||||
.osd-bar {
|
||||
levelbar * {
|
||||
transition: 200ms;
|
||||
}
|
||||
|
||||
trough {
|
||||
min-height: if($osd-orientation =="vertical", 10em, 0);
|
||||
min-width: if($osd-orientation =="horizontal", 10em, 0);
|
||||
}
|
||||
|
||||
block {
|
||||
border-radius: $osd-radius * 0.5;
|
||||
|
||||
&.empty {
|
||||
background: $osd-bar_empty_color;
|
||||
|
||||
}
|
||||
|
||||
&.filled {
|
||||
background: $osd-bar_color;
|
||||
padding: 0.45em;
|
||||
}
|
||||
}
|
||||
|
||||
&.overflow {
|
||||
block {
|
||||
&.empty {
|
||||
background: $osd-bar_color;
|
||||
}
|
||||
|
||||
&.filled {
|
||||
background: $osd-bar_overflow_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
484
src/scss/style/settings/dialog.scss
Normal file
484
src/scss/style/settings/dialog.scss
Normal file
@@ -0,0 +1,484 @@
|
||||
window.settings-dialog {
|
||||
opacity: $bar-menus-opacity * 0.01;
|
||||
background-color: $bar-menus-cards;
|
||||
color: $bar-menus-text;
|
||||
|
||||
$widget-bg: $bar-menus-cards;
|
||||
$border: none;
|
||||
$fg: $bar-menus-text;
|
||||
|
||||
.settings-dialog-box {
|
||||
min-width: 75em;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: transparentize($bar-menus-background, 0.1);
|
||||
border-bottom-left-radius: $bar-menus-border-radius * 0.5;
|
||||
border-bottom-right-radius: $bar-menus-border-radius * 0.5;
|
||||
padding: $padding;
|
||||
|
||||
button {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button.close {
|
||||
color: $bar-menus-iconbuttons-passive;
|
||||
|
||||
* {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $bar-menus-buttons-active;
|
||||
}
|
||||
}
|
||||
|
||||
button.reset {
|
||||
color: $bar-menus-iconbuttons-passive;
|
||||
padding: $padding * 0.5;
|
||||
|
||||
* {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $bar-menus-buttons-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
.page-content {
|
||||
padding: $padding * 2;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.group {
|
||||
.group-title {
|
||||
color: $bar-menus-text;
|
||||
margin-bottom: $spacing * 0.5;
|
||||
}
|
||||
|
||||
.group-reset {
|
||||
margin: $spacing * 0.5;
|
||||
padding: $padding * 0.5;
|
||||
|
||||
&:disabled {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: $spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
background-color: $widget-bg;
|
||||
padding: $padding;
|
||||
border: $border;
|
||||
border-top: none;
|
||||
|
||||
&:first-child {
|
||||
border-radius: $radius $radius 0em 0em;
|
||||
border: $border;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0em 0em $radius $radius;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
border-radius: $radius;
|
||||
border: $border;
|
||||
}
|
||||
|
||||
button.reset {
|
||||
margin-left: $spacing;
|
||||
}
|
||||
|
||||
label.id,
|
||||
label.note {
|
||||
color: transparentize($fg, 0.4);
|
||||
}
|
||||
|
||||
entry,
|
||||
button {
|
||||
padding: $padding;
|
||||
}
|
||||
|
||||
spinbutton {
|
||||
entry {
|
||||
border-radius: $radius 0em 0em $radius;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0em;
|
||||
}
|
||||
|
||||
button:last-child {
|
||||
border-radius: 0em $radius $radius 0em;
|
||||
}
|
||||
}
|
||||
|
||||
.enum-setter {
|
||||
label {
|
||||
background-color: $widget-bg;
|
||||
border: $border;
|
||||
padding: 0em $padding;
|
||||
border-radius: $radius 0em 0em $radius;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0em;
|
||||
}
|
||||
|
||||
button:last-child {
|
||||
border-radius: 0em $radius $radius 0em;
|
||||
}
|
||||
}
|
||||
|
||||
&.wallpaper {
|
||||
button {
|
||||
margin-top: $spacing * 0.5;
|
||||
}
|
||||
|
||||
.preview {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option-item {
|
||||
margin: 0em 2em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
.reset {
|
||||
color: $bar-menus-iconbuttons-passive;
|
||||
}
|
||||
|
||||
.options-label {
|
||||
color: $bar-menus-text;
|
||||
}
|
||||
|
||||
.options-sublabel {
|
||||
font-size: 0.75em;
|
||||
margin-top: 0.2em;
|
||||
color: $bar-menus-dimtext;
|
||||
}
|
||||
|
||||
.options-sublabel-link {
|
||||
label {
|
||||
font-size: 0.75em;
|
||||
margin-top: 0.2em;
|
||||
color: $bar-menus-dimtext;
|
||||
}
|
||||
|
||||
&:hover label {
|
||||
color: $bar-menus-listitems-active;
|
||||
}
|
||||
}
|
||||
|
||||
.inputter-container {
|
||||
border-radius: $bar-menus-border-radius * 0.5;
|
||||
|
||||
:first-child {
|
||||
border-radius: $bar-menus-border-radius * 0.5;
|
||||
}
|
||||
|
||||
padding: 0.35em 0.35em;
|
||||
background: transparentize($bar-menus-background, 0.6);
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.options-header {
|
||||
margin: 1em 1em;
|
||||
|
||||
.label-name {
|
||||
color: $bar-menus-label;
|
||||
font-size: 0.9em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.pager-button {
|
||||
color: transparentize($bar-menus-text, 0.4);
|
||||
margin: 0.5em 0.75em;
|
||||
|
||||
&.category label {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
label {
|
||||
text-decoration: underline;
|
||||
color: $bar-menus-text;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
label {
|
||||
text-decoration: underline;
|
||||
color: $bar-menus-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar-theme-page {
|
||||
min-height: 40em;
|
||||
}
|
||||
|
||||
.settings-menu-stack {
|
||||
background: $red;
|
||||
}
|
||||
|
||||
.paged-container {
|
||||
.reset-options {
|
||||
color: $bar-menus-text;
|
||||
|
||||
&:disabled {
|
||||
color: $bar-menus-buttons-disabled;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: transparentize($bar-menus-text, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
scrollbar {
|
||||
margin-right: 0.2em;
|
||||
min-width: 0.6em;
|
||||
border-radius: $bar-menus-border-radius;
|
||||
background: $bar-menus-background;
|
||||
|
||||
slider {
|
||||
min-width: 0.6em;
|
||||
border-radius: $bar-menus-border-radius;
|
||||
background: $bar-menus-buttons-default;
|
||||
}
|
||||
}
|
||||
|
||||
selection {
|
||||
background: $bar-menus-label;
|
||||
color: $bar-menus-cards;
|
||||
}
|
||||
|
||||
switch {
|
||||
font-size: 10px;
|
||||
|
||||
&:checked {
|
||||
background: $bar-menus-switch-enabled;
|
||||
}
|
||||
|
||||
slider {
|
||||
background-color: $bar-menus-switch-puck;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
|
||||
}
|
||||
}
|
||||
|
||||
entry {
|
||||
min-width: 15em;
|
||||
}
|
||||
}
|
||||
|
||||
dialog {
|
||||
background: $bar-menus-cards;
|
||||
color: $bar-menus-text;
|
||||
|
||||
:selected {
|
||||
background: transparentize($bar-menus-label, 0.2);
|
||||
color: transparentize($bar-menus-cards, 0.2);
|
||||
}
|
||||
|
||||
headerbar {
|
||||
border-bottom: 0.075em solid $bar-menus-border-color;
|
||||
background: $bar-menus-cards;
|
||||
padding: 0.5em;
|
||||
font-size: 1.5em;
|
||||
|
||||
button {
|
||||
color: $bar-menus-buttons-text;
|
||||
min-width: 4.5em;
|
||||
min-height: 2.5em;
|
||||
border-radius: $bar-menus-border-radius;
|
||||
background: $bar-menus-buttons-default;
|
||||
|
||||
&:hover {
|
||||
background: transparentize($bar-menus-buttons-default, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
viewport {
|
||||
border-right: 0.25em solid $bar-menus-border-color;
|
||||
|
||||
list {
|
||||
row {
|
||||
padding: 0em 1.5em;
|
||||
|
||||
&:hover {
|
||||
background: $bar-menus-buttons-default;
|
||||
color: $bar-menus-buttons-text;
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0.5em 0.5em;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
stack {
|
||||
.horizontal .path-bar {
|
||||
button {
|
||||
background: $bar-menus-iconbuttons-active;
|
||||
min-width: 3em;
|
||||
min-height: 2em;
|
||||
border-radius: $bar-menus-border-radius * 0.5;
|
||||
|
||||
&:disabled {
|
||||
background: $bar-menus-buttons-disabled;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: transparentize($bar-menus-buttons-active, 0.5);
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0em 0.25em;
|
||||
color: $bar-menus-buttons-text;
|
||||
}
|
||||
|
||||
image {
|
||||
margin: 0em 0.5em;
|
||||
color: $bar-menus-buttons-text;
|
||||
}
|
||||
|
||||
margin: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
treeview header button {
|
||||
padding: 0.25em;
|
||||
border: 0.15em solid $bar-menus-border-color;
|
||||
}
|
||||
|
||||
headerbar {
|
||||
color: $bar-menus-label;
|
||||
}
|
||||
|
||||
popover {
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
|
||||
border-radius: $bar-buttons-radius;
|
||||
|
||||
modelbutton {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
modelbutton:hover label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
modelbutton:disabled label {
|
||||
color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.5);
|
||||
}
|
||||
separator {
|
||||
margin: 0.5em 0em;
|
||||
}
|
||||
}
|
||||
|
||||
separator {
|
||||
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
|
||||
min-height: 0.075em * $popoverScaling;
|
||||
}
|
||||
|
||||
check,
|
||||
radio {
|
||||
min-height: 0.8em * $popoverScaling;
|
||||
min-width: 0.8em * $popoverScaling;
|
||||
margin-right: 0.5em * $popoverScaling;
|
||||
padding: 0;
|
||||
color: transparent;
|
||||
background-color: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
|
||||
transition:
|
||||
all 100ms cubic-bezier(0, 0, 0.2, 1),
|
||||
box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
radio {
|
||||
border-radius: 9999px;
|
||||
border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
check {
|
||||
border-radius: $bar-buttons-radius;
|
||||
border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
check:hover,
|
||||
radio:hover {
|
||||
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
|
||||
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
|
||||
}
|
||||
|
||||
check:active,
|
||||
radio:active {
|
||||
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
|
||||
background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
check:checked,
|
||||
check:indeterminate,
|
||||
radio:checked,
|
||||
radio:indeterminate {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
check:checked:hover,
|
||||
check:indeterminate:hover,
|
||||
radio:checked:hover,
|
||||
radio:indeterminate:hover {
|
||||
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
|
||||
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
|
||||
}
|
||||
|
||||
check:checked:active,
|
||||
check:indeterminate:active,
|
||||
radio:checked:active,
|
||||
radio:indeterminate:active {
|
||||
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
|
||||
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.unsaved-icon {
|
||||
margin-right: 1em;
|
||||
font-size: 1em;
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
.options-import,
|
||||
.options-export {
|
||||
border-radius: $bar-menus-border-radius * 0.5;
|
||||
color: $bar-menus-buttons-text;
|
||||
padding: 0.35em 0.35em;
|
||||
background: $bar-menus-buttons-default;
|
||||
margin-right: 1em;
|
||||
margin-left: 0.5em;
|
||||
|
||||
&:hover {
|
||||
background: transparentize($bar-menus-buttons-default, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.options-import {
|
||||
margin-right: 0em;
|
||||
}
|
||||
17
src/scss/utils/hotReload.ts
Normal file
17
src/scss/utils/hotReload.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { monitorFile } from 'astal';
|
||||
import { resetCss } from '../style';
|
||||
|
||||
export const initializeHotReload = async (): Promise<void> => {
|
||||
const monitorList = [
|
||||
`${SRC_DIR}/src/scss/style/bar`,
|
||||
`${SRC_DIR}/src/scss/style/common`,
|
||||
`${SRC_DIR}/src/scss/style/menus`,
|
||||
`${SRC_DIR}/src/scss/style/notifications`,
|
||||
`${SRC_DIR}/src/scss/style/osd`,
|
||||
`${SRC_DIR}/src/scss/style/settings`,
|
||||
`${SRC_DIR}/src/scss/style/colors.scss`,
|
||||
`${SRC_DIR}/src/scss/style/highlights.scss`,
|
||||
];
|
||||
|
||||
monitorList.forEach((file) => monitorFile(file, resetCss));
|
||||
};
|
||||
Reference in New Issue
Block a user