seregadushka
BANNED | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Коллеги, я обещал рассказать о своем моддинге Express-страницы Vivladi
Удалась только половина
идем по пути \Vivaldi\Application\5.6.2824.8\resources\vivaldi\style\
открываем common.css
начиная со строки 11033 видим это:
Код: .dials-wrapper:not(.dragging-disabled) .dials .dial:hover,
.dials-wrapper:not(.dragging-disabled) .dials .dial:focus {
margin-top: -1px;
} |
тут 2 вложенных класса .dial с :hover и :focus , с требованием, что обязательно должны быть вложенными. Требование непонятно , т.к. класс остается классом , вложен он или нет. Т.е. можно удалить все до .dial и все будет работать и так.
Тоже подкласс :focus используется для выбранных полей ввода, чем наши квадраты не является. Ну разрабы так поставили, пусть остается.
Код: -- уменьшение границы
А-а-а-а вот я и вспомнил  . Коллега Шпанков при обсуждении необходимости Синхронизации и отсутствии возможности ее отключения назвал всех присутствующих на этом форуме -- МАРГИНАЛАМИ.
Меня задела такая неприкрытая грубость.
Все мы, владеющие родным русским знаем, что это оскорбление относится с нижней прослойке общества -- БОМЖам-теплотрасникам. Конечно, можно смотреть обтекаемую Wikipedia с ее "человек на краю общества".
Но в разговорной речи чаще используется это значение:
[i]Как правило, слово «маргинал» используется в негативном ключе, когда речь заходит об «опустившихся», асоциальных людях. Но разобравшись с тем, какое значение термин приобрел в современном мире, можно с удивлением обнаружить маргиналов и среди своих знакомых, и людей находящихся совсем не на «дне» общества. Согласно словарям маргиналом называют человека оказавшегося вне каких-либо социальных групп, культур
Т.е. никаких интеллигентов в пиджаках с бабочкой , стоящих с краю. Только бомжы-отщепенцы, не нашедшие себя в обществе. По мнению Шпанкова -- это все мы. Цитаты поищите в этой ветке.
Откуда МАРГИНАЛ в русской языке ? Да вот прямо из CSS !
margin -- это "граница" на всех человеческих языках, и CSS тоже.
Кстати, Шпанков тогда не ответил, не извинился . Знает ли он перевод с английского ? Теперь, конечно, знает.[/i]
Итак,
Код: -- уменьшение верхней границы на жалкий 1 пиксель. Вызывает подъем квадрата под мышью. Не все даже замечали этот 1рх.
Для чего пишу все -- можете изменять по своему усмотрению, или удалять всю строку. Я поставил -20рх, потом удалил, потому вернул.
Далее, можно дописать эти строки
Код: box-shadow: 5px 5px 20px #FF0000 !important;
transition: 2000ms cubic-bezier(0.1,0.9,0.5,2.0) !important;
}
.dials-wrapper:not(.dragging-disabled) .dials .dial {
transition: 1000ms cubic-bezier(0.1,0.9,0.5,2.0) !important;
} |
(выше код для тех, кто хочет мелкий мод, но не трогая основной код авторов.)
Здесь мы видим ошибку кодеров Vivaldi . Как мы видим в оригинале
Код: .dials-wrapper:not(.dragging-disabled) .dials .dial:hover,
.dials-wrapper:not(.dragging-disabled) .dials .dial:focus {
|
здесь указано, что класс .dial, с подклассом :hover срабатывает только при условии, что они принадлежат внешним классам .dials и еще .dials-wrapper:not(.dragging-disabled) с каким исключением другого класса .dragging-disabled
тут без бутылки не разберешься. Но если уже квадраты нарисованы классом .dial , то они и остаются этим классом, даже если не указывать ограничение на вложенность многократную . Удаляем все, кроме класса .dial, с подклассом :hover .
Далее, такая же самая хрень, но уже с подклассом :focus. Это подкласс для уже выбранных полей ввода, но принимается и для других случаев (так написано в учебниках) . И вот на этот самый тяжелый случай мы наткнулись в Vivladi . Просто не нужен тут этот класс . Он срабатывает, когда после клика на квадрате мы возвращаемся на эту же страницу Express-Page. Получается, Vivladi запоминает последний выбранный квадрат. Мне нравится, когда программа все помнит, но не в этот раз ! :focus тут вообще не нужен.
Если согласны с этим, то ВМЕСТО оригинала вставляем это:
Код: .dial:hover {
margin-top: -20px;
// transform: rotateY(360deg);
// transform: scale3d(1.2,1.2,1.0);
box-shadow: 5px 5px 20px #FF0000 !important;
transition: 2000ms cubic-bezier(0.1,0.9,0.9,2.0) !important;
}
.dial {
transition: 1000ms cubic-bezier(0.1,0.9,0.9,2.0) !important;
} |
тут // -- это закомментировано и не работает. В надежде, что когда-нить кто-то сможет совместить этот :flex в разметке, и transform:
Далее пояснения для интересующихся, можно не читать.
box-shadow: 5px 5px 20px #FF0000 -- красная тень-подсветка контура ( смещение по X и Y на 5 рх, ширина 20 рх. Падение подсветки рассчитывается методами CSS. Есть еще по Гауссу, еще какая-то , все одинаковые.
Цвет, что душа пожелает . В Yandex "Цвета HTML" -- 256 в кубе расцветок.
transition: 2000ms cubic-bezier(0.1,0.9,0.5,2.0) !important; -- это анимация движения на 2 секунды (можно регулировать), easing (тип движения) самый общий , поэтому самый настраиваемый. Лучше поискать по cubic-bezier . Там типа 1 и 2 точка с координатами, и линия сглаживания по этим точкам. Там все понятно, можно менять. Можно писать стандартные значения (ease, linear, ease-in, ease-out, ease-in-out ... Здесь приблизительно ease-out-back, но сильно круче)
Последняя строка .dial{...} -- без :hover -- тоже движение возврата, когда мыши нет над квадратом.
Что здесь важно:
т.к. transition: указана в чистом виде (относится к им обеим) , без transition: box-shadow или transition: transform, то она относится ко всем анимациям , которые прописаны для класса .dial:hover, даже к тем, которые могут быть прописаны ниже самими разрабами. Поэтому , и перестроения , и перетаскивания квадратов (классы которых я не могу отследить) тоже происходят мягче. После cubic-bezier можно поставить задержку 100ms или 200ms или 500ms. Но это мешает другим квадратам, все на любителя, лучше без нее.
И вот самое главное
!important; -- она отменяет конкурирующие стили, делает эту важнее.
Можно и без нее. Я поудалял все вхождения !important; в файле , но это тоже не помогло.
Но вся мощь CSS на этом не заканчивается. Вообще, поднимать квадраты, меняя их границы -- это бред. Есть команда transform: traslate() для этого. И самое простое и эффектное было бы дописать выше transition это
Код: transform: rotateY(360deg); // вращение вокруг оси Y
transform: scale3d(1.2,1.2,1.0); // увеличение на 20% |
А представьте transform: rotateX(360deg) rotateY(360deg); /* вращение вокруг оси X и оси Y !
Можно менять центр вращения или использовать ось Z, можно со злости отправлять квадраты вообще за границы окна и назад.
И тут все ломается ! Без !important; -- не реагирует. С !important; -- ломается верстка: все собирается в одну кучку, но что-то кутится. Но нам это не надо. Здесь какой-то конфликт стилей. Я даже подозреваю, что это от неграмотной свалки стилей, которые годами пишут стили кусками, в разных местах, разными людьми. Я уже показал выше -- удалить внешние стили, и так все работает. Если добавлять в стиль по 1 строке на протяжении 25500 строк , то бедный комп у себя там все просуммирует, но читать это все ... А потом вы удивляетесь, что Vivaldi валится на ровном месте.
Кроме Transition есть еще и animation, но там используется JavaScript , внешние библиотеки, редактирование HTML. Там допустима многоступенчатая анимация ! Но если даже простая Transition не работает, у меня нет сил еще лезть и в JS.
Это был небольшой экскурс в основы CSS.
Если коллега Capushon подскажет, как отрубить всю анимацию от Vivaldi Team, то можно продолжить. |
Всего записей: 1843 | Зарегистр. 23-09-2007 | Отправлено: 18:53 20-10-2022 | Исправлено: seregadushka, 01:06 23-10-2022 |
|
