62564c623f
The "destructive-action" style class will already make the button to have a red background.
125 lines
2.9 KiB
CSS
125 lines
2.9 KiB
CSS
/* Main page */
|
|
.cutout-button {
|
|
background-color: @window_bg_color;
|
|
border-radius: 9999px;
|
|
padding: 2px;
|
|
}
|
|
|
|
|
|
/* Add enterprise login dialog */
|
|
image.emblem-default-symbolic {
|
|
color: @success_color;
|
|
}
|
|
|
|
image.dialog-warning-symbolic {
|
|
color: @error_color;
|
|
}
|
|
|
|
image.process-working-symbolic {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
|
|
/* Add user dialog */
|
|
levelbar .strength-weak {
|
|
background-color: #cc0000;
|
|
border-color: #cc0000;
|
|
}
|
|
|
|
levelbar .strength-low {
|
|
background-color: #f5ce00;
|
|
border-color: #f5ce00;
|
|
}
|
|
|
|
levelbar .strength-medium,
|
|
levelbar .strength-good,
|
|
levelbar .strength-high {
|
|
background-color: #73d216;
|
|
border-color: #73d216;
|
|
}
|
|
|
|
|
|
/* Fingerprint dialog */
|
|
.fingerprint-icon {
|
|
padding: 3px;
|
|
}
|
|
|
|
.fingerprint-icon > button,
|
|
.fingerprint-icon > image {
|
|
padding: 15px;
|
|
min-width: 32px;
|
|
min-height: 32px;
|
|
border-radius: 64px;
|
|
border: 1px solid @borders;
|
|
background-color: @theme_base_color;
|
|
color: @insensitive_fg_color;
|
|
}
|
|
|
|
.fingerprint-print-add image:not(:disabled):not(:backdrop),
|
|
.fingerprint-print-add button:not(:disabled):not(:backdrop) {
|
|
color: @theme_fg_color;
|
|
}
|
|
|
|
.fingerprint-icon.enroll-status image {
|
|
outline-color: @theme_selected_bg_color;
|
|
outline-offset: 0px;
|
|
outline-width: 4px;
|
|
}
|
|
|
|
.fingerprint-icon.enroll-status image:backdrop {
|
|
outline-color: @theme_unfocused_selected_bg_color;
|
|
}
|
|
|
|
.fingerprint-icon.enroll-status {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.fingerprint-icon.enroll-status.completed image {
|
|
outline-color: @success_color;
|
|
}
|
|
|
|
.fingerprint-icon.enroll-status.warning image {
|
|
outline-color: @warning_color;
|
|
}
|
|
|
|
.fingerprint-icon.enroll-status.error image {
|
|
outline-color: @error_color;
|
|
/* Given we don't have an error image, we can just recolorize the warning one */
|
|
-gtk-icon-palette: warning @error_color;
|
|
}
|
|
|
|
.fingerprint-icon.enroll-status.success image:not(:backdrop) {
|
|
color: @theme_selected_bg_color;
|
|
}
|
|
|
|
.fingerprint-icon.enroll-status.warning image:not(:backdrop),
|
|
.fingerprint-icon.enroll-status.warning label:not(:backdrop) {
|
|
color: @warning_color;
|
|
}
|
|
|
|
.fingerprint-icon.enroll-status.error image:not(:backdrop),
|
|
.fingerprint-icon.enroll-status.error label:not(:backdrop) {
|
|
color: @error_color;
|
|
}
|
|
|
|
@keyframes wiggle {
|
|
/* Unfortunately we can't use translation or xalign, so here's the workaround */
|
|
0% { padding-left: 0; padding-right: 0; }
|
|
10% { padding-left: 0; padding-right: 2px; }
|
|
20% { padding-left: 4px; padding-right: 0; }
|
|
30% { padding-left: 0; padding-right: 8px; }
|
|
40% { padding-left: 8px; padding-right: 0; }
|
|
50% { padding-left: 0; padding-right: 8px; }
|
|
60% { padding-left: 8px; padding-right: 0; }
|
|
70% { padding-left: 0; padding-right: 8px; }
|
|
80% { padding-left: 4px; padding-right: 0; }
|
|
90% { padding-left: 0; padding-right: 2px; }
|
|
100% { padding-left: 0; padding-right: 0; }
|
|
}
|
|
|
|
.fingerprint-icon.enroll-status.retry label {
|
|
animation-name: wiggle;
|
|
animation-duration: 850ms;
|
|
animation-timing-function: ease-in;
|
|
animation-iteration-count: 1;
|
|
}
|