zotero/scss/components/_banners.scss
2024-10-05 02:01:48 -04:00

156 lines
2.4 KiB
SCSS

.banner-container > .banner {
@include macOS-normalize-controls;;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
white-space: nowrap;
overflow: hidden;
label[is="text-link"], .link {
color: inherit;
border: none;
margin: 0;
padding-inline: 0.5em;
}
label[is="text-link"].close-link {
text-decoration: none;
cursor: pointer;
font-size: 22px;
line-height: 26px;
margin-inline-end: -0.5em;
}
.message {
margin-inline-end: .8em;
}
.spacer {
flex: 1;
}
.link {
padding-inline: 0.5em;
&:active {
color: #4b4b4b;
}
}
}
#post-upgrade-container {
background: var(--material-background);
}
#post-upgrade-banner {
background: var(--accent-blue30);
color: var(--fill-primary);
flex-wrap: wrap;
gap: 8px;
padding: 6px 8px;
.link {
color: var(--accent-blue);
text-decoration: underline;
cursor: pointer;
}
#post-upgrade-centered {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
flex: 1 auto;
#post-upgrade-density {
@media (-moz-platform: windows) {
radio {
height: 24px;
margin: 0;
}
}
}
}
#post-upgrade-new-features-link {
font-weight: bold;
}
#post-upgrade-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-inline-start: auto;
@media (-moz-platform: windows) {
button {
height: 24px;
margin: 0 !important;
}
}
}
}
#retracted-items-banner, #sync-reminder-banner, #architecture-warning-banner,
#mac-word-plugin-install-warning {
line-height: 2.2em;
font-size: 13.5px;
padding: 0 1em;
font-weight: 600;
}
#retracted-items-banner {
background: #d93425;
color: white;
label[is="text-link"] {
margin-inline-start: 0.3em;
&:active {
color: #f9e8e2;
}
}
}
#mac-word-plugin-install-warning {
background: var(--accent-blue30);
color: var(--fill-primary);
font-weight: normal;
border-bottom: #a9a9a9 .5px solid;
line-height: 2.5em;
}
#mac-word-plugin-install-remind-later {
margin-inline-end: .4em;
}
#sync-reminder-banner {
background: rgb(255, 234, 80);
border-bottom: #a9a9a9 .5px solid;
color: black;
}
#architecture-warning-container {
background-color: var(--accent-red);
color: white;
.message {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
a {
border: none;
color: inherit;
margin: 0;
padding: 0 .5em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}