Skip to content

Commit b6b09b3

Browse files
committed
Added css for webviews
1 parent c596b4f commit b6b09b3

2 files changed

Lines changed: 121 additions & 0 deletions

File tree

resources/webviews/css/reset.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
html {
2+
box-sizing: border-box;
3+
font-size: 13px;
4+
}
5+
6+
*,
7+
*:before,
8+
*:after {
9+
box-sizing: inherit;
10+
}
11+
12+
body,
13+
h1,
14+
h2,
15+
h3,
16+
h4,
17+
h5,
18+
h6,
19+
p,
20+
ol,
21+
ul {
22+
margin: 0;
23+
padding: 0;
24+
font-weight: normal;
25+
}
26+
27+
img {
28+
max-width: 100%;
29+
height: auto;
30+
}

resources/webviews/css/vscode.css

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
:root {
2+
--container-paddding: 20px;
3+
--input-padding-vertical: 6px;
4+
--input-padding-horizontal: 4px;
5+
--input-margin-vertical: 4px;
6+
--input-margin-horizontal: 0;
7+
}
8+
9+
body {
10+
padding: 0 var(--container-paddding);
11+
color: var(--vscode-foreground);
12+
font-size: var(--vscode-font-size);
13+
font-weight: var(--vscode-font-weight);
14+
font-family: var(--vscode-font-family);
15+
background-color: var(--vscode-editor-background);
16+
}
17+
18+
ol,
19+
ul {
20+
padding-left: var(--container-paddding);
21+
}
22+
23+
body > *,
24+
form > * {
25+
margin-block-start: var(--input-margin-vertical);
26+
margin-block-end: var(--input-margin-vertical);
27+
}
28+
29+
*:focus {
30+
outline-color: var(--vscode-focusBorder) !important;
31+
}
32+
33+
a {
34+
color: var(--vscode-textLink-foreground);
35+
}
36+
37+
a:hover,
38+
a:active {
39+
color: var(--vscode-textLink-activeForeground);
40+
}
41+
42+
code {
43+
font-size: var(--vscode-editor-font-size);
44+
font-family: var(--vscode-editor-font-family);
45+
}
46+
47+
button {
48+
border: none;
49+
padding: var(--input-padding-vertical) var(--input-padding-horizontal);
50+
width: 100%;
51+
text-align: center;
52+
outline: 1px solid transparent;
53+
outline-offset: 2px !important;
54+
color: var(--vscode-button-foreground);
55+
background: var(--vscode-button-background);
56+
}
57+
58+
button:hover {
59+
cursor: pointer;
60+
background: var(--vscode-button-hoverBackground);
61+
}
62+
63+
button:focus {
64+
outline-color: var(--vscode-focusBorder);
65+
}
66+
67+
button.secondary {
68+
color: var(--vscode-button-secondaryForeground);
69+
background: var(--vscode-button-secondaryBackground);
70+
}
71+
72+
button.secondary:hover {
73+
background: var(--vscode-button-secondaryHoverBackground);
74+
}
75+
76+
input:not([type='checkbox']),
77+
textarea {
78+
display: block;
79+
width: 100%;
80+
border: none;
81+
font-family: var(--vscode-font-family);
82+
padding: var(--input-padding-vertical) var(--input-padding-horizontal);
83+
color: var(--vscode-input-foreground);
84+
outline-color: var(--vscode-input-border);
85+
background-color: var(--vscode-input-background);
86+
}
87+
88+
input::placeholder,
89+
textarea::placeholder {
90+
color: var(--vscode-input-placeholderForeground);
91+
}

0 commit comments

Comments
 (0)