Tags: Mobile edit Mobile web edit |
Tags: Mobile edit Mobile web edit |
| Line 52: |
Line 52: |
| .sv-skill-card *{ | | .sv-skill-card *{ |
| box-sizing:border-box; | | box-sizing:border-box; |
| }
| |
|
| |
| .sv-gi-card a,
| |
| .sv-skill-card a{
| |
| color:rgba(106,166,255,0.95);
| |
| text-decoration:none;
| |
| }
| |
|
| |
| .sv-gi-card a:hover,
| |
| .sv-skill-card a:hover{
| |
| text-decoration:underline;
| |
| } | | } |
|
| |
|
| Line 124: |
Line 113: |
| .sv-skill-card .sv-img img{ | | .sv-skill-card .sv-img img{ |
| box-shadow:0 10px 18px rgba(0,0,0,0.30); | | box-shadow:0 10px 18px rgba(0,0,0,0.30); |
| }
| |
|
| |
| /* Focus outline (no markup changes required)
| |
| NOTE: slider focus ring is now sitewide, so it is not listed here.
| |
| */
| |
| .sv-gi-card .sv-tip-btn:focus,
| |
| .sv-skill-card .sv-tip-btn:focus,
| |
| .sv-gi-card .sv-disclose-btn:focus,
| |
| .sv-skill-card .sv-disclose-btn:focus,
| |
| .sv-gi-card .sv-tab:focus,
| |
| .sv-skill-card .sv-tab:focus{
| |
| outline:2px solid rgba(106,166,255,0.85);
| |
| outline-offset:2px;
| |
| } | | } |
|
| |
|
| Line 189: |
Line 165: |
| font-size:14px; | | font-size:14px; |
| line-height:1.35; | | line-height:1.35; |
| word-wrap:break-word;
| |
| }
| |
|
| |
| /* ----------------------------------------------------------------------------
| |
| 4) NOTES TIP BUTTON (source pop is hidden; Universal Popups renders UI)
| |
| ---------------------------------------------------------------------------- */
| |
|
| |
| .sv-gi-card .sv-tip,
| |
| .sv-skill-card .sv-tip{
| |
| position:relative;
| |
| flex:0 0 auto;
| |
| }
| |
|
| |
| .sv-gi-card .sv-tip-btn,
| |
| .sv-skill-card .sv-tip-btn{
| |
| display:inline-flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| width:28px;
| |
| height:28px;
| |
| border-radius:999px;
| |
| border:1px solid rgba(75,99,136,0.55);
| |
| background:#273449;
| |
| cursor:pointer;
| |
| }
| |
|
| |
| .sv-gi-card .sv-tip-btn:hover,
| |
| .sv-skill-card .sv-tip-btn:hover{
| |
| background:#2e3f59;
| |
| }
| |
|
| |
| .sv-gi-card .sv-tip-btn[aria-expanded="true"],
| |
| .sv-skill-card .sv-tip-btn[aria-expanded="true"]{
| |
| background:#2e3f59;
| |
| border-color:rgba(106,166,255,0.70);
| |
| }
| |
|
| |
| .sv-gi-card .sv-ico,
| |
| .sv-skill-card .sv-ico{
| |
| display:inline-flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| width:18px;
| |
| height:18px;
| |
| border-radius:999px;
| |
| font-weight:900;
| |
| font-size:12px;
| |
| line-height:1;
| |
| color:rgba(245,249,255,0.96);
| |
| background:rgba(15,23,42,0.35);
| |
| border:1px solid rgba(75,99,136,0.55);
| |
| }
| |
|
| |
| /* Source pop styles retained for safety (normally hidden via .sv-hidden) */
| |
| .sv-gi-card .sv-tip-pop,
| |
| .sv-skill-card .sv-tip-pop{
| |
| display:block;
| |
| position:absolute;
| |
| z-index:50;
| |
| top:34px;
| |
| right:0;
| |
| width:340px;
| |
| max-width:92vw;
| |
| border-radius:16px;
| |
| border:1px solid rgba(75,99,136,0.55);
| |
| background:#0f172a;
| |
| background-image:radial-gradient(900px 260px at 35% 0, rgba(106,166,255,0.14), rgba(0,0,0,0) 60%);
| |
| box-shadow:0 18px 40px rgba(0,0,0,0.45);
| |
| overflow:hidden;
| |
| }
| |
|
| |
| .sv-gi-card .sv-tip-pop-head,
| |
| .sv-skill-card .sv-tip-pop-head{
| |
| display:flex;
| |
| align-items:center;
| |
| justify-content:space-between;
| |
| padding:10px 12px;
| |
| border-bottom:1px solid rgba(59,75,99,0.85);
| |
| background:#1f2937;
| |
| }
| |
|
| |
| .sv-gi-card .sv-tip-pop-title,
| |
| .sv-skill-card .sv-tip-pop-title{
| |
| font-weight:900;
| |
| font-size:13px;
| |
| letter-spacing:0.2px;
| |
| color:rgba(245,249,255,0.96);
| |
| }
| |
|
| |
| .sv-gi-card .sv-tip-pop-body,
| |
| .sv-skill-card .sv-tip-pop-body{
| |
| padding:10px 12px;
| |
| font-size:13px;
| |
| color:rgba(215,226,244,0.92);
| |
| line-height:1.4;
| |
| word-wrap:break-word; | | word-wrap:break-word; |
| } | | } |
| Line 441: |
Line 322: |
| } | | } |
|
| |
|
| /* Make disclose buttons match meta pill style (slightly larger) */ | | /* Requirements / Users: keep the shared disclose component, |
| .sv-gi-card .sv-disclose-btn, | | but apply a pill-shaped layout in this row for a compact UI. */ |
| .sv-skill-card .sv-disclose-btn{ | | .sv-gi-card .sv-reqrow .sv-disclose-btn, |
| display:flex; | | .sv-skill-card .sv-reqrow .sv-disclose-btn{ |
| align-items:center;
| | border-radius:999px; |
| justify-content:space-between;
| |
| | |
| width:100%;
| |
| min-height:36px; | | min-height:36px; |
| padding:0 12px; | | padding:0 12px; |
|
| |
| border-radius:999px;
| |
| border:1px solid rgba(59,75,99,0.85);
| |
| background:#273449;
| |
| background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
| |
| box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
| |
|
| |
| cursor:pointer;
| |
| }
| |
|
| |
| .sv-gi-card .sv-disclose-btn:hover,
| |
| .sv-skill-card .sv-disclose-btn:hover{
| |
| background:#2e3f59;
| |
| }
| |
|
| |
| .sv-gi-card .sv-disclose-label,
| |
| .sv-skill-card .sv-disclose-label{
| |
| font-weight:900;
| |
| font-size:12px;
| |
| letter-spacing:0.08px;
| |
| color:rgba(245,249,255,0.96);
| |
| } | | } |
|
| |
|
| .sv-gi-card .sv-disclose-count,
| |
| .sv-skill-card .sv-disclose-count{
| |
| font-weight:900;
| |
| font-size:12px;
| |
| color:rgba(182,198,224,0.95);
| |
| }
| |
|
| |
|
| /* ---------------------------------------------------------------------------- | | /* ---------------------------------------------------------------------------- |
| Line 494: |
Line 345: |
| box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); | | box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); |
| } | | } |
| | |
| | @media (max-width:500px){ |
| | /* Light “mobile shrink” so the slider geometry fits inside the bubble */ |
| | .sv-skill-level{ |
| | padding:9px 10px; |
| | } |
| | |
| | .sv-skill-level .sv-level-label:after{ |
| | font-size:12px; |
| | } |
| | |
| | .sv-skill-level .sv-level-range--custom, |
| | .sv-skill-level .sv-level-range[data-sv-slider="1"]{ |
| | height:24px; |
| | } |
| | |
| | .sv-skill-level .sv-level-track{ |
| | margin-top:-3px; |
| | height:6px; |
| | } |
| | |
| | .sv-skill-level .sv-level-thumb{ |
| | margin-top:-8px; |
| | margin-left:-8px; |
| | width:16px; |
| | height:16px; |
| | } |
| | |
| | .sv-skill-level .sv-level-bubble{ |
| | top:-28px; |
| | padding:5px 9px; |
| | font-size:11px; |
| | } |
| | } |
| | |
|
| |
|
| .sv-gi-card .sv-level-ui, | | .sv-gi-card .sv-level-ui, |
| .sv-skill-card .sv-level-ui{ | | .sv-skill-card .sv-level-ui{ |
| display:flex; | | display:block; |
| align-items:baseline; | | text-align:center; |
| justify-content:center;
| |
| gap:6px;
| |
| margin-bottom:8px; | | margin-bottom:8px; |
| } | | } |
|
| |
|
| | /* Replace “Level X / Y” with helper text (keep markup for JS parsing) */ |
| .sv-gi-card .sv-level-label, | | .sv-gi-card .sv-level-label, |
| .sv-skill-card .sv-level-label{ | | .sv-skill-card .sv-level-label{ |
| | font-size:0; /* hides emitted text + numbers */ |
| | line-height:0; |
| | margin:0; |
| | padding:0; |
| | } |
| | |
| | .sv-gi-card .sv-level-label:after, |
| | .sv-skill-card .sv-level-label:after{ |
| | content:"Move to select level of skill"; |
| | display:block; |
| | |
| font-weight:900; | | font-weight:900; |
| | font-size:13px; |
| | line-height:1.25; |
| | letter-spacing:0.15px; |
| | |
| color:rgba(245,249,255,0.94); | | color:rgba(245,249,255,0.94); |
| } | | } |
|
| |
|
| .sv-gi-card .sv-level-num,
| | /* Remove bottom min/max tick labels */ |
| .sv-skill-card .sv-level-num{ | | .sv-skill-level .sv-level-ticklabels{ |
| font-weight:900; | | display:none; |
| color:rgba(245,249,255,0.98);
| |
| } | | } |
|
| |
|
