471 lines
10 KiB
SCSS
471 lines
10 KiB
SCSS
// Modal dialogs
|
|
|
|
$base_padding: 6px;
|
|
$base_margin: 4px;
|
|
$dialog_radius: 18px;
|
|
$osd_radius: 18px;
|
|
$radius: 6px;
|
|
|
|
// Mixin to convert provided font size in pt to em units
|
|
@mixin fontsize($size, $base: 16px, $unit: pt) {
|
|
// if pt, convert into unitless value with the assumption: 1pt = 1.091px
|
|
$adjusted_size: if($unit == pt, $size * 1.091, $size) * 1000;
|
|
$rounded_size: round($adjusted_size / $base) / 1000;
|
|
font-size: $rounded_size * 1em;
|
|
}
|
|
|
|
// Button drawing function
|
|
@mixin styled_button($type, $tc:$fg_color, $c:$bg_color, $style: null) {
|
|
//
|
|
// $type: button type, possible values:
|
|
// - normal, focus, hover, active, checked, insensitive, default, undecorated
|
|
// $c: button bg color, derived from bg_color
|
|
// $tc: button text color, derived from fg_color
|
|
// $style: button style, possible values: flat, default
|
|
//
|
|
|
|
// mix input colors to get button background color
|
|
$button_bg_color: $button_bg;
|
|
|
|
// background color mix override for flat style; the button bg color is the background color input
|
|
@if $style == 'flat' { $button_bg_color: $c;}
|
|
// background color mix override for default button style
|
|
@if $style == 'default' { $button_bg_color: $c;}
|
|
|
|
// button base state background colors
|
|
$hover_button_bg_color: if($variant =='light', darken($button_bg_color, 10%), lighten($button_bg_color, 10%));
|
|
$active_button_bg_color: if($variant =='light', lighten($hover_button_bg_color, 5%), darken($hover_button_bg_color, 5%));
|
|
$checked_button_bg_color: if($variant =='light', lighten($hover_button_bg_color, 5%), darken($hover_button_bg_color, 5%));
|
|
$insensitive_button_bg_color: if($variant =='light', lighten($button_bg_color, 3%), darken($button_bg_color, 3%));
|
|
$focus_button_bg_border_color: if($variant =='light', darken($button_bg_color, 30%), lighten($button_bg_color, 15%));
|
|
|
|
border: 1px solid $button_bg_color;
|
|
|
|
// flat style overrides
|
|
@if $style == 'flat' {
|
|
$insensitive_button_bg_color: $button_bg_color;
|
|
}
|
|
|
|
// normal style
|
|
@if $type == 'normal' {
|
|
color: $tc;
|
|
background-color: $button_bg_color;
|
|
}
|
|
|
|
@if $type == 'focus' {
|
|
color: $tc;
|
|
background-color: $button_bg_color;
|
|
border: 1px solid $focus_button_bg_border_color;
|
|
}
|
|
|
|
// hover button
|
|
@else if $type == 'hover' {
|
|
color: $tc;
|
|
background-color: $hover_button_bg_color;
|
|
}
|
|
|
|
// active button
|
|
@else if $type == 'active' {
|
|
color: $tc;
|
|
background-color: $active_button_bg_color;
|
|
}
|
|
|
|
// checked button
|
|
@else if $type == 'checked' {
|
|
color: $tc;
|
|
background-color: $checked_button_bg_color;
|
|
}
|
|
|
|
// insensitive button
|
|
@else if $type == 'insensitive' {
|
|
$insensitive_button_fg_color: transparentize($tc, .5);
|
|
color: $insensitive_button_fg_color;
|
|
background-color: $insensitive_button_bg_color;
|
|
}
|
|
|
|
// reset (unstyled button)
|
|
@else if $type == 'undecorated' {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
|
|
&:insensitive {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
%caption_heading {
|
|
font-weight: 700;
|
|
@include fontsize(9pt);
|
|
}
|
|
|
|
%caption {
|
|
font-weight: 400;
|
|
@include fontsize(9pt);
|
|
}
|
|
|
|
%title_2 {
|
|
font-weight: 800;
|
|
@include fontsize(15pt);
|
|
}
|
|
|
|
%title_4 {
|
|
font-weight: 700;
|
|
@include fontsize(13pt);
|
|
}
|
|
|
|
%heading {
|
|
font-weight: 700;
|
|
@include fontsize(11pt);
|
|
}
|
|
|
|
%flat_styled_button {
|
|
@include styled_button(normal, $style: flat);
|
|
&:focus { @include styled_button(focus, $style: flat); }
|
|
&:hover { @include styled_button(hover, $style: flat); }
|
|
&:insensitive { @include styled_button(insensitive, $style: flat); }
|
|
&:selected,
|
|
&:active { @include styled_button(active, $style: flat); }
|
|
&:checked { @include styled_button(checked, $style: flat); }
|
|
}
|
|
|
|
%dialog_button {
|
|
font-weight: bold;
|
|
padding: $base_padding * 2;
|
|
border-radius: $radius;
|
|
|
|
@include styled_button(normal);
|
|
&:focus { @include styled_button(focus); }
|
|
&:hover { @include styled_button(hover); }
|
|
&:active { @include styled_button(active); }
|
|
&:checked { @include styled_button(checked); }
|
|
&:insensitive { @include styled_button(insensitive); }
|
|
}
|
|
|
|
%dialog_button_default {
|
|
@extend %dialog_button;
|
|
|
|
@include styled_button(normal, $c: $selected_bg_color, $style: default);
|
|
&:focus { @include styled_button(focus, $c: $selected_bg_color, $style: default); }
|
|
&:hover { @include styled_button(hover, $c: $selected_bg_color, $style: default); }
|
|
&:active { @include styled_button(active, $c: $selected_bg_color, $style: default); }
|
|
&:checked { @include styled_button(checked, $c: $selected_bg_color, $style: default); }
|
|
&:insensitive {
|
|
border-color: $borders_color;
|
|
|
|
@include styled_button(insensitive);
|
|
}
|
|
}
|
|
|
|
%dialog_button_destructive {
|
|
@extend %dialog_button;
|
|
|
|
@include styled_button(normal, $c: $destructive_color, $style: default);
|
|
&:focus {
|
|
@include styled_button(focus, $c: $destructive_color, $style: default);
|
|
//border-color: darken($destructive_color, 15%);
|
|
}
|
|
&:hover { @include styled_button(hover, $c: $destructive_color, $style: default); }
|
|
&:active { @include styled_button(active, $c: $destructive_color, $style: default); }
|
|
&:checked { @include styled_button(checked, $c: $destructive_color, $style: default); }
|
|
&:insensitive {
|
|
border-color: $borders_color;
|
|
|
|
@include styled_button(insensitive);
|
|
}
|
|
}
|
|
|
|
.dialog {
|
|
background-color: $panel_bg;
|
|
border-radius: $dialog_radius;
|
|
border: 1px solid $borders_color;
|
|
padding: $base_padding * 3;
|
|
|
|
.dialog-content-box {
|
|
margin-top: $base_margin * 2;
|
|
margin-bottom: $base_margin * 4;
|
|
spacing: $base_margin * 8;
|
|
max-width: 28em;
|
|
}
|
|
|
|
.dialog-button {
|
|
@extend %dialog_button;
|
|
|
|
&:default { @extend %dialog_button_default; }
|
|
&:destructive-action { @extend %dialog_button_destructive; }
|
|
}
|
|
|
|
.confirm-dialog-title {
|
|
@extend %title_2;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
// Lists in dialogs
|
|
|
|
.dialog-list {
|
|
spacing: $base_padding * 3;
|
|
|
|
.dialog-list-title {
|
|
@extend %heading;
|
|
text-align: center;
|
|
}
|
|
|
|
.dialog-list-scrollview { max-height: 200px; }
|
|
.dialog-list-box {
|
|
spacing: 1em;
|
|
|
|
.dialog-list-item {
|
|
spacing: 1em;
|
|
|
|
.dialog-list-item-title { font-weight: bold; }
|
|
.dialog-list-item-description {
|
|
@extend %caption;
|
|
color: darken($fg_color, 5%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// End session dialog
|
|
|
|
.end-session-dialog {
|
|
min-width: 40em;
|
|
|
|
.dialog-content-box { spacing: 0; }
|
|
|
|
.dialog-list {
|
|
spacing: 0;
|
|
|
|
.dialog-list-title {
|
|
color: $warning_color;
|
|
background-color: tranparentize($warning_color, 0.9);
|
|
padding: $base_padding * 1.5;
|
|
border-radius: $osd_radius;
|
|
margin: $base_margin 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// message dialog
|
|
|
|
.message-dialog-content {
|
|
spacing: $base_padding * 3;
|
|
|
|
.message-dialog-title {
|
|
text-align: center;
|
|
@extend %title_2;
|
|
|
|
&.lightweight { @extend %title_4; }
|
|
}
|
|
|
|
.message-dialog-description { text-align: center; }
|
|
|
|
.message-dialog-caption {
|
|
@extend %caption;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
// run dialog
|
|
|
|
.run-dialog {
|
|
|
|
.dialog-content-box {
|
|
margin: $base_margin;
|
|
}
|
|
|
|
&-description {
|
|
@extend %caption;
|
|
|
|
text-align: center;
|
|
color: darken($fg_color, 20%);
|
|
|
|
&.error { color: $error_color; }
|
|
}
|
|
|
|
&-completion-box {
|
|
padding-top: $base_padding;
|
|
padding-left: $base_padding * 2;
|
|
}
|
|
|
|
&-entry {
|
|
@extend %entry;
|
|
|
|
width: 20em;
|
|
height: 1.2em;
|
|
}
|
|
}
|
|
|
|
// password or authentication dialog
|
|
|
|
.prompt-dialog {
|
|
width: 28em;
|
|
|
|
.dialog-content-box {
|
|
spacing: $base_margin * 4;
|
|
margin-bottom: $base_margin * 3;
|
|
}
|
|
|
|
&-password-entry {
|
|
@extend %entry;
|
|
width: 20em;
|
|
}
|
|
|
|
&-password-layout { spacing: $base_margin * 2;}
|
|
|
|
&-error-label,
|
|
&-info-label,
|
|
&-null-label {
|
|
text-align: center;
|
|
@extend %caption;
|
|
}
|
|
|
|
&-error-label { color: $error_color; }
|
|
}
|
|
|
|
// polkit dialog
|
|
|
|
.polkit-dialog {
|
|
|
|
&-user-layout {
|
|
text-align: center;
|
|
spacing: 2px;
|
|
}
|
|
|
|
&-user-combo {
|
|
@extend %flat_styled_button;
|
|
@extend %heading;
|
|
|
|
border-radius: $radius;
|
|
padding: $base_padding $base_padding * 6;
|
|
|
|
// special case the :insensitive button sinc we want
|
|
// the label to be the normal color when there are
|
|
// not multiple users
|
|
&:insensitive { color: $fg_color; }
|
|
}
|
|
}
|
|
|
|
// Audio selection dialog
|
|
|
|
.audio-device-selection-dialog {
|
|
min-width: 24em;
|
|
|
|
.audio-selection-box {
|
|
spacing: $base_padding *2;
|
|
|
|
.audio-selection-device {
|
|
@extend %flat_styled_button;
|
|
border-radius: $osd_radius;
|
|
|
|
.audio-selection-device-box {
|
|
padding: $base_padding * 2;
|
|
spacing: $base_padding * 2;
|
|
}
|
|
|
|
.audio-selection-device-icon { icon-size: 64px;}
|
|
}
|
|
}
|
|
}
|
|
|
|
// various on screen popups
|
|
|
|
%osd_base {
|
|
background-color: $panel_bg;
|
|
border: 1px solid $borders_color;
|
|
border-radius: $osd_radius;
|
|
text-align: center;
|
|
padding: $base_padding * 4;
|
|
}
|
|
|
|
// media keys osd
|
|
|
|
.media-keys-osd {
|
|
@extend %osd_base;
|
|
@extend %title_4;
|
|
|
|
margin-bottom: 1em;
|
|
border-radius: $osd_radius;
|
|
font-weight: bold;
|
|
spacing: $base_padding * 2;
|
|
padding: $base_padding * 2 $base_padding * 4;
|
|
& > * { spacing: $base_padding * 2; }
|
|
|
|
StIcon {
|
|
icon-size: 32px;
|
|
}
|
|
|
|
StLabel {
|
|
&:ltr { margin-right: $base_padding; }
|
|
&:rtl { margin-left: $base_padding; }
|
|
}
|
|
|
|
.level {
|
|
min-width: 160px;
|
|
-barlevel-height: 6px;
|
|
-barlevel-background-color: lighten($base_color, 8%);
|
|
-barlevel-active-background-color: $selected_bg_color;
|
|
-barlevel-amplify-color: $warning_color;
|
|
-barlevel-amplify-separator-width: $base_padding * 0.5;
|
|
|
|
&:ltr { margin-right: $base_padding; }
|
|
&:rtl { margin-left: $base_padding; }
|
|
}
|
|
|
|
.level-bar {
|
|
border-radius: $osd_radius;
|
|
background-color: $fg_color;
|
|
}
|
|
}
|
|
|
|
.info-osd {
|
|
@extend %osd_base;
|
|
|
|
font-size: 1.2em;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
|
|
.workspace-switch-osd {
|
|
@extend %osd_base;
|
|
@extend %title_4;
|
|
|
|
min-width: 140px;
|
|
margin-bottom: 1em;
|
|
border-radius: $osd_radius;
|
|
font-weight: bold;
|
|
padding: $base_padding * 2 $base_padding * 6 0 $base_padding * 6;
|
|
|
|
&-indicator-box { spacing: $base_padding * 2; }
|
|
|
|
&-indicator {
|
|
background-color: transparentize($fg_color, 0.5);
|
|
padding: 3px;
|
|
margin: 15px;
|
|
border-radius: 36px;
|
|
|
|
&:active {
|
|
background-color: $selected_bg_color;
|
|
padding: 6px;
|
|
margin: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.monitor-label {
|
|
border-radius: 0;
|
|
color: black;
|
|
padding: $base_padding * 2;
|
|
text-align: center;
|
|
}
|
|
|
|
// resize popup
|
|
|
|
.resize-popup {
|
|
color: $fg_color;
|
|
background-color: $bg_color;
|
|
border-radius: $radius;
|
|
padding: $base_padding * 2;
|
|
} |