main.css
5.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
html, body {
width: 100%;
height: 100%; }
.programing {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
background-color: #999; }
.record-title {
width: 100%;
height: 36px;
background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
position: absolute;
top: 0;
z-index: 9999;
padding-left: 28px; }
.record-wrap {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
padding-top: 36px;
padding-bottom: 300px; }
.record-wrap #ideDir {
width: 170px;
height: 100%;
padding-top: 24px;
float: left;
background-color: #FFF;
overflow-y: scroll; }
.record-wrap #ideDir .tree-header {
text-indent: 14px; }
.record-wrap #ideEditer {
width: calc(100% - 170px);
float: left;
height: 100%;
background-color: #00F; }
.record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding {
height: 100%; }
.record-wrap #folder {
height: 100%;
min-height: 300px; }
.record-wrap .gxb-record {
position: relative;
height: 100%; }
.record-toolbox {
width: 100%;
position: absolute;
bottom: 0;
z-index: 999; }
.record-toolbox .console-wrap {
width: 100%;
background-color: #FFF;
height: 240px;
border-top: 1px solid #999d9e; }
.record-toolbox .console-wrap #toolbar {
width: 100%;
height: 36px;
overflow: hidden;
background-color: #e3e3e3; }
.record-toolbox .console-wrap #toolbar .result-tabs {
height: 30px;
border-radius: 30px;
background-color: #62DCF5;
overflow: hidden;
margin: 3px 16px;
color: #fff; }
.record-toolbox .console-wrap #toolbar .text {
color: #fff; }
.record-toolbox .console-wrap #toolbar .result-tabs > li.active > a, .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a:hover, .record-toolbox .console-wrap #toolbar .result-tabs > li > a:hover, .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a:focus {
color: #1FB6FF;
background-color: #fff;
box-shadow: 0px 0px 2px 0px #B3E5FF;
border: none; }
.record-toolbox .console-wrap #toolbar .result-tabs > li > a, .record-toolbox .console-wrap #toolbar .result-tabs > li.active > a:hover {
padding: 4px 36px;
border: none;
margin: 1px;
border-radius: 15px;
font-size: 14px;
transition: all 0.1s ease; }
.record-toolbox .console-wrap #toolbar .func {
height: 36px;
padding-top: 3px; }
.record-toolbox #full-screen, .record-toolbox #back-screen {
margin: 0;
background-image: linear-gradient(90deg, #1FB6FF 0%, #62DCF5 100%);
border-radius: 100px;
padding: 6px 7px;
margin: 0 16px;
color: #fff; }
.record-toolbox #resultoutput {
height: 204px;
overflow: auto; }
.record-toolbox #teacherCompileBtn, .record-toolbox #studentCompileBtn {
background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
-webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
border: none;
color: #fff;
padding-top: 5px;
padding-bottom: 5px; }
.record-toolbox .record-ctrl {
height: 60px;
width: 100%;
z-index: 999;
padding: 0 136px;
background-color: #23383f; }
.record-toolbox .record-ctrl .btn {
padding: 0;
height: 60px;
float: left;
line-height: 1; }
.record-toolbox .record-ctrl .btn i {
font-size: 48px;
color: #fff; }
.record-toolbox .record-ctrl .recording-time {
float: left;
z-index: 9;
color: #FFF;
font-size: 18px;
height: 60px;
line-height: 60px; }
.record-toolbox .record-ctrl .recording-time:before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background-color: red;
z-index: 99;
margin: 2px 8px;
border-radius: 50%; }
.pause-shodow {
position: absolute;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4); }
.pause-shodow img {
position: absolute;
top: 15%;
left: 50%;
transform: translate(-50%); }
.pause-shodow .compile-reslut .btn {
margin-right: 8px; }
.compile-reslut, .re-reslut {
position: absolute;
height: 200px;
width: 400px;
background-color: #FFF;
top: 15%;
left: 50%;
transform: translate(-50%); }
.compile-reslut .tip-header, .compile-reslut .tip-footer, .re-reslut .tip-header, .re-reslut .tip-footer {
width: 100%;
padding: 8px 8px;
background-color: #F5F6FA; }
.compile-reslut .tip-content, .re-reslut .tip-content {
padding: 40px;
line-height: 1.7; }
.compile-reslut .tip-footer, .re-reslut .tip-footer {
position: absolute;
bottom: 0;
text-align: right; }