plug.css

/*
* Copyright 2018-2022 elementary, Inc. (https://elementary.io)
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public
* License as published by the Free Software Foundation; either
* version 2 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
* General Public License for more details.
*
* You should have received a copy of the GNU General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
* Boston, MA 02110-1301 USA.
*/

.hotcorner {
    background-image:
        radial-gradient(
            circle,
            alpha(@accent_color, 0.4) 70%,
            alpha(@accent_color, 0) 1px
        ),
        linear-gradient(
            to bottom,
            alpha(@accent_color_500, 0.1),
            alpha(@accent_color_500, 0.1)
        );
    background-repeat: no-repeat;
    background-size: 48px 48px, cover;
    color: @selected_fg_color;
    font-weight: 600;
    min-height: 3.5em;
    padding: 12px;
}

.hotcorner.topleft {
    background-position: -24px -24px, 0;
}

.hotcorner.topright {
    background-position: calc(100% + 24px) -24px, 0;
}

.hotcorner.bottomleft {
    background-position: -24px calc(100% + 24px), 0;
}

.hotcorner.bottomright {
    background-position: calc(100% + 24px) calc(100% + 24px), 0;
}

.wallpaper flowboxchild {
    border-radius: 0.75em;
    margin: 1em;
}

.wallpaper flowboxchild picture {
    margin: 0.666em; /* Needs to be separate to position checkbutton */
}

.wallpaper flowboxchild:checked .card {
    box-shadow:
        0 0 0 4px @accent_color,
        0 0 0 1px alpha(#000, 0.05),
        0 3px 3px alpha(#000, 0.22);
}

.wallpaper flowboxchild check {
    border-radius: 50%;
    min-height: 20px;
    min-width: 20px;
    -gtk-icon-transform: scale(0.6);
}

settingspage.wallpaper actionbar box.end,
settingspage.wallpaper actionbar box.start {
    border-spacing: 12px;
    padding: 6px;
}

.appearance-view desktop-preview {
    min-height: 96px;
    margin: 6px 6px 12px 12px;
}

.appearance-view desktop-preview .shell {
    background-image: url("resource:///io/elementary/settings/desktop/notify-center.svg");
    background-repeat: no-repeat;
    background-size: 40px 55px;
    background-position: calc(100% - 3px) 3px;
    transition: all 300ms ease-in-out;
}

.appearance-view desktop-preview box:dir(rtl) {
    background-position: 3px 3px;
}

.appearance-view desktop-preview.dark .shell {
    background-image: url("resource:///io/elementary/settings/desktop/notify-center-dark.svg");
}

.appearance-view desktop-preview.dim .shell {
    background-color: alpha(black, 0.3);
}

.appearance-view desktop-preview .dock {
    border-radius: 2px;
    min-height: 0.6em;
    min-width: 5em;
    background: alpha(#fafafa, 0.6);
    box-shadow:
        inset 0 -1px 0 0 alpha(white, 0.1),
        inset 0 1px 0 0 alpha(white, 0.15),
        inset 1px 0 0 0 alpha(white, 0.035),
        inset -1px 0 0 0 alpha(white, 0.035),
        0 0 0 1px alpha(black, 0.1),
        0 1px 3px alpha(black, 0.10),
        0 3px 9px alpha(black, 0.15);
    margin: 0.25em;
}

.appearance-view desktop-preview.dark .dock {
    background: alpha(#444, 0.6);
    box-shadow:
        inset 0 -1px 0 0 alpha(white, 0.05),
        inset 0 1px 0 0 alpha(white, 0.07),
        inset 1px 0 0 0 alpha(white, 0.0175),
        inset -1px 0 0 0 alpha(white, 0.0175),
        0 0 0 1px alpha(black, 0.7),
        0 1px 2px alpha(black, 0.1),
        0 2px 4px alpha(black, 0.3);
}

.appearance-view desktop-preview .window {
    border-radius: 0.25em;
    min-height: 32px;
    min-width: 40px;
}

.appearance-view desktop-preview .window.back {
    margin-right: 24px;
    margin-bottom: 12px;
}

.appearance-view desktop-preview .window.front {
    margin-left: 24px;
    margin-top: 12px;
}

.appearance-view desktop-preview .window.front {
    background: #fafafa;
    box-shadow:
        inset 0 1px 0 0 white,
        inset 0 -1px 0 0 alpha(white, 0.8),
        inset 1px 0 0 0 alpha(white, 0.5),
        inset -1px 0 0 0 alpha(white, 0.5),
        0 0 0 1px alpha(black, 0.1),
        0 1px 2px alpha(black, 0.1),
        0 2px 4px alpha(black, 0.3);
}

.appearance-view desktop-preview .window.back,
.appearance-view desktop-preview.dark .window.front {
    background: #444;
    box-shadow:
        inset 0 1px 0 0 alpha(white, 0.15),
        inset 0 -1px 0 0 alpha(white, 0.1),
        inset 1px 0 0 0 alpha(white, 0.035),
        inset -1px 0 0 0 alpha(white, 0.035),
        0 0 0 1px alpha(black, 0.7),
        0 1px 2px alpha(black, 0.1),
        0 2px 4px alpha(black, 0.3);
}