 Okay, so today I want to start implementing Blue Ocean in the plasma team and the first thing that I want to do, even though it's not a very big change, but I think it's important and it's also really easy to do, so I'm starting with the easy stuff, is if you zoom in into Blue Ocean and you style the top of the title bar, you can see that there is this white line all over the title bar, which looks nice, gives a bit of sense of depth, so let's try to implement that one. Again, really easy, so we shouldn't have any difficulty. So this is the file that we should be changing. Now, we need to add a line and to do that, let's actually remove the old ID for the header top, header top left and top right because we'll need to create the new elements and then regroup them into a new group, so let's take it off. One, two and three. Easy. And now let's actually draw the line. So for the top line, let's just use rectangle. It's red, of course, because why not? And this will be our top line. It shouldn't be red, but I'll keep it red for a second to actually check whether, by building plasma frameworks, I'm actually using the new SVG that I'm working on. Always make sure, like, do a tiny change to make sure that you're working on the new stuff and you're not accidentally using the old ones. So let's go to build frameworks, plasma framework, make install. And as you can see, there is no top red line, which means that it didn't work. So you see why it is important to check that you're actually using the correct SVG. So let's figure what's happening. Six and a half hours later. Let's go with arc dark a second and then go back to breeze to make sure changes are applied. Still nothing. That's weird. I tried it like one hour ago and it was working. But the line is there. What's going on? A few moments later. Of course it's not working because I said I was going to do something that I didn't actually do and that is to create the new heading top. So we need to actually get both and then again group. And now that we've grouped them, we can give them the idea using, where is it, object properties, header top like this. And now if we replace again plasma shell, finally we will see our line. Hopefully, please. Still nothing. I'm very unlucky. I didn't build it. I didn't build it. This kind of things always confuse me. That's why I always check whether I'm doing the right thing. Sorry about that. So make install like this and then we can replace. And this time for real, it will work. No way that it's still broken. And we've got our line. Beautiful. Now let's also make this line into this element, the top left and top right elements. So this time we need to use a path. So it should go like this. Oops, I got it wrong. Like this and I need one more node like this nicely. So this is where the line actually disappears to give the impression of 3D stuff going on. So let's copy it, flip it and put it in the other side of the plasma thing. And now let's group this element and also group this one like this. And now this one is going to be other top right. And this one is going to be other top left like this. Nice. So you can see that the red line is actually disappearing into the corner. It's not like amazingly beautiful, but it's enough for us. Also in other applets, since it's consistent, it takes effect pretty much everywhere. And now we can actually choose its actual color. I tweaked a bit before doing the video and it has to be white because that's the whole point. But we'll also make it a bit transparent so that on a dark theme it will be grayish instead of being just white, which would look horrible. So let's go with, I don't know, midway transparency for now and see how it looks. We can always change it later if necessary. So with later, I mean after the videos, when we are doing the merge request stuff. So it's barely visible. I cannot see it at all. So it's not enough. Let's go with, I don't know, 83. Right now I'm going with random values. Later on, I can see what is the exact value that's used for the window and how much I can reproduce it. How nice is this transparent. So now I can actually see the line. And it looks as expected, I would say. Maybe it's even a bit too much. So let's, I don't know, 75. Transparency. Yeah, looks good to me. So let's try to go with breeze dark now. Colors. Breeze dark. And it looks horrible. Easy to guess that it was going to happen. So 75 is true transparent. So let's, everything went dark theme. Nice. And let's go with, let's get back to 50 and see if it's too much. It will be hard to come up with a value that's nicely looking both for, you know, dark and light. But that's our job. It's still very light. Like actually, you can see that it's barely visible in the dark theme. So yes, too much. A bit too much. Let's go with 27, 24. Okay. And this one looks okay. I have an idea to make it work. So don't worry about that. My idea is let's do it like this. So it's probably transparent right now. Let's take this element. Let's start working with this one right now. Duplicate it. So now we've got two. So let's put it here. Make it underneath the other one. So right now we have this element and the two rectangles, which look the same right now. But what we can do is to add class and make it, I'm sorry, I need to check out the telegram PDG message regarding this. Color scheme view background. Like this. And then fill current color. And of course, we remove the style of this one. It becomes black. But basically what we're seeing is that instead of using a color that we give you, use the background color of the current theme. So that's going to be white for the light theme and dark for the dark theme. And basically, we put the this light thingy above it. And we can even make it a bit more big this time. So okay. So it's a bit still too light. I put a random value so we can get back to, I don't know, 20. It's fine. Because the problem is that if I just put the light transparent thingy, it will look almost invisible in the bridge light theme. But if I put the view color, which is white, and then the white thing already is going to be still white. And white is much more easy to see in the light theme because the header is actually grayish. So that's what I'm doing. So we can see that now it looks okay. Let's go for this and see how it looks in bridge light. And yeah, it looks like it's supposed to look. So you can see the difference is that in the corners, which we haven't still updated, it's invisible. Whereas on top you can actually see it. So this should be the right way forward. So let's also apply this change over the sides. So this one, we copy paste. So now we've got two right. It's difficult to work with invisible things, you know, it works. We've got the white line that disappears into the corner. So this one works. Let's do like this. Yes, I'm still not like another 100% sold on the appearance. But to change the appearance, I'll actually wait for the person that implemented the line in windows to pop up and then we can discuss it. But I had to make the line to make sure that it's consistent with everything. So for now, I'll stop here. So this was and that's it. Okay. So next up, I'll just cut the video so I can separate, but I'll do right now try to work on that part of the corners being a bit weird. So we'll see into the next episode tomorrow. Tomorrow for sure. Eventually.