styles.css

/* SpaceIt dashboard block. */

/* Three-dot options menu: lift it out of the content flow up to the block
   title's line (the title is `.card-title.d-inline` at the top of the card
   body, with p-3 = 1rem padding). Anchored to the block card. */
.block.block_spaceit {
    position: relative;
}

/* Boost sets a global `.content { position: relative }`. Our menu lives inside
   `.card-text.content`, which sits below the title, so that div would become
   the menu's offset parent and the menu would land under the title. Neutralise
   it within our block so the menu anchors to the block card instead. */
.block.block_spaceit .card-text.content {
    position: static;
}

.block.block_spaceit .block_spaceit-menu {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    margin: 0;
}

/* In edit mode the block's own action menu occupies the top-right corner, so
   nudge ours inwards (left) to sit clear of it. */
body.editing .block.block_spaceit .block_spaceit-menu {
    right: 3rem;
}

/* Rotate the bucket chevron to signal collapse state: down when open,
   pointing right when collapsed. Bootstrap toggles the .collapsed class on
   the trigger button. */
.block_spaceit-bucket [data-bs-toggle="collapse"] .block_spaceit-caret {
    transition: transform 0.15s ease;
}

.block_spaceit-bucket [data-bs-toggle="collapse"].collapsed .block_spaceit-caret {
    transform: rotate(-90deg);
}

/* No focus glow when the full-width toggle is clicked with the mouse (it would
   light up the whole row); keyboard focus (:focus-visible) keeps its outline. */
.block_spaceit-bucket [data-bs-toggle="collapse"]:focus:not(:focus-visible) {
    box-shadow: none;
}

/* Remove (×) button: kill Moodle's blue focus glow entirely. Moodle sets it
   via a plain `.btn:focus { box-shadow }` rule that fires on any focus (incl.
   the programmatic focus around the confirm dialog), so :not(:focus-visible)
   is not enough — drop the shadow with !important. Keyboard users still get a
   visible focus ring via the :focus-visible outline below. */
.block_spaceit-remove:focus {
    box-shadow: none !important;
}

.block_spaceit-remove:focus-visible {
    outline: 2px solid var(--bs-primary, #0f6cbf);
    outline-offset: 1px;
}

/* Buckets past the configured item threshold scroll vertically; the inline
   max-height (in rem) is set per bucket from that threshold. */
.block_spaceit-scroll {
    overflow-y: auto;
}