Skip to content

Commit 30cc955

Browse files
pborissowpborissow
committed
Added communication-error css class
1 parent b2f2013 commit 30cc955

File tree

2 files changed

+217
-105
lines changed

2 files changed

+217
-105
lines changed

‎ui/themes/dark.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/******************************************************************************
2+
/** JavaXT Express - Dark Theme
3+
/******************************************************************************
4+
/**
5+
* This css is used to override colors and styles defined in default.css.
6+
* Include this css file after the include for the default.css.
7+
*
8+
******************************************************************************/
9+
10+
.communication-error{
11+
background-color: #2b1015;
12+
}
13+
14+
.communication-error .close:before {
15+
color: #ffdce2;
16+
}
17+
18+
.communication-error .close:hover {
19+
background-color: #5f3940;
20+
}
21+
22+
.communication-error-icon {
23+
color: #ffb4c1;
24+
}

‎ui/themes/default.css‎

Lines changed: 193 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,193 @@
1-
2-
/**************************************************************************/
3-
/** Waitmask
4-
/**************************************************************************/
5-
6-
.waitmask {
7-
position: absolute;
8-
width: 100%;
9-
height: 100%;
10-
background-color: #272a31;
11-
opacity: 0.8;
12-
z-index: 2;
13-
top: 0;
14-
left: 0;
15-
transition: opacity 0.4s;
16-
}
17-
18-
19-
/**************************************************************************/
20-
/** Material Spinner
21-
/**************************************************************************/
22-
23-
.spinner {
24-
position: relative;
25-
top: 50%;
26-
-webkit-transform: translateY(-50%);
27-
-ms-transform: translateY(-50%);
28-
transform: translateY(-50%);
29-
margin: 0 auto;
30-
}
31-
32-
.spinner svg {
33-
-webkit-animation: spinner-rotator 1.4s linear infinite;
34-
animation: spinner-rotator 1.4s linear infinite;
35-
36-
-webkit-transition: opacity 1.4s ease-out; /* Safari */
37-
transition: opacity 1.4s ease-out;
38-
39-
opacity: 0;
40-
}
41-
42-
.spinner circle {
43-
stroke: #4285F4;
44-
stroke-dasharray: 187;
45-
stroke-dashoffset: 0;
46-
-webkit-transform-origin: center;
47-
transform-origin: center;
48-
-webkit-animation: spinner-dash 1.4s ease-in-out infinite;
49-
animation: spinner-dash 1.4s ease-in-out infinite;
50-
}
51-
52-
@-webkit-keyframes spinner-rotator {
53-
0% {
54-
-webkit-transform: rotate(0deg);
55-
transform: rotate(0deg);
56-
}
57-
100% {
58-
-webkit-transform: rotate(270deg);
59-
transform: rotate(270deg);
60-
}
61-
}
62-
63-
@keyframes spinner-rotator {
64-
0% {
65-
-webkit-transform: rotate(0deg);
66-
transform: rotate(0deg);
67-
}
68-
100% {
69-
-webkit-transform: rotate(270deg);
70-
transform: rotate(270deg);
71-
}
72-
}
73-
74-
@-webkit-keyframes spinner-dash {
75-
0% {
76-
stroke-dashoffset: 187;
77-
}
78-
50% {
79-
stroke-dashoffset: 46.75;
80-
-webkit-transform: rotate(135deg);
81-
transform: rotate(135deg);
82-
}
83-
100% {
84-
stroke-dashoffset: 187;
85-
-webkit-transform: rotate(450deg);
86-
transform: rotate(450deg);
87-
}
88-
}
89-
@keyframes spinner-dash {
90-
0% {
91-
stroke-dashoffset: 187;
92-
}
93-
50% {
94-
stroke-dashoffset: 46.75;
95-
-webkit-transform: rotate(135deg);
96-
transform: rotate(135deg);
97-
}
98-
100% {
99-
stroke-dashoffset: 187;
100-
-webkit-transform: rotate(450deg);
101-
transform: rotate(450deg);
102-
}
103-
}
104-
105-
1+
2+
/**************************************************************************/
3+
/** Waitmask
4+
/**************************************************************************/
5+
6+
.waitmask {
7+
position: absolute;
8+
width: 100%;
9+
height: 100%;
10+
background-color: #272a31;
11+
opacity: 0.8;
12+
z-index: 2;
13+
top: 0;
14+
left: 0;
15+
transition: opacity 0.4s;
16+
}
17+
18+
19+
/**************************************************************************/
20+
/** Material Spinner
21+
/**************************************************************************/
22+
23+
.spinner {
24+
position: relative;
25+
top: 50%;
26+
-webkit-transform: translateY(-50%);
27+
-ms-transform: translateY(-50%);
28+
transform: translateY(-50%);
29+
margin: 0 auto;
30+
}
31+
32+
.spinner svg {
33+
-webkit-animation: spinner-rotator 1.4s linear infinite;
34+
animation: spinner-rotator 1.4s linear infinite;
35+
36+
-webkit-transition: opacity 1.4s ease-out; /* Safari */
37+
transition: opacity 1.4s ease-out;
38+
39+
opacity: 0;
40+
}
41+
42+
.spinner circle {
43+
stroke: #4285F4;
44+
stroke-dasharray: 187;
45+
stroke-dashoffset: 0;
46+
-webkit-transform-origin: center;
47+
transform-origin: center;
48+
-webkit-animation: spinner-dash 1.4s ease-in-out infinite;
49+
animation: spinner-dash 1.4s ease-in-out infinite;
50+
}
51+
52+
@-webkit-keyframes spinner-rotator {
53+
0% {
54+
-webkit-transform: rotate(0deg);
55+
transform: rotate(0deg);
56+
}
57+
100% {
58+
-webkit-transform: rotate(270deg);
59+
transform: rotate(270deg);
60+
}
61+
}
62+
63+
@keyframes spinner-rotator {
64+
0% {
65+
-webkit-transform: rotate(0deg);
66+
transform: rotate(0deg);
67+
}
68+
100% {
69+
-webkit-transform: rotate(270deg);
70+
transform: rotate(270deg);
71+
}
72+
}
73+
74+
@-webkit-keyframes spinner-dash {
75+
0% {
76+
stroke-dashoffset: 187;
77+
}
78+
50% {
79+
stroke-dashoffset: 46.75;
80+
-webkit-transform: rotate(135deg);
81+
transform: rotate(135deg);
82+
}
83+
100% {
84+
stroke-dashoffset: 187;
85+
-webkit-transform: rotate(450deg);
86+
transform: rotate(450deg);
87+
}
88+
}
89+
@keyframes spinner-dash {
90+
0% {
91+
stroke-dashoffset: 187;
92+
}
93+
50% {
94+
stroke-dashoffset: 46.75;
95+
-webkit-transform: rotate(135deg);
96+
transform: rotate(135deg);
97+
}
98+
100% {
99+
stroke-dashoffset: 187;
100+
-webkit-transform: rotate(450deg);
101+
transform: rotate(450deg);
102+
}
103+
}
104+
105+
106+
/**************************************************************************/
107+
/** Communications Error Popup
108+
/**************************************************************************/
109+
/** Popup that appears on the top of the page used to notify users that an
110+
* app is offline.
111+
*/
112+
.communication-error {
113+
position: relative;
114+
width: 525px;
115+
min-height: 64px;
116+
background-color: #ffeef1;
117+
padding: 10px;
118+
border-radius: 5px;
119+
box-shadow: 0 12px 14px 0 rgba(0, 0, 0, 0.2), 0 13px 20px 0 rgba(0, 0, 0, 0.2);
120+
}
121+
122+
.communication-error-icon,
123+
.communication-error .title {
124+
height: 24px;
125+
font-size: 20px;
126+
display: inline-block;
127+
float:left;
128+
}
129+
130+
.communication-error .title {
131+
margin: 0 0 0 10px;
132+
}
133+
134+
.communication-error .message {
135+
font-size: 11px;
136+
display: inline-block;
137+
color: #686868;
138+
margin: 8px 0 0 0;
139+
}
140+
141+
.communication-error .close {
142+
position: absolute;
143+
text-align: center;
144+
border-radius: 3px;
145+
right: 7px;
146+
top: 7px;
147+
width: 20px;
148+
height: 20px;
149+
cursor: pointer;
150+
}
151+
152+
.communication-error .close:hover {
153+
background-color: #ebc3ca;
154+
}
155+
156+
.communication-error .close:before {
157+
content: "\2715"; /*unicode for ✕*/
158+
color: #9d172e;
159+
}
160+
161+
162+
163+
/**************************************************************************/
164+
/** Communications Error Icon
165+
/**************************************************************************/
166+
167+
.communication-error-icon {
168+
width: 30px;
169+
height: 24px;
170+
font-size: 20px;
171+
display: inline-block;
172+
position: relative;
173+
color: #9d172e;
174+
}
175+
176+
.communication-error-icon:before,
177+
.communication-error-icon:after {
178+
font-family: "Font Awesome 5 Free";
179+
font-weight: 900;
180+
position: absolute;
181+
182+
}
183+
184+
.communication-error-icon:after{
185+
content: "\f12a"; /* exclaimation */
186+
left: 11px;
187+
}
188+
189+
.communication-error-icon:before{
190+
content: "\f1eb"; /* wifi */
191+
opacity: 0.2;
192+
font-size: 24px;
193+
}

0 commit comments

Comments
 (0)