Skip to content

Commit 1645f6c

Browse files
coatlesscoatless
committed
Tweaks
1 parent bb9c3b1 commit 1645f6c

File tree

1 file changed

+133
-133
lines changed

1 file changed

+133
-133
lines changed

‎_extensions/pyodide/qpyodide-styling.css

+133-133
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,134 @@
11
.monaco-editor pre {
2-
background-color: unset !important;
3-
}
4-
5-
.qpyodide-editor-toolbar {
6-
width: 100%;
7-
display: flex;
8-
justify-content: space-between;
9-
box-sizing: border-box;
10-
}
11-
12-
.qpyodide-editor-toolbar-left-buttons, .qpyodide-editor-toolbar-right-buttons {
13-
display: flex;
14-
}
15-
16-
.qpyodide-non-interactive-loading-container.qpyodide-cell-needs-evaluation, .qpyodide-non-interactive-loading-container.qpyodide-cell-evaluated {
17-
justify-content: center;
18-
display: flex;
19-
background-color: rgba(250, 250, 250, 0.65);
20-
border: 1px solid rgba(233, 236, 239, 0.65);
21-
border-radius: 0.5rem;
22-
margin-top: 15px;
23-
margin-bottom: 15px;
24-
}
25-
26-
.qpyodide-r-project-logo {
27-
color: #2767B0; /* R Project's blue color */
28-
}
29-
30-
.qpyodide-icon-status-spinner {
31-
color: #7894c4;
32-
}
33-
34-
.qpyodide-icon-run-code {
35-
color: #0d9c29
36-
}
37-
38-
.qpyodide-output-code-stdout {
39-
color: #111;
40-
}
41-
42-
.qpyodide-output-code-stderr {
43-
color: #db4133;
44-
}
45-
46-
.qpyodide-editor {
47-
border: 1px solid #EEEEEE;
48-
}
49-
50-
.qpyodide-editor-toolbar {
51-
background-color: #EEEEEE;
52-
padding: 0.2rem 0.5rem;
53-
}
54-
55-
.qpyodide-button {
56-
background-color: #EEEEEE;
57-
display: inline-block;
58-
font-weight: 400;
59-
line-height: 1;
60-
text-decoration: none;
61-
text-align: center;
62-
color: #000;
63-
border-color: #dee2e6;
64-
border: 1px solid rgba(0,0,0,0);
65-
padding: 0.375rem 0.75rem;
66-
font-size: .9rem;
67-
border-radius: 0.25rem;
68-
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
69-
}
70-
71-
.qpyodide-button:hover {
72-
color: #000;
73-
background-color: #d9dce0;
74-
border-color: #c8ccd0;
75-
}
76-
77-
.qpyodide-button:disabled,.qpyodide-button.disabled,fieldset:disabled .qpyodide-button {
78-
pointer-events: none;
79-
opacity: .65
80-
}
81-
82-
.qpyodide-button-reset {
83-
color: #696969; /*#4682b4;*/
84-
}
85-
86-
.qpyodide-button-copy {
87-
color: #696969;
88-
}
89-
90-
91-
/* Custom styling for RevealJS Presentations*/
92-
93-
/* Reset the style of the interactive area */
94-
.reveal div.qpyodide-interactive-area {
95-
display: block;
96-
box-shadow: none;
97-
max-width: 100%;
98-
max-height: 100%;
99-
margin: 0;
100-
padding: 0;
101-
}
102-
103-
/* Provide space to entries */
104-
.reveal div.qpyodide-output-code-area pre div {
105-
margin: 1px 2px 1px 10px;
106-
}
107-
108-
/* Collapse the inside code tags to avoid extra space between line outputs */
109-
.reveal pre div code.qpyodide-output-code-stdout, .reveal pre div code.qpyodide-output-code-stderr {
110-
padding: 0;
111-
display: contents;
112-
}
113-
114-
.reveal pre div code.qpyodide-output-code-stdout {
115-
color: #111;
116-
}
117-
118-
.reveal pre div code.qpyodide-output-code-stderr {
119-
color: #db4133;
120-
}
121-
122-
123-
/* Create a border around console and output (does not effect graphs) */
124-
.reveal div.qpyodide-console-area {
125-
border: 1px solid #EEEEEE;
126-
box-shadow: 2px 2px 10px #EEEEEE;
127-
}
128-
129-
/* Cap output height and allow text to scroll */
130-
/* TODO: Is there a better way to fit contents/max it parallel to the monaco editor size? */
131-
.reveal div.qpyodide-output-code-area pre {
132-
max-height: 400px;
133-
overflow: scroll;
134-
}
2+
background-color: unset !important;
3+
}
4+
5+
.qpyodide-editor-toolbar {
6+
width: 100%;
7+
display: flex;
8+
justify-content: space-between;
9+
box-sizing: border-box;
10+
}
11+
12+
.qpyodide-editor-toolbar-left-buttons, .qpyodide-editor-toolbar-right-buttons {
13+
display: flex;
14+
}
15+
16+
.qpyodide-non-interactive-loading-container.qpyodide-cell-needs-evaluation, .qpyodide-non-interactive-loading-container.qpyodide-cell-evaluated {
17+
justify-content: center;
18+
display: flex;
19+
background-color: rgba(250, 250, 250, 0.65);
20+
border: 1px solid rgba(233, 236, 239, 0.65);
21+
border-radius: 0.5rem;
22+
margin-top: 15px;
23+
margin-bottom: 15px;
24+
}
25+
26+
.qpyodide-r-project-logo {
27+
color: #2767B0; /* R Project's blue color */
28+
}
29+
30+
.qpyodide-icon-status-spinner {
31+
color: #7894c4;
32+
}
33+
34+
.qpyodide-icon-run-code {
35+
color: #0d9c29
36+
}
37+
38+
.qpyodide-output-code-stdout {
39+
color: #111;
40+
}
41+
42+
.qpyodide-output-code-stderr {
43+
color: #db4133;
44+
}
45+
46+
.qpyodide-editor {
47+
border: 1px solid #EEEEEE;
48+
}
49+
50+
.qpyodide-editor-toolbar {
51+
background-color: #EEEEEE;
52+
padding: 0.2rem 0.5rem;
53+
}
54+
55+
.qpyodide-button {
56+
background-color: #EEEEEE;
57+
display: inline-block;
58+
font-weight: 400;
59+
line-height: 1;
60+
text-decoration: none;
61+
text-align: center;
62+
color: #000;
63+
border-color: #dee2e6;
64+
border: 1px solid rgba(0,0,0,0);
65+
padding: 0.375rem 0.75rem;
66+
font-size: .9rem;
67+
border-radius: 0.25rem;
68+
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
69+
}
70+
71+
.qpyodide-button:hover {
72+
color: #000;
73+
background-color: #d9dce0;
74+
border-color: #c8ccd0;
75+
}
76+
77+
.qpyodide-button:disabled,.qpyodide-button.disabled,fieldset:disabled .qpyodide-button {
78+
pointer-events: none;
79+
opacity: .65
80+
}
81+
82+
.qpyodide-button-reset {
83+
color: #696969; /*#4682b4;*/
84+
}
85+
86+
.qpyodide-button-copy {
87+
color: #696969;
88+
}
89+
90+
91+
/* Custom styling for RevealJS Presentations*/
92+
93+
/* Reset the style of the interactive area */
94+
.reveal div.qpyodide-interactive-area {
95+
display: block;
96+
box-shadow: none;
97+
max-width: 100%;
98+
max-height: 100%;
99+
margin: 0;
100+
padding: 0;
101+
}
102+
103+
/* Provide space to entries */
104+
.reveal div.qpyodide-output-code-area pre div {
105+
margin: 1px 2px 1px 10px;
106+
}
107+
108+
/* Collapse the inside code tags to avoid extra space between line outputs */
109+
.reveal pre div code.qpyodide-output-code-stdout, .reveal pre div code.qpyodide-output-code-stderr {
110+
padding: 0;
111+
display: contents;
112+
}
113+
114+
.reveal pre div code.qpyodide-output-code-stdout {
115+
color: #111;
116+
}
117+
118+
.reveal pre div code.qpyodide-output-code-stderr {
119+
color: #db4133;
120+
}
121+
122+
123+
/* Create a border around console and output (does not effect graphs) */
124+
.reveal div.qpyodide-console-area {
125+
border: 1px solid #EEEEEE;
126+
box-shadow: 2px 2px 10px #EEEEEE;
127+
}
128+
129+
/* Cap output height and allow text to scroll */
130+
/* TODO: Is there a better way to fit contents/max it parallel to the monaco editor size? */
131+
.reveal div.qpyodide-output-code-area pre {
132+
max-height: 400px;
133+
overflow: scroll;
134+
}

0 commit comments

Comments
 (0)