Skip to content

Commit c6388f8

Browse files
khushi-purwarkhushi-purwar
committed
beautify css file
1 parent 3263313 commit c6388f8

File tree

1 file changed

+158
-157
lines changed

1 file changed

+158
-157
lines changed

‎White-Board/style.css

Lines changed: 158 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -1,165 +1,166 @@
11
* {
2-
box-sizing: border-box;
3-
margin: 0px;
4-
padding: 0px;
5-
}
6-
7-
body {
8-
overflow: hidden;
9-
}
10-
11-
.tools-container {
12-
height: 100px;
13-
display: flex;
14-
justify-content: center;
15-
align-items: center;
16-
}
17-
18-
.tools-content {
19-
height: 70%;
20-
width: 70%;
21-
display: flex;
22-
justify-content: space-evenly;
23-
align-items: center;
24-
background: rgba(255, 154, 255, 0.652);
25-
border-radius: 10px;
26-
transform: translateY(5px);
27-
box-shadow: 0 5px 10px #191d1db3;
28-
}
29-
30-
.tool {
31-
height: 55%;
32-
width: 10%;
33-
position: relative;
34-
}
35-
36-
.tool img {
37-
height: 100%;
38-
width: 100%;
39-
}
40-
41-
/* .drawing-container {
2+
box-sizing: border-box;
3+
margin: 0px;
4+
padding: 0px;
5+
}
6+
7+
body {
8+
overflow: hidden;
9+
}
10+
11+
.tools-container {
12+
height: 100px;
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
}
17+
18+
.tools-content {
19+
height: 70%;
20+
width: 70%;
21+
display: flex;
22+
justify-content: space-evenly;
23+
align-items: center;
24+
background: rgba(255, 154, 255, 0.652);
25+
border-radius: 10px;
26+
transform: translateY(5px);
27+
box-shadow: 0 5px 10px #191d1db3;
28+
}
29+
30+
.tool {
31+
height: 55%;
32+
width: 10%;
33+
position: relative;
34+
}
35+
36+
.tool img {
37+
height: 100%;
38+
width: 100%;
39+
}
40+
41+
/* .drawing-container {
4242
} */
43-
44-
/* #canvas {
43+
44+
/* #canvas {
4545
background-color: aqua;
4646
} */
47-
48-
.sticky {
49-
position: absolute;
50-
top: 200px;
51-
left: 300px;
52-
height: 200px;
53-
width: 250px;
54-
/* background: bisque; */
55-
}
56-
57-
.sticky-header {
58-
height: 13%;
59-
background: lightcyan;
60-
display: flex;
61-
justify-content: flex-end;
62-
align-items: center;
63-
}
64-
65-
.sticky-header div {
66-
height: 70%;
67-
width: 7%;
68-
margin-right: 10px;
69-
border-radius: 50px;
70-
}
71-
72-
.minimize {
73-
background: lightskyblue;
74-
}
75-
76-
.close {
77-
background: lightcoral;
78-
}
79-
80-
.sticky-content {
81-
height: 87%;
82-
border-bottom-right-radius: 20px;
83-
background: lightsteelblue;
84-
outline: none;
85-
padding: 10px;
86-
}
87-
88-
.sticky-image-div {
89-
height: 87%;
90-
}
91-
92-
.sticky-image {
93-
height: 100%;
94-
width: 100%;
95-
object-fit: cover;
96-
}
97-
98-
/* .active-tool {
47+
48+
.sticky {
49+
position: absolute;
50+
top: 200px;
51+
left: 300px;
52+
height: 200px;
53+
width: 250px;
54+
/* background: bisque; */
55+
}
56+
57+
.sticky-header {
58+
height: 13%;
59+
background: lightcyan;
60+
display: flex;
61+
justify-content: flex-end;
62+
align-items: center;
63+
}
64+
65+
.sticky-header div {
66+
height: 70%;
67+
width: 7%;
68+
margin-right: 10px;
69+
border-radius: 50px;
70+
}
71+
72+
.minimize {
73+
background: lightskyblue;
74+
}
75+
76+
.close {
77+
background: lightcoral;
78+
}
79+
80+
.sticky-content {
81+
height: 87%;
82+
border-bottom-right-radius: 20px;
83+
background: lightsteelblue;
84+
outline: none;
85+
padding: 10px;
86+
}
87+
88+
.sticky-image-div {
89+
height: 87%;
90+
}
91+
92+
.sticky-image {
93+
height: 100%;
94+
width: 100%;
95+
object-fit: cover;
96+
}
97+
98+
/* .active-tool {
9999
transform: scale(1.2);
100100
} */
101-
102-
.fade {
103-
opacity: 0.5;
104-
}
105-
106-
.tool-options {
107-
height: 100px;
108-
width: 100px;
109-
position: absolute;
110-
/* background: aquamarine; */
111-
top: 60px;
112-
display: flex;
113-
border-radius: 10px;
114-
flex-direction: column;
115-
justify-content: space-evenly;
116-
padding: 2px;
117-
background: aliceblue;
118-
}
119-
120-
.hide {
121-
display: none;
122-
}
123-
124-
/* .pen-size {
101+
102+
.fade {
103+
opacity: 0.5;
104+
}
105+
106+
.tool-options {
107+
height: 100px;
108+
width: 100px;
109+
position: absolute;
110+
/* background: aquamarine; */
111+
top: 60px;
112+
display: flex;
113+
border-radius: 10px;
114+
flex-direction: column;
115+
justify-content: space-evenly;
116+
padding: 2px;
117+
background: aliceblue;
118+
}
119+
120+
.hide {
121+
display: none;
122+
}
123+
124+
/* .pen-size {
125125
}
126126
*/
127-
.pen-size input {
128-
width: 100%;
129-
}
130-
131-
.eraser-size input {
132-
width: 100%;
133-
}
134-
135-
.pen-colors {
136-
display: flex;
137-
justify-content: space-evenly;
138-
width: 100%;
139-
}
140-
141-
.pen-colors div {
142-
height: 15px;
143-
width: 14px;
144-
border-radius: 50px;
145-
}
146-
147-
.black {
148-
background: black;
149-
}
150-
151-
.yellow {
152-
background: yellow;
153-
}
154-
155-
.blue {
156-
background: blue;
157-
}
158-
159-
.green {
160-
background: green;
161-
}
162-
163-
.red {
164-
background: red;
165-
}
127+
.pen-size input {
128+
width: 100%;
129+
}
130+
131+
.eraser-size input {
132+
width: 100%;
133+
}
134+
135+
.pen-colors {
136+
display: flex;
137+
justify-content: space-evenly;
138+
width: 100%;
139+
}
140+
141+
.pen-colors div {
142+
height: 15px;
143+
width: 14px;
144+
border-radius: 50px;
145+
}
146+
147+
.black {
148+
background: black;
149+
}
150+
151+
.yellow {
152+
background: yellow;
153+
}
154+
155+
.blue {
156+
background: blue;
157+
}
158+
159+
.green {
160+
background: green;
161+
}
162+
163+
.red {
164+
background: red;
165+
}
166+

0 commit comments

Comments
 (0)