☰

Greasyfork 暗黑主题

为 Greasyfork 打造的时尚现代暗黑主题。

安装此脚本？
作者推荐脚本

您可能也喜欢Greasyfork 糊裱匠。

安装此脚本 
  1. // ==UserScript==
  2. // @name           Greasyfork Dark Theme
  3. // @name:en        Greasyfork Dark Theme
  4. // @name:vi        Giao diện chủ đề tối Greasyfork
  5. // @name:zh-CN     Greasyfork 暗黑主题
  6. // @name:zh-TW     Greasyfork 暗黑主題
  7. // @name:ja        Greasyfork ダークテーマ
  8. // @name:ko        Greasyfork 다크 테마
  9. // @name:es        Greasyfork 테마 어두움
  10. // @name:ru        Темная тема Greasyfork
  11. // @name:id        Tema Gelap Greasyfork
  12. // @name:hi        Greasyfork डार्क थीम
  13. // @namespace      http://tampermonkey.net/
  14. // @version        1.8.2
  15. // @description    A sleek and modern dark theme for Greasyfork.
  16. // @description:en A sleek and modern dark theme for Greasyfork.
  17. // @description:vi Giao diện chủ đề tối cho Greasyfork.
  18. // @description:zh-CN 为 Greasyfork 打造的时尚现代暗黑主题。
  19. // @description:zh-TW 為 Greasyfork 打造的時尚現代暗黑主題。
  20. // @description:ja Greasyfork の洗練されたモダンなダークテーマ。
  21. // @description:ko Greasyfork를 위한 세련되고 현대적인 다크 테마。
  22. // @description:es Un tema oscuro elegante y moderno para Greasyfork.
  23. // @description:ru Изящная и современная темная тема для Greasyfork с улучшенными визуальными эффектами и удобочитаемостью.
  24. // @description:id Tema gelap yang ramping dan modern untuk Greasyfork, dengan visual dan keterbacaan yang ditingkatkan.
  25. // @description:hi Greasyfork के लिए एक आकर्षक और आधुनिक डार्क थीम, जिसमें बेहतर विजुअल और पठनीयता है।
  26. // @author         RenjiYuusei
  27. // @license        GPL-3.0-only
  28. // @icon           https://greasyfork.org/vite/assets/blacklogo96-CxYTSM_T.png
  29. // @match          https://greasyfork.org/*
  30. // @match          https://sleazyfork.org/*
  31. // @grant          GM_addStyle
  32. // ==/UserScript==
  33.  
  34. (() => {
  35. 	'use strict';
  36.  
  37. 	// Định nghĩa biến màu và cấu hình
  38. 	const colors = {
  39. 		header: 'rgb(32, 33, 36)',
  40. 		dark: {
  41. 			1: 'rgb(32, 33, 36)',
  42. 			2: 'rgb(40, 41, 45)',
  43. 			3: 'rgb(48, 49, 54)',
  44. 			4: 'rgb(55, 56, 62)',
  45. 			5: 'rgb(62, 63, 69)',
  46. 		},
  47. 		blue: {
  48. 			1: 'rgb(138, 180, 248)',
  49. 			2: 'rgb(138, 180, 248)',
  50. 			3: 'rgb(120, 160, 255)',
  51. 			pool: 'rgb(138, 180, 248)',
  52. 		},
  53. 		accent: {
  54. 			lavender: 'rgb(204, 120, 250)',
  55. 			green: 'rgb(106, 135, 89)',
  56. 			pink: 'rgb(198, 120, 221)',
  57. 			lightBrown: 'rgb(190, 144, 99)',
  58. 			red: 'rgb(204, 120, 50)',
  59. 			yellow: 'rgb(255, 198, 109)',
  60. 			lightYellow: 'rgb(255, 198, 109)',
  61. 			blueIce: 'rgb(169, 183, 198)',
  62. 			orange: 'rgb(204, 120, 50)',
  63. 			purple: 'rgb(155, 89, 182)',
  64. 			teal: 'rgb(100, 180, 160)',
  65. 			coral: 'rgb(255, 127, 80)',
  66. 		},
  67. 		text: {
  68. 			light: 'rgb(169, 183, 198)',
  69. 			success: 'rgba(106, 135, 89, 0.6)',
  70. 			error: 'rgba(204, 120, 50, 0.6)',
  71. 			warning: 'rgba(255, 198, 109, 0.6)',
  72. 			info: 'rgba(138, 180, 248, 0.6)',
  73. 		},
  74. 		utils: {
  75. 			translucent: 'rgba(255, 255, 255, .2)',
  76. 			black: 'rgba(0, 0, 0, 1)',
  77. 			overlay: 'rgba(0, 0, 0, 0.5)',
  78. 			shadow: 'rgba(0, 0, 0, 0.15)',
  79. 		},
  80. 		gradient: {
  81. 			primary: 'linear-gradient(45deg, var(--blue-1), var(--lavender))',
  82. 			secondary: 'linear-gradient(45deg, var(--green), var(--blue-ice))',
  83. 		},
  84. 	};
  85.  
  86. 	// Cấu hình giao diện
  87. 	const config = {
  88. 		borderRadius: '8px',
  89. 		wrapCode: true,
  90. 		modHeaders: true,
  91. 		invertBkgHPP: false,
  92. 		modScrollbars: true,
  93. 		animations: true,
  94. 		glassmorphism: true,
  95. 		customFonts: true,
  96. 		darkMode: {
  97. 			auto: true,
  98. 			level: 'dark',
  99. 		},
  100. 		performance: {
  101. 			reducedMotion: false,
  102. 			optimizeRendering: true,
  103. 		},
  104. 	};
  105.  
  106. 	// Tạo biến CSS root với các biến mới
  107. 	const createRootVars = () => {
  108. 		const vars = {
  109. 			'--dark-1': colors.dark[1],
  110. 			'--dark-2': colors.dark[2],
  111. 			'--dark-3': colors.dark[3],
  112. 			'--dark-4': colors.dark[4],
  113. 			'--dark-5': colors.dark[5],
  114. 			'--blue-1': colors.blue[1],
  115. 			'--blue-2': colors.blue[2],
  116. 			'--blue-3': colors.blue[3],
  117. 			'--blue-pool': colors.blue.pool,
  118. 			'--lavender': colors.accent.lavender,
  119. 			'--green': colors.accent.green,
  120. 			'--pink': colors.accent.pink,
  121. 			'--light-brown': colors.accent.lightBrown,
  122. 			'--red': colors.accent.red,
  123. 			'--yellow': colors.accent.yellow,
  124. 			'--light-yellow': colors.accent.lightYellow,
  125. 			'--blue-ice': colors.accent.blueIce,
  126. 			'--orange': colors.accent.orange,
  127. 			'--purple': colors.accent.purple,
  128. 			'--teal': colors.accent.teal,
  129. 			'--coral': colors.accent.coral,
  130. 			'--light-gray': colors.text.light,
  131. 			'--light-green': colors.text.success,
  132. 			'--light-red': colors.text.error,
  133. 			'--light-warning': colors.text.warning,
  134. 			'--light-info': colors.text.info,
  135. 			'--translucent': colors.utils.translucent,
  136. 			'--black': colors.utils.black,
  137. 			'--overlay': colors.utils.overlay,
  138. 			'--shadow': colors.utils.shadow,
  139. 			'--gradient-primary': colors.gradient.primary,
  140. 			'--gradient-secondary': colors.gradient.secondary,
  141. 			'--default-border-radius': config.borderRadius,
  142. 			'--transition-speed': config.performance.reducedMotion ? '0s' : '0.3s',
  143. 			'--font-primary': '"Segoe UI", system-ui, -apple-system, sans-serif',
  144. 			'--font-code': '"Fira Code", monospace',
  145. 		};
  146.  
  147. 		return Object.entries(vars)
  148. 			.map(([key, value]) => `${key}: ${value} !important;`)
  149. 			.join('\n');
  150. 	};
  151.  
  152. 	// Tạo CSS styles với các cải tiến mới
  153. 	const css = `
  154.     :root {
  155.       ${createRootVars()}
  156.     }
  157.  
  158.     /* Base styles */
  159.     body {
  160.       background-color: var(--dark-3) !important;
  161.       color: var(--light-gray) !important;
  162.       font-size: 14px !important;
  163.       line-height: 1.5 !important;
  164.       font-family: var(--font-primary) !important;
  165.       transition: background-color var(--transition-speed) ease !important;
  166.       will-change: transform !important;
  167.       backface-visibility: hidden !important;
  168.       -webkit-font-smoothing: antialiased !important;
  169.     }
  170.  
  171.     /* Header styles với glassmorphism */
  172.     #main-header {
  173.       ${config.modHeaders ? 'background-image: none !important;' : ''}
  174.       background-color: ${config.glassmorphism ? 'rgba(32, 33, 36, 0.8)' : colors.header} !important;
  175.       backdrop-filter: ${config.glassmorphism ? 'blur(10px)' : 'none'} !important;
  176.       padding: 10px 0 !important;
  177.       position: sticky !important;
  178.       top: 0 !important;
  179.       z-index: 1000 !important;
  180.       box-shadow: 0 1px 3px var(--shadow) !important;
  181.     }
  182.  
  183.     #main-header .width-constraint {
  184.       display: flex !important;
  185.       align-items: center !important;
  186.       justify-content: space-between !important;
  187.       flex-wrap: wrap !important;
  188.       max-width: 1200px !important;
  189.       margin: 0 auto !important;
  190.       padding: 0 20px !important;
  191.     }
  192.  
  193.     #main-header,
  194.     #main-header a,
  195.     #main-header a:visited,
  196.     #main-header a:active {
  197.       color: var(--light-gray) !important;
  198.       text-decoration: none !important;
  199.     }
  200.  
  201.     /* Navigation styles với animation */
  202.     nav {
  203.       background-color: var(--dark-3) !important;
  204.       border: 1px solid var(--dark-2) !important;
  205.       box-shadow: 0 1px 2px var(--shadow) !important;
  206.       border-radius: var(--default-border-radius) !important;
  207.       margin: 8px 0 !important;
  208.       transition: all var(--transition-speed) ease !important;
  209.       will-change: transform !important;
  210.     }
  211.  
  212.     nav ul {
  213.       display: flex !important;
  214.       flex-wrap: wrap !important;
  215.       gap: 15px !important;
  216.       padding: 10px !important;
  217.       margin: 0 !important;
  218.       list-style: none !important;
  219.     }
  220.  
  221.     nav li {
  222.       margin: 0 !important;
  223.     }
  224.  
  225.     nav a {
  226.       padding: 8px 15px !important;
  227.       border-radius: var(--default-border-radius) !important;
  228.       transition: all var(--transition-speed) ease !important;
  229.       position: relative !important;
  230.       overflow: hidden !important;
  231.       will-change: transform !important;
  232.     }
  233.  
  234.     nav a:hover {
  235.       background-color: var(--dark-4) !important;
  236.       transform: translateY(-2px) !important;
  237.     }
  238.  
  239.     nav a::after {
  240.       content: '' !important;
  241.       position: absolute !important;
  242.       bottom: 0 !important;
  243.       left: 0 !important;
  244.       width: 100% !important;
  245.       height: 2px !important;
  246.       background: var(--gradient-primary) !important;
  247.       transform: scaleX(0) !important;
  248.       transition: transform var(--transition-speed) ease !important;
  249.       will-change: transform !important;
  250.     }
  251.  
  252.     nav a:hover::after {
  253.       transform: scaleX(1) !important;
  254.     }
  255.  
  256.     /* Link styles với hiệu ứng */
  257.     a:not(.install-link, .install-help-link) {
  258.       color: var(--blue-1) !important;
  259.       text-decoration: none !important;
  260.       transition: all var(--transition-speed) ease !important;
  261.       position: relative !important;
  262.       will-change: transform !important;
  263.     }
  264.  
  265.     a:not(.install-link, .install-help-link):hover {
  266.       color: var(--blue-ice) !important;
  267.       text-decoration: none !important;
  268.     }
  269.  
  270.     a:not(.install-link, .install-help-link)::after {
  271.       content: '' !important;
  272.       position: absolute !important;
  273.       width: 100% !important;
  274.       height: 1px !important;
  275.       bottom: -2px !important;
  276.       left: 0 !important;
  277.       background-color: var(--blue-ice) !important;
  278.       transform: scaleX(0) !important;
  279.       transform-origin: right !important;
  280.       transition: transform var(--transition-speed) ease !important;
  281.       will-change: transform !important;
  282.     }
  283.  
  284.     a:not(.install-link, .install-help-link):hover::after {
  285.       transform: scaleX(1) !important;
  286.       transform-origin: left !important;
  287.     }
  288.  
  289.     /* Content containers với glassmorphism */
  290.     .script-list,
  291.     .user-list,
  292.     .text-content,
  293.     .discussion-list,
  294.     .list-option-group ul,
  295.     #script-info,
  296.     .discussion-read,
  297.     #discussion-locale,
  298.     #about-user,
  299.     .form-section,
  300.     .script-screenshot-control {
  301.       ${config.modHeaders ? 'background-image: unset !important;' : ''}
  302.       background-color: ${config.glassmorphism ? 'rgba(32, 33, 36, 0.8)' : 'var(--dark-1)'} !important;
  303.       backdrop-filter: ${config.glassmorphism ? 'blur(10px)' : 'none'} !important;
  304.       box-shadow: 0 1px 3px var(--shadow) !important;
  305.       border: 1px solid var(--dark-2) !important;
  306.       border-radius: var(--default-border-radius) !important;
  307.       padding: 15px !important;
  308.       margin-bottom: 15px !important;
  309.       transition: all var(--transition-speed) ease !important;
  310.       will-change: transform !important;
  311.     }
  312.  
  313.     /* Hover effects với animation */
  314.     .discussion-list li,
  315.     .script-list li,
  316.     .user-list li {
  317.       padding: 15px !important;
  318.       border-radius: var(--default-border-radius) !important;
  319.       transition: all var(--transition-speed) ease !important;
  320.       position: relative !important;
  321.       z-index: 1 !important;
  322.       will-change: transform !important;
  323.       transform: translateZ(0) !important;
  324.     }
  325.  
  326.     .discussion-list li:hover,
  327.     .script-list li:hover,
  328.     .user-list li:hover {
  329.       background-color: var(--dark-2) !important;
  330.       transform: translateY(-2px) translateZ(0) !important;
  331.       box-shadow: 0 5px 15px var(--shadow) !important;
  332.     }
  333.  
  334.     /* Form elements với hiệu ứng */
  335.     .default-input,
  336.     input[type="search"],
  337.     input[type="text"],
  338.     input[type="email"],
  339.     input[type="password"],
  340.     select,
  341.     textarea {
  342.       background-color: var(--dark-4) !important;
  343.       border: 2px solid var(--dark-2) !important;
  344.       color: var(--blue-ice) !important;
  345.       border-radius: var(--default-border-radius) !important;
  346.       padding: 8px 12px !important;
  347.       margin: 8px 0 !important;
  348.       width: 100% !important;
  349.       max-width: 100% !important;
  350.       transition: all var(--transition-speed) ease !important;
  351.       font-size: 14px !important;
  352.       font-family: var(--font-primary) !important;
  353.       will-change: transform !important;
  354.     }
  355.  
  356.     input:focus,
  357.     select:focus,
  358.     textarea:focus {
  359.       outline: none !important;
  360.       border-color: var(--blue-pool) !important;
  361.       box-shadow: 0 0 0 2px rgba(104, 151, 187, 0.2) !important;
  362.       transform: translateY(-1px) !important;
  363.     }
  364.  
  365.     /* Buttons với gradient và animation */
  366.     .install-link,
  367.     .install-help-link,
  368.     input[type="submit"],
  369.     .button {
  370.       background: var(--gradient-primary) !important;
  371.       color: var(--dark-1) !important;
  372.       border: none !important;
  373.       border-radius: var(--default-border-radius) !important;
  374.       padding: 8px 16px !important;
  375.       font-size: 14px !important;
  376.       font-weight: 600 !important;
  377.       cursor: pointer !important;
  378.       transition: all var(--transition-speed) ease !important;
  379.       text-align: center !important;
  380.       display: inline-block !important;
  381.       text-decoration: none !important;
  382.       margin: 5px !important;
  383.       box-shadow: 0 1px 2px var(--shadow) !important;
  384.       position: relative !important;
  385.       overflow: hidden !important;
  386.       will-change: transform !important;
  387.     }
  388.  
  389.     .install-link:hover,
  390.     .install-help-link:hover,
  391.     input[type="submit"]:hover,
  392.     .button:hover {
  393.       transform: translateY(-2px) !important;
  394.       box-shadow: 0 5px 15px var(--shadow) !important;
  395.     }
  396.  
  397.     .install-link::before,
  398.     .install-help-link::before,
  399.     input[type="submit"]::before,
  400.     .button::before {
  401.       content: '' !important;
  402.       position: absolute !important;
  403.       top: 0 !important;
  404.       left: -100% !important;
  405.       width: 100% !important;
  406.       height: 100% !important;
  407.       background: linear-gradient(
  408.         120deg,
  409.         transparent,
  410.         rgba(255, 255, 255, 0.2),
  411.         transparent
  412.       ) !important;
  413.       transition: all 0.6s ease !important;
  414.       will-change: transform !important;
  415.     }
  416.  
  417.     .install-link:hover::before,
  418.     .install-help-link:hover::before,
  419.     input[type="submit"]:hover::before,
  420.     .button:hover::before {
  421.       left: 100% !important;
  422.     }
  423.  
  424.     /* Responsive design */
  425.     @media (max-width: 1024px) {
  426.       body {
  427.         font-size: 15px !important;
  428.       }
  429.  
  430.       .width-constraint {
  431.         padding: 0 15px !important;
  432.       }
  433.       
  434.       #main-header .width-constraint {
  435.         flex-direction: column !important;
  436.         align-items: flex-start !important;
  437.       }
  438.       
  439.       nav {
  440.         display: block !important;
  441.         width: 100% !important;
  442.       }
  443.       
  444.       .menu-toggle {
  445.         display: block !important;
  446.         padding: 10px !important;
  447.         background: none !important;
  448.         border: none !important;
  449.         color: var(--light-gray) !important;
  450.         cursor: pointer !important;
  451.       }
  452.       
  453.       nav ul {
  454.         display: none !important;
  455.       }
  456.       
  457.       nav.active ul {
  458.         display: flex !important;
  459.         flex-direction: column !important;
  460.         width: 100% !important;
  461.       }
  462.       
  463.       nav li {
  464.         width: 100% !important;
  465.       }
  466.       
  467.       nav a {
  468.         display: block !important;
  469.         text-align: left !important;
  470.         padding: 12px 15px !important;
  471.       }
  472.  
  473.       /* Mobile Menu Toggle Button */
  474.       .menu-toggle {
  475.         position: absolute !important;
  476.         right: 15px !important;
  477.         top: 15px !important;
  478.         z-index: 1001 !important;
  479.         width: 30px !important;
  480.         height: 30px !important;
  481.         background: transparent !important;
  482.         border: none !important;
  483.         cursor: pointer !important;
  484.         padding: 0 !important;
  485.       }
  486.  
  487.       .menu-toggle span {
  488.         display: block !important;
  489.         width: 100% !important;
  490.         height: 2px !important;
  491.         background: var(--light-gray) !important;
  492.         margin: 6px 0 !important;
  493.         transition: all 0.3s ease !important;
  494.       }
  495.  
  496.       .menu-toggle.active span:nth-child(1) {
  497.         transform: rotate(45deg) translate(6px, 6px) !important;
  498.       }
  499.  
  500.       .menu-toggle.active span:nth-child(2) {
  501.         opacity: 0 !important;
  502.       }
  503.  
  504.       .menu-toggle.active span:nth-child(3) {
  505.         transform: rotate(-45deg) translate(6px, -6px) !important;
  506.       }
  507.  
  508.       /* Mobile Navigation */
  509.       nav {
  510.         position: fixed !important;
  511.         top: 60px !important;
  512.         left: 0 !important;
  513.         width: 100% !important;
  514.         height: auto !important;
  515.         background: var(--dark-2) !important;
  516.         transform: translateX(-100%) !important;
  517.         transition: transform 0.3s ease !important;
  518.         z-index: 1000 !important;
  519.       }
  520.  
  521.       nav.active {
  522.         transform: translateX(0) !important;
  523.       }
  524.  
  525.       nav ul {
  526.         padding: 20px !important;
  527.       }
  528.  
  529.       nav li {
  530.         margin: 10px 0 !important;
  531.       }
  532.  
  533.       nav a {
  534.         font-size: 16px !important;
  535.         padding: 12px 20px !important;
  536.         display: block !important;
  537.         color: var(--light-gray) !important;
  538.         border-radius: var(--default-border-radius) !important;
  539.       }
  540.     }
  541.  
  542.     @media (max-width: 600px) {
  543.       body {
  544.         font-size: 14px !important;
  545.       }
  546.  
  547.       #main-header .width-constraint {
  548.         padding: 0 10px !important;
  549.       }
  550.  
  551.       .script-list,
  552.       .user-list,
  553.       .text-content {
  554.         padding: 10px !important;
  555.         margin-bottom: 10px !important;
  556.       }
  557.  
  558.       .install-link,
  559.       .install-help-link,
  560.       input[type="submit"],
  561.       .button {
  562.         width: 100% !important;
  563.         margin: 5px 0 !important;
  564.         padding: 12px 16px !important;
  565.       }
  566.       
  567.       .discussion-list li,
  568.       .script-list li,
  569.       .user-list li {
  570.         padding: 10px !important;
  571.       }
  572.       
  573.       .form-section {
  574.         padding: 10px !important;
  575.       }
  576.       
  577.       input[type="search"],
  578.       input[type="text"],
  579.       input[type="email"],
  580.       input[type="password"],
  581.       select,
  582.       textarea {
  583.         padding: 10px !important;
  584.       }
  585.     }
  586.  
  587.     @media (max-width: 480px) {
  588.       body {
  589.         font-size: 13px !important;
  590.       }
  591.  
  592.       .script-list,
  593.       .user-list,
  594.       .text-content {
  595.         padding: 8px !important;
  596.       }
  597.  
  598.       input,
  599.       select,
  600.       textarea {
  601.         font-size: 16px !important;
  602.       }
  603.       
  604.       #main-header {
  605.         padding: 5px 0 !important;
  606.       }
  607.       
  608.       .width-constraint {
  609.         padding: 0 8px !important;
  610.       }
  611.       
  612.       .discussion-list li,
  613.       .script-list li,
  614.       .user-list li {
  615.         margin-bottom: 8px !important;
  616.       }
  617.       
  618.       .install-link,
  619.       .install-help-link,
  620.       input[type="submit"],
  621.       .button {
  622.         font-size: 14px !important;
  623.         padding: 10px 14px !important;
  624.       }
  625.     }
  626.  
  627.     /* Scrollbar styles với animation */
  628.     ${
  629. 		config.modScrollbars
  630. 			? `
  631.         * {
  632.           scrollbar-width: thin !important;
  633.           scrollbar-color: var(--translucent) var(--dark-2) !important;
  634.         }
  635.  
  636.         ::-webkit-scrollbar {
  637.           width: 8px !important;
  638.           height: 8px !important;
  639.         }
  640.  
  641.         ::-webkit-scrollbar-track {
  642.           background: var(--dark-2) !important;
  643.           border-radius: var(--default-border-radius) !important;
  644.         }
  645.  
  646.         ::-webkit-scrollbar-thumb {
  647.           background: var(--translucent) !important;
  648.           border-radius: var(--default-border-radius) !important;
  649.           border: 2px solid var(--dark-2) !important;
  650.           transition: all var(--transition-speed) ease !important;
  651.           will-change: transform !important;
  652.         }
  653.  
  654.         ::-webkit-scrollbar-thumb:hover {
  655.           background: var(--gradient-primary) !important;
  656.         }
  657.         `
  658. 			: ''
  659. 	}
  660.  
  661.     /* Code blocks với font và hiệu ứng mới */
  662.     pre, code {
  663.       font-family: var(--font-code) !important;
  664.       background-color: var(--dark-4) !important;
  665.       border-radius: var(--default-border-radius) !important;
  666.       padding: 0.2em 0.4em !important;
  667.       transition: all var(--transition-speed) ease !important;
  668.       will-change: transform !important;
  669.       max-width: 100% !important;
  670.       overflow-x: auto !important;
  671.     }
  672.  
  673.     pre:hover, code:hover {
  674.       background-color: var(--dark-5) !important;
  675.     }
  676.  
  677.     /* Tooltip styles mới */
  678.     [data-tooltip] {
  679.       position: relative !important;
  680.     }
  681.  
  682.     [data-tooltip]:before {
  683.       content: attr(data-tooltip) !important;
  684.       position: absolute !important;
  685.       bottom: 100% !important;
  686.       left: 50% !important;
  687.       transform: translateX(-50%) !important;
  688.       padding: 5px 10px !important;
  689.       background: var(--dark-4) !important;
  690.       color: var(--light-gray) !important;
  691.       border-radius: var(--default-border-radius) !important;
  692.       font-size: 12px !important;
  693.       white-space: nowrap !important;
  694.       opacity: 0 !important;
  695.       visibility: hidden !important;
  696.       transition: all var(--transition-speed) ease !important;
  697.       will-change: transform, opacity !important;
  698.     }
  699.  
  700.     [data-tooltip]:hover:before {
  701.       opacity: 1 !important;
  702.       visibility: visible !important;
  703.       transform: translateX(-50%) translateY(-5px) !important;
  704.     }
  705.  
  706.     /* Login Form Styles */
  707.     .centered-sections {
  708.       display: flex !important;
  709.       flex-direction: column !important;
  710.       gap: 20px !important;
  711.       max-width: 600px !important;
  712.       margin: 0 auto !important;
  713.       padding: 0 10px !important;
  714.     }
  715.  
  716.     .external-login-form {
  717.       display: flex !important;
  718.       flex-direction: column !important;
  719.       gap: 15px !important;
  720.     }
  721.  
  722.     .external-login-container {
  723.       display: block !important;
  724.       margin: 5px 0 !important;
  725.     }
  726.  
  727.     .external-login {
  728.       width: 100% !important;
  729.       padding: 12px !important;
  730.       border-radius: var(--default-border-radius) !important;
  731.       border: none !important;
  732.       color: var(--light-gray) !important;
  733.       font-weight: 600 !important;
  734.       cursor: pointer !important;
  735.       transition: all var(--transition-speed) ease !important;
  736.       will-change: transform !important;
  737.       font-size: 14px !important;
  738.     }
  739.  
  740.     .google_oauth2-login {
  741.       background-color: #4285f4 !important;
  742.     }
  743.  
  744.     .gitlab-login {
  745.       background-color: #fc6d26 !important;
  746.     }
  747.  
  748.     .github-login {
  749.       background-color: #333 !important;
  750.     }
  751.  
  752.     .external-login:hover {
  753.       transform: translateY(-2px) !important;
  754.       box-shadow: 0 5px 15px var(--shadow) !important;
  755.     }
  756.  
  757.     .remember-me {
  758.       display: flex !important;
  759.       align-items: center !important;
  760.       gap: 8px !important;
  761.       margin: 10px 0 !important;
  762.     }
  763.  
  764.     .remember-me input[type="checkbox"] {
  765.       width: auto !important;
  766.       margin: 0 !important;
  767.       height: 20px !important;
  768.       width: 20px !important;
  769.     }
  770.  
  771.     .field {
  772.       margin-bottom: 15px !important;
  773.     }
  774.  
  775.     .field label {
  776.       display: block !important;
  777.       margin-bottom: 5px !important;
  778.       color: var(--light-gray) !important;
  779.       font-size: 14px !important;
  780.     }
  781.  
  782.     .actions {
  783.       margin-top: 20px !important;
  784.     }
  785.  
  786.     .width-constraint {
  787.       max-width: 1200px !important;
  788.       margin: 0 auto !important;
  789.       padding: 20px !important;
  790.     }
  791.  
  792.     .text-content {
  793.       background-color: var(--dark-2) !important;
  794.       padding: 15px !important;
  795.       border-radius: var(--default-border-radius) !important;
  796.       margin-bottom: 15px !important;
  797.     }
  798.  
  799.     .text-content p {
  800.       margin-bottom: 15px !important;
  801.       line-height: 1.6 !important;
  802.       font-size: 14px !important;
  803.     }
  804.   `;
  805.  
  806. 	// Áp dụng CSS
  807. 	GM_addStyle(css);
  808.  
  809.   // Add mobile menu toggle functionality
  810.   const addMobileMenuToggle = () => {
  811.     const header = document.querySelector('#main-header');
  812.     if (!header) return;
  813.  
  814.     // Create menu toggle button if it doesn't exist
  815.     if (!document.querySelector('.menu-toggle')) {
  816.       const menuToggle = document.createElement('button');
  817.       menuToggle.className = 'menu-toggle';
  818.       menuToggle.innerHTML = '<span></span><span></span><span></span>';
  819.       header.appendChild(menuToggle);
  820.  
  821.       // Add click event listener
  822.       menuToggle.addEventListener('click', () => {
  823.         menuToggle.classList.toggle('active');
  824.         const nav = document.querySelector('nav');
  825.         if (nav) {
  826.           nav.classList.toggle('active');
  827.         }
  828.       });
  829.     }
  830.   };
  831.  
  832.   // Run when DOM is loaded
  833.   if (document.readyState === 'loading') {
  834.     document.addEventListener('DOMContentLoaded', addMobileMenuToggle);
  835.   } else {
  836.     addMobileMenuToggle();
  837.   }
  838. })();