← All changes | assets/css/common.css +103 -3 3.0.2.6 → 3.0.16 View file →

		@@ -36,8 +36,13 @@
36	36
37	37	--yatra-primary: #3b82f6;
38	38	--yatra-primary-dark: #2563eb;
39	39	--yatra-primary-light: #60a5fa;
	40	+ --yatra-primary-darker: #1e40af;
	41	+ --yatra-primary-color: var(--yatra-primary);
	42	+ --yatra-primary-light-soft: #eff6ff;
	43	+ --yatra-primary-color-dark: #60a5fa;
	44	+ --yatra-primary-light-dark: #1e3a8a;
40	45
41	46	--yatra-success: #10b981;
42	47	--yatra-warning: #f59e0b;
43	48	--yatra-error: #ef4444;
		@@ -344,15 +349,33 @@
344	349	margin: -12px 0 0 -12px;
345	350	border: 2px solid var(--yatra-border-color);
346	351	border-top-color: var(--yatra-primary);
347	352	border-radius: 50%;
348		- animation: yatra-spinner 0.8s linear infinite;
	353	+ animation: yatra-spin 0.8s linear infinite;
349	354	}
350	355
351		-@keyframes yatra-spinner {
352		- to { transform: rotate(360deg); }
	356	+/**
	357	+ * Shared rotate animation (loading dots, shortcode overlays, trip/booking/stripe spinners).
	358	+ * Defined once here so front-end bundles do not redefine the same name.
	359	+ */
	360	+@keyframes yatra-spin {
	361	+ to {
	362	+ transform: rotate(360deg);
	363	+ }
353	364	}
354	365
	366	+/**
	367	+ * Skeleton / card loading sheen (shortcode listing placeholders).
	368	+ */
	369	+@keyframes yatra-shimmer {
	370	+ 0% {
	371	+ left: -100%;
	372	+ }
	373	+ 100% {
	374	+ left: 100%;
	375	+ }
	376	+}
	377	+
355	378	/* ============================================
356	379	LEGACY COMPATIBILITY
357	380	Keep old class names working while transitioning
358	381	============================================ */
		@@ -363,8 +386,11 @@
363	386
364	387	.yatra-single-trip {
365	388	width: 100%;
366	389	min-height: 100vh;
	390	+ max-width: var(--yatra-container-max-width, 1300px)!important;
	391	+ margin-left: auto;
	392	+ margin-right: auto;
367	393	}
368	394
369	395	.yatra-listing-container,
370	396	.yatra-booking-container,
		@@ -482,6 +508,80 @@
482	508
483	509	.yatra-sticky-nav-price-amount {
484	510	font-size: 16px;
485	511	}
	512	+}
	513	+
	514	+/* ============================================
	515	+ SHORTCODES & BLOCK FRONTEND — content width
	516	+ (--yatra-container-max-width from :root; theme.json / $content_width via PHP when set)
	517	+ ============================================ */
	518	+.yatra-tour-shortcode,
	519	+.yatra-destination-shortcode,
	520	+.yatra-activity-shortcode,
	521	+.yatra-discount-shortcode,
	522	+.yatra-search-shortcode,
	523	+.yatra-login-shortcode,
	524	+.yatra-my-account-login {
	525	+ width: 100%;
	526	+ max-width: var(--yatra-container-max-width, 1300px);
	527	+ margin-left: auto;
	528	+ margin-right: auto;
	529	+ padding-left: var(--yatra-container-padding);
	530	+ padding-right: var(--yatra-container-padding);
	531	+ box-sizing: border-box;
	532	+}
	533	+
	534	+/* React account (standalone route + [yatra_my_account]): inner grid uses horizontal padding; width only here */
	535	+.yatra-account-react-root {
	536	+ width: 100%;
	537	+ max-width: var(--yatra-container-max-width, 1300px);
	538	+ margin-left: auto;
	539	+ margin-right: auto;
	540	+ box-sizing: border-box;
	541	+}
	542	+
	543	+/* ============================================
	544	+ LEGACY ARCHIVE — .yatra-page-wrapper pagination
	545	+ ============================================ */
	546	+.yatra-page-wrapper .pagination a.page-numbers,
	547	+.yatra-page-wrapper .pagination span.page-numbers {
	548	+ border-color: var(--yatra-border-color, #e5e7eb);
	549	+ color: var(--yatra-text-primary, #374151);
	550	+ text-decoration: none;
	551	+}
	552	+
	553	+.yatra-page-wrapper .pagination a.page-numbers:hover,
	554	+.yatra-page-wrapper .pagination span.page-numbers.current {
	555	+ border-color: var(--yatra-primary, #3b82f6);
	556	+ background: var(--yatra-primary, #3b82f6);
	557	+ color: #fff;
	558	+}
	559	+
	560	+.yatra-page-wrapper .pagination a.page-numbers:hover {
	561	+ background: var(--yatra-primary-dark, #2563eb);
	562	+ border-color: var(--yatra-primary-dark, #2563eb);
	563	+}
	564	+
	565	+/* Paginate links (templates/parts/pagination.php — nav.yatra-pagination) */
	566	+.yatra-pagination-wrap nav .page-numbers,
	567	+nav.yatra-pagination .page-numbers {
	568	+ border-color: var(--yatra-border-color, #e5e7eb);
	569	+ color: var(--yatra-text-primary, #374151);
	570	+ text-decoration: none;
	571	+}
	572	+
	573	+.yatra-pagination-wrap nav a.page-numbers:hover,
	574	+nav.yatra-pagination a.page-numbers:hover,
	575	+.yatra-pagination-wrap nav span.page-numbers.current,
	576	+nav.yatra-pagination span.page-numbers.current {
	577	+ border-color: var(--yatra-primary, #3b82f6);
	578	+ background: var(--yatra-primary, #3b82f6);
	579	+ color: #fff;
	580	+}
	581	+
	582	+.yatra-pagination-wrap nav a.page-numbers:hover,
	583	+nav.yatra-pagination a.page-numbers:hover {
	584	+ background: var(--yatra-primary-dark, #2563eb);
	585	+ border-color: var(--yatra-primary-dark, #2563eb);
486	586	}
487	587