mirror of
https://github.com/anomalyco/opencode.git
synced 2026-02-01 22:48:16 +00:00
feat: style adjustments, icons updated
This commit is contained in:
@@ -259,7 +259,7 @@
|
||||
|
||||
&[data-collapsed="true"] {
|
||||
[data-slot="card-trigger"] {
|
||||
padding: 16px 24px;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
[data-slot="plan-header"] {
|
||||
@@ -267,20 +267,11 @@
|
||||
}
|
||||
|
||||
[data-slot="amount"] {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
[data-slot="period"],
|
||||
[data-slot="multiplier"] {
|
||||
font-size: 13px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-selected="false"][data-collapsed="false"] {
|
||||
[data-slot="plan-header"] {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
[data-slot="amount"] {
|
||||
font-size: 22px;
|
||||
}
|
||||
@@ -309,6 +300,7 @@
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
line-height: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -359,7 +351,7 @@
|
||||
[data-slot="terms"] li {
|
||||
color: rgba(255, 255, 255, 0.59);
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
line-height: 1.2;
|
||||
padding-left: 16px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
@@ -395,15 +387,20 @@
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition-property: background-color, border-color;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.25, 0, 0.5, 1);
|
||||
}
|
||||
|
||||
[data-slot="cancel"] {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.17);
|
||||
border: 1px solid var(--border-base, rgba(255, 255, 255, 0.17));
|
||||
background: var(--surface-raised-base, rgba(255, 255, 255, 0.06));
|
||||
background-clip: border-box;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, 0.35);
|
||||
background: var(--surface-raised-base, rgba(255, 255, 255, 0.08));
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -15,30 +15,46 @@ export function PlanIcon(props: { plan: string }) {
|
||||
<Match when={props.plan === "20"}>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Black 20 plan</title>
|
||||
<rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" stroke-width="1.5" />
|
||||
<rect x="0.5" y="0.5" width="23" height="23" stroke="currentColor" />
|
||||
</svg>
|
||||
</Match>
|
||||
<Match when={props.plan === "100"}>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Black 100 plan</title>
|
||||
<rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5" />
|
||||
<rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5" />
|
||||
<rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5" />
|
||||
<rect x="14" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5" />
|
||||
<rect x="0.5" y="0.5" width="9" height="9" stroke="currentColor" />
|
||||
<rect x="0.5" y="14.5" width="9" height="9" stroke="currentColor" />
|
||||
<rect x="14.5" y="0.5" width="9" height="9" stroke="currentColor" />
|
||||
<rect x="14.5" y="14.5" width="9" height="9" stroke="currentColor" />
|
||||
</svg>
|
||||
</Match>
|
||||
<Match when={props.plan === "200"}>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Black 200 plan</title>
|
||||
<rect x="2" y="2" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
|
||||
<rect x="10" y="2" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
|
||||
<rect x="18" y="2" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
|
||||
<rect x="2" y="10" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
|
||||
<rect x="10" y="10" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
|
||||
<rect x="18" y="10" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
|
||||
<rect x="2" y="18" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
|
||||
<rect x="10" y="18" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
|
||||
<rect x="18" y="18" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
|
||||
<rect x="0.5" y="0.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="0.5" y="5.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="0.5" y="10.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="0.5" y="15.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="0.5" y="20.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="5.5" y="0.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="5.5" y="5.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="5.5" y="10.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="5.5" y="15.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="5.5" y="20.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="10.5" y="0.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="10.5" y="5.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="10.5" y="10.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="10.5" y="15.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="10.5" y="20.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="15.5" y="0.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="15.5" y="5.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="15.5" y="10.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="15.5" y="15.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="15.5" y="20.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="20.5" y="0.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="20.5" y="5.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="20.5" y="10.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="20.5" y="15.5" width="3" height="3" stroke="currentColor" />
|
||||
<rect x="20.5" y="20.5" width="3" height="3" stroke="currentColor" />
|
||||
</svg>
|
||||
</Match>
|
||||
</Switch>
|
||||
|
||||
Reference in New Issue
Block a user