LINUX.ORG.RU

Помогите с userChrome

 , ,


0

1

После какого-то из обновлений громоптицы, прочитанные письма от непрочитанных стало очень сложно отличать, т.к. у непрочитанных отправитель стал тоже отображаться bold'ом.

Решил попробовать это исправить с помощью кастомного userChrome.css, но поскольку я балда и в css ничего не понимаю, то у меня ничего не выходит.

Нашел в инструментах разработчика следующий путь:

#threadTree {	 
  & .card-layout {
    & td {
      & .card-container {
        & .sender {
          font-weight: normal !important ;
          color : red !important;
          font-size: 0.95rem;
        }
      }
    }
 }
}

И оно даже работает, но оно меняет стили не только для прочитанного заголовка, но и для непрочитанного.

Попробовал добавить в путь к css самостоятельно условие(добавлял в разные позиции), что это только для прочитанной почты, но всё ломается.

#threadTree {	 
  & .card-layout {
    & tr[data-properties~="read"] {
    & td {
      & .card-container {
        & .sender {
          font-weight: normal !important ;
		  color : red !important;
          font-size: 0.95rem;
        }
      }
    }
 }
  }
}

Хотя, если использовать tr вот так, то работает

#threadTree tr[data-properties~="read"] 
{
color: red !important;
}

но отсюда не знаю как добраться до элемента .sender

Взываю к помощи всезнающего ЛОРа, потому как смотреть на список писем в таком виде, мучительно больно.

★★★★★

Последнее исправление: Loki13 (всего исправлений: 1)

Второй блок выглядит вполне логично - непонятно, почему «всё ломается».
С третьим если «работает» непонятно, что ещё надо :) Чтобы красным цветом только элементы с классом «sender» были?
Ну, добавить «.sender» в конец правила через пробел - и всё:

#threadTree tr[data-properties~="read"] .sender
{
color: red !important;
}
PeleWin
()
Ответ на: комментарий от PeleWin

«Всё ломается» это значит, что css перестает применятся.

А с третьим применяется не только к sender, но и ко всем остальным элементам. Но это ещё пол беды, там проблема, что вот тот bold из td(.sender) лежащего ниже, переопределяет то, что я ставлю в tr.

Я когда вот так пишу

#threadTree tr[data-properties~="read"] 
{
color: orange !important;
font-weight: normal !important ; 
}

То цвет становится оранжевым, а Sender всё равно остается жирным. Я так думаю, что это потому, что правила td(.sender) срабатывает после правила tr.

Надо как-то к прочитанным(read) td применить правило.

Loki13 ★★★★★
() автор топика
Последнее исправление: Loki13 (всего исправлений: 1)
Ответ на: комментарий от Loki13
  1. Можно (если получится) удалить «вот тот bold из td(.sender)».
  2. Кроме очерёдности расположения правил на приоритет правила влияет количество селекторов в правиле, так что, можно добавить бесполезных, но правильных селекторов в нужное правило, например:
#threadTree .card-layout tr[data-properties~="read"] td .card-container .sender {
  font-weight: normal !important ;
  color : red !important;
}
PeleWin
()
Последнее исправление: PeleWin (всего исправлений: 1)

Путём вдумчивого чтения файла threadCard.css, в итоге нашел решение. Может кому будет полезно.

#threadTree {
  & .card-layout {
	 &[data-properties~="read"] {
    & td {
      & .card-container {
        & .sender {
          font-weight: normal !important ;
          font-size: 0.95rem;
        }
      }
    }
  }
 }
}
Loki13 ★★★★★
() автор топика