Skip to content

Commit 08e5698

Browse files
i4004i4004
committed
Simplify.Web example app new dark style
1 parent a8dfea8 commit 08e5698

File tree

7 files changed

+110
-52
lines changed

7 files changed

+110
-52
lines changed

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,3 +126,8 @@ node_modules/
126126
# Coverage files ignore
127127
*lcov.info
128128
lcov*.info
129+
130+
## CSS exclude except main css file
131+
src/SampleApps/SampleApp.Classic/Styles/**/*.css
132+
!src/SampleApps/SampleApp.Classic/Styles/Main.min.css
133+

‎src/SampleApps/SampleApp.Classic/Styles/Forms.scss‎

Lines changed: 59 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,82 @@
1-
@import 'Variables';
1+
@import "Variables";
22

3-
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input
4-
{
5-
border-color: #bcbcbc;
3+
textarea,
4+
input[type="text"],
5+
input[type="password"],
6+
input[type="datetime"],
7+
input[type="datetime-local"],
8+
input[type="date"],
9+
input[type="month"],
10+
input[type="time"],
11+
input[type="week"],
12+
input[type="number"],
13+
input[type="email"],
14+
input[type="url"],
15+
input[type="search"],
16+
input[type="tel"],
17+
input[type="color"],
18+
.uneditable-input {
19+
color: $primary-text-color;
20+
background-color: $secondary-color;
21+
border: $primary-border;
622
border-radius: 0;
723
}
824

9-
input[placeholder], input[placeholder][type="password"]
10-
{
11-
color: $primary-color !important;
25+
input[placeholder],
26+
input[placeholder][type="password"] {
27+
color: $primary-text-color;
1228
}
1329

14-
textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus
15-
{
16-
border-color: $primary-color;
30+
textarea:focus,
31+
input[type="text"]:focus,
32+
input[type="password"]:focus,
33+
input[type="datetime"]:focus,
34+
input[type="datetime-local"]:focus,
35+
input[type="date"]:focus,
36+
input[type="month"]:focus,
37+
input[type="time"]:focus,
38+
input[type="week"]:focus,
39+
input[type="number"]:focus,
40+
input[type="email"]:focus,
41+
input[type="url"]:focus,
42+
input[type="search"]:focus,
43+
input[type="tel"]:focus,
44+
input[type="color"]:focus,
45+
.uneditable-input:focus {
46+
background-color: $secondary-color;
47+
color: $primary-color-opposite;
48+
border: $primary-active-border;
1749
box-shadow: $no-box-shadow;
1850
}
1951

20-
.btn
21-
{
22-
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
52+
.btn {
53+
background: $primary-color;
54+
color: $primary-color-opposite;
2355
border-color: $button-border;
56+
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
2457
}
2558

26-
.btn:hover
27-
{
59+
.btn:hover {
60+
background-color: $primary-color-active;
2861
border-color: $button-border;
2962
transition: background-position 0.2s linear 0s;
30-
color: $primary-color-text-hover;
63+
color: $primary-color-opposite;
64+
}
65+
66+
.btn:active,
67+
.btn:focus {
68+
background-color: $primary-color-active !important;
69+
border-color: $button-border !important;
70+
color: $primary-color-opposite !important;
3171
}
3272

3373
// Checkbox vertical align fix
34-
input[type="checkbox"]
35-
{
74+
input[type="checkbox"] {
3675
vertical-align: middle;
3776
position: relative;
3877
bottom: 4px;
3978
}
4079

41-
label
42-
{
80+
label {
4381
font-weight: normal !important;
44-
}
82+
}

‎src/SampleApps/SampleApp.Classic/Styles/Header.scss‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
div.Title
2-
{
3-
padding: 0.5em;
4-
background-color: #e5e5e5;
5-
font-size: 2em;
1+
div.Title {
2+
padding: 0.5em;
3+
background-color: #363636;
4+
font-size: 2em;
65
}
76

8-
img.Logo
9-
{
10-
vertical-align: middle;
11-
width: 2.5em;
12-
margin-right: 0.8em;
13-
}
7+
img.Logo {
8+
vertical-align: middle;
9+
width: 2.5em;
10+
margin-right: 0.8em;
11+
}

‎src/SampleApps/SampleApp.Classic/Styles/Main.min.css‎

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/SampleApps/SampleApp.Classic/Styles/Main.scss‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,33 @@
1-
@import 'Header';
2-
@import 'Navbar';
3-
@import 'Forms';
4-
@import 'MessageBox';
1+
@import "Header";
2+
@import "Navbar";
3+
@import "Forms";
4+
@import "Panels";
5+
@import "MessageBox";
56

6-
body
7-
{
7+
body {
88
background: $back-color !important;
9-
color: #505050 !important;
10-
font: 1.6em 'Segoe UI', tahoma, arial, helvetica, sans-serif !important;
9+
color: $primary-text-color !important;
10+
font: 1.6em "Segoe UI", tahoma, arial, helvetica, sans-serif !important;
1111
margin: 1em !important;
1212
padding: 0 !important;
1313
}
1414

15-
.ExecutionTimeFooter
16-
{
15+
.ExecutionTimeFooter {
1716
border-top: $primary-border;
1817
text-align: center;
1918
margin-top: 1em;
2019
padding-top: 0.3em;
2120
}
2221

23-
div.Http404MessageBox
24-
{
22+
div.Http404MessageBox {
2523
color: $primary-color-colorized-text;
2624
padding: 4em 2em 4em 2em;
27-
}
25+
}
26+
27+
a {
28+
color: $primary-color;
29+
}
30+
31+
a:hover {
32+
color: $primary-color-active;
33+
}

‎src/SampleApps/SampleApp.Classic/Styles/Panels.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@import "Variables";
2+
3+
.list-group-item {
4+
background-color: $secondary-color;
5+
border: $primary-border;
6+
}

‎src/SampleApps/SampleApp.Classic/Styles/Variables.scss‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
1-
$back-color: #efefef;
1+
$back-color: #171717;
22
$back-color-error: #eee4e4;
33

4-
$primary-color: #4a73bc;
5-
$primary-color-active: #4368ac;
4+
$primary-color: #dc5f33;
5+
$primary-color-active: #c5562e;
66
$primary-color-opposite: white;
77

8-
$primary-color-text-hover: #3464bc;
8+
$primary-text-color: #dad8d8;
9+
$primary-color-text-hover: #c5562e;
910

1011
$primary-color-colorized-text: #0d85c9;
1112

12-
$primary-border: 1px solid #bcbcbc;
13+
$primary-border: 1px solid #3a3a3a;
14+
$primary-active-border: 1px solid #636363;
15+
16+
$secondary-color: #292929;
1317

1418
$no-box-shadow: 0 0;
15-
$button-border: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #9d9d9d;
19+
$button-border: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #3a3a3a;

0 commit comments

Comments
 (0)