system-taskbar/ding/data/stylesheet.css

/*
Local file for to specify styles for desktop icons

@define-color desktop_icons_bg_color @theme_selected_accent_color; // Adwaita
@define-color desktop_icons_fg_color @theme_selected_fg_color;

The above colors are set using javascript code in DesktopManager
with sane fallbacks if theme_slected_colors do not exist,
and then injected into Gdk.Display css before this file is read in and added.
*/

box > label.file-label {
    margin-top: 0px;
    margin-left: 5px;
    margin-right: 5px;
    text-shadow: 0.6px 0.7px 1px black, 0.1em 0.1em 0.1em black;
    color: white;
}

box > label.file-label-dark {
    margin-top: 0px;
    margin-left: 5px;
    margin-right: 5px;
    text-shadow: 0.6px 0.7px 1px white,  0.1em 0.1em 0.1em white;
    color: black;
}

box > label.file-label-vertical {
    /* Twice the padding set in box #file-item below to keep spacing between
    icon and label constant with shape change */
    margin-top: 4px;
}

box > #file-item {
    padding: 2px;
    border-radius: 5px;
}

box > #file-item:hover {
   background-color: alpha(@desktop_icons_fg_color, 0.3);
}

box > #file-item.mimic-hovered {
   background-color: alpha(@desktop_icons_fg_color, 0.3);
}

box > #file-item.desktop-icons-selected {
    background-color: alpha(@desktop_icons_bg_color, 0.3);
}

box.desktop-icon-container.keyboard-selected {
    /* Draw a visible keyboard focus rectangle inside the container */
    box-shadow: inset 0 0 0 2px alpha(@desktop_icons_fg_color, 0.6);
    background-color: alpha(@desktop_icons_fg_color, 0.3);
    border-radius: 6px;
    animation: shadow-descend 150ms ease-out;
}

box.desktop-icon-container.keyboard-selected.desktop-icons-selected {
    background-color: alpha(@desktop_icons_bg_color, 0.3);
}

/* Avoid double hover shading when keyboard-selected */
box.desktop-icon-container.keyboard-selected > #file-item:hover,
box.desktop-icon-container.keyboard-selected > #file-item.mimic-hovered,
box.desktop-icon-container.keyboard-selected > #file-item.desktop-icons-selected {
    background-color: transparent;
}

@keyframes shadow-descend {
    from {
        box-shadow: inset 0 0 0 6px alpha(@desktop_icons_fg_color, 0.0);
    }
    to {
        box-shadow: inset 0 0 0 2px alpha(@desktop_icons_fg_color, 0.6);
    }
}

.not-found {
    color: rgb(255, 0, 0);
}

#desktopwindow.background {
    background-blend-mode: normal;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: left top;
    background-repeat: repeat;
    background-size: auto;
    border-radius: 0px;
}

#errorstate.background {
    background-blend-mode: normal;
    background-clip: border-box;
    background-color: alpha(red, 0.3);
    background-image: none;
    background-origin: padding-box;
    background-position: left top;
    background-repeat: repeat;
    background-size: auto;
    border-radius: 0px;
}

#testwindow.background {
    background-blend-mode: normal;
    background-clip: border-box;
    background-color: black;
    background-image: none;
    background-origin: padding-box;
    background-position: left top;
    background-repeat: repeat;
    background-size: auto;
    border-radius: 0px;
}

.unhighlightdroptarget:drop(active) {
    box-shadow: none;
}

#DingAppChooser treeview {
    min-height: 36px;
    -gtk-icon-size: 32px;
}

#ding-widget.dragging {
    outline: 2px solid rgba(0, 120, 255, 0.8);
    background-color: rgba(0, 120, 255, 0.15);
    border-radius: 8px;
    transform: scale(1.04);
}

#ding-widget.ding-widget-selected {
    outline: none;
    box-shadow: 0 0 0 2px alpha(@desktop_icons_bg_color, 0.9);
    background-color: alpha(@desktop_icons_bg_color, 0.12);
    border-radius: 8px;
}

#ding-widget {
    border-radius: 8px;
    background-color: transparent;
}

#ding-widget-close-button {
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 9999px;
    background-color: rgba(0,0,0,0.65);
    color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    transition: opacity 0.15s, background-color 0.15s;
    
    -gtk-icon-size: 18px; /* symbolic icon size */
}

#ding-widget-close-button:hover {
    background-color: rgba(0,0,0,0.8);
}

#ding-widget-close-button:disabled {
    background-color: rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.5);
}

#ding-widget-add-button {
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 9999px;

    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    color: #fff;

    -gtk-icon-size: 24px;
}

#ding-widget-add-button:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

#ding-widget-grid-toggle-button {
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 9999px;

    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    color: #fff;

    -gtk-icon-size: 24px;
}

#ding-widget-grid-toggle-button:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

#widget-container {
    background-color: transparent;
}

#widget-container.widgets-on-top {
    background-color: rgba(255, 255, 255, 0.25);
}

#ding-widget-webview {
    margin: 0;
    padding: 0;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    border-radius: 0px;
}

#ding-widget-prefs-button {
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 9999px;
    background-color: rgba(0,0,0,0.65);
    color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    transition: opacity 0.15s, background-color 0.15s;

    -gtk-icon-size: 18px; /* match close button */
}

#ding-widget-prefs-button:hover {
    background-color: rgba(0,0,0,0.8);
}

#ding-widget-prefs-button:disabled {
    background-color: rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.5);
}