2026-10-22 16:49:25 +08:00
: root { --ink : #263448 ; --muted : #8a99ae ; --blue : #406dce ; --line : #e8edf3 ; --panel : #fff ; --bg : #f2f5f9 ; font-family : Inter , "Segoe UI" , "Microsoft YaHei" , Arial , sans-serif } * { box-sizing : border-box } body { margin : 0 ; color : var ( -- ink ); background : var ( -- bg )} button , input , select , textarea { font : inherit } button { cursor : pointer }. studio { height : 100 vh ; display : flex ; flex-direction : column ; min-height : 650 px }. studio-top { height : 72 px ; min-height : 72 px ; background : #fff ; border-bottom : 1 px solid var ( -- line ); display : flex ; align-items : center ; padding : 0 24 px ; gap : 16 px ; z-index : 2 }. brand { display : flex ; align-items : center ; gap : 9 px }. brand > a { font-size : 29 px ; line-height : 1 ; background : #1e314e ; color : white ; text-decoration : none ; width : 40 px ; height : 40 px ; border-radius : 12 px ; display : grid ; place-items : center }. brand b { display : block ; font-size : 16 px ; letter-spacing : -.45 px }. brand small { font-size : 8 px ; font-weight : 750 ; color : var ( -- muted ); letter-spacing : 1.6 px }. divide { height : 26 px ; border-left : 1 px solid #d9e0ea }. file-name { font-size : 13 px ; white-space : nowrap ; max-width : 280 px ; overflow : hidden ; text-overflow : ellipsis }. file-name small { color : #c0c9d3 }. file-name strong { font-weight : 700 }. top-center { display : flex ; gap : 3 px ; background : #f2f5f9 ; padding : 4 px ; border-radius : 9 px ; margin : auto }. icon-btn { border : 0 ; border-radius : 6 px ; background : transparent ; padding : 6 px 11 px ; font-size : 20 px ; color : #718299 }. icon-btn . on { background : #fff ; color : #355dbb ; box-shadow : 0 2 px 8 px #284667 16 }. save-status { color : #91a0ae ; font-size : 11 px ; white-space : nowrap }. save-status . dirty { color : #be8530 }. ui-btn { border-radius : 8 px ; padding : 11 px 15 px ; font-weight : 650 ; font-size : 12 px ; border : 1 px solid #e5eaf0 ; white-space : nowrap }. ui-btn . ghost { background : #fff ; color : #344764 }. ui-btn . primary { background : #315bba ; color : #fff ; border-color : #315bba }. ui-btn : hover , . small-btn : hover { filter : brightness ( .96 )}. studio-body { display : grid ; grid-template-columns : 278 px minmax ( 0 , 1 fr ) 324 px ; min-height : 0 ; flex : 1 }. left-pane , . right-pane { background : #fff ; overflow-y : auto ; display : flex ; flex-direction : column }. left-pane { border-right : 1 px solid var ( -- line )}. right-pane { border-left : 1 px solid var ( -- line )}. pane-heading { padding : 27 px 24 px 17 px ; display : flex ; justify-content : space-between ; align-items : center }. overline { font-size : 9 px ; font-weight : 800 ; color : #7894c4 ; letter-spacing : 1.4 px }. pane-heading h3 { margin : 4 px 0 0 ; font-size : 19 px ; letter-spacing : -.4 px }. chip { font-size : 10 px ; background : #eff4fb ; color : #6d87ad ; padding : 4 px 8 px ; border-radius : 5 px ; white-space : nowrap }. left-pane . field { margin : 0 19 px 14 px }. field label , . prop label { display : block ; font-size : 11 px ; font-weight : 750 ; color : #758499 ; margin-bottom : 7 px }. field select , . prop input , . prop textarea , . prop select { width : 100 % ; border : 1 px solid #dce5ed ; border-radius : 8 px ; padding : 10 px 12 px ; background : white ; color : #2b3c53 ; outline : 0 ; font-size : 12 px }. field select : focus , . prop input : focus , . prop textarea : focus , . prop select : focus { border-color : #5589d9 ; box-shadow : 0 0 0 3 px #5f90de 12 }. section-label { font-size : 10 px ; font-weight : 800 ; color : #9da9b8 ; letter-spacing : .7 px ; padding : 17 px 22 px 11 px }. block-list { padding : 0 13 px }. block-row { display : flex ; align-items : center ; gap : 9 px ; padding : 11 px 10 px ; margin-bottom : 7 px ; background : #f8fafc ; border : 1 px solid #e6ecf3 ; border-radius : 10 px ; cursor : pointer }. block-row . selected { border-color : #729cf0 ; background : #eff5ff ; box-shadow : 0 0 0 1 px #e9f0ff }. block-row . dragging { opacity : .35 }. drag-handle { font-size : 17 px ; color : #aab9cc ; cursor : grab }. block-icon { display : grid ; place-items : center ; background : white ; width : 30 px ; height : 30 px ; border-radius : 7 px ; color : #5b76b2 ; font-size : 17 px ; border : 1 px solid #e8edf4 }. block-copy { flex : 1 ; min-width : 0 }. block-copy strong { display : block ; font-size : 12 px }. block-copy small { display : block ; font-size : 10 px ; color : #9aa7b8 ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis }. row-actions { display : flex ; gap : 2 px }. row-actions button { border : 0 ; background : transparent ; font-size : 12 px ; color : #9aa5b4 ; padding : 4 px }. palette { padding : 0 19 px 20 px ; display : grid ; grid-template-columns : 1 fr 1 fr ; gap : 9 px }. palette button { display : flex ; gap : 7 px ; align-items : center ; border : 1 px dashed #cdd9e6 ; background : #fcfdff ; color : #566b83 ; border-radius : 9 px ; padding : 11 px 9 px ; text-align : left ; font-size : 11 px ; font-weight : 700 }. palette button span { color : #416fcd ; font-siz
@media(max-width:1200px){.studio-body{grid-template-columns:240px minmax(0,1fr) 290px}.preview-note{display:none}.studio-top{gap:8px}.file-name{max-width:180px}}@media(max-width:950px){.studio-body{grid-template-columns:210px minmax(0,1fr)}.right-pane{position:fixed;right:0;top:72px;bottom:0;width:310px;z-index:3;box-shadow:-8px 0 22px #0001}.studio-top .ui-btn.ghost{display:none}}@media(max-width:650px){.studio-body{grid-template-columns:1fr}.left-pane{display:none}.right-pane{display:none}.studio-top{padding:0 12px}.file-name{display:none}.save-status{display:none}}
.layout-editor-col{ border : 1 px solid #dfe5ed ; border-radius : 12 px ; padding : 10 px ; margin : 12 px 0 ; background : #f8fafc }. layout-editor-title { display : flex ; align-items : center ; gap : 7 px ; flex-wrap : wrap ; justify-content : space-between }. layout-editor-title input { width : 56 px }. layout-editor-title button , . layout-child button { border : 0 ; background : none ; color : #54647a ; cursor : pointer }. layout-child { background : white ; border : 1 px solid #e5eaf3 ; border-radius : 9 px ; margin : 8 px 0 ; padding : 9 px }. layout-child label { display : block ; font-size : 11 px ; color : #475569 ; margin : 7 px 0 }. layout-child input , . layout-child select { display : block ; width : 100 % ; margin-top : 3 px ; padding : 7 px ; border : 1 px solid #e1e6ee ; border-radius : 6 px }. layout-child-toolbar { display : flex ; flex-wrap : wrap ; gap : 4 px }. layout-child-toolbar button { background : #e8effa ; border : 0 ; padding : 5 px 7 px ; border-radius : 6 px ; cursor : pointer ; font-size : 11 px }
2026-10-23 12:31:03 +08:00
/* V8.21.1 visual studio usability refresh — no saved blueprint schema changes. */
: root { --studio-accent : #ed742d ; --studio-focus : #e48b42 ; --studio-border : #e6eaf0 ; --studio-shadow : 0 20 px 54 px rgba ( 31 , 48 , 69 , .08 )}
. studio-top { box-shadow : 0 1 px 9 px rgba ( 29 , 47 , 75 , .035 ); padding-inline : 18 px ; gap : 9 px }
. brand > a { background : #252e3c ; border-radius : 10 px ; color : #ff9959 }
. top-center { margin : auto ; background : #edf1f6 }
. icon-btn . on { color : #b95722 }
. ui-btn . primary { background : #dc6b2b ; border-color : #dc6b2b }
. ui-btn : focus-visible , . icon-btn : focus-visible , . block-row : focus-visible , . palette button : focus-visible , . row-actions button : focus-visible , . inspector-nav button : focus-visible { outline : 2 px solid var ( -- studio - focus ); outline-offset : 2 px }
. ui-btn : disabled , . row-actions button : disabled { opacity : .3 ; cursor : not-allowed }
. pane-switcher { display : flex ; gap : 3 px }
. pane-switcher . ui-btn { padding : 8 px 10 px }
. studio-body { grid-template-columns : minmax ( 270 px , 290 px ) minmax ( 0 , 1 fr ) minmax ( 320 px , 350 px )}
. left-pane , . right-pane { background : #fff }
. pane-heading { padding : 22 px 18 px 14 px }
. pane-heading h3 { font-size : 16 px ; letter-spacing : 0 }
. section-label { display : flex ; justify-content : space-between ; align-items : center ; padding : 14 px 19 px 9 px ; color : #56677b ; font-size : 11 px ; letter-spacing : 0 }
. section-caption { font-size : 10 px ; color : #a0abbb ; font-weight : 500 }
. structure-filter { margin : 4 px 13 px 10 px ; display : flex ; align-items : center ; border : 1 px solid #dfe6ee ; background : #f7f9fc ; border-radius : 9 px ; overflow : hidden ; min-height : 38 px }
. structure-filter : focus-within { border-color : var ( -- studio - focus ); box-shadow : 0 0 0 3 px #f39a49 23 }
. structure-filter input { background : transparent ; border : 0 ; outline : 0 ; min-width : 0 ; flex : 1 ; padding : 9 px 12 px ; font-size : 12 px ; color : #25364e }
. structure-filter button { border : 0 ; background : transparent ; font-size : 19 px ; color : #8796a7 ; width : 34 px }
. structure-hint { color : #8190a3 ; font-size : 10 px ; padding : 8 px 19 px 17 px ; line-height : 1.7 }
. block-list { padding : 0 11 px ; min-height : 60 px }
. block-row { background : #fff ; box-shadow : 0 2 px 10 px #334b62 07 ; padding : 9 px 8 px ; margin-bottom : 6 px ; gap : 7 px ; border-color : #e9edf2 ; transition : border-color .15 s , background .15 s }
. block-row : hover { border-color : #c4cedc ; background : #fafbfd }
. block-row . selected { background : #fff7f1 ; border-color : #f19b59 ; box-shadow : 0 0 0 1 px #f8e3d5 }
. block-row . is-hidden { opacity : .55 }
. block-icon { width : 29 px ; height : 29 px ; color : #d67b35 ; background : #fff8f2 ; flex-shrink : 0 }
. block-copy strong { font-size : 12 px ; color : #303e51 }
. block-copy small { font-size : 10 px ; color : #7e90a5 }
. drag-handle { font-size : 14 px }
. row-actions { display : flex ; gap : 0 ; flex-shrink : 0 }
. row-actions button { font-size : 12 px ; min-width : 18 px ; padding : 4 px 2 px ; border-radius : 5 px }
. row-actions button : hover : not ( : disabled ) { background : #fff0e4 ; color : #c96728 }
. block-list . no-selection { padding : 15 px ; margin : 0 2 px 10 px }
. palette { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); padding-inline : 13 px }
. palette button { padding : 10 px 9 px ; border-style : solid }
. palette button : hover { border-color : #e8aa76 ; background : #fff8f3 }
. palette button span { color : #d77936 }
. preview-workspace { background : #eff2f6 }
. preview-head { padding : 0 16 px ; gap : 9 px }
. preview-note { max-width : 260 px ; line-height : 1.3 ; text-align : right }
. live-dot { background : #3aa688 }
. live-dot . loading { background : #db983a ; animation : studio-pulse 1.25 s infinite }
. live-dot . error { background : #cb4e4e }
@ keyframes studio-pulse { 50 % { opacity : .3 ; box-shadow : 0 0 0 7 px #efab46 26 }}
. stage { padding : 22 px 15 px }
. device-frame { border-radius : 8 px ; box-shadow : var ( -- studio - shadow ); overflow : hidden ; min-height : 300 px }
. device-frame . tablet , . device-frame . phone { max-width : calc ( 100 % - 4 px )}
iframe { min-height : 590 px ; height : calc ( 100 vh - 224 px )}
. stage-footer { min-height : 35 px ; display : flex ; align-items : center ; justify-content : space-between ; gap : 8 px ; padding : 6 px 19 px ; font-size : 10 px ; color : #8b9bad ; border-top : 1 px solid #e1e7ee }
. inspector-nav { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); gap : 5 px ; padding : 4 px ; margin : 0 16 px 17 px ; border-radius : 9 px ; background : #f1f4f8 }
. inspector-nav button { background : none ; border : 0 ; border-radius : 6 px ; padding : 10 px 5 px ; font-size : 12 px ; color : #78869a ; font-weight : 650 }
. inspector-nav button [ aria-selected = true ] { background : white ; box-shadow : 0 1 px 5 px #233d5f 12 ; color : #b95c2b }
. inspector { padding : 0 19 px }
. inspector [ data-inspector-section ][ hidden ] { display : none !important }
. inspector-title { margin : 0 0 16 px }
. inspector-title h3 { font-size : 14 px }
. right-foot { background : #faf8f5 ; border-color : #f0e6d7 ; margin-top : auto }
. studio . section-label , . studio . pane-heading h3 { user-select : none }
. sr-only { position : absolute !important ; width : 1 px !important ; height : 1 px !important ; overflow : hidden !important ; clip : rect ( 0 , 0 , 0 , 0 ) !important ; white-space : nowrap !important }
@ media ( max-width : 1400px ) {. studio-body { grid-template-columns : 255 px minmax ( 0 , 1 fr ) 310 px }. studio-top { gap : 6 px }. studio-top > . ui-btn { padding : 9 px 10 px }}
@ media ( max-width : 1130px ) {. studio-top > . ui-btn . ghost : not ( # studioUndo ) : not ( # studioRedo ) { display : none }. studio-body { grid-template-columns : 245 px minmax ( 0 , 1 fr ) 295 px }. file-name { max-width : 150 px }. pane-switcher { display : flex }}
@ media ( max-width : 950px ) {. studio-body { grid-template-columns : 230 px minmax ( 0 , 1 fr )}. right-pane { transform : translateX ( 105 % ); transition : transform .2 s ; display : flex !important ; z-index : 7 ; top : 72 px ; width : min ( 340 px , 92 vw )} body . show-inspector . right-pane { transform : translateX ( 0 )}. preview-note { display : none }. studio-top > . ui-btn . ghost { display : none }}
@ media ( max-width : 650px ) {. studio { min-height : 480 px }. studio-body { grid-template-columns : minmax ( 0 , 1 fr )}. left-pane { display : flex !important ; position : fixed ; z-index : 7 ; top : 72 px ; bottom : 0 ; left : 0 ; width : min ( 315 px , 88 vw ); transform : translateX ( -106 % ); transition : transform .2 s ; box-shadow : 6 px 0 20 px #17283f 12 } body . show-structure . left-pane { transform : translateX ( 0 )}. right-pane { display : flex !important }. studio-top { padding-inline : 8 px }. pane-switcher . ui-btn { padding : 8 px }. studio-top . brand { display : none }. top-center { margin-inline : auto }. studio-top . ui-btn . primary { padding : 9 px 10 px }. preview-head { height : 42 px ; min-height : 42 px ; padding : 0 9 px }. stage { padding : 10 px 6 px }. device-frame . phone , . device-frame . tablet { max-width : 100 % }. stage-footer { padding : 8 px 10 px }. studio-top . save-status { display : none }}
@ media ( max-width : 950px ) {. studio-top > # saveDraftButton . ui-btn . ghost { display : inline-flex !important ; align-items : center ; padding : 9 px 10 px ; color : #c5652d ; background : #fff6ed ; border-color : #eec49e }}
@ media ( max-width : 430px ) {. studio-top # saveDraftButton { font-size : 11 px }. studio-top . ui-btn . primary { font-size : 11 px }. icon-btn { padding : 6 px 7 px }}
. studio-actions { position : relative ; flex-shrink : 0 }. studio-actions summary { display : flex ; gap : 6 px ; align-items : center ; list-style : none ; border : 1 px solid #e5eaf0 ; border-radius : 8 px ; background : #fff ; color : #394a60 ; padding : 10 px 13 px ; font-weight : 650 ; font-size : 12 px ; cursor : pointer ; user-select : none }. studio-actions summary :: -webkit-details-marker { display : none }. studio-actions [ open ] summary { border-color : #dbaa89 ; background : #fff8f1 }. studio-actions-menu { position : absolute ; right : 0 ; top : calc ( 100 % + 8 px ); display : grid ; gap : 5 px ; min-width : 205 px ; z-index : 12 ; padding : 9 px ; border : 1 px solid #e2e7ed ; border-radius : 12 px ; background : #fff ; box-shadow : 0 15 px 42 px #283b53 28 }. studio-actions-menu . ui-btn { width : 100 % ; text-align : left ; border : 0 ; padding : 11 px 12 px ; background : transparent }. studio-actions-menu . ui-btn : hover { background : #f5f7fa }. studio-actions-menu . ui-btn . ghost { display : block !important }@ media ( max-width : 650px ) {. studio-actions summary { font-size : 11 px ; padding : 9 px 7 px }. studio-actions-menu { right : -15 px ; min-width : 185 px }}
/* V8.21.2 Easy Studio — task-first UX; no schema or API changes */
. sf-easy-top { height : 70 px ; min-height : 70 px ; padding : 0 20 px ; gap : 12 px ; z-index : 15 }
. sf-easy-top . brand { min-width : 138 px }. sf-easy-top . brand small { font-size : 10 px ; color : #a1aab7 }. sf-easy-file { display : flex ; flex-direction : column ; gap : 3 px ; min-width : 130 px ; max-width : 210 px }. sf-easy-file small { color : #8b98a9 ; font-size : 10 px ; overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap }. sf-easy-file strong { font-size : 14 px ; overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap }. sf-easy-device { margin-left : auto ; margin-right : auto ; flex : 0 0 auto ; display : flex }. sf-easy-device . icon-btn { font-size : 12 px ; padding : 8 px 12 px ; font-weight : 700 }. sf-easy-save-status { padding : 7 px 10 px ; max-width : 120 px ; overflow : hidden ; text-overflow : ellipsis ; background : #f3f6f9 ; border-radius : 7 px }. sf-easy-save-status . dirty { color : #b96d21 ; background : #fff5e8 }. sf-save-btn { border-color : #e7a36d !important ; color : #b65d23 !important ; background : #fffaf5 !important ; padding-inline : 15 px }. sf-publish-btn { padding-inline : 19 px ; background : #df752f !important }. sf-easy-top . studio-actions { margin : 0 }. sf-easy-top . studio-actions summary { padding : 10 px 11 px }. sf-easy-top . studio-actions-menu { min-width : 195 px ; max-height : 80 vh ; overflow-y : auto }. sf-easy-top . studio-actions-menu . ui-btn { font-size : 12 px }
. sf-steps { display : flex ; align-items : center ; gap : 13 px ; padding : 10 px 22 px ; background : #fffaf6 ; border-bottom : 1 px solid #f2e3d7 ; color : #7d8290 ; min-height : 45 px ; font-size : 12 px }. sf-steps-label { color : #b2683a ; font-weight : 800 ; flex-shrink : 0 }. sf-step { white-space : nowrap ; font-weight : 640 ; border-radius : 8 px ; padding : 5 px 8 px }. sf-step . active { background : #fce7d7 ; color : #b85b23 }. sf-step-separator { color : #d6ad90 }. sf-guide-link { margin-left : auto ; border : 0 ; background : none ; color : #bc6529 ; font-weight : 750 ; font-size : 12 px ; white-space : nowrap ; padding : 5 px 8 px ; text-decoration : underline ; text-underline-offset : 3 px }
. studio-body { min-height : 0 ; grid-template-columns : 270 px minmax ( 0 , 1 fr ) 320 px }. left-pane , . right-pane { min-height : 0 }. left-pane . pane-heading { padding-bottom : 10 px }. left-pane . pane-heading h3 , . right-pane . pane-heading h3 { font-size : 17 px }. sf-page-picker { margin-bottom : 10 px !important }. sf-page-picker label { color : #5f7184 ; font-size : 11 px }. sf-page-picker select { font-size : 12 px }. sf-add-area { padding : 2 px 15 px 15 px }. sf-add-button { display : block ; width : 100 % ; border : 1 px solid #dc732f ; background : #e47b38 ; color : #fff ; border-radius : 10 px ; padding : 14 px 12 px ; font-size : 14 px ; font-weight : 800 ; box-shadow : 0 4 px 11 px #dc732f 25 ; text-align : center ; cursor : pointer }. sf-add-button : hover { background : #ce6427 }. sf-add-area p { margin : 9 px 1 px 0 ; color : #8a97a8 ; font-size : 11 px ; line-height : 1.6 }. sf-library-panel { margin : 0 13 px 12 px ; border : 1 px solid #f2cfb4 ; background : #fffaf6 ; border-radius : 12 px ; padding : 9 px 0 ; box-shadow : 0 7 px 15 px #b55e1f 12 }. sf-library-panel [ hidden ] { display : none !important }. sf-panel-caption { display : flex ; justify-content : space-between ; gap : 5 px ; align-items : center ; padding : 4 px 12 px 10 px ; font-size : 11 px ; font-weight : 700 ; color : #895b3c }. sf-panel-caption button { border : none ; background : transparent ; color : #b86327 ; font-size : 11 px }. sf-library-panel . palette { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); padding : 2 px 9 px 12 px ; gap : 7 px }. sf-library-panel . palette button { min-height : 42 px ; background : #fff ; border-style : solid ; font-size : 11 px }. sf-subsection { margin : 0 9 px 6 px ; padding-top : 8 px ; border-top : 1 px solid #f2ddc7 }. sf-subsection > summary { padding : 7 px 5 px ; cursor : pointer ; color : #85624b ; font-size : 11 px ; font-weight : 750 }. sf-subsection . palette { padding : 8 px 0 ; grid-template-columns : 1 fr }. left-pane . section-label { padding-top : 13 px ; font-size : 11 px ; color : #56677b }. block-list { padding : 0 12 px ; min-height : 75 px }. block-row { min-height : 54 px }. block-copy strong { font-size : 12 px }. row-actions button { min-width : 19 px }. sf-advanced { margin : 6 px 13 px 18 px ; border : 1 px solid #e6eaf0 ; border-radius : 10 px ; background : #fafbfc }. sf-advanced summary { display : flex ; align-items : center ; justify-content : space-between ; gap : 5 px ; padding : 13 px ; cursor : pointer ; font-weight : 750 ; font-size : 12 px ; color : #67758b }. sf-advanced summary :: after { content : '⌄' ; font-size : 15 px ; margin-left : auto ; color : #99a7b9 }. sf-advanced summary span { font-size : 10 px ; font-weight : 400 ; color : #9aa6b5 }. sf-advanced [ open ] { background : #fff }. sf-advanced [ open ] summary { border-bottom : 1 px solid #edf0f4 }. sf-advanced . field { margin : 13 px }. sf-advanced-buttons { display : grid ; gap : 7 px ; padding : 0 13 px 10 px }. sf-advanced-buttons button { white-space : normal ; text-align : left }. sf-advanced-note { font-size : 10 px ; color : #9aa6b5 ; line-height : 1.7 ; margin : 4 px 13 px 13 px }
. structure-hint { padding-bottom : 12 px }. preview-workspace { min-width : 0 }. preview-head { min-height : 48 px ; height : 48 px }. preview-note { font-size : 10 px }. right-pane . pane-heading { padding-bottom : 15 px }. right-pane . overline { letter-spacing : .4 px ; color : #d67832 ; font-size : 10 px }. right-pane . inspector-nav { margin-top : 0 }. sf-advanced-foot { display : block ; padding : 0 ; margin : 22 px 15 px ; border : 1 px solid #eceff2 ; background : #fafbfc }. sf-advanced-foot summary { padding : 13 px 15 px ; cursor : pointer ; font-size : 11 px ; font-weight : 750 ; color : #617084 }. sf-advanced-foot p { margin : 0 15 px 14 px }. right-pane . no-selection b { display : block ; color : #53667d ; font-size : 14 px }. right-pane . no-selection p { font-size : 12 px ; line-height : 1.7 }. right-pane . no-selection . ui-btn { margin-top : 8 px }. right-pane . prop label { font-size : 12 px ; color : #5c6a7f }. right-pane . prop input , . right-pane . prop textarea , . right-pane . prop select { font-size : 13 px ; padding : 11 px 12 px }. sf-help-dialog { border : 1 px solid #dfe4eb ; border-radius : 18 px ; width : min ( 535 px , 94 vw ); padding : 26 px ; box-shadow : 0 25 px 100 px #233248 35 }. sf-help-dialog :: backdrop { background : #1c2c40 5 a }. sf-help-head { display : flex ; align-items : start ; justify-content : space-between ; gap : 12 px }. sf-help-head h2 { margin : 4 px 0 15 px ; font-size : 23 px ; color : #28364a }. sf-help-steps { padding-left : 29 px ; line-height : 1.65 }. sf-help-steps li { margin : 11 px 0 17 px ; padding-left : 5 px ; font-size : 13 px }. sf-help-steps b { font-size : 15 px ; color : #c8682a }. sf-help-steps p { margin : 5 px 0 ; color : #6a7a8b }. sf-guide-note { border-radius : 10 px ; padding : 12 px 15 px ; background : #f6f7f9 ; color : #718091 ; font-size : 12 px ; line-height : 1.6 }. sf-guide-done { width : 100 % ; margin-top : 18 px ; font-size : 14 px }
@ media ( max-width : 1330px ) {. studio-body { grid-template-columns : 245 px minmax ( 0 , 1 fr ) 305 px }. sf-easy-top { gap : 8 px ; padding : 0 12 px }. sf-easy-top . brand { min-width : 100 px }. sf-easy-file { max-width : 148 px }. sf-easy-device . icon-btn { padding : 8 px }}
@ media ( max-width : 1060px ) {. studio-body { grid-template-columns : 230 px minmax ( 0 , 1 fr )}. right-pane { position : fixed ; right : 0 ; top : 115 px ; bottom : 0 ; width : min ( 338 px , 92 vw ); display : flex !important ; transform : translateX ( 106 % ); z-index : 11 ; box-shadow : -10 px 0 25 px #1c2c40 25 } body . show-inspector . right-pane { transform : translateX ( 0 )}. sf-easy-top . brand small , . sf-easy-save-status { display : none }. sf-easy-file { max-width : 120 px }. studio-top . ui-btn . ghost . sf-save-btn { display : inline-flex !important }. sf-steps { font-size : 11 px ; gap : 7 px }}
@ media ( max-width : 720px ) {. sf-steps { min-height : 39 px ; padding : 5 px 10 px ; gap : 5 px }. sf-step-separator , . sf-step , . sf-steps-label { display : none }. sf-steps :: before { content : '① 选内容 → ② 改文字与样式 → ③ 保存发布' ; font-weight : 700 ; font-size : 11 px ; color : #a4653b }. sf-guide-link { font-size : 11 px }. studio-body { grid-template-columns : minmax ( 0 , 1 fr )}. left-pane { position : fixed ; top : 109 px ; bottom : 0 ; left : 0 ; width : min ( 315 px , 92 vw ); z-index : 11 ; display : flex !important ; transform : translateX ( -106 % ); box-shadow : 10 px 0 25 px #1c2c40 20 } body . show-structure . left-pane { transform : translateX ( 0 )}. right-pane { top : 109 px }. sf-easy-top { height : 70 px ; min-height : 70 px ; padding-inline : 8 px }. sf-easy-top . brand , . sf-easy-file { display : none }. sf-easy-device { margin-left : 0 ; margin-right : auto }. sf-easy-device . icon-btn { font-size : 11 px ; padding : 7 px }. sf-save-btn , . sf-publish-btn { font-size : 11 px ; padding : 9 px !important }. sf-easy-top . studio-actions summary { padding : 9 px 8 px ; font-size : 11 px }. sf-easy-top . studio-actions-menu { right : 0 }. pane-switcher { display : none }. stage { padding : 9 px 6 px }. device-frame . phone , . device-frame . tablet { max-width : 100 % }}
@ media ( max-width : 395px ) {. sf-easy-device . icon-btn { padding : 6 px ; font-size : 10 px }. sf-guide-link { font-size : 10 px }. sf-save-btn { padding : 8 px 6 px !important }. sf-publish-btn { padding : 8 px 6 px !important }. sf-steps :: before { content : '选区块 → 修改 → 保存发布' ; font-size : 10 px }}
/* Responsive panel toggle is always available on narrow screens. */
. sf-easy-top . sf-pane-controls { display : none ; gap : 5 px }
@ media ( max-width : 1060px ) {. sf-easy-top . sf-pane-controls { display : flex }. sf-easy-top . sf-pane-controls button { padding : 7 px 9 px ; font-size : 11 px ; border : 1 px solid #e2e6ed ; background : white ; border-radius : 8 px }}
/* Accessible repeated-item forms for galleries, carousels, FAQs and features */
. sf-array-editor { display : grid ; gap : 10 px }. sf-array-hint { font-size : 11 px ; line-height : 1.6 ; color : #8391a3 ; margin : 0 0 4 px }. sf-array-card { border : 1 px solid #e5eaf0 ; background : #fafbfd ; padding : 11 px ; border-radius : 10 px }. sf-array-card-head { display : flex ; align-items : center ; justify-content : space-between ; gap : 7 px ; margin-bottom : 12 px }. sf-array-card-head b { font-size : 12 px ; color : #586a7f }. sf-array-card-head div { display : flex ; gap : 3 px }. sf-array-card-head button { border : 1 px solid #e2e7ed ; border-radius : 5 px ; color : #6c7a8e ; background : white ; padding : 4 px 7 px ; font-size : 11 px }. sf-array-card-head button : last-child { color : #b95d62 }. sf-array-card-head button : disabled { opacity : .3 ; cursor : not-allowed }. sf-array-field { display : block !important ; margin : 10 px 0 !important ; font-size : 11 px !important ; font-weight : 650 !important }. sf-array-field input , . sf-array-field textarea { display : block ; width : 100 % ; margin-top : 5 px ; background : white }. sf-array-field textarea { min-height : 65 px }. sf-array-add { border : 1 px dashed #e5a77c ; border-radius : 9 px ; background : #fff8f2 ; color : #be672a ; padding : 13 px 9 px ; font-size : 12 px ; font-weight : 800 }
2026-10-26 09:43:17 +08:00
/* V8.22 canvas-level authoring with no change to published templates */
. sf-insert-hint { margin : 8 px 12 px ; padding : 10 px 12 px ; background : #fff3e8 ; color : #aa5525 ; font-size : 12 px ; border : 1 px solid #f0bd98 ; border-radius : 9 px ; line-height : 1.6 }
. sf-insert-hint [ hidden ] { display : none !important }
. preview-head . preview-note { max-width : 350 px ; font-size : 11 px ; color : #67778b }
# sitePreview : focus-visible { outline : 2 px solid #e77b37 ; outline-offset : 2 px }
/* V8.23 child-first layout inspector */
. sf-nested-edit { margin : 5 px 0 20 px ; display : grid ; gap : 9 px }. sf-nested-card { border : 1 px solid #e3e9f0 ; border-radius : 10 px ; padding : 10 px ; background : #fbfcfd }. sf-nested-card . active { border-color : #42a8b9 ; background : #f2fbfd }. sf-nested-heading { display : flex ; align-items : center ; justify-content : space-between ; gap : 6 px }. sf-nested-heading > button { border : 0 ; background : none ; font-size : 12 px ; color : #36556e ; font-weight : 750 ; text-align : left ; cursor : pointer }. sf-nested-heading span { display : flex ; gap : 4 px }. sf-nested-heading span button , . sf-nested-actions button { border : 1 px solid #d8e4eb ; background : white ; border-radius : 6 px ; padding : 5 px 9 px ; color : #36556e ; cursor : pointer }. sf-nested-heading button : disabled { opacity : .3 ; cursor : not-allowed }. sf-nested-field { display : block ; margin : 10 px 0 ; color : #536477 ; font-size : 12 px }. sf-nested-field input { display : block ; margin-top : 6 px ; width : 100 % ; padding : 10 px ; border : 1 px solid #d7e3e9 ; border-radius : 7 px ; font-size : 12 px }. sf-nested-actions { display : flex ; gap : 6 px ; margin : 10 px 0 2 px }. sf-nested-actions button : last-child { color : #b44549 }. sf-layout-presets { display : grid ; grid-template-columns : repeat ( 3 , minmax ( 0 , 1 fr )); gap : 6 px ; margin : 9 px 0 18 px }. sf-layout-presets button { white-space : normal ; padding : 10 px 5 px ; border : 1 px solid #e5b995 ; border-radius : 8 px ; background : #fff8f3 ; color : #945325 ; font-size : 11 px ; cursor : pointer }. sf-layout-presets button : disabled { opacity : .4 ; cursor : not-allowed }
/* V8.25: friendly shared-component management, scoped to editor only. */
. sf-shared-palette-row { border : 1 px solid #e4e8ef ; background : white ; border-radius : 9 px ; padding : 10 px ; display : grid ; gap : 8 px ; font-size : 12 px }
. sf-shared-palette-row strong { display : flex ; justify-content : space-between ; gap : 7 px }
. sf-shared-palette-row small { color : #8594a8 }
. sf-shared-palette-row > div { display : flex ; gap : 7 px }
. sf-shared-palette-row button , . sf-shared-actions button { border : 1 px solid #e0e4e9 ; border-radius : 7 px ; background : #fff ; padding : 7 px 9 px ; cursor : pointer ; color : #364759 }
. sf-shared-palette-row button : last-child { background : #fff3e8 ; color : #b95a23 ; border-color : #eac7ae }
. sf-shared-dialog { width : min ( 780 px , 96 vw ); max-height : 88 vh ; overflow : auto ; border : 1 px solid #e3e7ec ; border-radius : 16 px ; padding : 24 px ; box-shadow : 0 20 px 60 px #263a54 30 ; color : #334155 }
. sf-shared-dialog :: backdrop { background : #0e203b 70 }
. sf-shared-dialog-head { display : flex ; align-items : center ; justify-content : space-between ; gap : 12 px }
. sf-shared-dialog h2 { margin : 5 px 0 12 px ; font-size : 22 px }. sf-shared-dialog h3 { margin : 18 px 0 10 px }
. sf-shared-card { display : flex ; justify-content : space-between ; gap : 14 px ; border : 1 px solid #e3e8ee ; border-radius : 10 px ; padding : 13 px ; margin : 10 px 0 ; align-items : center }
. sf-shared-card > div : first-child { display : grid ; gap : 4 px }. sf-shared-card small , . sf-shared-usage small { display : block ; color : #64748b ; font-size : 11 px ; margin-top : 5 px }
. sf-shared-actions { display : flex ; flex-wrap : wrap ; gap : 6 px }
. sf-shared-usage { display : flex ; align-items : center ; gap : 12 px ; padding : 12 px ; border : 1 px solid #e2e7ed ; border-radius : 9 px ; margin : 7 px 0 ; cursor : pointer }
. sf-shared-usage : has ( input : disabled ) { opacity : .6 ; cursor : not-allowed }
# sharedComponentDetail { margin-top : 22 px ; border-top : 1 px solid #e2e7ed ; padding-top : 12 px }
# sharedComponentDetail > . ui-btn { margin-top : 14 px }
@ media ( max-width : 700px ) {. sf-shared-card { display : grid }. sf-shared-dialog { padding : 15 px }}
. sf-share-info { border : 1 px solid #f0cfb5 ; background : #fff8f1 ; padding : 13 px ; border-radius : 10 px ; margin : 12 px 0 ; color : #955023 ; font-size : 12 px }. sf-share-info p { line-height : 1.5 }
. sf-shared-history { display : flex ; justify-content : space-between ; align-items : center ; gap : 10 px ; border-bottom : 1 px solid #edf0f4 ; padding : 10 px 0 ; font-size : 12 px ; flex-wrap : wrap }
/* V8.26 global design navigation, review and restoration */
. sf-visual-nav { padding : 15 px ; border : 1 px solid #e2e8f0 ; border-radius : 12 px ; background : #fafcff }
. sf-visual-nav-header { display : flex ; flex-wrap : wrap ; justify-content : space-between ; gap : 8 px ; margin-bottom : 12 px }
. sf-visual-nav-header span , . sf-visual-nav-help { font-size : 12 px ; color : #64748b }
. sf-nav-item { padding : 8 px ; margin-bottom : 6 px ; border : 1 px solid #dde5ed ; background : #fff ; border-radius : 10 px ; display : flex ; align-items : center ; flex-wrap : wrap ; gap : 6 px }
. sf-nav-item input { min-width : 100 px ; flex : 1 1 135 px ; padding : 8 px ; border : 1 px solid #cbd5e1 ; border-radius : 7 px }
. sf-nav-action { font-size : 12 px !important ; padding : 6 px 9 px !important }
. sf-global-review { width : min ( 720 px , 95 vw ); max-height : 85 vh ; overflow : auto ; border : 1 px solid #dce5ed ; border-radius : 16 px ; padding : 24 px ; box-shadow : 0 18 px 54 px #132c45 40 }
. sf-review-change { padding : 12 px ; border : 1 px solid #dfe6ee ; border-radius : 10 px ; margin : 9 px 0 ; background : #f9fbfe ; overflow-wrap : anywhere }
. sf-review-change p { font-size : 12 px ; color : #64748b ; margin : 7 px 0 ; white-space : pre-wrap }
. sf-review-buttons { display : flex ; justify-content : flex-end ; gap : 10 px ; margin-top : 16 px }
@ media ( max-width : 600px ) {. sf-nav-item { margin-left : 0 !important }. sf-global-review { padding : 16 px }}
. sf-global-entry { display : flex ; flex-direction : column ; gap : 6 px ; padding : 12 px ; border : 1 px solid #f1d7bf ; border-radius : 10 px ; background : #fffaf5 ; margin-bottom : 12 px }. sf-global-entry button { font-weight : 650 ; text-align : left }. sf-global-entry small { color : #876c56 ; font-size : 11 px }
/* V8.29: discoverable content palette and safe theme comparison */
. sf-palette-filter { display : flex ; gap : 6 px ; margin : 12 px 13 px 6 px }. sf-palette-filter input { min-width : 0 ; flex : 1 ; border : 1 px solid #d8e2ed ; border-radius : 9 px ; padding : 10 px ; font-size : 12 px }. sf-palette-filter button { border : 1 px solid #dee6ee ; border-radius : 8 px ; background : #f7f9fc ; color : #53657a ; font-size : 11 px ; padding : 0 9 px }. sf-palette-summary { font-size : 11 px ; color : #657487 ; padding : 2 px 14 px 9 px }. sf-palette-categories { display : block ; padding : 0 12 px 12 px }. sf-palette-group { margin-bottom : 12 px }. sf-palette-group h4 { font-size : 12 px ; color : #4a5870 ; margin : 6 px 3 px 9 px ; font-weight : 700 }. sf-palette-grid { display : grid ; grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); gap : 8 px }. sf-palette-grid button { min-height : 54 px ; border : 1 px solid #e3e9ef ; background : white ; padding : 10 px ; border-radius : 10 px ; display : flex ; gap : 8 px ; align-items : center ; text-align : left ; color : #35445b ; font-size : 12 px ; font-weight : 600 ; line-height : 1.4 ; cursor : pointer }. sf-palette-grid button : hover { background : #fff6ee ; border-color : #e8a576 }. sf-palette-grid button span { font-size : 18 px ; flex-shrink : 0 ; color : #b9652f }. sf-palette-empty { font-size : 12 px ; color : #697b90 ; padding : 10 px }. sf-history-quick { border : 1 px solid #e0e6ed ; background : white ; color : #49596a ; border-radius : 8 px ; min-width : 32 px ; height : 34 px ; font-size : 20 px ; cursor : pointer }. sf-history-quick : disabled { opacity : .35 ; cursor : not-allowed }. sf-theme-preview-entry { white-space : nowrap ; color : #43576d }. sf-theme-showcase { width : min ( 1150 px , 96 vw ); height : min ( 94 vh , 900 px ); max-height : 94 vh ; border : 1 px solid #dce3eb ; border-radius : 17 px ; overflow : auto ; background : white ; padding : 0 ; box-shadow : 0 25 px 80 px #102841 48 }. sf-theme-showcase :: backdrop { background : #142438 9 c }. sf-showcase-head { display : flex ; justify-content : space-between ; align-items : start ; gap : 16 px ; padding : 20 px 24 px 13 px ; border-bottom : 1 px solid #e5eaf0 }. sf-showcase-head small { color : #b65c2d ; font-weight : 700 }. sf-showcase-head h2 { font-size : 21 px ; margin : 7 px 0 }. sf-showcase-head p { font-size : 12 px ; color : #697b90 ; margin : 0 }. sf-showcase-tools { display : flex ; gap : 12 px ; align-items : end ; flex-wrap : wrap ; padding : 14 px 24 px }. sf-showcase-tools label { display : grid ; gap : 5 px ; font-size : 12 px ; font-weight : 600 ; color : #43566c }. sf-showcase-tools select { border : 1 px solid #dce3ed ; border-radius : 8 px ; padding : 9 px 14 px ; min-width : 145 px ; background : white }. sf-showcase-device { display : flex ; gap : 5 px ; margin-left : auto ; background : #eef2f6 ; border-radius : 8 px ; padding : 4 px }. sf-showcase-device button { padding : 8 px 12 px ; border : 0 ; background : transparent ; color : #596b7e ; border-radius : 6 px ; cursor : pointer }. sf-showcase-device button [ aria-pressed = true ] { background : #fff ; color : #ad5c28 ; box-shadow : 0 1 px 6 px #122c44 19 ; font-weight : 700 }. sf-showcase-status { margin : 0 24 px 10 px ; color : #64748b ; font-size : 12 px }. sf-showcase-stage { height : min ( 55 vh , 520 px ); overflow : auto ; background : #eef1f5 ; padding : 15 px ; display : flex ; align-items : stretch ; justify-content : center }. sf-showcase-frame { min-width : 0 ; max-width : 100 % ; height : 100 % ; transition : width .18 s ease ; background : white ; box-shadow : 0 9 px 30 px #21334c 20 }. sf-showcase-frame iframe { display : block ; width : 100 % ; height : 100 % ; min-height : 0 ; border : 0 ; background : white }. sf-showcase-footer { display : flex ; align-items : center ; justify-content : space-between ; gap : 14 px ; padding : 14 px 24 px ; border-top : 1 px solid #e5eaf0 }. sf-showcase-footer span { color : #718195 ; font-size : 12 px }. sf-theme-showcase button : focus-visible , . sf-theme-showcase select : focus-visible , . sf-palette-filter input : focus-visible , . sf-history-quick : focus-visible { outline : 3 px solid #eeab77 ; outline-offset : 2 px }@ media ( max-width : 1100px ) {. sf-theme-preview-entry { font-size : 11 px ; padding : 8 px !important }}@ media ( max-width : 700px ) {. sf-theme-preview-entry { font-size : 0 ; min-width : 32 px ; padding : 6 px !important }. sf-theme-preview-entry :: before { content : '◫' ; font-size : 17 px }. sf-showcase-head , . sf-showcase-tools , . sf-showcase-footer { padding : 12 px }. sf-showcase-stage { height : 55 vh ; padding : 8 px }. sf-showcase-footer { flex-direction : column ; align-items : start }. sf-showcase-device { margin-left : 0 }}@ media ( prefers-reduced-motion : reduce ) {. sf-showcase-frame { transition : none }}
. sf-style-presets { display : grid ; grid-template-columns : repeat ( 3 , minmax ( 0 , 1 fr )); gap : 6 px ; margin : 9 px 0 17 px }. sf-style-presets button { border : 1 px solid #dae2eb ; border-radius : 9 px ; background : #fff ; padding : 10 px 5 px ; min-height : 48 px ; font-size : 11 px ; color : #364459 ; cursor : pointer }. sf-style-presets button : nth-child ( 2 ) { background : #f0f3f8 }. sf-style-presets button : nth-child ( 3 ) { background : #26374d ; color : #fff }. sf-style-presets button : focus-visible { outline : 3 px solid #efa971 ; outline-offset : 2 px }
/* Prevent translated, closed inspector drawers from widening the mobile viewport. */
@ media ( max-width : 1060px ) { html , body { max-width : 100 % ; overflow-x : clip }}
/* V8.29 mobile authoring: two deliberate toolbar rows, never horizontal-scrolling actions. */
@ media ( max-width : 720px ) {
. studio-top . sf-easy-top { height : auto ; min-height : 100 px ; flex-wrap : wrap ; justify-content : space-between ; align-content : center ; padding : 7 px 9 px ; gap : 5 px }
. studio-top . sf-easy-top . brand , . studio-top . sf-easy-top . file-name , . studio-top . sf-easy-top . sf-history-quick , . studio-top . sf-easy-top . sf-theme-preview-entry { display : none !important }
. studio-top . sf-easy-top . sf-pane-controls { order : 1 ; flex : 0 0 auto }
. studio-top . sf-easy-top # saveDraftButton { order : 2 ; flex : 0 0 auto }
. studio-top . sf-easy-top # publishDesignButton { order : 3 ; flex : 0 0 auto }
. studio-top . sf-easy-top . studio-actions { order : 4 ; flex : 0 0 auto }
. studio-top . sf-easy-top . sf-easy-device { order : 5 ; flex : 1 1 100 % ; display : flex ; justify-content : center ; margin : 0 }
. studio-top . sf-easy-top . sf-easy-device . icon-btn { flex : 1 ; max-width : 115 px }
. studio-body . left-pane , . studio-body . right-pane { top : 140 px !important }
. studio-actions-menu { right : 0 ; max-width : calc ( 100 vw - 18 px )}
}
