74b86a7033
And include in stylesheets that have been updated. Have to make sure not to include this mixin in the global scope in stylesheets that are themselves imported elsewhere (i.e., filename begins with an underscore).
105 lines
1.6 KiB
SCSS
105 lines
1.6 KiB
SCSS
#post-upgrade-banner, #retracted-items-banner, #sync-reminder-banner {
|
|
@include macOS-normalize-controls;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
position: relative;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
label[is="text-link"], .link {
|
|
color: inherit;
|
|
border: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
#post-upgrade-container {
|
|
background: var(--material-background);
|
|
}
|
|
|
|
#post-upgrade-banner {
|
|
background: var(--accent-blue30);
|
|
color: var(--fill-primary);
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
|
|
.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-new-features-link {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#post-upgrade-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-inline-start: auto;
|
|
}
|
|
}
|
|
|
|
#retracted-items-banner, #sync-reminder-banner {
|
|
line-height: 2.2em;
|
|
font-size: 13.5px;
|
|
padding: 0 2em;
|
|
font-weight: 600;
|
|
|
|
.message {
|
|
margin-inline-end: .8em;
|
|
}
|
|
|
|
.spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
.close-link {
|
|
text-decoration: none;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: -2px;
|
|
inset-inline-end: 9px;
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
|
|
#retracted-items-banner {
|
|
background: #d93425;
|
|
color: white;
|
|
|
|
label[is="text-link"] {
|
|
margin-inline-start: 0.3em;
|
|
|
|
&:active {
|
|
color: #f9e8e2;
|
|
}
|
|
}
|
|
}
|
|
|
|
#sync-reminder-banner {
|
|
background: rgb(255, 234, 80);
|
|
border-bottom: #a9a9a9 .5px solid;
|
|
color: black;
|
|
|
|
.link {
|
|
padding-inline: 0.5em;
|
|
|
|
&:active {
|
|
color: #4b4b4b;
|
|
}
|
|
}
|
|
}
|