Как получить штатные цвета стандартных элементов системы
Модератор: immortal
- Bagir
- Сообщения: 1613
- Зарегистрирован: Вт сен 17, 2013 6:46 pm
- Откуда: Ярославская область город Углич
- Благодарил (а): 212 раз
- Поблагодарили: 375 раз
Как получить штатные цвета стандартных элементов системы
Занялся работой над шаблонами классов. Хочется делать элементы, схожие по стилю оформления со штатными элементами системы. Можно ли как то сослаться на штатные классы, отвечающие за оформление? Ну или хотя бы получить значения цветов. Рамки, фон, цвета заливки выключателей, цвет текста, и т.п.
- Divan
- Сообщения: 859
- Зарегистрирован: Пн июл 08, 2019 5:04 pm
- Благодарил (а): 117 раз
- Поблагодарили: 280 раз
Re: Как получить штатные цвета стандартных элементов системы
Вы можете посмотреть мои темы здесь и здесь. Я сделал их настраиваемыми. Можете скачать, открыть сцену и посмотреть код, а именно стили. Как поймете, как это делать, то сможете сделать для себя так, как вам нужно.
Xpenology DSM 6.2.2 + Ubuntu Server 18.10 + Majordomo + MariaDB
- Bagir
- Сообщения: 1613
- Зарегистрирован: Вт сен 17, 2013 6:46 pm
- Откуда: Ярославская область город Углич
- Благодарил (а): 212 раз
- Поблагодарили: 375 раз
Re: Как получить штатные цвета стандартных элементов системы
Очень красиво, просто полностью новые стили, классно. У меня конечно были мысли по скромнее. Я просто хотел использовать стандартный стиль элементов и родные цвета, чтобы мои элементы наоборот не выделялись среди штатных. Пока что увы нет времени делать нечто подобное. Ещё очень много своих "хотелок" нужно реализовать. Поэтому я использую стандартные элементы управления.
После изучения увеличенного скриншота штатных элементов, я попытался повторить нечто подобное в шаблонах классов. Как выяснилось, там совсем не просто наложены слои с размытым фоном и четкими рамками. Обратите внимание на выключатели и одно поле с температурой. Вот что получилось:
После изучения увеличенного скриншота штатных элементов, я попытался повторить нечто подобное в шаблонах классов. Как выяснилось, там совсем не просто наложены слои с размытым фоном и четкими рамками. Обратите внимание на выключатели и одно поле с температурой. Вот что получилось:
- Вложения
-
- Моя подделка :)
- thrm.png (15.87 КБ) 2325 просмотров
-
- Штатный инструмент для сравнения
- std.png (2.03 КБ) 2325 просмотров
- Divan
- Сообщения: 859
- Зарегистрирован: Пн июл 08, 2019 5:04 pm
- Благодарил (а): 117 раз
- Поблагодарили: 280 раз
Re: Как получить штатные цвета стандартных элементов системы
Это в боковом меню так? - хорошо получилось. Если не поленитесь, то прошу выкладывать подобные решения, а еще завести тему в рубрике "Дизайн", чтобы все интересные идеи были в одном месте и не бродить по всему форуму и собирать по крупицам.
Xpenology DSM 6.2.2 + Ubuntu Server 18.10 + Majordomo + MariaDB
- Bagir
- Сообщения: 1613
- Зарегистрирован: Вт сен 17, 2013 6:46 pm
- Откуда: Ярославская область город Углич
- Благодарил (а): 212 раз
- Поблагодарили: 375 раз
Re: Как получить штатные цвета стандартных элементов системы
Это шаблон класса. Можно использовать не только в боковом меню, а где угодно. Достаточно просто указать объект при выборе типа элемента. Это очень удобно. Наработки обязательно выложу, сейчас ещё решаю вопрос с кодом.
Я изучил штатные элементы под увеличением.
Суть такая:
Рисуем рамку; размываем её; сдвигаем на пиксель вниз. Опять рисуем рамку без размытия. Обрезаем по краям. Вот пример кода: Ситуация следующая. Если все элементы имеют одинаковый width и height, то можно оставить так, но если нет, то придется делать несколько clipPath т.к. там прописаны размеры для обрезки width="60" height="35", а это трудозатратно. Должен быть способ проще.
В итоге проблема вот в чем: Как размыть рамку (rect) с закругленными краями (rx="4" ry="4") только во внутрь? Когда я для рамки использую feGaussianBlur, то фильтр добавляет размытие и во внутрь и наружу. А нужно только во внутрь. Этого можно избежать, указав размеры 0 0 0 0. По умолчанию <filter x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox">. Но на закругленных краях размытие всё равно выйдет наружу, т.к. запрещая фильтру работать за пределами размера, мы всё равно задаем ему прямоугольник. Поэтому и приходится обрезать при помощи clipPath, и тут снова требуется область с размерами.
Хочется этого избежать чтобы облегчить и упростить html код.
Я изучил штатные элементы под увеличением.
Суть такая:
Рисуем рамку; размываем её; сдвигаем на пиксель вниз. Опять рисуем рамку без размытия. Обрезаем по краям. Вот пример кода:
Код: Выделить всё
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" version="1.1">
<defs>
<filter id="fg152620">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<clipPath id="cut152620" >
<rect x="0" y="0" rx="4" ry="4" width="60" height="35" />
</clipPath>
</defs>
<g transform="translate(20,15)">
<rect x="0" y="1" rx="4" ry="4" width="60" height="35"fill="none" stroke="#999999" stroke-width="1" filter="url(#fg152620)" clip-path="url(#cut152620)"/>
<rect x="0" y="0" rx="4" ry="4" width="60" height="35" fill="none" stroke="#dddddd" stroke-width="1"
</g>
</svg>
В итоге проблема вот в чем: Как размыть рамку (rect) с закругленными краями (rx="4" ry="4") только во внутрь? Когда я для рамки использую feGaussianBlur, то фильтр добавляет размытие и во внутрь и наружу. А нужно только во внутрь. Этого можно избежать, указав размеры 0 0 0 0. По умолчанию <filter x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox">. Но на закругленных краях размытие всё равно выйдет наружу, т.к. запрещая фильтру работать за пределами размера, мы всё равно задаем ему прямоугольник. Поэтому и приходится обрезать при помощи clipPath, и тут снова требуется область с размерами.
Хочется этого избежать чтобы облегчить и упростить html код.
- Bagir
- Сообщения: 1613
- Зарегистрирован: Вт сен 17, 2013 6:46 pm
- Откуда: Ярославская область город Углич
- Благодарил (а): 212 раз
- Поблагодарили: 375 раз
Re: Как получить штатные цвета стандартных элементов системы
Предполагаю, что искать мне надо где то в направлении clip-path geometry-box stroke-box, но не могу найти примера