Not visible which prefixes are selected

[Sunka]

I have a problem.
Some styling is conflicted somewhere.
When I am selecting prefixes, it is not visible which one are selected

My title_prefix_edit.css

.textCtrl .prefix,
.textCtrl .Popup
{
    float: left;
    margin-right: 3px;
}

    .textCtrl .prefix .Remove
    {
        cursor: pointer;
        margin-left: 5px;
        font-weight: bold;
        opacity: 0.35;
    }
   
        .textCtrl .prefix .Remove:hover
        {
            opacity: 1;
            text-decoration: none;
        }
       
.PrefixPopup a[rel]
{
}

.PrefixMenu
{
    z-index: 15000;
    padding: 0;
    max-height: 300px;
    overflow: auto;
    padding: 2px;
}

    .PrefixMenu .PrefixOption a
    {
        display: block;
        padding: 5px 10px;
        font-size: 100% !important;
        margin: 0 2px 3px;
    }
   
        .PrefixMenu .PrefixOption a:hover
        {
            text-decoration: none;
        }

    .PrefixMenu .PrefixGroup
    {
        border-bottom: 1px solid @primaryLighterStill;
        padding-bottom: 3px;
    }

        .PrefixMenu .PrefixGroup h3
        {
            color: @primaryLight;
            font-weight: bold;
            background: url('@imagePath/xenforo/gradients/form-button-white-25px.png') repeat-x top;
            padding: 4px 5px;
        }
           
        .PrefixMenu .PrefixGroup .PrefixOption a
        {
            margin-left: 12px;
        }
       
    .PrefixMenu .PrefixGroup  + .PrefixOption
    {
        margin-top: 5px;
    }
   
    .PrefixMenu .PrefixGroup.selected,
    .PrefixMenu .PrefixOption.selected
    {
        display: none;
    }
       
.textCtrl .Popup .PopupControl.prefix.noPrefix
{
    background: {xen:helper rgba, @primaryLightest, 0.2};
}

.prefix.noPrefix
{
    color: @mutedTextColor;
    font-style: italic;
}

You may need to gather some parts from EXTRAS.css too

Click to shrink...

Which parts? I looked in my extra.css and I have nothing for prefixes except coloring them. This is part of that:

/* Uvjetno jestiva */
.uvjetno-jestiva
    {
       background-color: #393660;
        border: 1px solid #278EDF !important;
        border-radius: 4px !important;
        box-shadow: 0 0 1px #F9F9F9 inset;
       color: #FFFFFF;
       display: inline-block;
       font-size: 12px;
       font-weight: bold;
       line-height: 17px;
        padding: 0 6px;
    }
   
    .uvjetno-jestiva:before
        {
            content: "\f1b1";
            font-family: FontAwesome;
            color: #99ff99;
            margin-right: 5px;
            font-weight: normal;
            font-size: 110%;
        }
       
        a.prefixLink:hover .uvjetno-jestiva
            {
                color: #ffffff;
                background-color: #003300;
                border: 1px solid #66cc00 !important;
                }

 

[Xon]

@Sunka do you use a UI.X based theme?

 

[Sunka]

Not custom theme at all

 

[Xon]

Can you screenshot all the template modifications this add-on uses?

There should be one for title_prefix_edit.css, which adds the CSS which makes this work.

 

[Xon]

I've PM'ed you a new build which tweaks how the CSS is altered. There was a potential incompatibility, which I think was causing the problem.

 

[Sunka]

Can you screenshot all the template modifications this add-on uses?

There should be one for title_prefix_edit.css, which adds the CSS which makes this work.

Click to shrink...

I've PM'ed you a new build which tweaks how the CSS is altered. There was a potential incompatibility, which I think was causing the problem.

Click to shrink...

Tried, but same problem.

Should I give you admin (or superadmin) account again?

 

[Xon]

Have a look at title_multiprefix_edit.css

.PrefixMenu .PrefixGroup.selected, .PrefixMenu .PrefixOption.selected
{
  display: block !important;
}

.PrefixMenu .PrefixOption a.selected
{
  font-weight: bold !important;
  border-color: #95A5B0;
}

I believe this needs work as it isn't very readable on some backgrounds.

 

[Sunka]

Yep, need some better soulution, maybe with double border or little sign on used prefixes or something like that

 

[Sunka]

This fix it for now and it is looking better.

.PrefixMenu .PrefixOption a.selected
{
    box-shadow: 0 0 0 3px #355904;
}

just a small bug I found, if you go to quick edit thread, and when you hower prefixes, if you click on cancel, quick edit closed, but list of prefixes stay on screen until you click somewhere on screen

 

[Steve]

While the font being bold shows selected prefixes would it be possible to add a '*' to a pseudo class? Before the prefix maybe? When there are numerous prefixes in the list it's quite difficult to make it out still which is selected.

 

[Xon]

@Steve @Sunka I've added a '*' before the prefix and deployed that here. Can you have a look in the testing forum (or here) to see if it helps?

 

[Sunka]

Yep, that will helps too.
Maybe to add space between '*' and prefix name, and add class for '*' so we could make contrast color from background.

 

[Xon]

It is using the ::before pseudo-class, so it is selectable and stylable