XF 2.1 Про поиск и правку CSS

[xilion]

Вопрос появился в процессе телодвижений с этим делом.

Поиск по шаблонам стилей нужные классы так и не выдал. Пришлось вносить правку через EXTRA.LESS

Правильно я понимаю, что не все CSS стили и класcы можно напрямую из админки найти?

 

[Mirovinger]

Не зря же я сказал про использование less, искать нужно так.
/admin.php?templates/search




Ctrl + F



Ну и результат.

 

[xilion]

Но ищется ж

a.button.button--scroll {
    border-radius: 25px;
    background-color: rgba(37, 119, 177, 0.50);
}

 

[Mirovinger]

Вот же Вы упёртый человек, Вам уже показали как нужно искать в админке, нет такого здесь понятия, как поиск по css, так как используется препроцессор less, а он уже компилирует исходный код в css.

 

[xilion]

Показать то показали, но до искомого дотянуться это не помогает.

Я ж сразу и уточнял про то, что не все CSS стили и класcы можно напрямую из админки найти.

 

[Sidd]

класcы можно напрямую из админки найти.

Напрямую нельзя, а на_кривую можно, вам шашечки или ехать?)

 

[Mirovinger]

Это песня хороша, начинай сначала, я же показал, как раз на примере, доступ к нужному значению.
То, что Вам дали в соседней теме, это уже компиляция кода и взято из исходного, понятно поясняю?

 

[Skaiman]

Да я изначально говорил, не надо голову забивать лишней информацией :) человек совсем запутался, сделал все правильно изначально в extra.less, так и делай, в шаблоны не лезь.

 

[xilion]

Напрямую нельзя

ВотЪ ))
Но меня ж со старта заверили, что

Всё есть в шаблонах. Ищите лучше...

 

[Sidd]

ВотЪ ))
Но меня ж со старта заверили, что
Всё есть в шаблонах. Ищите лучше...

Как говорится: Оно там есть, да не про вашу честь =)

 

[xilion]

То, что Вам дали в соседней теме, это уже компиляция кода и взято из исходного, понятно поясняю?

Предельно понятно. Это как раз и подтверждает мою изначальную догадку, что не все стили и класcы напрямую из админки можно получить.

 

[Hope]

Но меня ж со старта заверили, что

Какие заверения? Я не писал, что эти шаблоны нужно править, я лишь написал, что там нужно искать необходимый Вам код и то, что все классы есть в шаблонах.

 

[Mirovinger]

Предельно понятно. Это как раз и подтверждает мою изначальную догадку, что не все стили и класcы напрямую из админки можно получить.

Из админки можно получить всё, но это уже не для данной темы и Вам пока не нужно.

 

[xilion]

Да я изначально говорил, не надо голову забивать лишней информацией

Чисто академический интерес.

 

[Skaiman]

Чисто академический интерес.

не все сразу :)

 

[xilion]

Из админки можно получить всё

Окей, как получить a.button.button--scroll?

 

[Matew]

Казалось бы, так оно и должно быть, но искомого a.button.button--scroll там нет.

А с чего ему там быть? Я вам русским языком написал, что синтаксис less компилируется в css. Вы не сможете найти СКОМПИЛИРОВАННЫЙ класс в ИСХОДНОМ коде. Его там НЕТ, потому что он ещё НЕ скомпилирован

Чисто академический интерес.

Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that converts your Less styles to CSS styles.
Because Less looks just like CSS, learning it is a breeze. Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly.

И Sass, и LESS — это препроцессоры CSS, позволяющие писать ясный CSS с использованием программных конструкций вместо статических правил[4].

Изучите немного основы и базовую матчасть. Сначала CSS, потом LESS. Можете сюда заглянуть:

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Mirovinger]

Пространственное воображение хорошо работает, скомпилируйте в уме.

// ############################ BUTTONS #################

.button,
a.button // needed for specificity over a:link
{
    .m-buttonBase();

    a
    {
        color: inherit;
        text-decoration: none;
    }

    .xf-buttonDefault();
    .m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent));

    &.button--primary
    {
        .xf-buttonPrimary();
        .m-buttonBlockColorVariationSimple(xf-default(@xf-buttonPrimary--background-color, transparent));
    }

    &.button--cta
    {
        .xf-buttonCta();
        .m-buttonBlockColorVariationSimple(xf-default(@xf-buttonCta--background-color, transparent));
    }

    &.button--link
    {
        // block colors
        background: @xf-contentBg;
        color: @xf-linkColor;
        .m-buttonBorderColorVariation(@xf-borderColor);

        &:hover,
        &:active,
        &:focus
        {
            text-decoration: none;
            background: @xf-contentHighlightBg;
        }
    }

    &.button--plain
    {
        background: none;
        color: @xf-linkColor;
        border: none;

        &:hover,
        &:active,
        &:focus
        {
            text-decoration: none;
            background: none;
        }
    }

    &.button--alt
    {
        // block colors
        background-color: @xf-paletteColor1;
        color: @xf-linkColor;
        .m-buttonBorderColorVariation(@xf-paletteColor2);

        &:hover,
        &:active,
        &:focus
        {
            background-color: @xf-paletteColor1;
            color: @xf-linkColor;
        }
    }

    &.button--longText
    {
        .m-overflowEllipsis();
        max-width: 100%;
        display: inline-block;
    }

    &.is-disabled
    {
        .xf-buttonDisabled();
        .m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent));

        &:hover,
        &:active,
        &:focus
        {
            background: xf-default(@xf-buttonDisabled--background-color, transparent) !important;
        }
    }

    &.button--scroll
    {
        background: fade(xf-default(@xf-buttonDefault--background-color, transparent), 75%);
        padding: 5px 8px;

        .m-dropShadow();
    }

    &.button--normal
    {
        font-size: @xf-fontSizeNormal;
    }

    &.button--small
    {
        font-size: @xf-fontSizeSmall;
        padding: 3px 6px;
    }

    &.button--smaller
    {
        font-size: @xf-fontSizeSmaller;
        padding: 2px 5px;
    }

    &.button--fullWidth
    {
        display: block;
        width: 100%;
    }

    &.button--wrap
    {
        white-space: normal;
    }

    &.button--icon
    {
        > .button-text:before,
        .button-icon
        {
            .m-faBase();
        }

        > .button-text:before,
        > .fa--xf:before,
        .button-icon
        {
            font-size: 120%;
            vertical-align: -.1em;
            display: inline-block;
            margin: -.255em 6px -.255em 0;
        }

        > .fa--xf
        {
            // helps fix a button alignment issue (Chrome only)
            line-height: inherit;
        }

        .button-icon
        {
            height: 1em;
            vertical-align: 0;
        }

        &.button--iconOnly
        {
            > .button-text:before,
            > i.fa--xf:before,
            .button-icon
            {
                margin-left: 0;
                margin-right: 0;
            }
        }

        &.button--padded
        {
            > .button-text:before,
            > i.fa--xf:before,
            .button-icon
            {
                margin-top: 0;
                margin-bottom: 0;
            }
        }

        &--add          { .m-buttonIcon(@fa-var-plus-square, .79em); }
        &--confirm      { .m-buttonIcon(@fa-var-check, 1em); }
        &--write        { .m-buttonIcon(@fa-var-edit, 1em); }
        &--import          { .m-buttonIcon(@fa-var-upload, .93em); }
        &--export          { .m-buttonIcon(@fa-var-download,  1.125em); }
        &--download        { .m-buttonIcon(@fa-var-download, 1.125em); }
        &--redirect        { .m-buttonIcon(@fa-var-external-link, 1.125em); }
        &--disable      { .m-buttonIcon(@fa-var-power-off); }
        &--edit         { .m-buttonIcon(@fa-var-edit, 1.13em); }
        &--save         { .m-buttonIcon(@fa-var-save, .86em); }
        &--reply        { .m-buttonIcon(@fa-var-reply, 1.13em); }
        &--quote        { .m-buttonIcon(@fa-var-quote-left, .93em); }
        &--purchase        { .m-buttonIcon(@fa-var-credit-card, 1.11em); }
        &--payment        { .m-buttonIcon(@fa-var-credit-card, 1.08em); }
        &--convert        { .m-buttonIcon(@fa-var-bolt, .5em); }
        &--search        { .m-buttonIcon(@fa-var-search, .93em); }
        &--sort         { .m-buttonIcon(@fa-var-sort, .58em); }
        &--upload        { .m-buttonIcon(@fa-var-upload, .93em); }
        &--attach        { .m-buttonIcon(@fa-var-paperclip, .79em); }
        &--login {
            .m-buttonIcon(@fa-var-lock, .90em);
        }
        &--rate         { .m-buttonIcon(@fa-var-star, .93em); }
        &--config       { .m-buttonIcon(@fa-var-cog, .86em); }
        &--refresh      { .m-buttonIcon(@fa-var-sync-alt, .86em); }
        &--translate    { .m-buttonIcon(@fa-var-globe, .86em); }
        &--vote         { .m-buttonIcon(@fa-var-check-circle, .86em); }
        &--result       { .m-buttonIcon(@fa-var-chart-bar, 1.15em); }
        &--history        { .m-buttonIcon(@fa-var-history, .86em); }
        &--cancel       { .m-buttonIcon(@fa-var-ban, .86em); }
        &--close        { .m-buttonIcon(@fa-var-times, .79em); }
        &--preview      { .m-buttonIcon(@fa-var-eye, 1em); }
        &--conversation { .m-buttonIcon(@fa-var-comments, 1em); }
        &--bolt         { .m-buttonIcon(@fa-var-bolt, .5em); }
        &--list         { .m-buttonIcon(@fa-var-list, .86em); }
        &--prev            { .m-buttonIcon(@fa-var-chevron-left, .71em); }
        &--next            { .m-buttonIcon(@fa-var-chevron-right, .71em); }
        &--markRead     { .m-buttonIcon(@fa-var-check-square, .93em); }
        &--user         { .m-buttonIcon(@fa-var-user, .72em); }
        &--userCircle   { .m-buttonIcon(@fa-var-user-circle, 1em); }

        &--notificationsOn  { .m-buttonIcon(@fa-var-bell, 1em); }
        &--notificationsOff { .m-buttonIcon(@fa-var-bell-slash, 1.15em); }

        &--show            { .m-buttonIcon(@fa-var-eye) }
        &--hide            { .m-buttonIcon(@fa-var-eye-slash) }

        // for inline mod confirmations
        &--merge { .m-buttonIcon(@fa-var-compress, .86em); }
        &--move { .m-buttonIcon(@fa-var-share, 1em); }
        &--copy { .m-buttonIcon(@fa-var-copy, 1em); }
        &--approve, &--unapprove { .m-buttonIcon(@fa-var-shield, .72em); }
        &--delete, &--undelete { .m-buttonIcon(@fa-var-trash-alt, .88em); }
        &--stick, &--unstick { .m-buttonIcon(@fa-var-thumbtack, .65em); }
        &--lock { .m-buttonIcon(@fa-var-lock, .88em); }
        &--unlock { .m-buttonIcon(@fa-var-unlock, .93em); }

        &--bookmark
        {
            .m-buttonIcon(@fa-var-bookmark);

            &.is-bookmarked .button-text:before
            {
                font-weight: @faWeight-solid;
                color: @xf-textColorAttention;
            }
        }
    }

    &.button--provider
    {
        > .button-text:before,
        .button-icon
        {
            .m-faBase('Brands');
            font-size: 120%;
            vertical-align: middle;
            display: inline-block;
            margin: -4px 6px -4px 0;
        }

        .button-icon
        {
            height: 1em;
            vertical-align: 0;
        }

        &--facebook
        {
            .m-buttonColorVariation(#3B5998, white);
            .m-buttonIcon(@fa-var-facebook, .58em);
        }

        &--twitter
        {
            .m-buttonColorVariation(#1DA1F3, white);
            .m-buttonIcon(@fa-var-twitter, .93em);
        }

        &--google
        {
            .m-buttonColorVariation(white, #444);
            border-color: #e9e9e9;

            > .button-text:before
            {
                display: none;
            }
        }

        &--github
        {
            .m-buttonColorVariation(#666666, white);
            .m-buttonIcon(@fa-var-github, .86em);
        }

        &--linkedin
        {
            .m-buttonColorVariation(#0077b5, white);
            .m-buttonIcon(@fa-var-linkedin, .86em);
        }

        &--microsoft
        {
            .m-buttonColorVariation(#00bcf2, white);
            .m-buttonIcon(@fa-var-windows, .93em);
        }

        &--yahoo
        {
            .m-buttonColorVariation(#410093, white);
            .m-buttonIcon(@fa-var-yahoo, .86em);
        }
    }

    &.button--splitTrigger
    {
        // button-text and button-menu are always children of button--splitTrigger
        // but are defined here for reasons of specificity, as these border colors
        // are overwritten by .m-buttonBorderColorVariation()
        > .button-text { border-right: @xf-borderSize solid transparent; }
        > .button-menu { border-left: @xf-borderSize solid transparent; }

        .m-clearFix();
        padding: 0;
        font-size: 0;
        display: inline-block;

        button.button-text
        {
            background: transparent;
            border: none;
            border-right: @xf-borderSize solid transparent;
            color: inherit;
        }

        > .button-text,
        > .button-menu
        {
            .xf-buttonBase();
            display: inline-block;

            &:hover
            {
                &:after
                {
                    opacity: 1;
                }
            }
        }

        > .button-text
        {
            .m-borderRightRadius(0);
        }

        > .button-menu
        {
            .m-borderLeftRadius(0);
            padding-right: xf-default(@xf-buttonBase--padding-right, 0);// * (2/3);
            padding-left: xf-default(@xf-buttonBase--padding-left, 0);// * (2/3);

            &:after
            {
                .m-menuGadget(); // .58em
                opacity: .5;
            }
        }
    }
}

Если плохо с пространственным компилятором, то воспользуйтесь -

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

.

Ну или такой код будет нагляднее и короче, да и тестер скушает.

@xf-buttonDefault--background-color: blue;

.button,
a.button // needed for specificity over a:link
{
    &.button--scroll
    {
        background: fade(xf-default(@xf-buttonDefault--background-color, transparent), 75%);
        padding: 5px 8px;
    }
}

 

[Skaiman]

тестер не скомпилирует переменные ксена, ошибки даст :)

 

[Mirovinger]

Скомпилирует, если их объявить или убрать, что я и подправил ниже.

 

[Skaiman]

Давай его на костре сожжем лучше, что б не доставал :)