mirror of
				https://github.com/vyos/vyos-documentation.git
				synced 2025-10-26 08:41:46 +01:00 
			
		
		
		
	
		
			
				
	
	
		
			124 lines
		
	
	
		
			2.2 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			124 lines
		
	
	
		
			2.2 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| div {
 | |
|   &.note,
 | |
|   &.hint,
 | |
|   &.warning,
 | |
|   &.error,
 | |
|   &.seealso,
 | |
|   &.tip {
 | |
|     border-radius: 8px;
 | |
| 
 | |
|     & > .admonition-title {
 | |
|       padding: 5px 8px;
 | |
|       border-radius: 6px;
 | |
|       font-family: 'Archivo', sans-serif !important;
 | |
|       font-size: 14px !important;
 | |
|       letter-spacing: -0.02em !important;
 | |
|       font-weight: 600 !important;
 | |
|       margin: -12px -16px 12px;
 | |
|     }
 | |
| 
 | |
|     & > .admonition-title::before {
 | |
|       content: url('../images/note-icon.svg');
 | |
|     }
 | |
| 
 | |
|     & > .highlight-none {
 | |
|       margin-top: 10px;
 | |
|     }
 | |
| 
 | |
|     & > p:nth-child(1n+2) {
 | |
|       font-family: 'Roboto', sans-serif;
 | |
|       font-size: 16px;
 | |
|       letter-spacing: -0.5px;
 | |
|       color: #525659;
 | |
|       font-weight: 400;
 | |
|       margin: 10px 0 0 0  !important;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   &.note,
 | |
|   &.seealso {
 | |
|     background-color: #F5FCFF !important;
 | |
|   }
 | |
| 
 | |
|   &.note:has(a.reference),
 | |
|   &.hint:has(a.reference),
 | |
|   &.warning:has(a.reference),
 | |
|   &.error:has(a.reference),
 | |
|   &.seealso:has(a.reference),
 | |
|   &.tip:has(a.reference) {
 | |
|     & a.reference,
 | |
|     & a.reference span {
 | |
|       color: #508EEB !important;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   &.note,
 | |
|   &.seealso {
 | |
|     & > .admonition-title {
 | |
|       background-color: #CCEFFB !important;
 | |
|       color: #356E81 !important;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   &.hint,
 | |
|   &.tip {
 | |
|     background-color: #F7FDFB !important;
 | |
| 
 | |
|     & > .admonition-title {
 | |
|       background-color: #C6F0E3 !important;
 | |
|       color: #3F6461 !important;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   &.warning,
 | |
|   &.error {
 | |
|     background-color: #FDF7F7 !important;
 | |
| 
 | |
|     & > .admonition-title {
 | |
|       background-color: #F0C6C6 !important;
 | |
|       color: #8E2F2F !important;
 | |
|     }
 | |
|   }
 | |
| 
 | |
| }
 | |
| 
 | |
| #running-on-bare-metal div.note > p:nth-child(2) {
 | |
|   padding: 8px 12px 0 12px;
 | |
| }
 | |
| 
 | |
| @media screen and (max-width: 575px) {
 | |
|   div.note,
 | |
|   div.hint,
 | |
|   div.warning,
 | |
|   div.error,
 | |
|   div.seealso,
 | |
|   div.tip {
 | |
|     padding: 24px 32px !important;
 | |
|     border-radius: 8px;
 | |
|   }
 | |
| }
 | |
| 
 | |
| @media screen and (min-width: 576px) and (max-width: 991px) {
 | |
|   div.note,
 | |
|   div.hint,
 | |
|   div.warning,
 | |
|   div.error,
 | |
|   div.seealso,
 | |
|   div.tip {
 | |
|     padding: 24px 32px !important;
 | |
|     border-radius: 8px;
 | |
|   }
 | |
| }
 | |
| 
 | |
| @media screen and (min-width: 992px) {
 | |
|   div.note,
 | |
|   div.hint,
 | |
|   div.warning,
 | |
|   div.error,
 | |
|   div.seealso,
 | |
|   div.tip {
 | |
|     padding: 24px 32px !important;
 | |
|     border-radius: 8px;
 | |
|   }
 | |
| }
 |