···

       
101
       
 
       
  margin: 32px 0;

     

       
102
       
 
       
}

     

       
103
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
104
       
 
       
/* Crash screen */

     

       
105
       
 
       
.moonbase-crash-wrapper > [class^="buttons_"] {

     

       
106
       
 
       
  gap: 1rem;

     

···

       
101
       
 
       
  margin: 32px 0;

     

       
102
       
 
       
}

     

       
103
       
 
       


     

       
104
       
+
       
.moonlight-card-info-header {

     

       
105
       
+
       
  margin-bottom: 0.25rem;

     

       
106
       
+
       
}

     

       
107
       
+
       


     

       
108
       
+
       
.moonlight-card-badge {

     

       
109
       
+
       
  border-radius: 0.1875rem;

     

       
110
       
+
       
  padding: 0 0.275rem;

     

       
111
       
+
       
  margin-right: 0.4em;

     

       
112
       
+
       
  background-color: var(--badge-color, var(--bg-mod-strong));

     

       
113
       
+
       
  color: #ffffff;

     

       
114
       
+
       
}

     

       
115
       
+
       


     

       
116
       
 
       
/* Crash screen */

     

       
117
       
 
       
.moonbase-crash-wrapper > [class^="buttons_"] {

     

       
118
       
 
       
  gap: 1rem;

     

···

       
42
       
 
       
        marginRight: "1em"

     

       
43
       
 
       
      }}

     

       
44
       
 
       
    >

     

       
45
       
-
       
      <Text variant="eyebrow">{title}</Text>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
46
       
 
       


     

       
47
       
 
       
      <Text variant="text-sm/normal">{children}</Text>

     

       
48
       
 
       
    </div>

     
···

       
52
       
 
       
function Badge({ color, children }: { color: string; children: React.ReactNode }) {

     

       
53
       
 
       
  return (

     

       
54
       
 
       
    <span

     

       
55
       
-
       
      style={{

     

       
56
       
-
       
        borderRadius: ".1875rem",

     

       
57
       
-
       
        padding: "0 0.275rem",

     

       
58
       
-
       
        marginRight: "0.4em",

     

       
59
       
-
       
        backgroundColor: color,

     

       
60
       
-
       
        color: "#fff"

     

       
61
       
-
       
      }}

     

       
62
       
 
       
    >

     

       
63
       
 
       
      {children}

     

       
64
       
 
       
    </span>

     
···

       
130
       
 
       
            const name = tagNames[tag];

     

       
131
       
 
       


     

       
132
       
 
       
            return (

     

       
133
       
-
       
              <Badge key={i} color={tag === ExtensionTag.DangerZone ? "var(--red-400)" : "var(--brand-500)"}>

     

       
134
       
 
       
                {name}

     

       
135
       
 
       
              </Badge>

     

       
136
       
 
       
            );

     
···

       
141
       
 
       
      {dependencies.length > 0 && (

     

       
142
       
 
       
        <InfoSection title="Dependencies">

     

       
143
       
 
       
          {dependencies.map((dep) => {

     

       
144
       
-
       
            const colors = {

     

       
145
       
-
       
              [DependencyType.Dependency]: "var(--brand-500)",

     

       
146
       
-
       
              [DependencyType.Optional]: "var(--orange-400)",

     

       
147
       
 
       
              [DependencyType.Incompatible]: "var(--red-400)"

     

       
148
       
 
       
            };

     

       
149
       
-
       
            const color = colors[dep.type];

     

       
150
       
 
       
            const name = MoonbaseSettingsStore.tryGetExtensionName(dep.id);

     

       
151
       
 
       


     

       
152
       
 
       
            return (

     

       
153
       
-
       
              <Badge color={color} key={dep.id}>

     

       
154
       
 
       
                {name}

     

       
155
       
 
       
              </Badge>

     

       
156
       
 
       
            );

     

···

       
42
       
 
       
        marginRight: "1em"

     

       
43
       
 
       
      }}

     

       
44
       
 
       
    >

     

       
45
       
+
       
      <Text variant="eyebrow" className="moonlight-card-info-header">

     

       
46
       
+
       
        {title}

     

       
47
       
+
       
      </Text>

     

       
48
       
 
       


     

       
49
       
 
       
      <Text variant="text-sm/normal">{children}</Text>

     

       
50
       
 
       
    </div>

     
···

       
54
       
 
       
function Badge({ color, children }: { color: string; children: React.ReactNode }) {

     

       
55
       
 
       
  return (

     

       
56
       
 
       
    <span

     

       
57
       
+
       
      className="moonlight-card-badge"

     

       
58
       
+
       
      style={

     

       
59
       
+
       
        {

     

       
60
       
+
       
          "--badge-color": color

     

       
61
       
+
       
        } as React.CSSProperties

     

       
62
       
+
       
      }

     

       
0
       
 
       

     

       
63
       
 
       
    >

     

       
64
       
 
       
      {children}

     

       
65
       
 
       
    </span>

     
···

       
131
       
 
       
            const name = tagNames[tag];

     

       
132
       
 
       


     

       
133
       
 
       
            return (

     

       
134
       
+
       
              <Badge key={i} color={tag === ExtensionTag.DangerZone ? "var(--red-400)" : "var(--bg-mod-strong)"}>

     

       
135
       
 
       
                {name}

     

       
136
       
 
       
              </Badge>

     

       
137
       
 
       
            );

     
···

       
142
       
 
       
      {dependencies.length > 0 && (

     

       
143
       
 
       
        <InfoSection title="Dependencies">

     

       
144
       
 
       
          {dependencies.map((dep) => {

     

       
145
       
+
       
            /*const colors = {

     

       
146
       
+
       
              [DependencyType.Dependency]: "var(--bg-mod-strong)",

     

       
147
       
+
       
              [DependencyType.Optional]: "var(--bg-mod-faint)",

     

       
148
       
 
       
              [DependencyType.Incompatible]: "var(--red-400)"

     

       
149
       
 
       
            };

     

       
150
       
+
       
            const color = colors[dep.type];*/

     

       
151
       
 
       
            const name = MoonbaseSettingsStore.tryGetExtensionName(dep.id);

     

       
152
       
 
       


     

       
153
       
 
       
            return (

     

       
154
       
+
       
              <Badge color="var(--bg-mod-strong)" key={dep.id}>

     

       
155
       
 
       
                {name}

     

       
156
       
 
       
              </Badge>

     

       
157
       
 
       
            );