1
00:00:02,630 --> 00:00:04,580
So now that we talk a lot about styling,

2
00:00:04,760 --> 00:00:13,070
let me make the styling we have in place here a bit more pretty now. Now for that I'll first of all go into

3
00:00:13,070 --> 00:00:19,430
my light DOM, add a star selector and set the global box sizing for all my elements

4
00:00:19,430 --> 00:00:22,910
to border box and now I'm just really working on the visuals,

5
00:00:22,910 --> 00:00:29,680
this is nothing else. I'll set a font family of sans-serif so that all my fonts have this sans-serif look,

6
00:00:30,280 --> 00:00:32,760
looks a bit nicer already in my opinion,

7
00:00:33,130 --> 00:00:40,390
I will also in my light DOM get rid of this ugly blue border around my tooltip, it was just there for

8
00:00:40,390 --> 00:00:41,960
demonstration purposes,

9
00:00:41,960 --> 00:00:45,730
also get rid of the highlight class which we are not setting anything.

10
00:00:45,730 --> 00:00:52,310
Let me also get rid of that div with the orange border and get rid of that orange border style up there,

11
00:00:52,390 --> 00:00:54,250
I really just want to make this a bit more pretty

12
00:00:54,250 --> 00:00:57,460
before we continue, now this looks much better already

13
00:00:59,070 --> 00:01:05,600
and now let me dive into my web component styles and there for example, for this overlay when I hover

14
00:01:05,600 --> 00:01:09,740
over this, I want to add some padding here and make this look a bit nicer,

15
00:01:09,740 --> 00:01:16,700
maybe a little drop shadow. So for this hovering content which of course is this div here and we could

16
00:01:16,700 --> 00:01:20,900
of course also use a CSS class or ID here if we wanted to, there

17
00:01:20,900 --> 00:01:30,980
I'll give it as a padding of 0.15rem, border radius maybe of three pixels and a box shadow of 1

18
00:01:30,980 --> 00:01:39,330
pixel 1 pixel 6 pixels and then this styling which is transparent gray-ish look and

19
00:01:40,900 --> 00:01:45,890
if I now reload and I hover over this, box shadow is missing,

20
00:01:46,420 --> 00:01:51,130
yes because I forgot my colon here so let's fix this,

21
00:01:51,160 --> 00:01:53,390
yes and this looks much nicer.

22
00:01:53,440 --> 00:01:58,450
Let me also tweak the positioning, it has position absolute but I want to move it down a little bit by

23
00:01:58,450 --> 00:01:59,450
setting top to

24
00:01:59,450 --> 00:02:08,290
let's say 1rem and left also to 0.75rem maybe, let's see how that looks like,

25
00:02:12,160 --> 00:02:13,730
let's move it down by 2rem,

26
00:02:17,270 --> 00:02:17,750
yes

27
00:02:18,080 --> 00:02:19,220
maybe 1.5,

28
00:02:23,110 --> 00:02:23,610
right.

29
00:02:23,620 --> 00:02:31,150
I like this way more, looks better in my opinion. Now I also don't want this text in there to be bold just

30
00:02:31,150 --> 00:02:38,440
because the overall component text is bold because of host context, so I will give my div here a

31
00:02:38,440 --> 00:02:49,210
font weight of normal, so I don't use that bold font weight I set for my other text, so now I don't have

32
00:02:49,210 --> 00:02:52,120
that bold styling in there anymore.

33
00:02:52,270 --> 00:02:56,490
And now last but not least, there's one other thing, when I set this background color

34
00:02:56,500 --> 00:03:02,790
if I have the important tag, then I also want to add a little bit of padding around my component let's

35
00:03:02,800 --> 00:03:06,870
say so that the color does not sit directly on the edges

36
00:03:06,970 --> 00:03:08,370
and now this looks okay.

37
00:03:08,380 --> 00:03:10,350
This is how I want it to be,

38
00:03:10,360 --> 00:03:12,400
this is a style I can live with.

39
00:03:12,400 --> 00:03:18,820
Now with that, let's move on and let's see which other cool functionalities we can add to our custom web

40
00:03:18,820 --> 00:03:19,390
components.