overleaf/services/web/frontend/stylesheets/app/account-settings.less
Jessica Lawshe d65bba566c Merge pull request #17315 from overleaf/ab-accounts-settings-sso-status
[web] Show Group SSO linking status on the account settings page

GitOrigin-RevId: ae45e1bd7a90a672c5fb023e7f3e603a00e364e5
2024-03-12 09:03:43 +00:00

305 lines
5.5 KiB
Text

.account-settings {
.alert {
margin-bottom: 0;
}
h3 {
margin-top: 0;
}
}
#delete-account-modal {
.alert {
margin-top: 25px;
margin-bottom: 4px;
}
.confirmation-checkbox-wrapper {
padding-top: 8px;
input {
margin-right: 6px;
}
}
}
.affiliations-table {
table-layout: fixed;
}
.affiliations-table-cell {
padding: 0.5rem;
overflow-wrap: break-word;
}
.affiliations-table-cell-tabbed {
margin: @margin-sm 0 0 @margin-md;
padding-left: @margin-sm;
border-left: 2px solid @table-border-color;
}
.affiliations-table-row--highlighted {
background-color: tint(@content-alt-bg-color, 6%);
}
.affiliations-table-email {
width: 40%;
}
.affiliations-table-institution {
width: 40%;
}
.affiliations-table-inline-actions {
padding: 0 !important;
text-align: right;
word-wrap: break-word;
button {
margin: @table-cell-padding 0;
}
}
.affiliations-table-inline-action {
text-transform: capitalize;
}
.affiliations-table-inline-action-disabled-wrapper {
display: inline-block;
}
.affiliations-table-highlighted-row {
background-color: tint(@content-alt-bg-color, 6%);
}
.affiliations-table-error-row {
background-color: @alert-danger-bg;
color: @alert-danger-text;
.btn {
margin-top: @table-cell-padding;
.button-variant(
@btn-danger-color; darken(@btn-danger-bg, 8%) ; @btn-danger-border
);
}
.small {
color: @alert-danger-text;
}
}
.affiliations-table-info-row {
background-color: @alert-info-bg;
color: @alert-info-text;
.small {
color: @alert-info-text;
}
}
.affiliations-table-warning-row {
background-color: @alert-warning-bg;
color: @alert-warning-text;
.small {
color: @alert-warning-text;
}
}
tbody > tr.affiliations-table-saml-row > td:not(.with-border) {
border: 0;
}
tbody > tr.affiliations-table-info-row > td {
border: 0;
}
tbody > tr.affiliations-table-warning-row > td {
border: 0;
}
.affiliations-form-group {
margin-top: @table-cell-padding;
&:first-child {
margin-top: 0;
}
}
.affiliation-change-container,
.affiliation-change-actions {
margin-top: @table-cell-padding;
}
.affiliations-table-label {
padding-top: 4px;
}
.btn-link-accounts {
margin-bottom: (@line-height-computed / 2) - @table-cell-padding;
}
.settings-widget-status-icon,
.dropbox-sync-icon {
position: relative;
font-size: 1.3em;
line-height: 1.3em;
vertical-align: top;
&.status-error,
&.dropbox-sync-icon-error {
color: @alert-danger-bg;
}
&.status-success,
&.dropbox-sync-icon-success {
color: @alert-success-bg;
}
&.status-pending,
&.dropbox-sync-icon-updating {
color: @alert-info-bg;
&::after {
content: '\f021';
position: absolute;
top: 0;
left: 50%;
margin-left: -20%;
font-size: 60%;
color: #fff;
animation: fa-spin 2s infinite linear;
}
}
}
.settings-widgets-container {
border: 1px solid @gray-lighter;
hr {
margin: 0 10px;
}
}
.settings-widget-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
> div {
display: flex;
flex-direction: column;
padding-right: 20px;
&:last-child {
padding-right: 0px;
}
}
img {
width: 40px;
height: 40px;
}
.description-container {
flex-grow: 1;
}
.title-row {
display: flex;
align-items: center;
margin-bottom: 10px;
> h4 {
margin: 0;
margin-right: 10px;
}
}
p {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
}
.settings-reconfirm-info {
display: flex;
justify-content: space-between;
margin: 0px auto @margin-sm auto !important;
padding: @padding-md;
&:not(.alert-info) {
background-color: @ol-blue-gray-0;
.fa-warning {
color: @brand-warning;
}
}
> *:not(:last-child) {
margin-right: @margin-md;
}
}
.setting-reconfirm-info-right {
white-space: nowrap;
}
// Prevents icon from large account linking sections, such as the git bridge,
// from rendering in the center of the widget, anchoring it to the top
.linking-icon-fixed-position {
align-self: start;
padding-top: 10px;
}
// overrides the default `Col` padding, as the inner `affiliations-table-cell` has its own padding, and
// the content length of the git-bridge token table is pretty much fixed (tokens and dates)
.linking-git-bridge-table-cell {
padding-right: 0;
}
.linking-git-bridge-revoke-button {
padding: 2px 4px;
}
.enrollment-alert {
width: 100%;
border-radius: 4px;
padding: 12px;
background-color: @blue-10;
border: 1px solid @blue-20;
display: flex;
flex-direction: row;
.icon {
flex: 1 1 auto;
padding: 0 16px 0 4px;
}
a {
text-decoration: underline;
}
}
.security-row {
.line-header > b {
color: @ol-blue-gray-6;
}
line-height: 24px;
color: @ol-blue-gray-4;
display: flex;
flex-direction: row;
padding: 6px 0;
.icon {
color: @ol-blue-gray-6;
display: flex;
flex: 1 1 7%;
padding: 0 16px;
margin-top: 16px;
}
.text {
flex: 1 1 93%;
display: flex;
flex-direction: column;
margin-right: 16px;
}
.button-column {
display: flex;
align-items: center;
}
.status-label {
font-size: @font-size-small;
border-radius: 4px;
padding: 2px 4px;
margin-top: 4px;
margin-left: 8px;
flex-shrink: 0;
&.status-label-configured {
background-color: @ol-green;
color: @neutral-10;
}
&.status-label-ready {
background-color: @neutral-20;
color: @neutral-90;
}
}
}