start-screen.rasi

/**
 * ROFI Metro: Start screen
 * w/ pywal support
 *
 * Tiles not yet working(!!!)
 */

@import "~/.cache/wal/colors-rofi-dark.rasi"

* {
	user-firstname: "Dartegnian";
	user-lastname: "Velarde";
	user-photo: url("/usr/share/sddm/faces/dartegnian.face.icon", both);

	foreground: #FFFFFF;
	border-color: transparent;
	background-color: transparent;
	spacing: 10;
	text-color: @foreground;
}

#window {
	fullscreen: true;
	background-color: @active-background;
	padding: 6%;
}

#mainbox {
	children: [
		inputbar,
		message,
		container-start-screen
	];
}

#container-start-screen {
	children: [
		container-metro-tiles,
		listview
	];
	orientation: horizontal;
}

#container-metro-tiles {
	children: [
		button-tile-wide-email,
		button-tile-wide-firefox,
		container-tile-row-first,
		button-tile-wide-mpv,
		container-tile-row-second
	];
	orientation: vertical;
	expand: false;
	width: 300px;
	padding: 10px 0 0 0;
}

#button-tile-wide-email {
	expand: false;
	padding: 100px 10px 10px 10px;
	content: "Thunderbird";
	background-image: url("./rofi-metro/tiles/regular/email.png", both);
	background-color: #3a9ec8;
	action: "kb-custom-1";
}

#button-tile-wide-firefox {
	expand: false;
	padding: 100px 10px 10px 10px;
	content: "Firefox";
	background-image: url("./rofi-metro/tiles/regular/firefox.png", both);
	background-color: #ea8600;
	action: "kb-custom-2";
}

#container-tile-row-first {
	children: [
		button-tile-small-steam,
		button-tile-small-discord
	];
	orientation: horizontal;
	width: 300px;
	expand: false;
}

#button-tile-small-steam {
	padding: 100px 10px 10px 10px;
	content: "Steam";
	background-image: url("./rofi-metro/tiles/small/steam.png", both);
	background-color: #0c4076;
	action: "kb-custom-3";
}

#button-tile-small-discord {
	padding: 100px 10px 10px 10px;
	content: "Discord";
	background-image: url("./rofi-metro/tiles/small/discord.png", both);
	background-color: #5865F2;
	action: "kb-custom-4";
}

#button-tile-wide-mpv {
	expand: false;
	padding: 100px 10px 10px 10px;
	content: "MPV";
	background-image: url("./rofi-metro/tiles/regular/mpv.png", both);
	background-color: #672168;
	action: "kb-custom-5";
}

/* TILES WITH PYWAL COLORS */
#container-tile-row-second {
	children: [
		button-tile-small-code,
		button-tile-small-terminal
	];
	orientation: horizontal;
	width: 300px;
	expand: false;
}

#button-tile-small-code {
	padding: 100px 10px 10px 10px;
	content: "Code";
	background-image: url("./rofi-metro/tiles/small/code.png", both);
	background-color: @selected-normal-background;
	action: "kb-custom-6";
}

#button-tile-small-terminal {
	padding: 100px 10px 10px 10px;
	content: "Terminal";
	background-image: url("./rofi-metro/tiles/small/terminal.png", both);
	background-color: @urgent-background;
	action: "kb-custom-7";
}

#message {
	border: 0px;
	border-color: @border-color;
	padding: 10 1% 10;
}

#listview {
	columns: 7;
	fixed-columns: true;
	spacing: 10px;
	padding: 10px 0% 10px;
    border: 0px;
}

#element {
    orientation: vertical;
	padding: 10px 10px 10px;
	width: 20px;
}

#element-text {
	margin: 10px 0px 0px 0px;
}

#element-icon {
	horizontal-align: 0.5;
    size: 60px;
	padding: 5px;
}

#element.normal.normal,
element.normal.urgent,
element.selected.urgent,
element.alternate.normal {
	background-color: @selected-active-background;
}

#element.normal.active,
element.selected.normal,
element.selected.active {
	background-color: @selected-normal-background;
}

#inputbar {
    children: [
		textbox-start-text,
		entry,
		container-name,
		user-icon
	];
	spacing: 20;
	padding: 0 15px 0px 0;
	margin: 0 0 70px 0;
}

#entry {
	font: "Noto Sans 24";
}

#textbox-start-text {
    expand: true;
	content: "Start";
	font: "Noto Sans 34";
}

#container-name {
	children: [
		textbox-firstname,
		textbox-lastname
	];
	orientation: vertical;
    spacing: 0px;
    expand: false;
}

#textbox-firstname {
	horizontal-align: 1;
	font: "Noto Sans 17";
	str: @user-firstname;
}

#textbox-lastname {
	horizontal-align: 1;
	str: @user-lastname;
}

#user-icon {
	expand: false;
	padding: 0px;
	width: 50px;
	height: 10px;
	margin: 0 0 13px 0;
	border: 0px;
	background-image: @user-photo;
}

#scrollbar,
sidebar {
	enabled: false;
}