zhaoguiyang.site/src/styles/global.css

@import "tailwindcss";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@custom-variant dark (&:where(.dark, .dark *));

@theme {
	--font-montserrat: "Montserrat", sans-serif;
	--font-roboto: "Roboto", sans-serif;
	--font-opensans: "Open Sans", sans-serif;
	--color-blacktext: #171717;
	--color-mint-50: #ecfdf5;
	--color-mint-100: #d0fbe5;
	--color-mint-200: #a4f4cf;
	--color-mint-300: #6ce9b7;
	--color-mint-400: #31d69a;
	--color-mint-500: #0dbc82;
	--color-mint-600: #03986a;
	--color-mint-700: #027a58;
	--color-mint-800: #056047;
	--color-mint-900: #054f3c;
	--color-mint-950: #012d22;

	--color-riptide-50: #f0fdfa;
	--color-riptide-100: #cbfcf1;
	--color-riptide-200: #96f7e4;
	--color-riptide-300: #5cecd5;
	--color-riptide-400: #2bd6c1;
	--color-riptide-500: #12baa8;
	--color-riptide-600: #0b9689;
	--color-riptide-700: #0e776f;
	--color-riptide-800: #105f5a;
	--color-riptide-900: #124f4b;
	--color-riptide-950: #03302f;

	--animate-rotate: rotate 10s linear infinite;

	--animate-rotate-border: border-rotate 3s linear infinite;
	@keyframes border-rotate {
		to {
			 --border-angle: 360deg;
		}
	}
	
}

@property --border-angle{
	  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

::selection {
	@apply text-white bg-mint-500;
	
  }
*::-webkit-scrollbar-thumb{
	border-radius: 20px;
}
.dark *{
	scrollbar-color: #6ce9b7 #012d22;
	scrollbar-width: thin;
}
 *{
	scrollbar-color: #6ce9b7 #d0fbe5;
	scrollbar-width: thin;
}


pre, .dark pre {
	scrollbar-color: #686868 #424242;
	scrollbar-width:initial;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg) scale(10);
	}

	100% {
		transform: rotate(-360deg) scale(10);
	}
}

a.inline-block.leading-5.pl-12{
	@apply text-sm;
}
#toc-list a[href="#"]{
	@apply  font-bold dark:text-white text-blacktext;
}
.markdown h2 {
	@apply dark:text-white text-blacktext  text-3xl font-bold  mt-16 mb-10;
}
.markdown h3 {
	@apply text-2xl font-bold dark:text-white text-blacktext mt-6 mb-4;
}
.markdown h4 {
	@apply text-xl dark:text-white text-blacktext font-bold  mt-6 mb-4;
}
.markdown h5 {
	@apply text-lg font-bold dark:text-white text-blacktext mt-6 mb-4;
}
.markdown h6 {
	@apply text-base font-bold dark:text-white text-blacktext mt-6 mb-4;
}


.markdown p {
	@apply tracking-normal font-montserrat text-pretty text-xl max-md:text-lg text-blacktext dark:text-gray-200 mb-8 leading-8;
}

.markdown a {
	@apply text-xl max-md:text-lg font-semibold dark:!text-riptide-300 !text-mint-500 underline hover:!text-riptide-400 transition-all;
}

.markdown ol{
	@apply list-decimal;
}
.markdown ul{
	@apply list-disc;
}
.markdown ul, .markdown ol{
	@apply text-xl dark:text-gray-200 text-blacktext  max-md:text-lg  pl-4 pb-0;
}

.markdown li {
	@apply text-xl dark:text-gray-200 text-blacktext  max-md:text-lg py-1;
}

.markdown hr {
	@apply dark:text-mint-300/50 text-blacktext/30;

}

.markdown blockquote {
	@apply py-4 border-l-4 border-mint-500 pl-4 italic text-blacktext dark:text-mint-200 bg-mint-50 dark:bg-mint-900/20 backdrop-blur-lg;
}

.markdown blockquote p {
	@apply mb-0;
}

.markdown blockquote {
	@apply mb-8;
}

.markdown :not(pre)>code {
	@apply px-2 py-0.5;
}

.markdown pre {
	@apply  w-full h-full px-8 py-12   ;
} 

.markdown strong{
	@apply font-bold;
}

.code-block-efe {
	@apply  w-full rounded-lg h-auto overflow-hidden my-8 ;
}


.contains-task-list {
	@apply space-y-2;
  }	
  
  .task-list-item {
	@apply flex items-center gap-4;
  }
  
  .task-list-item input[type="checkbox"] {
	@apply w-5 h-5 accent-mint-300;
  }
  
  .task-list-item input[type="checkbox"]:checked + span {
	@apply line-through text-mint-600;
  }
  
  .task-list-item span {
	@apply text-gray-800;
  }

.expanded {
	@apply transition-all duration-700 w-full !flex !flex-col left-0 top-full mt-4 absolute shadow-xl  dark:text-zinc-300 bg-gradient-to-t from-white to-white/90 dark:from-zinc-950 dark:to-zinc-950/80 bg-clip-padding backdrop-filter backdrop-blur backdrop-saturate-100 backdrop-contrast-100;
}



.hamburger-icon {
	display: none;
  }
  
  .hamburger .bars-icon {
	display: block;  /* Mostrar icono de 'bars' por defecto */
  }
  
  .hamburger.active .bars-icon {
	display: none;  /* Ocultar icono de 'bars' cuando .active está presente */
  }
  
  .hamburger.active .xmark-icon {
	display: block;  /* Mostrar icono de 'xmark' cuando .active está presente */
  }
  
* {
	box-sizing: border-box;
}


/* estilos de la barra de navegación*/
.hamburger {

	cursor: pointer;
}

.nav-links {
	display: none;
	
}


@media screen and (min-width: 768px) {

	.nav-links {
		display: flex;
	}

	.hamburger {
		display: none;
	}


}


.blur-circle::after {
	content: "";
	display: block;
	width: 400px;
	height: 400px;
	background: #31d69a40;
	bottom: -400px;
	right: -300px;
	position: fixed;
	z-index: -1;
	border-radius: 50%;
	filter: blur(159px);

}


.blur-circle {
	background-color: rgba(87, 253, 228, 0.29);
	position: absolute;
	width: 200px;
	height: 200px;
	top: 100px;
	right: 100px;
	border-radius: 999px;
	filter: blur(150px);
	overflow: hidden;
	z-index: -1;
}

.dark .blur-circle::after {
	content: "";
	display: block;
	width: 500px;
	height: 500px;
	background: #31d69945 !important;
	bottom: 00px;
	right: 0px;
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(50px);

}

.dark .blur-circle::after {
	content: "";
	display: block;
	width: 500px;
	height: 500px;
	background: #50fd8f25 !important;
	bottom: -150px;
	right: -150px;
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(10px);

}

.copy-code svg{
	@apply size-5;
}
.copy-code{
	@apply absolute  text-slate-400 text-xs cursor-pointer bg-slate-600/50 border hover:bg-transparent border-slate-500 p-2.5 rounded-md top-4 right-4 flex transition-all duration-300 max-md:opacity-100 min-md:opacity-0 group-hover:opacity-100 items-center justify-center;
}