jatin-shihora_Obsidian-lofi-plugin/styles.css

/*

This CSS file will be included with your plugin, and
available in the app when your plugin is enabled.

If your plugin does not need CSS, delete this file.

*/
/* styles.css */

/* --- Styles for the Custom Folder Browser UI --- */

/* Overall container for the navigation elements (path and Up button) */
.lofi-folder-browser-nav {
	display: flex; /* Arrange path and button side-by-side */
	align-items: center; /* Vertically align items */
	gap: 10px; /* Space between the path element and the Up button */
	margin-bottom: 10px; /* Space below the navigation bar */
	padding-bottom: 8px; /* Space below the border */
	border-bottom: 1px solid var(--background-modifier-border); /* Add a separating line */
	flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

/* Element displaying the current path */
.lofi-browser-current-path {
	flex-grow: 1; /* Allow the path text to take up available space */
	font-weight: bold; /* Make the path text stand out */
	color: var(--text-normal); /* Use normal text color from theme */
	word-break: break-all; /* Prevent long paths from overflowing */
}

/* Style for the 'Up' button */
.lofi-browser-up-button {
	/* Use Obsidian's button styling variables */
	padding: 4px 10px; /* Adjust padding */
	cursor: pointer; /* Indicate clickable */
	border: 1px solid var(--interactive-accent); /* Accent color border */
	border-radius: var(--button-border-radius); /* Rounded corners */
	background-color: var(
		--background-primary-alt
	); /* Background color from theme */
	color: var(--text-normal); /* Text color from theme */
	font-size: var(--font-ui-small); /* Match smaller UI font */
	line-height: 1; /* Adjust line height */
	transition: background-color 0.15s ease; /* Smooth hover effect */
}

/* Hover effect for the 'Up' button */
.lofi-browser-up-button:hover {
	background-color: var(
		--background-modifier-hover
	); /* Hover background color */
}

/* Style for the 'Select This Folder' button */
.lofi-browser-select-button {
	/* Similar styling to the Up button */
	display: block; /* Make it a block element to take full width */
	width: 100%; /* Full width */
	margin-top: 10px; /* Space above the select button */
	padding: 6px 10px; /* Adjust padding */
	cursor: pointer;
	border: 1px solid var(--interactive-accent);
	border-radius: var(--button-border-radius);
	background-color: var(
		--interactive-accent
	); /* Use accent color for primary action */
	color: var(--text-inverted); /* Inverted text color for accent background */
	font-size: var(--font-ui-normal); /* Normal UI font size */
	line-height: 1;
	transition: background-color 0.15s ease;
}

/* Hover effect for the 'Select This Folder' button */
.lofi-browser-select-button:hover {
	background-color: var(
		--interactive-accent-hover
	); /* Darker accent color on hover */
}

/* Container for the list of folder and file items */
.lofi-folder-browser-list {
	border: 1px solid var(--background-modifier-border); /* Border around the list */
	max-height: 250px; /* Set a maximum height to make the list scrollable */
	overflow-y: auto; /* Add a vertical scrollbar when content exceeds max height */
	padding: 5px; /* Padding inside the list container */
	border-radius: var(
		--input-border-radius
	); /* Match input field corner radius */
	background-color: var(
		--background-secondary
	); /* Slightly different background for the list area */
}

/* Style for each individual item (folder or file) in the list */
.lofi-browser-list-item {
	display: flex; /* Arrange icon and name side-by-side */
	align-items: center; /* Vertically align icon and name */
	padding: 4px 8px; /* Padding inside each list item */
	margin-bottom: 2px; /* Space between list items */
	border-radius: var(--button-border-radius); /* Small rounded corners */
	transition: background-color 0.1s ease; /* Smooth hover effect */
}

/* Style for the icon span within a list item */
.lofi-browser-item-icon {
	margin-right: 8px; /* Space between icon and name */
	/* Optional: Adjust icon size or color */
	font-size: 1.1em;
	color: var(--icon-color); /* Use theme icon color */
}

/* Style for the name span within a list item */
.lofi-browser-item-name {
	flex-grow: 1; /* Allow the name to take up available space */
	user-select: none; /* Prevent text selection when clicking */
	white-space: nowrap; /* Prevent name from wrapping */
	overflow: hidden; /* Hide overflowing text */
	text-overflow: ellipsis; /* Show ellipsis (...) for truncated names */
}

/* Style specific to folder items (clickable) */
.lofi-browser-item-folder {
	cursor: pointer; /* Indicate clickable */
	/* background-color: var(--background-secondary); /* Optional: Different background for folders */
}

/* Hover effect for folder items */
.lofi-browser-item-folder:hover {
	background-color: var(
		--background-modifier-hover
	); /* Hover background color */
	color: var(--text-accent); /* Optional: Change text color on hover */
}

/* Style specific to file items (not clickable for navigation) */
.lofi-browser-item-file {
	opacity: 0.8; /* Slightly dim file items to distinguish from folders */
	cursor: default; /* Explicitly show default cursor */
}

/* Style for error messages within the browser */
.lofi-browser-error {
	color: var(--text-error); /* Use error text color (red) */
	padding: 10px;
	text-align: center;
}

/* --- End Styles for the Custom Folder Browser UI --- */

/* --- Styles for the Track List --- */

.lofi-track-list {
	border: 1px solid var(--background-modifier-border); /* Border around the list */
	max-height: 150px; /* Set a max height to make it scrollable */
	overflow-y: auto; /* Add scrollbar if content exceeds height */
	padding: 5px; /* Padding inside */
	border-radius: var(--input-border-radius); /* Match other elements */
	background-color: var(
		--background-secondary
	); /* Same background as folder list */
	margin-top: 10px; /* Space above the list */
}

.lofi-track-list-empty {
	padding: 10px;
	text-align: center;
	color: var(--text-muted); /* Muted text color */
}

.lofi-track-list-item {
	display: flex;
	align-items: center;
	padding: 4px 8px;
	margin-bottom: 2px;
	border-radius: var(--button-border-radius);
	transition: background-color 0.1s ease;
	cursor: pointer; /* Indicate clickable */
}

.lofi-track-list-item:hover {
	background-color: var(--background-modifier-hover); /* Hover effect */
}

/* Style for clickable track items */
.lofi-track-item-clickable {
	cursor: pointer;
}

/* Style for the track name text */
.lofi-track-name {
	flex-grow: 1; /* Allow name to take space */
	white-space: nowrap; /* Prevent name from wrapping */
	overflow: hidden; /* Hide overflowing text */
	text-overflow: ellipsis; /* Show ellipsis (...) for truncated names */
}

/* Style for the currently playing track item */
.lofi-track-item-playing {
	background-color: var(
		--interactive-accent
	); /* Use accent color for the playing track */
	color: var(--text-inverted); /* Inverted text color */
	font-weight: bold; /* Bold text for playing track */
}

.lofi-track-item-playing .lofi-track-name {
	/* Ensure name color is inverted too */
	color: var(--text-inverted);
}

.lofi-track-item-playing:hover {
	/* Adjust hover effect for the playing item */
	background-color: var(--interactive-accent-hover);
}

/* styles.css (add these below the track list styles) */

/* --- Styles for Playback Controls --- */

.lofi-playback-controls {
	margin-top: 10px; /* Space above the controls */
	padding-top: 10px;
	border-top: 1px solid var(--background-modifier-border); /* Separator line */
}

.lofi-playback-buttons-container {
	display: flex; /* Arrange buttons in a row */
	gap: 10px; /* Space between buttons */
	justify-content: center; /* Center the buttons */
	align-items: center;
	margin-bottom: 10px; /* Space below the button row */
}

.lofi-playback-button {
	/* Basic button styling - similar to navigation buttons */
	padding: 5px 12px;
	cursor: pointer;
	border: 1px solid var(--interactive-accent);
	border-radius: var(--button-border-radius);
	background-color: var(--background-primary-alt);
	color: var(--text-normal);
	font-size: var(--font-ui-normal);
	line-height: 1;
	transition: background-color 0.15s ease;
}

.lofi-playback-button:hover {
	background-color: var(--background-modifier-hover);
}

/* Optional: Specific styles for Prev/Next if needed */
.lofi-prev-button {
	/* ... */
}
.lofi-next-button {
	/* ... */
}

/* Optional: Style for shuffle toggle if added later */
/* .lofi-shuffle-toggle .setting-item-control { ... } */

/* styles.css (add these below other styles) */

/* --- Styles for Status Bar Playback Controls --- */

/* Style for each individual status bar item used as a control button */
.status-bar-item.lofi-control-button {
	/* Make it look like a button/icon */
	cursor: pointer;
	padding: 0 8px; /* Add some padding around the text/icon */
	/* Inherit text/color from status bar */
	/* Optional: Add subtle background/border on hover */
	border-radius: 4px; /* Small rounded corners */
	transition: background-color 0.1s ease;
}

.status-bar-item.lofi-control-button:hover {
	background-color: var(--background-modifier-hover); /* Highlight on hover */
}

/* Specific styles if needed (e.g., different colors) */
/* .status-bar-item.lofi-prev-button { ... } */
/* .status-bar-item.lofi-play-pause-button { ... } */
/* .status-bar-item.lofi-next-button { ... } */

/* If using SVG icons, you might need styles for the svg element inside */
/* .status-bar-item.lofi-control-button svg { fill: var(--icon-color); width: 18px; height: 18px; vertical-align: middle; } */

/* Style for the main status bar text item */
/* .status-bar-item:not(.lofi-control-button) { ... } */

/* styles.css (add these below other styles) */

/* --- Styles for Timer Status Bar Items --- */

/* Style for the timer display text element */
.status-bar-item.lofi-timer-display {
	/* Inherit font/color from status bar */
	font-weight: bold; /* Make the time display prominent */
	margin-left: 15px; /* Add space to the left to separate from audio controls */
	padding: 0 8px; /* Add padding */
	/* Optional: Add a border or background */
	/* border: 1px solid var(--background-modifier-border); */
	/* border-radius: var(--button-border-radius); */
	/* background-color: var(--background-secondary); */
}

/* Style for the timer control buttons */
/* Re-uses .lofi-control-button from audio controls, adds specific styles */
.status-bar-item.lofi-timer-control-button {
	/* Any styles specific to timer buttons if they differ from audio controls */
	/* e.g., different color */
	/* color: var(--interactive-accent); */
}

/* Specific styles for Play/Pause timer button */
/* .status-bar-item.lofi-timer-play-pause-button { ... } */

/* Specific styles for Reset timer button */
/* .status-bar-item.lofi-timer-reset-button { ... } */

/* Ensure default status bar items still look normal */
/* .status-bar-item:not(.lofi-control-button):not(.lofi-timer-display) { ... } */

/* styles.css (add these below other styles) */

/* --- Styles for Status Bar Playback Controls (Audio) --- */

/* Style for each individual status bar item used as a control button */
.status-bar-item.lofi-control-button {
	cursor: pointer;
	padding: 0 8px;
	border-radius: 4px;
	transition: background-color 0.1s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.status-bar-item.lofi-control-button:hover {
	background-color: var(--background-modifier-hover);
}

/* Specific styles if needed */
/* .status-bar-item.lofi-prev-button { ... } */
/* .status-bar-item.lofi-play-pause-button { ... } */
/* .status-bar-item.lofi-next-button { ... } */
/* .status-bar-item.lofi-timer-play-pause-button { ... } */
/* .status-bar-item.lofi-timer-reset-button { ... } */

/* Style for the main status bar text item (Audio Status) */
/* .status-bar-item:not(.lofi-control-button):not(.lofi-timer-display) { ... } */

/* --- Styles for Timer Status Bar Items --- */

/* Style for the timer display text element */
.status-bar-item.lofi-timer-display {
	font-weight: bold;
	margin-left: 15px;
	padding: 0 8px;
	display: flex;
	align-items: center;
}

/* Styles for Animation Canvas */
.lofi-animation-canvas {
	/* Fixed overlay for background animation */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0; /* Or 1, below most Obsidian UI elements */
	pointer-events: none; /* Crucial: allows clicks/interaction with UI elements behind the canvas */
}