0

Есть такой браузер -- Vivaldi. Разрабатывается бывшей командой Opera. Его особенность -- интерфейс на CSS и JS. В этом есть и преимущества, и недостатки. Преимущества -- действительно обладает наивысшей кастомизацией среди браузеров (из известных мне). Недостатки -- следствие того же CSS и JS. Пользователи жалуются на серьезные тормоза интерфейса на слабых ПК. Здесь трудно предъявить что-то разработчикам. И я согласен с ними, что мощность процессоров растет быстрее, чем сложность браузера. Вопрос нестандартный, т.к. я могу разместить только свой предположительный код вопроса. Он работает почти так, как надо. А полный код, и все результаты видны прямо в самом браузере. Могу предложить только видео.

В оригинале эти диалы не носятся по экрану, а стоят на своем месте, там где и должны быть. Там было простое неинтересное смещение на -1 px.

Оригинал:

 .dials {
  display: flex;
  flex: 0 0 auto;
  min-width: 100%;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
}
.dials .dial {
  contain: style;
  outline: 0;
  text-align: left;
  touch-action: none;
  height: var(--backgroundHeight);
  width: var(--thumbnailWidth);
  container-type: inline-size;
  container-name: dial;

.dials-wrapper:not(.dragging-disabled) .dials .dial:hover,
.dials-wrapper:not(.dragging-disabled) .dials .dial:focus {
      margin-top:-1px;}

Оригинал common.css, классы в строке 11867. Видно, что классы выбраны верно.

Вот я изменил, результат на ВИДЕО:.

 .dials-wrapper:not(.dragging-disabled) .dials .dial:hover,
 .dials-wrapper:not(.dragging-disabled) .dials .dial:focus {           
       transform-origin: center center !important;
       transform: rotateY(180deg) !important;
       box-shadow: 5px 5px 20px #FF0000 !important;   
       transition: transform 2s cubic-bezier(0.1,0.9,0.5,2) 1s !important; }  

  .dials-wrapper:not(.dragging-disabled) .dials .dial {
       transition: transform 2s cubic-bezier(0.1,0.9,0.5,2) !important; }

Если оставить оригинальные классы, или удалить только :not(...) -- работает одинаково.

Express Panel, ВИДЕО: Express Panel

Чтобы вам самим проверить результат, надо загрузить браузер, установить его (как любой Chromium, позволяет Portable, т.е. может работать не основным браузером на новой Windows из любой папки), указать Вашу внешнюю папку с собственными стилями, положить в нее свой name.css.

Форум: Modding Vivaldi, как это сделать. Перезапустить, смотреть результат.

Легко сказать -- измени стили и сразу все увидишь. Это если знаешь, что менять.

Страница, Inspecting the Vivaldi UI with DevTools, где показано, как инспектировать, Dev Tools для самого браузера. Покажет названия стилей этой Express Panel.

Вопрос: что еще надо изменить в оригинальном файле стилей, чтобы убрать это паразитное смещение к 1 квадрату ?.

13
  • Вы знаете, что за использование !important; в приличном обществе фронтенд специалистов бьют об монитор лицом? А если серьезно, то ваша проблема явно не связана с самой анимацией на ховер, она связана с тем, что браузер не знает, что есть начальная позиция и по этому пытается вязать к первому элементу классов. Я б дебажел присваивая эффект анимации не на класс а на id. Если мысль правильная и подключая анимацию по айдишникам проблемный эффект пропадает, то думал бы как это обойти. Возможно правильным решением будет написать с примером разработчикам браузера. Commented 21 окт. 2023 в 18:32
  • понятно, что правильно обсуждать это на их форуме. Но этот вопрос там как-то не зашел. Тем более, все модификации разрабы воспринимают как нарушение лицензии. Там не понятно -- на форуме есть целый раздел "моддинг", все меняют что захотят. Но за собственный Portable (люди уже свои DLL клепают) там банят. Их не поймешь. Разрабы там не отвечают. Там все, кто имеют шильдик "Team" к программированию не относятся никак :). Больше трепотни, результата 0.
    – serega da
    Commented 21 окт. 2023 в 18:53
  • я думаю, будет и без !important работать, если удалить оригинальные стили. Просто мне не понятен механизм. Вроде бы я ничего не изменил, но именно transform: rotate() убивает позиционирование. Мне там на форуме ответили "здесь все на flex, сделать ничего нельзя " :) Как-то слабо верится. Тем более, уже половина работы сделана.
    – serega da
    Commented 21 окт. 2023 в 18:58
  • У вас перегружены классами вызовы... попробуйте избавиться от родительских. Может браузер как-то на них реагирует. .dial . Плюс... уберите всё то что не меняеться из :hover, :focus в .dial ... В :hover, :focus надо оставлять только то что изменяеться от базового. Commented 21 окт. 2023 в 19:06
  • нет , без !important не работает. Без него никак :) . И угрозы монитором не помогут. Если оставить только внутренние классы .dial:hover, :focus {} работает точно так же, даже быстрее.
    – serega da
    Commented 21 окт. 2023 в 19:29

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Посмотрите другие вопросы с метками или задайте свой вопрос.