@@ -7344,6 +7344,21 @@ html.dark .gv-changelog-body h3,
73447344 color : # e8eaed ;
73457345}
73467346
7347+ /* Highlights lead-in — the bold sentence opening the first paragraph
7348+ * of the changelog body (e.g. "**Important update — please skim…**"
7349+ * / "**重要更新,建议花一分钟浏览。**"). The markdown source has no
7350+ * separate "### Highlights" heading; the bold strong tag IS the heading,
7351+ * tinted in the project's theme green so it reads as the primary pointer. */
7352+ .gv-changelog-body > p : first-child strong : first-child {
7353+ color : oklch (0.55 0.17 155 );
7354+ }
7355+
7356+ html .dark .gv-changelog-body > p : first- child strong: first- child,
7357+ [data-theme = 'dark' ] .gv-changelog-body > p : first- child strong: first- child,
7358+ [data-color-scheme = 'dark' ] .gv-changelog-body > p : first-child strong : first-child {
7359+ color : oklch (0.7 0.16 155 );
7360+ }
7361+
73477362.gv-changelog-body ul {
73487363 margin : 0 0 12px ;
73497364 padding-left : 20px ;
@@ -7411,52 +7426,114 @@ html.dark .gv-changelog-footer,
74117426 border-top-color : # 3c4043 ;
74127427}
74137428
7414- .gv-changelog-recommendation {
7415- font-size : 13px ;
7416- color : # 5f6368 ;
7429+ /* Follow-me area — gradient-tinted block holding the CTA copy and the
7430+ * social chips together. The gradient is the visual cue that "this is the
7431+ * follow-me block"; the inner text + chip row are direct children, no
7432+ * extra cards. */
7433+ .gv-changelog-follow-area {
7434+ display : flex;
7435+ flex-direction : column;
7436+ gap : 10px ;
7437+ padding : 12px 14px ;
7438+ border-radius : 10px ;
7439+ background : linear-gradient (
7440+ 135deg ,
7441+ oklch (0.96 0.05 195 ) 0% ,
7442+ oklch (0.95 0.06 250 ) 50% ,
7443+ oklch (0.95 0.05 155 ) 100%
7444+ );
7445+ }
7446+
7447+ html .dark .gv-changelog-follow-area ,
7448+ [data-theme = 'dark' ] .gv-changelog-follow-area ,
7449+ [data-color-scheme = 'dark' ] .gv-changelog-follow-area {
7450+ background : linear-gradient (
7451+ 135deg ,
7452+ oklch (0.35 0.06 195 ) 0% ,
7453+ oklch (0.32 0.08 250 ) 50% ,
7454+ oklch (0.32 0.07 155 ) 100%
7455+ );
7456+ }
7457+
7458+ .gv-changelog-follow-text {
74177459 margin : 0 ;
7460+ font-size : 13px ;
74187461 line-height : 1.5 ;
7462+ color : # 1f2937 ;
74197463}
74207464
7421- html .dark .gv-changelog-recommendation ,
7422- [data-theme = 'dark' ] .gv-changelog-recommendation ,
7423- [data-color-scheme = 'dark' ] .gv-changelog-recommendation {
7424- color : # 9aa0a6 ;
7465+ html .dark .gv-changelog-follow-text ,
7466+ [data-theme = 'dark' ] .gv-changelog-follow-text ,
7467+ [data-color-scheme = 'dark' ] .gv-changelog-follow-text {
7468+ color : # e8eaed ;
74257469}
74267470
7471+ /* Chip row inside the follow-me area — plain flex layout; gradient lives
7472+ * on the parent .gv-changelog-follow-area. */
74277473.gv-changelog-social-row {
74287474 display : flex;
74297475 flex-wrap : wrap;
7430- gap : 6 px 12 px ;
7431- margin : 8 px 0 0 ;
7476+ gap : 8 px ;
7477+ margin : 0 ;
74327478 font-size : 12px ;
7433- color : # 5f6368 ;
7434- line-height : 1.5 ;
7479+ line-height : 1.4 ;
74357480}
74367481
7482+ /* Chips — clean white pills sitting on the gradient ribbon. Spring lift
7483+ * + icon micro-scale on hover keeps them feeling alive without competing
7484+ * with the background gradient. */
74377485.gv-changelog-social-item {
74387486 display : inline-flex;
74397487 align-items : center;
7440- gap : 4px ;
7488+ gap : 6px ;
7489+ padding : 6px 12px ;
7490+ border-radius : 999px ;
7491+ background : # ffffff ;
7492+ border : 1px solid rgba (255 , 255 , 255 , 0.85 );
7493+ color : # 1f2937 ;
74417494 text-decoration : none;
7442- color : inherit;
7443- transition : opacity 0.15s ;
7495+ font-weight : 500 ;
7496+ white-space : nowrap;
7497+ cursor : pointer;
7498+ box-shadow : 0 1px 2px rgba (15 , 23 , 42 , 0.06 );
7499+ transition :
7500+ transform 0.22s cubic-bezier (0.34 , 1.56 , 0.64 , 1 ),
7501+ box-shadow 0.22s cubic-bezier (0.34 , 1.56 , 0.64 , 1 );
74447502}
74457503
74467504a .gv-changelog-social-item : hover {
7447- opacity : 0.7 ;
7505+ transform : translateY (-2px );
7506+ box-shadow : 0 4px 14px rgba (15 , 23 , 42 , 0.14 );
7507+ }
7508+
7509+ a .gv-changelog-social-item : hover .gv-changelog-social-icon {
7510+ transform : scale (1.1 );
7511+ }
7512+
7513+ a .gv-changelog-social-item : active {
7514+ transform : translateY (0 );
7515+ box-shadow : 0 1px 2px rgba (15 , 23 , 42 , 0.08 );
74487516}
74497517
74507518.gv-changelog-social-icon {
74517519 display : inline-flex;
74527520 align-items : center;
74537521 flex-shrink : 0 ;
7522+ transition : transform 0.22s cubic-bezier (0.34 , 1.56 , 0.64 , 1 );
74547523}
74557524
7456- html .dark .gv-changelog-social-row ,
7457- [data-theme = 'dark' ] .gv-changelog-social-row ,
7458- [data-color-scheme = 'dark' ] .gv-changelog-social-row {
7459- color : # 9aa0a6 ;
7525+ html .dark .gv-changelog-social-item ,
7526+ [data-theme = 'dark' ] .gv-changelog-social-item ,
7527+ [data-color-scheme = 'dark' ] .gv-changelog-social-item {
7528+ background : # 2d2e30 ;
7529+ border-color : rgba (255 , 255 , 255 , 0.08 );
7530+ color : # e8eaed ;
7531+ }
7532+
7533+ html .dark a .gv-changelog-social-item : hover,
7534+ [data-theme = 'dark' ] a .gv-changelog-social-item : hover,
7535+ [data-color-scheme = 'dark' ] a .gv-changelog-social-item : hover {
7536+ box-shadow : 0 4px 14px rgba (0 , 0 , 0 , 0.45 );
74607537}
74617538
74627539.gv-changelog-action-row {
@@ -7600,6 +7677,44 @@ html.dark .gv-changelog-got-it:hover,
76007677 background : # aecbfa ;
76017678}
76027679
7680+ /* Read-gate disabled state — used during the force-popup countdown.
7681+ * Mute color, kill hover/pointer feedback, but keep a monospace-ish tabular
7682+ * feel so the " (5)" → " (1)" countdown digits don't reflow the button. */
7683+ .gv-changelog-got-it--gated ,
7684+ .gv-changelog-got-it--gated : hover {
7685+ background : # c5d3e8 ;
7686+ color : rgba (255 , 255 , 255 , 0.85 );
7687+ cursor : not-allowed;
7688+ font-variant-numeric : tabular-nums;
7689+ }
7690+
7691+ html .dark .gv-changelog-got-it--gated ,
7692+ html .dark .gv-changelog-got-it--gated : hover,
7693+ [data-theme = 'dark' ] .gv-changelog-got-it--gated ,
7694+ [data-theme = 'dark' ] .gv-changelog-got-it--gated : hover,
7695+ [data-color-scheme = 'dark' ] .gv-changelog-got-it--gated ,
7696+ [data-color-scheme = 'dark' ] .gv-changelog-got-it--gated : hover {
7697+ background : # 4a5566 ;
7698+ color : rgba (255 , 255 , 255 , 0.55 );
7699+ }
7700+
7701+ .gv-changelog-close--gated ,
7702+ .gv-changelog-close--gated : hover {
7703+ color : rgba (95 , 99 , 104 , 0.35 );
7704+ background-color : transparent;
7705+ cursor : not-allowed;
7706+ }
7707+
7708+ html .dark .gv-changelog-close--gated ,
7709+ html .dark .gv-changelog-close--gated : hover,
7710+ [data-theme = 'dark' ] .gv-changelog-close--gated ,
7711+ [data-theme = 'dark' ] .gv-changelog-close--gated : hover,
7712+ [data-color-scheme = 'dark' ] .gv-changelog-close--gated ,
7713+ [data-color-scheme = 'dark' ] .gv-changelog-close--gated : hover {
7714+ color : rgba (154 , 160 , 166 , 0.35 );
7715+ background-color : transparent;
7716+ }
7717+
76037718.gv-changelog-chrome-rating {
76047719 display : flex;
76057720 align-items : center;
0 commit comments