signoz/frontend/src/container/LogDetailedView/TableView.styles.scss

.attribute-table-container {
	.ant-table {
		background: var(--bg-ink-400);

		.ant-table-row:hover {
			.ant-table-cell {
				.value-field {
					.action-btn {
						display: flex;
						position: absolute;
						top: 50%;
						right: 16px;
						transform: translateY(-50%);
						gap: 4px;
					}
				}
			}
		}

		.ant-table-cell {
			border: 1px solid var(--bg-slate-500);
		}

		.attribute-name {
			.ant-btn {
				&:hover {
					background-color: none !important;
				}
			}
		}

		.attribute-pin {
			cursor: pointer;

			padding: 0;
			vertical-align: middle;
			text-align: center;

			.log-attribute-pin {
				padding: 8px;

				display: flex;
				justify-content: center;
				align-items: center;

				.pin-attribute-icon {
					border: none;

					&.pinned svg {
						fill: var(--bg-robin-500);
					}
				}
			}
		}

		.value-field-container {
			background: rgba(22, 25, 34, 0.4);

			.value-field {
				font-family: 'Geist Mono';

				position: relative;
			}

			.action-btn {
				display: none;
				width: max-content;
				position: absolute;
				padding: 0 16px;
				right: 0;

				.filter-btn {
					display: flex;
					align-items: center;
					border: none;
					box-shadow: none;
					border-radius: 2px;
					background: var(--bg-slate-400);
					padding: 2px 3px;
					gap: 3px;
					height: 18px;
					width: 20px;
				}
			}
		}
	}
}

.lightMode {
	.attribute-table-container {
		.ant-table {
			background: var(--bg-vanilla-100);
		}

		.ant-table-cell {
			border: 1px solid var(--bg-vanilla-200);
		}

		.value-field-container {
			background: var(--bg-vanilla-300);

			&.attribute-pin {
				background: var(--bg-vanilla-100);
			}

			.action-btn {
				.filter-btn {
					background: var(--bg-vanilla-300);
				}
			}
		}
	}
}