Rofi theme inspired by raycast

raycast.rasi

/* ________Variables________ */
* {
	/* ________Window________ */	
    window-width: 800px;
	window-height: 550px;
	window-border: 1.75px;
    window-border-color: #4A4A4C;
	window-border-radius: 12px;
    window-bg-color:  rgba(26, 27, 38, 0.65);


    bg-col-light: #1e1e2e;
    selected-col: #1e1e2e;
    blue: #89b4fa;
    fg-col: #cdd6f4;
    fg-col2: #f38ba8;
    grey: #6c7086;

}
/* ________Main window________ */
window {
	width: @window-width;
    // height: @window-height;
    border: @window-border;
    border-color: @window-border-color;
    background-color: @window-bg-color;
	border-radius: @window-border-radius;
}

/* ________Main view inside the window________ */
mainbox {
    background-color: transparent;
	children: [inputbar, listview, footer];
}

spacer {
	str: "";
	expand: true;
	background-color: transparent;
}

textbox-separator {
	str: "|";
	expand: true;
	background-color: transparent;
	margin: 0 6px;
	font: "Inter Bold 14px";
	vertical-align: 0.5;
    text-color: rgba(255, 255, 255, 0.2);
}

keys-info {
	children: [
				// Launch
				textbox-return-text, textbox-return-icon,
				textbox-separator,
				
				// Left
				textbox-left-text, textbox-command-icon, textbox-left-icon,
				textbox-separator,
				
				// Down
				textbox-down-text, textbox-command-icon, textbox-down-icon,
				textbox-separator,
				
				// Up
				textbox-up-text, textbox-command-icon, textbox-up-icon,
				textbox-separator,
			
				// Right
				textbox-right-text, textbox-command-icon, textbox-right-icon];

	expand: false;
	vertical-align: 0.5;
	orientation: horizontal;
	spacing: 2px;
    background-color: transparent; 
}

textbox-return-text {
	str: "Launch";
	expand: false;
	text-color: white; 
	font: "Inter Medium 14px";
	vertical-align: 0.5;
	padding: 0 4px;
	border-radius: 4px;
    background-color: transparent; 
}

textbox-return-icon {
	str: "󰌑";
	expand: false;
	text-color: rgba(255, 255, 255, 0.6);
	font: "Ubuntu Nerd Font 16px";
	vertical-align: 0.5;
	margin: 8px 0;
	padding: 0 4px;
	border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.2);
}

textbox-command-icon {
	str: "󰘳";
	expand: false;
	text-color: white; 
	font: "Ubuntu Nerd Font 16px";
	vertical-align: 0.5;
	margin: 8px 0;
	padding: 0 4px;
	border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.2);
}

textbox-down-text {
	str: "";
	expand: false;
	text-color: white; 
	font: "Ubuntu Nerd Font 14px";
	vertical-align: 0.5;
	border-radius: 4px;
    background-color: transparent; 
}


textbox-down-icon {
	str: "J";
	expand: false;
	text-color: white; 
	font: "Inter Medium 16px";
	vertical-align: 0.5;
	margin: 8px 0;
	padding: 0 4px;
	border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.2);
}

textbox-up-text {
	str: "";
	expand: false;
	text-color: white; 
	font: "Ubuntu Nerd Font 14px";
	vertical-align: 0.5;
	border-radius: 4px;
    background-color: transparent; 
}


textbox-up-icon {
	str: "K";
	expand: false;
	text-color: white; 
	font: "Inter Medium 16px";
	vertical-align: 0.5;
	margin: 8px 0;
	padding: 0 4px;
	border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.2);
}
textbox-left-text {
	str: "";
	expand: false;
	text-color: white; 
	font: "Ubuntu Nerd Font 14px";
	vertical-align: 0.5;
	border-radius: 4px;
    background-color: transparent; 
}


textbox-left-icon {
	str: "H";
	expand: false;
	text-color: white; 
	font: "Inter Medium 16px";
	vertical-align: 0.5;
	margin: 8px 0;
	padding: 0 4px;
	border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.2);
}
textbox-right-text {
	str: "";
	expand: false;
	text-color: white; 
	font: "Ubuntu Nerd Font 14px";
	vertical-align: 0.5;
	border-radius: 4px;
    background-color: transparent; 
}


textbox-right-icon {
	str: "L";
	expand: false;
	text-color: white; 
	font: "Inter Medium 16px";
	vertical-align: 0.5;
	margin: 8px 0;
	padding: 0 4px;
	border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.2);
}

footer {
	children: [textbox-1, spacer, keys-info];
	expand:false;
	orientation: horizontal;
	padding: 5px 10px;
	background-color: rgba(083, 083, 087, 0.1);

    border-color: rgba(255, 255, 255, 0.1);

	border: 2px 0 0 0;
}

textbox-1 {
    expand: false;
    str: "󰣇";
	background-color: transparent;	
	text-color: rgba(255, 255, 255, 0.2);
	font: "Ubuntu Nerd Font 34px";
	vertical-align: 0.5;
}

textbox {
    expand: false;
    str: "Application";
	background-color: transparent;	
	
	text-color: rgba(255, 255, 255, 0.5);
	font: "Inter Medium 14px";
	vertical-align: 0.5;
}

inputbar {
	children: [entry];
	background-color: transparent;
	border-color: #ffffff;
}

entry {
	placeholder-color: rgba(255, 255, 255, 0.3);
    padding: 18px 14px; 
    text-color: white;
    border-color: rgba(255, 255, 255, 0.1);
	border: 0 0 2px 0;
    background-color: transparent;
}

prompt {
    text-color: #FFFFFF;
}




listview {
    padding: 6px;
    lines: 7;
	spacing: 5px;
    background-color: transparent; 
}

element {
    padding: 12px;
	border-radius: 8px;
	border: 0;
    background-color: transparent; 
    text-color: blue;
	spacing: 10px;
	children: [group, textbox];
}


group {
background-color: transparent;
	orientation: horizontal;
	spacing: 10px;
	children: [element-icon, element-text];
}

element hover {
	background-color: red;
}

element-icon {
    size: 30px;
	background-color: transparent;
}


element-text {
	font: "Inter Medium 16px";
	vertical-align: 0.5;
	text-color: white;
	background-color: transparent;
}

element selected {
    background-color:  rgba(255, 255, 255, 0.2);
}