Refactor transitions for consistency across styles (#2025)

Author: clicktodev

assets/css/autocomplete.css

@@ -138,7 +138,7 @@
   display: block;
   padding: 12px 20px;
   text-decoration: none;
-  transition: background-color 0.3s ease-in-out;
+  transition: var(--transition-colors);
   border-top: 1px solid var(--suggestionBorder);
   font-size: 0.9rem;
 }
@@ -169,7 +169,7 @@
   text-decoration: none;
   border: 1px solid var(--suggestionBorder);
   border-radius: var(--borderRadius);
-  transition: color .3s ease-in-out;
+  transition: var(--transition-colors);
   background-color: var(--autocompletePreview);
   cursor: pointer;
   padding: 4px 8px;

assets/css/content/bottom-actions.css

@@ -17,6 +17,7 @@
   border: 1px solid var(--bottomActionsBtnBorder);
   padding: 12px 16px;
   min-width: 150px;
+  transition: var(--transition-all);
 }
 
 .content-inner .bottom-actions .bottom-actions-button:hover {

assets/css/content/functions.css

@@ -38,7 +38,7 @@
 }
 
 .content-inner .detail-header a.detail-link {
-  transition: opacity 0.3s ease-in-out;
+  transition: var(--transition-opacity);
   position: absolute;
   top: 0;
   left: 0;

assets/css/content/general.css

@@ -93,7 +93,7 @@
   color: var(--iconAction);
   text-decoration: none;
   border: none;
-  transition: color 0.3s ease-in-out;
+  transition: var(--transition-colors);
   background-color: transparent;
   cursor: pointer;
 }

assets/css/copy-button.css

@@ -19,7 +19,7 @@ pre .copy-button:focus {
   border-radius: var(--borderRadius);
   border: none;
   cursor: pointer;
-  transition: all 150ms;
+  transition: var(--transition-all);
   font-family: var(--defaultFontFamily);
   font-size: 14px;
   line-height: 24px;
@@ -32,7 +32,7 @@ pre .copy-button:focus {
 
 .copy-button svg {
   opacity: 0.5;
-  transition: all 150ms;
+  transition: var(--transition-all);
 }
 
 pre .copy-button:hover svg,

assets/css/custom-props/common.css

@@ -54,6 +54,20 @@
   --black-opacity-50: hsla(0, 0%, 0%, 50%);
   --orangeDark: hsl(30, 90%, 40%);
   --orangeLight: hsl(30, 80%, 50%);
+
+  --transition-duration: 150ms;
+  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+  --transition-all: all var(--transition-duration) var(--transition-timing);
+
+  --transition-colors: color var(--transition-duration) var(--transition-timing),
+  background-color var(--transition-duration) var(--transition-timing),
+  border-color var(--transition-duration) var(--transition-timing),
+  text-decoration-color var(--transition-duration) var(--transition-timing),
+  fill var(--transition-duration) var(--transition-timing),
+  stroke var(--transition-duration) var(--transition-timing);
+
+  --transition-opacity: opacity var(--transition-duration) var(--transition-timing);
 }
 
 @media screen and (max-width: 768px) {

assets/css/modal.css

@@ -59,7 +59,7 @@
   margin-right: 30px;
   padding-left: 0;
   text-align: left;
-  transition: color 150ms;
+  transition: var(--transition-colors);
 }
 .modal .modal-title button:hover {
   color: var(--main);
@@ -79,7 +79,7 @@
   background-color: transparent;
   color: var(--textHeaders);
   border: none;
-  transition: opacity 150ms;
+  transition: var(--transition-opacity);
 }
 .modal .modal-close:hover {
   opacity: 1;

assets/css/search-bar.css

@@ -32,6 +32,7 @@
   height: 46px;
   padding: 8px 35px 8px 43px;
   width: 100%;
+  transition: var(--transition-all);
 }
 
 .top-search .search-bar .search-input::placeholder {
@@ -63,6 +64,7 @@
   top: 60%;
   transform: translateY(-60%);
   z-index: 99;
+  transition: var(--transition-all);
 }
 
 .top-search .search-bar.selected .search-button,
@@ -85,7 +87,7 @@
   position: absolute;
   transform: scaleY(0);
   top: calc(50% - 13px);
-  transition: 0.15s transform ease-out;
+  transition: var(--transition-all);
   z-index: 99;
 }
 
@@ -137,7 +139,7 @@
 
 body.search-focused .search-bar .search-close-button {
   transform: scaleY(1);
-  transition: transform 0.15s ease-out 0.15s;
+  transition: var(--transition-all);
 }
 
 @media screen and (hover: hover) {

assets/css/search.css

@@ -58,7 +58,7 @@
 
 #search .result-id a {
   text-decoration: none;
-  transition: color .1s ease-in-out;
+  transition: var(--transition-colors);
   color: var(--links);
 }
 #search .result-id a:is(:visited, :active, :focus) {

assets/css/settings.css

@@ -15,7 +15,7 @@
   color: var(--settingsInput);
   border: 1px solid var(--settingsInputBorder);
   border-radius: var(--borderRadius);
-  transition: border-color 150ms;
+  transition: var(--transition-all);
 }
 #settings-modal-content .input:focus {
   border-color: var(--main);
@@ -56,7 +56,7 @@
   width: 40px;
   height: 20px;
   user-select: none;
-  transition: all 150ms;
+  transition: var(--transition-all);
 }
 
 #settings-modal-content .switch-button__checkbox {
@@ -69,7 +69,7 @@
   background-color: #91a4b7;
   border: 3px solid #e5edf5;
   cursor: pointer;
-  transition: all 300ms;
+  transition: var(--transition-all);
 }
 
 #settings-modal-content .switch-button__bg {
@@ -79,7 +79,7 @@
   border-radius: 1000px;
   background-color: #e5edf5;
   cursor: pointer;
-  transition: all 300ms;
+  transition: var(--transition-all);
 }
 
 #settings-modal-content .switch-button__checkbox:checked {

assets/css/sidebar.css

@@ -30,7 +30,7 @@
 .sidebar a {
   color: var(--sidebarAccentMain);
   text-decoration: none;
-  transition: color 0.3s ease-in-out;
+  transition: var(--transition-colors);
 }
 
 .sidebar a:hover {
@@ -158,7 +158,7 @@
   display: inline-block;
   line-height: 27px;
   padding: 4px 10px 2px 10px;
-  transition: all 150ms;
+  transition: var(--transition-all);
 }
 
 .sidebar .sidebar-list-nav button {
@@ -169,7 +169,7 @@
   background-color: var(--sidebarInactiveItemMarker);
   border-top: var(--navTabBorderWidth) solid var(--sidebarInactiveItemBorder);
   color: var(--sidebarAccentMain);
-  transition: all 150ms;
+  transition: var(--transition-all);
 }
 
 .sidebar .sidebar-list-nav button[aria-selected] {