Vivaldi Forum mod
-
@luetage I didn't test other variables than this one. But it's still something that
should beusually is highlighted. -
@potmeklecbohdan Fg is a foreground color, just like hi, link and link2. All are valid since they have enough contrast to the background.
-
Please try this:
/* progress */ #nprogress .spinner-icon { border-top-color: var(--colorHi); border-left-color: var(--colorHi); opacity: 0.66; } #nprogress .bar { background: var(--colorHi); opacity: 0.66; } #nprogress .peg { box-shadow: 0 0 10px var(--colorHi), 0 0 5px var(--colorHi); }
It's a bit toned down – I believe it's a working solution and we would still be using the highlight color on the progress bar with matching spinner.
-
@luetage Nice, that can be.
I forgot there's the spinner because it's invisible… when I was looking for it now I found it behind the profile image. So thanks for changing also its colour.
-
This is my theme. I have simplified things to just remain blue and black
{"themeName":"Night Blue","colorBg":"#212930","colorFg":"#b3b3b3","colorHi":"#1c5ed7","colorBtn":"#1546a3","colorDrop":"#212930","colorLi":"#1080fb","colorLi2":"#3b97fc"}
It is use with User CSS
#submenu { background-color: var(--colorBtn); border-bottom-color: var(--colorBtnHi); } #submenu li>a { color: var(--colorBtnFg); } #submenu a:focus, #submenu a:hover { background-color: var(--colorBtnHi); color: var(--colorBtnFg); } #submenu li.active>a { background-color: var(--colorHi); color: var(--colorHiFg); }
-
@tam710562 Good one. What I recently thought about was introducing an extra class for the used theme in the body, so we can have all the additional user css we want and it is only active when the theme is in use.
So for example
.night-blue #submenu { background-color: var(--colorBtn); border-bottom-color: var(--colorBtnHi); }
would only trigger when Night Blue is in use.
-
@luetage Good idea. But… Wouldn't it be better case sensitive? And do you know how to make difference among e. g.
Night Blue
,Night-Blue
andNight_Blue
? -
@potmeklecbohdan CSS selectors are case insensitive as far as I know. Spaces will of course be replaced with another character, since you can't have a space in a selector. As for
_
versus-
… that's naturally a difference. What I'm pondering is adding acustom
in front of custom themes, to make sure no theme name can interfere with an existing selector. All things to be considered. -
@luetage you can use classes that even have characters like space and
#
in them, but then you need to escape them like\#
and it isn't always well supported. Replacing it with a_
seems like the best bet -
@luetage That's very, very, very, very, very sad. Only
custom
, nottheme-custom
? -
@potmeklecbohdan
-
I'm doing another rewrite of the settings right now. It's already taking longer than expected. Above mentioned changes have been implemented, but there's more to do – can't give an ETA.
But rest assured – the update is coming s0oN and getting closer every day. Just be patient already and stop pushing me sigh. So much pressure. Also there's been easter holidays and team building exercises – after which we unfortunately had to let Johnny go, because he ate all the nachos.
-
@luetage I wonder if the new version can have more than 4 themes, the best is unlimited and can install themes directly from the forum.
-
@tam710562 Damn, you spoiled the surprise. Yeah, new version has "unlimited" custom themes. It's not really unlimited though, since sync storage has a limit of 100kb.
-
test post
{"themeName":"Blau","colorBg":"#23273b","colorFg":"#d4efff","colorHi":"#ffffff","colorBtn":"#68a2f2","colorDrop":"#d4efff","colorLi":"#96ffe0","colorLi2":"#d5d0fc"}
{"themeName":"Dracula","colorBg":"#282a36","colorFg":"#f8f8f2","colorHi":"#e2d774","colorBtn":"#6176a5","colorDrop":"#455182","colorLi":"#f279d0","colorLi2":"#8ce2f6"}
{"themeName":"MOR","colorBg":"#1d2225","colorFg":"#d2e0d1","colorHi":"#6bcdff","colorBtn":"#94ade6","colorDrop":"#1a2625","colorLi":"#ff6699","colorLi2":"#b1b3f0"}
{"themeName":"blackout","colorBg":"#000000","colorFg":"#000000","colorHi":"#000000","colorBtn":"#000000","colorDrop":"#000000","colorLi":"#000000","colorLi2":"#000000"}
-
That's my current theme
Modifications + Custom theme + UserCSS*.
{"themeName":"Stardust","colorBg":"#170706","colorFg":"#ffd4e4","colorHi":"#894e56","colorBtn":"#775b62","colorDrop":"#1b0806","colorLi":"#97797d","colorLi2":"#fcf6e0"}
Backgrond image: Transparent textures, «Stardust» by Atle Mo.
*I grabbed the CSS code in Dark Grey Theme by @sjudenim.
-
User CSS to add user status to the avatar in the header
#user-control-list .status[component="user/status"]:after { content: "\f111"; top: -45px; right: 4px; position: absolute; visibility: visible; pointer-events: none; } #user_label .dropdown-menu { display: block; visibility: hidden; } #user_label.open > .dropdown-menu { visibility: unset; }
-
@hlehyaric When you put the code on a line on its own you get a preview.
{"themeName":"Stardust","colorBg":"#170706","colorFg":"#ffd4e4","colorHi":"#894e56","colorBtn":"#775b62","colorDrop":"#1b0806","colorLi":"#97797d","colorLi2":"#fcf6e0"}
Furthermore I'm not sure how to recreate the theme, if you don't share the CSS code. But maybe that's just me
-
@luetage Here's the code
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--main-bg); color: #ffd4e4 !important; background-image: url("https://www.transparenttextures.com/patterns/stardust.png"); } .body { background: var(--main-bg) !important; overflow-x: hidden; } #content { background: transparent; border-radius: 20px !important; border: none; box-shadow: none; padding: 25px 40px 0 !important; } #vivaldiheader { background-color: #170706 !important; background-image: url("https://www.transparenttextures.com/patterns/stardust.png"); border: none; border-radius: 0px; box-shadow: none; } #vivaldimenu a.has-submenu:hover { color: #b56872; margin-top: -8px; padding-top: 13px; height: 50px; } #vivaldiheader a, #vivaldiheader a:active, #vivaldiheader a:focus, #vivaldiheader a:visited { color: #ffd7e5; } #vivaldimenu a.current, #vivaldiheader a.current:hover { color: #f18a97; } a.dropdown-toggle:focus, a.dropdown-toggle img:focus, a.dropdown-toggle:active, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>li>a:hover { background-color: transparent !important; color: #97797d !important; border: none; border-radius: 10px; } a.dropdown-toggle:focus, a.dropdown-toggle img:focus, a.dropdown-toggle:active, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { background-color: transparent; border: none; border-radius: 10px; color: #b56872 !important; } #vivaldimenu a .sub-arrow {display: none} .unread-count:after { position: absolute; left: 23px; top: 10px; text-align: center; font-size: .9em; border: 0; color: #ffccd4; background: transparent; } #vivaldimenu ul a { color: #ffc8cf; } #vivaldimenu ul a:hover { background: #ffeff6; color: #412d38; border-radius: 5px !important; } .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, button.btn.btn-link:hover { background: #f18a97; color: #f5b0c4; border-radius: 5px; } .dropdown-menu { margin: 0; } .dropdown-menu>.top-divider { margin: -5px; } .dropdown-menu>.bottom-divider { margin: 0; } .header .notif-dropdown-link { border-top: 1px solid #f5b0c4; } li.divider { background-color: #f5b0c4 !important; margin: 5px 10px !important; } .dropdown-menu>li>a { padding: 1px 13px; line-height: 2.5; } /** Submenu **/ #submenu { background-color: #170706 !important; background-image: url("https://www.transparenttextures.com/patterns/stardust.png"); box-shadow: none; border: none; } #submenu a { color: #ffc8cf !important; } #submenu a:focus, #submenu a:hover, #submenu li.active>a:hover, #submenu li.active>a { background-color: #775b62; color: #170706 !important; border-radius: 10px; } span.visible-xs-inline.showmenutext:not(.slideout-menu) { display: none !important; } .categories>li .content .icon, .category>ul>li .content .icon { border-radius: 50%; } .categories>li:hover, .category>ul>li:hover { background-color: transparent !important; border-radius: 0px; } .categories>li, .category>ul>li { border-bottom: 1px solid #775b62; padding-bottom: 20px; } .categories>li:last-of-type, .category>ul>li:last-of-type { border-bottom: 1px solid var(--second-bg); padding-bottom: 25px; } .taskbar .navbar-nav li.taskbar-composer a, .taskbar .navbar-nav li.taskbar-composer a:active, .taskbar .navbar-nav li.taskbar-composer a:focus, .taskbar .navbar-nav li.taskbar-composer a:hover, button.fab.dropdown-toggle { background: #b56872; } #vivaldifooter a { background: transparent; color: #f5b0c4; } .topic .votes [component="post/upvote"].upvoted { background-color: #4caf50 !important; color: #fbfbfb !important; } .topic .votes [component="post/downvote"].downvoted { background-color: #ef3939 !important; color: #fbfbfb !important; } #nprogress .bar { background: var(--colorFg); } #nprogress .peg { box-shadow: 0 0 10px var(--colorHi), 0 0 5px var(--colorHi); }
I posted my theme as an example and a personal attempt in using VF mod. I didn't think someone would like to really try it.
-
@luetage said in Vivaldi Forum mod:
Following languages have been released and are being worked on actively: French, German, Italian, Spanish, Vietnamese. Wanna help out? You can by deciding to.
OK, I began to work on Russian localization. When it's done, I will talk with my friends and maybe they will translate it into Ukrainian and Belarussian (these are very similar languages and if you have RU almost everyone can translate it into UA and BY).
UPD
Done! This is RU-file:{ "bookmarks": { "message": "Закладки", "description": "Link to bookmarks page from navigation bar" }, "signature": { "message": "Подписи", "description": "Signature toggle for forum posts" }, "copyCode": { "message": "Копировать код", "description": "Copy all code button for code markdown" }, "lastModified": { "message": "Последнее редактирование", "description": "Text before last edit timestamp in forum posts" }, "optionsLink": { "message": "Модификации", "description": "Link to options page in user dropdown menu. Probably no translation needed? Decide depending on language" }, "editCommunity": { "message": "Настройки профиля", "description": "Link to community settings in user dropdown menu" }, "editForum": { "message": "Редактировать профиль", "description": "Link to forum settings in user dropdown menu" }, "dismiss": { "message": "Отключить", "description": "Dismisses community notifications" }, "emoticons": { "message": "Смайлики", "description": "Title of formatting item for emote picker" }, "header": { "message": "Заголовок", "description": "Title of formatting item header 1" }, "horizontal_line": { "message": "Горизонтальная линия", "description": "Title of formatting item horizontal rule" }, "block_quote": { "message": "Цитата", "description": "Title of formatting item quote" }, "code": { "message": "Выделить код", "description": "Title of formatting item fixed width font" }, "table": { "message": "Таблица", "description": "Title of formatting item table" }, "number_list": { "message": "Пронумерованный", "description": "Title of formatting item numbered list" }, "spoiler": { "message": "Спойлер", "description": "Title of formatting item spoiler" }, "customToolbarTitle": { "message": "Настройки панели инструментов", "description": "Title of custom toolbar editor" }, "dragText": { "message": "Нажмите и удерживайте, чтобы перетащить", "description": "Hover text when on a draggable area" }, "themes": { "message": "Темы", "description": "Options: Title of themes section" }, "modifications": { "message": "Модификации", "description": "Options: Title of modifications section" }, "info": { "message": "Информация", "description": "Options: Title of info section" }, "feedback": { "message": "Обратная связь", "description": "Options: Feedback link in navigation" }, "communityThemes": { "message": "Темы от сообщества", "description": "Options: Community themes headline" }, "themeMachine": { "message": "Выбор темы", "description": "Options: Theme machine headline" }, "background": { "message": "Background", "description": "Options: Theme machine edit background" }, "foreground": { "message": "Foreground", "description": "Options: Theme machine edit foreground" }, "highlight": { "message": "Highlight", "description": "Options: Theme machine edit highlight" }, "button": { "message": "Button", "description": "Options: Theme machine edit button" }, "dropdown": { "message": "Dropdown", "description": "Options: Theme machine edit dropdown" }, "link": { "message": "Link", "description": "Options: Theme machine edit link" }, "link2": { "message": "Link 2", "description": "Options: Theme machine edit link2" }, "selectModifications": { "message": "Выбор модификаций", "description": "Options: Modifications headline" }, "advancedFormatting": { "message": "Расширенное форматирование", "description": "Options: Title of advanced formatting mod" }, "advancedFormattingDesc": { "message": "Добавляет дополнительные кнопки форматирования и смайлики. Позволяет перетаскивать, удалять и добавлять новые кнопки форматирования текста на форуме.", "description": "Options: Description of the advanced formatting mod" }, "hideHeader": { "message": "Автоматически скрывать шапку сайта при прокрутке", "description": "Options: Title of auto-hide header on scroll mod" }, "hideHeaderDesc": { "message": "Скрывает шапку сайта при прокрутке страницы вниз, показывает её при прокрутке вверх.", "description": "Options: Description of auto-hide header on scroll mod" }, "navbookmarks": { "message": "Закладки на панели навигации", "description": "Options: Title of bookmarks in navigation mod" }, "navbookmarksDesc": { "message": "Отображает ссылку на страницу закладок прямо на панели навигации.", "description": "Options: Description of bookmarks in navigation mod" }, "compactHeader": { "message": "Компактная шапка сайта", "description": "Options: Title of compact header mod" }, "compactHeaderDesc": { "message": "Уменьшает высоту шапки сайта и удаляет некоторые лишние ссылки.", "description": "Options: Description of compact header mod" }, "customNotification": { "message": "Настраиваемые иконки уведомлений", "description": "Options: Title of custom notification icons mod" }, "customNotificationDesc": { "message": "Добавляет иконки в заголовок уведомлений, чтобы вы могли легко отличить один тип уведомлений от другого.", "description": "Options: Description of custom notification icons mod" }, "hideTooltips": { "message": "Скрыть подсказки", "description": "Options: Title of hide tooltips mod" }, "hideTooltipsDesc": { "message": "Скрывает подсказки меню входа.", "description": "Options: Description of hide tooltips mod" }, "hideUnread": { "message": "Скрыть счётчик непрочитанных сообщений", "description": "Options: Title of hide unread count mod" }, "hideUnreadDesc": { "message": "Скрывает счётчик непрочитанных сообщений с панели навигации", "description": "Options: Description of unread count mod" }, "timestamp": { "message": "Отметка о последнем редактировании", "description": "Options: Title of last edit timestamp mod" }, "timestampDesc": { "message": "Отображает время последнего редактирования под всеми отредактированными сообщениями.", "description": "Options: Description of last edit timestamp mod" }, "showUID": { "message": "Показывать ID пользователей", "description": "Options: Title of show user IDs mod" }, "showUIDDesc": { "message": "Показывает ID пользователя при наведении курсора на его ник в заголовке комментария или аватарку на странице профиля.", "description": "Options: Description of show user IDs mod" }, "signatureMod": { "message": "Скрыть подписи", "description": "Options: Title of signature mod" }, "signatureModDesc": { "message": "Скрывает подписи к сообщениям и заменяет их отдельной кнопкой.", "description": "Options: Description of signature mod" }, "squareAvatars": { "message": "Квадратные аватарки", "description": "Options: Title of square avatars mod" }, "squareAvatarsDesc": { "message": "Только квадратны, только хардкор!", "description": "Options: Description of square avatars mod" }, "userCSS": { "message": "Пользовательские CSS", "description": "Options: User CSS headline" }, "userCSSDesc": { "message": "Вводите только CSS-код! Нажмите ПРИМЕНИТЬ, чтобы активировать/деактивировать код, СОХРАНИТЬ, чтобы сохранить изменения, и КОПИЯ, чтобы создать резервную копию. Если хотите создать собственную тему, сперва выберите СТАНДАРТНУЮ тему в настройках.", "description": "Options: User CSS placeholder/description" }, "changelog": { "message": "Список изменений", "description": "Options: Changelog headline" }, "credits": { "message": "Участники", "description": "Options: Credits headline" }, "save": { "message": "Сохранить", "description": "Options: Text to show on a button that performs some sort of save operation" }, "edit": { "message": "Редактировать", "description": "Options: Text to show on a button that performs some sort of edit operation" }, "toggle": { "message": "Применить", "description": "Options: Switch on or off" }, "backup": { "message": "Копия", "description": "Options: Text to show on a button that performs some sort of backup operation" }, "import": { "message": "Импорт", "description": "Options: Text to show on a button that performs some sort of import operation" }, "cancel": { "message": "Отмена", "description": "Options: Text to show on a button that performs some sort of cancel operation" }, "export": { "message": "Экспорт", "description": "Options: Text to show on a button that performs some sort of export operation." }, "reset": { "message": "Сброс", "description": "Options: Text to show on a button that performs some sort of reset operation" }, "confirmReset": { "message": "Сбросить настройки расширения? Нажмите ещё раз, чтобы подтвердить решение.", "description": "Options: Status message to confirm reset" }, "cancelReset": { "message": "Сброс настроек отменён.", "description": "Options: Status message after cancelled reset" }, "cancelImport": { "message": "Импорт отменён.", "description": "Options: Status message after cancelled import" }, "optionsReset": { "message": "Настройки сброшены, хранилище данных очищено.", "description": "Options: Status message after reset" }, "activateUserCSS": { "message": "Пользовательские CSS активированы.", "description": "Options: Status message for User CSS activation" }, "deactivateUserCSS": { "message": "Пользовательские CSS деактивированы.", "description": "Options: Status message for User CSS deactivation" }, "saveUserCSS": { "message": "Пользовательские CSS сохранены.", "description": "Options: Status message for saving User CSS to storage" }, "saveTheme": { "message": "Тема сохранена и активирована.", "description": "Options: Status message for theme activation" }, "exportTheme": { "message": "Код темы скопирован в буфер обмена.", "description": "Options: Status message for exporting theme" }, "importThemeDesc": { "message": "Вставьте или перетащите код темы в поле импорта.", "description": "Options: Status message describing theme import" }, "importTheme": { "message": "Тема импортирована. Нажмите СОХРАНИТЬ, чтобы её сохранить.", "description": "Options: Status message confirming theme import" }, "statusThemes": { "message": "Выберите тему или создайте собственную.", "description": "Options: Status message themes" }, "statusModifications": { "message": "Наведите курсор на модификацию, чтобы прочитать её описание", "description": "Options: Status message modifications" }, "statusInfo": { "message": "Огромное спасибо всем нашим пользователям и участникам!", "description": "Options: Status message info" } }
Let me know if someone see mistakes...