Safi-Edv Arabic-Blue Best Blue ChatGPT Theme by safwan-nj

/* ==UserStyle==
@name         Safi-Edv Arabic-Blue Best Blue ChatGPT Theme
@namespace    USO Archive
@author       Safwan Al Najjar
@description  Best Blue style for ChatGPT works with no extensions.
it supports right-to-left for arabic paragraphs, but left-to-right for the codes parts
@version      20240605.02.0
@license      NONE
@preprocessor uso
==/UserStyle== */
/* ==UserStyle==
@name         Safi-Edv Arabic-Blue Best Blue ChatGPT Theme
@version      20240605.02.0
@namespace    ?
==/UserStyle== */
@-moz-document domain("chatgpt.com") {
	main > div > div:first-child {
		background:rgba(21, 38, 55, .6) !important;
	}

	@keyframes grow {
		from {
			height: 0%;
		}

		10% {
			height: 20%;
		}

		to {
			height: 60%;
		}
	}

	nav {
		background: rgba(35, 65, 95, .3) !important;
	}

	nav .flex-col > .flex-col > a {
		transition: background 100ms;
	}


	.dark\:md\:bg-vert-dark-gradient {
		backdrop-filter: blur(10px);
	}
    .p-4 {
        padding: 1rem;
        direction: ltr !important;
    }
    .sticky, .pt-2{
        background:rgba(19, 34, 48, .81) !important;
    }
    form div div:last-child {
        border-radius:15px;
        background-color: rgba(7, 16, 25, .65)!important;
        box-shadow: 0 0 5px rgba(7, 87, 199, .05), 2px 0 5px rgba(4, 101, 231, .31) !important;
    }
    
    .dark .dark\:bg-transparent {
        background-color: rgba(8, 45, 74, .35) !important;
    }
    .react-scroll-to-bottom--css-xwpox-1n7m0yu {
        height: 100%;
        overflow-y: auto;
        width: 100%;
        background: rgba(35, 65, 95, .3) !important;
        
    }
    .group {
        background:rgba(35, 65, 95, .14) !important;
        border-radius: .5rem !important;
        box-shadow: 0 0 5px rgba(7, 87, 199, .05), 2px 0 5px rgba(4, 101, 231, .31) !important;
        margin-bottom:15px;
    }
    
    .icon-md {
        color: rgb(110, 197, 240) !important;
        stroke-width: 1.5;
        box-shadow: 15px 0 15px rgba(6, 117, 172, .12), 0 0 15px rgba(2, 30, 38, .28) !important;
    }

        
	.bg-gradient-to-l {
		display: none;
	}


	.md\:w-\[260px\] {
		width: 290px;
		padding: 0px !important;
		background: linear-gradient(45deg, rgba(10, 82, 118, 0.65), rgba(47, 47, 47, 0.44));
		backdrop-filter: blur(30px);
	}

	.duration-200,
	.dark .btn-neutral,
	.pr-14 {
		transition-duration: .5s;
		transition-property: all;
	}

	#gptx-nav-wrapper {
		right: 0 !important;
		left: 0 !important;
	}

	.xl\:max-w-3xl {
		max-width: 1200px;
	}

	.dark .dark\:bg-\[\#444654\] {
		border-left: solid 3px rgb(6, 117, 172) !important;
		background: rgb(37, 37, 37);
		box-shadow: inset 30px 0px 30px -30px rgb(6, 117, 172) !important;
	}

	.dark .btn-neutral {
		border-color: rgb(86, 88, 105, 0.28);
		border-radius: .5rem
		background-color: rgba(67, 67, 67, .51);
		backdrop-filter: blur(10px);
	}

	.dark .dark\:shadow-\[0_0_15px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
		border-color: rgb(86, 88, 105, 0.28);
		border-radius: 4px;
		background: transparent;
		backdrop-filter: blur(10px);
	}

	.dark .dark\:text-gray-100 {
		border-left: solid 3px rgb(125, 139, 141);
		box-shadow: inset 30px 0px 30px -30px rgb(125, 139, 141);
	}

	#gptx-navbar .dark\:text-gray-100 {
		border-left: none !important;
		box-shadow: none;
	}

	.dark .dark\:bg-vert-dark-gradient {
		background-image: linear-gradient(0deg, rgba(53, 55, 64, 0), rgba(0, 0, 0, 0.68) 58.85%) !important;
	}

	.md\:pl-\[260px\] {
		padding-left: 135px;
	}

	.rounded-sm {
		border-radius: 4px;
	}

	.dark .dark\:bg-gray-800 {
		background: linear-gradient(270deg, rgba(29, 74, 81, 0.6), rgba(0, 0, 0, 0.41));
	}

	.bg-orange-500\/80 {
		background: linear-gradient(270deg, rgb(224, 108, 43), rgb(163, 51, 16));
	}

	.dark .dark\:bg-gray-800\/75 {
		background: rgba(0, 0, 0, 0.2) !important;
		backdrop-filter: saturate(1.5);
	}

	.text-gray-800.w-full.md\:max-w-2xl.lg\:max-w-3xl.md\:h-full.md\:flex.md\:flex-col.px-6.dark\:text-gray-100 {
		border: transparent;
		box-shadow: 0px 0px transparent;
	}

	.flex.flex-col.items-center.text-sm.dark\:bg-gray-800 {
		background: transparent;
	}

	.dark .dark\:bg-gray-900 {
		background: transparent;
		backdrop-filter: blur(20px);
	}

	.gap-2 {
		border-radius: 1px;
	}

	.dark .dark\:text-gray-400 {
		background: radial-gradient(rgb(0, 0, 0), transparent);
	}

	.text-gray-200 {
		background: linear-gradient(135deg, rgba(125, 139, 141, 0.53), rgba(126, 136, 140, 0));
	}

	.p-2 {
		width: 100%;
	}

	.from-gray-800 {
		visibility: hidden;
	}

	.lg\:px-0 {
		padding-right: 16px;
		padding-left: 16px;
	}

	.from-gray-900 {
		visibility: hidden;
	}

	.hover\:bg-\[\#2A2B32\]:hover {
		background: rgba(255, 255, 255, 0.04);
	}

	.dark .dark\:md\:bg-vert-dark-gradient {
		background: linear-gradient(180deg, rgba(125, 139, 141, 0), rgb(19, 19, 19)) !important;
	}

	.react-scroll-to-bottom--css-ckmzr-1n7m0yu::-webkit-scrollbar-thumb {
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.18));
	}

	*,
	:after,
	:before {
		box-sizing: border-box;
	}

	*:focus {
		outline: none;
	}

	input:focus,
	textarea:focus,
	select:focus {
		outline: none;
	}

	.btn {
		transition: all 0.3s ease;
        border:none;
        background-color: transparent !important;        
	}
    .btn div{
    font-size: 14px;
    padding:.5rem;
    color: rgb(255, 255, 255);
    border-left: solid 3px rgb(6, 117, 172) !important;
    border-right: solid 3px rgb(6, 117, 172) !important;
    background-color:transparent !important;
    
	}

	.btn:hover , .btn div:hover,
	.duration-200:hover,
	.dark .btn-neutral:hover,
	.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.cursor-pointer.break-all.group:hover {
		background: rgb(6, 117, 172) !important;
	}
    div .relative .rounded-3xl{
        background-color: rgba(7, 16, 25, .65)!important;
        border: solid 1px rgb(100, 125, 172) !important;
        direction:rtl;
        right:0 !important;
        margin-left:3rem !important;
        
        
        
    }

	::-webkit-scrollbar {
		width: .5rem;
		height: 1rem;
		box-shadow: 5px 5px 2px rgb(31, 31, 32);
	}

	.dark .dark\:border-gray-900\/50 {
		border-color: rgba(63, 63, 63, .5);
	}

	.dark .dark\:bg-gray-700 {
		background-color: rgba(34, 35, 39, 1);
		--tw-bg-opacity: 0;
	}

	.dark .dark\:bg-\[\#444654\] {
		--tw-bg-opacity: 1;
	}

	.dark .dark\:bg-gray-800 {
		--tw-bg-opacity: 1;
	}

	.dark .dark\:md\:bg-vert-dark-gradient {
		background-image: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(28, 28, 28) 58.85%);
	}

	.dark .btn-neutral {
		color: rgba(217, 217, 227, var(--tw-text-opacity));
		--tw-border-opacity: 1;
		--tw-bg-opacity: 1;
		--tw-text-opacity: 1;
	}

	.dark .dark\:bg-gray-700 {
		box-shadow: 5px 5px 2px rgba(19, 19, 19, .75);
	}

	.element-class {
		background-image: linear-gradient(to left, rgb(0, 0, 0), rgb(255, 255, 255));
	}

	.bg-gray-900 {
		background-color: rgba(20, 20, 20, 1);
		box-shadow: 6px 6px 4px rgba(0, 0, 0, .81);
	}

	.transition-colors {
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
		transition-duration: .15s;
		transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	}

	.absolute.inset-y-0.right-0.w-8.z-10.bg-gradient-to-l.from-gray-900 {
		background-image: linear-gradient(to left, rgba(42, 43, 50, 0), rgba(26, 27, 32, 0));
	}

	.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.cursor-pointer.break-all.group.selected {
		padding-right: 4px;
		background-color: rgb(30, 30, 30);
		box-shadow: 2px 2px 4px rgb(0, 0, 0);
	}

	#my-account-button + .text-sm,
	#newsletter-button {
		display: none;
	}

	.flex.flex-col.gap-2.text-gray-100.text-sm {
		background-color: rgba(20, 20, 20, var(--tw-bg-opacity));
		box-shadow: 5px 5px 2px #1f1f20;
	}
}