F: Improve navigation toggles

rsconcept/frontend/src/app/Navigation/NavigationButton.tsx

@@ -31,9 +31,8 @@ function NavigationButton({
       className={clsx(
         'mr-1 h-full', // prettier: split lines
         'flex items-center gap-1',
-        'clr-btn-nav cc-animate-color',
+        'clr-btn-nav cc-animate-color duration-500',
         'rounded-xl',
-        'transition duration-500',
         'font-controls whitespace-nowrap',
         {
           'px-2': text,

rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx

@@ -12,7 +12,7 @@ function ToggleNavigation() {
       className={clsx(
         'absolute top-0 right-0 z-navigation',
         'min-h-[2rem] min-w-[2rem]',
-        'flex items-center justify-center gap-1',
+        'flex items-end justify-center gap-1',
         'select-none',
         !noNavigation && 'flex-col-reverse'
       )}
@@ -27,7 +27,7 @@ function ToggleNavigation() {
         <button
           tabIndex={-1}
           type='button'
-          className='p-1 rounded-full'
+          className='p-1'
           onClick={toggleDarkMode}
           data-tooltip-id={globals.tooltip}
           data-tooltip-content={darkMode ? 'Тема: Темная' : 'Тема: Светлая'}
@@ -39,7 +39,7 @@ function ToggleNavigation() {
       <button
         tabIndex={-1}
         type='button'
-        className='p-1 rounded-full'
+        className='p-1'
         onClick={toggleNoNavigation}
         data-tooltip-id={globals.tooltip}
         data-tooltip-content={noNavigationAnimation ? 'Показать навигацию' : 'Скрыть навигацию'}

rsconcept/frontend/src/components/ui/TabLabel.tsx

@@ -20,7 +20,7 @@ function TabLabel({ label, title, titleHtml, hideTitle, className, ...otherProps
       className={clsx(
         'min-w-[5.5rem] h-full',
         'px-2 py-1 flex justify-center',
-        'clr-hover cc-animate-color',
+        'clr-hover cc-animate-color duration-150',
         'text-sm whitespace-nowrap font-controls',
         'select-none hover:cursor-pointer',
         'outline-none',

rsconcept/frontend/src/styling/styles.css

@@ -223,6 +223,6 @@
   .cc-animate-color {
     transition-property: color, background-color;
     transition-timing-function: var(--transition-bezier);
-    transition-duration: var(--duration-select);
+    transition-duration: var(--duration-fade);
   }
 }