_common-tweaks.scss

$overview_transparent_bg: transparentize(white, .8);
$dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6);
$base_border_radius: 10px;


/* OSD */
$_osd_color: if($variant=='light', black, $fg_color);
%osd_panel {
    font-weight: bold;
    background-color: $bg_color;
    color: $fg_color;
    border: 2px solid transparentize(black, .9);
    box-shadow: 0 4px 10px transparentize(black, .8);

    StIcon {
        color: $_osd_color;
        icon-shadow: transparentize(black, .3) 0 1px 6px;
    }
}

.osd-window {
    .level {
        -barlevel-background-color: transparentize($_osd_color, if($variant=='light', 0.7, 0.9));
        -barlevel-active-background-color: $_osd_color;
    }
}

/* Slider */

.slider {
    height: 1.1em;
    -barlevel-height: .35em;
    -barlevel-background-color: $borders_color;
    -barlevel-border-color: $selected_bg_color;
    -barlevel-active-background-color: $selected_bg_color;
    -barlevel-overdrive-color: $destructive_color;
    -barlevel-overdrive-separator-width: 0.1em;
    -barlevel-border-width: 0;

    -slider-handle-radius: 0;
}

/* Check Boxes */

.check-box {
    StBin {
       background-image: url("assets/checkbox-off#{$asset_suffix}.svg");
    }

    &:focus StBin { background-image: url("assets/checkbox-off-focused#{$asset_suffix}.svg"); }
    &:checked StBin { background-image: url("assets/checkbox#{$asset_suffix}.svg"); }
    &:focus:checked StBin { background-image: url("assets/checkbox-focused#{$asset_suffix}.svg"); }
}

/* Switches */

.toggle-switch {
  background-image: url("assets/toggle-off#{$asset_suffix}.svg");
  &:checked {
    background-image: url("assets/toggle-on#{$asset_suffix}.svg");
  }
}

/* Popovers/Menus */

.popup-menu-boxpointer,
.candidate-popup-boxpointer {
    -arrow-border-radius: $base_border_radius + 1px;
    -arrow-background-color: $bg_color;
    -arrow-border-width: 12px;
    -arrow-border-color: transparent;
    -arrow-base: 0;
    -arrow-rise: 0;
    -arrow-box-shadow: none;
    margin: if($full-panel == 'true', .2em, .45em);
    background-color: transparentize($bg_color, .6);
    box-shadow: 0 2px 4px -6px black;
    border-radius: $base_border_radius + 4px;
}

// menu items
.popup-menu-item {
    border-radius: $base_border_radius;

    &:checked { background-color: transparent; }

    &.selected, &:active {
        background-color: transparentize(if($variant=='light', black, white), if($variant=='light', 0.96, 0.9));
        color: $fg_color;
    }
}

// popover submenus
.popup-sub-menu {
    border: 1px solid transparentize($borders_color, 0.2);
    border-radius: $base_border_radius;
}

/* App Switcher */
// switcher onscreen panel
.switcher-list {
    .item-box {
        &:outlined {
            padding: 6px;
            border: 3px solid $selected_bg_color;
            border-radius: 8px;
        }

        &:selected {
            background-color: $selected_bg_color;
            color: $selected_fg_color;
            text-shadow: transparentize(black, 0.1) 0 1px 2px;
        }
    }
}

/* Workspace Switcher */
.ws-switcher-box { border: none }

.workspace-switcher-container { padding: 7px; }

// active workspace in the switcher
.ws-switcher-active-up,
.ws-switcher-active-down,
.ws-switcher-active-left,
.ws-switcher-active-right {
    box-shadow: 0 0px 6px transparentize(black, .5);
}

/* Window Picker */

// Borders on window thumbnails
.window-clone-border { border-color: transparentize(white, .75); }

// Window titles
.window-caption {
    color: black;
    background-color: white;
    border: none;
    box-shadow: $dialog_box_shadow;
}

// REMOVE: GNOME <=3.36
.window-close { -shell-close-overlap: $window_close_button_size * 0.5; }

// Close button
.window-close {
    background-image: url("assets/close-window.svg");
    background-size: 32px;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    color: transparent;
    height: 32px;
    width: 32px;

    &:hover {
        background-image: url("assets/close-window-hover.svg");
        background-color: transparent;
    }

    &:active {
        background-image: url("assets/close-window-active.svg");
        background-color: transparent;
    }
}

/* Tiled window previews */

.tile-preview-left.on-primary,
.tile-preview-right.on-primary,
.tile-preview-left.tile-preview-right.on-primary{ border-radius: 0; }

/* TOP BAR */

#panelBox {
    padding: if($full-panel == 'true', 0, .35em .9em);
    background: transparent;
}

#panel {
    $_panel_bg: transparentize(black, .8);
    $_panel_fg: white;
    $_panel_text_shadow: transparentize(black, 0.1) 0 1px 2px;
    padding: if($full-panel == 'true', .1em 0, 0);
    font-size: .9em;
    height: 2em;
    border-radius: if($full-panel == 'true', 0, 7px);
    background: $_panel_bg;
    text-shadow: $_panel_text_shadow;

    .popup-menu-arrow { width: 0; }

    StIcon { icon-shadow: $_panel_text_shadow; }

    &.unlock-screen,
    &.login-screen,
    &.lock-screen,
    &:overview {
        background-color: transparent;
        .panel-button {
            &, &:hover, &:active, &:focus, &:overview, &:checked { color: white; }
        }
    }

    .panel-corner { -panel-corner-radius: 0; }

    .panel-button {
        color: $_panel_fg;
        &:active, &:focus, &:overview, &:checked {
            color: $_panel_fg;
            box-shadow: inset 0 -2px 0px white;
        }
    }

    .panel-button.clock-display {
        // Move highlight from .panel-button to .clock
        &:active, &:overview, &:focus, &:checked {
            box-shadow: none;

            .clock {
              box-shadow: inset 0 -2px 0px white;
          }
        }
    }

    #panelActivities.panel-button {
        margin-left: .4em;
        StLabel {
            background-image: url("assets/view-grid-symbolic.svg");
            background-size: contain;
            width: 1.5em;
            height: 1.5em;
            color: transparent;
        }
    }
}

/* Date/Time Menu */

.events-section-title { padding: 1em; }

.datemenu-today-button {
    .date-label {
        font-size: 1.5em;
        font-weight: 300;
    }
}

.calendar {
  @include notification_bubble($flat: true);

  .calendar-week-number { padding: 0.7em 0 0; } // REMOVE: GNOME <=3.36

  .calendar-day-base {
    &:active,&:selected {
      color: $fg_color;
      background-color: if($variant=='light', darken($bg_color, 10%), lighten($bg_color, 10%));
    }
  }

  .calendar-today {
    &:active,&:selected {
      background: $selected_bg_color;
      color: $selected_fg_color;
    }
  }
}

/* Events */
.events-button { @include notification_bubble($flat: true); }

/* World clocks */

.world-clocks-button {
    @include notification_bubble($flat: true);
}

.weather-button {
    @include notification_bubble($flat: true);
}


/* Search */

// search entry
.search-entry {
    color: black;
    font-weight: bold;
    background-color: $overview_transparent_bg;
    text-shadow: 0px 1px 2px rgba(black, 0.9);
    border-radius: 100px;
    font-size: 1.1em;
    transition-duration: 200ms;

    StLabel.hint-text { color: $osd_fg_color; }

    &, &:focus, &:hover {
        width: 21em;
        padding: .6em .8em;
        border: none;
    }

    &:focus, &:hover {
        background-color: white;
        color: black;
        font-weight: normal;
        text-shadow: none;
        box-shadow: none;

        StLabel.hint-text { color: black; }

        .search-entry-icon {
            color: black;
            icon-shadow: none;
        }
    }

    .search-entry-icon {
        color: white;
        icon-shadow: 0px 1px 2px rgba(black, 0.9);
    }
}

// search results
.search-section-content {
    background-color: $overview_transparent_bg;
    border: none;
}

// search result provider
.search-provider-icon {
    .list-search-provider-content {
        .list-search-provider-details { font-weight: bold; }
    }
}

/* DASHBOARD */

#dash {
    color: $osd_fg_color;
    background-color: transparent;
    border: none;
    border-color: transparent;

    .overview-icon StIcon {
        color: white;
        icon-shadow: transparentize(black, .3) 0 2px 6px;
    }
}

.show-apps {
    &:focus,
    &:checked {
        .overview-icon {
            background-color: $overview_transparent_bg;
            color: black;
        }
    }
}

/* Workspace pager */
// thumbnails in overview
.workspace-thumbnails {
    background-color: transparentize(black, .8);
    border: none;

    .placeholder { background-image: none; }
}

// selected indicator
.workspace-thumbnail-indicator { border: 5px solid white; }

/* App Folders */
.app-well-app.app-folder {
    background-color: rgba(0, 0, 0, .1);
    box-shadow: 0 2px 5px black;

    &:checked { background: black; }
}

.app-folder-dialog {
    background: black;
    box-shadow: 0 0 20px black;
    border: none;

    & .folder-name-container {
        & .edit-folder-button {
            &, &:hover, &:active {
                background: white;
                color: black;
            }
        }
    }
}

.app-folder-dialog-container { width: 720px; }

/********************************************************/
/***************** REMOVE: GNOME <=3.36 *****************/
/********************************************************/

/* App Grid */
.icon-grid {
  $app_icon_padding: 24px;
  -shell-grid-horizontal-item-size: $app_icon_size + $app_icon_padding * 2;
  -shell-grid-vertical-item-size: $app_icon_size + $app_icon_padding * 2;
}

.all-apps,
.frequent-apps > StBoxLayout { padding: 0px 88px 10px 88px; }

// Label when no frequent apps
.no-frequent-applications-label { @extend %status_text; }

/* Frequent | All toggle */

// container
.app-view-controls { padding-bottom: 32px; }

// buttons
.app-view-control {
   margin: 0;
   padding: 7px 32px;

   &, &:hover, &:checked {
       color: white;
       background-color: $overview_transparent_bg;
       font-weight: bold;
       border: 0;
       box-shadow: none;
       text-shadow: none;
   }

    &:hover { background: transparentize(white, .6); }

    &:active, &:checked {
        background: white;
        color: black;
    }

    &:first-child { border-radius: 6px 0 0 6px; }
 
    &:last-child { border-radius: 0 6px 6px 0; }
}

/* Screen Shield */

#lockDialogGroup {
    background: url("assets/login-background");
    background-size: cover;
}

/* Login Dialog */

.login-dialog {
    $_login_button_bg: transparentize(#383c4a, .65);

    font-size: 11pt;

    StEntry {
        background: $_login_button_bg;
        color: white;
        border: none;
        box-shadow: none;

        StLabel.hint-text {
            margin-left: 2px;
            color: transparentize(white, 0.3);
        }
    }

    .cancel-button,
    .switch-user-button,
    .login-dialog-session-list-button {
        border-color: transparent;
        background-color: $_login_button_bg;
        color: white;

        StIcon { icon-size: $base_icon_size; }
    }
}