bitbucket-fast-and-furious.user.css

/* ==UserStyle==
@name         Bitbucket: fast and furious
@homepageURL  https://github.com/rybak/atlassian-tweaks
@namespace    https://github.com/rybak/atlassian-tweaks
@version      2
@description  Speed up builds on CI for Bitbucket
@author       Andrei Rybak
@license      MIT
@preprocessor uso
@var number animationDuration "Lower value means faster builds" [0.5, 0.1, 10, 0.1, "s"]
@var text yourDomain "Custom Bitbucket domain" "bitbucket.example.com"
@var text yourDomain2 "Second custom Bitbucket domain" "stash.example.com"
==/UserStyle== */

/*
 * Copyright (c) 2023 Andrei Rybak
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

@-moz-document url-prefix("https://bitbucket"), domain(/*[[yourDomain]]*/), domain(/*[[yourDomain2]]*/) {
	/* Progress icons in different places of the UI. */
	/* regular build status in PRs */
	.build-status-icon.build-in-progress-icon {
		animation-duration: /*[[animationDuration]]*/;
	}

	/* Our own copy of Bitbucket's CSS is needed, because not all
	 * pages with progress icons have this animation loaded in CSS. */
	@keyframes rotate-animation-copy {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}

	/* Merge check in PRs. It doesn't have a convenient human-readable
	 * data attribute, so a CSS class `.eUOUHa` of the icon with the
	 * clock has to be used.  The rotating clock is fairly annoying
	 * though. */
	.summary-panel .extension-button-wrapper .extension-icon-wrapper span.eUOUHa svg,
	/* "Builds" column on the pages `/branches`, `/commits`, etc.
	 * It is the same SVG as the regular build status in PRs, but
	 * for some reason, these icons aren't animated.*/
	.inprogress-build-icon svg {
		animation-name: rotate-animation-copy;
		animation-play-state: running;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		transform-origin: center;
		animation-duration: /*[[animationDuration]]*/;
	}
}