mirror of
				https://github.com/owncast/owncast.git
				synced 2025-11-04 13:27:21 +08:00 
			
		
		
		
	
		
			
				
	
	
		
			72 lines
		
	
	
		
			1.2 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
			
		
		
	
	
			72 lines
		
	
	
		
			1.2 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
$border-style: 3px solid currentColor;
 | 
						|
$p-size: 5px;
 | 
						|
 | 
						|
.root {
 | 
						|
  * {
 | 
						|
    z-index: 100;
 | 
						|
  }
 | 
						|
  border-left: $border-style;
 | 
						|
  position: relative;
 | 
						|
  font-size: 0.9rem;
 | 
						|
  padding: 0px $p-size $p-size $p-size;
 | 
						|
  .user {
 | 
						|
    display: flex;
 | 
						|
    align-items: center;
 | 
						|
    font-family: var(--theme-text-display-font-family);
 | 
						|
    font-weight: bold;
 | 
						|
  }
 | 
						|
 | 
						|
  .message {
 | 
						|
    overflow: hidden;
 | 
						|
    overflow-wrap: anywhere;
 | 
						|
    font-weight: 600;
 | 
						|
 | 
						|
    mark {
 | 
						|
      padding-left: 0.35em;
 | 
						|
      padding-right: 0.35em;
 | 
						|
      color: var(--theme-color-palette-12);
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  &.ownMessage {
 | 
						|
    border-left: none;
 | 
						|
    border-right: $border-style;
 | 
						|
    .background {
 | 
						|
      position: absolute;
 | 
						|
      z-index: -1;
 | 
						|
      top: 0px;
 | 
						|
      left: 0px;
 | 
						|
      width: 100%;
 | 
						|
      height: 100%;
 | 
						|
      background-color: currentColor;
 | 
						|
      opacity: 0.07;
 | 
						|
      border-radius: 0.25rem;
 | 
						|
      overflow: hidden;
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  .modMenuWrapper {
 | 
						|
    position: absolute;
 | 
						|
    display: none;
 | 
						|
    top: 0;
 | 
						|
    right: 10px;
 | 
						|
    & button:focus,
 | 
						|
    & button:active {
 | 
						|
      display: block !important;
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  &:hover .modMenuWrapper {
 | 
						|
    display: block;
 | 
						|
  }
 | 
						|
}
 | 
						|
 | 
						|
.messagePadding {
 | 
						|
  padding: 0px 0px;
 | 
						|
  padding-top: .4rem;
 | 
						|
}
 | 
						|
 | 
						|
.messagePaddingCollapsed {
 | 
						|
  padding: 0px 0px;
 | 
						|
}
 |