Skip to content

Commit 097196c

Browse files
guFalconguFalcon
committed
split css files
update flipswitch design
1 parent 3c61dd2 commit 097196c

14 files changed

+589
-576
lines changed

‎Dockerfile

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ COPY md/ /app/md
1818
COPY assets/ /app/assets
1919
# Copy the middlewares folder to app directory.
2020
COPY middlewares/ /app/middlewares
21+
# Copy the css folder to app directory.
22+
COPY css/ /app/css
2123

2224
# Copy package.json app directory.
2325
COPY package.json /app

‎css/body.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: Inter;
5+
text-rendering: optimizeLegibility;
6+
font-size: 16px;
7+
}
8+
9+
#wrapper {
10+
display: flex;
11+
flex-direction: row;
12+
padding-top: 50px;
13+
}

‎css/buttons.css

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
.sl-button {
2+
appearance: none;
3+
background-color: #FAFBFC;
4+
border: 1px solid rgba(27, 31, 35, 0.15);
5+
border-radius: 6px;
6+
box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
7+
box-sizing: border-box;
8+
color: #24292E;
9+
cursor: pointer;
10+
display: inline-block;
11+
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
12+
font-size: 14px;
13+
font-weight: 500;
14+
line-height: 20px;
15+
list-style: none;
16+
padding: 6px;
17+
position: relative;
18+
transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
19+
user-select: none;
20+
-webkit-user-select: none;
21+
touch-action: manipulation;
22+
vertical-align: middle;
23+
white-space: nowrap;
24+
word-wrap: break-word;
25+
}
26+
27+
.sl-button:hover {
28+
background-color: #F3F4F6;
29+
text-decoration: none;
30+
transition-duration: 0.1s;
31+
}
32+
33+
.sl-button:disabled {
34+
background-color: #FAFBFC;
35+
border-color: rgba(27, 31, 35, 0.15);
36+
color: #959DA5;
37+
cursor: default;
38+
}
39+
40+
.sl-button:active {
41+
background-color: #EDEFF2;
42+
box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
43+
transition: none 0s;
44+
}
45+
46+
.sl-button:focus {
47+
outline: 1px transparent;
48+
}
49+
50+
.sl-button:before {
51+
display: none;
52+
}
53+
54+
.sl-button:-webkit-details-marker {
55+
display: none;
56+
}
57+
58+
.sl-button-accent {
59+
appearance: none;
60+
background-color: #e7f0f9;
61+
border: 1px solid rgba(27, 31, 35, 0.15);
62+
border-radius: 6px;
63+
box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
64+
box-sizing: border-box;
65+
color: #24292E;
66+
cursor: pointer;
67+
display: inline-block;
68+
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
69+
font-size: 14px;
70+
font-weight: 500;
71+
line-height: 20px;
72+
list-style: none;
73+
padding: 6px;
74+
position: relative;
75+
transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
76+
user-select: none;
77+
-webkit-user-select: none;
78+
touch-action: manipulation;
79+
vertical-align: middle;
80+
white-space: nowrap;
81+
word-wrap: break-word;
82+
}
83+
84+
.sl-button-accent:hover {
85+
background-color: #e0e6f3;
86+
text-decoration: none;
87+
transition-duration: 0.1s;
88+
}
89+
90+
.sl-button-accent:disabled {
91+
background-color: #e6f0f9;
92+
border-color: rgba(27, 31, 35, 0.15);
93+
color: #959DA5;
94+
cursor: default;
95+
}
96+
97+
.sl-button-accent:active {
98+
background-color: #d6dfeb;
99+
box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
100+
transition: none 0s;
101+
}
102+
103+
.sl-button-accent:focus {
104+
outline: 1px transparent;
105+
}
106+
107+
.sl-button-accent:before {
108+
display: none;
109+
}
110+
111+
.sl-button-accent:-webkit-details-marker {
112+
display: none;
113+
}
114+
115+
.button-group-right {
116+
height: 32px;
117+
margin: 0px;
118+
padding-top: 6px;
119+
margin-left: -4px;
120+
border-top-left-radius: 0px;
121+
border-bottom-left-radius: 0px;
122+
}
123+
124+
.button-group-middle {
125+
height: 32px;
126+
margin: 0px;
127+
padding-top: 6px;
128+
margin-right: -4px;
129+
margin-left: -4px;
130+
border-top-right-radius: 0px;
131+
border-bottom-right-radius: 0px;
132+
border-top-left-radius: 0px;
133+
border-bottom-left-radius: 0px;
134+
}
135+
136+
.button-group-left {
137+
height: 32px;
138+
margin: 0px;
139+
padding-top: 6px;
140+
margin-right: -4px;
141+
border-top-right-radius: 0px;
142+
border-bottom-right-radius: 0px;
143+
}

‎css/callouts.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.obsidian-callout {
2+
line-height: 20.8px;
3+
padding: 12px;
4+
padding-left: 25px;
5+
padding-right: 25px;
6+
border-radius: 5px;
7+
margin-top: 10px;
8+
margin-bottom: 10px;
9+
}
10+
11+
.obsidian-callout-icon {
12+
width: 18px;
13+
height: 18px;
14+
line-height: 20.8px;
15+
margin-right: 2px;
16+
}
17+
18+
.obsidian-callout-title {
19+
line-height: 20.8px;
20+
position: relative;
21+
top: -2px;
22+
font-size: 16px;
23+
font-weight: 600;
24+
display: inline-block;
25+
}
26+
27+
.obsidian-callout-content {
28+
vertical-align: middle;
29+
padding-top: 0px;
30+
}
31+
32+
.collapsable {
33+
vertical-align: middle;
34+
opacity: 0;
35+
padding-top: 0px;
36+
max-height: 0;
37+
overflow: hidden;
38+
transition: padding 0.3s ease, max-height 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
39+
}

‎css/fixes.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.highlight {
2+
background-color: #dfeffc;
3+
}
4+
5+
.dark-mode{
6+
background-color: #1c1c1c !important;
7+
color: #ffffff;
8+
}
9+
.dark-mode.width-reveal, .dark-mode.width-reveal .sidebar-menu a.dark-mode {
10+
background-color: #2d2d2df0 !important;
11+
}
12+
a.dark-mode.highlight {
13+
background-color: #004b88 !important;
14+
}
15+
16+
/* Fix autoscroller. */
17+
#markdown-content::before {
18+
content: "";
19+
display: block;
20+
height: 50px;
21+
/* Equivalent to your header's height */
22+
margin-top: -50px;
23+
/* Negative equivalent to your header's height */
24+
visibility: hidden;
25+
}
26+
27+
.topdown-menu-chevron {
28+
opacity: 1;
29+
transition: opacity 0.3s ease-in-out, transform 0.3s ease;
30+
}

‎css/flipswitch.css

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
.flipswitch {
2+
position: relative;
3+
width: 80px;
4+
}
5+
6+
.flipswitch input[type=checkbox] {
7+
display: none;
8+
}
9+
10+
.flipswitch-label {
11+
display: block;
12+
overflow: hidden;
13+
cursor: pointer;
14+
border: 1px solid #999999;
15+
border-radius: 8px;
16+
}
17+
18+
.flipswitch-inner {
19+
width: 200%;
20+
margin-left: -100%;
21+
transition: margin 0.3s ease-in 0s;
22+
}
23+
24+
.flipswitch-inner:before, .flipswitch-inner:after {
25+
float: left;
26+
width: 50%;
27+
height: 20px;
28+
padding: 0;
29+
line-height: 12px;
30+
font-size: 14px;
31+
color: #fffffff0;
32+
font-family: Consolas, monospace;
33+
font-weight: bold;
34+
box-sizing: border-box;
35+
}
36+
37+
.flipswitch-inner:before {
38+
content: "student";
39+
padding-left: 8px;
40+
padding-right: 20px;
41+
padding-top: 3px;
42+
background-color: #256799f0;
43+
color: #FFFFFF;
44+
}
45+
46+
.flipswitch-inner:after {
47+
content: "teacher";
48+
padding-right: 8px;
49+
padding-top: 3px;
50+
background-color: #ff5050f0;
51+
color: #ffffff;
52+
text-align: right;
53+
}
54+
55+
.flipswitch-switch {
56+
width: 15px;
57+
margin: -3.5px;
58+
background: #FAFBFCf0;
59+
border: 1px solid #999999f0;
60+
border-radius: 8px;
61+
position: absolute;
62+
top: 0;
63+
bottom: 0;
64+
right: 75px;
65+
transition: all 0.3s ease-in 0s;
66+
}
67+
68+
.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
69+
margin-left: 0;
70+
}
71+
72+
.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
73+
right: 0;
74+
}
75+
76+
.menu.flipswitch {
77+
width: 180px;
78+
}
79+
.menu.flipswitch-inner:before {
80+
background-color: #256799;
81+
}
82+
.menu.flipswitch-inner:after {
83+
background-color: #9d4444;
84+
}
85+
.menu.flipswitch-switch {
86+
right: 170px;
87+
}
88+
.answers.flipswitch-inner:before {
89+
content: "no answers";
90+
}
91+
.answers.flipswitch-inner:after {
92+
content: "answers";
93+
}
94+
.exam.flipswitch-inner:before {
95+
content: "show practice";
96+
}
97+
.exam.flipswitch-inner:after {
98+
content: "show exam";
99+
}

‎css/main.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@import "body.css";
2+
@import "topbar.css";
3+
@import "sidebar.css";
4+
@import "markdown.css";
5+
@import "callouts.css";
6+
@import "movement.css";
7+
@import "flipswitch.css";
8+
@import "buttons.css";
9+
@import "fixes.css";
10+
@import "media.css";

0 commit comments

Comments
 (0)