Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
На первую страницук этому сообщениюк последнему сообщению

Открыть новую тему     Написать ответ в эту тему

nfmzkvmx



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
html

Код:
<div id="spu-modal">
    <div>
        <button class="spu" id="spu-close" title="Отменить поиск">X</button><br>
        <li>
           <fieldset>
               <legend>Сортировать найденное</legend>
               <li>
                  <label for="spu-fromnew">От новых к старым</label>
                  <input id="spu-fromnew" name="sort" type="radio">
                  <input id="spu-fromold" name="sort" type="radio">
                  <label for="spu-fromold">От старых к новым</label>
               </li>
           </fieldset>
           <fieldset>
               <legend>Дополнительно</legend>
               <li>
                  <label for="spu-head">Шапку в результаты
                      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAn1BMVEUAAAAAbfMAbfEAbe8AbfAAbfAAbfEAbu8AcO8AAP8Abu8AbfAAbfAAbfEAgP8AbPAAbfAAbPIAa/IAbvAAbfAAbPEAbe0AcO8AbPAAbfAAceMAbfAAbfAAbfAAbPAAbfAAbfAAZv8AafAAbfEAavQAVf8AbPEAcfEAbf8AbfAAbfAAbe8Abe8AbfAAbfAAbfAAa/IAbfAAbfAAbfAAAADuFkhRAAAAM3RSTlMAKn606eKxgCABcvj0bgK19ztMl+1cDhA0+gnw4fnI09sFEcMYA6ASB77xcJOvzc4T8kSdjffTAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+IIDBMlMtO6eB4AAAChSURBVBjTTY/pDoMgEIQHAVHE2lNr7/uyt+//bl3Ypun8YL5dks0MQBKRVDo2CVipzdogl3f83Cnan4qUFjlB1/T6gyGBBRJHPkJZYUyQCRiyelJOXYUZYYSY3vli2a7Wm5pQQvO57W5/8K6geHE8nYNryOCX5sofMSKG253dQISYDzw5LMW3Hl7vJixyX+U/OpfJHY+ZTb99ExNrJSPh+QOxnx6dvxBTegAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wOC0xMlQxOTozNzo1MCswMjowMEnQ2mMAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDgtMTJUMTk6Mzc6NTArMDI6MDA4jWLfAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==" title="Включать шапку темы в результат поиска, при удовлетворении условиям">
                  </label>
                  <input id="spu-head" type="checkbox">
               </li>
               <li>
                  <label for="spu-imgs">Без картинок
                      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAn1BMVEUAAAAAbfMAbfEAbe8AbfAAbfAAbfEAbu8AcO8AAP8Abu8AbfAAbfAAbfEAgP8AbPAAbfAAbPIAa/IAbvAAbfAAbPEAbe0AcO8AbPAAbfAAceMAbfAAbfAAbfAAbPAAbfAAbfAAZv8AafAAbfEAavQAVf8AbPEAcfEAbf8AbfAAbfAAbe8Abe8AbfAAbfAAbfAAa/IAbfAAbfAAbfAAAADuFkhRAAAAM3RSTlMAKn606eKxgCABcvj0bgK19ztMl+1cDhA0+gnw4fnI09sFEcMYA6ASB77xcJOvzc4T8kSdjffTAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+IIDBMlMtO6eB4AAAChSURBVBjTTY/pDoMgEIQHAVHE2lNr7/uyt+//bl3Ypun8YL5dks0MQBKRVDo2CVipzdogl3f83Cnan4qUFjlB1/T6gyGBBRJHPkJZYUyQCRiyelJOXYUZYYSY3vli2a7Wm5pQQvO57W5/8K6geHE8nYNryOCX5sofMSKG253dQISYDzw5LMW3Hl7vJixyX+U/OpfJHY+ZTb99ExNrJSPh+QOxnx6dvxBTegAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wOC0xMlQxOTozNzo1MCswMjowMEnQ2mMAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDgtMTJUMTk6Mzc6NTArMDI6MDA4jWLfAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==" title="Заменить картинки в найденных постах ссылками на них (исключая смайлы)">
                  </label>
                  <input id="spu-imgs" type="checkbox">
               </li>
           </fieldset>
        </li>
        <fieldset>
            <legend>Введите имя(-ена)
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAn1BMVEUAAAAAbfMAbfEAbe8AbfAAbfAAbfEAbu8AcO8AAP8Abu8AbfAAbfAAbfEAgP8AbPAAbfAAbPIAa/IAbvAAbfAAbPEAbe0AcO8AbPAAbfAAceMAbfAAbfAAbfAAbPAAbfAAbfAAZv8AafAAbfEAavQAVf8AbPEAcfEAbf8AbfAAbfAAbe8Abe8AbfAAbfAAbfAAa/IAbfAAbfAAbfAAAADuFkhRAAAAM3RSTlMAKn606eKxgCABcvj0bgK19ztMl+1cDhA0+gnw4fnI09sFEcMYA6ASB77xcJOvzc4T8kSdjffTAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+IIDBMlMtO6eB4AAAChSURBVBjTTY/pDoMgEIQHAVHE2lNr7/uyt+//bl3Ypun8YL5dks0MQBKRVDo2CVipzdogl3f83Cnan4qUFjlB1/T6gyGBBRJHPkJZYUyQCRiyelJOXYUZYYSY3vli2a7Wm5pQQvO57W5/8K6geHE8nYNryOCX5sofMSKG253dQISYDzw5LMW3Hl7vJixyX+U/OpfJHY+ZTb99ExNrJSPh+QOxnx6dvxBTegAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wOC0xMlQxOTozNzo1MCswMjowMEnQ2mMAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDgtMTJUMTk6Mzc6NTArMDI6MDA4jWLfAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==" title="Чтобы искать посты для всех пользователей, по тексту, - оставьте поле имени пустым.
Имена в форму поиска вводить без учета регистра, разделяя запятой (без пробела).
Имена с пробелами - ищутся и с пробелом и с _.">
            </legend>
            <li>
                <button class="spu" id="spu-names-list" title="Открыть меню для добавления имен из списка сохраненных.
Имена задаются в опциях скрипта, в коде
(при обновлении скрипта пользовательские изменения сбрасываются, делайте копию списка)">Добавить имена
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAn1BMVEUAAAAAbfMAbfEAbe8AbfAAbfAAbfEAbu8AcO8AAP8Abu8AbfAAbfAAbfEAgP8AbPAAbfAAbPIAa/IAbvAAbfAAbPEAbe0AcO8AbPAAbfAAceMAbfAAbfAAbfAAbPAAbfAAbfAAZv8AafAAbfEAavQAVf8AbPEAcfEAbf8AbfAAbfAAbe8Abe8AbfAAbfAAbfAAa/IAbfAAbfAAbfAAAADuFkhRAAAAM3RSTlMAKn606eKxgCABcvj0bgK19ztMl+1cDhA0+gnw4fnI09sFEcMYA6ASB77xcJOvzc4T8kSdjffTAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+IIDBMlMtO6eB4AAAChSURBVBjTTY/pDoMgEIQHAVHE2lNr7/uyt+//bl3Ypun8YL5dks0MQBKRVDo2CVipzdogl3f83Cnan4qUFjlB1/T6gyGBBRJHPkJZYUyQCRiyelJOXYUZYYSY3vli2a7Wm5pQQvO57W5/8K6geHE8nYNryOCX5sofMSKG253dQISYDzw5LMW3Hl7vJixyX+U/OpfJHY+ZTb99ExNrJSPh+QOxnx6dvxBTegAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wOC0xMlQxOTozNzo1MCswMjowMEnQ2mMAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDgtMTJUMTk6Mzc6NTArMDI6MDA4jWLfAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==">
                </button>
                <div>
                    <ul id="spu-nms-menu" hidden="true">
                    <li>Name1</li><li>Name2</li><li>Name3</li><li>etc...</li></ul>
                </div>
            </li>
            <img class="spu clear-form" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAEhSURBVHja1FMxS8NgEH1XxCUuri24VKmLY6qDPyDoIF0k0Dmj4GBoQZBWBLEVOnaI0LEiXTIo/gAHO7sIOjm4SsEu4nfPJQGNIRk6iA/ecI/jeHePE5KYBQXMiL8fMJcUVja2VwG4ALrP45spACyvb1kAfACXT/fXj5kOSHVJBal+uepY5apjkepHmpu7wklj74JGEdGPCBrF6eF+kOyXlBjlKrwtNo7PvYKIAoCShbOjg2B3x3kFwEwHIsJefzBR84nv7PUHExFhroOltc34YGnovjzcTTMdqDG+GgM1Bp12M+i0m0FcqzG/B5P8wVrds4sVuzUchSWSQlKGo7BUrNitWt2zk/1pR5wHsADgLd6ZpABYBPAO4CMvhX/2C18DAHuyrpoNc5ujAAAAAElFTkSuQmCC" title="Очистить форму">
            <input id="spu-names">
        </fieldset>
        <fieldset id="spu-col">
            <legend>Введите текст
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAn1BMVEUAAAAAbfMAbfEAbe8AbfAAbfAAbfEAbu8AcO8AAP8Abu8AbfAAbfAAbfEAgP8AbPAAbfAAbPIAa/IAbvAAbfAAbPEAbe0AcO8AbPAAbfAAceMAbfAAbfAAbfAAbPAAbfAAbfAAZv8AafAAbfEAavQAVf8AbPEAcfEAbf8AbfAAbfAAbe8Abe8AbfAAbfAAbfAAa/IAbfAAbfAAbfAAAADuFkhRAAAAM3RSTlMAKn606eKxgCABcvj0bgK19ztMl+1cDhA0+gnw4fnI09sFEcMYA6ASB77xcJOvzc4T8kSdjffTAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+IIDBMlMtO6eB4AAAChSURBVBjTTY/pDoMgEIQHAVHE2lNr7/uyt+//bl3Ypun8YL5dks0MQBKRVDo2CVipzdogl3f83Cnan4qUFjlB1/T6gyGBBRJHPkJZYUyQCRiyelJOXYUZYYSY3vli2a7Wm5pQQvO57W5/8K6geHE8nYNryOCX5sofMSKG253dQISYDzw5LMW3Hl7vJixyX+U/OpfJHY+ZTb99ExNrJSPh+QOxnx6dvxBTegAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wOC0xMlQxOTozNzo1MCswMjowMEnQ2mMAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDgtMTJUMTk6Mzc6NTArMDI6MDA4jWLfAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==" title="Чтобы искать только посты по именам пользователей - оставьте поле текста пустым.
 
Регулярные выражения вводить включив чекбокс.
Без начального и закрывающего слеша.
Для ввода флагов - отдельное поле,
Регулярки не проверяются на валидность.
 
Поиск без регулярок:
    раз два три - искать любую из разделенных пробелами частей
    раз два OR три OR пять - искать любую из фраз: &quot;раз два&quot;, &quot;три&quot;, &quot;пять&quot;
    раз два AND три AND пять - искать все фразы
    &quot;раз два три&quot; - (в двойных кавычках) искать фразу целиком
Комбинировать операторы пока нельзя.
 
Поиск с учетом регистра по умолчанию. Для поиска без учета - включить чекбокс.
При поиске без регулярок все пробелы, переносы, табуляции - заменяются на единичный пробел,
как в задании для поиска, так и в тексте постов.
Слово &quot;поле&quot; - найдется и в &quot;Наполеон&quot; если не включен чекбокс &quot;Точное соответствие&quot;.">
            </legend>
            <fieldset>
                <legend>Опции поиска</legend>  
               <li>
                   <label for="spu-sig">В подписях</label>
                   <input id="spu-sig" type="checkbox">
               </li>
               <li>
                   <label for="spu-qt">В цитатах</label>
                   <input id="spu-qt" type="checkbox">
               </li>
               <li>
                   <label for="spu-sentence">Фразу</label>
                   <input id="spu-sentence" type="checkbox">
               </li>
               <li>
                   <label for="spu-whole">Точное соответствие
                       <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAn1BMVEUAAAAAbfMAbfEAbe8AbfAAbfAAbfEAbu8AcO8AAP8Abu8AbfAAbfAAbfEAgP8AbPAAbfAAbPIAa/IAbvAAbfAAbPEAbe0AcO8AbPAAbfAAceMAbfAAbfAAbfAAbPAAbfAAbfAAZv8AafAAbfEAavQAVf8AbPEAcfEAbf8AbfAAbfAAbe8Abe8AbfAAbfAAbfAAa/IAbfAAbfAAbfAAAADuFkhRAAAAM3RSTlMAKn606eKxgCABcvj0bgK19ztMl+1cDhA0+gnw4fnI09sFEcMYA6ASB77xcJOvzc4T8kSdjffTAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+IIDBMlMtO6eB4AAAChSURBVBjTTY/pDoMgEIQHAVHE2lNr7/uyt+//bl3Ypun8YL5dks0MQBKRVDo2CVipzdogl3f83Cnan4qUFjlB1/T6gyGBBRJHPkJZYUyQCRiyelJOXYUZYYSY3vli2a7Wm5pQQvO57W5/8K6geHE8nYNryOCX5sofMSKG253dQISYDzw5LMW3Hl7vJixyX+U/OpfJHY+ZTb99ExNrJSPh+QOxnx6dvxBTegAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wOC0xMlQxOTozNzo1MCswMjowMEnQ2mMAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDgtMTJUMTk6Mzc6NTArMDI6MDA4jWLfAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==" title="Искать слово(-а) или фразу(-ы) только если предыдущий и последующий символы не являются буквенно-цифровыми">
                   </label>
                   <input id="spu-whole" type="checkbox">
               </li>
               <li>
                   <label for="spu-case">Без учета регистра</label>
                   <input id="spu-case" type="checkbox">
               </li>
               <li>
                   <label for="spu-regexp">RegExp</label>
                   <input id="spu-regexp" type="checkbox">
                   <input id="spu-flags" size="6" disabled="" placeholder="Флаги" type="text" hidden="">
               </li>
            </fieldset>
            <div>
                <img class="spu clear-form" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAEhSURBVHja1FMxS8NgEH1XxCUuri24VKmLY6qDPyDoIF0k0Dmj4GBoQZBWBLEVOnaI0LEiXTIo/gAHO7sIOjm4SsEu4nfPJQGNIRk6iA/ecI/jeHePE5KYBQXMiL8fMJcUVja2VwG4ALrP45spACyvb1kAfACXT/fXj5kOSHVJBal+uepY5apjkepHmpu7wklj74JGEdGPCBrF6eF+kOyXlBjlKrwtNo7PvYKIAoCShbOjg2B3x3kFwEwHIsJefzBR84nv7PUHExFhroOltc34YGnovjzcTTMdqDG+GgM1Bp12M+i0m0FcqzG/B5P8wVrds4sVuzUchSWSQlKGo7BUrNitWt2zk/1pR5wHsADgLd6ZpABYBPAO4CMvhX/2C18DAHuyrpoNc5ujAAAAAElFTkSuQmCC" title="Очистить форму">
                <textarea id="spu-txtarea"></textarea>
            </div>
        </fieldset><br>
        <div></div>
        <div id="spu-sticky">
            <button id="spu-srch-strt" class="spu">Начать поиск</button>
        </div>
    </div>
</div>

css

Код:
#spu-spoiler-head {
    font-family: Segoe UI Emoji, bitstreamcyberbit, quivira, Verdana, Arial, Helvetica, sans-serif;
    -moz-user-select: none !important;
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    cursor: pointer !important
}
#spu-spoiler-head[notready] {
    cursor: not-allowed !important;
}
#spu-spoiler-body {
    border: 1px solid black !important;
    padding-top: 1em !important;
}
#spu-spoiler-body:not([hidden]) {
    display: block !important;
}
#spu-spoiler-body {
    border: 1px solid black !important;
    padding: .5em 0 !important;
    box-sizing: border-box !important;
}
#spu-spoiler-body button.spu{
    visibility: hidden !important;
}
#spu-spoiler-body > .tb:last-of-type {
    border-bottom-width: 1px !important;
    margin-bottom: -100px !important;
}
.spu {
    padding: .05em .5em .1em !important;
    background: rgb(251,251,251) !important;
    color: rgb(51, 51, 51) !important;
    border: 1px solid rgba(66,78,90,0.2) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    font-size: 1em !important;
}
.spu:hover {
    background: rgb(235,235,235) !important;
}
.spu:active {
    background: rgb(225,225,225) !important;
}
#spu-nav {
    position: -webkit-sticky !important;
    position: sticky !important;
    display: inline-block !important;
    height: 0 !important;
    top: 0 !important;
    bottom: calc(50vh + 50px) !important;
    left: 0 !important;
    margin-bottom: 100px !important;
}
#spu-nav ul {
    padding: 0 !important;
    margin: 0 !important;
}
.spu-nav-btn {
    list-style-position: inside !important;
}
#spu-nav-up {
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAYnAAAGJwFNVNjHAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAGZQTFRFAJjmAJbmAJbnAJbmAJbmApfmCprnDZvnDpznE57oFp/oHqLpPa/sZsDwic/0ldP1tuH40Oz60+372/D74vP86fb96vb96/f97Pf97fj97/j97/n98fn98fn+9fv+9/z+/P7/////B9XeKgAAAAR0Uk5TNM/x8gg9m90AAACFSURBVCjPpdJJDoMwEETRts08JxDbmASo+1+SBSRiaEtI+du36y4iIdUlKYhEwCZI8iBJ8aBuQRzzEHVdxEI1jhUH+QC4nIFmBubmCoUDAFecIWwBAGjDE5SfFd7lERKLLZMcoJ6+MNV7yBx+9dkO0sdLa22MtbZ/pveP+C94X+sdg28+CxzeEOjnGCz7AAAAAElFTkSuQmCC") !important;
}
#spu-nav-down {
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAYnAAAGJwFNVNjHAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAGZQTFRFAJjmAJbmAJbnAJbmAJbmApfmCprnDZvnDpznE57oFp/oHqLpPa/sZsDwic/0ldP1tuH40Oz60+372/D74vP86fb96vb96/f97Pf97fj97/j97/n98fn98fn+9fv+9/z+/P7/////B9XeKgAAAAR0Uk5TNM/x8gg9m90AAACISURBVCjPrZLHEoAgDEQD2HsFrMj//6SODo4lnHSPeRM2WQJAKHuJEgDioCJAcUCB4YD9DsKqk1IKwTlvy/ACok6f6qPrU7kydZXfPAJhgAzu5ul41Kf0MZVbH6B2n+Mm/e6cvPcoFq2XAlkw3lqGGNs8m+cMjcRrGg/Pyve/pWv9Wusx2M5nBYeDEOi0fx6VAAAAAElFTkSuQmCC") !important;
}
#spu-nav-home {
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAYnAAAGJwFNVNjHAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAFCSURBVHja7NY9bsIwGAZgiwOwIDGys7NyAu6BOnGPHoDAgEBiYWSCmYoDpBJDByYWJ+RHiVGDTWP77QBqqZoIkhCpQy29kyU/8vfZsgkZ0hYxqEkMixGDHh4TixGDmmRIW+S8OEVJMclFKwmwGLls68dEc+bg6SXMlObMSUIOiUBn4SPr6Cz8PwQklai3ZrAiCZdL9NasWImS8my+I4o1uNQYvR3TFswHNKZ7BCf1VY5AKDSm+8cBy52A1N/1lhpY7sRjgPbcQyDUr6YGQqE994oBlQHFNoxTT842jFEZFAC6qxDspFMBdlLorsJ8QHVkwePq5vl3uUJ1ZGUH+psIXOqbAJca/U2UDahP7MTGpg1fKNQn9v1AbWzj1fvA/qjgXMXl53hX8YXCxo9RG9vFbnLO/AN3AeU/mSU/+iV/Wz4HAO0TO0w8lLnaAAAAAElFTkSuQmCC") !important;
}
#spu-nav-end {
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAYnAAAGJwFNVNjHAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAE/SURBVHja7JY9bsJAEIVXHIAGiZKenpYTcA+UintwAAwFAomGkgpqIg7gSC6poFj/YMtewNiOvX4pYglQIP7BK6XISK9aaT7NvBnNEjKiLSJRmUgqIxI9liOVEYnKZERb5Ds5hSDJJKEJAqiMJGWJquD4DygGqE00KFYIy+cwvasOiYzLVfqF48P8RG2iZQfUpxosnyNr2D5Hfarla9FAceFFcWpyL4oxUNz8HlTHKg5eehWmx1Edq8VM7q4dsOA5hAUxumun+BRVhhRbJ3wK2DohKsMXx7S9MGE/MNz2OdoLs5w9WO183PodxcBq55e3aI2ZfleFHXA0Znq5m9yXz3DDGG4Yoy+fX9vk5tzA27tzp96GYX+KsD9F6G3Yj/fm3MgO6Cwt5I3O0vpDgEctStMvLRJ/MgUffcHflq8BAGM1Oto/EMphAAAAAElFTkSuQmCC") !important;
}
#spu-modal {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: rgba(0,0,0,0.8) !important;
    z-index: 2147483646 !important;
}
#spu-modal > div {
    position: relative !important;
    width: 60vw;
    max-width: 1200px;
    max-height: 80vh !important;
    display: flex !important;
    flex-flow: column !important;
    margin: 10vh auto !important;
    padding: 20px !important;
    border-radius: 3px !important;
    background: rgb(251, 251, 251) !important;
    resize: both !important;
    overflow: auto !important;
}
#spu-modal > div > li > fieldset {
    flex-grow: 1 !important;
}
#spu-modal fieldset,
#spu-modal fieldset div {
    display: flex !important;
    position: relative !important;
    flex-flow: column !important;
    font-weight: 600 !important;
}
#spu-modal img:not([class]) {
    cursor: help !important;
    padding: 0 5px !important;
    vertical-align: text-bottom !important;
}
#spu-modal .clear-form {
    position: absolute !important;
    padding: 0 !important;
    border-radius: 100% !important;
}
#spu-modal fieldset > .clear-form {
    top: -5px !important;
    right: 0 !important;
}
#spu-modal div > .clear-form {
    top: 0 !important;
    right: -7px !important;
}
#spu-modal fieldset:not([id]) {
    display: flex;
    flex-flow: wrap !important;
    align-items: center !important;
    justify-content: space-evenly !important;
}
#spu-modal > div > li {
    display: flex;
    flex-flow: row !important;
    align-items: stretch !important;
    justify-content: space-between !important;
}
#spu-modal #spu-col,
#spu-modal fieldset > div,
#spu-modal input:not([type]) {
    flex-grow: 1 !important;
    flex-basis: auto !important;
}
#spu-modal #spu-names {
    align-self: center !important;
}
#spu-modal label {
    -moz-user-select: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    font-weight: 400 !important;
}
#spu-modal input:not([type]),
#spu-modal #spu-names-list {
    height: 2.5em !important;
}
#spu-modal textarea {
    resize: none !important;
    flex-basis: 30vh !important;
    flex-grow: 1 !important;
    margin: 10px 2px 0 !important;
}
#spu-modal button {
    font-weight: 600 !important;
}
#spu-modal #spu-close {
    position: fixed !important;
    align-self: flex-end !important;
    padding: 0 15px !important;
    margin: -20px -20px 0 20px !important;
    z-index: 2147483647 !important;
}
#spu-modal #spu-srch-strt {
    padding: 5px 0 !important;
    flex-grow: 1 !important;
}
#spu-modal div:empty {
    min-height: 20px;
}
#spu-modal #spu-sticky {
    display: flex !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    bottom: -20px;
}
#spu-modal fieldset > li {
    display: inline-flex !important;
    position: relative !important;
}
#spu-modal #spu-nms-menu li:not(:last-child) {
    border-bottom: solid .5px lightgrey !important;
}
#spu-modal #spu-nms-menu li {
    padding: .25em !important;
    padding-left: 1em !important;
    cursor: default !important;
    text-align: start !important;
    font-weight: 400 !important;
}
#spu-modal #spu-nms-menu li:hover {
    color: #fff !important;
    background: linear-gradient(to bottom, #6f81f5, #3f51f2) repeat-x !important;
}
#spu-modal li {
    list-style-type: none !important;
}
#spu-modal li > div {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999
}
#spu-modal #spu-nms-menu {
    margin-top: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid rgba(66,78,90,0.2) !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #spu-modal fieldset:not([id]),
    #spu-modal > div > li {
        display: inline !important;
        text-align: center !important;
        vertical-align: middle !important;
    }
    #spu-modal > div > li > fieldset {
        width: calc(50% - 28.5px) !important;
    }
    #spu-modal input:not([type]) {
        width: calc(100% - 148px) !important;
        min-width: 60% !important;
    }
    #spu-modal label {
        vertical-align: middle !important;
    }
    #spu-modal fieldset > .clear-form {
        top: 8px !important;
        right: 2px !important;
    }
    #spu-modal #spu-sticky {
        bottom: 0px !important;
    }
    #spu-modal div:empty {
        min-height: 0 !important;
    }
    #spu-modal #spu-srch-strt {
        height: max-content !important;
    }
    @supports not ((position: sticky) or (position: -webkit-sticky)) {
        #spu-nav {
            position: fixed !important;
            bottom: 0 !important;
            left: auto !important;
        }
        #spu-modal #spu-sticky {
            bottom: 0px !important;
            position: relative !important;
        }
    }
}

Всего записей: 186 | Зарегистр. 09-04-2017 | Отправлено: 19:20 21-08-2018
Открыть новую тему     Написать ответ в эту тему

На первую страницук этому сообщениюк последнему сообщению

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru