gustjose_obsidian-syncthing-manager/styles.css

/* --- STATUS COLORS (USADO NO ÍCONE E TEXTO) --- */
.st-color-success {
	color: var(--text-success);
}
.st-color-warning {
	color: var(--text-warning);
}
.st-color-error {
	color: var(--text-error);
}
.st-color-muted {
	color: var(--text-muted);
}

/* --- ÍCONE SVG --- */
.st-icon-svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Para a barra de status (Desktop) - Força tamanho pequeno */
.status-bar-item-icon .st-icon-svg {
	width: 20px;
	height: 20px;
}

/* --- INPUTS & TEXTAREAS --- */
.st-input-full-width {
	width: 100%;
}

.st-textarea-code {
	width: 100%;
	height: 150px;
	font-family: var(--font-monospace);
}

/* --- MODAIS --- */
.st-modal-wide {
	width: 80vw;
	max-width: 1000px;
}

.st-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
}

/* --- DETAILS / SUMMARY (.stignore) --- */
.st-details-box {
	border: 1px solid var(--background-modifier-border);
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 10px;
	margin-top: 15px;
}

.setting-item {
	margin-bottom: 1rem;
}

.setting-item-description {
	margin-bottom: 20px;
}

.st-summary-title {
	cursor: pointer;
	font-weight: bold;
	margin-bottom: 10px;
	margin-top: 0;
	outline: none;
}

/* --- VIEW LATERAL --- */
.syncthing-view-container {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Alerta de Conflito */
.st-conflict-alert {
	background-color: var(--background-modifier-error);
	color: var(--text-on-accent);
	padding: 12px;
	border-radius: 6px;
	margin-bottom: 20px;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: opacity 0.2s ease;
}
.st-conflict-alert:hover {
	opacity: 0.9;
}

.st-conflict-subtext {
	font-size: 0.8em;
	font-weight: normal;
	margin-top: 4px;
	opacity: 0.9;
}

/* Status Box */
.st-status-box {
	background-color: #363636;
	border: 1px solid var(--background-modifier-border);
	border-radius: 10px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.st-big-icon svg {
	width: 48px;
	height: 48px;
}
.st-status-text {
	font-size: 1.2em;
	font-weight: bold;
}

/* Info Table */
.st-info-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.st-info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--background-modifier-border);
}
.st-info-left {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-muted);
}
.st-info-icon svg {
	width: 16px;
	height: 16px;
}
.st-info-value {
	font-weight: bold;
	color: var(--text-normal);
	max-width: 150px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Botões */
.st-btn-container {
	display: flex;
	gap: 10px;
	margin-top: 15px;
	width: 100%;
}

.st-btn-container button {
	height: 40px;
	font-weight: 700;
	margin-top: 0;
}

.st-sync-button {
	width: 100%;
}

.st-pause-button {
	flex: 0 0 50px;
}

/* --- MODAL DE CONFLITOS --- */
.conflict-item-box {
	border: 1px solid var(--background-modifier-border);
	padding: 15px;
	margin-bottom: 10px;
	border-radius: 8px;
	background-color: var(--background-primary);
}
.st-conflict-title {
	margin-bottom: 5px;
}
.conflict-meta {
	font-size: 0.85em;
	color: var(--text-muted);
	margin-top: 4px;
}
.conflict-meta-path {
	font-size: 0.8em;
	color: var(--text-faint);
	margin-bottom: 10px;
	font-family: var(--font-monospace);
}
.conflict-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	border-top: 1px solid var(--background-modifier-border);
	padding-top: 10px;
}
.st-flex-grow {
	flex-grow: 1;
}

/* Diff View */
.st-diff-container {
	display: flex;
	gap: 10px;
	margin-top: 15px;
	margin-bottom: 15px;
	border-top: 1px solid var(--background-modifier-border);
	padding-top: 10px;
}
.st-diff-box {
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 50%;
}
.st-diff-header {
	font-weight: bold;
	margin-bottom: 5px;
	color: var(--text-muted);
	font-size: 0.8em;
	text-transform: uppercase;
}
.st-diff-content {
	background-color: var(--background-primary-alt);
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
	padding: 10px;
	height: 200px;
	overflow-y: auto;
	font-family: var(--font-monospace);
	font-size: 0.8em;
	white-space: pre-wrap;
	user-select: text;
}
.st-diff-original {
	border-left: 3px solid var(--text-success);
}
.st-diff-conflict {
	border-left: 3px solid var(--text-warning);
}

.st-history-container {
	max-height: 50vh;
	overflow-y: auto;
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
	padding: 5px;
}

.st-history-title {
	margin: 0.5rem 0rem !important;
}

.st-history-item {
	display: flex;
	align-items: center;
	padding: 6px;
	font-size: 0.85em;
	border-bottom: 1px solid var(--background-modifier-border-soft);
}

.st-history-left {
	display: flex;
	gap: 10px;
	align-items: center;
	width: 100%;
}

.st-history-filename {
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}

.st-history-time {
	font-size: 0.75em;
	color: var(--text-muted);
}

/* Container do item do histórico */
.st-history-item {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px solid var(--background-modifier-border);
	font-size: 0.9em;
}

/* Lado esquerdo (ícones + texto) */
.st-history-left {
	display: flex;
	align-items: center;
	overflow: hidden; /* Evita que nomes longos quebrem o layout */
}

.st-history-container .st-history-item:last-child {
	border-bottom: none;
}

/* --- NOVO: Estilos das Setas --- */
.st-history-arrow {
	margin: 0px 6px;
	display: flex;
	align-items: center;
	opacity: 0.8;
}

.st-history-arrow svg {
	height: 24px;
	width: 24px;
}

/* Seta de Entrada (Recebido) - Verde/Sucesso */
.st-direction-in {
	color: var(--text-success);
}

/* Seta de Saída (Enviado) - Roxo/Accent ou Laranja */
.st-direction-out {
	/* Usei text-accent para indicar ação do usuário, ou use --text-warning para laranja */
	color: var(--text-accent);
}
/* ------------------------------- */

.st-history-icon {
	margin-right: 8px;
	display: flex;
	align-items: center;
}

.st-history-details {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.st-history-filename {
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--text-normal);
}

.st-history-time {
	font-size: 0.8em;
	color: var(--text-muted);
}

/* Alinhamento interno do botão */
.st-sync-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px; /* Espaço entre ícone e texto */
}

/* Ajuste do ícone para não ficar desalinhado verticalmente */
.st-btn-icon-span {
	display: flex;
	align-items: center;
}

/* Opcional: Animação de rotação quando clica */
@keyframes st-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.st-spin-anim {
	animation: st-spin 1s linear infinite;
}

/* --- Ícone de status na aba do arquivo --- */

.st-tab-sync-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 6px;
	color: var(--text-muted);
	vertical-align: middle;
	transition:
		color 0.3s ease,
		opacity 0.3s ease; /* Transição suave de cor */
}

/* Estado: Sincronizando (Pendente) -> Laranja */
.st-sync-pending {
	/* color: var(--text-warning) !important; */
	opacity: 1;
	width: 16px;
	height: 16px;
}

/* Estado: Sucesso (Sincronizado) -> Verde */
.st-sync-success {
	color: var(--text-success) !important;
	opacity: 1;
}

/* --- Explorer Quick Action Button --- */

.st-explorer-btn {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
	color: var(--text-muted);
	padding-left: 10px;
	padding-right: 2px;
	z-index: 5;
	cursor: pointer;
}

/* Mostra o botão ao passar o mouse no item do arquivo */
.nav-file-title:hover .st-explorer-btn {
	opacity: 1;
}

/* Estilo do botão ao passar o mouse nele */
.st-explorer-btn:hover {
	color: var(--text-normal);
}

.st-explorer-btn svg {
	width: 14px;
	height: 14px;
}

/* Estado: Carregando (Girando) */
.st-explorer-btn.st-loading {
	opacity: 1 !important;
	color: var(--text-accent);
	pointer-events: none;
}

.st-explorer-btn.st-loading svg {
	animation: st-spin 1s linear infinite;
}

/* Estado: Sucesso (Verde) */
.st-explorer-btn.st-success {
	color: var(--text-success) !important;
	opacity: 1 !important;
}

/* --- Badges de Dispositivos --- */
.st-badges-container {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: flex-end; /* Alinha badges à direita */
	max-width: 60%; /* Evita ocupar toda a linha se o label for longo */
}

.st-device-badge {
	font-size: 0.75em;
	background-color: var(--background-modifier-border);
	color: var(--text-normal);
	padding: 2px 6px;
	border-radius: 4px;
	border: 1px solid var(--background-modifier-border-hover);
	white-space: nowrap;
}