Rocket.Chat/app/apps/assets/stylesheets/apps.css

.rc-apps-section,
.rc-apps-marketplace {
	display: flex;

	overflow: auto;
	flex-direction: column;

	height: 100vh;

	padding: 1.25rem 2rem;

	font-size: 14px;

	&.page-settings .rc-apps-container {
		a {
			color: var(--rc-color-button-primary);

			font-weight: 500;
		}
	}

	h1 {
		margin-bottom: 0;

		letter-spacing: 0;
		text-transform: initial;

		color: var(--color-dark-medium);

		font-size: 22px;
		font-weight: normal;
		line-height: 28px;
	}

	h2 {
		margin-top: 10px;
		margin-bottom: 0;

		letter-spacing: 0;
		text-transform: initial;

		color: var(--color-dark);

		font-size: 16px;
		font-weight: 500;
		line-height: 24px;
	}

	h3 {
		margin-bottom: 0;

		text-align: left;
		letter-spacing: 0;
		text-transform: initial;

		color: var(--color-gray);

		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
	}

	.rc-apps-container {
		margin-top: 0;
		padding-bottom: 15px;
	}

	.rc-apps-container__header {
		padding-top: 10px;

		border-bottom: 1.5px solid var(--color-gray-lightest);
	}

	/*
	.js-install {
		margin-top: 6px;
	} */

	.content {
		/* display: block !important; */
		padding: 0 !important;

		> .rc-apps-container {
			display: block;
			overflow-y: scroll;

			padding: 0 !important;
		}

		> .rc-apps-details {
			display: block;
		}
	}

	.rc-apps-category {
		margin-right: 8px;
		padding: 8px;

		text-align: left;
		letter-spacing: -0.17px;
		text-transform: uppercase;

		color: #9da2a9;
		border-radius: 2px;
		background: var(--color-gray-lightest);

		font-size: 12px;
		font-weight: 500;
	}

	.app-enable-loading .loading-animation {
		margin-left: 50px;
		justify-content: left;
	}

	.apps-error {
		display: flex;
		flex-direction: column;

		width: 100%;
		height: calc(100% - 60px);
		padding: 25px 40px;

		font-size: 45px;
		align-items: center;
		justify-content: center;
	}

	.rc-table-avatar {
		width: 40px;
		height: 40px;
		margin: 0 7px;
	}

	.rc-table-info {
		height: 40px;
		margin: 0 7px;
	}

	.rc-app-price {
		position: relative;
		top: -3px;
	}

	.rc-table-td--medium {
		width: 300px;
	}

	.rc-table td {
		padding: 0.5rem 0;

		padding-right: 10px;
	}

	&__wrap-actions {
		& > .loading {
			display: none;
		}

		&.loading {
			& > .loading {
				display: block;

				font-size: 11px;
				font-weight: 600;

				& > .rc-icon--loading {
					animation: spin 1s linear infinite;
				}
			}

			& > .apps-installer {
				display: none;
			}
		}
	}

	.arrow-up {
		transform: rotate(180deg);
	}

	&.page-settings .content .rocket-form .section {
		padding: 0 2.5em;

		border-bottom: none;

		&:hover {
			background-color: var(--rc-color-primary-lightest);
		}
	}

	.rc-table-content {
		display: flex;
		overflow-x: auto;
		flex-direction: column;
		flex: 1 1 100%;

		height: 100vh;

		margin-top: 20px;

		& .rc-form-filters {
			margin: 8px 0;
		}

		& .js-sort {
			cursor: pointer;

			&.is-sorting .table-fake-th .rc-icon {
				opacity: 1;
			}
		}

		& .table-fake-th {
			&:hover .rc-icon {
				opacity: 1;
			}

			& .rc-icon {
				transition: opacity 0.3s;

				opacity: 0;

				font-size: 1rem;
			}
		}

		& tbody .rc-table-tr .rc-apps-section__app-menu-trigger {
			visibility: hidden;
		}

		& tbody .rc-table-tr:hover .rc-apps-section__app-menu-trigger {
			visibility: visible;
		}

		& tbody .rc-table-tr:not(.table-no-click):not(.table-no-pointer):hover {
			background-color: #f7f8fa;
		}

		& .rc-table-info {
			margin: 0;
			justify-content: center;

			& .rc-table-title,
			& .rc-table-subtitle {
				font-size: 0.875rem;
				line-height: 1.25rem;
			}

			& .rc-apps-categories {
				display: flex;

				height: 1.25rem;
				margin: 0 -0.25rem;
				align-items: center;
				flex-wrap: wrap;

				& .rc-apps-category {
					overflow: hidden;
					flex: 0 0 auto;

					box-sizing: border-box;
					margin: 0.125rem 0.25rem;
					padding: 0.0625rem 0.25rem;

					text-transform: none;
					text-overflow: ellipsis;

					color: var(--color-gray);
					background-color: var(--color-gray-lightest);

					font-size: 0.625rem;
					font-weight: 500;
					line-height: 0.875rem;
				}
			}
		}
	}

	@media (width <= 700px) {
		.rc-table-content {
			& th:not(:first-child),
			& td:not(:first-child) {
				display: none;
			}
		}
	}

	&__app-menu-trigger {

		position: relative;

		display: flex;
		flex: 0 0 auto;

		margin-left: auto;
		padding: 0;

		font-size: 0.875rem;
		line-height: 1.25rem;
		align-items: center;
		appearance: none;
		margin-inline-start: auto;

		&:active {
			transform: translateY(2px);

			opacity: 0.9;
		}

		&:active::before {
			top: -2px;
		}

		&::before {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;

			content: "";
			cursor: pointer;
		}

		& .rc-icon {
			margin: 0;
		}
	}

	&__spinning-icon {
		animation: spin 1s linear infinite;
	}

	&__button--working {
		opacity: 0.6;
	}

	&__status {
		width: 100%;

		color: var(--rc-color-primary-light);

		line-height: 40px;

		&--warning {
			color: var(--rc-color-alert);
		}

		&--failed {
			color: var(--rc-color-error);
		}
	}

	&__status-column {
		width: 150px;
	}

	tr .rc-apps-section__table-button--hideable {
		visibility: hidden;
	}

	tr .rc-apps-section__table-button--working,
	tr:hover .rc-apps-section__table-button--hideable {
		visibility: visible;
	}

	.rc-apps-section__table-button--working {
		opacity: 0.6;
	}
}

@keyframes play90 {
	0% {
		right: -798px;
	}

	100% {
		right: 2px;
	}
}