Help with change CSS for UniPageControl

[artem_niko]

Good afternoon!
I can not figure out how to remove (or make white) the top line in the UniPageControl, which is under the tabs themselves. How I made the hat - I'm completely satisfied, I figured it out. But, I can’t remove this long line:

Here are my CSS codes.
It's in the very CSS of the theme I'm using, which I bought from @GerhardV (this part of the code is responsible for the appearance of not only the UniPageControl, but also the UniPanel):

/* PageControl,Panel,Grid... Border colors */
.x-tab-bar {
    z-index: 1;
	 border-color: #ffffff!important;
    border-width: 0px!important;
    border-style: none!important;
}

.x-grid-body {
    border-width: 1px 1px 1px 1px;
	 border-color: #CCCCCC;
}
.x-column-header {
    border-right: 1px solid #d1d1d1;
    color: ##333333;
    background-color: #F5F5F5;
}

.x-panel-header.x-accordion-hd {
	 border-radius: 100px; /*4px*/
}

.x-panel-header-default.x-panel-header-top {
    border-width: 1px 1px 1px 1px !important;
    border-style: none!important;
    border-color: #ffffff!important; /*цвет рамки в шапке панели*/
    border-bottom-color: #ffffff!mportant;
    border-bottom-style: hidden!mportant;
	 border-top-left-radius: 4px!important;
    border-top-right-radius: 4px!important;
	 border-bottom-left-radius: 4px!important;
    border-bottom-right-radius: 4px!important;
    background-color: #ffffff; /*цвет верха панели*/
}
.x-panel-header-default.x-panel-header-bottom {
    border-width: 1px 1px 1px 1px !important;
    border-style: solid;
    border-color: #CCCCCC;
	 border-bottom-left-radius: 40px;
    border-bottom-right-radius: 4px;
}
.x-panel-header-default.x-panel-header-left {
    border-width: 1px 1px 1px 1px !important;
    border-style: solid;
    border-color: #CCCCCC;
	 border-top-left-radius: 4px;
	 border-bottom-left-radius: 4px;
}
.x-panel-header-default.x-panel-header-right {
    border-width: 1px 1px 1px 1px !important;
    border-style: solid;
    border-color: #CCCCCC!important;
	 border-top-right-radius: 4px;
	 border-bottom-right-radius: 4px;
}

.x-panel-default-outer-border-trl {
    border-top-color: #CCCCCC !important; /*цвет верхней линии в UniDBGrid*/
    border-top-width: 1px !important;
    border-right-color: #CCCCCC !important;
    border-right-width: 1px !important;
    border-left-color: #CCCCCC !important;
    border-left-width: 1px !important;
	 border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.x-panel-default-outer-border-rbl {
    border-right-color: #CCCCCC !important;
    border-right-width: 1px !important;
    border-bottom-color: #CCCCCC !important;
    border-bottom-width: 1px !important;
    border-left-color: #CCCCCC !important;
    border-left-width: 1px !important;
	 border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.x-panel-default-outer-border-trbl {
    border-color: #CCCCCC !important;
    border-width: 1px !important;
    border-radius: 4px;
}
.x-panel-default-outer-border-rl {
    border-right-color: #CCCCCC !important;
    border-right-width: 1px !important;
    border-left-color: #CCCCCC !important;
    border-left-width: 1px !important;
}
.x-panel-default-outer-border-tbl {
    border-top-color: #CCCCCC !important;
    border-top-width: 1px !important;
    border-bottom-color: #CCCCCC !important;
    border-bottom-width: 1px !important;
    border-left-color: #CCCCCC !important;
    border-left-width: 1px !important;
	 border-top-left-radius: 4px;
	 border-bottom-left-radius: 4px;
}
.x-panel-default-outer-border-trb {
    border-top-color: #CCCCCC !important;
    border-top-width: 1px !important;
    border-right-color: #CCCCCC !important;
    border-right-width: 1px !important;
    border-bottom-color: #CCCCCC !important;
    border-bottom-width: 1px !important;
  	 border-top-right-radius: 4px;
	 border-bottom-right-radius: 4px;
}

For UniPageControl -> ClientEvents -> UniEvents I was write:

function tabPanel.beforeInit(sender, config)
{
  sender.border = false
}

Also, for UniPageControl -> ClientEvents -> ExtEvents I was write:

function added(sender, container, pos, eOpts)
{
  sender.addBodyCls('myNoBorderCSS');
}

And this is myNoBorderCSS:

.myNoBorderCSS .x-panel-body-default
	{
    background: #ffffff!important; /*цвет UniTabSheet*/
    border-color: #ffffff!important;
    color: #ffffff!important;
    border-width: 0px!important;
    border-style: none!important;
    border-top-color: #ffffff!important;
	}

And UniPageControl -> LayoutConfig -> BodyCls =_tab-bar _tab-active _tab

 

Please, help remove long line in UniPageControl, under tabs...

[Sherzod]

Hello, 

Please make a simple testcase with your changes.

[artem_niko]

1 minute ago, Sherzod said:

Hello, 

Please make a simple testcase with your changes.

I took a problematic piece from my personal project and I just don’t understand why a test example is needed if I provided both a screenshot and a CSS code through which it is configured. I'm just a little confused and I can't figure out whether I should add some code, or remove the excess, or something conflicts with something. With it also I ask to help to understand, looking at the code above.

 

[Sherzod]

48 minutes ago, artem_niko said:

I just don’t understand why a test example is needed if I provided both a screenshot and a CSS code through which it is configured.

This will speed up the process.