acts/docs/acts-version-manager.css

0001 /**
0002  * ACTS Version Manager Styles
0003  *
0004  * Styling for PR build banner and version selector.
0005  * Compatible with doxygen-awesome-css theme and dark mode.
0006  */
0007
0008 /* ========================================================================
0009    PR Build Banner
0010    ======================================================================== */
0011
0012 #acts-pr-banner {
0013   background: var(--primary-color, #3f51b5);
0014   color: white;
0015   padding: 12px 20px;
0016   text-align: center;
0017   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
0018   font-size: 14px;
0019   line-height: 1.6;
0020 }
0021
0022 #acts-pr-banner strong {
0023   font-weight: 600;
0024 }
0025
0026 #acts-pr-banner code {
0027   background: rgba(255, 255, 255, 0.2);
0028   padding: 2px 6px;
0029   border-radius: 3px;
0030   font-family: monospace;
0031   font-size: 13px;
0032 }
0033
0034 #acts-pr-banner a {
0035   color: white;
0036   text-decoration: underline;
0037   font-weight: 500;
0038 }
0039
0040 #acts-pr-banner a:hover {
0041   opacity: 0.8;
0042 }
0043
0044 /* Dark mode compatibility for PR banner */
0045 html.dark-mode #acts-pr-banner {
0046   background: #2c3e50;
0047   border-bottom-color: rgba(255, 255, 255, 0.1);
0048 }
0049
0050 html.dark-mode #acts-pr-banner code {
0051   background: rgba(255, 255, 255, 0.15);
0052 }
0053
0054 /* ========================================================================
0055    Version Selector Container
0056    ======================================================================== */
0057
0058 #acts-version-selector {
0059   padding: 12px 16px;
0060   border-bottom: 1px solid var(--separator-color);
0061   background: var(--side-nav-background);
0062   position: sticky;
0063   top: 0;
0064   z-index: 200;
0065   /* Prevent layout shift during load */
0066   min-height: 40px;
0067 }
0068
0069 /* Version dropdown styling */
0070 #acts-version-selector select,
0071 #acts-version-selector .version-dropdown {
0072   width: 100%;
0073   padding: 8px;
0074   border: 1px solid var(--separator-color);
0075   border-radius: 4px;
0076   background: var(--page-background-color);
0077   color: var(--page-foreground-color);
0078   font-size: 13px;
0079   cursor: pointer;
0080   transition: border-color 0.2s ease;
0081 }
0082
0083 #acts-version-selector select:hover,
0084 #acts-version-selector .version-dropdown:hover {
0085   border-color: var(--primary-color);
0086 }
0087
0088 #acts-version-selector select:focus,
0089 #acts-version-selector .version-dropdown:focus {
0090   outline: none;
0091   border-color: var(--primary-color);
0092   box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
0093 }
0094
0095 /* Version selector label (if used by external JS) */
0096 #acts-version-selector label {
0097   display: block;
0098   margin-bottom: 6px;
0099   font-size: 12px;
0100   font-weight: 600;
0101   color: var(--page-foreground-color);
0102   opacity: 0.8;
0103 }
0104
0105 /* ========================================================================
0106    Minimal Fallback Selector
0107    ======================================================================== */
0108
0109 #acts-version-selector.minimal {
0110   display: flex;
0111   align-items: center;
0112   justify-content: center;
0113   min-height: 44px;
0114 }
0115
0116 #acts-version-selector.minimal a {
0117   display: inline-block;
0118   color: var(--primary-color);
0119   text-decoration: none;
0120   font-size: 13px;
0121   padding: 6px 12px;
0122   border-radius: 4px;
0123   transition: background-color 0.2s ease;
0124 }
0125
0126 #acts-version-selector.minimal a:hover {
0127   text-decoration: underline;
0128   background: rgba(0, 0, 0, 0.05);
0129 }
0130
0131 html.dark-mode #acts-version-selector.minimal a:hover {
0132   background: rgba(255, 255, 255, 0.05);
0133 }
0134
0135 /* ========================================================================
0136    Responsive Design
0137    ======================================================================== */
0138
0139 @media screen and (max-width: 767px) {
0140   #acts-pr-banner {
0141     padding: 10px 15px;
0142     font-size: 13px;
0143   }
0144
0145   #acts-version-selector {
0146     padding: 10px 12px;
0147   }
0148
0149   #acts-version-selector select,
0150   #acts-version-selector .version-dropdown {
0151     font-size: 12px;
0152   }
0153 }
0154
0155 /* ========================================================================
0156    Loading State (Optional - for future enhancement)
0157    ======================================================================== */
0158
0159 #acts-version-selector.loading {
0160   opacity: 0.6;
0161   pointer-events: none;
0162 }
0163
0164 #acts-version-selector.loading::after {
0165   content: "Loading...";
0166   display: block;
0167   text-align: center;
0168   font-size: 12px;
0169   color: var(--page-foreground-color);
0170   opacity: 0.6;
0171 }