mirror of
				https://github.com/Theodor-Springmann-Stiftung/hamann-ausgabe-core.git
				synced 2025-11-03 19:55:32 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			220 lines
		
	
	
		
			4.8 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			220 lines
		
	
	
		
			4.8 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
/* Symbols, Icons, Drawings, Tooltips */
 | 
						|
.ha-menu-arrowsymbol::after {
 | 
						|
    display: inline-block;
 | 
						|
    margin-left: 0.2em;
 | 
						|
    vertical-align: 0.2em;
 | 
						|
    content: "";
 | 
						|
    border-top: 0.3em solid;
 | 
						|
    border-right: 0.3em solid transparent;
 | 
						|
    border-bottom: 0;
 | 
						|
    border-left: 0.3em solid transparent;
 | 
						|
  }
 | 
						|
  
 | 
						|
  .ha-menusymbol {
 | 
						|
    border-radius: 4px;
 | 
						|
  }
 | 
						|
  
 | 
						|
  .ha-menusymbol svg {
 | 
						|
    width: 24px;
 | 
						|
    height: 24px;
 | 
						|
    stroke-width: 2;
 | 
						|
    stroke-linecap: round;
 | 
						|
    stroke-linejoin: miter;
 | 
						|
    fill: none;
 | 
						|
  }
 | 
						|
  
 | 
						|
  .ha-tooltip .ha-tooltiptext {
 | 
						|
    white-space: nowrap;
 | 
						|
    visibility: hidden;
 | 
						|
    min-width: 160px;
 | 
						|
    bottom: 155%;
 | 
						|
    left: 50%;
 | 
						|
    margin-left: -80px;
 | 
						|
    opacity: 0;
 | 
						|
    transition: opacity 0.3s;
 | 
						|
  }
 | 
						|
  
 | 
						|
  .ha-tooltip .ha-tooltiptext::after {
 | 
						|
    content: "";
 | 
						|
    position: absolute;
 | 
						|
    top: 100%;
 | 
						|
    left: 50%;
 | 
						|
    margin-left: -5px;
 | 
						|
    border-width: 5px;
 | 
						|
    border-style: solid;
 | 
						|
    /* border-color: rgb(226 232 240 / var(--tw-bg-opacity)) transparent transparent
 | 
						|
      transparent; */
 | 
						|
  }
 | 
						|
  
 | 
						|
  .ha-tooltip:hover .ha-tooltiptext {
 | 
						|
    visibility: visible;
 | 
						|
    opacity: 1;
 | 
						|
  }
 | 
						|
 | 
						|
  .ha-open-btn-collapsed-box::after {
 | 
						|
    content: "\200E+";
 | 
						|
  }
 | 
						|
 | 
						|
  .ha-open-btn-collapsed-box {
 | 
						|
    transform: rotate(0deg);
 | 
						|
    font-weight: bold;
 | 
						|
    -webkit-transition: -webkit-transform 80ms ease-in-out;
 | 
						|
    -moz-transition:    -moz-transform 80ms ease-in-out;
 | 
						|
    -o-transition:      -o-transform 80ms ease-in-out;
 | 
						|
    -ms-transition:     -ms-transform 80ms ease-in-out;
 | 
						|
    transition:         transform 80ms ease-in-out;
 | 
						|
  }
 | 
						|
 | 
						|
  .ha-open-btn-collapsed-box.ha-close-btn-collapsed-box {
 | 
						|
    transform: rotate(45deg);
 | 
						|
    transform-origin: 53% 57%;
 | 
						|
    -webkit-transition: -webkit-transform 80ms ease-in-out;
 | 
						|
    -moz-transition:    -moz-transform 80ms ease-in-out;
 | 
						|
    -o-transition:      -o-transform 80ms ease-in-out;
 | 
						|
    -ms-transition:     -ms-transform 80ms ease-in-out;
 | 
						|
    transition:         transform 80ms ease-in-out;
 | 
						|
  }
 | 
						|
/*   
 | 
						|
  .ha-close-btn-collapsed-box::before {
 | 
						|
    /* content: "\200E\00D7"; */
 | 
						|
    /*font-weight: 900;
 | 
						|
  }
 | 
						|
  
 | 
						|
  .ha-uploadheader .ha-usedfilesheaderlist .ha-plussign {
 | 
						|
    content: "\200E+ ";
 | 
						|
    font-weight: bold;
 | 
						|
    display: inline-block;
 | 
						|
    background-color: lightslategray;
 | 
						|
    padding-left: 0.25rem;
 | 
						|
    padding-right: 0.25rem;
 | 
						|
  }
 | 
						|
  
 | 
						|
  /* Tooltip text */
 | 
						|
  .ha-uploadform .ha-uploadmessage {
 | 
						|
    visibility: visible;
 | 
						|
    text-align: center;
 | 
						|
    padding: 5px 0;
 | 
						|
    border-radius: 6px;
 | 
						|
   
 | 
						|
    /* Position the tooltip text - see examples below! */
 | 
						|
    position: absolute;
 | 
						|
    z-index: 1;
 | 
						|
  
 | 
						|
    margin-top: 0.5rem;
 | 
						|
    width: 360px;
 | 
						|
    top: 100%;
 | 
						|
    left: 50%;
 | 
						|
    margin-left: -180px; /* Use half of the width (120/2 = 60), to center the tooltip */
 | 
						|
  
 | 
						|
    opacity: 0;
 | 
						|
    transition: opacity 1s;
 | 
						|
  }
 | 
						|
  
 | 
						|
  .ha-uploadform .ha-uploadmessage::after {
 | 
						|
    content: " ";
 | 
						|
    position: absolute;
 | 
						|
    bottom: 100%;  /* At the top of the tooltip */
 | 
						|
    left: 50%;
 | 
						|
    margin-left: -5px;
 | 
						|
    border-width: 5px;
 | 
						|
    border-style: solid;
 | 
						|
    border-color: transparent transparent grey transparent;
 | 
						|
  
 | 
						|
  }
 | 
						|
  
 | 
						|
  
 | 
						|
  .ha-lds-ellipsis {
 | 
						|
    display: none;
 | 
						|
    position: absolute;
 | 
						|
    bottom: 20px;
 | 
						|
  }
 | 
						|
  
 | 
						|
  .ha-lds-ellipsis-load {
 | 
						|
    display: none;
 | 
						|
    position: relative;
 | 
						|
    width: 38px;
 | 
						|
    bottom: 8px;
 | 
						|
  }
 | 
						|
  
 | 
						|
  .ha-lds-ellipsis-publish {
 | 
						|
    display: none;
 | 
						|
    position: absolute;
 | 
						|
    left: -50px;
 | 
						|
    bottom: 16px;
 | 
						|
  }
 | 
						|
  
 | 
						|
  .ha-lds-ellipsis div,
 | 
						|
  .ha-lds-ellipsis-load div,
 | 
						|
  .ha-lds-ellipsis-publish div {
 | 
						|
    position: absolute;
 | 
						|
    width: 7px;
 | 
						|
    height: 7px;
 | 
						|
    border-radius: 50%;
 | 
						|
    background: #000;
 | 
						|
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
 | 
						|
  }
 | 
						|
  
 | 
						|
  .ha-lds-ellipsis div:nth-child(1),
 | 
						|
  .ha-lds-ellipsis-load div:nth-child(1),
 | 
						|
  .ha-lds-ellipsis-publish div:nth-child(1) {
 | 
						|
    left: 6px;
 | 
						|
    animation: ha-lds-ellipsis1 0.6s infinite;
 | 
						|
  }
 | 
						|
  
 | 
						|
  .ha-lds-ellipsis div:nth-child(2),
 | 
						|
  .ha-lds-ellipsis-load div:nth-child(2),
 | 
						|
  .ha-lds-ellipsis-publish div:nth-child(2) {
 | 
						|
    left: 4px;
 | 
						|
    animation: ha-lds-ellipsis2 0.6s infinite;
 | 
						|
  }
 | 
						|
  
 | 
						|
  .ha-lds-ellipsis div:nth-child(3),
 | 
						|
  .ha-lds-ellipsis-load div:nth-child(3),
 | 
						|
  .ha-lds-ellipsis-publish div:nth-child(3) {
 | 
						|
    left: 16px;
 | 
						|
    animation: ha-lds-ellipsis2 0.6s infinite;
 | 
						|
  }
 | 
						|
  
 | 
						|
  .ha-lds-ellipsis div:nth-child(4),
 | 
						|
  .ha-lds-ellipsis-load div:nth-child(4),
 | 
						|
  .ha-lds-ellipsis-publish div:nth-child(4) {
 | 
						|
    left: 30px;
 | 
						|
    animation: ha-lds-ellipsis3 0.6s infinite;
 | 
						|
  }
 | 
						|
  
 | 
						|
  @keyframes ha-lds-ellipsis1 {
 | 
						|
    0% {
 | 
						|
      transform: scale(0);
 | 
						|
    }
 | 
						|
    100% {
 | 
						|
      transform: scale(1);
 | 
						|
    }
 | 
						|
  }
 | 
						|
  
 | 
						|
  @keyframes ha-lds-ellipsis3 {
 | 
						|
    0% {
 | 
						|
      transform: scale(1);
 | 
						|
    }
 | 
						|
    100% {
 | 
						|
      transform: scale(0);
 | 
						|
    }
 | 
						|
  }
 | 
						|
  
 | 
						|
  @keyframes ha-lds-ellipsis2 {
 | 
						|
    0% {
 | 
						|
      transform: translate(0, 0);
 | 
						|
    }
 | 
						|
    100% {
 | 
						|
      transform: translate(16px, 0);
 | 
						|
    }
 | 
						|
  }
 | 
						|
  
 | 
						|
  .ha-cross::before,
 | 
						|
  .ha-cross::after {
 | 
						|
    content: "";
 | 
						|
  }
 | 
						|
  
 | 
						|
  .ha-cross::before {
 | 
						|
    -webkit-transform: skewY(-27deg);
 | 
						|
    transform: skewY(-27deg);
 | 
						|
  } |