merlin.css

/******************************************************************************************************
  MerlinWikiExtensions Extends the functionality of the wiki by adding
  extensions for Merlin-specific capabilities.
  Copyright (C) 2023 CoderMerlin.Academy
  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 3 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, see <https://www.gnu.org/licenses/>.
*******************************************************************************************************/

/*****************************************************************************************************
 * Arguments
 *****************************************************************************************************/
.merlin-arguments {
    display: none;
}


/*****************************************************************************************************
 * Effects
 *****************************************************************************************************/
.merlin-shimmer-effect {
    mask: linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/350% 100%;
    background-repeat: no-repeat;
    animation: merlin-shimmer 1.0s infinite;
}

@keyframes merlin-shimmer {
    100% {mask-position: left}
}

.merlin-spin-effect {
    animation-name: merlin-spin;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes merlin-spin {
    from {
	transform:rotate(0deg);
    }
    to {
	transform:rotate(360deg);
    }
}

.merlin-pulse-effect {
    animation-name: merlin-pulse;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes merlin-pulse {
    0% {
	transform: scale(1.00);
    }
    50% {
	transform: scale(0.50);
    }
    100% {
	transform: scale(1.00);
    }
}

/*****************************************************************************************************
 * API Status Header
 *****************************************************************************************************/
.merlin-interactive-api-group {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 2px;
}

.merlin-interactive-api-group > * {
}

.merlin-interactive-api-status-header {
    grid-column: 1 / span 2;
    width: 100%;
    height: 30px;
    background-color: purple;
    border: 1px;
}


/*****************************************************************************************************
 * Group Tree
 * Credits:
 * https://iamkate.com/code/tree-views/
 *****************************************************************************************************/
.merlin-groups-tree{
    --spacing : 1.5rem;
    --radius  : 8px;
}

.merlin-groups-tree li{
    display      : block;
    position     : relative;
    padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
}

.merlin-groups-tree ul{
    margin-left  : calc(var(--radius) - var(--spacing));
    padding-left : 0;
}

.merlin-groups-tree ul li{
    border-left : 2px solid #ddd;
}

.merlin-groups-tree ul li:last-child{
    border-color : transparent;
}

.merlin-groups-tree ul li::before{
    content      : '';
    display      : block;
    position     : absolute;
    top          : calc(var(--spacing) / -2);
    left         : -2px;
    width        : calc(var(--spacing) + 2px);
    height       : calc(var(--spacing) + 1px);
    border       : solid #ddd;
    border-width : 0 0 2px 2px;
}

.merlin-groups-tree summary{
    display : block;
    cursor  : pointer;
}

.merlin-groups-tree summary::marker,
.merlin-groups-tree summary::-webkit-details-marker{
    display : none;
}

.merlin-groups-tree summary:focus{
    outline : none;
}

.merlin-groups-tree summary:focus-visible{
    outline : 1px dotted #000;
}

.merlin-groups-tree li::after,
.merlin-groups-tree summary::before{
    content       : '';
    display       : block;
    position      : absolute;
    top           : calc(var(--spacing) / 2 - var(--radius));
    left          : calc(var(--spacing) - var(--radius) - 1px);
    width         : calc(2 * var(--radius));
    height        : calc(2 * var(--radius));
    border-radius : 50%;
    background    : #ddd;
}

.merlin-groups-tree summary::before{
    content     : '+';
    z-index     : 1;
    background  : #4f3f8a;
    color       : #fff;
    line-height : calc(2 * var(--radius) - 2px);
    text-align  : center;
}

.merlin-groups-tree details[open] > summary::before{
    content : '-';
}

.merlin-groups-tree-group-leaf {
    color: darkblue;
}

a:has(.merlin-groups-tree-group-leaf) {
    text-decoration: none;
}

.merlin-groups-tree-user-leaf {
    color: darkgreen;
    cursor: pointer;
}

a:has(.merlin-groups-tree-user-leaf) {
    text-decoration: none;
}

/*****************************************************************************************************
 * Proficiency Progress Wrapper
 *****************************************************************************************************/
.merlin-proficiency-progress-wrapper {
    grid-column: 1 / span 1;
    max-height: 70vh;
    overflow-y: scroll;
}

.merlin-proficiency-progress-group-selector-container  {
    margin-right: 1rem;
}

.merlin-proficiency-progress-group-selector {
    border: 1px solid black;
}

.merlin-proficiency-progress-table-container {
    border: 1px solid black;
}

.merlin-proficiency-progress-table-div {
}


/*****************************************************************************************************
 * Proficiency Progress Table
 *****************************************************************************************************/

.merlin-proficiency-progress-table {
    border: 1px solid;
    border-collapse: collapse;
}

.merlin-proficiency-progress-table th {
    border: 1px solid;
}

.merlin-proficiency-progress-table td {
    border: 1px solid;
    min-width: 200px;
}

.merlin-proficiency-progress-program-level-name {
    cursor: pointer;
}


.merlin-proficiency-progress-table td:nth-child(3) span{
    animation-delay: 0.8s;
}

.merlin-proficiency-progress-table td:nth-child(4) span{
    animation-delay: 1.6s;
}

.merlin-proficiency-progress-table td:nth-child(5) span{
    animation-delay: 2.4s;
}

.merlin-proficiency-progress-none {
    width: 200px;
    height: 2em;
    display: block;
    background-color: gray;
}

.merlin-proficiency-progress-partial:before {
    content: "\2794";
    color: blue;
}

.merlin-proficiency-progress-partial {
    width: 200px;
    display: block;
    font-size: 2em;
    opacity: 0;
    animation: merlin-proficiency-progress-animation-partial 1s infinite;
}

@keyframes merlin-proficiency-progress-animation-partial {
    0% {
	opacity: 0;
	transform: translate(10%, 0px);
    }
    50% {
	opacity: 1;
    }
    100% {
	opacity: 0;
	transform: translate(80%, 0px);
    }
}

.merlin-proficiency-progress-complete {
    width: 0px;
    height: 2em;
    display: block;
    background-color: lightgreen;
    animation: merlin-proficiency-progress-animation-complete 1s;
    animation-fill-mode: forwards;
}

@keyframes merlin-proficiency-progress-animation-complete {
    0% {
	opacity: 0;
	width: 0px;
    }
    100% {
	opacity: 1;
	width: 200px;
    }
}