title: $:/plugins/Gk0Wk/CPL-Repo/styles/cpl.css
created: 20231009122025301
modified: 20231011071732554
tags: $:/tags/Stylesheet
type: text/vnd.tiddlywiki

.cpl-normal-button {
  color: <<colour foreground>>;
  fill: <<colour foreground>>;
}

.cpl-plugin-info-box {
  overflow: hidden;
}

.cpl-plugin-info-box > .tc-plugin-info-dropdown > .tc-plugin-info-dropdown-body {
  box-shadow: inset 0 12px 12px -12px <<colour very-muted-foreground>>55;
}

.cpl-latest-version-icon > svg {
  color: <<colour primary>>;
  fill: <<colour primary>>;
}

.cpl-installed-version-icon > svg {
  color: <<colour download-background>>;
  fill: <<colour download-background>>;
}

.cpl-plugin-install-request-dependents-tree {
  border-left:2px dotted <<colour very-muted-foreground>>;
  background: <<colour very-muted-foreground>>14;
}

.cpl-banner-container {
  color: <<colour download-foreground>>;
  background: linear-gradient(135deg, <<colour primary>>, <<colour download-background>>);
  border-left: 5px solid <<colour tiddler-info-border>>;
}

.cpl-banner-title,
.cpl-banner-link,
.cpl-banner-badge,
.cpl-banner-caption {
  color: <<colour download-foreground>>;
  fill: <<colour download-foreground>>;
}

.cpl-banner-link-main {
  background: linear-gradient(45deg, <<colour download-background>>, <<colour primary>>);
  border-color: <<colour download-background>>;
}

.cpl-banner-link-repo {
  background: linear-gradient(145deg, <<colour primary>>, <<colour muted-foreground>>);
  border-color: <<colour primary>>;
}

.cpl-banner-badge-community {
  background: linear-gradient(145deg, <<colour muted-foreground>>, <<colour tiddler-info-border>>);
  border-color: <<colour muted-foreground>>;
}

.cpl-banner-link-partner {
  background: linear-gradient(300deg, <<colour diff-delete-background>>, <<colour primary>>);
  border-color: <<colour diff-delete-foreground>>;
}

.cpl-action-toggle {
  border-color: <<colour tiddler-info-border>>;
  background: <<colour tiddler-info-background>>;
}

.cpl-action-pill {
  background: <<colour download-background>>1f;
  color: <<colour download-background>>;
}

.cpl-action-pill-muted {
  background: <<colour muted-foreground>>24;
  color: <<colour muted-foreground>>;
}

.cpl-inline-status,
.cpl-install-request-panel {
  background: <<colour tiddler-info-background>>;
  border-color: <<colour tiddler-info-border>>;
  color: <<colour foreground>>;
  fill: <<colour foreground>>;
}

.cpl-inline-status-loading,
.cpl-inline-status-info {
  background: <<colour primary>>14;
  border-color: <<colour primary>>;
}

.cpl-inline-status-success {
  background: <<colour diff-insert-background>>33;
  border-color: <<colour diff-insert-foreground>>;
}

.cpl-inline-status-error {
  background: <<colour diff-delete-background>>33;
  border-color: <<colour diff-delete-foreground>>;
}

/* Disable dut to high GPU usage */
/**
.cpl-website-mainpage-search-bar {
  animation: breath-glow 1.5s infinite alternate;
}
*/

@keyframes breath-glow {
  from {
    box-shadow: 0 0 5px <<colour primary>>80;
  }
  to {
    box-shadow: 0 0 20px <<colour primary>>;
  }
}

.cpl-mirror-select {
  border-color: <<colour tiddler-editor-border>>;
  background: <<colour tiddler-editor-background>>;
  color: <<colour foreground>>;
}

.cpl-mirror-select:hover {
  border-color: <<colour muted-foreground>>;
}

.cpl-mirror-select:focus {
  border-color: <<colour primary>>;
  box-shadow: 0 0 0 2px <<colour primary>>1a;
}

.cpl-uninstall-search {
  margin-bottom: 0.5em;
}

.cpl-uninstall-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4em 0.6em;
  border: 1px solid <<colour tiddler-editor-border>>;
  border-radius: 4px;
  background: <<colour tiddler-editor-background>>;
  color: <<colour foreground>>;
}

.cpl-uninstall-search input:focus {
  border-color: <<colour primary>>;
  box-shadow: 0 0 0 2px <<colour primary>>1a;
  outline: none;
}

.cpl-mirror-server {
  color: <<colour download-background>>;
}

.cpl-mirror-static {
  color: <<colour primary>>;
}

.cpl-mirror-unreachable {
  color: <<colour diff-delete-foreground>>;
}

.cpl-mirror-unknown {
  color: <<colour muted-foreground>>;
}

.cpl-static-mirror-notice,
.cpl-static-feature-notice {
  background: <<colour diff-delete-background>>33;
  border-color: <<colour diff-delete-foreground>>;
  color: <<colour foreground>>;
}

.cpl-loading-placeholder,
.cpl-inline-button-link,
.cpl-plugin-card-meta-text,
.cpl-status-muted {
  color: <<colour muted-foreground>>;
}

.cpl-plugin-card-description {
  color: <<colour foreground>>;
}

.cpl-status-success {
  color: <<colour diff-insert-foreground>>;
}

.cpl-status-error {
  color: <<colour diff-delete-foreground>>;
}

.cpl-plugin-card {
  background: <<colour tiddler-background>>;
  border: 1px solid <<colour tiddler-info-border>>;
}

.cpl-plugin-card:hover {
  box-shadow: 0 2px 8px <<colour very-muted-foreground>>22;
}

.cpl-plugin-card:focus-within {
  border-color: <<colour primary>>;
}

.cpl-plugin-card-open-button {
  color: <<colour foreground>>;
  fill: <<colour foreground>>;
}

.cpl-plugin-card-open-button:hover .cpl-plugin-card-title,
.cpl-plugin-card-open-button:focus-visible .cpl-plugin-card-title {
  color: <<colour primary>>;
}

.cpl-plugin-card-icon-frame {
  background: <<colour tiddler-info-background>>;
}

.cpl-plugin-detail-header {
  border-bottom-color: <<colour tiddler-info-border>>;
}

.cpl-plugin-detail-title,
.cpl-plugin-detail-fields dt {
  color: <<colour muted-foreground>>;
}

.cpl-plugin-detail-version-select select {
  border-color: <<colour tiddler-editor-border>>;
  background: <<colour tiddler-editor-background>>;
  color: <<colour foreground>>;
}

.cpl-dependency-tag {
  background: <<colour background>>22;
  color: <<colour foreground>>;
}

.cpl-version-icon-latest {
  color: <<colour primary>>;
  fill: <<colour primary>>;
}

.cpl-version-icon-installed {
  color: <<colour download-background>>;
  fill: <<colour download-background>>;
}

.cpl-delete-button {
  background-color: <<colour diff-delete-background>> !important;
  color: <<colour foreground>>;
  fill: <<colour foreground>>;
}

.cpl-plugin-thanks {
  background: <<colour very-muted-foreground>>22;
  border-top-color: <<colour primary>>;
  border-bottom-color: <<colour download-background>>;
}

.cpl-plugin-thanks-title {
  border-left-color: <<colour primary>>;
}

.cpl-plugin-stats,
.cpl-card-heading-bordered,
.cpl-form-section {
  border-color: <<colour tiddler-info-border>>;
}

.cpl-rating-widget,
.cpl-changelog-section,
.cpl-compatibility-section,
.cpl-compatibility-pill,
.cpl-compatibility-description {
  background: <<colour tiddler-info-background>>;
}

.cpl-code-panel,
.cpl-compatibility-item {
  background: <<colour tiddler-background>>;
  border-color: <<colour tiddler-info-border>>;
}

.cpl-compatibility-item {
  border-left-color: <<colour primary>>;
}

.cpl-form-input {
  background: <<colour tiddler-editor-background>>;
  color: <<colour foreground>>;
  border-color: <<colour tiddler-editor-border>>;
}

.cpl-form-input:focus {
  outline: none;
  border-color: <<colour primary>>;
  box-shadow: 0 0 0 2px <<colour primary>>1a;
}

.cpl-modal-warning-callout {
  background: <<colour diff-delete-background>>44;
  color: <<colour foreground>>;
}

.cpl-shadow-row {
  border-color: <<colour tiddler-info-border>>;
}

.cpl-shadow-row-keep {
  background: <<colour diff-insert-background>>22;
}

.cpl-shadow-row-delete {
  background: <<colour diff-delete-background>>33;
}

.cpl-rating-star {
  color: <<colour very-muted-foreground>>;
}

.cpl-rating-star-button:hover .cpl-rating-star {
  color: <<colour primary>>;
}

.cpl-rating-toggle-button:hover,
.cpl-rating-toggle-button:focus-visible {
  background: <<colour very-muted-foreground>>22;
}

.cpl-rating-toggle-button:hover .cpl-rating-toggle-icon,
.cpl-rating-toggle-button:focus-visible .cpl-rating-toggle-icon {
  color: <<colour primary>>;
}

.cpl-status-banner-error {
  background: <<colour diff-delete-background>>44;
  border-color: <<colour diff-delete-background>>;
  color: <<colour foreground>>;
}

.cpl-status-banner-loading {
  background: <<colour very-muted-foreground>>22;
  border-color: <<colour tiddler-info-border>>;
  color: <<colour muted-foreground>>;
}

.cpl-status-banner-success {
  background: <<colour diff-insert-background>>44;
  border-color: <<colour diff-insert-background>>;
  color: <<colour foreground>>;
}

/* Mirror Toolbar Layout */
.cpl-mirror-toolbar {
  margin-bottom: 0.5em;
}

.cpl-mirror-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.2em;
  align-items: center;
  padding: 0.5em 0;
}

.cpl-mirror-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  flex-shrink: 0;
}

.cpl-mirror-label {
  font-weight: 600;
  white-space: nowrap;
}

.cpl-mirror-select {
  min-width: 180px;
  max-width: 360px;
}

.cpl-mirror-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.9em;
  white-space: nowrap;
}

.cpl-mirror-status-icon {
  font-weight: bold;
}

.cpl-mirror-actions {
  display: flex;
  gap: 0.5em;
  align-items: center;
}
