Files
overleaf-cep/services/web/frontend/stylesheets/components/integrations-panel.scss
T
Rebeka Dekany 23fc3ff0fb Remove LESS stylesheets and dependencies (#27409)
* Remove components, core and modules LESS stylesheets

* Remove variables LESS stylesheets

* Remove app LESS stylesheets

* Remove github-sync, onboarding LESS stylesheets

* Remove main-light and IEEE LESS stylesheets

* Remove Less loader configuration

* Remove bootstrap-3 entrypoint

* Rename bootstrap-5 entrypoint to bootstrap

* Remove bootstrap-5 CSS folder and move stylesheets

* Update CSS variables

* Restore and update github-sync.scss path

* Fix try-premium.scss path and fix undefined mixin error

* Restore entrypoints

* Simplify buildCssPath to always use main-style.css

* Remove less from prettier formatting scripts

* Remove less from addHook extension

* Source format

* Remove nvd3 file reference from prettierignore (equivalent of nvd3.scss)

* Remove less and less-loader

* Add SCSS files to pirates require hook

GitOrigin-RevId: bd83c79f4d6ef7305d75993959a4dc5e7714ef9c
2025-08-06 08:05:38 +00:00

85 lines
2.4 KiB
SCSS

:root {
--integrations-panel-bg: var(--bg-dark-primary);
--integrations-panel-color: var(--content-primary-dark);
--integrations-panel-description-color: var(--content-secondary-dark);
--integrations-panel-card-border: var(--border-divider-dark);
--integrations-panel-card-button-hover-background: var(--bg-dark-secondary);
--integrations-panel-card-button-background: var(--bg-dark-primary);
--integrations-panel-badge-color: var(--content-primary);
--integrations-panel-badge-background: var(--bg-light-tertiary);
}
@include theme('light') {
--integrations-panel-bg: var(--white);
--integrations-panel-color: var(--content-primary);
--integrations-panel-description-color: var(--content-secondary);
--integrations-panel-card-border: var(--border-divider);
--integrations-panel-card-button-hover-background: var(--bg-light-secondary);
--integrations-panel-card-button-background: var(--white);
--integrations-panel-badge-color: var(--content-primary);
--integrations-panel-badge-background: var(--bg-light-tertiary);
}
.integrations-panel {
background-color: var(--integrations-panel-bg);
height: 100%;
}
.integrations-panel-card-button {
all: unset;
background-color: var(--integrations-panel-card-button-background);
width: 100%;
&:hover {
background-color: var(
--integrations-panel-card-button-hover-background
) !important;
}
}
.integrations-panel-card-contents {
display: flex;
margin: 0 var(--spacing-04);
padding: var(--spacing-04) 0;
gap: var(--spacing-04);
border-bottom: 1px solid var(--integrations-panel-card-border);
}
.integrations-panel-card-header {
display: flex;
justify-content: space-between;
align-items: center;
.material-symbols {
background: linear-gradient(
245.63deg,
#214475 0%,
#254c84 28.54%,
#6597e0 96.69%
);
color: transparent;
background-clip: text;
}
}
.integrations-panel-card-inner {
flex: 1;
}
.integrations-panel-card-premium-badge.badge {
color: var(--integrations-panel-badge-color);
background-color: var(--integrations-panel-badge-background) !important;
font-weight: 600;
}
.integrations-panel-card-title {
font-size: var(--font-size-02);
color: var(--integrations-panel-color);
}
.integrations-panel-card-description {
font-size: var(--font-size-01);
color: var(--integrations-panel-description-color);
margin-bottom: 0;
}