From c5300fa1ba102ecc2fa0615c8bfb99e09387c14c Mon Sep 17 00:00:00 2001 From: TwitchisMental <98340766+TwitchisMental@users.noreply.github.com> Date: Sat, 10 Feb 2024 17:49:56 -0700 Subject: [PATCH 001/115] Initial theme upload Co-authored-by: John Rayes --- Themes/default/BoardIndex.template.php | 80 +- Themes/default/MessageIndex.template.php | 19 +- Themes/default/css/admin.css | 68 +- Themes/default/css/attachments.css | 15 +- Themes/default/css/calendar.css | 67 +- Themes/default/css/custom.css | 787 ++++++ Themes/default/css/index.css | 3222 +++++++++++++++------- Themes/default/css/index_dark.css | 617 +++++ Themes/default/css/responsive.css | 45 +- Themes/default/css/slider.min.css | 6 +- Themes/default/index.template.php | 163 +- 11 files changed, 3866 insertions(+), 1223 deletions(-) create mode 100644 Themes/default/css/custom.css create mode 100644 Themes/default/css/index_dark.css diff --git a/Themes/default/BoardIndex.template.php b/Themes/default/BoardIndex.template.php index 8fc27aa72b..97b4cdfb72 100644 --- a/Themes/default/BoardIndex.template.php +++ b/Themes/default/BoardIndex.template.php @@ -34,7 +34,10 @@ function template_newsfader() if (!empty(Theme::$current->settings['show_newsfader']) && !empty(Utils::$context['news_lines'])) { echo ' - '; echo ' - ', template_menu(), ' From d9c884625d068c5113dafbf269f2d77fa3c906ce Mon Sep 17 00:00:00 2001 From: John Rayes Date: Fri, 8 Dec 2023 19:51:02 -0700 Subject: [PATCH 009/115] Delete Themes/default/scripts/editor.js --- Themes/default/scripts/editor.js | 47 -------------------------------- 1 file changed, 47 deletions(-) delete mode 100644 Themes/default/scripts/editor.js diff --git a/Themes/default/scripts/editor.js b/Themes/default/scripts/editor.js deleted file mode 100644 index a528337391..0000000000 --- a/Themes/default/scripts/editor.js +++ /dev/null @@ -1,47 +0,0 @@ -// *** smc_Editor class. -/* - Kept for compatibility with SMF 2.0 editor - */ -function smc_Editor(oOptions) -{ - this.opt = oOptions; - - var editor = $('#' + oOptions.sUniqueId); - this.sUniqueId = this.opt.sUniqueId; - this.bRichTextEnabled = true; -} - -// Return the current text. -smc_Editor.prototype.getText = function(bPrepareEntities, bModeOverride) -{ - var e = $('#' + this.sUniqueId).get(0); - return sceditor.instance(e).getText(); -} - -// Set the HTML content to be that of the text box - if we are in wysiwyg mode. -smc_Editor.prototype.doSubmit = function() -{} - -// Populate the box with text. -smc_Editor.prototype.insertText = function(sText, bClear, bForceEntityReverse, iMoveCursorBack) -{ - var e = $('#' + this.sUniqueId).get(0); - sceditor.instance(e).InsertText(sText.replace(/
/gi, ''), bClear); -} - -// Start up the spellchecker! -smc_Editor.prototype.spellCheckStart = function() -{ - if (!spellCheck) - return false; - - var e = $('#' + this.sUniqueId).get(0); - - sceditor.instance(e).storeLastState(); - // If we're in HTML mode we need to get the non-HTML text. - sceditor.instance(e).setTextMode(); - - spellCheck(false, this.opt.sUniqueId); - - return true; -} From 44aa141ca9d4d05716b7633df56f9df20300f8f3 Mon Sep 17 00:00:00 2001 From: John Rayes Date: Fri, 8 Dec 2023 19:53:14 -0700 Subject: [PATCH 010/115] Update index.css --- Themes/default/css/index.css | 784 ----------------------------------- 1 file changed, 784 deletions(-) diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 824fc7a9b2..edc9873862 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -4687,787 +4687,3 @@ input:checked + .slider:before { font-weight: 700; font-family: "Font Awesome 6 Free"; } - -/** - * @package Theme Customs - * @author Diego Andrés - * @copyright Copyright (c) 2023, SMF Tricks - * @license MIT - */ - -/* Replace SMF Icons */ -.main_icons::before, -h3.profile_hd::before, -.large_admin_menu_icon::before { - font-family: "Font Awesome 6 Free"; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - font-weight: 900; - background: none !important; - width: auto; - height: auto; - font-size: 0.95em; - margin: 0; - vertical-align: top; -} -/* Menu Icons Adjustment */ -.dropmenu .main_icons::before, #profile_menu .main_icons::before, .dropmenu img { - margin: -3px 8px 0 0; - vertical-align: middle; -} -/* Bigger Icons */ -.large_admin_menu_icon::before { - font-size: 2.5em; - width: auto !important; - height: auto !important; -} -/* Remove height and width? */ -h3.profile_hd::before, -.main_icons.profile_hd::before { - width: auto; - height: auto; -} -/* don't center these icons.... */ -.main_icons.centericon, -h3.catbg .icon { - vertical-align: top; -} - -/* Search */ -.main_icons.search::before, -.large_admin_menu_icon.search::before { - content: "\f002"; -} -/* Seach Engines */ -.main_icons.engines::before, -.large_admin_menu_icon.engines::before { - content: "\f00e"; -} -/* Check */ -.main_icons.check::before, -.main_icons.valid::before, -.fa-solve_topic::before { - content: "\f00c"; -} -/* Invalid */ -.main_icons.invalid::before, -.fa-warn_button::before, -.main_icons.warn_button::before { - content: "\f071"; -} -/* Gender 1 */ -.main_icons.gender_1::before { - content: "\f222"; -} -/* Gender 2 */ -.main_icons.gender_2::before { - content: "\f221"; -} -/* Watch */ -.main_icons.watch::before, -.main_icons.topics_views::before, -.main_icons.views::before { - content: "\f06e"; -} -/* Next Page */ -.main_icons.next_page::before { - content: "\f061"; -} -/* Previous Page */ -.main_icons.previous_page::before { - content: "\f060"; -} -/* Boards */ -.main_icons.boards::before, -.large_admin_menu_icon.boards::before, -.fa-forum::before, -.main_icons.menu_tpforum::before { - content: "\f07c"; -} -/* General */ -.main_icons.general::before, -.fa-forum_stats::before { - content: "\f200"; -} -/* Features */ -.main_icons.features::before { - content: "\f03a"; -} -/* Security */ -.main_icons.security::before, -.large_admin_menu_icon.security::before { - content: "\f544"; -} -/* Posters */ -.main_icons.posters::before { - content: "\f091"; -} -/* Replies */ -/* Im On */ -.main_icons.replies::before, -.main_icons.topics_replies::before { - content: "\f4ad"; -} -/* History */ -.main_icons.history::before { - content: "\f1da"; -} -/* Time Online */ -.main_icons.time_online::before { - content: "\f253"; -} -/* Scheduled */ -.main_icons.scheduled::before, -.large_admin_menu_icon.scheduled::before { - content: "\f017"; -} -/* Last Post */ -.main_icons.last_post::before { - content: "\f051"; -} -/* Starters */ -.main_icons.starters::before { - content: "\f507"; -} -/* Membergroups */ -.main_icons.membergroups::before, -.large_admin_menu_icon.membergroups::before, -.fa-team::before, -.main_icons.team::before { - content: "\f509"; -} -/* Www */ -.main_icons.www::before { - content: "\f57d"; -} -/* Switch */ -.main_icons.switch::before { - content: "\f074"; -} -/* Replied */ -.main_icons.replied::before { - content: "\f4fd"; -} -/* Send */ -.main_icons.send::before { - content: "\f14d"; -} -/* Im On */ -.main_icons.profile_sm::before, -.main_icons.im_on::before { - content: "\f4ff"; -} -/* Im Off */ -.main_icons.im_off::before { - content: "\f27a"; -} -/* Split DeSelect */ -.main_icons.split_desel::before { - content: "\f359"; -} -/* Split Select */ -.main_icons.split_sel::before { - content: "\f35a"; -} -/* Mail */ -.main_icons.mail::before, -.large_admin_menu_icon.mail::before { - content: "\f0e0"; -} -/* Mail New */ -.main_icons.mail_new::before { - content: "\f658"; -} -/* Warning Statuses */ -.main_icons.warning_mute::before, -.main_icons.warning_moderate::before, -.main_icons.warning_watch::before { - content: "\f06a"; -} -/* Warning Mute */ -.main_icons.warning_mute::before, -.errorbox::before { - color: red; -} -/* Warning Moderate */ -.main_icons.warning_moderate::before, -.noticebox::before { - color: orange; -} -/* Warning Watch */ -.main_icons.warning_watch::before, -.infobox::before { - color: green; -} -/* Drafts */ -.main_icons.drafts::before { - content: "\f3a1"; -} -/* Calendar Export */ -.main_icons.calendar_export::before { - content: "\f271"; -} -/* Calendar Modify */ -.main_icons.calendar_modify::before { - content: "\f784"; -} -/* Plus */ -.main_icons.plus::before { - content: "\f067"; -} -/* Warning */ -.main_icons.warning::before, -.large_admin_menu_icon.warning::before { - content: "\f637"; -} -/* Themes */ -.main_icons.themes::before, -.fa-features::before, -.large_admin_menu_icon.themes::before { - content: "\f5fd"; -} -/* Support */ -.main_icons.support::before, -.large_admin_menu_icon.support::before { - content: "\f1cd"; -} -/* Likes */ -.main_icons.liked::before, -.main_icons.liked_users::before, -.main_icons.liked_messages::before, -.main_icons.like::before, -.fa-like::before { - content: "\f164"; -} -/* Unlike */ -.main_icons.unliked::before, -.main_icons.unlike::before, -.fa-unlike::before { - content: "\f165"; -} -/* Current Theme */ -.main_icons.current_theme::before, -.large_admin_menu_icon.current_theme::before { - content: "\f53f"; -} -/* Stats */ -.main_icons.stats::before { - content: "\f080"; -} -/* Right Arrow */ -.main_icons.right_arrow::before { - content: "\f152"; -} -/* Left Arrow */ -.main_icons.left_arrow::before { - content: "\f153"; -} -/* Smiley */ -.main_icons.smiley::before, -.large_admin_menu_icon.smiley::before { - content: "\f118"; -} -/* Server */ -.main_icons.server::before, -.large_admin_menu_icon.server::before { - content: "\f233"; -} -/* Ban */ -.main_icons.ban::before, -.large_admin_menu_icon.ban::before { - content: "\f05e"; -} -/* Ignore */ -.fa-frenemy::before, -.fa-ignore::before, -.main_icons.ignore::before, -.main_icons.frenemy::before, -.main_icons.disable::before { - content: "\f506"; -} -/* Posts */ -.main_icons.posts::before, -.large_admin_menu_icon.posts::before { - content: "\f0c5"; -} -/* Sort */ -.main_icons.sort_down::before, -.main_icons.sort_up::before { - margin: 0 8px; -} -/* Sort Down */ -.main_icons.sort_down::before { - content: "\f160"; -} -/* Sort Up */ -.main_icons.sort_up::before { - content: "\f161"; -} -/* Sent */ -.main_icons.sent::before { - content: "\f064"; -} -/* Post Moderation Moderate */ -.main_icons.post_moderation_moderate::before { - content: "\f6e3"; -} -/* Post Moderation Deny */ -.main_icons.post_moderation_deny::before { - content: "\f502"; -} -/* Post Moderation Attach */ -.main_icons.post_moderation_attach::before { - content: "\f127"; -} -/* Permissions */ -.main_icons.permissions::before, -.large_admin_menu_icon.permissions::before { - content: "\f084"; -} -/* Paid */ -.main_icons.paid::before, -.large_admin_menu_icon.paid::before, -.fa-paid::before { - content: "\f155"; -} -/* Packages */ -.main_icons.packages::before, -.large_admin_menu_icon.packages::before { - content: "\f466"; -} -/* Filter */ -.main_icons.filter::before { - content: "\f0b0"; -} -/* Package_ops */ -.main_icons.package_ops::before { - content: "\f362"; -} -/* Reports */ -.main_icons.reports::before, -.large_admin_menu_icon.reports::before { - content: "\f573"; -} -/* News */ -.main_icons.news::before, -.large_admin_menu_icon.news::before { - content: "\f1ea"; -} -/* Hide Popup */ -.main_icons.hide_popup::before { - content: "\f056"; -} -/* Prune */ -.main_icons.prune::before { - content: "\f55a"; -} -/* Modifications */ -.main_icons.modifications::before, -.large_admin_menu_icon.modifications::before { - content: "\f12e"; -} -/* Maintain */ -.main_icons.maintain::before, -.large_admin_menu_icon.maintain::before { - content: "\f0ad"; -} -/* Administration */ -.main_icons.administration::before { - content: "\f552"; -} -/* Attachment */ -.main_icons.attachment::before, -.large_admin_menu_icon.attachment::before { - content: "\f0c6"; -} -/* Error */ -.main_icons.error::before { - content: "\f12a"; -} -/* Languages */ -.main_icons.languages::before, -.large_admin_menu_icon.languages::before { - content: "\f1ab"; -} -/* Members Request */ -.main_icons.members_request::before { - content: "\f508"; -} -/* Members Delete */ -.main_icons.members_delete::before { - content: "\f503"; -} -/* Members Watched */ -.main_icons.members_watched::before { - content: "\f21b"; -} -/* Logs */ -.main_icons.logs::before, -.large_admin_menu_icon.logs::before { - content: "\f46d"; -} -/* Features */ -.main_icons.features::before, -.fa-tasksmanager::before, -.large_admin_menu_icon.features::before { - content: "\f0ae"; -} -/* Settings */ -.main_icons.settings::before { - content: "\f1de"; -} -/* Enable */ -.main_icons.enable::before { - content: "\f205"; -} -/* Close */ -.main_icons.close::before { - content: "\f410"; -} -/* Folder */ -.main_icons.folder::before { - content: "\f07b"; -} -/* Select Here */ -.main_icons.select_here::before { - content: "\f101"; -} -/* Select Above */ -.main_icons.select_above::before { - content: "\f102"; -} -/* Select Below */ -.main_icons.select_below::before { - content: "\f103"; -} - -/* Mark All Read */ -.fa-markread::before, -.fa-readall::before, -.fa-read_button::before, -.fa-mark_read_short::before, -.fa-mark_as_read::before, -.main_icons.read_button::before { - content: "\f560"; -} -/* Mark Selected */ -.fa-markselectread::before, -.fa-quick_mod_markread::before, -.fa-TopicSolved_mark_solved::before { - content: "\f058"; -} -/* Not Read */ -.fa-mark_unread::before, -.fa-unread_button::before, -.fa-unsolve_topic::before, -.fa-TopicSolved_mark_unsolved::before, -.main_icons.unread_button::before { - content: "\f00d"; -} -/* Send Topic */ -.fa-send::before { - content: "\f1d8"; -} -/* Unnotify */ -.fa-unnotify::before { - content: "\f1f6"; -} -/* New Poll */ -.fa-post_poll::before, -.fa-new_poll::before, -.fa-add_poll::before, -.main_icons.poll::before { - content: "\f682"; -} -/* Delete */ -.fa-remove_poll::before, -.fa-delete::before, -.fa-remove_topic::before, -.fa-remove_button::before, -.fa-collections_remove::before, -.main_icons.remove_button::before, -.main_icons.delete::before, -.main_icons.collections_remove::before { - content: "\f2ed"; -} -/* Restore */ -.fa-restore_topic::before, -.fa-restore_button::before, -.main_icons.restore_button::before { - content: "\f829"; -} -/* New Topic */ -.fa-new_topic::before { - content: "\f15b"; -} -/* Move Topic */ -.fa-move::before, -.fa-move_topic::before, -.main_icons.move::before { - content: "\f0b2"; -} -/* Sticky Topic */ -.fa-set_sticky::before, -.fa-set_nonsticky::before, -.main_icons.sticky::before { - content: "\f08d"; -} -/* Lock Topic */ -.fa-set_lock::before, -.main_icons.lock::before { - content: "\f023"; -} -/* Unlock Topic */ -.fa-set_unlock::before, -.main_icons.unlock::before, -.main_icons.post_moderation_allow::before { - content: "\f3c1"; -} -/* Merge Topic */ -.fa-merge::before, -.main_icons.merge::before { - content: "\f248"; -} -/* Link Calendar */ -.fa-calendar_link::before { - content: "\f274"; -} -/* Members */ -.fa-view_all_members::before, -.fa-mlist::before, -.fa-people::before, -.main_icons.mlist::before, -.main_icons.people::before { - content: "\f0c0"; -} -/* Find Member */ -.fa-mlist_search::before { - content: "\f4fc"; -} -/* Calendar */ -.fa-calendar::before, -.fa-calendar_upcoming::before, -.main_icons.calendar::before, -.large_admin_menu_icon.calendar::before { - content: "\f073"; -} -/* Post Event */ -.fa-calendar_post_event::before { - content: "\f783"; -} -/* Register */ -.main_icons.main_icons.regcenter::before, -.large_admin_menu_icon.regcenter::before, -.fa-register::before, -.fa-signup::before { - content: "\f234"; -} -/* Login */ -.main_icons.login::before { - content: "\f2f6"; -} -/* Logout */ -.main_icons.logout::before, -.fa-logout::before, -.main_icons.exit::before, -.large_admin_menu_icon.exit::before { - content: "\f2f5"; -} -/* Notifications */ -.fa-notifications::before, -.fa-alerts::before, -.fa-mail::before, -.fa-notify::before, -.main_icons.notify::before, -.main_icons.alerts::before { - content: "\f0f3"; -} -/* Pokes */ -.fa-pokes::before, -.fa-poke::before, -.main_icons.poke::before { - content: "\f0a4"; -} -/* Posts */ -.fa-posts::before { - content: "\f086"; -} -/* Drafts */ -.main_icons.drafts::before, -.fa-drafts::before { - content: "\f0ea"; -} -/* Details */ -.fa-details::before, -.main_icons.details::before { - content: "\f05a"; -} -/* Reply */ -.fa-reply_button::before, -.main_icons.reply_button::before { - content: "\f3e5"; -} -/* Reply to all */ -.fa-reply_all_button::before, -.main_icons.reply_all_button::before { - content: "\f122"; -} -/* Quote */ -.fa-quote::before, -.main_icons.quote::before { - content: "\f10e"; -} -/* Quote Selected */ -.fa-quote_selected::before, -.main_icons.quote_selected::before { - content: "\f10d"; -} -/* Edit */ -.fa-quick_edit_button::before, -.fa-modify_button::before, -.main_icons.quick_edit_button::before, -.main_icons.modify_button::before, -.main_icons.collections_edit::before { - content: "\f044"; -} -/* Report */ -.fa-error::before, -.fa-report::before { - content: "\f024"; -} -/* Approve */ -.fa-approve_button::before, -.fa-approve::before, -.main_icons.approve::before, -.main_icons.approve_button::before { - content: "\f14a"; -} -/* Disapprove */ -.fa-unapprove_button::before, -.main_icons.unapprove_button::before { - content: "\f057"; -} -/* Split */ -.fa-split_button::before, -.main_icons.split_button::before { - content: "\f0db"; -} - -/* Community */ -.fa-community::before, -.main_icons.fa-community::before { - content: "\f022"; -} -/* FA Nav */ -.fa-portal::before, -.main_icons.home::before { - content: "\f015"; -} -/* Help */ -.fa-help::before, -.main_icons.help::before { - content: "\f128"; -} -/* Admin */ -.fa-admin::before, -.main_icons.admin::before { - content: "\f085"; -} -/* Mod */ -.fa-moderate::before, -.main_icons.moderate::before { - content: "\f7d9"; -} -/* Profile */ -h3.profile_hd::before, -.main_icons.profile_hd::before, -.fa-profile::before, -.main_icons.members::before, -.large_admin_menu_icon.members::before { - content: "\f007"; -} -/* PM */ -.fa-pm::before, -.main_icons.personal_message::before, -.main_icons.inbox::before { - content: "\f0e0"; -} -/* Shop */ -.main_icons.shop::before, -.fa-shop::before { - content: "\f07a"; -} -/* Store */ -.fa-store::before, -.main_icons.store::before { - content: "\f54e"; -} -/* Info Center icons */ -.fa-recent_posts::before, -.main_icons.recent_posts::before { - content: "\f550"; -} -.fa-online_users::before { - content: "\f500"; -} -/* Profile Account */ -.fa-maintain::before { - content: "\f505"; -} -/* Profile Details */ -.fa-members::before { - content: "\f2c2"; -} -/* Optimus */ -.main_icons.optimus::before, -.large_admin_menu_icon.optimus::before, -.fa-optimus::before { - content: "\f0e8"; - background: none !important; -} -/* Topic Collections */ -.main_icons.collections::before, -.fa-collections::before { - content: "\e0bb"; -} -.main_icons.collections_save::before, -.fa-collections_save::before, -.main_icons.bookmarks::before, -.fa-sticky::before, -.main_icons.sticky::before { - content: "\f02e"; -} -.main_icons.collections_bookmark::before, -.fa-collections_bookmark::before { - content: "\f518"; -} -/* Quiz */ -.main_icons.quiz::before, -.fa-quiz::before { - content: "\f559"; -} -/* Affiliates */ -.main_icons.affiliates::before, -.fa-affiliates::before { - content: "\f0ac"; -} -/* Gallery */ -.main_icons.media::before, -.fa-media::before, -.main_icons.gallery::before, -.fa-gallery::before { - content: "\f87c"; -} -/* Arcade */ -.main_icons.arcade::before, -.fa-arcade::before { - content: "\f11b"; -} -/* Battle */ -.main_icons.battle::before, -.fa-battle::before { - content: "\f66d"; -} \ No newline at end of file From 6c446edb46d9a9d133aca05c36345ee03ca99bd0 Mon Sep 17 00:00:00 2001 From: John Rayes Date: Fri, 8 Dec 2023 20:41:28 -0700 Subject: [PATCH 011/115] Update Theme.php Signed-off-by: John Rayes --- Sources/Theme.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Sources/Theme.php b/Sources/Theme.php index 221a5aab91..c8ea65264d 100644 --- a/Sources/Theme.php +++ b/Sources/Theme.php @@ -2240,16 +2240,16 @@ protected function loadJavaScript(): void } // Queue our JQuery plugins! - self::loadJavaScriptFile('smf_jquery_plugins.js', ['minimize' => true], 'smf_jquery_plugins'); + self::loadJavaScriptFile('smf_jquery_plugins.js', ['defer' => true, 'minimize' => true], 'smf_jquery_plugins'); if (!User::$me->is_guest) { - self::loadJavaScriptFile('jquery.custom-scrollbar.js', ['minimize' => true], 'smf_jquery_scrollbar'); + self::loadJavaScriptFile('jquery.custom-scrollbar.js', ['defer' => true, 'minimize' => true], 'smf_jquery_scrollbar'); self::loadCSSFile('jquery.custom-scrollbar.css', ['force_current' => false, 'validate' => true], 'smf_scrollbar'); } // script.js and theme.js, always required, so always add them! Makes index.template.php cleaner and all. self::loadJavaScriptFile('script.js', ['defer' => false, 'minimize' => true], 'smf_script'); - self::loadJavaScriptFile('theme.js', ['minimize' => true], 'smf_theme'); + self::loadJavaScriptFile('theme.js', ['defer' => true, 'minimize' => true], 'smf_theme'); // And we should probably trigger the cron too. if (empty(Config::$modSettings['cron_is_real_cron'])) { From 898a4a34feda8f1c41082bb336018bd90bc6f81e Mon Sep 17 00:00:00 2001 From: John Rayes Date: Sat, 9 Dec 2023 21:25:07 -0700 Subject: [PATCH 012/115] scrollabble Signed-off-by: John Rayes --- Sources/Theme.php | 5 - Themes/default/css/index.css | 13 +- .../default/css/jquery.custom-scrollbar.css | 143 ---- .../scripts/jquery.custom-scrollbar.js | 799 ------------------ Themes/default/scripts/script.js | 9 - 5 files changed, 5 insertions(+), 964 deletions(-) delete mode 100644 Themes/default/css/jquery.custom-scrollbar.css delete mode 100644 Themes/default/scripts/jquery.custom-scrollbar.js diff --git a/Sources/Theme.php b/Sources/Theme.php index c8ea65264d..bcb6a29784 100644 --- a/Sources/Theme.php +++ b/Sources/Theme.php @@ -2242,11 +2242,6 @@ protected function loadJavaScript(): void // Queue our JQuery plugins! self::loadJavaScriptFile('smf_jquery_plugins.js', ['defer' => true, 'minimize' => true], 'smf_jquery_plugins'); - if (!User::$me->is_guest) { - self::loadJavaScriptFile('jquery.custom-scrollbar.js', ['defer' => true, 'minimize' => true], 'smf_jquery_scrollbar'); - self::loadCSSFile('jquery.custom-scrollbar.css', ['force_current' => false, 'validate' => true], 'smf_scrollbar'); - } - // script.js and theme.js, always required, so always add them! Makes index.template.php cleaner and all. self::loadJavaScriptFile('script.js', ['defer' => false, 'minimize' => true], 'smf_script'); self::loadJavaScriptFile('theme.js', ['defer' => true, 'minimize' => true], 'smf_theme'); diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index edc9873862..6fbe2cf93f 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -1577,14 +1577,11 @@ a[class^="mobile_generic_menu_"] { -webkit-hyphens: auto; hyphens: auto; } -/* Fixes bug with border-box on scrollable js */ -.scrollable, -.scrollable *, -#profile_menu { - box-sizing: content-box; -} -.top_menu.scrollable { - max-height: 30em; +@media (hover) { + .top_menu.scrollable { + max-height: 30em; + overflow: auto; + } } .pm_unread, .alerts_unread { margin-top: 5px; diff --git a/Themes/default/css/jquery.custom-scrollbar.css b/Themes/default/css/jquery.custom-scrollbar.css deleted file mode 100644 index be5cb88a2e..0000000000 --- a/Themes/default/css/jquery.custom-scrollbar.css +++ /dev/null @@ -1,143 +0,0 @@ -.scrollable:focus { - outline: 0; -} - -.scrollable .viewport { - position: relative; - overflow: hidden; -} - -.scrollable .viewport .overview { - width: 100%; - position: absolute; -} - -.scrollable .scroll-bar { - display: none; -} - -.scrollable .scroll-bar.vertical { - position: absolute; - right: 0; - height: 100%; -} - -.scrollable .scroll-bar.horizontal { - position: relative; - width: 100%; -} - -.scrollable .scroll-bar .thumb { - position: absolute; -} - -.scrollable .scroll-bar.vertical .thumb { - width: 100%; - min-height: 10px; -} - -.scrollable .scroll-bar.horizontal .thumb { - height: 100%; - min-width: 10px; - left: 0; -} - -.not-selectable { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -/*Default skin*/ - -.scrollable.default-skin { - padding-right: 10px; - padding-bottom: 6px; -} - -.scrollable.default-skin .scroll-bar.vertical { - width: 6px; -} - -.scrollable.default-skin .scroll-bar.horizontal { - height: 6px; -} - -.scrollable.default-skin .scroll-bar .thumb { - background-color: black; - opacity: 0.4; - border-radius: 3px; -} - -.scrollable.default-skin .scroll-bar:hover .thumb { - opacity: 0.6; -} - -/*Gray skin*/ - -.scrollable.gray-skin { - padding-right: 17px; -} - -.scrollable.gray-skin .scroll-bar { - border: 1px solid gray; - background-color: #d3d3d3; -} - -.scrollable.gray-skin .scroll-bar .thumb { - background-color: gray; -} - -.scrollable.gray-skin .scroll-bar:hover .thumb { - background-color: black; -} - -.scrollable.gray-skin .scroll-bar.vertical { - width: 10px; -} - -.scrollable.gray-skin .scroll-bar.horizontal { - height: 10px; - margin-top: 2px; -} - -/*Modern skin*/ -.scrollable.modern-skin { - padding-right: 17px; -} - -.scrollable.modern-skin .scroll-bar { - border: 1px solid gray; - border-radius: 4px; - box-shadow: inset 0 0 5px #888; -} - -.scrollable.modern-skin .scroll-bar .thumb { - background-color: #95aabf; - border-radius: 4px; - border: 1px solid #536984; -} - -.scrollable.modern-skin .scroll-bar.vertical .thumb { - width: 8px; - background: -webkit-linear-gradient(left, #95aabf 0%, #547092 100%); - background: linear-gradient(to right, #95aabf 0%, #547092 100%); -} - -.scrollable.modern-skin .scroll-bar.horizontal .thumb { - height: 8px; - background-image: linear-gradient(#95aabf, #547092); - background-image: -webkit-linear-gradient(#95aabf, #547092); -} - -.scrollable.modern-skin .scroll-bar.vertical { - width: 10px; -} - -.scrollable.modern-skin .scroll-bar.horizontal { - height: 10px; - margin-top: 2px; -} \ No newline at end of file diff --git a/Themes/default/scripts/jquery.custom-scrollbar.js b/Themes/default/scripts/jquery.custom-scrollbar.js deleted file mode 100644 index 99c5d44fbd..0000000000 --- a/Themes/default/scripts/jquery.custom-scrollbar.js +++ /dev/null @@ -1,799 +0,0 @@ -(function ($) { - $.fn.customScrollbar = function (options, args) { - var defaultOptions = { - skin: undefined, - hScroll: true, - vScroll: true, - updateOnWindowResize: false, - animationSpeed: 300, - onCustomScroll: undefined, - swipeSpeed: 1, - wheelSpeed: 40, - fixedThumbWidth: undefined, - fixedThumbHeight: undefined, - preventDefaultScroll: false - } - - var Scrollable = function (element, options) { - this.$element = $(element); - this.options = options; - this.addScrollableClass(); - this.addSkinClass(); - this.addScrollBarComponents(); - if (this.options.vScroll) - this.vScrollbar = new Scrollbar(this, new VSizing()); - if (this.options.hScroll) - this.hScrollbar = new Scrollbar(this, new HSizing()); - this.$element.data("scrollable", this); - this.initKeyboardScrolling(); - this.bindEvents(); - } - - Scrollable.prototype = { - - addScrollableClass: function () { - if (!this.$element.hasClass("scrollable")) { - this.scrollableAdded = true; - this.$element.addClass("scrollable"); - } - }, - - removeScrollableClass: function () { - if (this.scrollableAdded) - this.$element.removeClass("scrollable"); - }, - - addSkinClass: function () { - if (typeof(this.options.skin) == "string" && !this.$element.hasClass(this.options.skin)) { - this.skinClassAdded = true; - this.$element.addClass(this.options.skin); - } - }, - - removeSkinClass: function () { - if (this.skinClassAdded) - this.$element.removeClass(this.options.skin); - }, - - addScrollBarComponents: function () { - this.assignViewPort(); - if (this.$viewPort.length == 0) { - this.$element.wrapInner("
"); - this.assignViewPort(); - this.viewPortAdded = true; - } - this.assignOverview(); - if (this.$overview.length == 0) { - this.$viewPort.wrapInner("
"); - this.assignOverview(); - this.overviewAdded = true; - } - this.addScrollBar("vertical", "prepend"); - this.addScrollBar("horizontal", "append"); - }, - - removeScrollbarComponents: function () { - this.removeScrollbar("vertical"); - this.removeScrollbar("horizontal"); - if (this.overviewAdded) - this.$element.unwrap(); - if (this.viewPortAdded) - this.$element.unwrap(); - }, - - removeScrollbar: function (orientation) { - if (this[orientation + "ScrollbarAdded"]) - this.$element.find(".scroll-bar." + orientation).remove(); - }, - - assignViewPort: function () { - this.$viewPort = this.$element.find(".viewport"); - }, - - assignOverview: function () { - this.$overview = this.$viewPort.find(".overview"); - }, - - addScrollBar: function (orientation, fun) { - if (this.$element.find(".scroll-bar." + orientation).length == 0) { - this.$element[fun]("
") - this[orientation + "ScrollbarAdded"] = true; - } - }, - - resize: function (keepPosition) { - if (this.vScrollbar) - this.vScrollbar.resize(keepPosition); - if (this.hScrollbar) - this.hScrollbar.resize(keepPosition); - }, - - scrollTo: function (element) { - if (this.vScrollbar) - this.vScrollbar.scrollToElement(element); - if (this.hScrollbar) - this.hScrollbar.scrollToElement(element); - }, - - scrollToXY: function (x, y) { - this.scrollToX(x); - this.scrollToY(y); - }, - - scrollToX: function (x) { - if (this.hScrollbar) - this.hScrollbar.scrollOverviewTo(x, true); - }, - - scrollToY: function (y) { - if (this.vScrollbar) - this.vScrollbar.scrollOverviewTo(y, true); - }, - - scrollByX: function (x) { - if (this.hScrollbar) - this.scrollToX(this.hScrollbar.overviewPosition() + x); - }, - - scrollByY: function (y) { - if (this.vScrollbar) - this.scrollToY(this.vScrollbar.overviewPosition() + y); - }, - - remove: function () { - this.removeScrollableClass(); - this.removeSkinClass(); - this.removeScrollbarComponents(); - this.$element.data("scrollable", null); - this.removeKeyboardScrolling(); - if (this.vScrollbar) - this.vScrollbar.remove(); - if (this.hScrollbar) - this.hScrollbar.remove(); - }, - - setAnimationSpeed: function (speed) { - this.options.animationSpeed = speed; - }, - - isInside: function (element, wrappingElement) { - var $element = $(element); - var $wrappingElement = $(wrappingElement); - var elementOffset = $element.offset(); - var wrappingElementOffset = $wrappingElement.offset(); - return (elementOffset.top >= wrappingElementOffset.top) && (elementOffset.left >= wrappingElementOffset.left) && - (elementOffset.top + $element.height() <= wrappingElementOffset.top + $wrappingElement.height()) && - (elementOffset.left + $element.width() <= wrappingElementOffset.left + $wrappingElement.width()) - }, - - initKeyboardScrolling: function () { - var _this = this; - - this.elementKeydown = function (event) { - if (document.activeElement === _this.$element[0]) { - if (_this.vScrollbar) - _this.vScrollbar.keyScroll(event); - if (_this.hScrollbar) - _this.hScrollbar.keyScroll(event); - } - } - - this.$element - .attr('tabindex', '-1') - .keydown(this.elementKeydown); - }, - - removeKeyboardScrolling: function () { - this.$element - .removeAttr('tabindex') - .off("keydown", this.elementKeydown); - }, - - bindEvents: function () { - if (this.options.onCustomScroll) - this.$element.on("customScroll", this.options.onCustomScroll); - } - } - - var Scrollbar = function (scrollable, sizing) { - this.scrollable = scrollable; - this.sizing = sizing - this.$scrollBar = this.sizing.scrollBar(this.scrollable.$element); - this.$thumb = this.$scrollBar.find(".thumb"); - this.setScrollPosition(0, 0); - this.resize(); - this.initMouseMoveScrolling(); - this.initMouseWheelScrolling(); - this.initTouchScrolling(); - this.initMouseClickScrolling(); - this.initWindowResize(); - } - - Scrollbar.prototype = { - - resize: function (keepPosition) { - this.overviewSize = this.sizing.size(this.scrollable.$overview); - this.calculateViewPortSize(); - this.sizing.size(this.scrollable.$viewPort, this.viewPortSize); - this.ratio = this.viewPortSize / this.overviewSize; - this.sizing.size(this.$scrollBar, this.viewPortSize); - this.thumbSize = this.calculateThumbSize(); - this.sizing.size(this.$thumb, this.thumbSize); - this.maxThumbPosition = this.calculateMaxThumbPosition(); - this.maxOverviewPosition = this.calculateMaxOverviewPosition(); - this.enabled = (this.overviewSize > this.viewPortSize); - if (this.scrollPercent === undefined) - this.scrollPercent = 0.0; - if (this.enabled) - this.rescroll(keepPosition); - else - this.setScrollPosition(0, 0); - this.$scrollBar.toggle(this.enabled); - }, - - calculateViewPortSize: function () { - var elementSize = this.sizing.size(this.scrollable.$element); - if (elementSize > 0 && !this.maxSizeUsed) { - this.viewPortSize = elementSize; - this.maxSizeUsed = false; - } - else { - var maxSize = this.sizing.maxSize(this.scrollable.$element); - this.viewPortSize = Math.min(maxSize, this.overviewSize); - this.maxSizeUsed = true; - } - }, - - calculateThumbSize: function () { - var fixedSize = this.sizing.fixedThumbSize(this.scrollable.options) - var size; - if (fixedSize) - size = fixedSize; - else - size = this.ratio * this.viewPortSize - return Math.max(size, this.sizing.minSize(this.$thumb)); - }, - - initMouseMoveScrolling: function () { - var _this = this; - this.$thumb.mousedown(function (event) { - if (_this.enabled) - _this.startMouseMoveScrolling(event); - }); - this.documentMouseup = function (event) { - _this.stopMouseMoveScrolling(event); - }; - $(document).mouseup(this.documentMouseup); - this.documentMousemove = function (event) { - _this.mouseMoveScroll(event); - }; - $(document).mousemove(this.documentMousemove); - this.$thumb.click(function (event) { - event.stopPropagation(); - }); - }, - - removeMouseMoveScrolling: function () { - this.$thumb.off(); - $(document).off("mouseup", this.documentMouseup); - $(document).off("mousemove", this.documentMousemove); - }, - - initMouseWheelScrolling: function () { - var _this = this; - this.scrollable.$element.mousewheel(function (event, delta, deltaX, deltaY) { - if (_this.enabled) { - var scrolled = _this.mouseWheelScroll(deltaX, deltaY); - _this.stopEventConditionally(event, scrolled); - } - }); - }, - - removeMouseWheelScrolling: function () { - this.scrollable.$element.off("mousewheel"); - }, - - initTouchScrolling: function () { - if (document.addEventListener) { - var _this = this; - this.elementTouchstart = function (event) { - if (_this.enabled) - _this.startTouchScrolling(event); - } - this.scrollable.$element[0].addEventListener("touchstart", this.elementTouchstart); - this.documentTouchmove = function (event) { - _this.touchScroll(event); - } - this.scrollable.$element[0].addEventListener("touchmove", this.documentTouchmove); - this.elementTouchend = function (event) { - _this.stopTouchScrolling(event); - } - this.scrollable.$element[0].addEventListener("touchend", this.elementTouchend); - } - }, - - removeTouchScrolling: function () { - if (document.addEventListener) { - this.scrollable.$element[0].removeEventListener("touchstart", this.elementTouchstart); - document.removeEventListener("touchmove", this.documentTouchmove); - this.scrollable.$element[0].removeEventListener("touchend", this.elementTouchend); - } - }, - - initMouseClickScrolling: function () { - var _this = this; - this.scrollBarClick = function (event) { - _this.mouseClickScroll(event); - }; - this.$scrollBar.click(this.scrollBarClick); - }, - - removeMouseClickScrolling: function () { - this.$scrollBar.off("click", this.scrollBarClick); - }, - - initWindowResize: function () { - if (this.scrollable.options.updateOnWindowResize) { - var _this = this; - this.windowResize = function () { - _this.resize(); - }; - $(window).resize(this.windowResize); - } - }, - - removeWindowResize: function () { - $(window).off("resize", this.windowResize); - }, - - isKeyScrolling: function (key) { - return this.keyScrollDelta(key) != null; - }, - - keyScrollDelta: function (key) { - for (var scrollingKey in this.sizing.scrollingKeys) - if (scrollingKey == key) - return this.sizing.scrollingKeys[key](this.viewPortSize); - return null; - }, - - startMouseMoveScrolling: function (event) { - this.mouseMoveScrolling = true; - $("body").addClass("not-selectable"); - this.setUnselectable($("body"), "on"); - this.setScrollEvent(event); - event.preventDefault(); - }, - - stopMouseMoveScrolling: function (event) { - this.mouseMoveScrolling = false; - $("body").removeClass("not-selectable"); - this.setUnselectable($("body"), null); - }, - - setUnselectable: function (element, value) { - if (element.attr("unselectable") != value) { - element.attr("unselectable", value); - element.find(':not(input)').attr('unselectable', value); - } - }, - - mouseMoveScroll: function (event) { - if (this.mouseMoveScrolling) { - var delta = this.sizing.mouseDelta(this.scrollEvent, event); - this.scrollThumbBy(delta); - this.setScrollEvent(event); - } - }, - - startTouchScrolling: function (event) { - if (event.touches && event.touches.length == 1) { - this.setScrollEvent(event.touches[0]); - this.touchScrolling = true; - event.stopPropagation(); - } - }, - - touchScroll: function (event) { - if (this.touchScrolling && event.touches && event.touches.length == 1) { - var delta = -this.sizing.mouseDelta(this.scrollEvent, event.touches[0]) * this.scrollable.options.swipeSpeed; - var scrolled = this.scrollOverviewBy(delta); - if (scrolled) - this.setScrollEvent(event.touches[0]); - this.stopEventConditionally(event, scrolled); - } - }, - - stopTouchScrolling: function (event) { - this.touchScrolling = false; - event.stopPropagation(); - }, - - mouseWheelScroll: function (deltaX, deltaY) { - var delta = -this.sizing.wheelDelta(deltaX, deltaY) * this.scrollable.options.wheelSpeed; - if (delta != 0) - return this.scrollOverviewBy(delta); - }, - - mouseClickScroll: function (event) { - var delta = this.viewPortSize - 20; - if (event["page" + this.sizing.scrollAxis()] < this.$thumb.offset()[this.sizing.offsetComponent()]) - // mouse click over thumb - delta = -delta; - this.scrollOverviewBy(delta); - }, - - keyScroll: function (event) { - var keyDown = event.which; - if (this.enabled && this.isKeyScrolling(keyDown)) { - var scrolled = this.scrollOverviewBy(this.keyScrollDelta(keyDown)); - this.stopEventConditionally(event, scrolled); - } - }, - - scrollThumbBy: function (delta) { - var thumbPosition = this.thumbPosition(); - thumbPosition += delta; - thumbPosition = this.positionOrMax(thumbPosition, this.maxThumbPosition); - var oldScrollPercent = this.scrollPercent; - this.scrollPercent = thumbPosition / this.maxThumbPosition; - if (oldScrollPercent != this.scrollPercent) { - var overviewPosition = (thumbPosition * this.maxOverviewPosition) / this.maxThumbPosition; - this.setScrollPosition(overviewPosition, thumbPosition); - this.triggerCustomScroll(oldScrollPercent); - return true - } - else - return false; - }, - - thumbPosition: function () { - return this.$thumb.position()[this.sizing.offsetComponent()]; - }, - - scrollOverviewBy: function (delta) { - var overviewPosition = this.overviewPosition() + delta; - return this.scrollOverviewTo(overviewPosition, false); - }, - - overviewPosition: function () { - return -this.scrollable.$overview.position()[this.sizing.offsetComponent()]; - }, - - scrollOverviewTo: function (overviewPosition, animate) { - overviewPosition = this.positionOrMax(overviewPosition, this.maxOverviewPosition); - var oldScrollPercent = this.scrollPercent; - this.scrollPercent = overviewPosition / this.maxOverviewPosition; - if (oldScrollPercent != this.scrollPercent) { - var thumbPosition = this.scrollPercent * this.maxThumbPosition; - if (animate) - this.setScrollPositionWithAnimation(overviewPosition, thumbPosition); - else - this.setScrollPosition(overviewPosition, thumbPosition); - this.triggerCustomScroll(oldScrollPercent); - return true; - } - else - return false; - }, - - positionOrMax: function (p, max) { - if (p < 0) - return 0; - else if (p > max) - return max; - else - return p; - }, - - triggerCustomScroll: function (oldScrollPercent) { - this.scrollable.$element.trigger("customScroll", { - scrollAxis: this.sizing.scrollAxis(), - direction: this.sizing.scrollDirection(oldScrollPercent, this.scrollPercent), - scrollPercent: this.scrollPercent * 100 - } - ); - }, - - rescroll: function (keepPosition) { - if (keepPosition) { - var overviewPosition = this.positionOrMax(this.overviewPosition(), this.maxOverviewPosition); - this.scrollPercent = overviewPosition / this.maxOverviewPosition; - var thumbPosition = this.scrollPercent * this.maxThumbPosition; - this.setScrollPosition(overviewPosition, thumbPosition); - } - else { - var thumbPosition = this.scrollPercent * this.maxThumbPosition; - var overviewPosition = this.scrollPercent * this.maxOverviewPosition; - this.setScrollPosition(overviewPosition, thumbPosition); - } - }, - - setScrollPosition: function (overviewPosition, thumbPosition) { - this.$thumb.css(this.sizing.offsetComponent(), thumbPosition + "px"); - this.scrollable.$overview.css(this.sizing.offsetComponent(), -overviewPosition + "px"); - }, - - setScrollPositionWithAnimation: function (overviewPosition, thumbPosition) { - var thumbAnimationOpts = {}; - var overviewAnimationOpts = {}; - thumbAnimationOpts[this.sizing.offsetComponent()] = thumbPosition + "px"; - this.$thumb.animate(thumbAnimationOpts, this.scrollable.options.animationSpeed); - overviewAnimationOpts[this.sizing.offsetComponent()] = -overviewPosition + "px"; - this.scrollable.$overview.animate(overviewAnimationOpts, this.scrollable.options.animationSpeed); - }, - - calculateMaxThumbPosition: function () { - return Math.max(0, this.sizing.size(this.$scrollBar) - this.thumbSize); - }, - - calculateMaxOverviewPosition: function () { - return Math.max(0, this.sizing.size(this.scrollable.$overview) - this.sizing.size(this.scrollable.$viewPort)); - }, - - setScrollEvent: function (event) { - var attr = "page" + this.sizing.scrollAxis(); - if (!this.scrollEvent || this.scrollEvent[attr] != event[attr]) - this.scrollEvent = {pageX: event.pageX, pageY: event.pageY}; - }, - - scrollToElement: function (element) { - var $element = $(element); - if (this.sizing.isInside($element, this.scrollable.$overview) && !this.sizing.isInside($element, this.scrollable.$viewPort)) { - var elementOffset = $element.offset(); - var overviewOffset = this.scrollable.$overview.offset(); - var viewPortOffset = this.scrollable.$viewPort.offset(); - this.scrollOverviewTo(elementOffset[this.sizing.offsetComponent()] - overviewOffset[this.sizing.offsetComponent()], true); - } - }, - - remove: function () { - this.removeMouseMoveScrolling(); - this.removeMouseWheelScrolling(); - this.removeTouchScrolling(); - this.removeMouseClickScrolling(); - this.removeWindowResize(); - }, - - stopEventConditionally: function (event, condition) { - if (condition || this.scrollable.options.preventDefaultScroll) { - event.preventDefault(); - event.stopPropagation(); - } - } - } - - var HSizing = function () { - } - - HSizing.prototype = { - size: function ($el, arg) { - if (arg) - return $el.width(arg); - else - return $el.width(); - }, - - minSize: function ($el) { - return parseInt($el.css("min-width")) || 0; - }, - - maxSize: function ($el) { - return parseInt($el.css("max-width")) || 0; - }, - - fixedThumbSize: function (options) { - return options.fixedThumbWidth; - }, - - scrollBar: function ($el) { - return $el.find(".scroll-bar.horizontal"); - }, - - mouseDelta: function (event1, event2) { - return event2.pageX - event1.pageX; - }, - - offsetComponent: function () { - return "left"; - }, - - wheelDelta: function (deltaX, deltaY) { - return deltaX; - }, - - scrollAxis: function () { - return "X"; - }, - - scrollDirection: function (oldPercent, newPercent) { - return oldPercent < newPercent ? "right" : "left"; - }, - - scrollingKeys: { - 37: function (viewPortSize) { - return -10; //arrow left - }, - 39: function (viewPortSize) { - return 10; //arrow right - } - }, - - isInside: function (element, wrappingElement) { - var $element = $(element); - var $wrappingElement = $(wrappingElement); - var elementOffset = $element.offset(); - var wrappingElementOffset = $wrappingElement.offset(); - return (elementOffset.left >= wrappingElementOffset.left) && - (elementOffset.left + $element.width() <= wrappingElementOffset.left + $wrappingElement.width()); - } - } - - var VSizing = function () { - } - - VSizing.prototype = { - - size: function ($el, arg) { - if (arg) - return $el.height(arg); - else - return parseInt($el.css("height")) || 0; - }, - - minSize: function ($el) { - return parseInt($el.css("min-height")) || 0; - }, - - maxSize: function ($el) { - return parseInt($el.css("max-height")) || 0; - }, - - fixedThumbSize: function (options) { - return options.fixedThumbHeight; - }, - - scrollBar: function ($el) { - return $el.find(".scroll-bar.vertical"); - }, - - mouseDelta: function (event1, event2) { - return event2.pageY - event1.pageY; - }, - - offsetComponent: function () { - return "top"; - }, - - wheelDelta: function (deltaX, deltaY) { - return deltaY; - }, - - scrollAxis: function () { - return "Y"; - }, - - scrollDirection: function (oldPercent, newPercent) { - return oldPercent < newPercent ? "down" : "up"; - }, - - scrollingKeys: { - 38: function (viewPortSize) { - return -10; //arrow up - }, - 40: function (viewPortSize) { - return 10; //arrow down - }, - 33: function (viewPortSize) { - return -(viewPortSize - 20); //page up - }, - 34: function (viewPortSize) { - return viewPortSize - 20; //page down - } - }, - - isInside: function (element, wrappingElement) { - var $element = $(element); - var $wrappingElement = $(wrappingElement); - var elementOffset = $element.offset(); - var wrappingElementOffset = $wrappingElement.offset(); - return (elementOffset.top >= wrappingElementOffset.top) && - (elementOffset.top + $element.height() <= wrappingElementOffset.top + $wrappingElement.height()); - } - } - - return this.each(function () { - if (options == undefined) - options = defaultOptions; - if (typeof(options) == "string") { - var scrollable = $(this).data("scrollable"); - if (scrollable) - scrollable[options](args); - } - else if (typeof(options) == "object") { - options = $.extend(defaultOptions, options); - new Scrollable($(this), options); - } - else - throw "Invalid type of options"; - }); - }; -})(jQuery); - -(function ($) { - var types = ['DOMMouseScroll', 'mousewheel']; - - if ($.event.fixHooks) { - for (var i = types.length; i;) { - $.event.fixHooks[ types[--i] ] = $.event.mouseHooks; - } - } - - $.event.special.mousewheel = { - setup: function () { - if (this.addEventListener) { - for (var i = types.length; i;) { - this.addEventListener(types[--i], handler, false); - } - } else { - this.onmousewheel = handler; - } - }, - - teardown: function () { - if (this.removeEventListener) { - for (var i = types.length; i;) { - this.removeEventListener(types[--i], handler, false); - } - } else { - this.onmousewheel = null; - } - } - }; - - $.fn.extend({ - mousewheel: function (fn) { - return fn ? this.on("mousewheel", fn) : this.trigger("mousewheel"); - }, - - unmousewheel: function (fn) { - return this.off("mousewheel", fn); - } - }); - - function handler(event) { - var orgEvent = event || window.event, args = [].slice.call(arguments, 1), delta = 0, returnValue = true, deltaX = 0, deltaY = 0; - event = $.event.fix(orgEvent); - event.type = "mousewheel"; - - // Old school scrollwheel delta - if (orgEvent.wheelDelta) { - delta = orgEvent.wheelDelta / 120; - } - if (orgEvent.detail) { - delta = -orgEvent.detail / 3; - } - - // New school multidimensional scroll (touchpads) deltas - deltaY = delta; - - // Gecko - if (orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS) { - deltaY = 0; - deltaX = delta; - } - - // Webkit - if (orgEvent.wheelDeltaY !== undefined) { - deltaY = orgEvent.wheelDeltaY / 120; - } - if (orgEvent.wheelDeltaX !== undefined) { - deltaX = orgEvent.wheelDeltaX / 120; - } - - // Add event and delta to the front of the arguments - args.unshift(event, delta, deltaX, deltaY); - - return ($.event.dispatch || $.event.handle).apply(this, args); - } -})(jQuery); diff --git a/Themes/default/scripts/script.js b/Themes/default/scripts/script.js index 48a26c638b..5da8cb2d92 100644 --- a/Themes/default/scripts/script.js +++ b/Themes/default/scripts/script.js @@ -428,18 +428,9 @@ smc_PopupMenu.prototype.open = function (sItem) }, type: "GET", dataType: "html", - beforeSend: function () { - }, context: this.opt.menus[sItem].menuObj, success: function (data, textStatus, xhr) { this.html(data); - - if ($(this).hasClass('scrollable')) - $(this).customScrollbar({ - skin: "default-skin", - hScroll: false, - updateOnWindowResize: true - }); } }); From a56cb3703924324e7a86c98358eddf2006c798dd Mon Sep 17 00:00:00 2001 From: John Rayes Date: Wed, 31 Jan 2024 21:34:55 -0700 Subject: [PATCH 013/115] no more eval Signed-off-by: John Rayes --- Themes/default/Admin.template.php | 5 +- Themes/default/Calendar.template.php | 6 +- Themes/default/Display.template.php | 3 - Themes/default/GenericControls.template.php | 1 - Themes/default/ManageAttachments.template.php | 4 +- Themes/default/ManageBans.template.php | 12 - Themes/default/ManageBoards.template.php | 2 - .../default/ManageMembergroups.template.php | 2 - Themes/default/ManageNews.template.php | 2 - Themes/default/ManagePaid.template.php | 4 +- Themes/default/ManageSearch.template.php | 2 +- Themes/default/Packages.template.php | 3 +- Themes/default/PersonalMessage.template.php | 1 - Themes/default/Post.template.php | 4 +- Themes/default/Profile.template.php | 4 - Themes/default/Search.template.php | 5 +- Themes/default/scripts/PersonalMessage.js | 22 +- Themes/default/scripts/admin.js | 2 +- Themes/default/scripts/captcha.js | 6 - Themes/default/scripts/drafts.js | 21 +- Themes/default/scripts/script.js | 65 +--- Themes/default/scripts/suggest.js | 322 +++++++----------- Themes/default/scripts/theme.js | 40 ++- Themes/default/scripts/topic.js | 162 ++++----- 24 files changed, 269 insertions(+), 431 deletions(-) diff --git a/Themes/default/Admin.template.php b/Themes/default/Admin.template.php index d66b1c77b8..43f20686ee 100644 --- a/Themes/default/Admin.template.php +++ b/Themes/default/Admin.template.php @@ -111,7 +111,6 @@ function template_admin() echo ' '; } @@ -1540,7 +1539,7 @@ function doAutoSubmit() document.forms.recount_form.recount_now.value = "', Lang::getTxt('errors_recount_now', file: 'Admin'), ' (" + countdown + ")"; countdown--; - setTimeout("doAutoSubmit();", 1000); + setTimeout(doAutoSubmit, 1000); } '; } diff --git a/Themes/default/Calendar.template.php b/Themes/default/Calendar.template.php index 925c49e83b..874c7b090d 100644 --- a/Themes/default/Calendar.template.php +++ b/Themes/default/Calendar.template.php @@ -985,7 +985,7 @@ function update() else icons[i].src = "', Utils::$context['onimg'], '"; - window.setTimeout("update();", 500); + window.setTimeout(update, 500); } // Checks for variable in theArray. function in_array(variable, theArray) @@ -1080,7 +1080,7 @@ function update() else icons[i].src = "', Utils::$context['onimg'], '"; - window.setTimeout("update();", 500); + window.setTimeout(update, 500); } // Checks for variable in theArray. function in_array(variable, theArray) @@ -1173,7 +1173,7 @@ function update() else icons[i].src = "', Utils::$context['onimg'], '"; - window.setTimeout("update();", 500); + window.setTimeout(update, 500); } // Checks for variable in theArray. function in_array(variable, theArray) diff --git a/Themes/default/Display.template.php b/Themes/default/Display.template.php index 0de21d0057..91b5192d8f 100644 --- a/Themes/default/Display.template.php +++ b/Themes/default/Display.template.php @@ -293,7 +293,6 @@ function template_main() { echo ' var oInTopicModeration = new InTopicModeration({ - sSelf: \'oInTopicModeration\', sCheckboxContainerMask: \'in_topic_mod_check_\', aMessageIds: [\'', implode('\', \'', Utils::$context['removableMessageIDs']), '\'], sSessionId: smf_session_id, @@ -319,7 +318,6 @@ function template_main() // Add it to the mobile button strip as well echo ' var oInTopicModerationMobile = new InTopicModeration({ - sSelf: \'oInTopicModerationMobile\', sCheckboxContainerMask: \'in_topic_mod_check_\', aMessageIds: [\'', implode('\', \'', Utils::$context['removableMessageIDs']), '\'], sSessionId: smf_session_id, @@ -985,7 +983,6 @@ function insertQuoteFast(messageid) echo ' diff --git a/Themes/default/ManageBans.template.php b/Themes/default/ManageBans.template.php index 0bde750923..e14efee2ca 100644 --- a/Themes/default/ManageBans.template.php +++ b/Themes/default/ManageBans.template.php @@ -209,24 +209,14 @@ function template_ban_edit() if (Utils::$context['ban']['is_new'] && empty($_REQUEST['u'])) echo ' var oAddMemberSuggest = new smc_AutoSuggest({ - sSelf: \'oAddMemberSuggest\', sSessionId: smf_session_id, sSessionVar: smf_session_var, sSuggestId: \'user\', sControlId: \'user\', sSearchType: \'member\', sTextDeleteItem: \'', Lang::getTxt('autosuggest_delete_item', file: 'General'), '\', - bItemList: false }); - function onUpdateName(oAutoSuggest) - { - document.getElementById(\'user_check\').checked = true; - return true; - } - oAddMemberSuggest.registerCallback(\'onBeforeUpdate\', \'onUpdateName\');'; - - echo ' function confirmBan(aForm) { if (aForm.ban_name.value == \'\') @@ -316,14 +306,12 @@ function template_ban_edit_trigger()
'; if (!empty(Utils::$context['pending_payments'])) diff --git a/Themes/default/ManageSearch.template.php b/Themes/default/ManageSearch.template.php index 03b51eedf4..eb8d6c5751 100644 --- a/Themes/default/ManageSearch.template.php +++ b/Themes/default/ManageSearch.template.php @@ -343,7 +343,7 @@ function doAutoSubmit() document.forms.autoSubmit.b.value = "', Lang::getTxt('search_create_index_continue', file: 'Search'), ' (" + countdown + ")"; countdown--; - setTimeout("doAutoSubmit();", 1000); + setTimeout(doAutoSubmit, 1000); } '; diff --git a/Themes/default/Packages.template.php b/Themes/default/Packages.template.php index 379d3f134a..11bac221f8 100644 --- a/Themes/default/Packages.template.php +++ b/Themes/default/Packages.template.php @@ -590,7 +590,6 @@ function template_browse() echo ' '; } diff --git a/Themes/default/PersonalMessage.template.php b/Themes/default/PersonalMessage.template.php index b65fb10d79..6b8ade1930 100644 --- a/Themes/default/PersonalMessage.template.php +++ b/Themes/default/PersonalMessage.template.php @@ -1258,7 +1258,6 @@ function onDocSent(XMLDoc) echo ' @@ -876,7 +876,7 @@ function doAutoSubmit() document.forms.autoSubmit.b.value = "', Lang::getTxt('announce_continue', file: 'Post'), ' (" + countdown + ")"; countdown--; - setTimeout("doAutoSubmit();", 1000); + setTimeout(doAutoSubmit, 1000); } '; } diff --git a/Themes/default/Profile.template.php b/Themes/default/Profile.template.php index cc0d9d7b86..6580d988a9 100644 --- a/Themes/default/Profile.template.php +++ b/Themes/default/Profile.template.php @@ -867,14 +867,12 @@ function template_editBuddies() '; } @@ -978,14 +976,12 @@ function template_editIgnoreList() '; } diff --git a/Themes/default/Search.template.php b/Themes/default/Search.template.php index 78891f5a30..aac7ea5bac 100644 --- a/Themes/default/Search.template.php +++ b/Themes/default/Search.template.php @@ -123,7 +123,6 @@ function template_main() '; @@ -251,12 +250,10 @@ function template_main() '; } diff --git a/Themes/default/scripts/PersonalMessage.js b/Themes/default/scripts/PersonalMessage.js index 099c063bf9..487f4bea1c 100644 --- a/Themes/default/scripts/PersonalMessage.js +++ b/Themes/default/scripts/PersonalMessage.js @@ -28,16 +28,11 @@ smf_PersonalMessageSend.prototype.init = function() // Make the link show the BCC control. var oBccLink = document.getElementById(this.opt.sBccLinkId); - oBccLink.instanceRef = this; - oBccLink.onclick = function () { - this.instanceRef.showBcc(); - return false; - }; + oBccLink.onclick = this.showBcc.bind(this); } var oToControl = document.getElementById(this.opt.sToControlId); this.oToAutoSuggest = new smc_AutoSuggest({ - sSelf: this.opt.sSelf + '.oToAutoSuggest', sSessionId: this.opt.sSessionId, sSessionVar: this.opt.sSessionVar, sSuggestId: 'to_suggest', @@ -50,10 +45,9 @@ smf_PersonalMessageSend.prototype.init = function() sItemListContainerId: 'to_item_list_container', aListItems: this.opt.aToRecipients }); - this.oToAutoSuggest.registerCallback('onBeforeAddItem', this.opt.sSelf + '.callbackAddItem'); + this.oToAutoSuggest.registerCallback('onBeforeAddItem', this.callbackAddItem.bind(this)); this.oBccAutoSuggest = new smc_AutoSuggest({ - sSelf: this.opt.sSelf + '.oBccAutoSuggest', sSessionId: this.opt.sSessionId, sSessionVar: this.opt.sSessionVar, sSuggestId: 'bcc_suggest', @@ -66,8 +60,7 @@ smf_PersonalMessageSend.prototype.init = function() sItemListContainerId: 'bcc_item_list_container', aListItems: this.opt.aBccRecipients }); - this.oBccAutoSuggest.registerCallback('onBeforeAddItem', this.opt.sSelf + '.callbackAddItem'); - + this.oBccAutoSuggest.registerCallback('onBeforeAddItem', this.callbackAddItem.bind(this)); } smf_PersonalMessageSend.prototype.showBcc = function() @@ -75,14 +68,15 @@ smf_PersonalMessageSend.prototype.showBcc = function() // No longer hide it, show it to the world! this.oBccDiv.style.display = ''; this.oBccDiv2.style.display = ''; -} + return false; +} // Prevent items to be added twice or to both the 'To' and 'Bcc'. -smf_PersonalMessageSend.prototype.callbackAddItem = function(oAutoSuggestInstance, sSuggestId) +smf_PersonalMessageSend.prototype.callbackAddItem = function(sItemId) { - this.oToAutoSuggest.deleteAddedItem(sSuggestId); - this.oBccAutoSuggest.deleteAddedItem(sSuggestId); + this.oToAutoSuggest.deleteAddedItem(sItemId); + this.oBccAutoSuggest.deleteAddedItem(sItemId); return true; } diff --git a/Themes/default/scripts/admin.js b/Themes/default/scripts/admin.js index efcc6437b2..7640bbd47c 100644 --- a/Themes/default/scripts/admin.js +++ b/Themes/default/scripts/admin.js @@ -444,7 +444,7 @@ function setPreviewTimeout() previewTimeout = null; } - previewTimeout = window.setTimeout("refreshPreview(true); previewTimeout = null;", 500); + previewTimeout = window.setTimeout(function() { refreshPreview(true); previewTimeout = null; }, 500); } function toggleDuration(toChange) diff --git a/Themes/default/scripts/captcha.js b/Themes/default/scripts/captcha.js index f74a544e23..269b009fbf 100644 --- a/Themes/default/scripts/captcha.js +++ b/Themes/default/scripts/captcha.js @@ -15,18 +15,12 @@ function smfCaptcha(imageURL, uniqueID, useLibrary, letterCount) // Is there anything to cycle images with - if so attach the refresh image function? var cycleHandle = document.getElementById('visual_verification' + uniqueID + '_refresh'); if (cycleHandle) - { - createEventListener(cycleHandle); cycleHandle.addEventListener('click', refreshImages, false); - } // Maybe a voice is here to spread light? var soundHandle = document.getElementById('visual_verification' + uniqueID + '_sound'); if (soundHandle) - { - createEventListener(soundHandle); soundHandle.addEventListener('click', playSound, false); - } } // Change the images. diff --git a/Themes/default/scripts/drafts.js b/Themes/default/scripts/drafts.js index 6ba74a52eb..a2cdc2e0b2 100644 --- a/Themes/default/scripts/drafts.js +++ b/Themes/default/scripts/drafts.js @@ -12,7 +12,7 @@ function smf_DraftAutoSave(oOptions) this.sCheckDraft = ''; // slight delay on autosave init to allow sceditor to create the iframe - setTimeout('addLoadEvent(' + this.opt.sSelf + '.init())', 4000); + window.addEventListener("load", this.init.bind(this)); } // Start our self calling routine @@ -24,26 +24,23 @@ smf_DraftAutoSave.prototype.init = function () var oIframe = document.getElementsByTagName('iframe')[0]; var oIframeWindow = oIframe.contentWindow || oIframe.contentDocument; // start the autosave timer - this.interval_id = window.setInterval(this.opt.sSelf + '.draft' + (this.bPM ? 'PM' : '') + 'Save();', this.opt.iFreq); + this.interval_id = setInterval(this.bPM ? this.draftPMSave.bind(this) : this.draftSave.bind(this), this.opt.iFreq); - // Set up window focus and blur events - var instanceRef = this; - this.oDraftHandle.onblur = function (oEvent) {return instanceRef.draftBlur(oEvent, true);}; - this.oDraftHandle.onfocus = function (oEvent) {return instanceRef.draftFocus(oEvent, true);}; + this.oDraftHandle.onblur = this.draftBlur.bind(this, true); + this.oDraftHandle.onfocus = this.draftFocus.bind(this, true); // If we found the iframe window, set body focus/blur events for it if (oIframeWindow.document) { var oIframeDoc = oIframeWindow.document; - // @todo oDraftAutoSave should use the this.opt.sSelf name not hardcoded - oIframeDoc.body.onblur = function (oEvent) {return parent.oDraftAutoSave.draftBlur(oEvent, false);}; - oIframeDoc.body.onfocus = function (oEvent) {return parent.oDraftAutoSave.draftFocus(oEvent, false);}; + oIframeDoc.body.onblur = this.draftBlur.bind(this, false); + oIframeDoc.body.onfocus = this.draftFocus.bind(this, false); }; } } // Moved away from the page, where did you go? ... till you return we pause autosaving -smf_DraftAutoSave.prototype.draftBlur = function(oEvent, source) +smf_DraftAutoSave.prototype.draftBlur = function(source) { var e = $('#' + this.opt.sSceditorID).get(0); if (sceditor.instance(e).inSourceMode() == source) @@ -61,13 +58,13 @@ smf_DraftAutoSave.prototype.draftBlur = function(oEvent, source) } // Since you're back we resume the autosave timer -smf_DraftAutoSave.prototype.draftFocus = function(oEvent, source) +smf_DraftAutoSave.prototype.draftFocus = function(source) { var e = $('#' + this.opt.sSceditorID).get(0); if (sceditor.instance(e).inSourceMode() == source) { if (this.interval_id == "") - this.interval_id = window.setInterval(this.opt.sSelf + '.draft' + (this.bPM ? 'PM' : '') + 'Save();', this.opt.iFreq); + this.interval_id = setInterval(this.bPM ? this.draftPMSave.bind(this) : this.draftSave.bind(this), this.opt.iFreq); } } diff --git a/Themes/default/scripts/script.js b/Themes/default/scripts/script.js index 5da8cb2d92..96c51aef38 100644 --- a/Themes/default/scripts/script.js +++ b/Themes/default/scripts/script.js @@ -21,19 +21,6 @@ var is_android = ua.indexOf('android') != -1; var ajax_indicator_ele = null; -// Some older versions of Mozilla don't have this, for some reason. -if (!('forms' in document)) - document.forms = document.getElementsByTagName('form'); - -// Versions of ie < 9 do not have this built in -if (!('getElementsByClassName' in document)) -{ - document.getElementsByClassName = function(className) - { - return $('".' + className + '"'); - } -} - // Get a response from the server. function getServerResponse(sUrl, funcCallback, sType, sDataType) { @@ -672,7 +659,7 @@ function isEmptyText(theField) while (theValue.length > 0 && (theValue.charAt(theValue.length - 1) == ' ' || theValue.charAt(theValue.length - 1) == '\t')) theValue = theValue.substring(0, theValue.length - 1); - return theValue == ''; + return theValue == ''; } // Only allow form submission ONCE. @@ -787,9 +774,9 @@ function smf_sessionKeepAlive() lastKeepAliveCheck = curTime; } - window.setTimeout('smf_sessionKeepAlive();', 1200000); + window.setTimeout(smf_sessionKeepAlive, 1200000); } -window.setTimeout('smf_sessionKeepAlive();', 1200000); +window.setTimeout(smf_sessionKeepAlive, 1200000); // Set a theme option through javascript. function smf_setThemeOption(theme_var, theme_value, theme_id, theme_cur_session_id, theme_cur_session_var, theme_additional_vars) @@ -825,16 +812,13 @@ function expandPages(spanNode, baseLink, firstPage, lastPage, perPage) replacement += baseLink.replace(/%1\$d/, i).replace(/%2\$s/, 1 + i / perPage).replace(/%%/g, '%'); // Add the new page links. - $(spanNode).before(replacement); + spanNode.before(replacement); if (oldLastPage) // Access the raw DOM element so the native onclick event can be overridden. - spanNode.onclick = function () - { - expandPages(spanNode, baseLink, lastPage, oldLastPage, perPage); - }; + spanNode.onclick = expandPages.bind(null, spanNode, baseLink, lastPage, oldLastPage, perPage); else - $(spanNode).remove(); + spanNode.remove(); } function smc_preCacheImage(sSrc) @@ -1112,31 +1096,6 @@ function create_ajax_indicator_ele() document.body.appendChild(ajax_indicator_ele); } -function createEventListener(oTarget) -{ - if (!('addEventListener' in oTarget)) - { - if (oTarget.attachEvent) - { - oTarget.addEventListener = function (sEvent, funcHandler, bCapture) { - oTarget.attachEvent('on' + sEvent, funcHandler); - } - oTarget.removeEventListener = function (sEvent, funcHandler, bCapture) { - oTarget.detachEvent('on' + sEvent, funcHandler); - } - } - else - { - oTarget.addEventListener = function (sEvent, funcHandler, bCapture) { - oTarget['on' + sEvent] = funcHandler; - } - oTarget.removeEventListener = function (sEvent, funcHandler, bCapture) { - oTarget['on' + sEvent] = null; - } - } - } -} - // This function will retrieve the contents needed for the jump to boxes. function grabJumpToContent(elem) { @@ -1225,9 +1184,9 @@ JumpTo.prototype.fillSelect = function (aBoardsAndCategories) // If we've reached the currently selected board add all items so far. if (!aBoardsAndCategories[i].isCategory && aBoardsAndCategories[i].id == this.opt.iCurBoardId) { - this.dropdownList.insertBefore(oListFragment, this.dropdownList.options[0]); - oListFragment = document.createDocumentFragment(); - continue; + this.dropdownList.insertBefore(oListFragment, this.dropdownList.options[0]); + oListFragment = document.createDocumentFragment(); + continue; } if (aBoardsAndCategories[i].isCategory) @@ -1322,8 +1281,6 @@ IconList.prototype.openPopup = function (oDiv, iMessageId) // Start to fetch its contents. ajax_indicator(true); sendXMLDocument.call(this, smf_prepareScriptUrl(smf_scripturl) + 'action=xmlhttp;sa=messageicons;board=' + this.opt.iBoardId + ';xml', '', this.onIconsReceived); - - createEventListener(document.body); } // Set the position of the container. @@ -1693,7 +1650,6 @@ function makeToggle(el, text) t.href = 'javascript:void(0);'; t.textContent = text; t.className = 'toggle_down'; - createEventListener(t); t.addEventListener('click', function() { var d = this.nextSibling; @@ -2105,7 +2061,4 @@ smc_preview_post.prototype.onDocSent = function (XMLDoc) } location.hash = '#' + this.opts.sPreviewSectionContainerID; - - if (typeof(smf_codeFix) != 'undefined') - smf_codeFix(); } \ No newline at end of file diff --git a/Themes/default/scripts/suggest.js b/Themes/default/scripts/suggest.js index 61f0a362c1..b8429b6b04 100644 --- a/Themes/default/scripts/suggest.js +++ b/Themes/default/scripts/suggest.js @@ -14,35 +14,45 @@ function smc_AutoSuggest(oOptions) this.aCache = []; this.aDisplayData = []; - this.sRetrieveURL = 'sRetrieveURL' in this.opt ? this.opt.sRetrieveURL : '%scripturl%action=suggest;suggest_type=%suggest_type%;search=%search%;%sessionVar%=%sessionID%;xml;time=%time%'; + this.sRetrieveURL = this.opt.sRetrieveURL || '%scripturl%action=suggest;suggest_type=%suggest_type%;search=%search%;%sessionVar%=%sessionID%;xml;time=%time%'; + this.oRetrieveTokens = { + scripturl: smf_prepareScriptUrl(smf_scripturl), + suggest_type: this.opt.sSearchType, + sessionVar: this.opt.sSessionVar, + sessionID: this.opt.sSessionId + }; // How many objects can we show at once? - this.iMaxDisplayQuantity = 'iMaxDisplayQuantity' in this.opt ? this.opt.iMaxDisplayQuantity : 15; + this.iMaxDisplayQuantity = this.opt.iMaxDisplayQuantity || 15; // How many characters shall we start searching on? - this.iMinimumSearchChars = 'iMinimumSearchChars' in this.opt ? this.opt.iMinimumSearchChars : 3; + this.iMinimumSearchChars = this.opt.iMinimumSearchChars || 3; // Should selected items be added to a list? - this.bItemList = 'bItemList' in this.opt ? this.opt.bItemList : false; + this.bItemList = this.opt.bItemList || false; // Are there any items that should be added in advance? - this.aListItems = 'aListItems' in this.opt ? this.opt.aListItems : []; - - this.sItemTemplate = 'sItemTemplate' in this.opt ? this.opt.sItemTemplate : '%item_name% '; - - this.sTextDeleteItem = 'sTextDeleteItem' in this.opt ? this.opt.sTextDeleteItem : ''; - + this.aListItems = this.opt.aListItems || []; + + this.sItemTemplate = this.opt.sItemTemplate || '%item_name% '; + this.sTextDeleteItem = this.opt.sTextDeleteItem || ''; + this.oItemTokens = { + 'post_name': this.opt.sPostName, + 'images_url': smf_images_url, + 'delete_text': this.sTextDeleteItem + }; this.oCallback = {}; this.bDoAutoAdd = false; this.iItemCount = 0; - this.oHideTimer = null; this.bPositionComplete = false; + this.iCurrentIndex = -1; // Just make sure the page is loaded before calling the init. - addLoadEvent(this.opt.sSelf + '.init();'); + window.addEventListener("load", this.init.bind(this)); } +// Initialize our autosuggest object, adds events and containers to the element we monitor smc_AutoSuggest.prototype.init = function() { // Create a div that'll contain the results later on. @@ -61,29 +71,19 @@ smc_AutoSuggest.prototype.init = function() this.oTextHandle.name = 'dummy_' + Math.floor(Math.random() * 1000000); this.oTextHandle.autocomplete = 'off'; - this.oTextHandle.instanceRef = this; - - var fOnKeyDown = function (oEvent) { - return this.instanceRef.handleKey(oEvent); - }; - is_opera ? this.oTextHandle.onkeypress = fOnKeyDown : this.oTextHandle.onkeydown = fOnKeyDown; - - this.oTextHandle.onkeyup = function (oEvent) { - return this.instanceRef.autoSuggestUpdate(oEvent); - }; - - this.oTextHandle.onchange = function (oEvent) { - return this.instanceRef.autoSuggestUpdate(oEvent); - }; - - this.oTextHandle.onblur = function (oEvent) { - return this.instanceRef.autoSuggestHide(oEvent); - }; - - this.oTextHandle.onfocus = function (oEvent) { - return this.instanceRef.autoSuggestUpdate(oEvent); - }; + // Set up all the event monitoring + this.oTextHandle.onkeydown = this.handleKey.bind(this); + this.oTextHandle.oninput = this.autoSuggestUpdate.bind(this); + this.oTextHandle.onblur = this.autoSuggestActualHide.bind(this); + this.oTextHandle.onfocus = function() + { + if (this.oSuggestDivHandle.children.length) + this.autoSuggestShow(); + else + this.autoSuggestUpdate(); + }.bind(this); + // Adding items to a list, then we need a place to insert them if (this.bItemList) { if ('sItemListContainerId' in this.opt) @@ -91,7 +91,7 @@ smc_AutoSuggest.prototype.init = function() else { this.oItemList = document.createElement('div'); - this.oTextHandle.parentNode.insertBefore(this.oItemList, this.oTextHandle.nextSibling); + this.oTextHandle.after(this.oItemList); } } @@ -105,123 +105,67 @@ smc_AutoSuggest.prototype.init = function() // Was it an enter key - if so assume they are trying to select something. smc_AutoSuggest.prototype.handleKey = function(oEvent) { - // Grab the event object, one way or the other - if (!oEvent) - oEvent = window.event; - - // Get the keycode of the key that was pressed. - var iKeyPress = 0; - if ('keyCode' in oEvent) - iKeyPress = oEvent.keyCode; - else if ('which' in oEvent) - iKeyPress = oEvent.which; + var iKeyPress = oEvent.keyCode; switch (iKeyPress) { // Tab. case 9: - if (this.aDisplayData.length > 0) + if (this.aDisplayData.length) { - if (this.oSelectedDiv != null) + if (this.oSelectedDiv) this.itemClicked(this.oSelectedDiv); else this.handleSubmit(); } - - // Continue to the next control. - return true; - break; + break; // Enter. case 13: - if (this.aDisplayData.length > 0 && this.oSelectedDiv != null) + if (this.aDisplayData.length && this.oSelectedDiv) { this.itemClicked(this.oSelectedDiv); // Do our best to stop it submitting the form! return false; } - else - return true; - - break; + break; // Up/Down arrow? case 38: case 40: if (this.aDisplayData.length && this.oSuggestDivHandle.style.visibility != 'hidden') { - // Loop through the display data trying to find our entry. - var bPrevHandle = false; - var oToHighlight = null; - for (var i = 0; i < this.aDisplayData.length; i++) - { - // If we're going up and yet the top one was already selected don't go around. - if (this.oSelectedDiv != null && this.oSelectedDiv == this.aDisplayData[i] && i == 0 && iKeyPress == 38) - { - oToHighlight = this.oSelectedDiv; - break; - } - // If nothing is selected and we are going down then we select the first one. - if (this.oSelectedDiv == null && iKeyPress == 40) - { - oToHighlight = this.aDisplayData[i]; - break; - } - - // If the previous handle was the actual previously selected one and we're hitting down then this is the one we want. - if (bPrevHandle != false && bPrevHandle == this.oSelectedDiv && iKeyPress == 40) - { - oToHighlight = this.aDisplayData[i]; - break; - } - // If we're going up and this is the previously selected one then we want the one before, if there was one. - if (bPrevHandle != false && this.aDisplayData[i] == this.oSelectedDiv && iKeyPress == 38) - { - oToHighlight = bPrevHandle; - break; - } - // Make the previous handle this! - bPrevHandle = this.aDisplayData[i]; - } - - // If we don't have one to highlight by now then it must be the last one that we're after. - if (oToHighlight == null) - oToHighlight = bPrevHandle; - - // Remove any old highlighting. - if (this.oSelectedDiv != null) - this.itemMouseOut(this.oSelectedDiv); - // Mark what the selected div now is. - this.oSelectedDiv = oToHighlight; - this.itemMouseOver(this.oSelectedDiv); + // Simulate modulo operator in mathematics, returning only unsigned values. + const mod = (n, m) => (n % m + m) % m; + + // Calculate indexes baseed on the arrow key. + var iNum = iKeyPress - 39; + if (!this.oSelectedDiv && iNum == -1) + iNum++; + this.iCurrentIndex = mod((this.iCurrentIndex + iNum), this.aDisplayData.length); + + // Go up or down, wrapping around as needed. + this.itemOver(this.aDisplayData[this.iCurrentIndex]); } - break; + break; } - return true; } -// Functions for integration. -smc_AutoSuggest.prototype.registerCallback = function(sCallbackType, sCallback) +smc_AutoSuggest.prototype.itemOver = function(oDiv) { - switch (sCallbackType) - { - case 'onBeforeAddItem': - this.oCallback.onBeforeAddItem = sCallback; - break; + if (this.oSelectedDiv) + this.oSelectedDiv.className = 'auto_suggest_item'; - case 'onAfterAddItem': - this.oCallback.onAfterAddItem = sCallback; - break; - - case 'onAfterDeleteItem': - this.oCallback.onAfterDeleteItem = sCallback; - break; + this.oSelectedDiv = oDiv; + this.iCurrentIndex = oDiv.iCurrentIndex; + this.oSelectedDiv.className = 'auto_suggest_item_hover'; +} - case 'onBeforeUpdate': - this.oCallback.onBeforeUpdate = sCallback; - break; - } +// Functions for integration. +smc_AutoSuggest.prototype.registerCallback = function(sCallbackType, fCallback) +{ + this.oCallback[sCallbackType] = fCallback; } // User hit submit? @@ -284,25 +228,25 @@ smc_AutoSuggest.prototype.positionDiv = function() this.oSuggestDivHandle.style.left = aParentPos[0] + 'px'; this.oSuggestDivHandle.style.top = (aParentPos[1] + this.oTextHandle.offsetHeight) + 'px'; - this.oSuggestDivHandle.style.width = this.oTextHandle.style.width; + this.oSuggestDivHandle.style.width = this.oTextHandle.clientWidth + 'px'; return true; } // Do something after clicking an item. -smc_AutoSuggest.prototype.itemClicked = function(oCurElement) +smc_AutoSuggest.prototype.itemClicked = function(oDiv) { // Is there a div that we are populating? if (this.bItemList) - this.addItemLink(oCurElement.sItemId, oCurElement.innerHTML); - + this.addItemLink(oDiv.sItemId, oDiv.innerHTML); // Otherwise clear things down. else - this.oTextHandle.value = oCurElement.innerHTML.php_unhtmlspecialchars(); + this.oTextHandle.value = oDiv.innerHTML.php_unhtmlspecialchars(); this.oRealTextHandle.value = this.oTextHandle.value; this.autoSuggestActualHide(); this.oSelectedDiv = null; + this.iCurrentIndex = -1; } // Remove the last searched for name from the search box. @@ -338,24 +282,40 @@ smc_AutoSuggest.prototype.removeLastSearchString = function () smc_AutoSuggest.prototype.addItemLink = function (sItemId, sItemName, bFromSubmit) { // Increase the internal item count. - this.iItemCount ++; + this.iItemCount++; // If there's a callback then call it. - if ('oCallback' in this && 'onBeforeAddItem' in this.oCallback && typeof(this.oCallback.onBeforeAddItem) == 'string') + if (typeof this.oCallback.onBeforeAddItem == 'function') { // If it returns false the item must not be added. - if (!eval(this.oCallback.onBeforeAddItem + '(' + this.opt.sSelf + ', \'' + sItemId + '\');')) + if (!this.oCallback.onBeforeAddItem.call(this, sItemId)) + return; + } + // Backward compatibility; to be removed in the future + else if (typeof this.oCallback.onBeforeAddItem == 'string') + { + // If it returns false the item must not be added. + if (!window[this.oCallback.onBeforeAddItem].call(this, this.opt.sSelf, sItemId)) return; } var oNewDiv = document.createElement('div'); oNewDiv.id = 'suggest_' + this.opt.sSuggestId + '_' + sItemId; - setInnerHTML(oNewDiv, this.sItemTemplate.replace(/%post_name%/g, this.opt.sPostName).replace(/%item_id%/g, sItemId).replace(/%item_href%/g, smf_prepareScriptUrl(smf_scripturl) + this.opt.sURLMask.replace(/%item_id%/g, sItemId)).replace(/%item_name%/g, sItemName).replace(/%images_url%/g, smf_images_url).replace(/%self%/g, this.opt.sSelf).replace(/%delete_text%/g, this.sTextDeleteItem)); + oNewDiv.innerHTML = this.sItemTemplate.easyReplace(this.oItemTokens).easyReplace({ + 'item_id': sItemId, + 'item_href': smf_prepareScriptUrl(smf_scripturl) + this.opt.sURLMask.replace(/%item_id%/g, sItemId), + 'item_name': sItemName, + }); + + oNewDiv.getElementsByTagName('span')[0].addEventListener("click", this.deleteAddedItem.bind(this, oNewDiv.id)); this.oItemList.appendChild(oNewDiv); // If there's a registered callback, call it. - if ('oCallback' in this && 'onAfterAddItem' in this.oCallback && typeof(this.oCallback.onAfterAddItem) == 'string') - eval(this.oCallback.onAfterAddItem + '(' + this.opt.sSelf + ', \'' + oNewDiv.id + '\', ' + this.iItemCount + ');'); + if (typeof this.oCallback.onAfterAddItem == 'function') + this.oCallback.onAfterAddItem.call(this, oNewDiv.id); + // Backward compatibility; to be removed in the future + else if (typeof this.oCallback.onAfterAddItem == 'string') + window[this.oCallback.onAfterAddItem].call(this, this.opt.sSelf, oNewDiv.id, this.iItemCount); // Clear the div a bit. this.removeLastSearchString(); @@ -373,16 +333,19 @@ smc_AutoSuggest.prototype.deleteAddedItem = function (sItemId) var oDiv = document.getElementById('suggest_' + this.opt.sSuggestId + '_' + sItemId); // Remove the div if it exists. - if (typeof(oDiv) == 'object' && oDiv != null) + if (oDiv) { - oDiv.parentNode.removeChild(document.getElementById('suggest_' + this.opt.sSuggestId + '_' + sItemId)); + this.oItemList.removeChild(oDiv); // Decrease the internal item count. - this.iItemCount --; + this.iItemCount--; // If there's a registered callback, call it. - if ('oCallback' in this && 'onAfterDeleteItem' in this.oCallback && typeof(this.oCallback.onAfterDeleteItem) == 'string') - eval(this.oCallback.onAfterDeleteItem + '(' + this.opt.sSelf + ', ' + this.iItemCount + ');'); + if (typeof this.oCallback.onAfterDeleteItem == 'function') + this.oCallback.onAfterDeleteItem.call(this); + // Backward compatibility; to be removed in the future + else if (typeof this.oCallback.onAfterDeleteItem == 'string') + window[this.oCallback.onAfterDeleteItem].call(this, this.opt.sSelf, this.iItemCount); } return false; @@ -392,7 +355,7 @@ smc_AutoSuggest.prototype.deleteAddedItem = function (sItemId) smc_AutoSuggest.prototype.autoSuggestHide = function () { // Delay to allow events to propagate through.... - this.oHideTimer = setTimeout(this.opt.sSelf + '.autoSuggestActualHide();', 250); + this.oHideTimer = setTimeout(this.autoSuggestActualHide.bind(this), 250); } // Do the actual hiding after a timeout. @@ -421,77 +384,41 @@ smc_AutoSuggest.prototype.autoSuggestShow = function() // Populate the actual div. smc_AutoSuggest.prototype.populateDiv = function(aResults) { - // Cannot have any children yet. - while (this.oSuggestDivHandle.childNodes.length > 0) - { - // Tidy up the events etc too. - this.oSuggestDivHandle.childNodes[0].onmouseover = null; - this.oSuggestDivHandle.childNodes[0].onmouseout = null; - this.oSuggestDivHandle.childNodes[0].onclick = null; - - this.oSuggestDivHandle.removeChild(this.oSuggestDivHandle.childNodes[0]); - } - - // Something to display? - if (typeof(aResults) == 'undefined') + if (!aResults) { + this.oSuggestDivHandle.replaceChildren(); this.aDisplayData = []; + return false; } var aNewDisplayData = []; - for (var i = 0; i < (aResults.length > this.iMaxDisplayQuantity ? this.iMaxDisplayQuantity : aResults.length); i++) + for (var i = 0, n = Math.min(aResults.length, this.iMaxDisplayQuantity); i < n; i++) { - // Create the sub element var oNewDivHandle = document.createElement('div'); + oNewDivHandle.iCurrentIndex = i; oNewDivHandle.sItemId = aResults[i].sItemId; oNewDivHandle.className = 'auto_suggest_item'; oNewDivHandle.innerHTML = aResults[i].sItemName; - //oNewDivHandle.style.width = this.oTextHandle.style.width; - - this.oSuggestDivHandle.appendChild(oNewDivHandle); - - // Attach some events to it so we can do stuff. - oNewDivHandle.instanceRef = this; - oNewDivHandle.onmouseover = function (oEvent) - { - this.instanceRef.itemMouseOver(this); - } - oNewDivHandle.onmouseout = function (oEvent) - { - this.instanceRef.itemMouseOut(this); - } - oNewDivHandle.onclick = function (oEvent) - { - this.instanceRef.itemClicked(this); - } - + oNewDivHandle.onmouseover = this.itemOver.bind(this, oNewDivHandle); + oNewDivHandle.onclick = this.itemClicked.bind(this, oNewDivHandle); aNewDisplayData[i] = oNewDivHandle; } this.aDisplayData = aNewDisplayData; + this.oSuggestDivHandle.replaceChildren(...aNewDisplayData); return true; } -// Refocus the element. -smc_AutoSuggest.prototype.itemMouseOver = function (oCurElement) -{ - this.oSelectedDiv = oCurElement; - oCurElement.className = 'auto_suggest_item_hover'; -} - -// Onfocus the element -smc_AutoSuggest.prototype.itemMouseOut = function (oCurElement) -{ - oCurElement.className = 'auto_suggest_item'; -} - +// Callback function for the XML request, should contain the list of users that match smc_AutoSuggest.prototype.onSuggestionReceived = function (oXMLDoc) { - var sQuoteText = ''; - var aItems = oXMLDoc.getElementsByTagName('item'); + var sQuoteText = '', + aItems = oXMLDoc.getElementsByTagName('item'); + + // Go through each item received this.aCache = []; for (var i = 0; i < aItems.length; i++) { @@ -531,10 +458,17 @@ smc_AutoSuggest.prototype.onSuggestionReceived = function (oXMLDoc) smc_AutoSuggest.prototype.autoSuggestUpdate = function () { // If there's a callback then call it. - if ('onBeforeUpdate' in this.oCallback && typeof(this.oCallback.onBeforeUpdate) == 'string') + if (typeof this.oCallback.onBeforeUpdate == 'function') { // If it returns false the item must not be added. - if (!eval(this.oCallback.onBeforeUpdate + '(' + this.opt.sSelf + ');')) + if (!this.oCallback.onBeforeUpdate.call(this)) + return false; + } + // Backward compatibility; to be removed in the future + else if (typeof this.oCallback.onBeforeUpdate == 'string') + { + // If it returns false the item must not be added. + if (!window[this.oCallback.onBeforeUpdate].call(this, this.opt.sSelf)) return false; } @@ -543,9 +477,7 @@ smc_AutoSuggest.prototype.autoSuggestUpdate = function () if (isEmptyText(this.oTextHandle)) { this.aCache = []; - this.populateDiv(); - this.autoSuggestHide(); return true; @@ -565,14 +497,14 @@ smc_AutoSuggest.prototype.autoSuggestUpdate = function () var sRealLastSearch = this.sLastSearch; this.sLastSearch = sSearchString; - // Either nothing or we've completed a sentence. + // Either nothing or we've completed a sentance. if (sSearchString == '' || sSearchString.substr(sSearchString.length - 1) == '"') { this.populateDiv(); return true; } - // Nothing? + // Nothing new? if (sRealLastSearch == sSearchString) return true; @@ -613,7 +545,11 @@ smc_AutoSuggest.prototype.autoSuggestUpdate = function () sSearchString = sSearchString.php_to8bit().php_urlencode(); // Get the document. - sendXMLDocument.call(this, this.sRetrieveURL.replace(/%scripturl%/g, smf_prepareScriptUrl(smf_scripturl)).replace(/%suggest_type%/g, this.opt.sSearchType).replace(/%search%/g, sSearchString).replace(/%sessionVar%/g, this.opt.sSessionVar).replace(/%sessionID%/g, this.opt.sSessionId).replace(/%time%/g, new Date().getTime()), '', this.onSuggestionReceived); + var sRetrieveURL = this.sRetrieveURL.easyReplace(this.oRetrieveTokens).easyReplace({ + search: sSearchString, + time: new Date().getTime() + }); + getXMLDocument.call(this, sRetrieveURL, this.onSuggestionReceived); return true; } \ No newline at end of file diff --git a/Themes/default/scripts/theme.js b/Themes/default/scripts/theme.js index cf4cd1b9a2..2bf3a241a1 100755 --- a/Themes/default/scripts/theme.js +++ b/Themes/default/scripts/theme.js @@ -38,23 +38,41 @@ if (is_ie || is_webkit || is_ff) // Toggles the element height and width styles of an image. function smc_toggleImageDimensions() { - $('.postarea .bbc_img.resized').each(function(index, item) + var oImages = document.getElementsByTagName('IMG'); + for (oImage in oImages) { - $(item).click(function(e) + // Not a resized image? Skip it. + if (oImages[oImage].className == undefined || oImages[oImage].className.indexOf('bbc_img resized') == -1) + continue; + + oImages[oImage].addEventListener('click', function() { - $(item).toggleClass('original_size'); + this.classList.toggle('original_size'); }); - }); + } } // Add a load event for the function above. -addLoadEvent(smc_toggleImageDimensions); +window.addEventListener("load", smc_toggleImageDimensions); -function smf_addButton(stripId, image, options) +// Adds a button to a certain button strip. +function smf_addButton(sButtonStripId, bUseImage, oOptions) { - $('#' + stripId).append( - '' - + options.sText + - '' - ); + var oButtonStrip = document.getElementById(sButtonStripId); + var oNewButton = document.createElement("a"); + oNewButton.href = oOptions.sUrl; + oNewButton.textContent = oOptions.sText; + oNewButton.className = 'button'; + + if (oOptions.sId) + oNewButton.id = oOptions.sId; + + if (oOptions.aEvents) + oOptions.aEvents.forEach(function (e) + { + oNewButton.addEventListener(e[0], e[1]); + }); + oButtonStrip.appendChild(oNewButton); + + return oNewButton; } \ No newline at end of file diff --git a/Themes/default/scripts/topic.js b/Themes/default/scripts/topic.js index 9ad802e9b0..05279bd674 100755 --- a/Themes/default/scripts/topic.js +++ b/Themes/default/scripts/topic.js @@ -16,30 +16,22 @@ function QuickModifyTopic(oOptions) // Used to initialise the object event handlers QuickModifyTopic.prototype.init = function () { - // Attach some events to it so we can respond to actions - this.oTopicModHandle.instanceRef = this; - - // detect and act on keypress - this.oTopicModHandle.onkeydown = function (oEvent) {return this.instanceRef.modify_topic_keypress(oEvent);}; + // Detect and act on keypress + this.oTopicModHandle.onkeydown = this.modify_topic_keypress.bind(this); // Used to detect when we've stopped editing. - this.oTopicModHandle.onclick = function (oEvent) {return this.instanceRef.modify_topic_click(oEvent);}; -} + this.oTopicModHandle.onclick = this.modify_topic_click.bind(this); +}; // called from the double click in the div QuickModifyTopic.prototype.modify_topic = function (topic_id, first_msg_id) { - // Add backwards compatibility with old themes. - if (typeof(cur_session_var) == 'undefined') - cur_session_var = 'sesc'; - // already editing if (this.bInEditMode) { - // same message then just return, otherwise drop out of this edit. + // Same message then just return, otherwise drop out of this edit. if (this.iCurTopicId == topic_id) return; - else this.modify_topic_cancel(); } @@ -146,7 +138,6 @@ QuickModifyTopic.prototype.modify_topic_done = function (XMLDoc) var error = message.getElementsByTagName("error")[0]; // No subject or other error? - if (!subject || error) return false; @@ -293,7 +284,7 @@ function QuickModify(oOptions) } // Function called when a user presses the edit button. -QuickModify.prototype.modifyMsg = function (iMessageId, blnShowSubject) +QuickModify.prototype.modifyMsg = function (iMessageId) { // Add backwards compatibility with old themes. if (typeof(sSessionVar) == 'undefined') @@ -379,8 +370,8 @@ QuickModify.prototype.modifyCancel = function () // Roll back the HTML to its original state. if (this.oCurMessageDiv) { - setInnerHTML(this.oCurMessageDiv, this.sMessageBuffer); - setInnerHTML(this.oCurSubjectDiv, this.sSubjectBuffer); + this.oCurMessageDiv.innerHTML = this.sMessageBuffer; + this.oCurSubjectDiv.innerHTML = this.sSubjectBuffer; } // No longer in edit mode, that's right. @@ -405,7 +396,7 @@ QuickModify.prototype.modifyCancel = function () return false; } -// The function called after a user wants to save her/his precious message. +// The function called after a user wants to save his precious message. QuickModify.prototype.modifySave = function (sSessionId, sSessionVar) { // We cannot save if we weren't in edit mode. @@ -432,7 +423,6 @@ QuickModify.prototype.modifySave = function (sSessionId, sSessionVar) } } - var i, x = new Array(), oCaller = this, formData = { @@ -517,10 +507,9 @@ function InTopicModeration(oOptions) this.opt = oOptions; this.bButtonsShown = false; this.iNumSelected = 0; - - // Add backwards compatibility with old themes. - if (typeof(this.opt.sSessionVar) == 'undefined') - this.opt.sSessionVar = 'sesc'; + this.oRemoveButton = null; + this.oRestoreButton = null; + this.oSplitButton = null; this.init(); } @@ -536,102 +525,93 @@ InTopicModeration.prototype.init = function() oCheckbox.className = this.opt.sButtonStrip + '_check'; oCheckbox.name = 'msgs[]'; oCheckbox.value = this.opt.aMessageIds[i]; - oCheckbox.instanceRef = this; - oCheckbox.onclick = function () { - this.instanceRef.handleClick(this); - } + oCheckbox.onclick = this.handleClick.bind(this, oCheckbox); // Append it to the container var oCheckboxContainer = document.getElementById(this.opt.sCheckboxContainerMask + this.opt.aMessageIds[i]); oCheckboxContainer.appendChild(oCheckbox); oCheckboxContainer.style.display = ''; } -} -InTopicModeration.prototype.handleClick = function(oCheckbox) -{ - if (!this.bButtonsShown && this.opt.sButtonStripDisplay) + var oButtonStrip = document.getElementById(this.opt.sButtonStrip); + var oButtonStripDisplay = document.getElementById(this.opt.sButtonStripDisplay); + + // Make sure it can go somewhere. + if (oButtonStripDisplay) + oButtonStripDisplay.style.display = ""; + else { - var oButtonStrip = document.getElementById(this.opt.sButtonStrip); - var oButtonStripDisplay = document.getElementById(this.opt.sButtonStripDisplay); + oButtonStripDisplay = document.createElement('div'); + oNewDiv.id = this.opt.sButtonStripDisplay; + oNewDiv.className = this.opt.sButtonStripClass || 'buttonlist floatbottom'; - // Make sure it can go somewhere. - if (typeof(oButtonStripDisplay) == 'object' && oButtonStripDisplay != null) - oButtonStripDisplay.style.display = ""; - else - { - var oNewDiv = document.createElement('div'); - var oNewList = document.createElement('a'); + oButtonStrip.appendChild(oButtonStripDisplay); + } - oNewDiv.id = this.opt.sButtonStripDisplay; - oNewDiv.className = this.opt.sButtonStripClass ? this.opt.sButtonStripClass : 'buttonlist floatbottom'; + // Add the 'remove selected items' button. + if (this.opt.bCanRemove) + this.oRemoveButton = smf_addButton(this.opt.sButtonStripDisplay, this.opt.bUseImageButton, { + sText: this.opt.sRemoveButtonLabel, + sImage: this.opt.sRemoveButtonImage, + sUrl: '#', + aEvents: [ + ['click', this.handleSubmit.bind(this, 'remove')] + ] + }); - oNewDiv.appendChild(oNewList); - oButtonStrip.appendChild(oNewDiv); - } + // Add the 'restore selected items' button. + if (this.opt.bCanRestore) + this.oRestoreButton = smf_addButton(this.opt.sButtonStripDisplay, this.opt.bUseImageButton, { + sText: this.opt.sRestoreButtonLabel, + sImage: this.opt.sRestoreButtonImage, + sUrl: '#', + aEvents: [ + ['click', this.handleSubmit.bind(this, 'restore')] + ] + }); - // Add the 'remove selected items' button. - if (this.opt.bCanRemove) - smf_addButton(this.opt.sButtonStripDisplay, this.opt.bUseImageButton, { - sId: this.opt.sSelf + '_remove_button', - sText: this.opt.sRemoveButtonLabel, - sImage: this.opt.sRemoveButtonImage, - sUrl: '#', - sCustom: ' onclick="return ' + this.opt.sSelf + '.handleSubmit(\'remove\')"' - }); - - // Add the 'restore selected items' button. - if (this.opt.bCanRestore) - smf_addButton(this.opt.sButtonStripDisplay, this.opt.bUseImageButton, { - sId: this.opt.sSelf + '_restore_button', - sText: this.opt.sRestoreButtonLabel, - sImage: this.opt.sRestoreButtonImage, - sUrl: '#', - sCustom: ' onclick="return ' + this.opt.sSelf + '.handleSubmit(\'restore\')"' - }); - - // Add the 'split selected items' button. - if (this.opt.bCanSplit) - smf_addButton(this.opt.sButtonStripDisplay, this.opt.bUseImageButton, { - sId: this.opt.sSelf + '_split_button', - sText: this.opt.sSplitButtonLabel, - sImage: this.opt.sSplitButtonImage, - sUrl: '#', - sCustom: ' onclick="return ' + this.opt.sSelf + '.handleSubmit(\'split\')"' - }); - - // Adding these buttons once should be enough. - this.bButtonsShown = true; - } + // Add the 'split selected items' button. + if (this.opt.bCanSplit) + this.oSplitButton = smf_addButton(this.opt.sButtonStripDisplay, this.opt.bUseImageButton, { + sText: this.opt.sSplitButtonLabel, + sImage: this.opt.sSplitButtonImage, + sUrl: '#', + aEvents: [ + ['click', this.handleSubmit.bind(this, 'split')] + ] + }); +} + +InTopicModeration.prototype.handleClick = function(oCheckbox) +{ // Keep stats on how many items were selected. this.iNumSelected += oCheckbox.checked ? 1 : -1; - // Show the number of messages selected in the button. + // Show the number of messages selected in each of the buttons. if (this.opt.bCanRemove && !this.opt.bUseImageButton) { - setInnerHTML(document.getElementById(this.opt.sSelf + '_remove_button_text'), this.opt.sRemoveButtonLabel + ' ' + this.iNumSelected + ''); - document.getElementById(this.opt.sSelf + '_remove_button_text').style.display = this.iNumSelected < 1 ? "none" : ""; + this.oRemoveButton.innerHTML = this.opt.sRemoveButtonLabel + ' [' + this.iNumSelected + ']'; + this.oRemoveButton.style.display = this.iNumSelected < 1 ? "none" : ""; } if (this.opt.bCanRestore && !this.opt.bUseImageButton) { - setInnerHTML(document.getElementById(this.opt.sSelf + '_restore_button_text'), this.opt.sRestoreButtonLabel + ' ' + this.iNumSelected + ''); - document.getElementById(this.opt.sSelf + '_restore_button_text').style.display = this.iNumSelected < 1 ? "none" : ""; + this.oRestoreButton.innerHTML = this.opt.sRestoreButtonLabel + ' [' + this.iNumSelected + ']'; + this.oRestoreButton.style.display = this.iNumSelected < 1 ? "none" : ""; } if (this.opt.bCanSplit && !this.opt.bUseImageButton) { - setInnerHTML(document.getElementById(this.opt.sSelf + '_split_button_text'), this.opt.sSplitButtonLabel + ' ' + this.iNumSelected + ''); - document.getElementById(this.opt.sSelf + '_split_button_text').style.display = this.iNumSelected < 1 ? "none" : ""; + this.oSplitButton.innerHTML = this.opt.sSplitButtonLabel + ' [' + this.iNumSelected + ']'; + this.oSplitButton.style.display = this.iNumSelected < 1 ? "none" : ""; } - - if(typeof smf_fixButtonClass == 'function') - smf_fixButtonClass(this.opt.sButtonStrip); } -InTopicModeration.prototype.handleSubmit = function (sSubmitType) +// Called when the user clicks one of the buttons that we added +InTopicModeration.prototype.handleSubmit = function (sSubmitType, oEvent) { + oEvent.preventDefault(); var oForm = document.getElementById(this.opt.sFormId); // Make sure this form isn't submitted in another way than this function. @@ -656,7 +636,7 @@ InTopicModeration.prototype.handleSubmit = function (sSubmitType) return false; oForm.action = oForm.action.replace(/;split_selection=1/, ''); - oForm.action = oForm.action + ';restore_selected=1'; + oForm.action += ';restore_selected=1'; break; case 'split': @@ -664,7 +644,7 @@ InTopicModeration.prototype.handleSubmit = function (sSubmitType) return false; oForm.action = oForm.action.replace(/;restore_selected=1/, ''); - oForm.action = oForm.action + ';split_selection=1'; + oForm.action += ';split_selection=1'; break; default: From 2ae572a39c2bee2ee065d0c05d39b9778135ea9e Mon Sep 17 00:00:00 2001 From: John Rayes Date: Mon, 11 Dec 2023 15:17:43 -0700 Subject: [PATCH 014/115] move variables to a separate file Signed-off-by: John Rayes --- Themes/default/css/index.css | 611 ----------------------------- Themes/default/css/index_light.css | 611 +++++++++++++++++++++++++++++ 2 files changed, 611 insertions(+), 611 deletions(-) create mode 100644 Themes/default/css/index_light.css diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 6fbe2cf93f..d245a14459 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -1,614 +1,3 @@ -:root { - - /* Admin CP Stuff */ - - /* Styles for the file permissions section. */ - - --perm_read_bg_color: hsl(101, 78%, 86%); - --perm_writable_bg_color: hsl(0, 100%, 87%); - --perm_execute_bg_color: hsl(31, 95%, 84%); - --perm_custom_bg_color: hsl(100, 5%, 76%); - --perm_no_change_bg_color: hsl(0, 0%, 93%); - --perm_groups_bg_color: hsl(0, 0%, 100%); - --manage_boards_li_recycle_board_bg_color: hsl(180, 33%, 90%); - --manage_boards_li_redirect_board_bg_color: hsl(60, 33%, 90%); - --move_smileys_link_hover_img_border_color: hsl(208, 44%, 61%); - --move_smileys_selected_item_border_color: hsl(39, 100%, 59%); - - /* Alternating colors */ - - --stripes_even_bg_color: hsl(0, 0%, 95%); - --stripes_odd_bg_color: hsl(206, 30%, 95%); - --alternative_bg_color: hsl(0, 0%, 95%); - --alternative_bg_2_color: hsl(202, 21%, 93%); - - /* AJAX Notification Bar */ - - --ajax_in_progress_bg_color: hsl(0, 0%, 100%); - --ajax_in_progress_border_color: hsl(27, 100%, 49%); - --ajax_in_progress_border_style: solid; - --ajax_in_progress_border_width: 4px; - --ajax_in_progress_link_color: hsl(39, 100%, 50%); - --ajax_in_progress_txt_color: hsl(27, 100%, 49%); - - /* Auto Suggest Control */ - - --auto_suggest_border_color: hsl(0, 0%, 73%); - --auto_suggest_border_style: solid; - --auto_suggest_border_width: 1px; - --auto_suggest_border_radius: 3px; - --auto_suggest_item_bg_color: hsl(0, 0%, 87%); - --auto_suggest_item_hover_bg_color: hsl(0, 0%, 53%); - --auto_suggest_item_hover_txt_color: hsl(0, 0%, 93%); - - /* Body */ - - --body_bg_color: hsl(214, 36%, 91%); - --body_txt_color: hsl(0, 0%, 30%); - --body_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; - --body_font_size: 85%; - --body_line_height: 150%; - --border_color: hsl(0, 0%, 93%); - --border_style: solid; - --border_width: 1px; - --html_bg_color: hsl(211, 32%, 36%); - --heading_font_size: 1em; - --heading_txt_color: hsl(0, 0%, 27%); - --highlight_txt_color: hsl(27, 100%, 50%) !important; - --horizontal_rule_bg_color: hsl(0, 0%, 100%); - --horizontal_rule_box_shadow: 0 1px 0 hsl(0, 0%, 73%)inset; - --link: hsl(213, 58%, 37%); - --link_hover: hsl(213, 58%, 37%); - --moderation_link_bg_color: hsl(39, 100%, 48%); - --moderation_link_border_radius: 50%; - --strong_txt_color: hsl(0, 0%, 27%); - --option_bg_hover_color: hsl(214, 36%, 91%); - --wrapper_bg_color: hsl(0, 0%, 100%); - --wrapper_border_color: hsl(0, 0%, 72%); - --wrapper_border_style: solid; - --wrapper_border_width: 1px; - --wrapper_border_radius: 8px; - --wrapper_box_shadow: 0 2px 3px hsla(0, 0%, 0%, 0.14); - --inner_section_bg_color: linear-gradient(hsl(215, 41%, 92%) 0%, hsl(0, 0%, 100%) 70%); - --inner_section_border_radius: 6px 6px 0px 0px; - --inner_wrap_bg_color: hsl(0, 0%, 100%); - --inner_wrap_border_color: hsl(0, 0%, 73%); - --inner_wrap_border_style: solid; - --inner_wrap_border_width: 1px; - --selection_bg_color: hsl(205, 100%, 80%); - --selection_txt_color: hsla(0, 0%, 0%, 0.6); - - /* Breadcrumb */ - - --breadcrumb_bg_color: hsl(0, 0%, 97%); - --breadcrumb_border_color: hsl(0, 0%, 87%); - --breadcrumb_border_style: solid; - --breadcrumb_border_width: 1px; - --breadcrumb_border_radius: 5px; - --breadcrumb_box_shadow: 0px 0px 1px 1px rgb(255,255,255) inset; - --breadcrumb_divider_color: hsl(206, 38%, 40%); - --breadcrumb_divider_font_family: Arial, sans-serif; - --breadcrumb_divider_font_size: 83.33%; - --breadcrumb_divider_line_height: 150%; - --breadcrumb_font_size: 0.9em; - --breadcrumb_link_color: hsl(213, 58%, 37%); - --breadcrumb_txt_color: hsl(0, 0%, 27%); - - /* Buttons */ - - --button_bg_color: hsl(0, 0%, 95%); - --button_bg_hover: hsl(0, 0%, 95%); - --button_bg_active: hsl(207, 31%, 32%); - --button_bg_focus: hsl(207, 31%, 32%); - --button_border_color: hsl(0, 0%, 87%) hsl(0, 0%, 73%) hsl(0, 0%, 67%) hsl(0, 0%, 87%); - --button_border_style: solid; - --button_border_width: 1px; - --button_border_radius: 3px; - --button_box_shadow: none; - --button_font_size: 0.7rem; - --button_line_height: 2em; - --button_padding: 1px 8px; - --button_min_height: calc(2em + 2em * (0.9 - 0.85)); /* "input" font size minus ".button" font size */ - --button_active_border_color: hsl(180, 20%, 42%); - --button_active_border_style: solid; - --button_active_border_width: 1px; - --button_active_font_weight: bold; - --button_hover_border_color: hsl(0, 0%, 67%) hsl(0, 0%, 87%) hsl(0, 0%, 87%) hsl(0, 0%, 73%); - --button_hover_box_shadow: none; - --button_txt_color: hsl(213, 58%, 34%); - --button_txt_color_active: hsl(0, 0%, 100%); - --button_txt_color_hover: hsl(35, 100%, 50%); - --button_txt_color_focus: hsl(35, 100%, 50%); - --button_txt_color_active_and_focus: hsl(35, 100%, 50%); - --button_txt_color_hover_and_focus: hsl(35, 100%, 50%); - - /* Board Index */ - - --forum_title_link_color: hsl(213, 58%, 37%); - --forum_title_font_size: 1.8em; - --forum_title_font_family: "Tahoma", sans-serif; - --children_bg_color: hsl(0, 0%, 97%); - --children_padding: 4px 5px 4px 5px; - --sub_bar_link_color: hsl(0, 0%, 33%); - --up_contain_bg_color: hsl(0, 0%, 100%); - --information_bg_color: hsl(0, 0%, 97%); - --information_border_color: hsl(0, 0%, 93%); - --information_border_style: solid; - --information_border_width: 1px; - --information_border_radius: 0 0 7px 7px; - --moderationbuttons_check_focus_box_shadow: 0 0 4px hsl(205, 65%, 57%); - - /* Category */ - - --cat_bg_color: hsl(207, 31%, 32%); - --cat_bar_border_radius: 6px 6px 0 0; - --cat_bar_collapsed_border_radius: 6px; - --cat_bar_desc_txt_color: hsl(0, 0%, 100%); - --cat_bar_link_color: hsl(0, 0%, 100%); - --cat_bar_strong_txt_color: hsl(0, 0%, 100%); - --cat_bar_inner_padding: 8px 12px 6px 12px; - --cat_bar_outer_padding: 0px 0px 2px 0px; - - /* Calendar */ - --calendar_day_days_hover_bg_color: hsla(0, 0%, 100%, 0.4); - --calendar_td_events_bg_color: hsla(117, 92%, 52%, 0.1); - --calendar_td_events_bg_color_hover: hsla(117, 92%, 52%, 0.2); - --calendar_td_holidays_bg_color: hsla(216, 92%, 53%, 0.1); - --calendar_td_holidays_bg_color_hover: hsla(216, 92%, 53%, 0.2); - --calendar_td_birthdays_bg_color: hsla(264, 100%, 50%, 0.1); - --calendar_td_birthdays_bg_color_hover: hsla(270, 100%, 60%, 0.2); - --calendar_event_time_text_color: hsl(0, 0%, 47%); - --calendar_td_days_link_hover_bg_color: hsla(207, 28%, 52%, 0.2); - - /* Info Center*/ - - --info_block_information_bg_color: hsl(0, 0%, 100%); - --info_center_container_bg_color: hsl(0, 0%, 96%); - --info_center_border_radius: 3px; - --info_center_box_shadow: 0px 2px 0px hsl(210, 11%, 85%); - --roundframe_bg_color: hsl(0, 0%, 96%); - --roundframe_border_radius: 7px; - - /* Title Bar */ - - --title_bar_bg_color: hsl(0, 0%, 100%); - --title_bar_border_bottom_color: hsl(35, 100%, 50%); - --title_bar_border_bottom_style: solid; - --title_bar_border_bottom_width: 2px; - --title_bar_border_top_color: hsl(35, 100%, 50%); - --title_bar_border_top_style: solid; - --title_bar_border_top_width: 2px; - --title_bar_border_radius: 2px 2px 0 0; - --title_bar_link: hsl(0, 0%, 33%); - --title_bar_inner_padding: 8px 12px 6px 12px; - --title_bar_outer_padding: 0px; - - /* Calendar colors for birthdays, events and holidays */ - - --birthday_txt_color: hsl(284, 90%, 40%); - --event_txt_color: hsl(120, 90%, 28%); - --holiday_txt_color: hsl(218, 100%, 50%); - --warn_moderate_txt_color: hsl(39, 100%, 50%); - --warn_watch_txt_color: hsl(120, 100%, 25%); - - /*Error, Info, and Notice Boxes. */ - - --error_box_bg_color: hsl(0, 100%, 97%); - --error_box_border_color: hsl(353, 60%, 50%); - --error_box_border_style: solid; - --error_box_border_width: 2px; - --notice_box_bg_color: hsl(50, 100%, 90%); - --notice_box_border_color: hsl(48, 100%, 57%); - --notice_box_border_style: solid; - --notice_box_border_width: 1px; - --notice_box_txt_color: hsl(0, 0%, 40%); - --info_box_bg_color: hsl(120, 100%, 90%); - --info_box_border_color: hsl(120, 100%, 25%); - --info_box_border_style: solid; - --info_box_border_width: 1px; - --info_box_txt_color: hsl(0, 0%, 13%); - --desc_box_border_color: hsl(0, 0%, 77%); - --desc_box_border_style: solid; - --desc_box_border_width: 1px; - - /* File Error */ - - --errorfile_table_td_bg_color: hsl(0, 0%, 98%); - --errorfile_table_current_bg_color: hsl(0, 87%, 88%); - --errorfile_table_file_line_bg_color: hsl(0, 0%, 93%); - --errorfile_table_file_line_current_bg_color: hsl(0, 93%, 77%); - - /* Code Blocks */ - - --code_bg_color: hsl(0, 0%, 95%); - --code_border_color: hsl(0, 0%, 87%); - --code_border_top_color: hsl(0, 0%, 73%); - --code_border_bottom_color: hsl(0, 0%, 67%); - --code_border_radius: 2px; - --code_font_size: 0.78rem; - --code_header_font_size: 0.9em; - --code_header_txt_color: hsl(0, 0%, 40%); - - /* Colors for background of posts requiring approval */ - - --approve_bg_color: hsl(0, 100%, 96%); - --approve_bg_color_2: hsl(0, 100%, 97%); - --approve_txt_color: hsl(0, 0%, 13%); - - /* FieldSet */ - - --fieldset_legend_txt_color: hsl(0, 0%, 33%); - --fieldset_border_color: hsl(0, 0%, 93%); - --fieldset_border_style: solid; - --fieldset_border_width: 1px; - --fieldset_border_radius: 3px; - --fieldset_padding: 18px; - --fieldset_margin: 0px 0px 6px 0px; - - /* Footer */ - - --footer_bg_color: hsl(207, 31%, 32%); - --footer_font_size: 0.9em; - --footer_txt_color: hsl(0, 0%, 100%); - --footer_padding: 10px 0; - --footer_margin: 4em 0px 0px 0px; - - /* Generic & Progress Bar */ - - --generic_bar_bar_bg_color: hsl(39, 100%, 50%); - --generic_bar_bar_box_shadow: 4px -4px 8px hsla(0, 0%, 0%, 0.1) inset, 4px 4px 8px hsla(0, 0%, 100%, 0.3) inset; - --generic_bar_bar_border_radius: 1px; - --generic_bar_border_color: hsl(0, 4%, 80%); - --generic_bar_border_style: solid; - --generic_bar_border_width: 1px; - --generic_bar_border_radius: 2px; - --generic_bar_bg_color: hsl(0, 0%, 100%); - --generic_bar_txt_color: hsla(0, 0%, 0%, 0.6); - --generic_bar_span_txt_shadow: 1px 1px hsla(0, 0%, 100%, 0.4); - --generic_bar_vertical_bar_box_shadow: 4px -4px 4px hsla(0, 0%, 0%, 0.1) inset, 4px 4px 4px hsla(0, 0%, 100%, 0.3) inset; - --progress_bar_border_radius: 4px; - --progress_bar_txt_color: hsla(0, 0%, 0%, 0.8); - --progress_bar_bar_bg_color: hsl(100, 67%, 55%); - --progress_bar_bar_bg_image: linear-gradient(135deg, hsla(0, 0%, 100%, 0.15) 25%, transparent 25%, transparent 50%, hsla(0, 0%, 100%, 0.15) 50%, hsla(0, 0%, 100%, 0.15) 75%, transparent 75%, transparent); - --progress_bar_bar_box_shadow: -1px 1px 0 hsla(0, 0%, 100%, 0.25) inset, 1px -1px 0 hsla(0, 0%, 0%, 0.1) inset; - --progress_yellow_bar_bg_color: hsl(47, 92%, 54%); - --progress_green_bar_bg_color: hsl(100, 67%, 55%); - --progress_red_bar_bg_color: hsl(6, 88%, 63%); - --progress_blue_bar_bg_color: hsl(191, 76%, 55%); - - /* Header */ - - --header_bg_color: hsl(0, 0%, 100%); - --top_info_border_color: hsl(210, 31%, 42%); - --top_info_border_style: solid; - --top_info_border_width: 1px; - --top_info_button_login_link_font_size: 1em; - --top_info_button_signup_link_font_size: 1em; - --top_info_link_hover_bg_color: hsl(35, 100%, 50%); - --top_info_link_active_bg_color: hsl(35, 100%, 50%); - --top_info_link_focus_bg_color: hsl(211, 28%, 49%); - --top_info_link_hover_txt_color: hsl(0, 0%, 0%); - --top_info_link_txt_color: hsl(0, 0%, 10%); - --top_info_link_txt_open_color: hsl(0, 0%, 100%); - --top_info_link_border_radius: 4px; - --top_info_link_border_color: transparent; - --top_info_link_border_style: solid; - --top_info_link_border_width: 1px; - --top_info_link_padding: 5px 7px 5px 7px; - --top_info_link_font_size: 1.5em; - --top_info_active_link_color: hsl(0, 0%, 10%); - --top_info_hover_link_color: hsl(39, 100%, 50%); - --top_info_link_hover_border_color: hsl(0, 0%, 0%); - --top_info_link_focus_border_color: hsl(210, 31%, 42%); - --top_menu_bg_color: hsl(0, 0%, 100%); - --top_menu_box_shadow: 3px 3px 4px rgba(0, 0, 0, 0.3); - --top_menu_border_radius: 3px; - - /* News Section */ - --news_bg_color: hsl(222, 100%, 95%); - --news_left_bg_color: hsl(222, 100%, 91%); - --news_left_font_size: 20px; - --news_left_padding: 0px 10px; - --news_right_padding: 0px 5px 0px 5px; - --news_font_size: 0.9em; - - /* Input, Button, Select, Textarea */ - - --ibst_txt_color: hsl(0, 0%, 13%); - --ibst_bg_color: hsl(0, 0%, 100%); - --ibst_box_shadow: 1px 2px 1px hsla(213, 47%, 75%, 0.2) inset; - --ibst_border_color: hsl(0, 0%, 73%); - --ibst_border_style: solid; - --ibst_border_width: 1px; - --ibst_border_radius: 3px; - --ibst_disabled_bg_color: hsl(0, 0%, 93%); - --ibst_disabled_border_color: hsl(0, 0%, 71%); - --ibst_disabled_txt_color: hsl(0, 0%, 60%); - --ibst_focus_bg_color: hsl(0, 0%, 100%); - --ibst_focus_border_color: hsl(207, 53%, 67%); - --ibst_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; - --ibst_font_size: 85%; - --ibst_font_line_height: 150%; - --ibst_hover_border_color: hsl(207, 30%, 62%); - --ibst_textarea_hover_bg_color: hsl(0, 0%, 98%); - --ibst_padding: 0.3em 0.4em; - - /* Maintenance Mode */ - - --errorfile_table_bg_color: hsl(206, 30%, 95%); - --errorfile_table_td_current_bg_color: hsla(33, 92%, 51%, 0.2); - --errorfile_table_td_current_border_color: hsla(0, 0%, 0%, 0.2); - --errorfile_table_td_current_border_style: solid; - --errorfile_table_td_current_border_width: 1px; - - /* Menu */ - - --amt_active_bg_color: hsla(0, 0%, 0%, 0.2); - --amt_bg_color: hsl(39, 100%, 48%); - --amt_border_radius: 50%; - --amt_padding: 0px 6px; - --amt_txt_color: hsl(0, 0%, 100%); - --amt_font_size: 0.7em; - --dropmenu_amt_font_size: 1em; - --dropmenu_amt_padding: 2px 5px; - --dropmenu_bg_color: hsl(0, 0%, 100%); - --dropmenu_box_shadow: 3px 3px 4px rgba(0, 0, 0, 0.3); - --dropmenu_hover_bg_color: hsl(214, 36%, 91%); - --dropmenu_link_color: hsl(0, 0%, 17%); - --dropmenu_link_hover_color: hsl(0, 0%, 0%); - --dropmenu_link_border_radius: 4px; - --dropmenu_link_border_color: transparent; - --dropmenu_link_border_style: solid; - --dropmenu_link_border_width: 1px; - --dropmenu_link_padding: 4px 8px; - --dropmenu_li_font_size: 0.9em; - --dropmenu_li_li_font_size: 1em; - --dropmenu_strong_txt_color: hsl(0, 0%, 20%); - --dropmenu_subsections_font_family: Arial, sans-serif; - --dropmenu_subsections_font_size: 83.33%; - --dropmenu_subsections_line_height: 150%; - --menu_bg_color: hsl(207, 31%, 32%); - --menu_border_color: hsl(208, 16%, 81%); - --menu_border_style: solid; - --menu_border_width: 2px; - --menu_link_bg_hover_color: hsl(0, 0%, 100%); - --menu_link_color: hsl(0, 0%, 100%); - --menu_link_bg_active_color: hsl(0, 0%, 100%); - --menu_link_bg_active_hover_color: hsl(0, 0%, 100%); - --menu_link_bg_focus_color: hsl(0, 0%, 100%); - --menu_link_bg_hover_color: hsl(0, 0%, 100%); - --menu_link_color: hsl(0, 0%, 100%); - --menu_link_active_color: hsl(0, 0%, 0%); - --menu_link_active_hover_color: hsl(0, 0%, 0%); - --menu_link_focus_color: hsl(0, 0%, 100%); - --menu_link_hover_color: hsl(0, 0%, 100%); - - /* Mentions */ - - --atwho_view_bg_color: hsl(0, 0%, 100%); - --atwho_view_border_color: hsl(0, 0%, 93%); - --atwho_view_border_style: solid; - --atwho_view_border_width: 1px; - --atwho_view_box_shadow: 0 0 5px rgba(0, 0, 0, 0.1); - --atwho_view_border_radius: 3px; - --atwho_view_small_txt_color: hsl(0, 0%, 47%); - --atwho_view_strong_text: hsl(225, 100%, 60%); - --atwho_view_cur_bg_color: hsl(225, 100%, 60%); - --atwho_view_cur_txt_color: hsl(0, 0%, 100%); - --atwho_view_cur_small_txt_color: hsl(0, 0%, 100%); - --atwho_view_cur_strong_txt_color: hsl(0, 0%, 100%); - - /* On/Off Icons (User) */ - - --on_off_border_radius: 50%; - --on_bg_color: hsl(100, 75%, 63%); - --on_border_color: hsl(100, 61%, 55%); - --off_bg_color: hsl(0, 3%, 65%); - --off_border_color: hsl(0, 2%, 58%); - - /* Pagination */ - - --current_page_txt_color: hsl(32, 100%, 35%); - - - /* Popup Windows */ - - --popup_container_bg_color: hsla(204, 33%, 24%, 0.5); - --popup_content_bg_color: linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsl(0, 0%, 95%) 100%); - --popup_content_txt_color: #222; - --popup_content_border_color: hsl(0, 0%, 73%); - --popup_content_border_style: solid; - --popup_content_border_width: 1px; - --popup_content_border_radius: 6px 6px 2px 2px; - --popup_content_box_shadow: 0 -2px 3px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(255, 255, 255, 0.2); - --popup_content_padding: 10px 8px; - --popup_heading_txt_color: hsl(0, 0%, 100%); - --popup_heading_padding: 10px 8px; - --popup_window_bg_color: hsl(207, 31%, 32%); - --popup_window_box_shadow: 0 3px 6px rgba(0, 0, 0, 0.5); - --popup_window_border_color: hsl(0, 0%, 47%); - --popup_window_border_radius: 7px 7px 3px 3px; - --popup_window_padding: 0px 6px 6px 6px; - - /* Post Bit Section */ - - --display_head_txt_color: hsl(0, 0%, 58%); - --poster_online_link_color: hsl(30, 98%, 38%); - --key_post_info_link_color: hsl(30, 65%, 41%); - --keyinfo_postinfo_modified_txt_color: hsl(0, 0%, 20%); - --subject_title_link_color: hsl(0, 0%, 20%); - --page_number_txt_color: hsl(30, 65%, 41%); - --inner_border_color: hsl(0, 0%, 75%); - --inner_border_style: solid; - --inner_border_width: 1px; - --inner_box_shadow: 0 1px 0 hsl(0, 0%, 100%) inset; - --signature_border_color: hsl(0, 0%, 75%); - --signature_box_shadow: 0 1px 0 hsl(0, 0%, 100%) inset; - - /* Post Draft Options */ - - --post_draft_options_bg_color: hsl(0, 0%, 99%); - --post_draft_options_border_color: hsl(0, 0%, 67%); - --post_draft_options_border_style: solid; - --post_draft_options_border_width: 1px; - --post_draft_options_border_left_color: hsl(0, 0%, 73%); - --post_draft_options_border_left_style: solid; - --post_draft_options_border_left_width: 1px; - --post_draft_options_border_radius: 0 0 4px 4px; - --post_draft_options_settings_border_color: hsl(0, 0%, 89%); - --post_draft_options_settings_border_style: solid; - --post_draft_options_settings_border_width: 1px; - --post_draft_options_settings_strong_txt_color: hsl(0, 0%, 33%); - - /* Post Options */ - - --post_options_bg_color: hsl(0, 0%, 100%); - --post_options_border_color: hsl(0, 0%, 60%); - --post_options_border_style: solid; - --post_options_border_width: 1px; - --post_options_border_radius: 4px 0px 4px 4px; - --post_options_border_color_hover: hsl(212, 15%, 80%); - --post_options_link_border_radius: 3px; - --post_options_font_weight: normal; - - /* Post BBC Links */ - - --bbc_link_border_color: hsl(218, 29%, 74%); - --bbc_link_hover_border_color: hsl(220, 33%, 30%); - --bbc_link_hover_border_style: solid; - --bbc_link_hover_border_width: 1px; - - /* Profile Section */ - - --activity_stats_bg_color: hsl(0, 0%, 93%); - --activity_stats_border_color: hsl(0, 0%, 40%); - --activity_stats_border_style: solid; - --activity_stats_border_width: 1px; - --detailedinfo_border_color: hsl(0, 0%, 80%); - --detailedinfo_border_style: solid; - --detailedinfo_border_width: 1px; - --detailedinfo_txt_color: hsl(0, 0%, 27%); - --counter_txt_color: hsl(0, 0%, 25%); - --list_posts_box_shadow: 0 1px 0 hsl(0, 0%, 100%) inset; - --pick_theme_selected_bg_color: hsl(206, 33%, 85%); - --unread_pm_bg_color: hsl(120, 100%, 90%); - --unread_notify_hover_bg_color: hsl(0, 0%, 93%); - - /* User information. */ - - --profile_user_links_li_font_size: .8rem; - --profile_user_links_li_padding: 10px; - --profile_username_font_size: 150%; - - /* Progress Bars & Generic Bars & Warning Bars & Personal Message Bar*/ - - --personal_messages_capcity_bar_bg_color: hsl(206, 30%, 95%); - --personal_messages_capcity_bar_border_color: hsl(0, 0%, 68%); - --personal_messages_capcity_bar_border_style: solid; - --personal_messages_capcity_bar_border_width: 1px; - --personal_messages_empty_capacity_bar_bg_color: hsl(111, 41%, 73%); - --personal_messages_filled_capacity_bar_bg_color: hsl(42, 100%, 47%); - --personal_messages_full_capacity_bar_bg_color: hsl(0, 93%, 49%); - --warning_level_none_bar_bg_color: hsl(100, 67%, 55%); - --warning_level_watched_bar_bg_color: hsl(51, 100%, 50%); - --warning_level_moderated_bar_bg_color: hsl(39, 100%, 50%); - --warning_level_muted_bar_bg_color: hsl(6, 88%, 63%); - - /* Quote Blocks */ - - --quote_block_alt_bg: hsl(198, 48%, 95%); - --quote_block_standard_bg: hsl(224, 55%, 92%); - --quote_block_border_color: hsl(195, 17%, 86%); - --quote_block_border_style: solid; - --quote_block_border_width: 1px; - --quote_block_border_lr_color: hsl(0, 0%, 67%); - --quote_block_border_lr_style: solid; - --quote_block_border_lr_width: 2px; - --quote_block_font_size: 0.85rem; - --quote_cite_border_color: hsla(0, 0%, 0%, 0.1); - --quote_cite_border_style: solid; - --quote_cite_border_width: 1px; - --quote_cite_before_font_size: 22px; - --quote_cite_before_font_style: normal; - --quote_cite_font_size: 0.9em; - --quote_header_txt_color: hsl(0, 0%, 40%); - --quote_header_font_size: 0.9em; - --quote_txt_color: hsl(0, 0%, 67%); - - /* Registration Section */ - - --coppa_contact_bg_color: hsl(0, 0%, 100%); - --coppa_contact_border_color: hsl(0, 0%, 13%); - --coppa_contact_border_style: solid; - --coppa_contact_border_width: 1px; - --coppa_contact_txt_color: hsl(0, 0%, 13%); - --valid_input_bg_color: hsl(100, 100%, 97%); - --invalid_input_bg_color: hsl(0, 100%, 97%); - - /* Two Factor Auth Code Container */ - - --tfacode_bg_color: hsl(206, 74%, 89%); - - /* The "new" button */ - - --new_posts_button_bg_color: hsl(39, 100%, 48%); - --new_posts_button_border_color: hsl(0, 0%, 0%); - --new_posts_button_border_style: solid; - --new_posts_button_border_width: 1px; - --new_posts_button_border_radius: 2px; - --new_posts_button_font_family: verdana, sans-serif; - --new_posts_button_font_size: 9px; - --new_posts_button_font_weight: 700; - --new_posts_button_line_height: 15px; - --new_posts_button_txt_color: hsl(0, 0%, 0%); - --new_posts_button_txt_color_visited: hsl(0, 0%, 13%); - --new_posts_button_txt_color_hover: hsl(0, 0%, 13%); - - /* Toggle */ - - --toggle_bg: #f7f7f7 url(../images/icons/toggle.png) no-repeat 0 0 / 17px; - --toggle_bg_hover: hsl(208, 45%, 83%); - --toggle_border_color: hsl(0, 0%, 77%); - --toggle_border_style: solid; - --toggle_border_width: 1px; - --toggle_border_radius: 4px; - --toggle_box_shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 1px 1px #fff inset, 0 -5px 4px rgba(0,0,0,.1) inset; - --toggle_box_shadow_hover: 0 1px 2px rgba(0, 0, 0, 0.25) inset; - - /* ToolTips */ - - --tooltip_bg_color: hsl(0, 0%, 100%); - --tooltip_border_color: hsl(0, 0%, 67%); - --tooltip_border_style: solid; - --tooltip_border_width: 1px; - --tooltip_txt_color: hsl(0, 0%, 20%); - --tooltip_border_radius: 4px; - --tooltip_box_shadow: 1px 2px 4px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.05) inset; - - /* Window Backgrounds */ - - --window_approve_topic_bg_color: hsl(0, 100%, 90%); - --window_approve_post_bg_color: hsl(0, 100%, 90%); - --window_bg_color: hsl(0, 0%, 100%); - --window_bg_even_color: hsl(0, 0%, 100%); - --window_bg_odd_color: hsl(0, 0%, 97%); - --window_locked_bg_color: hsl(218, 20%, 92%); - --window_sticky_bg_color: hsl(209, 35%, 86%); - --window_sticky_locked_bg_color: hsl(22, 35%, 86%); - --window_target_bg_color: hsl(60, 100%, 94%); - --window_table_row_bg_hover_color: hsl(214, 36%, 91%); - - /* Video Container */ - - --video_container_bg_color: hsl(0, 0%, 0%); - - /* Basic Colors */ - --black: hsl(0, 0%, 0%); - --white: hsl(0, 0%, 100%); - --red: hsl(0, 100%, 50%); - --blue: hsl(240, 100%, 50%); - --green: hsl(120, 100%, 25%); - } /* You can find detailed information at https://wiki.simplemachines.org/smf/Curve2_CSS /* Index */ html { diff --git a/Themes/default/css/index_light.css b/Themes/default/css/index_light.css new file mode 100644 index 0000000000..dbd9818ec6 --- /dev/null +++ b/Themes/default/css/index_light.css @@ -0,0 +1,611 @@ +:root { + + /* Admin CP Stuff */ + + /* Styles for the file permissions section. */ + + --perm_read_bg_color: hsl(101, 78%, 86%); + --perm_writable_bg_color: hsl(0, 100%, 87%); + --perm_execute_bg_color: hsl(31, 95%, 84%); + --perm_custom_bg_color: hsl(100, 5%, 76%); + --perm_no_change_bg_color: hsl(0, 0%, 93%); + --perm_groups_bg_color: hsl(0, 0%, 100%); + --manage_boards_li_recycle_board_bg_color: hsl(180, 33%, 90%); + --manage_boards_li_redirect_board_bg_color: hsl(60, 33%, 90%); + --move_smileys_link_hover_img_border_color: hsl(208, 44%, 61%); + --move_smileys_selected_item_border_color: hsl(39, 100%, 59%); + + /* Alternating colors */ + + --stripes_even_bg_color: hsl(0, 0%, 95%); + --stripes_odd_bg_color: hsl(206, 30%, 95%); + --alternative_bg_color: hsl(0, 0%, 95%); + --alternative_bg_2_color: hsl(202, 21%, 93%); + + /* AJAX Notification Bar */ + + --ajax_in_progress_bg_color: hsl(0, 0%, 100%); + --ajax_in_progress_border_color: hsl(27, 100%, 49%); + --ajax_in_progress_border_style: solid; + --ajax_in_progress_border_width: 4px; + --ajax_in_progress_link_color: hsl(39, 100%, 50%); + --ajax_in_progress_txt_color: hsl(27, 100%, 49%); + + /* Auto Suggest Control */ + + --auto_suggest_border_color: hsl(0, 0%, 73%); + --auto_suggest_border_style: solid; + --auto_suggest_border_width: 1px; + --auto_suggest_border_radius: 3px; + --auto_suggest_item_bg_color: hsl(0, 0%, 87%); + --auto_suggest_item_hover_bg_color: hsl(0, 0%, 53%); + --auto_suggest_item_hover_txt_color: hsl(0, 0%, 93%); + + /* Body */ + + --body_bg_color: hsl(214, 36%, 91%); + --body_txt_color: hsl(0, 0%, 30%); + --body_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; + --body_font_size: 85%; + --body_line_height: 150%; + --border_color: hsl(0, 0%, 93%); + --border_style: solid; + --border_width: 1px; + --html_bg_color: hsl(211, 32%, 36%); + --heading_font_size: 1em; + --heading_txt_color: hsl(0, 0%, 27%); + --highlight_txt_color: hsl(27, 100%, 50%) !important; + --horizontal_rule_bg_color: hsl(0, 0%, 100%); + --horizontal_rule_box_shadow: 0 1px 0 hsl(0, 0%, 73%)inset; + --link: hsl(213, 58%, 37%); + --link_hover: hsl(213, 58%, 37%); + --moderation_link_bg_color: hsl(39, 100%, 48%); + --moderation_link_border_radius: 50%; + --strong_txt_color: hsl(0, 0%, 27%); + --option_bg_hover_color: hsl(214, 36%, 91%); + --wrapper_bg_color: hsl(0, 0%, 100%); + --wrapper_border_color: hsl(0, 0%, 72%); + --wrapper_border_style: solid; + --wrapper_border_width: 1px; + --wrapper_border_radius: 8px; + --wrapper_box_shadow: 0 2px 3px hsla(0, 0%, 0%, 0.14); + --inner_section_bg_color: linear-gradient(hsl(215, 41%, 92%) 0%, hsl(0, 0%, 100%) 70%); + --inner_section_border_radius: 6px 6px 0px 0px; + --inner_wrap_bg_color: hsl(0, 0%, 100%); + --inner_wrap_border_color: hsl(0, 0%, 73%); + --inner_wrap_border_style: solid; + --inner_wrap_border_width: 1px; + --selection_bg_color: hsl(205, 100%, 80%); + --selection_txt_color: hsla(0, 0%, 0%, 0.6); + + /* Breadcrumb */ + + --breadcrumb_bg_color: hsl(0, 0%, 97%); + --breadcrumb_border_color: hsl(0, 0%, 87%); + --breadcrumb_border_style: solid; + --breadcrumb_border_width: 1px; + --breadcrumb_border_radius: 5px; + --breadcrumb_box_shadow: 0px 0px 1px 1px rgb(255,255,255) inset; + --breadcrumb_divider_color: hsl(206, 38%, 40%); + --breadcrumb_divider_font_family: Arial, sans-serif; + --breadcrumb_divider_font_size: 83.33%; + --breadcrumb_divider_line_height: 150%; + --breadcrumb_font_size: 0.9em; + --breadcrumb_link_color: hsl(213, 58%, 37%); + --breadcrumb_txt_color: hsl(0, 0%, 27%); + + /* Buttons */ + + --button_bg_color: hsl(0, 0%, 95%); + --button_bg_hover: hsl(0, 0%, 95%); + --button_bg_active: hsl(207, 31%, 32%); + --button_bg_focus: hsl(207, 31%, 32%); + --button_border_color: hsl(0, 0%, 87%) hsl(0, 0%, 73%) hsl(0, 0%, 67%) hsl(0, 0%, 87%); + --button_border_style: solid; + --button_border_width: 1px; + --button_border_radius: 3px; + --button_box_shadow: none; + --button_font_size: 0.7rem; + --button_line_height: 2em; + --button_padding: 1px 8px; + --button_min_height: calc(2em + 2em * (0.9 - 0.85)); /* "input" font size minus ".button" font size */ + --button_active_border_color: hsl(180, 20%, 42%); + --button_active_border_style: solid; + --button_active_border_width: 1px; + --button_active_font_weight: bold; + --button_hover_border_color: hsl(0, 0%, 67%) hsl(0, 0%, 87%) hsl(0, 0%, 87%) hsl(0, 0%, 73%); + --button_hover_box_shadow: none; + --button_txt_color: hsl(213, 58%, 34%); + --button_txt_color_active: hsl(0, 0%, 100%); + --button_txt_color_hover: hsl(35, 100%, 50%); + --button_txt_color_focus: hsl(35, 100%, 50%); + --button_txt_color_active_and_focus: hsl(35, 100%, 50%); + --button_txt_color_hover_and_focus: hsl(35, 100%, 50%); + + /* Board Index */ + + --forum_title_link_color: hsl(213, 58%, 37%); + --forum_title_font_size: 1.8em; + --forum_title_font_family: "Tahoma", sans-serif; + --children_bg_color: hsl(0, 0%, 97%); + --children_padding: 4px 5px 4px 5px; + --sub_bar_link_color: hsl(0, 0%, 33%); + --up_contain_bg_color: hsl(0, 0%, 100%); + --information_bg_color: hsl(0, 0%, 97%); + --information_border_color: hsl(0, 0%, 93%); + --information_border_style: solid; + --information_border_width: 1px; + --information_border_radius: 0 0 7px 7px; + --moderationbuttons_check_focus_box_shadow: 0 0 4px hsl(205, 65%, 57%); + + /* Category */ + + --cat_bg_color: hsl(207, 31%, 32%); + --cat_bar_border_radius: 6px 6px 0 0; + --cat_bar_collapsed_border_radius: 6px; + --cat_bar_desc_txt_color: hsl(0, 0%, 100%); + --cat_bar_link_color: hsl(0, 0%, 100%); + --cat_bar_strong_txt_color: hsl(0, 0%, 100%); + --cat_bar_inner_padding: 8px 12px 6px 12px; + --cat_bar_outer_padding: 0px 0px 2px 0px; + + /* Calendar */ + --calendar_day_days_hover_bg_color: hsla(0, 0%, 100%, 0.4); + --calendar_td_events_bg_color: hsla(117, 92%, 52%, 0.1); + --calendar_td_events_bg_color_hover: hsla(117, 92%, 52%, 0.2); + --calendar_td_holidays_bg_color: hsla(216, 92%, 53%, 0.1); + --calendar_td_holidays_bg_color_hover: hsla(216, 92%, 53%, 0.2); + --calendar_td_birthdays_bg_color: hsla(264, 100%, 50%, 0.1); + --calendar_td_birthdays_bg_color_hover: hsla(270, 100%, 60%, 0.2); + --calendar_event_time_text_color: hsl(0, 0%, 47%); + --calendar_td_days_link_hover_bg_color: hsla(207, 28%, 52%, 0.2); + + /* Info Center*/ + + --info_block_information_bg_color: hsl(0, 0%, 100%); + --info_center_container_bg_color: hsl(0, 0%, 96%); + --info_center_border_radius: 3px; + --info_center_box_shadow: 0px 2px 0px hsl(210, 11%, 85%); + --roundframe_bg_color: hsl(0, 0%, 96%); + --roundframe_border_radius: 7px; + + /* Title Bar */ + + --title_bar_bg_color: hsl(0, 0%, 100%); + --title_bar_border_bottom_color: hsl(35, 100%, 50%); + --title_bar_border_bottom_style: solid; + --title_bar_border_bottom_width: 2px; + --title_bar_border_top_color: hsl(35, 100%, 50%); + --title_bar_border_top_style: solid; + --title_bar_border_top_width: 2px; + --title_bar_border_radius: 2px 2px 0 0; + --title_bar_link: hsl(0, 0%, 33%); + --title_bar_inner_padding: 8px 12px 6px 12px; + --title_bar_outer_padding: 0px; + + /* Calendar colors for birthdays, events and holidays */ + + --birthday_txt_color: hsl(284, 90%, 40%); + --event_txt_color: hsl(120, 90%, 28%); + --holiday_txt_color: hsl(218, 100%, 50%); + --warn_moderate_txt_color: hsl(39, 100%, 50%); + --warn_watch_txt_color: hsl(120, 100%, 25%); + + /*Error, Info, and Notice Boxes. */ + + --error_box_bg_color: hsl(0, 100%, 97%); + --error_box_border_color: hsl(353, 60%, 50%); + --error_box_border_style: solid; + --error_box_border_width: 2px; + --notice_box_bg_color: hsl(50, 100%, 90%); + --notice_box_border_color: hsl(48, 100%, 57%); + --notice_box_border_style: solid; + --notice_box_border_width: 1px; + --notice_box_txt_color: hsl(0, 0%, 40%); + --info_box_bg_color: hsl(120, 100%, 90%); + --info_box_border_color: hsl(120, 100%, 25%); + --info_box_border_style: solid; + --info_box_border_width: 1px; + --info_box_txt_color: hsl(0, 0%, 13%); + --desc_box_border_color: hsl(0, 0%, 77%); + --desc_box_border_style: solid; + --desc_box_border_width: 1px; + + /* File Error */ + + --errorfile_table_td_bg_color: hsl(0, 0%, 98%); + --errorfile_table_current_bg_color: hsl(0, 87%, 88%); + --errorfile_table_file_line_bg_color: hsl(0, 0%, 93%); + --errorfile_table_file_line_current_bg_color: hsl(0, 93%, 77%); + + /* Code Blocks */ + + --code_bg_color: hsl(0, 0%, 95%); + --code_border_color: hsl(0, 0%, 87%); + --code_border_top_color: hsl(0, 0%, 73%); + --code_border_bottom_color: hsl(0, 0%, 67%); + --code_border_radius: 2px; + --code_font_size: 0.78rem; + --code_header_font_size: 0.9em; + --code_header_txt_color: hsl(0, 0%, 40%); + + /* Colors for background of posts requiring approval */ + + --approve_bg_color: hsl(0, 100%, 96%); + --approve_bg_color_2: hsl(0, 100%, 97%); + --approve_txt_color: hsl(0, 0%, 13%); + + /* FieldSet */ + + --fieldset_legend_txt_color: hsl(0, 0%, 33%); + --fieldset_border_color: hsl(0, 0%, 93%); + --fieldset_border_style: solid; + --fieldset_border_width: 1px; + --fieldset_border_radius: 3px; + --fieldset_padding: 18px; + --fieldset_margin: 0px 0px 6px 0px; + + /* Footer */ + + --footer_bg_color: hsl(207, 31%, 32%); + --footer_font_size: 0.9em; + --footer_txt_color: hsl(0, 0%, 100%); + --footer_padding: 10px 0; + --footer_margin: 4em 0px 0px 0px; + + /* Generic & Progress Bar */ + + --generic_bar_bar_bg_color: hsl(39, 100%, 50%); + --generic_bar_bar_box_shadow: 4px -4px 8px hsla(0, 0%, 0%, 0.1) inset, 4px 4px 8px hsla(0, 0%, 100%, 0.3) inset; + --generic_bar_bar_border_radius: 1px; + --generic_bar_border_color: hsl(0, 4%, 80%); + --generic_bar_border_style: solid; + --generic_bar_border_width: 1px; + --generic_bar_border_radius: 2px; + --generic_bar_bg_color: hsl(0, 0%, 100%); + --generic_bar_txt_color: hsla(0, 0%, 0%, 0.6); + --generic_bar_span_txt_shadow: 1px 1px hsla(0, 0%, 100%, 0.4); + --generic_bar_vertical_bar_box_shadow: 4px -4px 4px hsla(0, 0%, 0%, 0.1) inset, 4px 4px 4px hsla(0, 0%, 100%, 0.3) inset; + --progress_bar_border_radius: 4px; + --progress_bar_txt_color: hsla(0, 0%, 0%, 0.8); + --progress_bar_bar_bg_color: hsl(100, 67%, 55%); + --progress_bar_bar_bg_image: linear-gradient(135deg, hsla(0, 0%, 100%, 0.15) 25%, transparent 25%, transparent 50%, hsla(0, 0%, 100%, 0.15) 50%, hsla(0, 0%, 100%, 0.15) 75%, transparent 75%, transparent); + --progress_bar_bar_box_shadow: -1px 1px 0 hsla(0, 0%, 100%, 0.25) inset, 1px -1px 0 hsla(0, 0%, 0%, 0.1) inset; + --progress_yellow_bar_bg_color: hsl(47, 92%, 54%); + --progress_green_bar_bg_color: hsl(100, 67%, 55%); + --progress_red_bar_bg_color: hsl(6, 88%, 63%); + --progress_blue_bar_bg_color: hsl(191, 76%, 55%); + + /* Header */ + + --header_bg_color: hsl(0, 0%, 100%); + --top_info_border_color: hsl(210, 31%, 42%); + --top_info_border_style: solid; + --top_info_border_width: 1px; + --top_info_button_login_link_font_size: 1em; + --top_info_button_signup_link_font_size: 1em; + --top_info_link_hover_bg_color: hsl(35, 100%, 50%); + --top_info_link_active_bg_color: hsl(35, 100%, 50%); + --top_info_link_focus_bg_color: hsl(211, 28%, 49%); + --top_info_link_hover_txt_color: hsl(0, 0%, 0%); + --top_info_link_txt_color: hsl(0, 0%, 10%); + --top_info_link_txt_open_color: hsl(0, 0%, 100%); + --top_info_link_border_radius: 4px; + --top_info_link_border_color: transparent; + --top_info_link_border_style: solid; + --top_info_link_border_width: 1px; + --top_info_link_padding: 5px 7px 5px 7px; + --top_info_link_font_size: 1.5em; + --top_info_active_link_color: hsl(0, 0%, 10%); + --top_info_hover_link_color: hsl(39, 100%, 50%); + --top_info_link_hover_border_color: hsl(0, 0%, 0%); + --top_info_link_focus_border_color: hsl(210, 31%, 42%); + --top_menu_bg_color: hsl(0, 0%, 100%); + --top_menu_box_shadow: 3px 3px 4px rgba(0, 0, 0, 0.3); + --top_menu_border_radius: 3px; + + /* News Section */ + --news_bg_color: hsl(222, 100%, 95%); + --news_left_bg_color: hsl(222, 100%, 91%); + --news_left_font_size: 20px; + --news_left_padding: 0px 10px; + --news_right_padding: 0px 5px 0px 5px; + --news_font_size: 0.9em; + + /* Input, Button, Select, Textarea */ + + --ibst_txt_color: hsl(0, 0%, 13%); + --ibst_bg_color: hsl(0, 0%, 100%); + --ibst_box_shadow: 1px 2px 1px hsla(213, 47%, 75%, 0.2) inset; + --ibst_border_color: hsl(0, 0%, 73%); + --ibst_border_style: solid; + --ibst_border_width: 1px; + --ibst_border_radius: 3px; + --ibst_disabled_bg_color: hsl(0, 0%, 93%); + --ibst_disabled_border_color: hsl(0, 0%, 71%); + --ibst_disabled_txt_color: hsl(0, 0%, 60%); + --ibst_focus_bg_color: hsl(0, 0%, 100%); + --ibst_focus_border_color: hsl(207, 53%, 67%); + --ibst_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; + --ibst_font_size: 85%; + --ibst_font_line_height: 150%; + --ibst_hover_border_color: hsl(207, 30%, 62%); + --ibst_textarea_hover_bg_color: hsl(0, 0%, 98%); + --ibst_padding: 0.3em 0.4em; + + /* Maintenance Mode */ + + --errorfile_table_bg_color: hsl(206, 30%, 95%); + --errorfile_table_td_current_bg_color: hsla(33, 92%, 51%, 0.2); + --errorfile_table_td_current_border_color: hsla(0, 0%, 0%, 0.2); + --errorfile_table_td_current_border_style: solid; + --errorfile_table_td_current_border_width: 1px; + + /* Menu */ + + --amt_active_bg_color: hsla(0, 0%, 0%, 0.2); + --amt_bg_color: hsl(39, 100%, 48%); + --amt_border_radius: 50%; + --amt_padding: 0px 6px; + --amt_txt_color: hsl(0, 0%, 100%); + --amt_font_size: 0.7em; + --dropmenu_amt_font_size: 1em; + --dropmenu_amt_padding: 2px 5px; + --dropmenu_bg_color: hsl(0, 0%, 100%); + --dropmenu_box_shadow: 3px 3px 4px rgba(0, 0, 0, 0.3); + --dropmenu_hover_bg_color: hsl(214, 36%, 91%); + --dropmenu_link_color: hsl(0, 0%, 17%); + --dropmenu_link_hover_color: hsl(0, 0%, 0%); + --dropmenu_link_border_radius: 4px; + --dropmenu_link_border_color: transparent; + --dropmenu_link_border_style: solid; + --dropmenu_link_border_width: 1px; + --dropmenu_link_padding: 4px 8px; + --dropmenu_li_font_size: 0.9em; + --dropmenu_li_li_font_size: 1em; + --dropmenu_strong_txt_color: hsl(0, 0%, 20%); + --dropmenu_subsections_font_family: Arial, sans-serif; + --dropmenu_subsections_font_size: 83.33%; + --dropmenu_subsections_line_height: 150%; + --menu_bg_color: hsl(207, 31%, 32%); + --menu_border_color: hsl(208, 16%, 81%); + --menu_border_style: solid; + --menu_border_width: 2px; + --menu_link_bg_hover_color: hsl(0, 0%, 100%); + --menu_link_color: hsl(0, 0%, 100%); + --menu_link_bg_active_color: hsl(0, 0%, 100%); + --menu_link_bg_active_hover_color: hsl(0, 0%, 100%); + --menu_link_bg_focus_color: hsl(0, 0%, 100%); + --menu_link_bg_hover_color: hsl(0, 0%, 100%); + --menu_link_color: hsl(0, 0%, 100%); + --menu_link_active_color: hsl(0, 0%, 0%); + --menu_link_active_hover_color: hsl(0, 0%, 0%); + --menu_link_focus_color: hsl(0, 0%, 100%); + --menu_link_hover_color: hsl(0, 0%, 100%); + + /* Mentions */ + + --atwho_view_bg_color: hsl(0, 0%, 100%); + --atwho_view_border_color: hsl(0, 0%, 93%); + --atwho_view_border_style: solid; + --atwho_view_border_width: 1px; + --atwho_view_box_shadow: 0 0 5px rgba(0, 0, 0, 0.1); + --atwho_view_border_radius: 3px; + --atwho_view_small_txt_color: hsl(0, 0%, 47%); + --atwho_view_strong_text: hsl(225, 100%, 60%); + --atwho_view_cur_bg_color: hsl(225, 100%, 60%); + --atwho_view_cur_txt_color: hsl(0, 0%, 100%); + --atwho_view_cur_small_txt_color: hsl(0, 0%, 100%); + --atwho_view_cur_strong_txt_color: hsl(0, 0%, 100%); + + /* On/Off Icons (User) */ + + --on_off_border_radius: 50%; + --on_bg_color: hsl(100, 75%, 63%); + --on_border_color: hsl(100, 61%, 55%); + --off_bg_color: hsl(0, 3%, 65%); + --off_border_color: hsl(0, 2%, 58%); + + /* Pagination */ + + --current_page_txt_color: hsl(32, 100%, 35%); + + + /* Popup Windows */ + + --popup_container_bg_color: hsla(204, 33%, 24%, 0.5); + --popup_content_bg_color: linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsl(0, 0%, 95%) 100%); + --popup_content_txt_color: #222; + --popup_content_border_color: hsl(0, 0%, 73%); + --popup_content_border_style: solid; + --popup_content_border_width: 1px; + --popup_content_border_radius: 6px 6px 2px 2px; + --popup_content_box_shadow: 0 -2px 3px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(255, 255, 255, 0.2); + --popup_content_padding: 10px 8px; + --popup_heading_txt_color: hsl(0, 0%, 100%); + --popup_heading_padding: 10px 8px; + --popup_window_bg_color: hsl(207, 31%, 32%); + --popup_window_box_shadow: 0 3px 6px rgba(0, 0, 0, 0.5); + --popup_window_border_color: hsl(0, 0%, 47%); + --popup_window_border_radius: 7px 7px 3px 3px; + --popup_window_padding: 0px 6px 6px 6px; + + /* Post Bit Section */ + + --display_head_txt_color: hsl(0, 0%, 58%); + --poster_online_link_color: hsl(30, 98%, 38%); + --key_post_info_link_color: hsl(30, 65%, 41%); + --keyinfo_postinfo_modified_txt_color: hsl(0, 0%, 20%); + --subject_title_link_color: hsl(0, 0%, 20%); + --page_number_txt_color: hsl(30, 65%, 41%); + --inner_border_color: hsl(0, 0%, 75%); + --inner_border_style: solid; + --inner_border_width: 1px; + --inner_box_shadow: 0 1px 0 hsl(0, 0%, 100%) inset; + --signature_border_color: hsl(0, 0%, 75%); + --signature_box_shadow: 0 1px 0 hsl(0, 0%, 100%) inset; + + /* Post Draft Options */ + + --post_draft_options_bg_color: hsl(0, 0%, 99%); + --post_draft_options_border_color: hsl(0, 0%, 67%); + --post_draft_options_border_style: solid; + --post_draft_options_border_width: 1px; + --post_draft_options_border_left_color: hsl(0, 0%, 73%); + --post_draft_options_border_left_style: solid; + --post_draft_options_border_left_width: 1px; + --post_draft_options_border_radius: 0 0 4px 4px; + --post_draft_options_settings_border_color: hsl(0, 0%, 89%); + --post_draft_options_settings_border_style: solid; + --post_draft_options_settings_border_width: 1px; + --post_draft_options_settings_strong_txt_color: hsl(0, 0%, 33%); + + /* Post Options */ + + --post_options_bg_color: hsl(0, 0%, 100%); + --post_options_border_color: hsl(0, 0%, 60%); + --post_options_border_style: solid; + --post_options_border_width: 1px; + --post_options_border_radius: 4px 0px 4px 4px; + --post_options_border_color_hover: hsl(212, 15%, 80%); + --post_options_link_border_radius: 3px; + --post_options_font_weight: normal; + + /* Post BBC Links */ + + --bbc_link_border_color: hsl(218, 29%, 74%); + --bbc_link_hover_border_color: hsl(220, 33%, 30%); + --bbc_link_hover_border_style: solid; + --bbc_link_hover_border_width: 1px; + + /* Profile Section */ + + --activity_stats_bg_color: hsl(0, 0%, 93%); + --activity_stats_border_color: hsl(0, 0%, 40%); + --activity_stats_border_style: solid; + --activity_stats_border_width: 1px; + --detailedinfo_border_color: hsl(0, 0%, 80%); + --detailedinfo_border_style: solid; + --detailedinfo_border_width: 1px; + --detailedinfo_txt_color: hsl(0, 0%, 27%); + --counter_txt_color: hsl(0, 0%, 25%); + --list_posts_box_shadow: 0 1px 0 hsl(0, 0%, 100%) inset; + --pick_theme_selected_bg_color: hsl(206, 33%, 85%); + --unread_pm_bg_color: hsl(120, 100%, 90%); + --unread_notify_hover_bg_color: hsl(0, 0%, 93%); + + /* User information. */ + + --profile_user_links_li_font_size: .8rem; + --profile_user_links_li_padding: 10px; + --profile_username_font_size: 150%; + + /* Progress Bars & Generic Bars & Warning Bars & Personal Message Bar*/ + + --personal_messages_capcity_bar_bg_color: hsl(206, 30%, 95%); + --personal_messages_capcity_bar_border_color: hsl(0, 0%, 68%); + --personal_messages_capcity_bar_border_style: solid; + --personal_messages_capcity_bar_border_width: 1px; + --personal_messages_empty_capacity_bar_bg_color: hsl(111, 41%, 73%); + --personal_messages_filled_capacity_bar_bg_color: hsl(42, 100%, 47%); + --personal_messages_full_capacity_bar_bg_color: hsl(0, 93%, 49%); + --warning_level_none_bar_bg_color: hsl(100, 67%, 55%); + --warning_level_watched_bar_bg_color: hsl(51, 100%, 50%); + --warning_level_moderated_bar_bg_color: hsl(39, 100%, 50%); + --warning_level_muted_bar_bg_color: hsl(6, 88%, 63%); + + /* Quote Blocks */ + + --quote_block_alt_bg: hsl(198, 48%, 95%); + --quote_block_standard_bg: hsl(224, 55%, 92%); + --quote_block_border_color: hsl(195, 17%, 86%); + --quote_block_border_style: solid; + --quote_block_border_width: 1px; + --quote_block_border_lr_color: hsl(0, 0%, 67%); + --quote_block_border_lr_style: solid; + --quote_block_border_lr_width: 2px; + --quote_block_font_size: 0.85rem; + --quote_cite_border_color: hsla(0, 0%, 0%, 0.1); + --quote_cite_border_style: solid; + --quote_cite_border_width: 1px; + --quote_cite_before_font_size: 22px; + --quote_cite_before_font_style: normal; + --quote_cite_font_size: 0.9em; + --quote_header_txt_color: hsl(0, 0%, 40%); + --quote_header_font_size: 0.9em; + --quote_txt_color: hsl(0, 0%, 67%); + + /* Registration Section */ + + --coppa_contact_bg_color: hsl(0, 0%, 100%); + --coppa_contact_border_color: hsl(0, 0%, 13%); + --coppa_contact_border_style: solid; + --coppa_contact_border_width: 1px; + --coppa_contact_txt_color: hsl(0, 0%, 13%); + --valid_input_bg_color: hsl(100, 100%, 97%); + --invalid_input_bg_color: hsl(0, 100%, 97%); + + /* Two Factor Auth Code Container */ + + --tfacode_bg_color: hsl(206, 74%, 89%); + + /* The "new" button */ + + --new_posts_button_bg_color: hsl(39, 100%, 48%); + --new_posts_button_border_color: hsl(0, 0%, 0%); + --new_posts_button_border_style: solid; + --new_posts_button_border_width: 1px; + --new_posts_button_border_radius: 2px; + --new_posts_button_font_family: verdana, sans-serif; + --new_posts_button_font_size: 9px; + --new_posts_button_font_weight: 700; + --new_posts_button_line_height: 15px; + --new_posts_button_txt_color: hsl(0, 0%, 0%); + --new_posts_button_txt_color_visited: hsl(0, 0%, 13%); + --new_posts_button_txt_color_hover: hsl(0, 0%, 13%); + + /* Toggle */ + + --toggle_bg: #f7f7f7 url(../images/icons/toggle.png) no-repeat 0 0 / 17px; + --toggle_bg_hover: hsl(208, 45%, 83%); + --toggle_border_color: hsl(0, 0%, 77%); + --toggle_border_style: solid; + --toggle_border_width: 1px; + --toggle_border_radius: 4px; + --toggle_box_shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 1px 1px #fff inset, 0 -5px 4px rgba(0,0,0,.1) inset; + --toggle_box_shadow_hover: 0 1px 2px rgba(0, 0, 0, 0.25) inset; + + /* ToolTips */ + + --tooltip_bg_color: hsl(0, 0%, 100%); + --tooltip_border_color: hsl(0, 0%, 67%); + --tooltip_border_style: solid; + --tooltip_border_width: 1px; + --tooltip_txt_color: hsl(0, 0%, 20%); + --tooltip_border_radius: 4px; + --tooltip_box_shadow: 1px 2px 4px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.05) inset; + + /* Window Backgrounds */ + + --window_approve_topic_bg_color: hsl(0, 100%, 90%); + --window_approve_post_bg_color: hsl(0, 100%, 90%); + --window_bg_color: hsl(0, 0%, 100%); + --window_bg_even_color: hsl(0, 0%, 100%); + --window_bg_odd_color: hsl(0, 0%, 97%); + --window_locked_bg_color: hsl(218, 20%, 92%); + --window_sticky_bg_color: hsl(209, 35%, 86%); + --window_sticky_locked_bg_color: hsl(22, 35%, 86%); + --window_target_bg_color: hsl(60, 100%, 94%); + --window_table_row_bg_hover_color: hsl(214, 36%, 91%); + + /* Video Container */ + + --video_container_bg_color: hsl(0, 0%, 0%); + + /* Basic Colors */ + --black: hsl(0, 0%, 0%); + --white: hsl(0, 0%, 100%); + --red: hsl(0, 100%, 50%); + --blue: hsl(240, 100%, 50%); + --green: hsl(120, 100%, 25%); +} \ No newline at end of file From 7ba4c73440c05bb959668a2487d249685e59002c Mon Sep 17 00:00:00 2001 From: John Rayes Date: Sun, 24 Sep 2023 02:45:28 -0700 Subject: [PATCH 015/115] code tag changes - wrap code in preformatted html tags - do the same in the sceditor - bonus: fix php tag processing in the sceditor - php 8.3 changes highlight_string(), so update our integrations - do not add php start and end php tags to the final output of the php bbcode - add buttons for selecting and expanding code blocks with js; don't output them from php - remove smfSelectText( ) as it is unused now Signed-off-by: John Rayes code --- Sources/Parsers/BBCodeParser.php | 50 ++----- Themes/default/css/index.css | 60 ++------- Themes/default/css/index_dark.css | 4 - Themes/default/css/index_light.css | 4 - .../default/css/jquery.sceditor.default.css | 16 +-- Themes/default/scripts/jquery.sceditor.smf.js | 42 ++++-- Themes/default/scripts/script.js | 123 ++++++------------ Themes/default/scripts/theme.js | 27 ---- 8 files changed, 101 insertions(+), 225 deletions(-) diff --git a/Sources/Parsers/BBCodeParser.php b/Sources/Parsers/BBCodeParser.php index 64be55479d..047a3cb172 100644 --- a/Sources/Parsers/BBCodeParser.php +++ b/Sources/Parsers/BBCodeParser.php @@ -314,14 +314,14 @@ class BBCodeParser extends Parser [ 'tag' => 'code', 'type' => 'unparsed_content', - 'content' => '
{txt_code} {txt_code_select}
$1', + 'content' => '
{txt_code}
$1
', 'validate' => __CLASS__ . '::codeValidate', 'block_level' => true, ], [ 'tag' => 'code', 'type' => 'unparsed_equals_content', - 'content' => '
{txt_code} ($2) {txt_code_select}
$1', + 'content' => '
{txt_code} ($2)
$1
', 'validate' => __CLASS__ . '::codeValidate', 'block_level' => true, ], @@ -1843,53 +1843,27 @@ public static function codeValidate(array &$tag, array|string &$data, array $dis if (!isset($disabled['code'])) { $code = is_array($data) ? $data[0] : $data; - $add_begin = ( - is_array($data) - && isset($data[1]) - && strtoupper($data[1]) === 'PHP' - && !str_contains($code, '<?php') - ); + $parts = preg_split('~(<\?php|\?>)~', $code, -1, PREG_SPLIT_DELIM_CAPTURE); - if ($add_begin) { - $code = '<?php ' . $code . '?>'; - $data[1] = 'PHP'; - } - - $php_parts = preg_split('~(<\?php|\?>)~', $code, -1, PREG_SPLIT_DELIM_CAPTURE); - - for ($php_i = 0, $php_n = count($php_parts); $php_i < $php_n; $php_i++) { + for ($i = 0, $n = count($parts); $i < $n; $i++) { // Do PHP code coloring? - if ($php_parts[$php_i] != '<?php') { + if ($parts[$i] != '<?php') { continue; } - $php_string = ''; + $string = ''; - while ($php_i + 1 < count($php_parts) && $php_parts[$php_i] != '?>') { - $php_string .= $php_parts[$php_i]; - $php_parts[$php_i++] = ''; + while ($i + 1 < $n && $parts[$i] != '?>') { + $string .= $parts[$i]; + $parts[$i++] = ''; } - - $php_parts[$php_i] = self::highlightPhpCode($php_string . $php_parts[$php_i]); - - if (is_array($data) && empty($data[1])) { - $data[1] = 'PHP'; - } - } - - // Fix the PHP code stuff... - $code = str_replace("
\t
", "\t", implode('', $php_parts)); - - $code = str_replace("\t", "\t", $code); - - if ($add_begin) { - $code = preg_replace(['/^(.+?)<\?.{0,40}?php(?: |\s)/', '/\?>((?:\s*<\/(font|span)>)*)$/m'], '$1', $code, 2); + $parts[$i] = self::highlightPhpCode($string . $parts[$i]); } if (is_array($data)) { - $data[0] = $code; + $data[0] = implode('', $parts); } else { - $data = $code; + $data = implode('', $parts); } } } diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index d245a14459..0aeae01d9d 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -45,37 +45,11 @@ input, button, select, textarea { font-size: var(--ibst_font_size); line-height: var(--ibst_font_line_height); background: var(--ibst_bg_color); - outline: none; border: var(--ibst_border_width) var(--ibst_border_style) var(--ibst_border_color); vertical-align: middle; border-radius: var(--ibst_border_radius); - box-shadow: var(--ibst_box_shadow_color); padding: var(--ibst_padding); } -input:hover, textarea:hover, button:hover, select:hover { - outline: none; - border-color: var(--ibst_hover_border_color); -} -textarea:hover { - background: var(--ibst_textarea_hover_bg_color); -} -input:focus, textarea:focus, button:focus, select:focus { - outline: none; - border-color: var(--ibst_focus_border_color); - background: var(--ibst_focus_bg_color); -} -input, button, select { - padding: 0 0.4em; - height: 2em; - line-height: 2em; -} -select { - padding: 0.22em 0.2em; /* selects don't apply line-height */ -} -/* Selects with more than one line */ -select[size] { - height: auto; -} input[type="file"] { padding: 2px; height: auto; @@ -102,9 +76,6 @@ textarea { font-family: "DejaVu Sans Mono", Menlo, Monaco, Consolas, monospace; } -.sceditor-container textarea, .sceditor-container textarea:focus { - box-shadow: none; -} #quick_edit_body_container textarea, .move_topic textarea, dd textarea { @@ -203,23 +174,6 @@ hr { background: var(--horizontal_rule_bg_color); box-shadow: var(--horizontal_rule_box_shadow); } -/* This is about links */ -a, a:visited { - color: var(--link); - text-decoration: none; - transition: ease 0.35s; -} -a:hover { - text-decoration: underline; - cursor: pointer; -} - -/* Help popups require a different styling of the body element. */ -/* Deprecated? */ -body#help_popup { - padding: 12px; -} - #likes li { clear: both; padding: 1px 0; @@ -294,6 +248,20 @@ a.new_posts:visited { .clear_right { clear: right; } +.reset { + all: unset; + outline: revert; +} +/* This is about links */ +a, a:visited, .reset.link { + color: var(--link); + text-decoration: none; + transition: ease 0.35s; +} +a:hover, .reset.link:hover { + text-decoration: underline; + cursor: pointer; +} /* Default font sizes: small (8pt), normal (10pt), and large (14pt). */ .smalltext, tr.smalltext th { diff --git a/Themes/default/css/index_dark.css b/Themes/default/css/index_dark.css index ddd1589207..ef302c57a2 100644 --- a/Themes/default/css/index_dark.css +++ b/Themes/default/css/index_dark.css @@ -326,13 +326,9 @@ --ibst_disabled_bg_color: hsl(0, 0%, 13%); --ibst_disabled_border_color: hsl(0, 0%, 71%); --ibst_disabled_txt_color: hsl(0, 0%, 60%); - --ibst_focus_bg_color: hsl(0, 0%, 0%); - --ibst_focus_border_color: hsl(207, 53%, 67%); --ibst_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; --ibst_font_size: 85%; --ibst_font_line_height: 150%; - --ibst_hover_border_color: hsl(207, 30%, 42%); - --ibst_textarea_hover_bg_color: hsl(0, 0%, 8%); --ibst_padding: 0.3em 0.4em; /* Maintenance Mode */ diff --git a/Themes/default/css/index_light.css b/Themes/default/css/index_light.css index dbd9818ec6..6a809fe687 100644 --- a/Themes/default/css/index_light.css +++ b/Themes/default/css/index_light.css @@ -324,13 +324,9 @@ --ibst_disabled_bg_color: hsl(0, 0%, 93%); --ibst_disabled_border_color: hsl(0, 0%, 71%); --ibst_disabled_txt_color: hsl(0, 0%, 60%); - --ibst_focus_bg_color: hsl(0, 0%, 100%); - --ibst_focus_border_color: hsl(207, 53%, 67%); --ibst_font_family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; --ibst_font_size: 85%; --ibst_font_line_height: 150%; - --ibst_hover_border_color: hsl(207, 30%, 62%); - --ibst_textarea_hover_bg_color: hsl(0, 0%, 98%); --ibst_padding: 0.3em 0.4em; /* Maintenance Mode */ diff --git a/Themes/default/css/jquery.sceditor.default.css b/Themes/default/css/jquery.sceditor.default.css index 186ee1e576..7672df2dcc 100644 --- a/Themes/default/css/jquery.sceditor.default.css +++ b/Themes/default/css/jquery.sceditor.default.css @@ -1,5 +1,5 @@ /*! SCEditor | (C) 2011-2013, Sam Clarke | sceditor.com/license */ -html, p, code::before, table { +html, p, .bbc_code code::before, table { margin: 0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; @@ -44,30 +44,22 @@ table, td { min-width: 0.5ch; } -code::before { +.bbc_code code::before { position: absolute; content: 'Code:'; top: -1.35em; left: 0; } -code[data-title]::before { +.bbc_code code[data-title]::before { content: 'Code: (' attr(data-title) ')'; } -code { +.bbc_code { margin-top: 1.5em; position: relative; background: #eee; border: 1px solid #aaa; white-space: pre-wrap; padding: .25em; - display: block; -} -.ie6 code, .ie7 code { - margin-top: 0; -} -code::before, code { - display: block; - text-align: left; } span.phpcode, font[face=monospace] { diff --git a/Themes/default/scripts/jquery.sceditor.smf.js b/Themes/default/scripts/jquery.sceditor.smf.js index 0b809bac78..25042707be 100644 --- a/Themes/default/scripts/jquery.sceditor.smf.js +++ b/Themes/default/scripts/jquery.sceditor.smf.js @@ -1557,13 +1557,15 @@ sceditor.formats.bbcode.set( sceditor.formats.bbcode.set( 'php', { tags: { - span: { - 'class': 'phpcode' + code: { + class: 'phpcode' } }, + allowsEmpty: true, isInline: true, - format: '[php]{0}[/php]', - html: '{0}' + allowedChildren: ['#', '#newline'], + format: "[php]{0}[/php]", + html: '{0}' } ); @@ -1582,23 +1584,41 @@ sceditor.formats.bbcode.set( sceditor.formats.bbcode.set( 'code', { tags: { - code: null + code: null, + div: { + class: 'codeheader' + }, + pre: { + class: 'bbc_code' + } }, isInline: false, allowedChildren: ['#', '#newline'], format: function (element, content) { - var - dom = sceditor.dom, - attr = dom.attr, - title = attr(element, 'data-title'), - from = title ?' =' + title : ''; + let title = element.getAttribute('data-title'); + + if (element.className === 'php') + return content; + else if (element.tagName === 'DIV') + return ''; + else if (element.tagName === 'PRE') + return content; + else if (element.parentNode.tagName === 'PRE' && !title) + { + const t = element.parentNode.previousSibling.textContent; + + if (t.indexOf('(') != -1) + title = t.replace(/^[^(]+\(/, '').replace(/\)? \[.+/, ''); + } + + const from = title ? ' =' + title : ''; return '[code' + from + ']' + content.replace('[', '[') + '[/code]'; }, html: function (element, attrs, content) { var from = attrs.defaultattr ? ' data-title="' + attrs.defaultattr + '"' : ''; - return '' + content.replace('[', '[').replaceAll(/\[tab\]/, '\t') + '' + return '
' + content.replace('[', '[').replaceAll(/\[tab\]/, '\t') + '
'; } } ); diff --git a/Themes/default/scripts/script.js b/Themes/default/scripts/script.js index 96c51aef38..78f9c61f28 100644 --- a/Themes/default/scripts/script.js +++ b/Themes/default/scripts/script.js @@ -1460,47 +1460,6 @@ function addLoadEvent(fNewOnload) aOnloadEvents[aOnloadEvents.length] = fNewOnload; } -// Get the text in a code tag. -function smfSelectText(oCurElement, bActOnElement) -{ - // The place we're looking for is one div up, and next door - if it's auto detect. - if (typeof(bActOnElement) == 'boolean' && bActOnElement) - var oCodeArea = document.getElementById(oCurElement); - else - var oCodeArea = oCurElement.parentNode.nextSibling; - - if (typeof(oCodeArea) != 'object' || oCodeArea == null) - return false; - - // Start off with my favourite, internet explorer. - if ('createTextRange' in document.body) - { - var oCurRange = document.body.createTextRange(); - oCurRange.moveToElementText(oCodeArea); - oCurRange.select(); - } - // Firefox at el. - else if (window.getSelection) - { - var oCurSelection = window.getSelection(); - // Safari is special! - if (oCurSelection.setBaseAndExtent) - { - oCurSelection.setBaseAndExtent(oCodeArea, 0, oCodeArea, oCodeArea.childNodes.length); - } - else - { - var curRange = document.createRange(); - curRange.selectNodeContents(oCodeArea); - - oCurSelection.removeAllRanges(); - oCurSelection.addRange(curRange); - } - } - - return false; -} - // A function used to clean the attachments on post page function cleanFileInput(idElement) { @@ -1746,40 +1705,6 @@ $(function() { return result; }); - // Generic event for smfSelectText() - $('.smf_select_text').on('click', function(e) { - e.preventDefault(); - - // Do you want to target yourself? - var actOnElement = $(this).attr('data-actonelement'); - - return typeof actOnElement !== "undefined" ? smfSelectText(actOnElement, true) : smfSelectText(this); - }); - - // Show the Expand bbc button if needed - $('.bbc_code').each(function(index, item) { - if($(item).css('max-height') == 'none') - return; - - if($(item).prop('scrollHeight') > parseInt($(item).css('max-height'), 10)) - $(item.previousSibling).find('.smf_expand_code').removeClass('hidden'); - }); - // Expand or Shrink the code bbc area - $('.smf_expand_code').on('click', function(e) { - e.preventDefault(); - - var oCodeArea = this.parentNode.nextSibling; - - if(oCodeArea.classList.contains('expand_code')) { - $(oCodeArea).removeClass('expand_code'); - $(this).html($(this).attr('data-expand-txt')); - } - else { - $(oCodeArea).addClass('expand_code'); - $(this).html($(this).attr('data-shrink-txt')); - } - }); - // Expand quotes if ((typeof(smf_quote_expand) != 'undefined') && (smf_quote_expand > 0)) { @@ -1831,6 +1756,8 @@ $(function() { }); }); } + + attachBbCodeEvents(document); }); function expand_quote_parent(oElement) @@ -1843,6 +1770,43 @@ function expand_quote_parent(oElement) }); } +function attachBbCodeEvents(parent) +{ + parent.querySelectorAll('.bbc_code').forEach(item => + { + const selectButton = document.createElement('button'); + selectButton.textContent = item.dataset.selectTxt; + selectButton.className = 'reset link'; + selectButton.addEventListener('click', function() + { + window.getSelection().selectAllChildren(item); + }); + item.previousSibling.append(' [', selectButton, ']'); + + // Show the Expand bbc button if needed + if (item.innerHeight < item.scrollHeight) + return; + + const expandButton = document.createElement('button'); + expandButton.textContent = item.dataset.expandTxt; + expandButton.className = 'reset link'; + expandButton.addEventListener('click', function() + { + if (item.classList.contains('expand_code')) + { + item.classList.remove('expand_code'); + this.textContent = item.dataset.expandTxt; + } + else + { + item.classList.add('expand_code'); + this.textContent = item.dataset.shrinkTxt; + } + }); + item.previousSibling.append(' [', expandButton, ']'); + }); +} + function avatar_fallback(e) { var e = window.e || e; var default_url = smf_avatars_url + '/default.png'; @@ -1967,14 +1931,7 @@ smc_preview_post.prototype.onDocSent = function (XMLDoc) bodyText += preview.getElementsByTagName('body')[0].childNodes[i].nodeValue; setInnerHTML(document.getElementById(this.opts.sPreviewBodyContainerID), bodyText); - $('#' + this.opts.sPreviewBodyContainerID + ' .smf_select_text').on('click', function(e) { - e.preventDefault(); - - // Do you want to target yourself? - var actOnElement = $(this).attr('data-actonelement'); - - return typeof actOnElement !== "undefined" ? smfSelectText(actOnElement, true) : smfSelectText(this); - }); + attachBbCodeEvents(document.getElementById(this.opts.sPreviewBodyContainerID)); document.getElementById(this.opts.sPreviewBodyContainerID).className = 'windowbg'; // Show a list of errors (if any). diff --git a/Themes/default/scripts/theme.js b/Themes/default/scripts/theme.js index 2bf3a241a1..d4e44c78a0 100755 --- a/Themes/default/scripts/theme.js +++ b/Themes/default/scripts/theme.js @@ -8,33 +8,6 @@ $(function() { $('a.bbc_link img').parent().css('border', '0'); }); -// The purpose of this code is to fix the height of overflow: auto blocks, because some browsers can't figure it out for themselves. -function smf_codeBoxFix() -{ - var codeFix = $('code'); - $.each(codeFix, function(index, tag) - { - if (is_webkit && $(tag).height() < 20) - $(tag).css({height: ($(tag).height() + 20) + 'px'}); - - else if (is_ff && ($(tag)[0].scrollWidth > $(tag).innerWidth() || $(tag).innerWidth() == 0)) - $(tag).css({overflow: 'scroll'}); - - // Holy conditional, Batman! - else if ( - 'currentStyle' in $(tag) && $(tag)[0].currentStyle.overflow == 'auto' - && ($(tag).innerHeight() == '' || $(tag).innerHeight() == 'auto') - && ($(tag)[0].scrollWidth > $(tag).innerWidth() || $(tag).innerWidth == 0) - && ($(tag).outerHeight() != 0) - ) - $(tag).css({height: ($(tag).height + 24) + 'px'}); - }); -} - -// Add a fix for code stuff? -if (is_ie || is_webkit || is_ff) - addLoadEvent(smf_codeBoxFix); - // Toggles the element height and width styles of an image. function smc_toggleImageDimensions() { From 4250e4128915722932fdbabee493c77239a20e71 Mon Sep 17 00:00:00 2001 From: John Rayes Date: Tue, 20 Feb 2024 03:38:46 -0700 Subject: [PATCH 016/115] extract poll js Signed-off-by: John Rayes --- Sources/Actions/Post.php | 4 +-- Sources/Poll.php | 6 +---- Themes/default/Poll.template.php | 37 ++++++---------------------- Themes/default/Post.template.php | 37 ++++++---------------------- Themes/default/scripts/post.js | 42 ++++++++++++++++++++++++++++++++ Themes/default/scripts/script.js | 18 ++------------ 6 files changed, 60 insertions(+), 84 deletions(-) create mode 100644 Themes/default/scripts/post.js diff --git a/Sources/Actions/Post.php b/Sources/Actions/Post.php index e4c318b771..ea9ad3dd0a 100644 --- a/Sources/Actions/Post.php +++ b/Sources/Actions/Post.php @@ -354,7 +354,7 @@ public function show(): void Theme::loadJavaScriptFile('drafts.js', ['defer' => false, 'minimize' => true], 'smf_drafts'); } - // quotedText.js + Theme::loadJavaScriptFile('post.js', ['defer' => true, 'minimize' => true], 'smf_post'); Theme::loadJavaScriptFile('quotedText.js', ['defer' => true, 'minimize' => true], 'smf_quotedText'); // Knowing the current board ID might be handy. @@ -1005,8 +1005,6 @@ protected function showPreview(): void 'is_last' => false, ]; } - Utils::$context['last_choice_id'] = $choice_id; - Utils::$context['choices'][count(Utils::$context['choices']) - 1]['is_last'] = true; } // Are you... a guest? diff --git a/Sources/Poll.php b/Sources/Poll.php index 7a0d53cc14..d48fc70bd9 100644 --- a/Sources/Poll.php +++ b/Sources/Poll.php @@ -1010,15 +1010,11 @@ protected function initNewPoll(): void 'guest_vote' => !empty($_POST['poll_guest_vote']), ]); - // Make all five poll choices empty. - Utils::$context['last_choice_id'] = 4; - - for ($i = 0; $i <= Utils::$context['last_choice_id']; $i++) { + for ($i = 0; $i <= 4; $i++) { $this->addChoice([ 'id' => $i, 'number' => $i + 1, 'label' => '', - 'is_last' => $i === Utils::$context['last_choice_id'], ], true); } } diff --git a/Themes/default/Poll.template.php b/Themes/default/Poll.template.php index 94626e2b56..59a06c07be 100644 --- a/Themes/default/Poll.template.php +++ b/Themes/default/Poll.template.php @@ -19,27 +19,6 @@ */ function template_main() { - // Some javascript for adding more options. - echo ' - '; - if (!empty(Utils::$context['poll_error']['messages'])) echo '
@@ -66,9 +45,9 @@ function addPollOption()
- ', Lang::getTxt('poll_question', file: 'General'), ' -
-
', Lang::getTxt('poll_question', file: 'General'), '
+ ', Lang::$txt['poll_question'], ' +
', Lang::$txt['poll_question'], '
+
'; foreach (Utils::$context['choices'] as $choice) @@ -89,9 +68,7 @@ function addPollOption() } echo ' -

- (', Lang::getTxt('poll_add_option', file: 'Post'), ')
', Lang::getTxt('poll_options', file: 'Post'), ' @@ -107,8 +84,8 @@ function addPollOption()
-
- ', Lang::getTxt('poll_run_limit', file: 'Post'), ' +
+ ', Lang::$txt['poll_run_limit'], '
@@ -123,7 +100,7 @@ function addPollOption() if (Utils::$context['poll']['guest_vote_allowed']) echo '
- +
@@ -132,7 +109,7 @@ function addPollOption() echo '
- ', Lang::getTxt('poll_results_visibility', file: 'Post'), ' + ', Lang::$txt['poll_results_visibility'], ':

diff --git a/Themes/default/Post.template.php b/Themes/default/Post.template.php index 8054b1ee65..93a52694a7 100644 --- a/Themes/default/Post.template.php +++ b/Themes/default/Post.template.php @@ -42,28 +42,6 @@ function template_main() echo ' };'; - // If this is a poll - use some javascript to ensure the user doesn't create a poll with illegal option combinations. - if (Utils::$context['make_poll']) - echo ' - var pollOptionNum = 0, pollTabIndex; - var pollOptionId = ', Utils::$context['last_choice_id'], '; - function addPollOption() - { - if (pollOptionNum == 0) - { - for (var i = 0, n = document.forms.postmodify.elements.length; i < n; i++) - if (document.forms.postmodify.elements[i].id.substr(0, 8) == \'options-\') - { - pollOptionNum++; - pollTabIndex = document.forms.postmodify.elements[i].tabIndex; - } - } - pollOptionNum++ - pollOptionId++ - - setOuterHTML(document.getElementById("pollMoreOptions"), \'

\'); - }'; - // If we are making a calendar event we want to ensure we show the current days in a month etc... this is done here. if (Utils::$context['make_event']) echo ' @@ -163,9 +141,9 @@ function addPollOption()
- ', Lang::getTxt('poll_question', file: 'General'), ' -
-
', Lang::getTxt('poll_question', file: 'General'), '
+ ', Lang::$txt['poll_question'], ' +
+
', Lang::$txt['poll_question'], '
'; @@ -181,9 +159,7 @@ function addPollOption() '; echo ' -

- (', Lang::getTxt('poll_add_option', file: 'Post'), ')
', Lang::getTxt('poll_options', file: 'Post'), ' @@ -195,8 +171,8 @@ function addPollOption()
-
- ', Lang::getTxt('poll_run_limit', file: 'Post'), ' +
+ ', Lang::$txt['poll_run_limit'], '
@@ -250,7 +226,8 @@ function addPollOption() if (Utils::$context['can_post_attachment']) echo ' - '; + + (', Lang::$txt['clean_attach'], ')'; if (!empty(Config::$modSettings['attachmentSizeLimit'])) echo ' diff --git a/Themes/default/scripts/post.js b/Themes/default/scripts/post.js new file mode 100644 index 0000000000..6288c07468 --- /dev/null +++ b/Themes/default/scripts/post.js @@ -0,0 +1,42 @@ +function addPollOption(container, e) { + var pollOptionNum = 0; + var pollOptionId = 0; + + for (const el of e.target.form.elements) { + if (el.id.substr(0, 8) == 'options-') { + pollOptionNum++; + pollOptionId = el.id.match(/\d+/)[0]; + } + } + + pollOptionNum++ + pollOptionId++ + + container.insertAdjacentHTML('beforeend', '
:
'); +} + +function pollOptions() +{ + var expire_time = this.form.poll_expire; + + if (isEmptyText(expire_time) || expire_time.value == 0) + { + document.forms.postmodify.poll_hide[2].disabled = true; + if (document.forms.postmodify.poll_hide[2].checked) + document.forms.postmodify.poll_hide[1].checked = true; + } + else + document.forms.postmodify.poll_hide[2].disabled = false; +} + +window.addEventListener('load', function () { + const form = document.forms.postmodify; + const el = form.poll_main.children[1]; + const addMoreButton = document.createElement('button'); + addMoreButton.textContent = el.dataset.moreTxt; + addMoreButton.className = 'button'; + addMoreButton.addEventListener('click', addPollOption.bind(null, el)); + el.after(addMoreButton); + + form.poll_expire.addEventListener('change', pollOptions); +}); \ No newline at end of file diff --git a/Themes/default/scripts/script.js b/Themes/default/scripts/script.js index 78f9c61f28..fb9edec5c1 100644 --- a/Themes/default/scripts/script.js +++ b/Themes/default/scripts/script.js @@ -1511,24 +1511,10 @@ function expandThumb(thumbID) return false; } -function pollOptions() -{ - var expire_time = document.getElementById('poll_expire'); - - if (isEmptyText(expire_time) || expire_time.value == 0) - { - document.forms.postmodify.poll_hide[2].disabled = true; - if (document.forms.postmodify.poll_hide[2].checked) - document.forms.postmodify.poll_hide[1].checked = true; - } - else - document.forms.postmodify.poll_hide[2].disabled = false; -} - function generateDays(offset) { // Work around JavaScript's lack of support for default values... - offset = typeof(offset) != 'undefined' ? offset : ''; + offset ||= ''; var days = 0, selected = 0; var dayElement = document.getElementById("day" + offset), yearElement = document.getElementById("year" + offset), monthElement = document.getElementById("month" + offset); @@ -1547,7 +1533,7 @@ function generateDays(offset) days = monthLength[monthElement.value - 1]; - for (i = 1; i <= days; i++) + for (let i = 1; i <= days; i++) dayElement.options[dayElement.length] = new Option(i, i); if (selected < days) From 43575860358202dc25ac182c621d9c7ca695b81d Mon Sep 17 00:00:00 2001 From: John Rayes Date: Tue, 20 Feb 2024 03:57:35 -0700 Subject: [PATCH 017/115] nuke tabindex Signed-off-by: John Rayes --- Themes/default/Calendar.template.php | 2 +- Themes/default/Display.template.php | 12 +++++----- Themes/default/GenericControls.template.php | 26 ++++----------------- Themes/default/ManageBoards.template.php | 10 ++++---- Themes/default/ManageMail.template.php | 4 ++-- Themes/default/ManageNews.template.php | 2 +- Themes/default/PersonalMessage.template.php | 6 ++--- Themes/default/Post.template.php | 12 +++++----- 8 files changed, 29 insertions(+), 45 deletions(-) diff --git a/Themes/default/Calendar.template.php b/Themes/default/Calendar.template.php index 874c7b090d..b367d87ace 100644 --- a/Themes/default/Calendar.template.php +++ b/Themes/default/Calendar.template.php @@ -825,7 +825,7 @@ function template_calendar_top($calendar_data) echo '
- '; + '; if (!empty($calendar_data['end_date'])) echo ' diff --git a/Themes/default/Display.template.php b/Themes/default/Display.template.php index 91b5192d8f..e3509446e9 100644 --- a/Themes/default/Display.template.php +++ b/Themes/default/Display.template.php @@ -352,19 +352,19 @@ function template_main() sTemplateBodyEdit: ', Utils::escapeJavaScript('
-
+
- ' . (Utils::$context['show_spellchecking'] ? ' ' : '') . ' + ' . (Utils::$context['show_spellchecking'] ? ' ' : '') . '
'), ', - sTemplateSubjectEdit: ', Utils::escapeJavaScript(''), ', + sTemplateSubjectEdit: ', Utils::escapeJavaScript(''), ', sTemplateBodyNormal: ', Utils::escapeJavaScript('%body%'), ', sTemplateSubjectNormal: ', Utils::escapeJavaScript('%subject%'), ', sTemplateTopSubject: ', Utils::escapeJavaScript('%subject%'), ', - sTemplateReasonEdit: ', Utils::escapeJavaScript(Lang::getTxt('reason_for_edit', file: 'General') . ': '), ', + sTemplateReasonEdit: ', Utils::escapeJavaScript(Lang::$txt['reason_for_edit'] . ': '), ', sTemplateReasonNormal: ', Utils::escapeJavaScript('%modify_text'), ', sErrorBorderStyle: ', Utils::escapeJavaScript('1px solid red'), (Utils::$context['can_reply']) ? ', sFormRemoveAccessKeys: \'postmodify\'' : '', ' @@ -928,7 +928,7 @@ function template_quickreply() ', Lang::getTxt('name', file: 'General'), '
- +
'; if (empty(Config::$modSettings['guest_post_no_email'])) @@ -938,7 +938,7 @@ function template_quickreply() ', Lang::getTxt('email', file: 'General'), '
- +
'; } diff --git a/Themes/default/GenericControls.template.php b/Themes/default/GenericControls.template.php index b303f8ab8f..b2ef4a88d9 100644 --- a/Themes/default/GenericControls.template.php +++ b/Themes/default/GenericControls.template.php @@ -35,7 +35,7 @@ function template_control_richedit($editor_id, $smileyContainer = null, $bbcCont $editor_context['sce_options']['toolbar'] = ''; echo ' - +
+
@@ -2063,12 +2064,12 @@ function template_install_below() if (!empty($incontext['continue'])) { echo ' - '; + '; } if (!empty($incontext['skip'])) { echo ' - '; + '; } echo '
'; @@ -2244,7 +2245,7 @@ function template_chmod_files()
- +
', Lang::$txt['error_message_click'], ' ', Lang::$txt['ftp_setup_again']; From a55d303312b289aea37520eabe3e7216f2219b4c Mon Sep 17 00:00:00 2001 From: John Rayes Date: Tue, 20 Feb 2024 04:14:41 -0700 Subject: [PATCH 019/115] Update quick modify to support Ctrl+Enter Signed-off-by: John Rayes --- Themes/default/Display.template.php | 23 +-- Themes/default/css/index.css | 34 ++-- Themes/default/scripts/topic.js | 244 +++++++++++++++------------- 3 files changed, 148 insertions(+), 153 deletions(-) diff --git a/Themes/default/Display.template.php b/Themes/default/Display.template.php index e3509446e9..86e3fd2fa9 100644 --- a/Themes/default/Display.template.php +++ b/Themes/default/Display.template.php @@ -349,25 +349,10 @@ function template_main() sClassName: \'quick_edit\', bShowModify: ', Config::$modSettings['show_modify'] ? 'true' : 'false', ', iTopicId: ', Utils::$context['current_topic'], ', - sTemplateBodyEdit: ', Utils::escapeJavaScript(' -
-
-
- - - -
- ' . (Utils::$context['show_spellchecking'] ? ' ' : '') . ' -
-
'), ', - sTemplateSubjectEdit: ', Utils::escapeJavaScript(''), ', - sTemplateBodyNormal: ', Utils::escapeJavaScript('%body%'), ', - sTemplateSubjectNormal: ', Utils::escapeJavaScript('%subject%'), ', - sTemplateTopSubject: ', Utils::escapeJavaScript('%subject%'), ', - sTemplateReasonEdit: ', Utils::escapeJavaScript(Lang::$txt['reason_for_edit'] . ': '), ', - sTemplateReasonNormal: ', Utils::escapeJavaScript('%modify_text'), ', - sErrorBorderStyle: ', Utils::escapeJavaScript('1px solid red'), (Utils::$context['can_reply']) ? ', - sFormRemoveAccessKeys: \'postmodify\'' : '', ' + sSaveButtonText: ', Utils::escapeJavaScript(Lang::$txt['save']), ', + sCancelButtonText: ', Utils::escapeJavaScript(Lang::$txt['modify_cancel']), ', + sTemplateReasonEdit: ', Utils::escapeJavaScript(Lang::$txt['reason_for_edit']) . ', + sErrorBorderStyle: ', Utils::escapeJavaScript('1px solid red'), ' }); aJumpTo[aJumpTo.length] = new JumpTo({ diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 5a936ab545..7e2614fc96 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -75,8 +75,12 @@ textarea { .monospace, .bbc_code, .bbc_tt, .phpcode, pre { font-family: "DejaVu Sans Mono", Menlo, Monaco, Consolas, monospace; } - -#quick_edit_body_container textarea, +#quickModifyForm, +#quickModifyForm label { + display: flex; + flex-direction: column; + gap: .5em; +} .move_topic textarea, dd textarea { width: 100%; @@ -559,13 +563,6 @@ strong[id^='child_list_']::after { content: "]"; } -/* Posts and personal messages displayed throughout the forum. */ -.post { - overflow: auto; - line-height: 1.4em; - padding: 1px 0; -} - /* Calendar colors for birthdays, events and holidays */ .birthday { color: var(--birthday_txt_color); @@ -1106,9 +1103,17 @@ a[class^="mobile_generic_menu_"] { /* Styles for the standard button lists. ------------------------------------------------------- */ -.buttonlist, .buttonrow, .pagelinks { - z-index: 100; - padding: 5px 0 5px 0; +.buttonlist, .buttonlistend, .buttonrow, .pagelinks, .pagesection { + align-items: baseline; + display: flex; + gap: .5em; +} +/* Items in mobile menu must be vertical. */ +.popup_window .buttonlist { + flex-direction: column; +} +.buttonlistend { + justify-content: end; } .button, .quickbuttons > li > a, .inline_mod_check { display: inline-block; @@ -1544,11 +1549,6 @@ ul li.greeting { width: 29ch; } -.quickModifyMargin { - margin: 10px 0 5px 0; - padding-bottom: 5px; -} - /* Styles for edit event section ---------------------------------------------------- */ #post_header + #post_event { diff --git a/Themes/default/scripts/topic.js b/Themes/default/scripts/topic.js index 05279bd674..cc2f35114c 100755 --- a/Themes/default/scripts/topic.js +++ b/Themes/default/scripts/topic.js @@ -278,35 +278,16 @@ function QuickModify(oOptions) this.sCurMessageId = ''; this.oCurMessageDiv = null; this.oCurSubjectDiv = null; - this.sMessageBuffer = ''; - this.sSubjectBuffer = ''; - this.aAccessKeys = new Array(); + + for (const el of document.getElementsByClassName(this.opt.sClassName)) { + el.hidden = false; + el.addEventListener('click', this.modifyMsg.bind(this, el.id.match(/\d+/))); + } } // Function called when a user presses the edit button. QuickModify.prototype.modifyMsg = function (iMessageId) { - // Add backwards compatibility with old themes. - if (typeof(sSessionVar) == 'undefined') - sSessionVar = 'sesc'; - - // Removes the accesskeys from the quickreply inputs and saves them in an array to use them later - if (typeof(this.opt.sFormRemoveAccessKeys) != 'undefined') - { - if (typeof(document.forms[this.opt.sFormRemoveAccessKeys])) - { - var aInputs = document.forms[this.opt.sFormRemoveAccessKeys].getElementsByTagName('input'); - for (var i = 0; i < aInputs.length; i++) - { - if (aInputs[i].accessKey != '') - { - this.aAccessKeys[aInputs[i].name] = aInputs[i].accessKey; - aInputs[i].accessKey = ''; - } - } - } - } - // First cancel if there's another message still being edited. if (this.bInEditMode) this.modifyCancel(); @@ -316,7 +297,7 @@ QuickModify.prototype.modifyMsg = function (iMessageId) // Send out the XMLhttp request to get more info ajax_indicator(true); - sendXMLDocument.call(this, smf_prepareScriptUrl(smf_scripturl) + 'action=quotefast;quote=' + iMessageId + ';modify;xml;' + smf_session_var + '=' + smf_session_id, '', this.onMessageReceived); + getXMLDocument.call(this, smf_prepareScriptUrl(smf_scripturl) + 'action=quotefast;quote=' + iMessageId + ';modify;xml;' + smf_session_var + '=' + smf_session_id, this.onMessageReceived); // Jump to the message document.getElementById('msg' + iMessageId).scrollIntoView(); @@ -338,28 +319,68 @@ QuickModify.prototype.onMessageReceived = function (XMLDoc) return this.modifyCancel(); // Replace the body part. - for (var i = 0; i < XMLDoc.getElementsByTagName("message")[0].childNodes.length; i++) + for (let i = 0; i < XMLDoc.getElementsByTagName("message")[0].childNodes.length; i++) sBodyText += XMLDoc.getElementsByTagName("message")[0].childNodes[i].nodeValue; - this.oCurMessageDiv = document.getElementById(this.sCurMessageId); - this.sMessageBuffer = getInnerHTML(this.oCurMessageDiv); - // We have to force the body to lose its dollar signs thanks to IE. - sBodyText = sBodyText.replace(/\$/g, '{&dollarfix;$}'); - - // Actually create the content, with a bodge for disappearing dollar signs. - setInnerHTML(this.oCurMessageDiv, this.opt.sTemplateBodyEdit.replace(/%msg_id%/g, this.sCurMessageId.substr(4)).replace(/%body%/, sBodyText).replace(/\{&dollarfix;\$\}/g, '$')); - - // Replace the subject part. - this.oCurSubjectDiv = document.getElementById('subject_' + this.sCurMessageId.substr(4)); - this.sSubjectBuffer = getInnerHTML(this.oCurSubjectDiv); - - sSubjectText = XMLDoc.getElementsByTagName('subject')[0].childNodes[0].nodeValue.replace(/\$/g, '{&dollarfix;$}'); - setInnerHTML(this.oCurSubjectDiv, this.opt.sTemplateSubjectEdit.replace(/%subject%/, sSubjectText).replace(/\{&dollarfix;\$\}/g, '$')); - - // Field for editing reason. - sReasonText = XMLDoc.getElementsByTagName('reason')[0].childNodes[0].nodeValue.replace(/\$/g, '{&dollarfix;$}'); - - $(this.oCurMessageDiv).prepend(this.opt.sTemplateReasonEdit.replace(/%modify_reason%/, sReasonText).replace(/\{&dollarfix;\$\}/g, '$')); + this.oCurMessageDiv = document.getElementById(this.sCurMessageId); + this.oCurSubjectDiv = document.getElementById('subject_' + this.sCurMessageId.substring(4)); + if (this.oCurSubjectDiv !== null) + this.oCurSubjectDiv.hidden = true; + this.oCurMessageDiv.hidden = true; + + // Actually create the content. + const form = document.createElement("form"); + form.id = "quickModifyForm"; + + var messageInput = document.createElement("textarea"); + messageInput.name = "message"; + messageInput.cols = "80"; + messageInput.rows = "10"; + messageInput.innerHTML = sBodyText; + messageInput.addEventListener('keydown', function(e) { + if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { + this.modifySave(); + } + if (e.key === "Escape") { + this.modifyCancel(); + } + }.bind(this)); + + var subjectInput = document.createElement("input"); + subjectInput.name = "subject"; + subjectInput.maxLength = "80"; + subjectInput.size = "80"; + subjectInput.value = XMLDoc.getElementsByTagName('subject')[0].childNodes[0].nodeValue; + + const reasonLabel = document.createElement("label"); + const reasonInput = document.createElement("input"); + reasonInput.name = "modify_reason"; + reasonInput.maxLength = "80"; + reasonInput.size = "80"; + reasonInput.value = XMLDoc.getElementsByTagName('reason')[0].childNodes[0].nodeValue; + + const buttonGroup = document.createElement("div"); + buttonGroup.className = 'buttonlistend'; + + const cancelButton = document.createElement("button"); + cancelButton.className = 'button'; + cancelButton.textContent = this.opt.sCancelButtonText; + cancelButton.addEventListener('click', this.modifyCancel.bind(this)); + + const saveButton = document.createElement("button"); + saveButton.className = 'button active'; + saveButton.textContent = this.opt.sSaveButtonText; + saveButton.addEventListener('click', this.modifySave.bind(this)); + + reasonLabel.append(this.opt.sTemplateReasonEdit, reasonInput); + buttonGroup.append(saveButton, cancelButton); + form.append(subjectInput, messageInput, reasonLabel, buttonGroup); + this.oCurMessageDiv.after(form); + messageInput.focus(); + + if (this.opt.funcOnAfterCreate) { + this.opt.funcOnAfterCreate.call(this, form); + } return true; } @@ -367,76 +388,47 @@ QuickModify.prototype.onMessageReceived = function (XMLDoc) // Function in case the user presses cancel (or other circumstances cause it). QuickModify.prototype.modifyCancel = function () { - // Roll back the HTML to its original state. if (this.oCurMessageDiv) { - this.oCurMessageDiv.innerHTML = this.sMessageBuffer; - this.oCurSubjectDiv.innerHTML = this.sSubjectBuffer; + this.oCurMessageDiv.hidden = false; + if (this.oCurSubjectDiv !== null) + this.oCurSubjectDiv.hidden = false; + document.forms.quickModifyForm.remove(); } // No longer in edit mode, that's right. this.bInEditMode = false; - // Let's put back the accesskeys to their original place - if (typeof(this.opt.sFormRemoveAccessKeys) != 'undefined') - { - if (typeof(document.forms[this.opt.sFormRemoveAccessKeys])) - { - var aInputs = document.forms[this.opt.sFormRemoveAccessKeys].getElementsByTagName('input'); - for (var i = 0; i < aInputs.length; i++) - { - if (typeof(this.aAccessKeys[aInputs[i].name]) != 'undefined') - { - aInputs[i].accessKey = this.aAccessKeys[aInputs[i].name]; - } - } - } - } - return false; } // The function called after a user wants to save his precious message. -QuickModify.prototype.modifySave = function (sSessionId, sSessionVar) +QuickModify.prototype.modifySave = function (e) { + e && e.preventDefault && e.preventDefault(); + // We cannot save if we weren't in edit mode. - if (!this.bInEditMode) + if (!this.bInEditMode) { return true; + } - // Add backwards compatibility with old themes. - if (typeof(sSessionVar) == 'undefined') - sSessionVar = 'sesc'; + const x = []; + submitThisOnce(document.forms.quickModifyForm); + const form = document.forms.quickModifyForm; - // Let's put back the accesskeys to their original place - if (typeof(this.opt.sFormRemoveAccessKeys) != 'undefined') - { - if (typeof(document.forms[this.opt.sFormRemoveAccessKeys])) - { - var aInputs = document.forms[this.opt.sFormRemoveAccessKeys].getElementsByTagName('input'); - for (var i = 0; i < aInputs.length; i++) - { - if (typeof(this.aAccessKeys[aInputs[i].name]) != 'undefined') - { - aInputs[i].accessKey = this.aAccessKeys[aInputs[i].name]; - } - } - } + if (form.firstChild.className === 'errorbox') { + form.firstChild.remove(); + form.message.style.border = ''; + form.subject.style.border = ''; } - var i, x = new Array(), - oCaller = this, - formData = { - subject : document.forms.quickModForm['subject'].value, - message : document.forms.quickModForm['message'].value, - topic : parseInt(document.forms.quickModForm.elements['topic'].value), - msg : parseInt(document.forms.quickModForm.elements['msg'].value), - modify_reason : document.forms.quickModForm.elements['modify_reason'].value - }; + for (const el of form.elements) { + x.push(el.name + '=' + el.value.php_to8bit().php_urlencode()); + } // Send in the XMLhttp request and let's hope for the best. ajax_indicator(true); - - sendXMLDocument.call(this, smf_prepareScriptUrl(this.opt.sScriptUrl) + "action=jsmodify;topic=" + this.opt.iTopicId + ";" + smf_session_var + "=" + smf_session_id + ";xml", formData, this.onModifyDone); + sendXMLDocument.call(this, smf_prepareScriptUrl(this.opt.sScriptUrl) + "action=jsmodify;topic=" + this.opt.iTopicId + ";msg=" + this.oCurMessageDiv.id.match(/\d+/) + ";" + smf_session_var + "=" + smf_session_id + ";xml", x.join("&"), this.onModifyDone); return false; } @@ -450,9 +442,16 @@ QuickModify.prototype.onModifyDone = function (XMLDoc) // If we didn't get a valid document, just cancel. if (!XMLDoc || !XMLDoc.getElementsByTagName('smf')[0]) { + reActivateThis(document.forms.quickModifyForm); + document.forms.quickModifyForm.message.focus(); + // Mozilla will nicely tell us what's wrong. - if (XMLDoc.childNodes.length > 0 && XMLDoc.firstChild.nodeName == 'parsererror') - setInnerHTML(document.getElementById('error_box'), XMLDoc.firstChild.textContent); + if (XMLDoc.childNodes.length > 0 && XMLDoc.firstChild.nodeName == 'parsererror') { + const oDiv = document.createElement('div'); + oDiv.innerHTML = XMLDoc.firstChild.textContent; + oDiv.className = 'errorbox'; + document.forms.quickModifyForm.prepend(oDiv); + } else this.modifyCancel(); @@ -465,40 +464,51 @@ QuickModify.prototype.onModifyDone = function (XMLDoc) if (body) { + this.bInEditMode = false; // Show new body. - var bodyText = ''; - for (var i = 0; i < body.childNodes.length; i++) + let bodyText = ''; + for (let i = 0; i < body.childNodes.length; i++) bodyText += body.childNodes[i].nodeValue; - this.sMessageBuffer = this.opt.sTemplateBodyNormal.replace(/%body%/, bodyText.replace(/\$/g, '{&dollarfix;$}')).replace(/\{&dollarfix;\$\}/g,'$'); - setInnerHTML(this.oCurMessageDiv, this.sMessageBuffer); + this.oCurMessageDiv.innerHTML = bodyText; + this.oCurMessageDiv.hidden = false; + + // Show new subject div, update in case it changed. + if (this.oCurSubjectDiv !== null) { + let oSubject = message.getElementsByTagName('subject')[0], + sSubjectText = oSubject.childNodes[0].nodeValue; - // Show new subject, but only if we want to... - var oSubject = message.getElementsByTagName('subject')[0]; - var sSubjectText = oSubject.childNodes[0].nodeValue.replace(/\$/g, '{&dollarfix;$}'); - var sTopSubjectText = oSubject.childNodes[0].nodeValue.replace(/\$/g, '{&dollarfix;$}'); - this.sSubjectBuffer = this.opt.sTemplateSubjectNormal.replace(/%msg_id%/g, this.sCurMessageId.substr(4)).replace(/%subject%/, sSubjectText).replace(/\{&dollarfix;\$\}/g,'$'); - setInnerHTML(this.oCurSubjectDiv, this.sSubjectBuffer); + this.oCurSubjectDiv.innerHTML = sSubjectText; + this.oCurSubjectDiv.hidden = false; + } - // If this is the first message, also update the topic subject. - if (oSubject.getAttribute('is_first') == '1') - setInnerHTML(document.getElementById('top_subject'), this.opt.sTemplateTopSubject.replace(/%subject%/, sTopSubjectText).replace(/\{&dollarfix;\$\}/g, '$')); + document.forms.quickModifyForm.remove(); // Show this message as 'modified on x by y'. if (this.opt.bShowModify) - $('#modified_' + this.sCurMessageId.substr(4)).html(message.getElementsByTagName('modified')[0].childNodes[0].nodeValue.replace(/\$/g, '{&dollarfix;$}')); + { + let modified = document.getElementById('modified_' + this.sCurMessageId.substring(4)); + modified.innerHTML = message.getElementsByTagName('modified')[0].childNodes[0].nodeValue; + } // Show a message indicating the edit was successfully done. - $('
',{ - text: message.getElementsByTagName('success')[0].childNodes[0].nodeValue.replace(/\$/g, '{&dollarfix;$}'), - class: 'infobox' - }).prependTo('#' + this.sCurMessageId).delay(5000).fadeOutAndRemove(400); + const oDiv = document.createElement('div'); + oDiv.textContent = message.getElementsByTagName('success')[0].childNodes[0].nodeValue; + oDiv.className = 'infobox'; + this.oCurMessageDiv.before(oDiv); + setTimeout(() => oDiv.remove(), 4000); } else if (error) { - setInnerHTML(document.getElementById('error_box'), error.childNodes[0].nodeValue); - document.forms.quickModForm.message.style.border = error.getAttribute('in_body') == '1' ? this.opt.sErrorBorderStyle : ''; - document.forms.quickModForm.subject.style.border = error.getAttribute('in_subject') == '1' ? this.opt.sErrorBorderStyle : ''; + reActivateThis(document.forms.quickModifyForm); + const oDiv = document.createElement('div'); + oDiv.innerHTML = error.childNodes[0].nodeValue; + oDiv.className = 'errorbox'; + document.forms.quickModifyForm.prepend(oDiv); + + document.forms.quickModifyForm.message.focus(); + document.forms.quickModifyForm.message.style.border = error.getAttribute('in_body') == '1' ? this.opt.sErrorBorderStyle : ''; + document.forms.quickModifyForm.subject.style.border = error.getAttribute('in_subject') == '1' ? this.opt.sErrorBorderStyle : ''; } } From 5c8746b332cc3f5c59a9dd76ece79e3663c622ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Andr=C3=A9s?= Date: Thu, 28 Dec 2023 21:32:06 -0600 Subject: [PATCH 020/115] css rev MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Diego Andrés --- Themes/default/css/custom.css | 1 + Themes/default/css/index.css | 4046 ++++++++++++++++++++++----------- Themes/default/css/rtl.css | 181 +- 3 files changed, 2729 insertions(+), 1499 deletions(-) diff --git a/Themes/default/css/custom.css b/Themes/default/css/custom.css index bb2c8663fe..5663f28d9c 100644 --- a/Themes/default/css/custom.css +++ b/Themes/default/css/custom.css @@ -570,6 +570,7 @@ h3.catbg .icon { } /* Register */ .main_icons.main_icons.regcenter::before, +.main_icons.signup::before, .large_admin_menu_icon.regcenter::before, .fa-register::before, .fa-signup::before { diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 7e2614fc96..b54ae5c182 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -1,30 +1,49 @@ /* You can find detailed information at https://wiki.simplemachines.org/smf/Curve2_CSS /* Index */ + html { - background: var(--html_bg_color); - scroll-padding-top: 3rem; + background: var(--html-bg); + scroll-padding-top: 2em; } body { - background: var(--body_bg_color); - font-family: var(--body_font_family); - font-size: var(--body_font_size); - line-height: var(--body_line_height); - color: var(--body_txt_color); + background: var(--body-bg); + color: var(--body-color); display: flex; flex-direction: column; + font-family: var(--body-font-family); + font-size: clamp(var(--body-font-size-min), var(--body-font-size), var(--body-font-size-max)); min-height: 100vh; tab-size: 4ch; } ::selection { + background: var(--selection-bg); + color: var(--selection-color); text-shadow: none; - background: var(--selection_bg_color); - color: var(--selection_txt_color); +} +/* This is about links */ +a, a:visited, .reset.link { + color: var(--body-link-color); + font-weight: var(--body-link-font-weight); + text-decoration: none; + transition: ease 0.35s; +} +a:hover, .reset.link:hover { + color: var(--body-link-color_hover); + cursor: pointer; + font-weight: var(--body-link-font-weight_hover); + text-decoration: underline; +} +a:focus, a:focus-visible { + color: var(--body-link-color_focus); + font-weight: var(--body-link-font-weight_focus); } /* General reset */ -* { +*, *::before, *::after { box-sizing: border-box; - padding: 0; +} +* { margin: 0; + padding: 0; } ul, ol { list-style: none; @@ -33,30 +52,172 @@ ul.normallist { list-style-type: disc; padding: 0 0 0 15px; } +dl { + overflow: auto; +} table { empty-cells: show; } abbr { border-bottom: 0.1em dotted; } -input, button, select, textarea { - color: var(--ibst_txt_color); - font-family: var(--ibst_font_family); - font-size: var(--ibst_font_size); - line-height: var(--ibst_font_line_height); - background: var(--ibst_bg_color); - border: var(--ibst_border_width) var(--ibst_border_style) var(--ibst_border_color); +img.avatar { + border-radius: var(--avatar-border-radius); +} +input, select, textarea { + accent-color:var(--input-accent-color); + background: var(--input-bg); + border-color: var(--input-border-color); + border-radius: var(--input-border-radius); + border-style: var(--input-border-style); + border-width: var(--input-border-width); + box-shadow: var(--input-box-shadow); + color: var(--input-color); + font-size: var(--input-font-size); + height: var(--input-height); + line-height: var(--input-line-height); + margin-block: var(--input-margin-block); + margin-inline: var(--input-margin-inline); + padding-block: var(--input-padding-block); + padding-inline: var(--input-padding-inline); + text-shadow: var(--input-text-shadow); vertical-align: middle; - border-radius: var(--ibst_border_radius); - padding: var(--ibst_padding); +} +input:hover, select:hover, textarea:hover { + background: var(--input-bg_hover); + border-color: var(--input-border-color_hover); + box-shadow: var(--input-box-shadow_hover); + border-color: var(--input-border-color_hover); + border-width: var(--input-border-width_hover); + text-shadow: var(--input-text-shadow_hover); +} +input:focus, select:focus, textarea:focus { + background: var(--input-bg_focus); + border-color: var(--input-border-color_focus); + box-shadow: var(--input-box-shadow_focus); + border-color: var(--input-border-color_focus); + border-width: var(--input-border-width_focus); + outline: none; + text-shadow: var(--input-text-shadow_focus); +} +input:focus-visible, textarea:focus-visible { + outline-color: var(--input-outline-color); + outline-style: solid; + outline-width: var(--input-outline-width); +} +/* Shadows and borders for sceditor might look strange */ +.sceditor-container textarea { + --input-border-width: 0; + --input-border-width_focus: 0; + --input-border-width_hover: 0; + --input-box-shadow: none; + --input-box-shadow_focus: none; + --input-box-shadow_hover: none; } input[type="file"] { padding: 2px; height: auto; } -/* Remove default mozilla dotted borders */ -input[type="submit"]::-moz-focus-inner, button::-moz-focus-inner { - border: 0; +/* Checkboxes or radio */ +input[type="checkbox"], input[type="radio"] { + height: calc(var(--input-height) / 1.5); +} +/* Number inputs don't support size nor width, so add some common ones here and set a default... */ +input[type="number"] { + padding-inline-end: 0; + width: calc(4ch + 2em + var(--input-padding-inline)); +} +input[type="number"][size="2"], +input[type="number"][size="1"] { + width: calc(2ch + 2em + var(--input-padding-inline)); +} +input[type="number"][size="3"] { + width: calc(3ch + 2em + var(--input-padding-inline)); +} +input[type="number"][size="5"] { + width: calc(5ch + 2em + var(--input-padding-inline)); +} +input[type="number"][size="6"] { + width: calc(6ch + 2em + var(--input-padding-inline)); +} +/* Buttons styling */ +button, .button, a.button, input[type="button"] { + align-items: center; + display: inline-flex; + flex-direction: column; + background: var(--button-bg); + border-color: var(--button-border-color); + border-radius: var(--button-border-radius); + border-style: var(--button-border-style); + border-width: var(--button-border-width); + box-shadow: var(--button-box-shadow); + color: var(--button-color); + cursor: var(--button-cursor); + font-size: var(--button-font-size); + font-weight: var(--button-font-weight); + gap: var(--button-gap); + justify-content: center; + margin-block: var(--button-margin-block); + margin-inline: var(--button-margin-inline); + line-height: var(--button-line-height); + min-height: var(--button-height); + padding-block: var(--button-padding-block); + padding-inline: var(--button-padding-inline); + text-decoration: var(--button-text-decoration); + text-shadow: var(--button-text-shadow); + text-transform: var(--button-text-transform); + user-select: none; +} +button:hover, .button:hover, input[type="button"]:hover { + background: var(--button-bg_hover); + border-color: var(--button-border-color_hover); + border-radius: var(--button-border-radius_hover); + border-width: var(--button-border-width_hover); + box-shadow: var(--button-box-shadow_hover); + color: var(--button-color_hover); + font-weight: var(--button-font-weight_hover); + text-decoration: var(--button-text-decoration_hover); + text-shadow: var(--button-text-shadow_hover); +} +button:focus, .button:focus, input[type="button"]:focus { + background: var(--button-bg_focus); + border-color: var(--button-border-color_focus); + border-radius: var(--button-border-radius_focus); + border-width: var(--button-border-width_focus); + box-shadow: var(--button-box-shadow_focus); + color: var(--button-color_focus); + font-weight: var(--button-font-weight_focus); + text-decoration: var(--button-text-decoration_focus); + text-shadow: var(--button-text-shadow_focus); +} +button.active, .button.active, input[type="button"].active { + background: var(--button-bg_active); + border-color: var(--button-border-color_active); + border-radius: var(--button-border-radius_active); + border-width: var(--button-border-width_active); + box-shadow: var(--button-box-shadow_active); + color: var(--button-color_active); + font-weight: var(--button-font-weight_active); + text-decoration: var(--button-text-decoration_active); + text-shadow: var(--button-text-shadow_active); +} +button.active:is(:hover, :focus, :focus-visible), .button.active:is(:hover, :focus, :focus-visible), input[type="button"].active:is(:hover, :focus, :focus-visible) { + color: var(--button-color_active_hover); +} +button:focus-visible, .button:focus-visible, input[type="button"]:focus-visible { + outline-color: var(--button-outline-color); + outline-offset: var(--button-outline-offset); + outline-style: var(--button-outline-style); + outline-width: var(--button-outline-width); +} +/* Give disabled input elements a different style */ +input[disabled], textarea[disabled], select[disabled], button[disabled] +input[disabled]:is(:hover, :focus), textarea[disabled]:is(:hover, :focus), select[disabled]:is(:hover, :focus), button[disabled]:is(:hover, :focus) { + background: var(--input-bg_disabled); + color: var(--input-color_disabled); + border-color: var(--input-border-color_disabled); + opacity: 0.8; + cursor: default; } /* Prevent inputs and images overflowing */ img, input, select, textarea { @@ -86,101 +247,109 @@ dd textarea { width: 100%; min-height: 100px; } -/* Apply the font only to these elements */ -input, button, select { - font-size: 0.75rem; -} -/* Number inputs don't support size nor width, so add some common ones here and set a default... */ -input[type="number"] { - padding-right: 0; /* Removes weird white space after arrows in some browsers */ - width: calc(4ch + 15px + 0.8em); -} -input[type="number"][size="2"], input[type="number"][size="1"] { - width: calc(2ch + 15px + 0.8em); -} -input[type="number"][size="3"] { - width: calc(3ch + 15px + 0.8em); -} -input[type="number"][size="5"] { - width: calc(5ch + 15px + 0.8em); -} -input[type="number"][size="6"] { - width: calc(6ch + 15px + 0.8em); -} -select option { - padding: 0 4px; -} -option:hover { - background: var(--option_bg_hover_color); -} /* Fieldsets are used to group elements */ fieldset { - padding: var(--fieldset_padding); - margin: var(--fieldset_margin); - border: var(--fieldset_border_width) var(--fieldset_border_style) var(--fieldset_border_color); - border-radius: var(--fieldset_border_radius); + background: var(--fieldset-bg); + border-color: var(--fieldset-border-color); + border-radius: var(--fieldset-border-radius); + border-style: var(--fieldset-border-style); + border-width: var(--fieldset-border-width); + box-shadow: var(--fieldset-box-shadow); + margin-block: var(--fieldset-margin-block); + margin-inline: var(--fieldset-margin-inline); + padding-block: var(--fieldset-padding-block); + padding-inline: var(--fieldset-padding-inline); } fieldset legend { + background: var(--fieldset-legend-bg); + border-color: var(--fieldset-legend-border-color); + border-radius: var(--fieldset-legend-border-radius); + border-style: var(--fieldset-legend-border-style); + border-width: var(--fieldset-legend-border-width); + box-shadow: var(--fieldset-legend-box-shadow); font-weight: bold; - color: var(--fieldset_legend_txt_color); - box-shadow: none; - border: none; -} -fieldset legend a { - font-weight: normal; -} -summary { - margin: 5px 0; + color: var(--fieldset-legend-color); + margin-block: var(--fieldset-legend-margin-block); + margin-inline: var(--fieldset-legend-margin-inline); + padding-block: var(--fieldset-legend-padding-block); + padding-inline: var(--fieldset-legend-padding-inline); +} +/* Details tag */ +details { + background: var(--details-bg); + border-color: var(--details-border-color); + border-radius: var(--details-border-radius); + border-style: var(--details-border-style); + border-width: var(--details-border-width); + box-shadow: var(--details-box-shadow); + margin-block: var(--details-margin-block); + margin-inline: var(--details-margin-inline); + padding-block: var(--details-padding-block); + padding-inline: var(--details-padding-inline); +} +details[open] { + background: var(--details-bg_open); + box-shadow: var(--details-box-shadow_open); +} +details summary { + background: var(--details-summary-bg); + border-color: var(--details-summary-border-color); + border-radius: var(--details-summary-border-radius); + border-style: var(--details-summary-border-style); + border-width: var(--details-summary-border-width); + box-shadow: var(--details-summary-box-shadow); + color: var(--details-summary-color); + cursor: var(--details-summary-cursor); + font-size: var(--details-summary-font-size); + font-weight: var(--details-summary-font-weight); + margin-block: var(--details-summary-margin-block); + margin-inline: var(--details-summary-margin-inline); + padding-block: var(--details-summary-padding-block); + padding-inline: var(--details-summary-padding-inline); +} +details[open] summary { + background: var(--details-summary-bg_open); + box-shadow: var(--details-summary-box-shadow_open); + color: var(--details-summary-color_open); + font-size: var(--details-summary-font-size_open); + font-weight: var(--details-summary-font-weight_open); } /* Define strong as bold, and em as italics */ -/* Note: in some particular places, strong has been redefined as font-weight: 600; */ -/* This gives a better effect for those areas, and will default to bold for fonts which do not support numerical font-weight */ -strong, .strong { - font-weight: bold; - color: var(--strong_txt_color); +strong, .strong, .bold_text { + font-weight: 700; } -.cat_bar strong { - color: var(--cat_bar_strong_txt_color); +strong, .strong { + color: var(--strong-color); } em, .em { font-style: italic; } + /* Default color on these tags */ h1, h2, h3, h4, h5, h6 { - font-size: var(--heading_font_size); - color: var(--heading_txt_color); -} -/* All input elements that are checkboxes or radio buttons shouldn't have a border around them */ -input[type="checkbox"], input[type="radio"] { - border: none; - background: none; - vertical-align: middle; - box-shadow: none; - margin: 0 3px; + color: var(--heading-color); + font-size: var(--heading-font-size); } .moderationbuttons_mobile_check { display: none; } -/* Give disabled input elements a different style */ -input[disabled], textarea[disabled], select[disabled], .button.disabled, .button[disabled]:hover { - background: var(--ibst_disabled_bg_color); - color: var(--ibst_disabled_txt_color); - border-color: var(--ibst_disabled_border_color); - opacity: 0.8; - cursor: default; -} [inert] > * { opacity: 0.5; } /* Standard horizontal rule.. ([hr], etc.) */ hr { - border: none; - margin: 12px 0; - height: 2px; - background: var(--horizontal_rule_bg_color); - box-shadow: var(--horizontal_rule_box_shadow); + background: var(--horizontalrule-bg); + border-color: var(--horizontalrule-border-color); + border-style: var(--horizontalrule-border-style); + border-width: var(--horizontalrule-border-width); + box-shadow: var(--horizontalrule-box-shadow); + margin-block: var(--horizontalrule-margin-block); + margin-inline: var(--horizontalrule-margin-inline); + height: var(--horizontalrule-height); + padding-block: var(--horizontalrule-padding-block); + padding-inline: var(--horizontalrule-padding-inline); } #likes li { clear: both; @@ -208,35 +377,52 @@ hr { /* The "new" button */ .new_posts, a.new_posts { - display: inline-block; + align-items: center; + background: var(--new-bg); + border-color: var(--new-border-color); + border-radius: var(--new-border-radius); + border-style: var(--new-border-style); + border-width: var(--new-border-width); + box-shadow: var(--new-box-shadow); + color: var(--new-color); + display: inline-flex; + font-family: var(--new-font-family); + font-size: var(--new-font-size); + font-weight: var(--new-font-weight); + line-height: var(--new-line-height); + padding-block: var(--new-padding-block); + padding-inline: var(--new-padding-inline); + text-decoration: var(--new-text-decoration); + text-shadow: var(--new-text-shadow); position: relative; top: -2px; - padding: 0 4px; - background: var(--new_posts_button_bg_color); - color: var(--new_posts_button_txt_color); - font-family: var(--new_posts_button_font_family); - font-size: var(--new_posts_button_font_size); - font-weight: var(--new_posts_button_font_weight); - line-height: var(--new_posts_button_line_height); - border-radius: var(--new_posts_button_border_radius); - opacity: 0.8; -} -a.new_posts:visited { - color: var(--new_posts_button_txt_color_visited); } -.new_posts:hover, .new_posts:focus { - color: var(--new_posts_button_txt_color_visited); - text-decoration: none; - opacity: 1; +.new_posts:hover, a.new_posts:hover { + background: var(--new-bg_hover); + border-color: var(--new-border-color_hover); + color: var(--new-color_hover); + display: inline-block; + font-weight: var(--new-font-weight_hover); + text-decoration: var(--new-text-decoration_hover); + text-shadow: var(--new-text-shadow_hover); +} +.new_posts:focus, .new_posts:focus { + background: var(--new-bg_focus); + border-color: var(--new-border-color_focus); + color: var(--new-color_focus); + display: inline-block; + font-weight: var(--new-font-weight_focus); + text-decoration: var(--new-text-decoration_focus); + text-shadow: var(--new-text-shadow_focus); } /* Common classes to easy styling. ------------------------------------------------------- */ .floatright { - float: right; + float: inline-end; } .floatleft { - float: left; + float: inline-start; } .floatnone { float: none; @@ -251,25 +437,15 @@ a.new_posts:visited { clear: both; } .clear_left { - clear: left; + clear: inline-start; } .clear_right { - clear: right; + clear: inline-end; } .reset { all: unset; outline: revert; } -/* This is about links */ -a, a:visited, .reset.link { - color: var(--link); - text-decoration: none; - transition: ease 0.35s; -} -a:hover, .reset.link:hover { - text-decoration: underline; - cursor: pointer; -} /* Default font sizes: small (8pt), normal (10pt), and large (14pt). */ .smalltext, tr.smalltext th { @@ -278,25 +454,22 @@ a:hover, .reset.link:hover { .largetext { font-size: 1.4em; } -h3.largetext { - font-size: large; -} .xlargetext { font-size: x-large; } .centertext, .centercol { - margin: 0 auto; + margin-inline: auto; text-align: center; } .righttext { - margin-left: auto; - margin-right: 0; - text-align: right; + margin-inline-start: auto; + margin-inline-end: 0; + text-align: end; } .lefttext { - margin-left: 0; - margin-right: auto; - text-align: left; + margin-inline-start: 0; + margin-inline-end: auto; + text-align: start; } .justifytext { text-align: justify; @@ -327,59 +500,91 @@ h3.largetext { /* Blockquote stylings */ blockquote { - margin: 0 0 8px 0; - padding: 6px 10px; - font-size: var(--quote_block_font_size); - border: var(--quote_block_border_width) var(--quote_block_border_style) var(--quote_block_border_color); - border-left: var(--quote_block_border_lr_width) var(--quote_block_border_lr_style) var(--quote_block_border_lr_color); - border-right: var(--quote_block_border_lr_width) var(--quote_block_border_lr_style) var(--quote_block_border_lr_color); + background: var(--quote-bg); + border-color: var(--quote-border-color); + border-radius: var(--quote-border-radius); + border-style: var(--quote-border-style); + border-width: var(--quote-border-width); + box-shadow: var(--quote-box-shadow); + font-size: var(--quote-font-size); + margin-block: var(--quote-margin-block); + margin-inline: var(--quote-margin-inline); + padding-block: var(--quote-padding-block); + padding-inline: var(--quote-padding-inline); +} +blockquote blockquote { + font-size: 1em; } blockquote cite { + background: var(--quote-cite-bg); + border-color: var(--quote-cite-border-color); + border-radius: var(--quote-cite-border-radius); + border-style: var(--quote-cite-border-style); + border-width: var(--quote-cite-border-width); + box-shadow: var(--quote-cite-box-shadow); + color: var(--quote-cite-color); display: block; - border-bottom: var(--quote_cite_border_width) var(--quote_cite_border_style) var(--quote_cite_border_color); - font-size: var(--quote_cite_font_size); - margin-bottom: 3px; + font-size: var(--quote-cite-font-size); + margin-block: var(--quote-cite-margin-block); + margin-inline: var(--quote-cite-margin-inline); + padding-block: var(--quote-cite-padding-block); + padding-inline: var(--quote-cite-padding-inline); } blockquote cite::before { - color: var(--quote_txt_color); - font-size: var(--quote_cite_before_font_size); - font-style: var(--quote_cite_before_font_style); + font-size: 1.75em; + font-style: normal; content: "\275D"; - margin-right: 3px; + margin-inline-end: 0.25em; vertical-align: middle; } .bbc_standard_quote { - background-color: var(--quote_block_standard_bg); + background-color: var(--quote-bg); } .bbc_alternate_quote { - background-color: var(--quote_block_alt_bg); + background-color: var(--quote-alternate-bg); +} +/* "Quote" header. */ +.quoteheader { + color: var(--quote-header-color); + font-size: var(--quote-header-font-size); + font-weight: var(--quote-header-font-weight); + margin-block: var(--quote-header-margin-block); + margin-inline: var(--quote-header-margin-inline); + max-height: var(--quote-header-height); + padding-block: var(--quote-header-padding-block); + padding-inline: var(--quote-header-padding-inline); + text-shadow: var(--quote-header-text-shadow); } - /* A code block - maybe PHP ;). */ .bbc_code { + background: var(--code-bg); + border-color: var(--code-border-color); + border-radius: var(--code-border-radius); + border-style: var(--code-border-style); + border-width: var(--code-border-width); + box-shadow: var(--code-box-shadow); display: block; - font-size: var(--code_font_size); - background: var(--code_bg_color); - border: 1px solid var(--code_border_color); - border-top: 2px solid var(--code_border_top_color); - border-bottom: 3px solid var(--code_border_bottom_color); - border-radius: var(--code_border_radius); - margin: 1px 0 6px 0; - padding: 3px 12px; + font-size: var(--code-font-size); + margin-block: var(--code-margin-block); + margin-inline: var(--code-margin-inline); + max-height: var(--code-height); + padding-block: var(--code-padding-block); + padding-inline: var(--code-padding-inline); overflow: auto; - white-space: pre; max-height: 25em; + white-space: pre; } -/* The "Quote:" and "Code:" header parts... */ +/* "Code:" header. */ .codeheader { - color: var(--code_header_txt_color); - font-size: var(--code_header_font_size); - padding: 0 2px; -} -.quoteheader { - color: var(--quote_header_txt_color); - font-size: var(--quote_header_font_size); - padding: 0 2px; + color: var(--code-header-color); + font-size: var(--code-header-font-size); + font-weight: var(--code-header-font-weight); + margin-block: var(--code-header-margin-block); + margin-inline: var(--code-header-margin-inline); + max-height: var(--code-header-height); + padding-block: var(--code-header-padding-block); + padding-inline: var(--code-header-padding-inline); + text-shadow: var(--code-header-text-shadow); } /* For links to change the code stuff... */ .codeoperation { @@ -395,12 +600,19 @@ blockquote cite::before { padding: 0 0.2ch; } /* Styling for BBC tags */ -.bbc_link { - border-bottom: var(--bbc_link_hover_border_width) var(--bbc_link_hover_border_style) var(--bbc_link_hover_border_color); +.bbc_link, .bbc_link:hover { + border-color: var(--bbc-link-border-color); + border-style: var(--bbc-link-border-style); + border-width: var(--bbc-link-border-width); } .bbc_link:hover { text-decoration: none; - border-bottom: var(--bbc_link_hover_border_width) var(--bbc_link_hover_border_style) var(--bbc_link_hover_border_color); + border-color: var(--bbc-link-border-color_hover); +} +.bbc_link:focus, .bbc_link:focus-visible { + outline-style: solid; + outline-color: var(--bbc-link-outline-color); + outline-offset: 0; } .bbc_size { line-height: 1.4em; @@ -417,14 +629,15 @@ blockquote cite::before { .bbc_table th, .bbc_table td { color: inherit; + font: inherit; vertical-align: top; padding: 4px 8px; border: 1px solid #ddd; } .bbc_list { - text-align: left; - padding: 0 0 0 35px; list-style-type: inherit; + text-align: start; + padding: 0 0 0 35px; } .bbc_float { margin-bottom: 1em; @@ -432,12 +645,12 @@ blockquote cite::before { max-width: 45%; } .bbc_float.floatleft { - margin-right: 1em; - clear: left; + clear: inline-start; + margin-inline-end: 1em; } .bbc_float.floatright { - margin-left: 1em; - clear: right; + clear: inline-end; + margin-inline-start: 1em; } .bbc_img { object-fit: contain; @@ -482,26 +695,30 @@ a img { /* Those collapse and expand icons are wonderful. */ .toggle_up::before, .toggle_down::before { - width: 17px; - height: 17px; + background: var(--toggle-bg); + border-color: var(--toggle-border-color); + border-radius: var(--toggle-border-radius); + border-style: var(--toggle-border-style); + border-width: var(--toggle-border-width); + box-shadow: var(--toggle-box-shadow); + content: ""; display: inline-block; - background: var(--toggle_bg); + height: var(--toggle-height); + margin-block: var(--toggle-margin-block); + margin-inline: var(--toggle-margin-inline); overflow: hidden; - content: ""; - vertical-align: middle; - margin: 0 5px 0 5px; - border: var(--toggle_border_width) var(--toggle_border_style) var(--toggle_border_color); - border-radius: var(--toggle_border_radius); - box-shadow: var(--toggle_box_shadow); + padding-block: var(--toggle-padding-block); + padding-inline: var(--toggle-padding-inline); transition: background-color 0.25s; + vertical-align: middle; + width: var(--toggle-width); } .toggle_down::before { background-position: 0 -17px; } - .toggle_up:hover:before, .toggle_down:hover:before { - background-color: var(--toggle_bg_hover); - box-shadow: var(--toggle_box_shadow_hover); + background: var(--toggle-bg_hover); + box-shadow: var(--toggle-box-shadow_hover); transition: background-color 0.25s; } @@ -516,51 +733,10 @@ a img { /* Highlighted text - such as search results. */ .highlight { - font-weight: bold; - color: var(--highlight_txt_color); - font-size: 1.1em; - background-color: inherit; -} - -/* the page navigation area */ -.pagesection { - padding: 2px 0; - overflow: hidden; -} -.pagesection .pagelinks { - display: inline-block; -} -.pages::after, .jump_to::after, .code::after, -strong[id^='child_list_']::after { - content: ": "; -} -.pages { - font-size: 0.9em; - margin-left: 7px; -} -#main_content_section .pagesection { - margin: 4px 0 0 0; -} -.pagelinks .button { - padding: 0 5px; -} -.nav_page { - padding: 0 1px; -} -.expand_pages { - font-weight: bold; - cursor: pointer; -} -.current_page { - padding: 0px; - color: var(--current_page_txt_color); - font-weight: bold; -} -.current_page::before, .codeoperation::before { - content: "["; -} -.current_page::after, .codeoperation::after { - content: "]"; + background: var(--searchhighlight-bg); + color: var(--searchhighlight-color); + font-size: var(--searchhighlight-font-size); + font-weight: var(--searchhighlight-font-weight); } /* Calendar colors for birthdays, events and holidays */ @@ -589,43 +765,53 @@ strong[id^='child_list_']::after { font-weight: bold; } -.warn_moderate { - color: var(--warn_moderate_txt_color); -} - -.warn_watch, .success { - color: var(--warn_watch_txt_color); +a.moderation_link { + background: var(--moderationlink-bg); + border-color: var(--moderationlink-border-color); + border-radius: var(--moderationlink-border-radius); + border-style: var(--moderationlink-border-style); + border-width: var(--moderationlink-border-width); + box-shadow: var(--moderationlink-box-shadow); + color: var(--moderationlink-color); + font-size: var(--moderationlink-font-size); + font-weight: var(--moderationlink-font-weight); + height: auto; + margin-block: var(--moderationlink-margin-block); + margin-inline: var(--moderationlink-margin-inline); + padding-block: var(--moderationlink-padding-block); + padding-inline: var(--moderationlink-padding-inline); + width: auto; } -a.moderation_link, a.moderation_link:visited { - font-weight: bold; - padding: 2px 8px; - background: var(--moderation_link_bg_color); - border-radius: var(--moderation_link_border_radius); - border-radius: 50%; -} /* AJAX notification bar ------------------------------------------------------- */ #ajax_in_progress { - background: var(--ajax_in_progress_bg_color); - border-bottom: var(--ajax_in_progress_border_width) var(--ajax_in_progress_border_style) var(--ajax_in_progress_border_color); - color: var(--ajax_in_progress_txt_color); - text-align: center; - font-size: 1.6em; - padding: 8px; - width: 100%; + background: var(--ajaxinprogress-bg); + border-color: var(--ajaxinprogress-border-color); + border-style: var(--ajaxinprogress-border-style); + border-width: var(--ajaxinprogress-border-width); + color: var(--ajaxinprogress-color); + font-size: var(--ajaxinprogress-font-size); + font-weight: var(--ajaxinprogress-font-weight); line-height: 25px; + margin-block: var(--ajaxinprogress-margin-block); + margin-inline: var(--ajaxinprogress-margin-inline); + padding-block: var(--ajaxinprogress-padding-block); + padding-inline: var(--ajaxinprogress-padding-inline); position: fixed; + text-align: center; top: 0; - left: 0; + width: 100%; } - #ajax_in_progress a { - color: var(--ajax_in_progress_link_color); - text-decoration: underline; - font-size: 0.9em; + color: var(--ajaxinprogress-link-color); float: right; - margin-right: 20px; + font-size: var(--ajaxinprogress-link-font-size); + margin-block: var(--ajaxinprogress-link-margin-block); + margin-inline: var(--ajaxinprogress-link-margin-inline); + padding-block: var(--ajaxinprogress-link-padding-block); + padding-inline: var(--ajaxinprogress-link-padding-inline); + text-decoration: var(--ajaxinprogress-link-text-decoration); } /* Lists with settings use these a lot. @@ -720,7 +906,7 @@ table.table_grid td { } .title_bar th, .windowbg th { - padding: 4px 8px; + padding: 0.5em 0.75em; } .title_bar .sort_down, .title_bar .sort_up { margin: -3px 0 0 2px; @@ -754,85 +940,179 @@ img.sort, .sort { /* Styles used by the auto suggest control. ------------------------------------------------------- */ .auto_suggest_div { + background: var(--autosuggest-bg); + border-color: var(--autosuggest-border-color); + border-radius: var(--autosuggest-border-radius); + border-style: var(--autosuggest-border-style); + border-width: var(--autosuggest-border-width); + box-shadow: var(--autosuggest-box-shadow); + margin-block: var(--autosuggest-margin-block); + margin-inline: var(--autosuggest-margin-inline); + padding-block: var(--autosuggest-padding-block); + padding-inline: var(--autosuggest-padding-inline); position: absolute; visibility: hidden; - border-radius: var(--auto_suggest_border_radius); - border: var(--auto_suggest_border_width) var(--auto_suggest_border_style) var(--auto_suggest_border_color); + z-index: 5; } .auto_suggest_item { - background: var(--auto_suggest_item_bg_color); - padding: 1px 4px; + background: var(--autosuggest-item-bg); + border-color: var(--autosuggest-item-border-color); + border-radius: var(--autosuggest-item-border-radius); + border-style: var(--autosuggest-item-border-style); + border-width: var(--autosuggest-item-border-width); + box-shadow: var(--autosuggest-item-box-shadow); + color: var(--autosuggest-item-color); + cursor: var(--autosuggest-item-cursor); + font-size: var(--autosuggest-item-font-size); + font-weight: var(--autosuggest-item-font-weight); + margin-block: var(--autosuggest-item-margin-block); + margin-inline: var(--autosuggest-item-margin-inline); + padding-block: var(--autosuggest-item-padding-block); + padding-inline: var(--autosuggest-item-padding-inline); } .auto_suggest_item_hover { - background: var(--auto_suggest_item_hover_bg_color); - cursor: pointer; - color: var(--auto_suggest_item_hover_txt_color); - padding: 1px 4px; -} - -/* Styles for the standard dropdown menus. -------------------------------------------------------- */ -.dropmenu, #top_info { - position: relative; -} -/* Level 1 button background. */ -.dropmenu > li { - display: inline-block; - margin: 0 1px 0 1px; - font-size: var(--dropmenu_li_font_size); - line-height: 1.9em; - padding: 10px 0px; -} - -#top_info > li { - display: inline-block; - margin: 0 1px 0 1px; - line-height: 1em; - padding: 0px 0px; -} -/* For cases where we want to spotlight something specific to an item, e.g. an amount */ + background: var(--autosuggest-item-bg_hover); + border-color: var(--autosuggest-item-border-color); + border-style: var(--autosuggest-item-border-style); + border-width: var(--autosuggest-item-border-width); + color: var(--autosuggest-item-color_hover); + cursor: var(--autosuggest-item-cursor); + font-size: var(--autosuggest-item-font-size_hover); + font-weight: var(--autosuggest-item-font-weight_hover); + margin-block: var(--autosuggest-item-margin-block); + margin-inline: var(--autosuggest-item-margin-inline); + padding-block: var(--autosuggest-item-padding-block); + padding-inline: var(--autosuggest-item-padding-inline); +} +.auto_suggest_item:last-of-type, +.auto_suggest_item_hover:last-of-type { + --autosuggest-item-border-width: 0 +} +/* Amount/Counter +--------------------------------------------*/ .amt { - margin: 0px; - padding: var(--amt_padding); - color: var(--amt_txt_color); - background: var(--amt_bg_color); - border-radius: var(--amt_border_radius); - font-size: var(--amt_font_size); - vertical-align: top; + align-items: center; + background: var(--amt-bg); + border-radius: var(--amt-border-radius); + color: var(--amt-color); + display: inline-flex; + font-size: var(--amt-font-size); + font-weight: var(--amt-font-weight); + height: var(--amt-height); + justify-content: center; + margin: 0; + padding: 0; + width: var(--amt-width); } -.dropmenu span.amt { - font-size: var(--dropmenu_amt_font_size); - padding: var(--dropmenu_amt_padding); - } -.dropmenu li .active .amt, #top_info li .active .amt { - background: var(--amt_active_bg_color); - color: inherit; +/* Styles for the top menu */ +.user_panel { + display: inline-flex; + flex: 1; + justify-content: flex-end; + gap: 0.25em; } -#top_info .top_menu.visible { - display: block; +#top_info { + align-items: center; + display: grid; + gap: 0.25em; + grid-auto-flow: column; + position: relative; } -/* Needed for new PM notifications. */ -.dropmenu li strong { - color: var(--dropmenu_strong_txt_color); +#top_info > li > a span.text-label { + font-size: 0.7em; } - -.dropmenu li a { - padding: var(--dropmenu_link_padding); - display: block; - border: var(--dropmenu_link_border_width) var(--dropmenu_link_border_style) var(--dropmenu_link_border_color); - border-radius: var(--dropmenu_link_border_radius); - color: var(--menu_link_color); +#top_info > li:not(.button_login, .button_signup) > a:not(#profile_menu_top) span.text-label { + display: none; } - #top_info > li > a { - padding: var(--top_info_link_padding); - display: block; - border: var(--top_info_link_border_width) var(--top_info_link_border_style) var(--top_info_link_border_color); - border-radius: var(--top_info_link_border_radius); - font-size: var(--top_info_link_font_size); + align-items: center; + display: inline-flex; + background: var(--topinfo-bg); + border-color: var(--topinfo-border-color); + border-radius: var(--topinfo-border-radius); + border-style: var(--topinfo-border-style); + border-width: var(--topinfo-border-width); + box-shadow: var(--topinfo-box-shadow); + color: var(--topinfo-color); + cursor: var(--topinfo-cursor); + font-size: var(--topinfo-font-size); + font-weight: var(--topinfo-font-weight); + gap: var(--topinfo-gap); + justify-content: center; + margin-block: var(--topinfo-margin-block); + margin-inline: var(--topinfo-margin-inline); + line-height: var(--topinfo-line-height); + height: var(--topinfo-height); + padding-block: var(--topinfo-padding-block); + padding-inline: var(--topinfo-padding-inline); + position: relative; + text-decoration: var(--topinfo-text-decoration); + text-shadow: var(--topinfo-text-shadow); + text-transform: var(--topinfo-text-transform); + user-select: none; +} +#top_info > li > a:hover, +#top_info > li:hover > a { + background: var(--topinfo-bg_hover); + border-color: var(--topinfo-border-color_hover); + border-radius: var(--topinfo-border-radius_hover); + border-width: var(--topinfo-border-width_hover); + box-shadow: var(--topinfo-box-shadow_hover); + color: var(--topinfo-color_hover); + cursor: var(--topinfo-cursor_hover); + font-weight: var(--topinfo-font-weight_hover); + text-decoration: var(--topinfo-text-decoration_hover); + text-shadow: var(--topinfo-text-shadow_hover); +} +#top_info > li > a:is(:focus, :focus-visible, .open), +#top_info > li:focus-within > a { + background: var(--topinfo-bg_focus); + border-color: var(--topinfo-border-color_focus); + border-radius: var(--topinfo-border-radius_focus); + border-width: var(--topinfo-border-width_focus); + box-shadow: var(--topinfo-box-shadow_focus); + color: var(--topinfo-color_focus); + cursor: var(--topinfo-cursor_focus); + font-weight: var(--topinfo-font-weight_focus); + text-decoration: var(--topinfo-text-decoration_focus); + text-shadow: var(--topinfo-text-shadow_focus); +} +#top_info > li > a:focus-visible { + outline-color: var(--topinfo-outline-color); + outline-offset: var(--topinfo-outline-offset); + outline-style: var(--topinfo-outline-style); + outline-width: var(--topinfo-outline-width); +} +#top_info > li > a.active { + background: var(--topinfo-bg_active); + border-color: var(--topinfo-border-color_active); + border-radius: var(--topinfo-border-radius_active); + border-width: var(--topinfo-border-width_active); + box-shadow: var(--topinfo-box-shadow_active); + color: var(--topinfo-color_active); + cursor: var(--topinfo-cursor_active); + font-weight: var(--topinfo-font-weight_active); + text-decoration: var(--topinfo-text-decoration_active); + text-shadow: var(--topinfo-text-shadow_active); +} +#top_info > li > a img.avatar { + background: var(--topinfo-avatar-bg); + border-color: var(--topinfo-avatar-border-color); + border-style: var(--topinfo-avatar-border-style); + border-width: var(--topinfo-avatar-border-width); + box-shadow: var(--topinfo-avatar-box-shadow); + height: var(--topinfo-avatar-height); + margin-block: var(--topinfo-avatar-margin-block); + margin-inline: var(--topinfo-avatar-margin-inline); + padding-block: var(--topinfo-avatar-padding-block); + padding-inline: var(--topinfo-avatar-padding-inline); + width: var(--topinfo-avatar-width); +} +#profile_menu_top::after { + font-size: 0.5em; + content: " \25BC"; } - #top_info > li.button_login > a { font-size: var(--top_info_button_login_link_font_size); } @@ -840,259 +1120,525 @@ img.sort, .sort { #top_info > li.button_signup > a { font-size: var(--top_info_button_signup_link_font_size); } -/* Level 1 active button. */ -.dropmenu a.active { - background: var(--menu_link_bg_active_color); - color: var(--menu_link_active_color); - font-weight: bold; -} - -#top_info a.active { - background: var(--top_info_link_active_bg_color); - color: var(--top_info_active_link_color); - font-weight: bold; -} -/* Level 1 hover effects. */ -.dropmenu > li:hover > a, .dropmenu > li > a:focus { - color: var(--dropmenu_link_hover_color); - cursor: pointer; - text-decoration: none; - background: var(--menu_link_bg_hover_color); -} - -#top_info > li > a:focus { - background: var(--top_info_link_focus_bg_color); - border: var(--top_info_border_width) var(--top_info_border_style) var(--top_info_link_focus_border_color); - color: var(--top_info_link_txt_color); - cursor: pointer; - text-decoration: none; -} - -#top_info > li > a.open { - background: var(--top_info_link_focus_bg_color); - border: var(--top_info_border_width) var(--top_info_border_style) var(--top_info_link_focus_border_color); - color: var(--top_info_link_txt_open_color); - cursor: pointer; - text-decoration: none; -} - -#top_info > li:hover > a { - background: var(--top_info_hover_link_color); - border: var(--top_info_border_width) var(--top_info_border_style) var(--top_info_link_hover_border_color); - color: var(--top_info_link_hover_txt_color); - text-decoration: none; - -} -/* Level 1 active button. */ -.dropmenu li a.active:hover, .dropmenu li:hover a.active { - background: var(--menu_link_bg_active_hover_color); - color: var(--menu_link_active_hover_color); - text-shadow: none; +#top_info .amt { + inset-inline-end: 0; + position: absolute; + top: 0; } - -a.mobile_user_menu, -a[class^="mobile_generic_menu_"] { +/* Profile, alerts, pm, etc... */ +.top_menu { + background: var(--topmenu-bg); + border-color: var(--topmenu-border-color); + border-radius: var(--topmenu-border-radius); + border-style: var(--topmenu-border-style); + border-width: var(--topmenu-border-width); + box-shadow: var(--topmenu-box-shadow); + color: var(--topmenu-color); display: none; + font-size: var(--topmenu-font-size); + font-weight: var(--topmenu-font-weight); + line-height: var(--topmenu-line-height); + inset-inline-end: 0; + margin-block: var(--topmenu-margin-block); + margin-inline: var(--topmenu-margin-inline); + padding-block: var(--topmenu-padding-block); + padding-inline: var(--topmenu-padding-inline); + position: absolute; + text-shadow: var(--topmenu-text-shadow); + text-transform: var(--topmenu-text-transform); + top: 100%; + width: var(--topmenu-width); + z-index: 2; } - -#main_menu { - background: var(--menu_bg_color); - border-top: var(--menu_border_width) var(--menu_border_style) var(--menu_border_color); - border-bottom: var(--menu_border_width) var(--menu_border_style) var(--menu_border_color); +.top_menu:hover { + background: var(--topmenu-bg_hover); + border-color: var(--topmenu-border-color_hover); + border-width: var(--topmenu-border-width_hover); + box-shadow: var(--topmenu-box-shadow_hover); + color: var(--topmenu-color_hover); +} +.top_menu:is(:focus, :focus-within) { + background: var(--topmenu-bg_focus); + border-color: var(--topmenu-border-color_focus); + border-width: var(--topmenu-border-width_focus); + box-shadow: var(--topmenu-box-shadow_focus); + color: var(--topmenu-color_focus); +} +.top_menu.visible { + display: block; } -@media (min-width: 720px) { - #mobile_user_menu .popup_window { - display: flex; - justify-content: space-between; +@media (hover) { + .top_menu.scrollable { + max-height: var(--topmenu-height); + overflow: auto; } } /* User information. */ -#profile_menu_top::after { - content: " \25BC"; +.top_menu .header { + background: var(--topmenu-header-bg); + border-color: var(--topmenu-header-border-color); + border-style: var(--topmenu-header-border-style); + border-width: var(--topmenu-header-border-width); + font-size: var(--topmenu-header-font-size); + padding-block: var(--topmenu-header-padding-block); + padding-inline: var(--topmenu-header-padding-inline); +} +.top_menu .body { + background: var(--topmenu-body-bg); + border-color: var(--topmenu-body-border-color); + border-style: var(--topmenu-body-border-style); + border-width: var(--topmenu-body-border-width); + font-size: var(--topmenu-body-font-size); + padding-block: var(--topmenu-body-padding-block); + padding-inline: var(--topmenu-body-padding-inline); +} +#profile_menu .header { + align-items: center; + display: grid; + gap: var(--topmenu-header-padding-inline); + grid-template-columns: auto 1fr; } -.profile_user_info, .profile_user_avatar { - display: inline-block; - margin: 0 9px; - vertical-align: middle; +#profile_menu time { + font-size: 0.65em; + padding-block: 0.25em; +} +#profile_menu a:has(img.avatar) { + display: flex; } -.profile_user_avatar img.avatar { - max-width: 100px; +#profile_menu img.avatar { + height: 3em; + width: 3em; } -.profile_username { - font-size: var(--profile_username_font_size); +.profile_user_info { + display: grid; + gap: 0.25em; +} +#profile_menu .profile_username { + font-size: 1.1em; display: block; - margin-bottom: 3px; } -.profile_user_links ol { - margin-left: 0; - clear: both; - column-count: 2; +#profile_menu .profile_group { + font-size: 0.7em; +} +ol.profile_user_links { + display: grid; + grid-template-columns: 1fr 1fr; + padding-block: 0.25em; + padding-inline: 0.25em; + user-select: none; } .profile_user_links li { - font-size: var(--profile_user_links_li_font_size); - line-height: 2em; - padding-left: var(--profile_user_links_li_padding); - -webkit-hyphens: auto; - hyphens: auto; + align-self: center; } -@media (hover) { - .top_menu.scrollable { - max-height: 30em; - overflow: auto; - } +.profile_user_links li a { + align-items: center; + background: var(--profilelinks-bg); + border-color: var(--profilelinks-border-color); + border-radius: var(--profilelinks-border-radius); + border-style: var(--profilelinks-border-style); + border-width: var(--profilelinks-border-width); + color: var(--profilelinks-color); + display: flex; + font-family: var(--profilelinks-font-family); + font-size: var(--profilelinks-font-size); + font-weight: var(--profilelinks-font-weight); + gap: var(--profilelinks-gap); + margin-block: var(--profilelinks-margin-block); + margin-inline: var(--profilelinks-margin-inline); + min-height: var(--profilelinks-height); + padding-block: var(--profilelinks-padding-block); + padding-inline: var(--profilelinks-padding-inline); + text-decoration: var(--profilelinks-text-decoration); + text-shadow: var(--profilelinks-text-shadow); +} +.profile_user_links li a:hover, +.profile_user_links li:hover a { + background: var(--profilelinks-bg_hover); + border-color: var(--profilelinks-border-color_hover); + border-width: var(--profilelinks-border-width_hover); + color: var(--profilelinks-color_hover); + font-weight: var(--profilelinks-font-weight_hover); + text-decoration: var(--profilelinks-text-decoration_hover); + text-shadow: var(--profilelinks-text-shadow_hover); +} +.profile_user_links li a:focus, +.profile_user_links li:focus-within a { + background: var(--profilelinks-bg_focus); + border-color: var(--profilelinks-border-color_focus); + border-width: var(--profilelinks-border-width_focus); + color: var(--profilelinks-color_focus); + font-weight: var(--profilelinks-font-weight_focus); + text-decoration: var(--profilelinks-text-decoration_focus); + text-shadow: var(--profilelinks-text-shadow_focus); +} +.profile_user_links li a:focus-visible, +.profile_user_links li:has(:focus-visible) a { + outline-color: var(--profilelinks-outline-color); + outline-offset: var(--profilelinks-outline-offset); + outline-style: var(--profilelinks-outline-style); + outline-width: var(--profilelinks-outline-width); +} +.profile_user_links i::before, +.profile_user_links span.main_icons::before { + width: 1.25em; +} +/* Alerts or PMs, AKA Notifications */ +.top_menu:is(#pm_menu, #alerts_menu) .header { + align-items: center; + display: flex; + font-size: 0.9em; + gap: 0.5em; } -.pm_unread, .alerts_unread { - margin-top: 5px; - border-top: var(--border_width) var(--border_style) var(--border_color); +.top_menu:is(#pm_menu, #alerts_menu) .header .options { + display: inline-flex; + justify-content: flex-end; + gap: 1em; + flex: 1 0 auto; + user-select: none; } -.unread_notify { - border-bottom: var(--border_width) var(--border_style) var(--border_color); +.top_menu:is(#pm_menu, #alerts_menu) .header .options a { + color: var(--topinfo-color); } -.no_unread { - margin-top: 5px; - text-align: center; +.top_menu .no_unread { + font-size: 1em; + padding-block: var(--genericnoti-read-padding-block); + padding-inline: var(--genericnoti-read-padding-inline); } -.unread_notify:hover { - background: var(--unread_notify_hover_bg_color); +.generic_notification { + align-items: flex-start; + background: var(--genericnoti-bg); + border-color: var(--genericnoti-border-color); + border-style: var(--genericnoti-border-style); + border-width: var(--genericnoti-border-width); + color: var(--genericnoti-color); + display: grid; + font-size: var(--genericnoti-font-size); + gap: var(--genericnoti-gap); + grid-template-columns: auto 1fr; + grid-template-rows: auto auto; + margin-block: var(--genericnoti-margin-block); + margin-inline: var(--genericnoti-margin-inline); + min-height: var(--genericnoti-height); + padding-block: var(--genericnoti-padding-block); + padding-inline: var(--genericnoti-padding-inline); +} +.generic_notification:hover { + background: var(--genericnoti-bg_hover); + color: var(--genericnoti-color_hover); text-decoration: none; } -.unread_notify:last-child { - border-bottom: none; +.generic_notification:is(:focus, :focus-within, :focus-visible) { + background: var(--genericnoti-bg_focus); + color: var(--genericnoti-color_focus); } -.unread_notify { - display: flex; - align-items: center; - padding: 6px 5px; - line-height: 20px; +a.generic_notification .details, +.generic_notification .details a { + color: var(--genericnoti-link-color); } -.unread_notify.alert_read { - opacity: 0.5; - outline: none; - filter: grayscale(1); -} -.unread_notify strong { - font-weight: 600; +a.generic_notification:hover .details, +.generic_notification .details a:hover { + color: var(--genericnoti-link-color_hover); } -.unread_notify .avatar { - width: 40px; - height: 40px; - object-fit: scale-down; - margin: 4px 4px 4px 0; - display: inline-block; - color: transparent; /* For broken images */ - vertical-align: bottom; +.generic_notification:last-child { + border-width: 0; } -.unread_notify_image { +.generic_notification div.avatar { + display: flex; + flex-direction: row-reverse; + gap: 0.25em; + grid-row: 1/-1; position: relative; - width: 44px; - margin-right: 4px; - text-align: center; } -.unread_notify_image span.alert_icon { - display: block; - line-height: 1em; +.generic_notification img.avatar { + height: var(--genericnoti-avatar-height); + object-fit: var(--genericnoti-avatar-object-fit); + width: var(--genericnoti-avatar-width); } -.unread_notify_image .avatar + .alert_icon { - width: auto; +.generic_notification span.main_icons { + color: var(--genericnoti-icon-color); + font-size: 0.75em; + top: 0.25em; position: absolute; - right: 0; - top: 0; } -.unread_notify .details { - display: inline-block; - vertical-align: top; - max-width: calc(100% - 48px); -} -#pm_menu .subject { - font-weight: bold; +.generic_notification .time { + font-size: 0.9em; } -/* Levels 2 and 3 submenu wrapper. */ -.dropmenu li ul { - z-index: 1; - position: absolute; +/* Main Menu */ +nav#main_menu { + align-items: center; + background: var(--nav-bg); + border-color: var(--nav-border-color); + border-style: var(--nav-border-style); + border-width: var(--nav-border-width); + display: flex; + min-height: var(--nav-height); + margin-block: var(--nav-margin-block); + margin-inline: var(--nav-margin-inline); + padding-block: var(--nav-padding-block); + padding-inline: var(--nav-padding-inline); +} +/* Mobile menu button */ +a.mobile_user_menu { + color: var(--mobilenav-color); display: none; - min-width: 18.2em; - padding: 0.5em; - font-weight: normal; - border: none; - box-shadow: var(--dropmenu_box_shadow); - background: var(--dropmenu_bg_color); -} - -.top_menu { - z-index: 1; - position: absolute; + font-size: var(--mobilenav-font-size); + font-weight: var(--mobilenav-font-weight); + gap: var(--mobilenav-gap); + padding-block: var(--mobilenav-padding-block); + padding-inline: var(--mobilenav-padding-inline); + text-decoration: var(--mobilenav-text-decoration); + text-shadow: var(--mobilenav-text-shadow); +} +a.mobile_user_menu:hover { + color: var(--mobilenav-color_hover); + font-weight: var(--mobilenav-font-weight_hover); + text-decoration: var(--mobilenav-text-decoration_hover); + text-shadow: var(--mobilenav-text-shadow_hover); +} +a.mobile_user_menu:is(:focus, :focus-visiblle, :focus-within) { + color: var(--mobilenav-color_focus); + font-weight: var(--mobilenav-font-weight_focus); + text-decoration: var(--mobilenav-text-decoration_focus); + text-shadow: var(--mobilenav-text-shadow_focus); +} +a[class^="mobile_generic_menu_"]{ + color: var(--mobilegeneric-color); display: none; - min-width: 18.2em; - padding: 0.5em; - font-weight: normal; - border: none; - border-radius: var(--top_menu_border_radius); - box-shadow: var(--top_menu_box_shadow); - background: var(--top_menu_bg_color); -} -/* Level 2 link background. */ -.dropmenu li li { - margin: 0; - padding: 0; - width: 17em; - font-size: var(--dropmenu_li_li_font_size); - border-radius: var(--top_menu_border_radius); - border: none; + font-size: var(--mobilegeneric-font-size); + font-weight: var(--mobilegeneric-font-weight); + gap: var(--mobilegeneric-gap); + padding-block: var(--mobilegeneric-padding-block); + padding-inline: var(--mobilegeneric-padding-inline); + text-decoration: var(--mobilegeneric-text-decoration); + text-shadow: var(--mobilegeneric-text-shadow); +} +a[class^="mobile_generic_menu_"]:hover { + color: var(--mobilegeneric-color_hover); + font-weight: var(--mobilegeneric-font-weight_hover); + text-decoration: var(--mobilegeneric-text-decoration_hover); + text-shadow: var(--mobilegeneric-text-shadow_hover); +} +a[class^="mobile_generic_menu_"]:is(:focus, :focus-visiblle, :focus-within) { + color: var(--mobilegeneric-color_focus); + font-weight: var(--mobilegeneric-font-weight_focus); + text-decoration: var(--mobilegeneric-text-decoration_focus); + text-shadow: var(--mobilegeneric-text-shadow_focus); +} +#mobile_user_menu .popup_window { + display: flex; + flex-wrap: wrap; + gap: var(--dropmenu-main-gap); + justify-content: space-between; } -/* Necessary to allow highlighting of 1st level while hovering over submenu. */ -.dropmenu li:hover li a, .dropmenu li li a { - background: none; - padding: 4px 9px; - color: var(--dropmenu_link_color); - border: none; - line-height: 2.2em; +/* Generic Menu */ +#genericmenu, +#adm_submenus { + background: var(--genericmenu-bg); + border-color: var(--genericmenu-border-color); + border-radius: var(--genericmenu-border-radius); + border-style: var(--genericmenu-border-style); + border-width: var(--genericmenu-border-width); + margin-block: var(--genericmenu-margin-block); + margin-inline: var(--genericmenu-margin-inline); + padding-block: var(--genericmenu-padding-block); + padding-inline: var(--genericmenu-padding-inline); } -.dropmenu li li a > img { - vertical-align: middle; -} -/* The profile/pm menus are declared off .dropmenu li ul for consistency but have other characteristics. */ -.top_menu { - min-width: 25em; +/* Styles for the standard dropdown menus. +------------------------------------------------------- */ +/* Dropmenu Level 1. */ +.dropmenu { + align-items: center; + display: flex; + gap: var(--dropmenu-main-gap); + margin-block: var(--dropmenu-main-margin-block); + margin-inline: var(--dropmenu-main-margin-inline); + padding-block: var(--dropmenu-main-padding-block); + padding-inline: var(--dropmenu-main-padding-inline); + user-select: none; +} +.dropmenu li { + position: relative; } - -/* Level 3 submenu wrapper positioning. */ -.dropmenu li ul ul { - margin: -2em 0 0 10em; +.dropmenu > li > a { + align-items: center; + background: var(--dropmenu-a1-bg); + border-color: var(--dropmenu-a1-border-color); + border-radius: var(--dropmenu-a1-border-radius); + border-style: var(--dropmenu-a1-border-style); + border-width: var(--dropmenu-a1-border-width); + color: var(--dropmenu-a1-color); + display: flex; + font-family: var(--dropmenu-a1-font-family); + font-size: var(--dropmenu-a1-font-size); + font-weight: var(--dropmenu-a1-font-weight); + gap: var(--dropmenu-a1-gap); + margin-block: var(--dropmenu-a1-margin-block); + margin-inline: var(--dropmenu-a1-margin-inline); + min-height: var(--dropmenu-a1-height); + padding-block: var(--dropmenu-a1-padding-block); + padding-inline: var(--dropmenu-a1-padding-inline); + text-decoration: var(--dropmenu-a1-text-decoration); + text-shadow: var(--dropmenu-a1-text-shadow); +} +.dropmenu > li > a:hover, +.dropmenu > li:hover > a { + background: var(--dropmenu-a1-bg_hover); + border-color: var(--dropmenu-a1-border-color_hover); + border-width: var(--dropmenu-a1-border-width_hover); + color: var(--dropmenu-a1-color_hover); + font-weight: var(--dropmenu-a1-font-weight_hover); + text-decoration: var(--dropmenu-a1-text-decoration_hover); + text-shadow: var(--dropmenu-a1-text-shadow_hover); +} +.dropmenu > li > a:focus, +.dropmenu > li:focus-within > a { + background: var(--dropmenu-a1-bg_focus); + border-color: var(--dropmenu-a1-border-color_focus); + border-width: var(--dropmenu-a1-border-width_focus); + color: var(--dropmenu-a1-color_focus); + font-weight: var(--dropmenu-a1-font-weight_focus); + text-decoration: var(--dropmenu-a1-text-decoration_focus); + text-shadow: var(--dropmenu-a1-text-shadow_focus); +} +.dropmenu > li > a:focus-visible, +.dropmenu > li:has(:focus-visible) > a { + outline-color: var(--dropmenu-a1-outline-color); + outline-offset: var(--dropmenu-a1-outline-offset); + outline-style: var(--dropmenu-a1-outline-style); + outline-width: var(--dropmenu-a1-outline-width); +} +.dropmenu > li > a.active { + background: var(--dropmenu-a1-bg_active); + border-color: var(--dropmenu-a1-border-color_active); + border-width: var(--dropmenu-a1-border-width_active); + color: var(--dropmenu-a1-color_active); + font-weight: var(--dropmenu-a1-font-weight_active); + text-decoration: var(--dropmenu-a1-text-decoration_active); + text-shadow: var(--dropmenu-a1-text-shadow_active); +} +/* Dropmenu Level n > 1. */ +.dropmenu li.subsections > a::after { + content: "\25ba"; + font-family: Arial, sans-serif; + font-size: 0.8em; + inset-inline-end: var(--dropmenu-an-padding-inline); + inset-inline-start: auto; + position: absolute; } - - -.dropmenu li li:hover > a, .dropmenu li li a:focus, .dropmenu li li a:hover { - background: var(--dropmenu_hover_bg_color); - color: var(--dropmenu_link_hover_color); - text-decoration: none; - border: none; +.dropmenu > li.subsections > a::after { + display: none; } -/* Reposition Level 2 submenu as visible on hover. */ -.dropmenu li:hover ul { - display: block; +.dropmenu li > ul { + background: var(--dropmenu-child-bg); + border-color: var(--dropmenu-child-border-color); + border-radius: var(--dropmenu-child-border-radius); + border-style: var(--dropmenu-child-border-style); + border-width: var(--dropmenu-child-border-width); + box-shadow: var(--dropmenu-child-box-shadow); + display: flex; + flex-direction: column; + gap: var(--dropmenu-child-gap); + margin-block: var(--dropmenu-child-margin-block); + margin-inline: var(--dropmenu-child-margin-inline); + min-width: var(--dropmenu-child-width); + padding-block: var(--dropmenu-child-padding-block); + padding-inline: var(--dropmenu-child-padding-inline); + position: absolute; + z-index: 1; } -/* Hiding Level 3 submenu off hover. */ -.dropmenu li:hover ul ul, .dropmenu li ul ul, .dropmenu li:hover ul ul ul, .dropmenu li ul ul ul { - left: -9999px; +.dropmenu li > ul:not([style]) { + opacity: 0; + visibility: hidden; + transition: all ease-in-out 500ms; } -/* Reposition as visible on hover. */ -.dropmenu li li:hover ul, .dropmenu li li ul { - left: 0; +.dropmenu li:is(:hover, :focus-visible, :focus, :focus-within) > ul:not([style]) { + visibility: visible; + opacity: 1; + transition-duration: 250ms; } -.dropmenu li li.subsections > a::after { - position: absolute; - padding: 5px 0; - right: 10px; - font-family: var(--dropmenu_subsections_font_family); - font-size: var(--dropmenu_subsections_font_size); - line-height: var(--dropmenu_subsections_line_height); - content: "\25ba"; + +@media (prefers-reduced-motion: reduce) { + .dropmenu li > ul:not([style]) { + display: none; + transition: none; + } + .dropmenu li:is(:hover, :focus-visible, :focus, :focus-within) > ul:not([style]) { + display: flex; + transition: none; + } } -/* Highlighting of current section */ -.dropmenu li li a.chosen { - font-weight: bold; +.dropmenu ul a { + align-items: center; + background: var(--dropmenu-an-bg); + border-color: var(--dropmenu-an-border-color); + border-radius: var(--dropmenu-an-border-radius); + border-style: var(--dropmenu-an-border-style); + border-width: var(--dropmenu-an-border-width); + color: var(--dropmenu-an-color); + display: flex; + font-family: var(--dropmenu-an-font-family); + font-size: var(--dropmenu-an-font-size); + font-weight: var(--dropmenu-an-font-weight); + gap: var(--dropmenu-an-gap); + margin-block: var(--dropmenu-an-margin-block); + margin-inline: var(--dropmenu-an-margin-inline); + min-height: var(--dropmenu-an-height); + padding-block: var(--dropmenu-an-padding-block); + padding-inline: var(--dropmenu-an-padding-inline); + text-decoration: var(--dropmenu-an-text-decoration); + text-shadow: var(--dropmenu-an-text-shadow); +} +.dropmenu ul a:hover, +.dropmenu ul li:hover > a { + background: var(--dropmenu-an-bg_hover); + border-color: var(--dropmenu-an-border-color_hover); + border-width: var(--dropmenu-an-border-width_hover); + color: var(--dropmenu-an-color_hover); + font-weight: var(--dropmenu-an-font-weight_hover); + text-decoration: var(--dropmenu-an-text-decoration_hover); + text-shadow: var(--dropmenu-an-text-shadow_hover); +} +.dropmenu ul a:focus, +.dropmenu ul li:focus-within > a { + background: var(--dropmenu-an-bg_focus); + border-color: var(--dropmenu-an-border-color_focus); + border-width: var(--dropmenu-an-border-width_focus); + color: var(--dropmenu-an-color_focus); + font-weight: var(--dropmenu-an-font-weight_focus); + text-decoration: var(--dropmenu-an-text-decoration_focus); + text-shadow: var(--dropmenu-an-text-shadow_focus); +} +.dropmenu ul a:focus-visible, +.dropmenu ul li:has(:focus-visible) > a { + outline-color: var(--dropmenu-an-outline-color); + outline-offset: var(--dropmenu-an-outline-offset); + outline-style: var(--dropmenu-an-outline-style); + outline-width: var(--dropmenu-an-outline-width); +} +.dropmenu ul a:is(.active, .chosen) { + background: var(--dropmenu-an-bg_active); + border-color: var(--dropmenu-an-border-color_active); + border-width: var(--dropmenu-an-border-width_active); + color: var(--dropmenu-an-color_active); + font-weight: var(--dropmenu-an-font-weight_active); + text-decoration: var(--dropmenu-an-text-decoration_active); + text-shadow: var(--dropmenu-an-text-shadow_active); +} +.dropmenu ul li:is(:hover, :focus, :focus-within) a:is(.active, .chosen) { + font-weight: var(--dropmenu-an-font-weight_active); +} +.dropmenu ul ul { + inset-inline-end: auto; + inset-inline-start: calc(100% - var(--dropmenu-an-padding-inline)); + top: 0.25em; +} +.dropmenu ul i::before, +.dropmenu ul span.main_icons::before { + width: 1.5em; +} +.dropmenu img { + vertical-align: middle; } /* The extra menu rows for admin sections, etc. */ @@ -1106,7 +1652,7 @@ a[class^="mobile_generic_menu_"] { .buttonlist, .buttonlistend, .buttonrow, .pagelinks, .pagesection { align-items: baseline; display: flex; - gap: .5em; + gap: 0.5em; } /* Items in mobile menu must be vertical. */ .popup_window .buttonlist { @@ -1115,76 +1661,291 @@ a[class^="mobile_generic_menu_"] { .buttonlistend { justify-content: end; } -.button, .quickbuttons > li > a, .inline_mod_check { - display: inline-block; - padding: var(--button_padding); - color: var(--button_txt_color); - font-size: var(--button_font_size); - line-height: var(--button_line_height); - text-transform: uppercase; - cursor: pointer; - min-height: var(--button_min_height); - border: var(--button_border_width) var(--button_border_style); - border-color: var(--button_border_color); - border-radius: var(--button_border_radius); - box-sizing: border-box; - vertical-align: middle; - background: var(--button_bg_color); +.buttonlist { + background: var(--buttonlist-bg); + border-color: var(--buttonlist-border-color); + border-radius: var(--buttonlist-border-radius); + border-style: var(--buttonlist-border-style); + border-width: var(--buttonlist-border-width); + box-shadow: var(--buttonlist-box-shadow); + flex: 1; + flex-wrap: wrap; + gap: var(--buttonlist-gap); + margin-block: var(--buttonlist-margin-block); + margin-inline: var(--buttonlist-margin-inline); + padding-block: var(--buttonlist-padding-block); + padding-inline: var(--buttonlist-padding-inline); + user-select: none; +} +.buttonlist > li { + position: relative; } -html[lang="el-GR"] .button, -html[lang="el-GR"] .quickbuttons > li > a, -html[lang="el-GR"] .inline_mod_check { - text-transform: capitalize; +.buttonlist > li > a, +.buttonlist > li.inline_mod_check { + align-items: center; + display: inline-flex; + background: var(--buttonlist-link-bg); + border-color: var(--buttonlist-link-border-color); + border-radius: var(--buttonlist-link-border-radius); + border-style: var(--buttonlist-link-border-style); + border-width: var(--buttonlist-link-border-width); + box-shadow: var(--buttonlist-link-box-shadow); + color: var(--buttonlist-link-color); + cursor: var(--buttonlist-link-cursor); + font-size: var(--buttonlist-link-font-size); + font-weight: var(--buttonlist-link-font-weight); + gap: var(--buttonlist-link-gap); + justify-content: center; + margin-block: var(--buttonlist-link-margin-block); + margin-inline: var(--buttonlist-link-margin-inline); + line-height: var(--buttonlist-link-line-height); + min-height: var(--buttonlist-link-height); + padding-block: var(--buttonlist-link-padding-block); + padding-inline: var(--buttonlist-link-padding-inline); + text-decoration: var(--buttonlist-link-text-decoration); + text-shadow: var(--buttonlist-link-text-shadow); + text-transform: var(--buttonlist-link-text-transform); +} +.buttonlist > li > a:hover, +.buttonlist > li.inline_mod_check:hover { + background: var(--buttonlist-link-bg_hover); + border-color: var(--buttonlist-link-border-color_hover); + border-radius: var(--buttonlist-link-border-radius_hover); + border-width: var(--buttonlist-link-border-width_hover); + box-shadow: var(--buttonlist-link-box-shadow_hover); + color: var(--buttonlist-link-color_hover); + font-weight: var(--buttonlist-link-font-weight_hover); + text-decoration: var(--buttonlist-link-text-decoration_hover); + text-shadow: var(--buttonlist-link-text-shadow_hover); +} +.buttonlist > li > a:focus, +.buttonlist > li:has(.top_menu.visible) > a, +.buttonlist > li.inline_mod_check:is(:focus, :focus-within) { + background: var(--buttonlist-link-bg_focus); + border-color: var(--buttonlist-link-border-color_focus); + border-radius: var(--buttonlist-link-border-radius_focus); + border-width: var(--buttonlist-link-border-width_focus); + box-shadow: var(--buttonlist-link-box-shadow_focus); + color: var(--buttonlist-link-color_focus); + font-weight: var(--buttonlist-link-font-weight_focus); + text-decoration: var(--buttonlist-link-text-decoration_focus); + text-shadow: var(--buttonlist-link-text-shadow_focus); +} +.buttonlist > li > a.active { + background: var(--buttonlist-link-bg_active); + border-color: var(--buttonlist-link-border-color_active); + border-radius: var(--buttonlist-link-border-radius_active); + border-width: var(--buttonlist-link-border-width_active); + box-shadow: var(--buttonlist-link-box-shadow_active); + color: var(--buttonlist-link-color_active); + font-weight: var(--buttonlist-link-font-weight_active); + text-decoration: var(--buttonlist-link-text-decoration_active); + text-shadow: var(--buttonlist-link-text-shadow_active); +} +.buttonlist > li > a.active:hover { + background: var(--buttonlist-link-bg_active_hover); + color: var(--buttonlist-link-color_active_hover); +} +.buttonlist > li > a.active:focus { + background: var(--buttonlist-link-bg_active_focus); + color: var(--buttonlist-link-color_active_focus); +} +.buttonlist > li > a:foccus-visible, +.buttonlist > li.inline_mod_check:focus-visible { + outline-color: var(--buttonlist-link-outline-color); + outline-offset: var(--buttonlist-link-outline-offset); + outline-style: var(--buttonlist-link-outline-style); + outline-width: var(--buttonlist-link-outline-width); +} +.buttonlist > li > a.sub_buttons::after { + font-family: "Font Awesome 6 Free"; + content: "\f078"; + font-size: 0.6em; + font-weight: 700; + height: 0.6em; } -.pagesection .button { - color: var(--button_txt_color); +.buttonlist > li:has(.top_menu.visible) > a.sub_buttons::after { + content: "\f077"; +} +html[lang="el-GR"] .buttonlist > li > a { + text-transform: capitalize; } -.button:hover, .button:focus, -.quickbuttons > li:hover > a, .quickbuttons > li > a:focus { - color: var(--button_txt_color_hover_and_focus); - border-color: var(--button_hover_border_color); - text-decoration: none; +/* Buttonlist dropmenu/top_menu/dropdown */ +.buttonlist:has(.top_menu) { + --topmenu-margin-block: 0.25em 0; + --dropmenu-main-padding-block: 0.25em; + --dropmenu-main-padding-inline: 0.25em; } -.button:hover, .button:focus { - color: var(--button_txt_color_hover); +.buttonlist .dropmenu { + flex-direction: column; } -.button:hover, #search_form .button:hover, .quickbuttons li:hover { - background: var(--button_bg_color); +.buttonlist .dropmenu li { + --dropmenu-an-padding-block: 0.5em; } -/* the active one */ -.button.active { - background: var(--button_bg_active); - color: var(--button_txt_color_active); - font-weight: var(--button_active_font_weight); - border: var(--button_active_border_width) var(--button_active_border_style) var(--button_active_border_color); +.buttonlist .dropmenu li a { + --dropmenu-an-font-size: 0.9em; + align-items: flex-start; + flex-direction: column; + justify-content: center; } -.button.active:hover, .button.active:focus { - color: var(--button_txt_color_active_and_focus); - background: var(--button_bg_focus); - box-shadow: none; +.buttonlist .dropmenu li a span:has(+ span) { + font-weight: 700; } -.cat_bar .button { - box-shadow: none; +.buttonlist .dropmenu li a span ~ span { + font-size: 0.75em; +} +.buttonlist .overview { + display: grid; + gap: var(--dropmenu-an-gap); + width: 100%; } /* In a .buttonrow, the buttons are joined together */ .buttonrow { - margin: 0 5px; + gap: 0; } -.buttonrow .button { - display: table-cell; - border-radius: 0; +.buttonrow .button:not(:first-child, :last-child) { + --button-border-radius: 0; } .buttonrow .button:first-child { - border-radius: 3px 0 0 3px; + border-start-end-radius: 0; + border-end-end-radius: 0; } .buttonrow .button:last-child { - border-radius: 0 3px 3px 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } /* in a titlebg, the buttonlist is of small height */ .titlebg .buttonlist { - margin: 0; - padding: 0; + --buttonlist-margin-block: 0; + --buttonlist-padding-block: 0; + --buttonlist-link-margin-block: 0; +} +.buttonlist.floatright, +.mobile_buttons.floatright { + justify-content: flex-end; +} +.buttonlist.floatleft, +.mobile_buttons.floatleft { + justify-content: flex-start; +} +.mobile_buttons { + display: none; + flex: 1; +} + +/* the page navigation area */ +.pagesection { + background: var(--pagesection-bg); + border-color: var(--pagesection-border-color); + border-radius: var(--pagesection-border-radius); + border-style: var(--pagesection-border-style); + border-width: var(--pagesection-border-width); + box-shadow: var(--pagesection-box-shadow); + clear: var(--pagesection-clear); + color: var(--pagesection-color); + margin-block: var(--pagesection-margin-block); + margin-inline: var(--pagesection-margin-inline); + padding-block: var(--pagesection-padding-block); + padding-inline: var(--pagesection-padding-inline); +} +.pagelinks { + align-items: center; + background: var(--pages-bg); + border-color: var(--pages-border-color); + border-radius: var(--pages-border-radius); + border-style: var(--pages-border-style); + border-width: var(--pages-border-width); + box-shadow: var(--pages-box-shadow); + display: flex; + flex-wrap: wrap; + gap: var(--pages-gap); + margin-block: var(--pages-margin-block); + margin-inline: var(--pages-margin-inline); + padding-block: var(--pages-padding-block); + padding-inline: var(--pages-padding-inline); + user-select: none; +} +.pagelinks a.nav_page, +.pagelinks span.current_page { + align-items: center; + display: inline-flex; + background: var(--pages-link-bg); + border-color: var(--pages-link-border-color); + border-radius: var(--pages-link-border-radius); + border-style: var(--pages-link-border-style); + border-width: var(--pages-link-border-width); + box-shadow: var(--pages-link-box-shadow); + color: var(--pages-link-color); + cursor: var(--pages-link-cursor); + font-size: var(--pages-link-font-size); + font-weight: var(--pages-link-font-weight); + gap: var(--pages-link-gap); + justify-content: center; + margin-block: var(--pages-link-margin-block); + margin-inline: var(--pages-link-margin-inline); + line-height: var(--pages-link-line-height); + min-height: var(--pages-link-height); + padding-block: var(--pages-link-padding-block); + padding-inline: var(--pages-link-padding-inline); + text-decoration: var(--pages-link-text-decoration); + text-shadow: var(--pages-link-text-shadow); + text-transform: var(--pages-link-text-transform); +} +.pagelinks a.nav_page:hover { + background: var(--pages-link-bg_hover); + border-color: var(--pages-link-border-color_hover); + border-radius: var(--pages-link-border-radius_hover); + border-width: var(--pages-link-border-width_hover); + box-shadow: var(--pages-link-box-shadow_hover); + color: var(--pages-link-color_hover); + font-weight: var(--pages-link-font-weight_hover); + text-decoration: var(--pages-link-text-decoration_hover); + text-shadow: var(--pages-link-text-shadow_hover); +} +.pagelinks a.nav_page:focus { + background: var(--pages-link-bg_focus); + border-color: var(--pages-link-border-color_focus); + border-radius: var(--pages-link-border-radius_focus); + border-width: var(--pages-link-border-width_focus); + box-shadow: var(--pages-link-box-shadow_focus); + color: var(--pages-link-color_focus); + font-weight: var(--pages-link-font-weight_focus); + text-decoration: var(--pages-link-text-decoration_focus); + text-shadow: var(--pages-link-text-shadow_focus); +} +.pagelinks span.current_page { + background: var(--pages-link-bg_active); + border-color: var(--pages-link-border-color_active); + border-radius: var(--pages-link-border-radius_active); + border-width: var(--pages-link-border-width_active); + box-shadow: var(--pages-link-box-shadow_active); + color: var(--pages-link-color_active); + font-weight: var(--pages-link-font-weight_active); + text-decoration: var(--pages-link-text-decoration_active); + text-shadow: var(--pages-link-text-shadow_active); +} +.pagelinks span.current_page:hover { + background: var(--pages-link-bg_active_hover); + color: var(--pages-link-color_active_hover); +} +.pagelinks span.current_page:focus { + background: var(--pages-link-bg_active_focus); + color: var(--pages-link-color_active_hover); +} +.pagelinks a.nav_page:foccus-visible { + outline-color: var(--pages-link-outline-color); + outline-offset: var(--pages-link-outline-offset); + outline-style: var(--pages-link-outline-style); + outline-width: var(--pages-link-outline-width); +} +.pages::after, .jump_to::after, .code::after, +strong[id^='child_list_']::after { + content: ": "; +} +.expand_pages { + font-weight: bold; + cursor: pointer; } .button.smalltext { font-size: 0.6em; @@ -1207,23 +1968,6 @@ html[lang="el-GR"] .inline_mod_check { width: 90%; } -/* The framing graphics */ -/* The top bar. */ -#top_info { - padding: 0px; - line-height: 1em; - max-width: 100%; -} -#pm_menu, #alerts_menu, #profile_menu { - right: 0; - padding-right: 10px; -} -#profile_menu_top > img.avatar { - height: 1em; - width: 1em; - margin: -3px 2px 0px 0px; - float: left; -} .notice { font-weight: bold; } @@ -1234,33 +1978,52 @@ html[lang="el-GR"] .inline_mod_check { #languages_form { margin: 0 0 0 10px; } -/* The logo and slogan. */ +/* The header. */ #header { - background: var(--header_bg_color); - padding: 0px; - min-height: 80px; + background: var(--header-bg); + border-color: var(--header-border-color); + border-radius: var(--header-border-radius); + border-style: var(--header-border-style); + border-width: var(--header-border-width); + box-shadow: var(--header-box-shadow); + margin-block: var(--header-margin-block); + margin-inline: var(--header-margin-inline); + min-height: var(--header-height); + padding-block: var(--header-padding-block); + padding-inline: var(--header-padding-inline); } #header .inner_wrap { + align-items: center; display: flex; justify-content: space-between; - min-height: 80px; - align-items: center; + min-height: var(--header-height); } #header::after { content: ""; - display: block; clear: both; + display: block; } /* The main title. */ h1.forumtitle { - font-size: var(--forum_title_font_size); - font-family: var(--forum_title_font_family); - padding: 0px; - font-weight: normal; + color: var(--forumtitle-color); display: inline-flex; + font-family: var(--forumtitle-font-family); + font-size: var(--forumtitle-font-size); + font-weight: var(--forumtitle-font-weight); + margin-block: var(--forumtitle-margin-block); + margin-inline: var(--forumtitle-margin-inline); + padding-block: var(--forumtitle-padding-block); + padding-inline: var(--forumtitle-padding-inline); +} +h1.forumtitle a:hover { + color: var(--forumtitle-color_hover); + text-decoration: var(--forumtitle-text-decoration_hover); + text-shadow: var(--forumtitle-text-shadow_hover); } -h1.forumtitle a { - color: var(--forum_title_link_color); +h1.forumtitle a:focus { + color: var(--forumtitle-color_focus); + text-decoration: var(--forumtitle-text-decoration_focus); + text-shadow: var(--forumtitle-text-shadow_focus); } /* Even guests need to be aligned */ @@ -1268,11 +2031,6 @@ h1.forumtitle a { padding: 0 10px; line-height: 2.5em; } -.user_panel { - padding: 0px; - margin: 0px; - display: inline-flex; -} /* /* The user info, news, etc.*/ #upper_section { @@ -1297,104 +2055,216 @@ h1.forumtitle a { ul li.greeting { font-weight: bold; } -/* The login form. */ -#guest_form { - overflow: hidden; - font-size: 0.9em; - margin-left: -2px; +/* The login form. */ +#guest_form { + overflow: hidden; + font-size: 0.9em; + margin-left: -2px; +} + +/* News section. */ +.news_section { + background: var(--newsfader-bg); + border-color: var(--newsfader-border-color); + border-radius: var(--newsfader-border-radius); + border-style: var(--newsfader-border-style); + border-width: var(--newsfader-border-width); + box-shadow: var(--newsfader-box-shadow); + color: var(--newsfader-color); + display: grid; + font-size: var(--newsfader-font-size); + grid-template-columns: auto 1fr; + height: var(--newsfader-height); + margin-block: var(--newsfader-margin-block); + margin-inline: var(--newsfader-margin-inline); +} +.news_section .icon { + align-items: center; + background: var(--newsfader-icon-bg); + border-radius: var(--newsfader-border-radius); + border-end-end-radius: 0; + border-start-end-radius: 0; + color: var(--newsfader-icon-color); + display: flex; + font-size: var(--newsfader-icon-font-size); + font-weight: var(--newsfader-icon-font-weight); + justify-content: center; + width: var(--newsfader-icon-width); +} +.news_section .sy-box { + display: grid; + gap: 0.5em; + margin: 0; + padding-block: var(--newsfader-padding-block); + padding-inline: var(--newsfader-padding-inline); +} +.news_section .sy-slides-wrap { + overflow: auto; } -/* News section. */ -.news_section { - padding: 0px; - margin: 8px 0px; - font-size: var(--news_font_size); +.news_section .sy-pager { + align-items: flex-end; display: flex; - max-width: 100%; - background: var(--news_bg_color); - height: max-content; -} -.news_section_left { - margin: 0px; - padding: var(--news_left_padding); - background: var(--news_left_bg_color); - font-size: var(--news_left_font_size); -} -.news_section_right { - margin: 0px; - padding: var(--news_right_padding); - width: 100%; + gap: var(--newsfader-pager-gap); + margin: 0; +} +.news_section .sy-pager li { + border-color: var(--newsfader-pager-border-color); + border-radius: var(--newsfader-pager-border-radius); + border-style: var(--newsfader-pager-border-style); + border-width: var(--newsfader-pager-border-width); + height: var(--newsfader-pager-height); + margin-block: var(--newsfader-pager-margin-block); + margin-inline: var(--newsfader-pager-margin-inline); + padding-block: var(--newsfader-pager-padding-block); + padding-inline: var(--newsfader-pager-padding-inline); + width: var(--newsfader-pager-width); +} +.news_section .sy-pager li a { + background: var(--newsfader-pager-bg); +} +.news_section .sy-pager li.sy-active a { + background: var(--newsfader-pager-bg_active); +} +.news_section .sy-pager li a:is(:hover, :focus) { + opacity: 1; } .news_section h2 { line-height: initial; padding: 2px 5px; } - .news_section p { display: inline; } +#smf_slider li.sy-active { + z-index: 0; +} /* The navigation list (i.e. linktree) */ .navigate_section { - padding: 0px; - margin: 5px 0px; - width: 100%; -} -#main_content_section .navigate_section { - margin: 4px 0 0 0; - padding: 0; + background: var(--navigatesection-bg); + border: var(--navigatesection-border-color); + border-radius: var(--navigatesection-border-radius); + border-style: var(--navigatesection-border-style); + border-width: var(--navigatesection-border-width); + box-shadow: var(--navigatesection-box-shadow); + margin-block: var(--navigatesection-margin-block); + margin-inline: var(--navigatesection-margin-inline); + padding-block: var(--navigatesection-padding-block); + padding-inline: var(--navigatesection-padding-inline); } .navigate_section ul { - background: var(--breadcrumb_bg_color); + align-items: center; + background: var(--breadcrumb-bg); + border: var(--breadcrumb-border-color); + border-radius: var(--breadcrumb-border-radius); + border-style: var(--breadcrumb-border-style); + border-width: var(--breadcrumb-border-width); + box-shadow: var(--breadcrumb-box-shadow); + color: var(--breadcrumb-color); display: flex; - margin: 0px; - padding: 5px 8px; - font-size: var(--breadcrumb_font_size); - overflow: hidden; - border: var(--breadcrumb_border_width) var(--breadcrumb_border_style) var(--breadcrumb_border_color); - border-radius: var(--breadcrumb_border_radius); - box-shadow: var(--breadcrumb_box_shadow); + flex-wrap: wrap; + font-family: var(--breadcrumb-font-family); + font-size: var(--breadcrumb-font-size); + margin-block: var(--breadcrumb-margin-block); + margin-inline: var(--breadcrumb-margin-inline); + padding-block: var(--breadcrumb-padding-block); + padding-inline: var(--breadcrumb-padding-inline); } .navigate_section ul:before { font-family: "Font Awesome 6 Free"; content: "\f015"; + font-size: 0.8em; font-weight: 700; - margin: 0px; + padding-inline-end: 0.5em; } -.navigate_section ul li { +.navigate_section li { + align-items: center; + display: flex; + gap: var(--breadcrumb-gap); +} +.navigate_section a { + color: var(--breadcrumb-link-color); +} +.navigate_section a:hover { + color: var(--breadcrumb-link-color_hover); +} +.navigate_section a:focus { + color: var(--breadcrumb-link-color_focus); +} +.navigate_section li > a { + align-items: center; display: inline-flex; - color: var(--breadcrumb_txt_color); + font-weight: var(--breadcrumb-link-font-weight); + gap: var(--breadcrumb-link-gap); + line-height: var(--breadcrumb-link-line-height); + margin-block: var(--breadcrumb-link-margin-block); + margin-inline: var(--breadcrumb-link-margin-inline); + padding-block: var(--breadcrumb-link-padding-block); + padding-inline: var(--breadcrumb-link-padding-inline); + text-decoration: var(--breadcrumb-link-text-decoration); + text-shadow: var(--breadcrumb-link-text-shadow); +} +.navigate_section li > a:hover { + font-weight: var(--breadcrumb-link-font-weight_hover); + text-decoration: var(--breadcrumb-link-text-decoration_hover); + text-shadow: var(--breadcrumb-link-text-shadow_hover); +} +.navigate_section li > a:focus { + font-weight: var(--breadcrumb-link-font-weight_focus); + text-decoration: var(--breadcrumb-link-text-decoration_focus); + text-shadow: var(--breadcrumb-link-text-shadow_focus); +} +.navigate_section li:is(.last, :last-child):not(:first-child) > a { + color: var(--breadcrumb-link-color_active); + font-weight: var(--breadcrumb-link-font-weight_active); + text-decoration: var(--breadcrumb-link-text-decoration_active); + text-shadow: var(--breadcrumb-link-text-shadow_active); +} +.navigate_section li > a + span { + font-size: 0.9em; } -.navigate_section ul li a, .navigate_section ul li em { - padding: 0px 4px 0px 4px; +.navigate_section span.board_moderators { + align-items: center; display: inline-flex; - color: var(--breadcrumb_link_color); } - -.navigate_section ul li span { - display: inline-block; +.navigate_section span.board_moderators a { + padding-inline-start: 0.25em; } .navigate_section ul li .dividers { - color: var(--breadcrumb_divider_color); + color: var(--breadcrumb-divider-color); font-family: var(--breadcrumb_divider_font_family); - font-size: var(--breadcrumb_divider_font_size); - line-height: var(--breadcrumb_divider_line_height); - margin-top: 3px; -} -.navigate_section ul li .board_moderators a { - padding: 4px 0; + font-size: var(--breadcrumb-divider-font-size); + line-height: var(--breadcrumb-divider-line-height); + margin-block: var(--breadcrumb-divider-margin-block); + margin-inline: var(--breadcrumb-divider-margin-inline); + padding-block: var(--breadcrumb-divider-padding-block); + padding-inline: var(--breadcrumb-divider-padding-inline); +} +/* Match the heading */ +.navigate_section:has(+ div#content_section #display_head) { + --navigatesection-border-width: 1px 1px 0; + margin-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } - -.navigate_section a:hover span { - text-decoration: underline; +.navigate_section:has(+ div#content_section #display_head) li:is(.last, :last-child) > *:not(span.dividers) { + display: none; } /* The content section */ #content_section { - margin: 0 auto; - clear: both; -} -#main_content_section { - padding: 0px; + background: var(--contentsection-bg); + border-color: var(--contentsection-border-color); + border-radius: var(--contentsection-border-radius); + border-style: var(--contentsection-border-style); + border-width: var(--contentsection-border-width); + box-shadow: var(--contentsection-box-shadow); + clear: var(--contentsection-clear); + color: var(--contentsection-color); + margin-block: var(--contentsection-margin-block); + margin-inline: var(--contentsection-margin-inline); + padding-block: var(--contentsection-padding-block); + padding-inline: var(--contentsection-padding-inline); } #main_content_section::after { content: ""; @@ -1404,19 +2274,53 @@ ul li.greeting { /* Footer is now full-width by default. */ /* The footer with copyright links etc. */ #footer { - margin: var(--footer_margin); - padding: var(--footer_padding); - background: var(--footer_bg_color); - flex: none; + background: var(--footer-bg); + border-color: var(--footer-border-color); + border-radius: var(--footer-border-radius); + border-style: var(--footer-border-style); + border-width: var(--footer-border-width); + box-shadow: var(--footer-box-shadow); + color: var(--footer-color); + font-size: var(--footer-font-size); + margin-block: var(--footer-margin-block); + margin-inline: var(--footer-margin-inline); + min-height: var(--footer-height); + padding-block: var(--footer-padding-block); + padding-inline: var(--footer-padding-inline); +} +#footer :not(a, li, p) { + font-size: 1em; } -#footer li, #footer p, #footer a { - font-size: var(--footer_font_size); - color: var(--footer_txt_color); +#footer a { + color: var(--footer-link-color); + font-weight: var(--footer-link-font-weight); + text-decoration: var(--footer-link-text-decoration); + text-shadow: var(--footer-link-text-shadow); +} +#footer a:hover { + color: var(--footer-link-color_hover); + font-weight: var(--footer-link-font-weight_hover); + text-decoration: var(--footer-link-text-decoration_hover); + text-shadow: var(--footer-link-text-shadow_hover); +} +#footer a:focus { + color: var(--footer-link-color_focus); + font-weight: var(--footer-link-font-weight_focus); + text-decoration: var(--footer-link-text-decoration_focus); + text-shadow: var(--footer-link-text-shadow_focus); +} +#footer .inner_wrap { + align-items: flex-start; + display: flex; + flex-wrap: wrap; + gap: var(--footer-gap); + justify-content: space-between; } - -#footer .inner_wrap ul li a i { - margin-left: 4px; +#footer li.helplinks { + display: flex; + gap: 0.75em; } +#footer ul.helpitems li #footer li.copyright { display: block; font-family: Verdana, sans-serif; /* Copyright must be Verdana! */ @@ -1431,12 +2335,11 @@ ul li.greeting { padding: 0 0 0 6px; } .mark_read { - margin: -5px 0 16px 0; - float: right; + float: inline-end; + margin-block: 0 0.75em; } .mark_read .buttonlist { - margin: 0; - padding: 0; + --buttonlist-margin-block: 0; } .fix_rtl_names { @@ -1445,85 +2348,176 @@ ul li.greeting { /* The quick buttons */ .quickbuttons { - margin: 0 0 5px; - clear: right; - float: right; - text-align: right; -} -#recent .quickbuttons { - margin: 0; + align-items: stretch; + background: var(--quickbuttons-bg); + border-color: var(--quickbuttons-border-color); + border-radius: var(--quickbuttons-border-radius); + border-style: var(--quickbuttons-border-style); + border-width: var(--quickbuttons-border-width); + box-shadow: var(--quickbuttons-box-shadow); + display: flex; + flex-wrap: wrap; + gap: var(--quickbuttons-gap); + justify-content: flex-end; + margin-block: var(--quickbuttons-margin-block); + margin-inline: var(--quickbuttons-margin-inline); + padding-block: var(--quickbuttons-padding-block); + padding-inline: var(--quickbuttons-padding-inline); + user-select: none; } .quickbuttons > li { - float: left; -} -.quickbuttons > li > a, .inline_mod_check { - display: block; - height: auto; - padding: 0 4px; - line-height: 1.375rem; - border-radius: 0; -} -.quickbuttons > li:first-child > a { - border-radius: 4px 0 0 4px; -} -.quickbuttons > li:last-child > a, .inline_mod_check:last-child { - border-radius: 0 4px 4px 0; -} -.quickbuttons > li:only-child > a, .inline_mod_check:only-child { - border-radius: 4px; - margin: 2px; - height: 23px; -} -.inline_mod_check input { position: relative; - top: -1px; +} +.quickbuttons > li.inline_mod_check input { height: auto; } -.moderationbuttons_check:focus { - box-shadow: var(--moderationbuttons_check_focus_box_shadow); +.quickbuttons > li > a, +.quickbuttons > li.inline_mod_check { + align-items: center; + display: inline-flex; + background: var(--quickbuttons-link-bg); + border-color: var(--quickbuttons-link-border-color); + border-radius: var(--quickbuttons-link-border-radius); + border-style: var(--quickbuttons-link-border-style); + border-width: var(--quickbuttons-link-border-width); + box-shadow: var(--quickbuttons-link-box-shadow); + color: var(--quickbuttons-link-color); + cursor: var(--quickbuttons-link-cursor); + font-size: var(--quickbuttons-link-font-size); + font-weight: var(--quickbuttons-link-font-weight); + gap: var(--quickbuttons-link-gap); + justify-content: center; + margin-block: var(--quickbuttons-link-margin-block); + margin-inline: var(--quickbuttons-link-margin-inline); + line-height: var(--quickbuttons-link-line-height); + min-height: var(--quickbuttons-link-height); + padding-block: var(--quickbuttons-link-padding-block); + padding-inline: var(--quickbuttons-link-padding-inline); + text-decoration: var(--quickbuttons-link-text-decoration); + text-shadow: var(--quickbuttons-link-text-shadow); + text-transform: var(--quickbuttons-link-text-transform); +} +.quickbuttons > li > a:hover, +.quickbuttons > li.inline_mod_check:hover { + background: var(--quickbuttons-link-bg_hover); + border-color: var(--quickbuttons-link-border-color_hover); + border-radius: var(--quickbuttons-link-border-radius_hover); + border-width: var(--quickbuttons-link-border-width_hover); + box-shadow: var(--quickbuttons-link-box-shadow_hover); + color: var(--quickbuttons-link-color_hover); + font-weight: var(--quickbuttons-link-font-weight_hover); + text-decoration: var(--quickbuttons-link-text-decoration_hover); + text-shadow: var(--quickbuttons-link-text-shadow_hover); +} +.quickbuttons > li > a:focus, +.quickbuttons > li.inline_mod_check:is(:focus, :focus-within) { + background: var(--quickbuttons-link-bg_focus); + border-color: var(--quickbuttons-link-border-color_focus); + border-radius: var(--quickbuttons-link-border-radius_focus); + border-width: var(--quickbuttons-link-border-width_focus); + box-shadow: var(--quickbuttons-link-box-shadow_focus); + color: var(--quickbuttons-link-color_focus); + font-weight: var(--quickbuttons-link-font-weight_focus); + text-decoration: var(--quickbuttons-link-text-decoration_focus); + text-shadow: var(--quickbuttons-link-text-shadow_focus); +} +.quickbuttons > li > a:foccus-visible, +.quickbuttons > li.inline_mod_check:focus-visible { + outline-color: var(--quickbuttons-link-outline-color); + outline-offset: var(--quickbuttons-link-outline-offset); + outline-style: var(--quickbuttons-link-outline-style); + outline-width: var(--quickbuttons-link-outline-width); +} +.quickbuttons > li > a.sub_buttons::after { + font-family: "Font Awesome 6 Free"; + content: "\f078"; + font-size: 0.6em; + font-weight: 700; + height: 0.6em; } -.quick_edit, .post_options { - position: relative; +.quickbuttons > li:has(.top_menu.visible) > a.sub_buttons::after { + content: "\f077"; } /* Drop part of QuickButtons */ -.post_options ul { +.quickoptions ul { + background: var(--quickoptions-bg); + border-color: var(--quickoptions-border-color); + border-radius: var(--quickoptions-border-radius); + border-style: var(--quickoptions-border-style); + border-width: var(--quickoptions-border-width); + box-shadow: var(--quickoptions-box-shadow); display: none; + gap: var(--quickoptions-gap); + flex-direction: column; + inset-inline-end: 0; + margin-block: var(--quickoptions-margin-block); + margin-inline: var(--quickoptions-margin-inline); + padding-block: var(--quickoptions-padding-block); + padding-inline: var(--quickoptions-padding-inline); position: absolute; + width: var(--quickoptions-width); top: 100%; - right: -1px; - z-index: 90; - padding: 6px; - background: var(--post_options_bg_color); - font-weight: var(--post_options_font_weight); - text-align: left; - border: var(--post_options_border_width) var(--post_options_border_style) var(--post_options_border_color); - border-radius: var(--post_options_border_radius); -} -.post_options:hover ul { - display: block; -} -.post_options ul a { - display: block; - width: 12em; - padding: 0 6px; - line-height: 2.2em; - text-decoration: none; - border: 1px solid transparent; - border-radius: var(--post_options_link_border_radius); -} -.post_options ul a:hover, .post_options ul a:focus { - border-color: var(--post_options_border_color_hover); + z-index: 2; } -/* Note: The next declarations are for keyboard access with js disabled. */ -.quickbuttons ul li a:focus { - margin: 0 -9910px 0 9910px; +.quickoptions:hover ul { + display: flex; } -/* Cancel for hover and/or js access. */ -.quickbuttons ul li:hover a:focus, .quickbuttons ul li a:focus { - margin: 0; +.quickoptions ul li { + position: relative; } -/* Fixes for quickbuttons - Fix for quote on reply box */ +.quickoptions li a { + align-items: center; + background: var(--quickoptions-link-bg); + border-color: var(--quickoptions-link-border-color); + border-radius: var(--quickoptions-link-border-radius); + border-style: var(--quickoptions-link-border-style); + border-width: var(--quickoptions-link-border-width); + box-shadow: var(--quickoptions-link-box-shadow); + color: var(--quickoptions-link-color); + display: flex; + font-family: var(--quickoptions-link-font-family); + font-size: var(--quickoptions-link-font-size); + font-weight: var(--quickoptions-link-font-weight); + gap: var(--quickoptions-link-gap); + margin-block: var(--quickoptions-link-margin-block); + margin-inline: var(--quickoptions-link-margin-inline); + min-height: var(--quickoptions-link-height); + padding-block: var(--quickoptions-link-padding-block); + padding-inline: var(--quickoptions-link-padding-inline); + text-decoration: var(--quickoptions-link-text-decoration); + text-shadow: var(--quickoptions-link-text-shadow); +} +.quickoptions li a:hover { + background: var(--quickoptions-link-bg_hover); + border-color: var(--quickoptions-link-border-color_hover); + border-width: var(--quickoptions-link-border-width_hover); + box-shadow: var(--quickoptions-link-box-shadow_hover); + color: var(--quickoptions-link-color_hover); + font-weight: var(--quickoptions-link-font-weight_hover); + text-decoration: var(--quickoptions-link-text-decoration_hover); + text-shadow: var(--quickoptions-link-text-shadow_hover); +} +.quickoptions li a:focus { + background: var(--quickoptions-link-bg_focus); + border-color: var(--quickoptions-link-border-color_focus); + border-width: var(--quickoptions-link-border-width_focus); + box-shadow: var(--quickoptions-link-box-shadow_focus); + color: var(--quickoptions-link-color_focus); + font-weight: var(--quickoptions-link-font-weight_focus); + text-decoration: var(--quickoptions-link-text-decoration_focus); + text-shadow: var(--quickoptions-link-text-shadow_focus); +} +.quickoptions li a:focus-visible { + outline-color: var(--quickoptions-link-outline-color); + outline-offset: var(--quickbuttons-link-outline-offset); + outline-style: var(--quickbuttons-link-outline-style); + outline-width: var(--quickbuttons-link-outline-width); +} +.quickoptions li i::before, +.quickoptions li span.main_icons::before { + width: 1.5em; +} +/* Fix for quote on reply box */ #post_modify { border-radius: 4px; } @@ -1555,6 +2549,8 @@ ul li.greeting { margin: 1em 0 2em; } #post_event .roundframe { + --roundframe-padding-block: 12px; + --roundframe-padding-inline: 12%; padding: 12px 8%; overflow: auto; } @@ -1739,18 +2735,18 @@ fieldset.merge_options { /* Styles for the registration area. ------------------------------------------------------- */ .coppa_contact { - padding: 4px; + background: var(--window-bg); + border: 2px solid var(--roundframe-border-color); + margin-block: 1ex; + margin-inline: 4ex; + padding: 0.5em; width: 32ex; - background: var(--coppa_contact_bg_color); - color: var(--coppa_contact_txt_color); - margin-left: 5ex; - border: var(--coppa_contact_border_width) var(--coppa_contact_border_style) var(--coppa_contact_border_color); } .valid_input { - background: var(--valid_input_bg_color); + background: var(--input-bg_valid); } .invalid_input { - background: var(--invalid_input_bg_color); + background: var(--input-bg_invalid); } /* Styles for maintenance mode. @@ -1781,232 +2777,303 @@ tr.windowbg td, tr.bg td, .table_grid tr td { font-style: italic; } +/* File error */ .errorfile_table { - background: var(--errorfile_table_bg_color); + background: var(--errorfile-bg); border-collapse: collapse; + border-spacing: 1px; + box-shadow: var(--errorfile-box-shadow); + font-family: var(--errorfile-font-family); + font-size: var(--errorfile-font-size); + padding-block: var(--errorfile-padding-block); + padding-inline: var(--errorfile-padding-inline); +} +.errorfile_table td { + background: var(--errorfile-item-bg); + border-color: var(--errorfile-item-border-color); + border-style: var(--errorfile-item-border-style); + border-width: var(--errorfile-item-border-width); + box-shadow: var(--errorfile-item-box-shadow); + color: var(--errorfile-item-color); + padding-block: var(--errorfile-item-padding-block); + padding-inline: var(--errorfile-item-padding-inline); } .errorfile_table .file_line { - text-align: right; - padding-right: 6px; + background: var(--errorfile-item-bg_line); + text-align: end; } .errorfile_table td.current { - font-weight: bold; - border-top: var(--errorfile_table_td_current_border_width) var(--errorfile_table_td_current_border_style) var(--errorfile_table_td_current_border_color); - border-bottom: var(--errorfile_table_td_current_border_width) var(--errorfile_table_td_current_border_style) var(--errorfile_table_td_current_border_color); - border-width: 1px 0 1px 1px; - background: var(--errorfile_table_td_current_bg_color); -} - -.generic_menu { - margin: 5px 0; - background: var(--menu_bg_color); + --errorfile-item-border-width: 2px 0; + background: var(--errorfile-item-bg_current); + font-weight: 700; } - -/* Styles for (fatal) errors. +/* General styles for status boxes ------------------------------------------------- */ - -#fatal_error { - width: 80%; - margin: 0 auto 10px auto; +.errorbox, .noticebox, .infobox { + border-style: var(--generalbox-border-style); + border-width: var(--generalbox-border-width); + font-size: var(--generalbox-font-size); + margin-block: var(--generalbox-margin-block); + margin-inline: var(--generalbox-margin-inline); + padding-block: var(--generalbox-padding-block); + padding-inline: var(--generalbox-padding-inline); + position: relative; + text-shadow: var(--generalbox-text-shadow); + text-transform: var(--generalbox-text-transform); } .errorbox::before, .noticebox::before, .infobox::before { - width: 16px; - height: 16px; background: url(../images/icons/main_icons_sprite.png) no-repeat -57px -83px; - left: 10px; content: ""; + height: 16px; + inset-inline-start: 1em; + margin-top: -5px; position: absolute; top: 50%; - margin-top: -8px; + width: 16px; } -.errorbox, .noticebox, .infobox { - padding: 7px 10px 7px 35px; - margin-bottom: 12px; - position: relative; + +/* Styles for (fatal) errors. +------------------------------------------------- */ +#fatal_error { + margin-block: 10px; + margin-inline: auto; + width: 80%; } .errorbox { - background-color: var(--error_box_bg_color); - border-top: var(--error_box_border_width) var(--error_box_border_style) var(--error_box_border_color); - border-bottom: var(--error_box_border_width) var(--error_box_border_style) var(--error_box_border_color); + background: var(--errorbox-bg); + border-color: var(--errorbox-border-color); + color: var(--errorbox-color); } .errorbox h3 { - padding: 0; - margin: 0; font-size: 1.1em; + margin: 0; + padding: 0; text-decoration: underline; } .errorbox p { - margin: 12px 0 0 0; + margin-block: 12px 0; } .errorbox p.alert { - padding: 0; - margin: 0 4px 0 0; - float: left; - width: 12px; + float: inline-start; font-size: 1.5em; + margin-inline: 0.5em; + padding: 0; } .errorbox span { text-decoration: underline; } -/* Styles for info boxes +/* Styles for notice boxes ------------------------------------------------- */ - .noticebox::before { background-position: -83px -83px; } +.noticebox { + background: var(--noticebox-bg); + border-color: var(--noticebox-border-color); + color: var(--noticebox-color); +} +.descbox { + border-color: var(--descbox-border-color); + border-style: var(--descbox-border-style); + border-width: var(--descbox-border-width); + margin-block: var(--descbox-margin-block); + margin-inline: var(--descbox-margin-inline); + padding-block: var(--descbox-padding-block); + padding-inline: var(--descbox-padding-inline); +} + +/* Styles for notice boxes +------------------------------------------------- */ .infobox::before { background-position: -161px -83px; } -.noticebox { - color: var(--notice_box_txt_color); - background: var(--notice_box_bg_color); - border-top: var(--notice_box_border_width) var(--notice_box_border_style) var(--notice_box_border_color); - border-bottom: var(--notice_box_border_width) var(--notice_box_border_style) var(--notice_box_border_color); -} .infobox { - color: var(--info_box_txt_color); - background: var(--info_box_bg_color); - border-top: var(--info_box_border_width) var(--info_box_border_style) var(--info_box_border_color); - border-bottom: var(--info_box_border_width) var(--info_box_border_style) var(--info_box_border_color); -} -.descbox { - padding: 7px 10px 7px 10px; - border: var(--desc_box_border_width) var(--desc_box_border_style) var(--desc_box_border_color); - margin: 6px 0; + background: var(--infobox-bg); + border-color: var(--infobox-border-color); + color: var(--infobox-color); } /* Styles for stats bars and progress bars. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - .generic_bar, .progress_bar { - border: var(--generic_bar_border_width) var(--generic_bar_border_style) var(--generic_bar_border_color); - background: var(--generic_bar_bg_color); - min-height: 16px; - line-height: 1.4em; - border-radius: var(--generic_bar_border_radius); - position: relative; + background: var(--genericbar-bg); + border-color: var(--genericbar-border-color); + border-radius: var(--genericbar-border-radius); + border-style: var(--genericbar-border-style); + border-width: var(--genericbar-border-width); + box-shadow: var(--genericbar-box-shadow); + color: var(--genericbar-color); + font-size: var(--genericbar-font-size); + font-weight: var(--genericbar-font-weight); + min-height: var(--genericbar-height); + line-height: var(--genericbar-line-height); overflow: hidden; - color: var(--generic_bar_txt_color); -} -.generic_bar span, .progress_bar span { + padding-block: var(--genericbar-padding-block); + padding-inline: var(--genericbar-padding-inline); position: relative; - z-index: 2; - text-shadow: var(--generic_bar_span_txt_shadow); - display: inline-block; - padding: 0 5px; + text-shadow: var(--genericbar-text-shadow); } .generic_bar .bar, .progress_bar .bar { - position: absolute; - z-index: 1; - top: 0; - left: 0; + background: var(--genericbar-inner-bg); + border-color: var(--genericbar-inner-border-color); + border-radius: var(--genericbar-inner-border-radius); + border-style: var(--genericbar-inner-border-style); + border-width: var(--genericbar-inner-border-width); bottom: 0; - background: var(--generic_bar_bar_bg_color); - transition: width .3s; - border-radius: var(--generic_bar_bar_border_radius); - box-shadow: var(--generic_bar_bar_box_shadow); + box-shadow: var(--genericbar-inner-box-shadow); + color: var(--genericbar-inner-color); display: block; + inset-inline-start: 0; + transition: width .3s; + top: 0; + position: absolute; +} +.generic_bar span, .progress_bar span { + display: inline-block; + padding-inline: 0.5em; + position: relative; + z-index: 1; } .generic_bar.vertical { - width: 15px; + width: var(--genericbar-width); } .generic_bar.vertical .bar { - right: 0; + inset-inline-end: 0; top: auto; box-shadow: var(--generic_bar_vertical_bar_box_shadow); } - .progress_bar { - border-radius: var(--progress_bar_border_radius); + background: var(--progressbar-bg); + border-color: var(--progressbar-border-color); + border-radius: var(--progressbar-border-radius); + border-style: var(--progressbar-border-style); + border-width: var(--progressbar-border-width); + box-shadow: var(--progressbar-box-shadow); + color: var(--progressbar-color); + font-size: var(--progressbar-font-size); + font-weight: var(--progressbar-font-weight); + min-height: var(--progressbar-height); + line-height: var(--progressbar-line-height); + overflow: hidden; + padding-block: var(--progressbar-padding-block); + padding-inline: var(--progressbar-padding-inline); + position: relative; text-align: center; - font-weight: bold; - color: var(--progress_bar_txt_color); + text-shadow: var(--progressbar-text-shadow); } .progress_bar .bar { - box-shadow: var(--progress_bar_bar_box_shadow); - background-color: var(--progress_bar_bar_bg_color); - background-size: 30px 30px; - background-image: var(--progress_bar_bar_bg_image); + background: var(--progressbar-inner-bg); + border-color: var(--progressbar-inner-border-color); + border-radius: var(--progressbar-inner-border-radius); + border-style: var(--progressbar-inner-border-style); + border-width: var(--progressbar-inner-border-width); + box-shadow: var(--progressbar-inner-box-shadow); } -.progress_yellow .bar { - background-color: var(--progress_yellow_bar_bg_color); +.progress_blue .bar { + background-color: var(--progressbar-inner-bg_blue); } .progress_green .bar { - background-color: var(--progress_green_bar_bg_color); + background-color: var(--progressbar-inner-bg_green); } .progress_red .bar { - background-color: var(--progress_red_bar_bg_color); + background-color: var(--progressbar-inner-bg_red); } -.progress_blue .bar { - background-color: var(--progress_blue_bar_bg_color); +.progress_yellow .bar { + background-color: var(--progressbar-inner-bg_yellow); } /* Styles for the profile section. ------------------------------------------------- */ - -dl { - overflow: auto; -} - /* The basic user info on the left */ +#profileview { + display: grid; + gap: var(--profilesummary-gap); + grid: var(--profilesummary-grid); + padding-block: var(--profilesummary-padding-block); + padding-inline: var(--profilesummary-padding-inline); +} #basicinfo { - width: 20%; - float: left; + background: var(--basicinfo-bg); + border-color: var(--basicinfo-border-color); + border-radius: var(--basicinfo-border-radius); + border-style: var(--basicinfo-border-style); + border-width: var(--basicinfo-border-width); + box-shadow: var(--basicinfo-box-shadow); + display: flex; + flex-direction: column; + gap: var(--basicinfo-gap); + margin-block: var(--basicinfo-margin-block); + margin-inline: var(--basicinfo-margin-inline); + padding-block: var(--basicinfo-padding-block); + padding-inline: var(--basicinfo-padding-inline); + text-align: center; } #detailedinfo { - width: 79.5%; - float: right; -} -#basicinfo > * { - margin-bottom: 3px; + background: var(--detailedinfo-bg); + border-color: var(--detailedinfo-border-color); + border-radius: var(--detailedinfo-border-radius); + border-style: var(--detailedinfo-border-style); + border-width: var(--detailedinfo-border-width); + box-shadow: var(--detailedinfo-box-shadow); + display: flex; + flex-direction: column; + gap: var(--detailedinfo-gap); + margin-block: var(--detailedinfo-margin-block); + margin-inline: var(--detailedinfo-margin-inline); + padding-block: var(--detailedinfo-padding-block); + padding-inline: var(--detailedinfo-padding-inline); } + #basicinfo h4 { font-size: 1.4em; font-weight: normal; - -webkit-hyphens: auto; - -ms-hyphens: auto; hyphens: auto; - word-wrap: break-word; /* IE fallback */ overflow-wrap: break-word; + word-wrap: break-word; /* IE fallback */ } #basicinfo h4 span.position { - font-size: 0.8em; display: block; -} -#basicinfo img.avatar, dl.settings img.avatar { - display: block; - max-width: 160px; - height: auto !important; + font-size: 0.8em; } #basicinfo ul { list-style-type: none; } +#basicinfo .icon_fields { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 0.5em; + justify-content: center; + margin-bottom: 1em; +} +#basicinfo .icon_fields img { + display: block; +} #basicinfo .icon_fields li { + margin: 0; + padding: 0; +} +#basicinfo img.avatar, dl.settings img.avatar { display: block; - float: left; - margin-right: 5px; - height: 20px; + max-width: 160px; + height: auto !important; + margin-inline: auto; } #basicinfo #userstatus { display: block; - clear: both; -} -#basicinfo #userstatus img { - vertical-align: middle; } #detailedinfo dl, #tracking dl { clear: right; overflow: auto; margin: 0 0 18px 0; padding: 0 0 15px 0; - border-bottom: var(--detailedinfo_border_width) var(--detailedinfo_border_style) var(--detailedinfo_border_color); + border-bottom: var(--detailedinfo-border-color) solid 1px; } #detailedinfo dt, #tracking dt { width: 35%; margin: 0 0 3px 0; - font-weight: bold; - color: var(--detailedinfo_txt_color); + font-weight: 700; } #detailedinfo dd, #tracking dd { width: 65%; @@ -2041,36 +3108,31 @@ dl { margin: 6px 0; } .activity_stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(2em, 1fr)); + justify-content: center; margin: 10px 0; } .activity_stats li { - width: 4.16%; - float: left; text-align: center; } .activity_stats li span { + background: var(--window-bg); + border-color: var(--window-border-color); + border-style: var(--window-border-style); + border-width: 1px 0; display: block; - border: var(--activity_stats_border_width) var(--activity_stats_border_style) var(--activity_stats_border_color); - border-left: none; - border-right: none; - background: var(--activity_stats_bg_color); -} -.activity_stats li.last span { - border-right: none; + font-size: 0.8em; } .activity_stats li .generic_bar { height: 100px; - border-bottom: none; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - margin: 0 auto; + margin-inline: auto; } .activity_stats li .generic_bar span { position: absolute; top: -1000em; left: -1000em; } - .profile_pie { background: url(../images/stats_pie.png); background-size: auto 20px; @@ -2087,9 +3149,8 @@ dl { } .counter { padding: 5px 6px 1px 2px; - font-size: 2.2em; + font-size: 1.5em; font-weight: bold; - color: var(--counter_txt_color); float: left; } .topic_details { @@ -2099,16 +3160,21 @@ dl { margin-left: 25px; } .list_posts { - border-top: var(--border_width) var(--border_style) var(--border_color); - box-shadow: var(--list_posts_box_shadow); - padding-top: 1em; - margin-top: 1em; - margin-bottom: 1em; + background: var(--post-inner-bg); + border-color: var(--post-inner-border-color); + border-radius: var(--post-inner-border-radius); + border-style: var(--post-inner-border-style); + border-width: var(--post-inner-border-width); + box-shadow: var(--post-inner-box-shadow); clear: both; - -webkit-hyphens: auto; - -ms-hyphens: auto; hyphens: auto; + margin-block: var(--post-inner-margin-block); + margin-inline: var(--post-inner-margin-inline); + min-height: var(--post-inner-height); overflow-wrap: break-word; + padding-block: var(--post-inner-padding-block); + padding-inline: var(--post-inner-padding-inline); + word-wrap: break-word; } .topic h4 { margin: 3px 0; @@ -2193,48 +3259,18 @@ dl { float: left; } #pick_theme .selected { - background: var(--pick_theme_selected_bg_color); + background: var(--window-bg_hover); } /* Signature preview */ - #preview_signature, #preview_signature_display { width: 100%; overflow: hidden; } -/* Issue a warning */ -#warn_body { - width: 100%; - font-size: 0.9em; -} -#warn_temp { - font-size: smaller; -} - -/* Warning level bar */ -.warning_level { - text-align: center; - font-weight: bold; - max-width: 250px; -} -.warning_level.none .bar { - background-color: var(--warning_level_none_bar_bg_color); -} -.warning_level.watched .bar { - background-color: var(--warning_level_watched_bar_bg_color); -} -.warning_level.moderated .bar { - background-color: var(--warning_level_moderated_bar_bg_color); -} -.warning_level.muted .bar { - background-color: var(--warning_level_muted_bar_bg_color); -} - /* Styles for the statistics center. ------------------------------------------------- */ #statistics .roundframe { - margin: 0; border-top-left-radius: 0; border-top-right-radius: 0; } @@ -2280,7 +3316,6 @@ dl.stats { /* Styles for the personal messages section. ------------------------------------------------- */ - #personal_messages h3 span#author, #personal_messages h3 span#topic_title { float: left; } @@ -2294,26 +3329,31 @@ dl.stats { padding: 0 12px 0 0; } #personal_messages .capacity_bar { - background: var(--personal_messages_capcity_bar_bg_color); + background: var(--capacitybar-bg); + border-color: var(--capacitybar-border-color); + border-radius: var(--capacitybar-border-radius); + border-style: var(--capacitybar-border-style); + border-width: var(--capacitybar-border-width); + box-shadow: var(--capacitybar-box-shadow); display: block; - margin: 6px 0 0 12px; - height: 12px; - border: var(--personal_messages_capcity_bar_border_width) var(--personal_messages_capcity_bar_border_style) var(--personal_messages_capcity_bar_border_color); - width: 10em; + height: var(--capacitybar-height); + margin-block: var(--capacitybar-margin-block); + margin-inline: var(--capacitybar-margin-inline); + width: var(--capacitybar-width); } #personal_messages .capacity_bar span { - border-right: var(--personal_messages_capcity_bar_border_width) var(--personal_messages_capcity_bar_border_style) var(--personal_messages_capcity_bar_border_color); display: block; - height: 12px; + max-width: 100%; + height: 100%; } #personal_messages .capacity_bar span.empty { - background: var(--personal_messages_empty_capacity_bar_bg_color); + background: var(--capacitybar-bg_empty); } #personal_messages .capacity_bar span.filled { - background: var(--personal_messages_filled_capacity_bar_bg_color); + background: var(--capacitybar-bg_filled); } #personal_messages .capacity_bar span.full { - background: var(--personal_messages_full_capacity_bar_bg_color); + background: var(--capacitybar-bg_full); } #personal_messages .reportlinks { padding: 6px 1.3em; @@ -2338,19 +3378,13 @@ dl.addrules dt.floatleft { float: left; margin-right: 10px; } -.unread_pm { - background: var(--unread_pm_bg_color); -} /* Styles for the show alerts section. ------------------------------------------------- */ #alerts .alert_inline_time { display: none; } -#alerts .quickbuttons { - display: flex; - margin: 4px 0; -} -#alerts .quickbuttons li, #alerts .alert_time { +#alerts .quickbuttons li, +#alerts .alert_time { white-space: nowrap; } #alerts .alert_image { @@ -2413,9 +3447,10 @@ dl.addrules dt.floatleft { border: none; } #searchform .roundframe { - border-radius: 0; - margin: 0; - padding: 32px; + --roundframe-border-radius: 0; + --roundframe-margin-block: 0; + --roundframe-padding-block: 2em; + --roundframe-padding-inline: 2em; } #searchform .alt { border-top: 0; @@ -2459,7 +3494,9 @@ dl.addrules dt.floatleft { #helpmain { margin: 12px 0 0 0; padding: 8px 20px 12px 20px; - border: var(--border_width) var(--border_style) var(--border_color); + border-color: var(--window-border-color); + border-style: var(--window-border-style); + border-width: var(--window-border-width); overflow: auto; } #helpmain p { @@ -2480,18 +3517,23 @@ dl.addrules dt.floatleft { /* Styles for the tooltips ------------------------------------------------------- */ .tooltip { - position: absolute; - z-index: 999; + background: var(--tooltip-bg); + border-color: var(--tooltip-border-color); + border-radius: var(--tooltip-border-radius); + border-style: var(--tooltip-border-style); + border-width: var(--tooltip-border-width); + box-shadow: var(--tooltip-box-shadow); + color: var(--tooltip-color); left: -9999px; - word-wrap: break-word; /* IE fallback */ + max-width: var(--tooltip-width); + margin-block: var(--tooltip-margin-block); + margin-inline: var(--tooltip-margin-inline); + padding-block: var(--tooltip-padding-block); + padding-inline: var(--tooltip-padding-inline); overflow-wrap: break-word; - max-width: 350px; - padding: 6px 9px; - color: var(--tooltip_txt_color); - background: var(--tooltip_bg_color); - border: var(--tooltip_border_width) var(--tooltip_border_style) var(--tooltip_border_color); - border-radius: var(--tooltip_border_radius); - box-shadow: var(--tooltip_box_shadow); + position: absolute; + word-wrap: break-word; /* IE fallback */ + z-index: 999; } /* Styles for popup windows */ @@ -2569,61 +3611,95 @@ dl.addrules dt.floatleft { margin: -4px 4px 0 0; } +/* Windowbg */ .generic_list_wrapper, .windowbg, .approvebg, .approvebg2 { - background: var(--window_bg_color); - padding: 12px 16px; - border: var(--border_width) var(--border_style) var(--border_color); + background: var(--window-bg); + border-color: var(--window-border-color); + border-radius: var(--window-border-radius); + border-style: var(--window-border-style); + border-width: var(--window-border-width); + box-shadow: var(--window-box-shadow); + color: var(--window-color); + padding-block: var(--window-padding-block); + padding-inline: var(--window-padding-inline); + margin-block: var(--window-margin-block); + margin-inline: var(--window-margin-inline); overflow: auto; } -.windowbg:nth-of-type(even), .bg.even { - background: var(--window_bg_even_color); +:nth-child(even of .windowbg), .bg.even { + background: var(--window-even-bg); +} +/* Special treatment for #forumposts area */ +#forumposts .windowbg, +#forumposts .approvebg, +#forumposts .approvebg2, +#pmFolder .windowbg { + --window-margin-block: 0.5em; + padding: 0; + overflow: visible; } -.windowbg:nth-of-type(odd), .bg.odd { - background: var(--window_bg_odd_color); +/* Tweak windowbg for other scenarios */ +tr.windowbg { + --window-border-width: 1px; } - -/* Highlight the target item */ -.windowbg:target { - background: var(--window_target_bg_color); +tr.windowbg td { + padding-block: var(--window-padding-block); + padding-inline: var(--window-padding-inline); +} +tr.windowbg { + --window-box-shadow: none; } - -/* Add some hover on table rows */ tr.windowbg:hover { - background: var(--window_table_row_bg_hover_color); + background: var(--window-bg_hover); } - -/* Special treatment for #forumposts area */ -#forumposts .windowbg, #forumposts .approvebg, #forumposts .approvebg2, #pmFolder .windowbg { - margin: 12px 0 0 0; - overflow: visible; +tr.windowbg:nth-of-type(odd):hover { + background: var(--window-even-bg_hover); +} +td.windowbg { + --window-border-radius: 0; +} +/* Highlight the target item */ +.windowbg:target { + background: var(--window-target-bg); } /* Nobody wants locked topics to stand out much. */ .windowbg.locked { - background: var(--window_locked_bg_color); + background: var(--window-locked-bg); } /* Sticky topics get a different background */ .windowbg.sticky { - background: var(--window_sticky_bg_color); + background: var(--window-sticky-bg); } /* Locked AND sticky are a bit more technical */ .windowbg.sticky.locked { - background: var(--window_sticky_locked_bg_color); + background: var(--window-stickylocked-bg); } /* Awaiting approval is a bit special, topics first */ .windowbg.approvetopic { - background: var(--window_approve_topic_bg_color); + background: var(--window-approvetopic-bg); } /* Unapproved posts in approved topics */ .windowbg.approvepost { - background: var(--window_approve_post_bg_color); + background: var(--window-approvepost-bg); +} +/* Colors for background of posts requiring approval */ +.approvebg, .approvebg2 { + color: var(--approve-color); + background: var(--approve-bg); } +.approvebg2 { + background: var(--approve2-bg); +} + .generic_list_wrapper .additional_row { - margin: 0; - padding: 5px 0; border-radius: 0; + margin: 0; + padding-block: 5px; } .generic_list_wrapper table.table_grid { - border-bottom: var(--border_width) var(--border_style) var(--border_color); + border-color: var(--tablegrid-border-color); + border-style: var(--tablegrid-border-style); + border-width: var(--tablegrid-border-width); } div#editlang_desc { margin-bottom: 8px; @@ -2634,46 +3710,25 @@ div#editlang_desc { .table_grid tr.windowbg td.centercol { text-align: center; } -tr.windowbg { - box-shadow: none; -} #postmodify #message { width: 100%; } #postmodify .lastedit { font-weight: bold; } - -/* Colors for background of posts requiring approval */ -.approvebg { - color: var(--approve_txt_color); - background: var(--approve_bg_color); -} -.approvebg2 { - color: var(--approve_txt_color); - background: var(--approve_bg_color_2); -} - div#manage_boards dl dd textarea[name=desc] { margin-top: 1px; } -.bold_text { - font-weight: bold; -} - /* Profile > This needed for responsive (get rid of
) */ .infolinks { display: block; } #groups .windowbg { - box-shadow: none; - border-radius: 0; - border-top: 0; - margin: 0; + --window-margin-block: 0; } -#groups .padding { - margin: 0 0 25px 0; +#groups .windowbg.righttext { + --window-margin-block: 0.5em 0.75em; } .groupmembership textarea { width: 100%; @@ -2684,9 +3739,6 @@ div#manage_boards dl dd textarea[name=desc] { /* BoardIndex */ /* This place covers board places (boardindex/messageindex/recent) */ -.boardindex_table:not(:last-child) { - margin-bottom: 15px; -} h3 .collapse { float: right; margin: 4px 4px 0 0; @@ -2710,13 +3762,13 @@ h3 .collapse { font-family: "Font Awesome 6 Free"; font-size: 2em; content: "\f086"; - color: var(--link); + color: var(--body-link-color); } .board_icon a.board_on::before { font-weight: 900; } .board_icon a:hover::before { - color: var(--link_hover); + color: var(--body-link-color_hover); text-decoration: none; } .board_icon a.board_on2::before { @@ -2756,7 +3808,7 @@ h3 .collapse { .info .subject { font-weight: 700; font-size: 1em; - color: var(--link); + color: var(--body-link-color); } .board_stats { width: 10%; @@ -2771,7 +3823,6 @@ h3 .collapse { .lastpost { width: 20%; font-size: 0.9em; - position: relative; display: inline-flex; } .lastpost .board_avatar { @@ -2802,18 +3853,24 @@ h3 .collapse { margin-bottom: 20px; } .up_contain { - background: var(--up_contain_bg_color); - overflow: hidden; - border: var(--border_width) var(--border_style) var(--border_color); - margin: 0px 0px 0px 0px; + background: var(--window-bg); + border-color: var(--window-border-color); + border-style: var(--window-border-style); + border-width: var(--window-border-width); display: flex; flex-wrap: wrap; + margin: 0; + overflow: hidden; +} +.up_contain:not(:first-child) { + --window-border-width: 0 1px 1px; } /* Child boards */ +/* @todo ? */ .children { - background: var(--children_bg_color); - border-top: var(--border_width) var(--border_style) var(--border_color); - padding: var(--children_padding); + background: var(--window-even-bg); + border-top: 1px var(--window-border-style) var(--window-border-color); + padding: 0.25em 1em; width: 100%; } .children p { @@ -2834,13 +3891,14 @@ p.moderators a { span.postby { display: block; } + /* Info Center */ #info_center { clear: both; padding: 0px; } #info_center .sub_bar { - border-top: var(--border_width) var(--border_style) var(--border_color); + border-top: 1px var(--window-border-style) var(--window-border-color); } #info_center .sub_bar:first-child { border-top: none; @@ -2859,7 +3917,7 @@ span.postby { padding: 0 4px 0 0; } #ic_recentposts td { - border-top: var(--border_width) var(--border_style) var(--border_color); + border-top: 1px var(--window-border-style) var(--window-border-color); padding: 0 4px 0 0; vertical-align: top; } @@ -2900,47 +3958,55 @@ span.postby { } /* Info Center Blocks */ -.info_center_container { - background: var(--info_center_container_bg_color); - margin: 5px 0px; - box-shadow: var(--info_center_box_shadow); - border-radius: var(--info_center_border_radius); +#upshrink_stats { + display: grid; + gap: var(--infocenter-gap); + margin-block: var(--infocenter-margin-block); + margin-inline: var(--infocenter-margin-inline); + padding-block: var(--infocenter-padding-block); + padding-inline: var(--infocenter-padding-inline); +} +.info_block { + background: var(--infoblock-bg); + border-color: var(--infoblock-border-color); + border-radius: var(--infoblock-border-radius); + border-style: var(--infoblock-border-style); + border-width: var(--infoblock-border-width); + box-shadow: var(--infoblock-box-shadow); + display: flex; + gap: var(--infoblock-gap); + margin-block: var(--infoblock-margin-block); + margin-inline: var(--infoblock-margin-inline); } - .info_block_icon { - display: block; - min-height: 100%; - padding: 3px 10px 3px 8px; - min-width: 30px; -} - -.info_block_icon.column._0 .main_icons::before { - vertical-align: middle; -} -.info_block_information { - background: var(--info_block_information_bg_color); - border-radius: var(--info_center_border_radius); -} -.row { + background: var(--infoblock-icon-bg); + color: var(--infoblock-icon-color); display: flex; - flex-direction: row; - flex-wrap: wrap; - } - -.column { - flex-basis: 100%; - flex: 1; -} - -._0 { flex: 0; + font-size: var(--infoblock-icon-font-size); + justify-content: center; + min-width: var(--infoblock-icon-width); + padding-block: var(--infoblock-icon-padding-block); + padding-inline: var(--infoblock-icon-padding-inline); } -._100 { - flex: 10; +.info_block_information { + background: var(--infoblock-info-bg); + border-color: var(--infoblock-info-border-color); + border-radius: var(--infoblock-info-border-radius); + border-style: var(--infoblock-info-border-style); + border-width: var(--infoblock-info-border-width); + box-shadow: var(--infoblock-info-box-shadow); + color: var(--infoblock-info-color); + gap: var(--infoblock-info-gap); + padding-block: var(--infoblock-info-padding-block); + padding-inline: var(--infoblock-info-padding-inline); + flex: 1; } /* MessageIndex */ -/* Start with description and other things */ +#messageindex { + margin-block: 0.5em; +} #description_board, .filter_row { padding: 8px 10px; border-radius: 6px 6px 0 0; @@ -2968,7 +4034,9 @@ span.postby { margin-top: 5px !important; } #topic_container .windowbg { - border: var(--border_width) var(--border_style) var(--border_color); + border-color: var(--window-border-color); + border-style: var(--window-border-style); + border-width: var(--window-border-width); border-top: none; display: flex; padding: 0; @@ -3101,64 +4169,95 @@ div#pollmoderation { display: block; clear: both; } +.post_wrapper { + display: grid; + gap: var(--postwrapper-gap); + grid: var(--postwrapper-grid); + padding-block: var(--postwrapper-padding-block); + padding-inline: var(--postwrapper-padding-inline); +} /* poster details and list of items */ .poster { - float: left; - /* Don't set this in em.It will eat too much space if people need to set large text sizes. */ - width: 160px; - -webkit-hyphens: auto; - -ms-hyphens: auto; + background: var(--poster-bg); + display: flex; + flex-direction: column; + font-size: var(--poster-font-size); + gap: var(--poster-gap); + grid-row: var(--poster-grid-row); hyphens: auto; - word-wrap: break-word; /* IE fallback */ + margin-block: var(--poster-margin-block); + margin-inline: var(--poster-margin-inline); overflow-wrap: break-word; + padding-block: var(--poster-padding-block); + padding-inline: var(--poster-padding-inline); + word-wrap: break-word; + width: var(--poster-width); } .poster h4 { - font-size: 1.2em; + background: var(--poster-title-bg); + font-size: var(--poster-title-font-size); + font-weight: var(--poster-title-font-weight); + margin-block: var(--poster-title-margin-block); + margin-inline: var(--poster-title-margin-inline); + padding-block: var(--poster-title-padding-block); + padding-inline: var(--poster-title-padding-inline); + text-align: center; } -.poster h4, .poster h4 a, .poster li:hover h4 a, .poster h4 a:hover .poster li h4 a, .poster h4 a:focus { - margin: 0; - padding: 0; +.poster h4, +.poster h4 a { + color: var(--poster-title-color); + text-decoration: var(--poster-title-text-decoration); + text-shadow: var(--poster-title-text-shadow); } - -.poster .profile .profile_icons li, .poster .im_icons li { - display: table-cell; - padding-right: 5px; +.user_info { + display: flex; + flex-direction: column; + gap: var(--poster-gap); + text-align: center; } - -/* The visible stuff below the avatar. */ -.user_info > li { - margin: 3px 0 0 0; +.poster img { + vertical-align: middle; } -.poster li.membergroup { - font-weight: bold; +.user_info li.membergroup { + font-weight: 700; } /* @todo Re-code this a bit to give background on anchor. */ -.poster li.poster_online, .poster li.poster_online:hover { +.user_info li.poster_online, .poster li.poster_online:hover { padding: 1px 1px 1px 1px; margin: 3px 10px; } -.poster li.poster_online a { +.user_info li.poster_online a { color: var(--poster_online_link_color); line-height: 1.6em; } -.poster li.poster_online:hover, .poster li.poster_online:hover a { +.user_info li.poster_online:hover, .user_info li.poster_online:hover a { text-decoration: underline; } -.poster li.warning a img { +.user_info li.warning a img { vertical-align: bottom; padding: 0 2px; } -.poster img { - vertical-align: middle; +.user_info .profile_icons, +.user_info .im_icons ol { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: var(--poster-gap); + justify-content: center; } -img.avatar { - object-fit: scale-down; +.user_info .profile_icons a, +.user_info .im_icons a { + display: inline-flex; } -.poster img.avatar { +.user_info img.avatar { max-width: 100%; + object-fit: scale-down; } +/* The post area */ .postarea, .moderatorbar { - margin: 0 0 0 175px; + grid-column: 2/-1; + padding-block: var(--postarea-padding-block); + padding-inline: var(--postarea-padding-inline); } .postarea div.flow_hidden { width: 100%; @@ -3166,6 +4265,8 @@ img.avatar { .moderatorbar { clear: right; } + + .messageicon { display: inline-block; } @@ -3187,14 +4288,10 @@ img.avatar { clear: right; display: block; } -.keyinfo .postinfo a, .keyinfo .postinfo a strong { - color: var(--key_post_info_link_color); -} .keyinfo .postinfo .spacer { flex: 1 1 auto; } .keyinfo .postinfo .modified { - color: var(--keyinfo_postinfo_modified_txt_color); font-weight: normal; font-style: italic; padding: 2px 4px 0 4px; @@ -3219,30 +4316,34 @@ img.avatar { } .subject_title a { font-size: 0.9em; - color: var(--subject_title_link_color); font-weight: bold; } .subject_hidden a { display: none; } .page_number { - color: var(--page_number_txt_color); - font-weight: bold; padding: 4px 0 0 4px; line-height: 1.5em; } .inner { - padding: 7px 8px 2px 2px; - margin: 0; - border-top: var(--inner_border_width) var(--inner_border_style) var(--inner_border_color); - box-shadow: var(--inner_box_shadow); - min-height: 85px; - word-wrap: break-word; /* IE fallback */ + background: var(--post-inner-bg); + border-color: var(--post-inner-border-color); + border-radius: var(--post-inner-border-radius); + border-style: var(--post-inner-border-style); + border-width: var(--post-inner-border-width); + box-shadow: var(--post-inner-box-shadow); + margin-block: var(--post-inner-margin-block); + margin-inline: var(--post-inner-margin-inline); + min-height: var(--post-inner-height); overflow-wrap: break-word; + padding-block: var(--post-inner-padding-block); + padding-inline: var(--post-inner-padding-inline); + word-wrap: break-word; } img.smiley { vertical-align: bottom; } + .attachments { padding: 12px 0 0 0; } @@ -3279,7 +4380,9 @@ img.smiley { clear: both; } #quickreply_options .roundframe { - margin: 0; + --roundframe-margin-block: 0; + --roundframe-padding-block: 8px 12px; + --roundframe-padding-inline: 10%; padding: 8px 8% 12px; border-top-left-radius: 0; border-top-right-radius: 0; @@ -3290,7 +4393,9 @@ img.smiley { } /* Styles for edit post section */ form#postmodify .roundframe { - padding: 12px 8%; + --roundframe-margin-block: 1.25em 0; + --roundframe-padding-block: 0.75em; + --roundframe-padding-inline: 12%; } #post_header { padding: 6px; @@ -3350,24 +4455,30 @@ ul.post_options li { #postAttachment dt, #postAttachment2 dt { font-weight: bold; } + +/* Drafts Options/List */ #post_draft_options { - background: var(--post_draft_options_bg_color); - border: var(--post_draft_options_border_width) var(--post_draft_options_border_style) var(--post_draft_options_border_color); - border-left: var(--post_draft_options_border_left_width) var(--post_draft_options_border_left_style) var(--post_draft_options_border_left_color); - border-top: none; - border-radius: var(--post_draft_options_border_radius); + background: var(--window-bg); + border-color: var(--window-border-color); + border-radius: var(--window-border-radius); + border-style: var(--window-border-style); + border-top-left-radius: 0; + border-top-right-radius: 0; + border-width: 0 1px 1px; + box-shadow: var(--window-box-shadow); + padding-inline: 0.5em; } + #post_draft_options .settings dd, #post_draft_options .settings dt { - width: 50%; - border-top: var(--post_draft_options_settings_border_width) var(--post_draft_options_settings_border_style) var(--post_draft_options_settings_border_color); + border-color: var(--window-border-color); + border-style: var(--window-border-style); + border-width: 1px 0 0; padding: 5px 10px; margin: 0; + width: 50%; } #post_draft_options .settings dd:first-of-type, #post_draft_options .settings dt:first-child { - border-top: none; /* Some people are OCD, like me. :P */ -} -#post_draft_options .settings strong { - color: var(--post_draft_options_settings_strong_txt_color); + border-top: none; } #post_confirm_buttons { display: flex; @@ -3415,19 +4526,47 @@ ul.post_options li { #smileyBox_message { margin: 6px; } -/* All the signatures used in the forum. If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */ +/* All the signatures used in the forum. */ .signature, .attachments, .under_message, .custom_fields_above_signature, .custom_fields_below_signature { width: 100%; overflow: auto; - clear: right; + clear: inline-end; padding: 12px 0 3px 0; - border-top: 1px solid var(--signature_border_color); - box-shadow: 0 1px 0 var(--signature_box_shadow) inset; line-height: 1.4em; font-size: 0.9em; } +/* Attachments */ +.attachments { + background: var(--attachments-bg); + border-color: var(--attachments-border-color); + border-radius: var(--attachments-border-radius); + border-style: var(--attachments-border-style); + border-width: var(--attachments-border-width); + box-shadow: var(--attachments-box-shadow); + font-size: var(--attachments-font-size); + line-height: var(--attachments-line-height); + margin-block: var(--attachments-margin-block); + margin-inline: var(--attachments-margin-inline); + padding-block: var(--attachments-padding-block); + padding-inline: var(--attachments-padding-inline); +} +/* Signatures */ +.signature { + background: var(--signature-bg); + border-color: var(--signature-border-color); + border-radius: var(--signature-border-radius); + border-style: var(--signature-border-style); + border-width: var(--signature-border-width); + box-shadow: var(--signature-box-shadow); + font-size: var(--signature-font-size); + line-height: var(--signature-line-height); + margin-block: var(--signature-margin-block); + margin-inline: var(--signature-margin-inline); + padding-block: var(--signature-padding-block); + padding-inline: var(--signature-padding-inline); +} .under_message { overflow: visible; border: none; @@ -3458,129 +4597,348 @@ ul.post_options li { margin: 0; } -/* File error */ -.errorfile_table { - font-family: monospace; - border-spacing: 1px; -} -.errorfile_table td { - background: var(--errorfile_table_td_bg_color); -} -.errorfile_table .current { - background: var(--errorfile_table_current_bg_color); -} -.errorfile_table .file_line.current { - background: var(--errorfile_table_file_line_current_bg_color); -} -.errorfile_table .file_line { - background: var(--errorfile_table_file_line_bg_color); -} - -/* General Classes */ /* Cat_bar / catbg */ +.cat_bar { + align-items: center; + background: var(--catbar-bg); + border-color: var(--catbg-border-color); + border-radius: var(--catbar-border-radius); + border-style: var(--catbar-border-style); + border-width: var(--catbar-border-width); + box-shadow: var(--catbar-box-shadow); + color: var(--catbar-color); + display: flex; + flex-wrap: wrap; + font-family: var(--catbar-font-family); + font-size: var(--catbar-font-size); + font-weight: var(--catbar-font-weight); + gap: var(--catbar-gap); + line-height: var(--catbar-line-height); + margin-block: var(--catbar-margin-block); + margin-inline: var(--catbar-margin-inline); + min-height: var(--catbar-height); + padding-block: var(--catbar-padding-block); + padding-inline: var(--catbar-padding-inline); + text-decoration: var(--catbar-text-decoration); + text-shadow: var(--catbar-text-shadow); +} div.cat_bar { - background: var(--cat_bg_color); - padding: var(--cat_bar_outer_padding); - border-radius: var(--cat_bar_border_radius); + align-items: center; + display: flex; + flex-wrap: wrap; + gap: var(--titlebar-gap); +} +.cat_bar:hover { + color: var(--catbar-color_hover); + font-weight: var(--catbar-font-weight_hover); + text-decoration: var(--catbar-text-decoration_hover); + text-shadow: var(--catbar-text-shadow_hover); } -.cat_bar.collapsed, -.cat_bar.cat_bar_round { - border-radius: var(--cat_bar_collapsed_border_radius); +.cat_bar:is(:focus, :focus-within) { + color: var(--catbar-color_focus); + font-weight: var(--catbar-font-weight_focus); + text-decoration: var(--catbar-text-decoration_focus); + text-shadow: var(--catbar-text-shadow_focus); } -.cat_bar h3 { - padding: var(--cat_bar_inner_padding); +.cat_bar a { + color: var(--catbar-color); } -/* Styles for rounded headers. */ .cat_bar .desc { - color: var(--cat_bar_desc_txt_color); - font-size: 13px; - line-height: 1.3em; - font-weight: normal; - margin: -8px 0 4px 12px; + flex-basis: 100%; + font-size: 0.8em; + padding-block: 0.2em; } .cat_bar .desc a { - color: var(--cat_bar_link_color); - font-weight: 600; + border-bottom: 1px dotted var(--catbar-color); + text-decoration: none; } h3.catbg { - overflow: hidden; - font-size: 1.1em; -} -h3.catbg, h3.catbg a, h3.catbg a:hover { - color: var(--cat_bar_link_color); -} + background: var(--catbg-bg); + border-color: var(--catbg-border-color); + border-radius: var(--catbg-border-radius); + border-style: var(--catbg-border-style); + border-width: var(--catbg-border-width); + box-shadow: var(--catbg-box-shadow); + color: var(--catbg-color); + flex: 1 0 auto; + font-family: var(--catbg-font-family); + font-size: var(--catbg-font-size); + font-weight: var(--catbg-font-weight); + margin-block: var(--catbg-margin-block); + margin-inline: var(--catbg-margin-inline); + padding-block: var(--catbg-padding-block); + padding-inline: var(--catbg-padding-inline); + text-decoration: var(--catbg-text-decoration); + text-shadow: var(--catbg-text-shadow); +} +h3.catbg a { + color: var(--catbg-color); + font-weight: var(--catbg-font-weight); + text-decoration: var(--catbg-text-decoration); + text-shadow: var(--catbg-text-shadow); +} +h3.catbg:hover, h3.catbg a:hover { - text-decoration: none; -} -h3.catbg .main_icons::before, h3.catbg .icon { - margin: 0 5px 0 0; -} -.cat_bar + .windowbg, .cat_bar + .roundframe { - margin-top: -1px; + color: var(--catbg-color_hover); + font-weight: var(--catbg-font-weight_hover); + text-decoration: var(--catbg-text-decoration_hover); + text-shadow: var(--catbg-text-shadow_hover); +} +h3.catbg:is(:focus, :focus-visible, :focus-within), +h3.catbg a:is(:focus, :focus-visible) { + color: var(--catbg-color_focus); + font-weight: var(--catbg-font-weight_focus); + text-decoration: var(--catbg-text-decoration_focus); + text-shadow: var(--catbg-text-shadow_focus); +} +h3.catbg a:focus-visible { + outline-color: var(--catbg-outline-color); + outline-offset: var(--catbg-outline-offset); + outline-style: var(--catbg-outline-style); + outline-width: var(--catbg-outline-color); +} +h3.catbg span.main_icons { + padding-inline-end: 0.5em; +} +.cat_bar + .windowbg, +.cat_bar + .roundframe { + --roundframe-margin-block: -1px 0; + --window-margin-block: -1px 0; border-top-left-radius: 0; border-top-right-radius: 0; } .cat_bar + .title_bar { margin-top: 0; } -/* Roundframe */ -.roundframe { - margin: 10px 0 0 0; - padding: 12px 16px; - background: var(--roundframe_bg_color); - border: none; - border-radius: var(--roundframe_border_radius); - overflow: auto; -} -/* TitleBar & SubBar */ + +/* Title_bar / titlebg */ .title_bar { - border-top: var(--title_bar_border_top_width) var(--title_bar_border_top_style) var(--title_bar_border_top_color); - border-bottom: var(--title_bar_border_bottom_width) var(--title_bar_border_bottom_style) var(--title_bar_border_bottom_color); - background: var(--title_bar_bg_color); - color: var(--title_bar_link); - border-radius: var(--title_bar_border_radius); - margin: 0px; -} -.sub_bar { - border-bottom: var(--border_width) var(--border_style) var(--border_color); - background: none; - clear: both; + background: var(--titlebar-bg); + border-color: var(--titlebar-border-color); + border-radius: var(--titlebar-border-radius); + border-style: var(--titlebar-border-style); + border-width: var(--titlebar-border-width); + box-shadow: var(--titlebar-box-shadow); + color: var(--titlebar-color); + font-family: var(--titlebar-font-family); + font-size: var(--titlebar-font-size); + font-weight: var(--titlebar-font-weight); + line-height: var(--titlebar-line-height); + margin-block: var(--titlebar-margin-block); + margin-inline: var(--titlebar-margin-inline); + min-height: var(--titlebar-height); + padding-block: var(--titlebar-padding-block); + padding-inline: var(--titlebar-padding-inline); + text-decoration: var(--titlebar-text-decoration); + text-shadow: var(--titlebar-text-shadow); +} +div.title_bar { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: var(--titlebar-gap); } -h3.titlebg, h4.titlebg, .titlebg, h3.subbg, h4.subbg, .subbg { - background: none; - color: var(--title_bar_link); - font-weight: bold; - overflow: hidden; - padding: vaR(--title_bar_inner_padding); +.title_bar:hover { + color: var(--titlebar-color_hover); + font-weight: var(--titlebar-font-weight_hover); + text-decoration: var(--titlebar-text-decoration_hover); + text-shadow: var(--titlebar-text-shadow_hover); } -.titlebg a { - background: none; - color: var(--title_bar_link); - text-decoration: none; +.title_bar:is(:focus, :focus-within) { + color: var(--titlebar-color_focus); + font-weight: var(--titlebar-font-weight_focus); + text-decoration: var(--titlebar-text-decoration_focus); + text-shadow: var(--titlebar-text-shadow_focus); } - -.subbg a { - background: none; - color: var(--sub_bar_link_color); - text-decoration: none; +.title_bar a { + color: var(--titlebar-color); } -.title_bar + .windowbg, .title_bar + .roundframe { +.title_bar + .windowbg, +.title_bar + .roundframe { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; } +h4.titlebg, +h3.titlebg { + background: var(--titlebg-bg); + border-color: var(--titlebg-border-color); + border-radius: var(--titlebg-border-radius); + border-style: var(--titlebg-border-style); + border-width: var(--titlebg-border-width); + box-shadow: var(--titlebg-box-shadow); + color: var(--titlebg-color); + flex: 1 0 auto; + font-family: var(--titlebg-font-family); + font-size: var(--titlebg-font-size); + font-weight: var(--titlebg-font-weight); + margin-block: var(--titlebg-margin-block); + margin-inline: var(--titlebg-margin-inline); + padding-block: var(--titlebg-padding-block); + padding-inline: var(--titlebg-padding-inline); + text-decoration: var(--titlebg-text-decoration); + text-shadow: var(--titlebg-text-shadow); +} +h4.titlebg a, +h3.titlebg a { + color: var(--titlebg-color); + font-weight: var(--titlebg-font-weight); + text-decoration: var(--titlebg-text-decoration); + text-shadow: var(--titlebg-text-shadow); +} +h4.titlebg:hover, +h4.titlebg a:hover, +h3.titlebg:hover, +h3.titlebg a:hover { + color: var(--titlebg-color_hover); + font-weight: var(--titlebg-font-weight_hover); + text-decoration: var(--titlebg-text-decoration_hover); + text-shadow: var(--titlebg-text-shadow_hover); +} +h4.titlebg:is(:focus, :focus-visible, :focus-within), +h4.titlebg a:is(:focus, :focus-visible), +h3.titlebg:is(:focus, :focus-visible, :focus-within), +h3.titlebg a:is(:focus, :focus-visible) { + color: var(--titlebg-color_focus); + font-weight: var(--titlebg-font-weight_focus); + text-decoration: var(--titlebg-text-decoration_focus); + text-shadow: var(--titlebg-text-shadow_focus); +} +h4.titlebg a:focus-visible, +h3.titlebg a:focus-visible { + outline-color: var(--titlebg-outline-color); + outline-offset: var(--titlebg-outline-offset); + outline-style: var(--titlebg-outline-style); + outline-width: var(--titlebg-outline-color); +} + +/** Sub_bar / subbg **/ +.sub_bar { + align-items: center; + background: var(--subbar-bg); + border-color: var(--subbar-border-color); + border-radius: var(--subbar-border-radius); + border-style: var(--subbar-border-style); + border-width: var(--subbar-border-width); + box-shadow: var(--subbar-box-shadow); + clear: both; + color: var(--subbar-color); + display: flex; + flex-wrap: wrap; + font-family: var(--subbar-font-family); + font-size: var(--subbar-font-size); + font-weight: var(--subbar-font-weight); + gap: var(--titlebar-gap); + line-height: var(--subbar-line-height); + margin-block: var(--subbar-margin-block); + margin-inline: var(--subbar-margin-inline); + min-height: var(--subbar-height); + padding-block: var(--subbar-padding-block); + padding-inline: var(--subbar-padding-inline); + text-decoration: var(--subbar-text-decoration); + text-shadow: var(--subbar-text-shadow); +} +.sub_bar:hover { + color: var(--subbar-color_hover); + font-weight: var(--subbar-font-weight_hover); + text-decoration: var(--subbar-text-decoration_hover); + text-shadow: var(--subbar-text-shadow_hover); +} +.sub_bar:is(:focus, :focus-within) { + color: var(--subbar-color_focus); + font-weight: var(--subbar-font-weight_focus); + text-decoration: var(--subbar-text-decoration_focus); + text-shadow: var(--subbar-text-shadow_focus); +} +.sub_bar a { + color: var(--subbar-color); +} +h4.subbg, +h3.subbg { + background: var(--subbg-bg); + border-color: var(--subbg-border-color); + border-radius: var(--subbg-border-radius); + border-style: var(--subbg-border-style); + border-width: var(--subbg-border-width); + box-shadow: var(--subbg-box-shadow); + color: var(--subbg-color); + flex: 1 0 auto; + font-family: var(--subbg-font-family); + font-size: var(--subbg-font-size); + font-weight: var(--subbg-font-weight); + margin-block: var(--subbg-margin-block); + margin-inline: var(--subbg-margin-inline); + padding-block: var(--subbg-padding-block); + padding-inline: var(--subbg-padding-inline); + text-decoration: var(--subbg-text-decoration); + text-shadow: var(--subbg-text-shadow); +} +h4.subbg a, +h3.subbg a { + color: var(--subbg-color); + font-weight: var(--subbg-font-weight); + text-decoration: var(--subbg-text-decoration); + text-shadow: var(--subbg-text-shadow); +} +h4.subbg:hover, +h4.subbg a:hover, +h3.subbg:hover, +h3.subbg a:hover { + color: var(--subbg-color_hover); + font-weight: var(--subbg-font-weight_hover); + text-decoration: var(--subbg-text-decoration_hover); + text-shadow: var(--subbg-text-shadow_hover); +} +h4.subbg:is(:focus, :focus-visible, :focus-within), +h4.subbg a:is(:focus, :focus-visible), +h3.subbg:is(:focus, :focus-visible, :focus-within), +h3.subbg a:is(:focus, :focus-visible) { + color: var(--subbg-color_focus); + font-weight: var(--subbg-font-weight_focus); + text-decoration: var(--subbg-text-decoration_focus); + text-shadow: var(--subbg-text-shadow_focus); +} +h4.subbg a:focus-visible, +h3.subbg a:focus-visible { + outline-color: var(--subbg-outline-color); + outline-offset: var(--subbg-outline-offset); + outline-style: var(--subbg-outline-style); + outline-width: var(--subbg-outline-color); +} -/* Other */ +/* Roundframe */ +.roundframe { + background: var(--roundframe-bg); + border-color: var(--roundframe-border-color); + border-radius: var(--roundframe-border-radius); + border-style: var(--roundframe-border-style); + border-width: var(--roundframe-border-width); + box-shadow: var(--roundframe-box-shadow); + color: var(--roundframe-color); + font-size: var(--roundframe-font-size); + margin-block: var(--roundframe-margin-block); + margin-inline: var(--roundframe-margin-inline); + overflow: auto; + padding-block: var(--roundframe-padding-block); + padding-inline: var(--roundframe-padding-inline); + text-shadow: var(--roundframe-text-shadow); +} /* Information */ .information { - background: var(--information_bg_color); + background: var(--information-bg); + border-color: var(--information-border-color); + border-radius: var(--information-border-radius); + border-style: var(--information-border-style); + border-width: var(--information-border-width); + box-shadow: var(--information-box-shadow); + color: var(--information-color); + font-size: var(--information-font-size); + margin-block: var(--information-margin-block); + margin-inline: var(--information-margin-inline); overflow: auto; - padding-bottom: .5em; - border: var(--information_border_width) var(--information_border_style) var(--information_border_color); - border-top: none; - border-radius: var(--information_border_radius); - margin: 0 0 10px 0; - padding: 12px 9px 8px 9px; + padding-block: var(--information-padding-block); + padding-inline: var(--information-padding-inline); + text-shadow: var(--information-text-shadow); } .generic_list_wrapper .information div { background: none; @@ -3603,12 +4961,13 @@ p.information img { flex: 1 0 auto; } #messageindex .information { - border-radius: 0; - margin: 0; + --information-border-radius: 0; + --information-margin-block: 0; + --information-margin-inline: 0; } #topic_icons .information, #messageindex .information { - border-top: var(--information_border_width) var(--information_border_style) var(--information_border_color); + --information-border-width: 1px; } .topic_pages { font-size: 0.75em; @@ -3622,64 +4981,74 @@ p.information img { } /* Mentions */ .atwho-view { + background: var(--mentions-bg); + border-color: var(--mentions-border-color); + border-radius: var(--mentions-border-radius); + border-style: var(--mentions-border-style); + border-width: var(--mentions-border-width); + box-shadow: var(--mentions-box-shadow); + display: none; + margin-block: var(--mentions-margin-block); + margin-inline: var(--mentions-margin-inline); + min-width: var(--mentions-width); + padding-block: var(--mentions-padding-block); + padding-inline: var(--mentions-padding-inline); position: absolute; top: 0; - left: 0; - display: none; - margin-top: 18px; - background: var(--atwho_view_bg_color); - border: var(--atwho_view_border_width) var(--atwho_view_border_style) var(--atwho_view_border_color); - border-radius: var(--atwho_view_border_radius); - box-shadow: var(--atwho_view_box_shadow); - min-width: 120px; z-index: 11110 !important; } -.atwho-view .cur { - background: var(--atwho_view_cur_bg_color); - color: var(--atwho_view_cur_txt_color); -} -.atwho-view .cur small { - color: var(--atwho_view_cur_small_txt_color); -} -.atwho-view strong { - color: var(--atwho_view_strong_tex); -} -.atwho-view .cur strong { - color: var(--atwho_view_cur_strong_txt_color); - font-weight: bold; -} .atwho-view ul { list-style: none; - padding: 0; margin: auto; + padding: 0; } -.atwho-view ul li { - display: block; - padding: 5px 10px; - border-bottom: var(--atwho_view_border_width) var(--atwho_view_border_style) var(--atwho_view_border_color); - cursor: pointer; +.atwho-view li { + background: var(--mentions-item-bg); + border-color: var(--mentions-item-border-color); + border-radius: var(--mentions-item-border-radius); + border-style: var(--mentions-item-border-style); + border-width: var(--mentions-item-border-width); + box-shadow: var(--mentions-item-box-shadow); + color: var(--mentions-item-color); + cursor: var(--mentions-item-cursor); + font-size: var(--mentions-item-font-size); + font-weight: var(--mentions-item-font-weight); + margin-block: var(--mentions-item-margin-block); + margin-inline: var(--mentions-item-margin-inline); + padding-block: var(--mentions-item-padding-block); + padding-inline: var(--mentions-item-padding-inline); +} +.atwho-view li:last-child { + --mentions-item-border-width: 0; } -.atwho-view small { - font-size: smaller; - color: var(--atwho_view_small_txt_color); - font-weight: normal; +.atwho-view .cur { + background: var(--mentions-item-bg_current); + color: var(--mentions-item-color_current); + font-size: var(--mentions-item-font-size_current); + font-weight: var(--mentions-item-font-weight_current); +} +.atwho-view li strong { + color: inherit; } + /* On/Off Icons (User) */ .on, .off { + border-radius: var(--userstatus-border-radius); + border-style: var(--userstatus-border-style); + border-width: var(--userstatus-border-width); + box-shadow: var(--userstatus-box-shadow); display: inline-block; - width: 14px; - height: 14px; - border-radius: var(--on_off_border_radius); - border: 1px solid transparent; + height: var(--userstatus-height); vertical-align: middle; + width: var(--userstatus-width); } .on { - background: var(--on_bg_color); - border-color: var(--on_border_color); + background: var(--userstatus-on-bg); + border-color: var(--userstatus-on-border-color); } .off { - background: var(--off_bg_color); - border-color: var(--off_border_color); + background: var(--userstatus-off-bg); + border-color: var(--userstatus-off-border-color); } #userstatus .smalltext { margin: 0 0 0 5px !important; @@ -3752,45 +5121,88 @@ h3.profile_hd::before, font-size: 0.9em; } -/* Some new stuff */ +/* Section Head */ #display_head { - clear: both; - margin: -7px 0 15px 0; + background: var(--sectionhead-bg); + border-color: var(--sectionhead-border-color); + border-radius: var(--sectionhead-border-radius); + border-style: var(--sectionhead-border-style); + border-width: var(--sectionhead-border-width); + box-shadow: var(--sectionhead-box-shadow); + color: var(--sectionhead-color); + /* @todo + display: flex; + flex-direction: column; */ + gap: var(--sectionhead-gap); + margin-block: var(--sectionhead-margin-block); + margin-inline: var(--sectionhead-margin-inline); + padding-block: var(--sectionhead-padding-block); + padding-inline: var(--sectionhead-padding-inline); +} +#display_head h2 { + color: var(--sectionhead-title-color); + font-weight: var(--sectionhead-title-font-weight); + font-size: var(--sectionhead-title-font-size); + line-height: var(--sectionhead-title-line-height); + margin-block: var(--sectionhead-title-margin-block); + margin-inline: var(--sectionhead-title-margin-inline); + padding-block: var(--sectionhead-title-padding-block); + padding-inline: var(--sectionhead-title-padding-inline); + overflow-wrap: break-word; } #display_head p { - color: var(--display_head_txt_color); -} -#display_head span { - margin: -4px 0 0 0; -} -.display_title { - font-weight: normal; - font-size: 26px; - margin-bottom: 0.25em; - line-height: 1.05em; - overflow-wrap: break-word; + color: var(--sectionhead-text-color); + font-size: var(--sectionhead-text-font-size); + font-weight: var(--sectionhead-text-font-weight); + line-height: var(--sectionhead-text-line-height); + margin-block: var(--sectionhead-text-margin-block); + margin-inline: var(--sectionhead-text-margin-inline); + padding-block: var(--sectionhead-text-padding-block); + padding-inline: var(--sectionhead-text-padding-inline); +} +#display_head a { + color: var(--sectionhead-link-color); + font-size: var(--sectionhead-link-font-size); + font-weight: var(--sectionhead-link-font-weight); + text-decoration: var(--sectionhead-link-text-decoration); + text-shadow: var(--sectionhead-link-text-shadow); +} +#display_head a:hover { + color: var(--sectionhead-link-color_hover); + font-weight: var(--sectionhead-link-font-weight_hover); + text-decoration: var(--sectionhead-link-text-decoration_hover); + text-shadow: var(--sectionhead-link-text-shadow_hover); +} +#display_head a:focus { + color: var(--sectionhead-link-color_focus); + font-weight: var(--sectionhead-link-font-weight_focus); + text-decoration: var(--sectionhead-link-text-decoration_focus); + text-shadow: var(--sectionhead-link-text-shadow_focus); } #reported_posts .main_icons, #reported_members .main_icons { margin: -3px 1px 0 0; } -#reported_posts .quickbuttons li a, -#reported_members .quickbuttons li a { - background: none; -} - /* Some colors for generic usage */ /* Sometimes there will be an error when you post */ /* Messages that somehow need to attract the attention. */ +.orange, +.warn_moderate, +.main_icons.warning_moderate { + color: var(--orange); +} .red, .meaction, -.error, .alert, .warn_mute { +.error, .alert, .warn_mute, +.main_icons.warning_mute { color: var(--red); } .blue { color: var(--blue); } -.green { +.green, +.warn_watch, .success +.main_icons.warning_watch { color: var(--green); } @@ -3805,21 +5217,6 @@ h3.profile_hd::before, display: block; margin: 0 0 5px 0; } - -/* Alternating colors */ -.stripes:nth-of-type(even) { - background-color: var(--stripes_even_bg_color); -} -.stripes:nth-of-type(odd) { - background-color: var(--stripes_odd_bg_color); -} -.alternative { - background-color: var(--alternative_bg_color); -} -.alternative2 { - background-color: var(--alternative_bg_2_color); -} - .centerbox { top: 50%; left: 50%; @@ -3889,16 +5286,12 @@ input[name="attachBBC"] { display: none; } -/* Hide this from desktop users sshh... our little sekrit */ -.mobile_buttons, .mobile_display { - display: none; -} - /* Two-Factor Auth code container */ .tfacode { - background: var(--tfacode_bg_color); - padding: 5px; + background: var(--tfacode-bg); display: inline-block; + padding-block: var(--tfacode-padding-block); + padding-inline: var(--tfacode-padding-inline); } /* TFA QR block */ @@ -3914,16 +5307,13 @@ input[name="attachBBC"] { .noup { border-top-left-radius: 0; border-top-right-radius: 0; - margin: 0 0 10px 0 !important; + margin-block: 0 10px !important; } .information.noup { border-radius: 0; margin: 0 !important; border-bottom: none; } -.windowbg.noup { - box-shadow: none; -} /* Make the reCAPTCHA dialog centered to match the positioning of the built-in verification */ .g-recaptcha { @@ -3972,9 +5362,9 @@ tr[id^='list_news_lists_'] textarea { height: 100% !important; } .videocontainer video { - object-fit: contain; - background: var(--video_container_bg_color); + background: #000; max-width: 100%; + object-fit: contain; } .backtrace:not(:last-child) { @@ -4010,7 +5400,7 @@ img.theme_thumbnail { } .theme-switch { - color: var(--link); + color: var(--body-link-color); position: absolute; top: 5px; } diff --git a/Themes/default/css/rtl.css b/Themes/default/css/rtl.css index d46c65e584..3608b5c12a 100644 --- a/Themes/default/css/rtl.css +++ b/Themes/default/css/rtl.css @@ -1,51 +1,12 @@ /* Common classes to easy styling. ------------------------------------------------------- */ - -.floatright { - float: left; -} -.floatleft { - float: right; -} -.clear_left { - clear: right; -} -.clear_right { - clear: left; -} -.righttext { - text-align: left; -} -.lefttext { - text-align: right; -} -/* Styling for BBC tags */ -.bbc_list { - text-align: right; -} -/* A quote, perhaps from another post. */ -.bbc_standard_quote::before, .bbc_alternate_quote::before { - content: '\275E'; - margin-left: 0.25em; -} - -/* All the signatures used in the forum. If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */ -.signature, .attachments, .custom_fields_above_signature { - clear: left; -} - -/* the page navigation area */ -.main_icons.move::before, .main_icons.next_page::before { - background-position: -31px -57px; -} +/* Previous Page */ .main_icons.previous_page::before { - background-position: -5px -31px; + content: "\f061"; } - -/* Amounts */ -.amt { - margin-left: 0; - margin-right: 3px; +/* Next Page */ +.main_icons.next_page::before { + content: "\f060"; } /* Lists with settings use these a lot. @@ -67,6 +28,11 @@ dl.settings img { margin: 0 0 0 10px; } +/* Subsections arrow */ +.dropmenu li.subsections > a::after { + rotate: 180deg; +} + /* Styles for popup windows ------------------------------------------------------- */ .popup_heading .hide_popup { @@ -79,39 +45,7 @@ dl.settings img { h3.catbg .icon { margin: -2px 0 0 5px; } -.cat_bar .desc { - margin: -8px 13px 4px 0; -} - -/* Introduce New Title Bar */ -h3.titlebg, h4.titlebg, .titlebg, h3.subbg, h4.subbg, .subbg { - padding-right: 9px; - padding-left: 9px; -} - -/* Styles for the standard dropdown menus. -------------------------------------------------------- */ - -/* Level 3 submenu wrapper positioning. */ -.dropmenu li ul ul { - margin-left: -10em; -} -/* This is a small fix for dropmenu icons */ -.dropmenu .main_icons, #profile_menu .main_icons, .dropmenu img { - margin: 0 -4px 0 8px; -} - -/* Indicator for additional levels. Best in the anchor so it stays visible on hover. */ -.dropmenu li li.subsections > a::after { - left: 10px; - right: auto; - content: '\25c4'; -} -/* the main title. */ -h1.forumtitle { - float: right; -} /* float these items to the left */ #siteslogan, img#smflogo { float: left; @@ -127,50 +61,18 @@ img#smflogo { padding-left: 0; text-align: left; } -#upper_section .news { - float: right; -} - -/* Profile drop it needs reverse on RTL */ -#profile_menu_top > img.avatar { - float: right; - margin: 2px 0 0 5px; -} -#profile_menu .profile_user_info { - margin: 3px 10px 5px 0; -} -#profile_menu .profile_user_avatar img { - margin: 5px 10px 0 0; -} -.profile_user_links li { - padding-right: 24px; - padding-left: 0; -} /* The framing graphics */ #search_form { text-align: left; } -/* The navigation list (i.e. linktree) */ -.navigate_section ul li { - float: right; -} - -.navigate_section ul li .dividers { - padding: 0 6px 0 2px; -} - /* the posting icons */ #postbuttons_upper ul li a span { line-height: 19px; padding: 0 6px 0 0; } -.mark_read { - float: left; -} - /* Poll results */ #poll_options dl.options { padding: 1em 2em 1em 2.5em; @@ -203,43 +105,6 @@ img#smflogo { padding: 0; margin: 0; } - -/* The quick buttons */ -ul.quickbuttons { - float: left; - clear: left; -} -ul.quickbuttons li { - float: right; -} -.quickbuttons li:last-child, .quickbuttons li:last-child:hover { - border-radius: 4px 1px 1px 4px; - padding-bottom: 0; -} -.quickbuttons li:first-child, .quickbuttons li:first-child:hover { - border-radius: 1px 4px 4px 1px; - padding-bottom: 0; - line-height: 1.9em; -} -.quickbuttons li.quick_edit, .quickbuttons li.post_options { - line-height: 1.9em; - position: relative; -} -.quickbuttons li ul { - text-align: right; - right: unset; - left: -1px; -} -/* The buttonrow */ -.buttonrow .button:last-child { - border-radius: 0; - border-right: 0; -} -.buttonrow .button:first-child { - border-radius: 0; - border-right: 1px solid #ccc; -} - .post_verification #verification_control { margin: .3em 1em .3em 0; } @@ -385,23 +250,6 @@ div#admin_menu { margin-left: 40px; } -/* Styles for info boxes. -------------------------------------------------- */ -.errorbox, .noticebox, .infobox { - padding: 7px 35px 7px 10px; -} -.errorbox::before, .noticebox::before, .infobox::before { - left: 0; - right: 10px; -} -.errorbox p.alert { - margin: 0 0 0 4px; - float: right; -} -.errorbox, .noticebox, .infobox { - padding: 7px 35px 7px 10px; -} - /* Styles for the profile section. ------------------------------------------------- */ #basicinfo { @@ -515,10 +363,6 @@ dl.stats dd { #stats tr.windowbg th.stats_month { text-align: right; } -.generic_bar .bar, .progress_bar .bar { - left: unset; - right: 0; -} tr.windowbg th.stats_month, tr.windowbg td.stats_day { text-align: right; } @@ -565,11 +409,6 @@ tr.windowbg th.stats_month, tr.windowbg td.stats_day { /* Styles for the admincenter (reverse admin.css). ------------------------------------------------- */ -/* common admin classes */ -#admin_content .button { - float: left; -} - #manage_boards .button { margin: 2px 6px 0px 6px; } From a6305d428eb0a26c07a63cbabc9f0350aa140a2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Andr=C3=A9s?= Date: Thu, 28 Dec 2023 21:32:26 -0600 Subject: [PATCH 021/115] move quicksearch MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Diego Andrés --- Themes/default/Admin.template.php | 2 +- Themes/default/GenericMenu.template.php | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/Themes/default/Admin.template.php b/Themes/default/Admin.template.php index 43f20686ee..ea11eb687e 100644 --- a/Themes/default/Admin.template.php +++ b/Themes/default/Admin.template.php @@ -1341,12 +1341,12 @@ function template_admin_search_results() { echo '
- ', template_admin_quick_search(), '

', Lang::getTxt('admin_search_results_desc', Utils::$context, file: 'Admin'), '

+ ', template_admin_quick_search(), '
'; diff --git a/Themes/default/GenericMenu.template.php b/Themes/default/GenericMenu.template.php index aa4adf2a1b..9488365163 100644 --- a/Themes/default/GenericMenu.template.php +++ b/Themes/default/GenericMenu.template.php @@ -153,13 +153,7 @@ function template_generic_menu_tabs(&$menu_context) if (!empty($tab_context['title'])) { echo ' -
'; - - // The function is in Admin.template.php, but since this template is used elsewhere too better check if the function is available - if (function_exists('template_admin_quick_search')) - template_admin_quick_search(); - - echo ' +

'; // Exactly how many tabs do we have? @@ -233,7 +227,13 @@ function template_generic_menu_tabs(&$menu_context) ', $tab_context['title']; echo ' -

+ '; + + // The function is in Admin.template.php, but since this template is used elsewhere too better check if the function is available + if (function_exists('template_admin_quick_search')) + template_admin_quick_search(); + + echo '
'; } From 2c9cdbf161530bc5e7aab959d10234cea9d07308 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Andr=C3=A9s?= Date: Thu, 28 Dec 2023 21:33:24 -0600 Subject: [PATCH 022/115] load icons.css and variables.css MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Diego Andrés --- Sources/Theme.php | 6 ++++++ Themes/default/css/{custom.css => icons.css} | 7 +++++-- 2 files changed, 11 insertions(+), 2 deletions(-) rename Themes/default/css/{custom.css => icons.css} (99%) diff --git a/Sources/Theme.php b/Sources/Theme.php index bcb6a29784..c83720b0a7 100644 --- a/Sources/Theme.php +++ b/Sources/Theme.php @@ -2135,6 +2135,12 @@ protected function loadCss(): void self::loadCSSFile('https://use.fontawesome.com/releases/v' . FONTAWESOME_VERSION . '/css/all.css', ['external' => true, 'order_pos' => -100], 'smf_fontawesome'); } + // Icons + self::loadCSSFile('icons.css', ['minimize' => true, 'order_pos' => -200], 'smf_icons'); + + // Variables + self::loadCSSFile('variables.css', ['minimize' => true, 'order_pos' => 0], 'smf_variables'); + // And of course, let's load the default CSS file. self::loadCSSFile('index.css', ['minimize' => true, 'order_pos' => 1], 'smf_index'); diff --git a/Themes/default/css/custom.css b/Themes/default/css/icons.css similarity index 99% rename from Themes/default/css/custom.css rename to Themes/default/css/icons.css index 5663f28d9c..ddce19c728 100644 --- a/Themes/default/css/custom.css +++ b/Themes/default/css/icons.css @@ -6,6 +6,9 @@ */ /* Replace SMF Icons */ +.main_icons { + display: inline-flex; +} .main_icons::before, h3.profile_hd::before, .large_admin_menu_icon::before { @@ -19,13 +22,13 @@ h3.profile_hd::before, background: none !important; width: auto; height: auto; - font-size: 0.95em; + font-size: 1em; margin: 0; vertical-align: top; } /* Menu Icons Adjustment */ .dropmenu .main_icons::before, #profile_menu .main_icons::before, .dropmenu img { - margin: -3px 8px 0 0; + margin: 0; vertical-align: middle; } /* Bigger Icons */ From 0521c797cb32720e7a84961f67ebfaeae22836a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Andr=C3=A9s?= Date: Thu, 28 Dec 2023 21:34:05 -0600 Subject: [PATCH 023/115] responsive css minor changes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Diego Andrés --- Themes/default/css/responsive.css | 117 ++++++++---------------------- 1 file changed, 32 insertions(+), 85 deletions(-) diff --git a/Themes/default/css/responsive.css b/Themes/default/css/responsive.css index 1dba63a8c3..bafdb870e6 100644 --- a/Themes/default/css/responsive.css +++ b/Themes/default/css/responsive.css @@ -59,23 +59,9 @@ height: auto; } #mobile_action .notify_dropdown { - top: 0 !important; - left: 0 !important; + top: 0.25em; position: relative; } - #mobile_action .top_menu { - padding: 0; - margin: 0 auto; - } - #mobile_action .notify_dropdown a { - border-bottom: var(--border_width) var(--border_style) var(--border_color); - } - #mobile_action .notify_dropdown a:last-of-type { - border-bottom: none; - } - #mobile_action .notify_dropdown span { - display: none; - } .mobile_buttons { margin: 5px 0; } @@ -85,8 +71,11 @@ .pagesection .buttonlist, #moderationbuttons { display: none; } + .buttonlist > li, .buttonlist > li > a { + width: 100%; + } .mobile_buttons { - display: block; + display: inline-flex; } } @@ -144,19 +133,16 @@ .action_home { width: 100% !important; } - #wrapper { - border-left: 0; - border-right: 0; - border-radius: 0; - } - #footer { - padding: 10px; - } - #top_section .inner_wrap, #wrapper, #header .inner_wrap, #footer .inner_wrap, #main_menu .inner_wrap { + #wrapper, #top_section .inner_wrap, #header .inner_wrap, #footer .inner_wrap, #main_menu .inner_wrap { width: 100%; } - #upper_section, #inner_section, #content_section { - border-radius: 0; + nav#main_menu, + .navigate_section, + #content_section { + --_padding-inline: 0.5em; + --contentsection-padding-inline: var(--_padding-inline); + --nav-padding-inline: var(--_padding-inline); + --navigatesection-margin-inline: var(--_padding-inline); } #boardindex_table .stats { display: none; @@ -471,6 +457,8 @@ #main_menu .popup_window, #genericmenu .popup_window, #adm_submenus .popup_window { + display: flex; + flex-direction: column; top: 15%; width: 95vw; min-height: auto; @@ -507,56 +495,24 @@ height: 24px; width: 24px; } + .dropmenu { + flex-direction: column; + } .dropmenu li, .dropmenu li:hover, .dropmenu li a, .dropmenu li a:hover, .dropmenu li a.active, .dropmenu li a.active:hover, .dropmenu li:hover a.active, .dropmenu li ul, .dropmenu li li, .dropmenu li li a { width: 100%; - padding: 0; - margin: 0; - border-left: 0; - border-right: 0; - } - .dropmenu li a, .dropmenu li a:hover { - text-indent: 10px; - border-radius: 0; - padding: 5px 0 !important; - } - .dropmenu li li li a, - .dropmenu li li li a:hover { - padding: 5px 24px !important; - } - .dropmenu li a, .dropmenu li:hover a, - .dropmenu li a.active, .dropmenu li a.active:hover, - .dropmenu ul li a:hover, .dropmenu li li a:hover, - .dropmenu ul li li:hover, .dropmenu li ul, - .dropmenu li li:hover ul, .dropmenu li li ul { + border-left: 0; border-right: 0; } - .dropmenu ul li a { - width: auto !important; - } .dropmenu li.subsections > a::after { - position: absolute; - padding: 5px 0; - right: 10px; - font-family: var(--dropmenu_subsections_font_family); - font-size: var(--dropmenu_subsections_font_size); - line-height: var(--dropmenu_subsections_line_height); - content: "\25bc" !important; - } - .dropmenu li ul, - .dropmenu li li:hover ul, .dropmenu li li ul { - position: relative; - border-radius: 0; - left: 0; - top: 0; - box-shadow: none; + display: block; + content: "\25bc"; } - /* 3rd level menu tests */ - .dropmenu li ul ul { - margin: 0 !important; + .dropmenu li > ul { + position: static; } } @@ -575,12 +531,11 @@ /* Entry level phones */ @media (max-width: 480px) { - h1.forumtitle a, h1.forumtitle { - padding: 0px; - max-width: 220px; - margin: 0px; - min-height: 80px; - display: inline-flex; + #header .inner_wrap { + flex-wrap: wrap; + } + h1.forumtitle { + --forumtitle-margin-inline: auto; } .board_moderators { display: none; @@ -594,16 +549,12 @@ max-width: calc(100vw - 17px); } #footer { - text-align: center; + --footer-padding-inline: 0.5em; } - #footer ul { - width: 100%; - float: none; - } - #footer li { - display: block; - float: none; + #footer .inner_wrap { + justify-content: center; } + /* MessageIndex */ #main_content_section .pagelinks { display: block; @@ -616,10 +567,6 @@ display: block; width: 100%; } - /* some new stuff for far better UX */ - .mobile_subject { - position: relative; - } fieldset { max-width: 100%; min-width: unset; From 462a641e7402cb3d30ac917b55772a1b43b95134 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Andr=C3=A9s?= Date: Thu, 28 Dec 2023 21:34:18 -0600 Subject: [PATCH 024/115] layout tweaks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Diego Andrés --- Themes/default/index.template.php | 145 +++++++++++++++--------------- 1 file changed, 75 insertions(+), 70 deletions(-) diff --git a/Themes/default/index.template.php b/Themes/default/index.template.php index 8cb5d1e40d..f182759dc7 100644 --- a/Themes/default/index.template.php +++ b/Themes/default/index.template.php @@ -92,7 +92,7 @@ function template_html_above() { // Show right to left, the language code, and the character set for ease of translating. echo ' - +settings['theme_variants']) ? str_replace('_', '', ' data-variant=' . (Utils::$context['theme_variant'] ?: 'default')) : '', '> '; @@ -125,8 +125,6 @@ functions on the SMF wiki. 'integrate_pre_css_output', 'integrate_pre_javascript_output' for a single file. */ - Theme::loadCSSFile('custom.css', array('minimize' => true)); - // load in any css from mods or themes so they can overwrite if wanted Theme::template_css(); @@ -218,44 +216,64 @@ function template_body_above() // If the user is logged in, display some things that might be useful. echo '
'; - if (User::$me->is_logged) + + if (!empty(Config::$modSettings['userLanguage']) && !empty(Utils::$context['languages']) && count(Utils::$context['languages']) > 1) { - // Firstly, the user's menu echo ' - '; - if (!empty(Config::$modSettings['userLanguage']) && !empty(Utils::$context['languages']) && count(Utils::$context['languages']) > 1) - { - echo ' -
- - -
'; - } echo '
'; - // Show the menu here, according to the menu sub template, followed by the navigation tree. - // Load mobile menu here - echo ' - - - ', Lang::getTxt('mobile_user_menu', file: 'General'), ' - - '; + // Show the menu here + template_menu(); // Wrapper echo '
'; - theme_linktree(); + theme_linktree(); // The main content should go here. echo ' @@ -512,7 +484,18 @@ function theme_linktree($force_show = false) function template_menu() { echo ' -
    '; + + + ', Lang::$txt['mobile_user_menu'], ' + + '; } /** @@ -591,7 +596,7 @@ function template_button_strip($button_strip, $direction = '', $strip_options = $value['id'] = $key; $button = ' - '. (!empty($value['icon']) ? '' : '') . Lang::getTxt($value['text']) . ''; + '.(!empty($value['icon']) ? '' : '').'' . Lang::$txt[$value['text']] . ''; if (!empty($value['sub_buttons'])) { From bf32d85629517211a50c8100553694540631a9f3 Mon Sep 17 00:00:00 2001 From: John Rayes Date: Tue, 20 Feb 2024 04:30:18 -0700 Subject: [PATCH 025/115] print top_info once Signed-off-by: John Rayes --- Themes/default/index.template.php | 134 ++++++++++++++---------------- 1 file changed, 63 insertions(+), 71 deletions(-) diff --git a/Themes/default/index.template.php b/Themes/default/index.template.php index f182759dc7..9cefe06430 100644 --- a/Themes/default/index.template.php +++ b/Themes/default/index.template.php @@ -209,90 +209,90 @@ function template_body_above()
'; } // If the user can link to an off server avatar, show them a box to input the address. if (!empty(Utils::$context['member']['avatar']['allow_external'])) echo ' -
- ', Utils::$context['member']['avatar']['choice'] == 'external' ? '
' : '', ' -
', Lang::getTxt('avatar_by_url', file: 'Profile'), '
', !empty(Config::$modSettings['avatar_action_too_large']) && Config::$modSettings['avatar_action_too_large'] == 'option_download_and_resize' ? template_max_size('external') : '', ' -
-
'; +
+
', Lang::$txt['avatar_by_url'], '
', !empty(Config::$modSettings['avatar_action_too_large']) && Config::$modSettings['avatar_action_too_large'] == 'option_download_and_resize' ? template_max_size('external') : '', ' +
+
'; // If the user is able to upload avatars to the server show them an upload box. if (!empty(Utils::$context['member']['avatar']['allow_upload'])) echo ' -
- ', Utils::$context['member']['avatar']['choice'] == 'upload' ? '
' : '', ' - ', template_max_size('upload'), ' +
+ ', template_max_size('upload'), ' ', (!empty(Utils::$context['member']['avatar']['id_attach']) ? '
' : ''), ' -
'; +
'; // if the user is able to use Gravatar avatars show then the image preview if (!empty(Utils::$context['member']['avatar']['allow_gravatar'])) { echo ' -
- ', Utils::$context['member']['avatar']['choice'] == 'gravatar' ? '
' : ''; +
'; if (empty(Config::$modSettings['gravatarAllowExtraEmail'])) echo ' @@ -3034,59 +2868,15 @@ function template_profile_avatar_select() $textbox_value = Utils::$context['member']['avatar']['external']; echo ' -
', Lang::getTxt('gravatar_alternateEmail', file: 'Profile'), '
- '; +
', Lang::$txt['gravatar_alternateEmail'], '
+ '; } echo ' -
'; + '; } echo ' - + '; } @@ -3100,12 +2890,10 @@ function template_max_size($type) $w = !empty(Config::$modSettings['avatar_max_width_' . $type]) ? Lang::numberFormat(Config::$modSettings['avatar_max_width_' . $type]) : 0; $h = !empty(Config::$modSettings['avatar_max_height_' . $type]) ? Lang::numberFormat(Config::$modSettings['avatar_max_height_' . $type]) : 0; - $suffix = (!empty($w) ? 'w' : '') . (!empty($h) ? 'h' : ''); - if (empty($suffix)) - return; - - echo ' -
', Lang::getTxt('avatar_max_size_' . $suffix, ['w' => $w, 'h' => $h], file: 'Profile'), '
'; + $suffix = ($w != 0 ? 'w' : '') . ($h != 0 ? 'h' : ''); + if ($suffix != '') + echo ' +
', Lang::getTxt('avatar_max_size_' . $suffix, ['w' => $w, 'h' => $h]), '
'; } /** @@ -3420,7 +3208,7 @@ function template_export_profile_data() - +
'; } @@ -3488,8 +3276,6 @@ function template_export_profile_data() } echo ' - -
', Lang::getTxt('export_format', file: 'Profile'), '
@@ -3504,26 +3290,16 @@ function template_export_profile_data()
-
'; +
+ '; // At least one active or completed export exists. if (!empty($dltoken)) { echo ' - -
- - - -
'; - } - // No existing exports. - else - { - echo ' - '; + + + '; } echo ' diff --git a/Themes/default/Stats.template.php b/Themes/default/Stats.template.php index 125c68ab57..59d3f61738 100644 --- a/Themes/default/Stats.template.php +++ b/Themes/default/Stats.template.php @@ -25,13 +25,9 @@ function template_main()

', Utils::$context['page_title'], '

-
-
-

- ', Lang::getTxt('general_stats', file: 'Stats'), ' -

-
-
+
+
+
', Lang::getTxt('total_members', file: 'General'), '
', Utils::$context['show_member_list'] ? '' . Utils::$context['num_members'] . '' : Utils::$context['num_members'], '
', Lang::getTxt('total_posts', file: 'General'), '
@@ -54,7 +50,7 @@ function template_main() echo '
-
+
', Lang::getTxt('average_members', file: 'Stats'), '
', Utils::$context['average_members'], '
', Lang::getTxt('average_posts', file: 'Stats'), '
@@ -87,12 +83,13 @@ function template_main()
', Utils::$context['average_hits'], '
'; echo ' -
'; +
+
'; foreach (Utils::$context['stats_blocks'] as $name => $block) { echo ' -
+

', Lang::getTxt('top_' . $name, file: 'Stats'), ' @@ -122,12 +119,11 @@ function template_main() echo '

-
'; +
'; } echo '
-

', Lang::getTxt('forum_history', file: 'Stats'), ' diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 97863dbdf9..ce55e1bace 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -99,6 +99,15 @@ input:focus, select:focus, textarea:focus { border-width: var(--input-border-width_focus); text-shadow: var(--input-text-shadow_focus); } +select[size] { + height: unset; +} +select optgroup option { + margin-inline: 1em 0; +} +select option { + padding: .1em .3em; +} input:focus-visible, textarea:focus-visible { outline: var(--input-outline); outline-offset: var(--input-outline-offset); @@ -140,9 +149,6 @@ input[type="number"][size="6"] { } /* Buttons styling */ button, .button, a.button, input[type="button"] { - align-items: center; - display: inline-flex; - flex-direction: column; background: var(--button-bg); border-color: var(--button-border-color); border-radius: var(--button-border-radius); @@ -442,6 +448,19 @@ hr { all: unset; outline: revert; } +@media (min-width: 720px) { + .csscolumn { + display: grid; + grid: auto-flow / 50% 50%; + gap: 0.1em 1em; + } + .columnspan { + grid-column: span 2; + } +} +.csscolumn .title_bar { + margin-block: 0.25em 0; +} /* Default font sizes: small (8pt), normal (10pt), and large (14pt). */ .smalltext, tr.smalltext th { @@ -2975,291 +2994,6 @@ tr.windowbg td, tr.bg td, .table_grid tr td { background-color: var(--progressbar-inner-bg_yellow); } -/* Styles for the profile section. -------------------------------------------------- */ -/* The basic user info on the left */ -#profileview { - display: grid; - gap: var(--profilesummary-gap); - grid: var(--profilesummary-grid); - padding-block: var(--profilesummary-padding-block); - padding-inline: var(--profilesummary-padding-inline); -} -#basicinfo { - background: var(--basicinfo-bg); - border-color: var(--basicinfo-border-color); - border-radius: var(--basicinfo-border-radius); - border-style: var(--basicinfo-border-style); - border-width: var(--basicinfo-border-width); - box-shadow: var(--basicinfo-box-shadow); - display: flex; - flex-direction: column; - gap: var(--basicinfo-gap); - margin-block: var(--basicinfo-margin-block); - margin-inline: var(--basicinfo-margin-inline); - padding-block: var(--basicinfo-padding-block); - padding-inline: var(--basicinfo-padding-inline); - text-align: center; -} -#detailedinfo { - background: var(--detailedinfo-bg); - border-color: var(--detailedinfo-border-color); - border-radius: var(--detailedinfo-border-radius); - border-style: var(--detailedinfo-border-style); - border-width: var(--detailedinfo-border-width); - box-shadow: var(--detailedinfo-box-shadow); - display: flex; - flex-direction: column; - gap: var(--detailedinfo-gap); - margin-block: var(--detailedinfo-margin-block); - margin-inline: var(--detailedinfo-margin-inline); - padding-block: var(--detailedinfo-padding-block); - padding-inline: var(--detailedinfo-padding-inline); -} - -#basicinfo h4 { - font-size: 1.4em; - font-weight: normal; - hyphens: auto; - overflow-wrap: break-word; - word-wrap: break-word; /* IE fallback */ -} -#basicinfo h4 span.position { - display: block; - font-size: 0.8em; -} -#basicinfo ul { - list-style-type: none; -} -#basicinfo .icon_fields { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: 0.5em; - justify-content: center; - margin-bottom: 1em; -} -#basicinfo .icon_fields img { - display: block; -} -#basicinfo .icon_fields li { - margin: 0; - padding: 0; -} -#basicinfo img.avatar, dl.settings img.avatar { - display: block; - max-width: 160px; - height: auto !important; - margin-inline: auto; -} -#basicinfo #userstatus { - display: block; -} -#detailedinfo dl, #tracking dl { - clear: right; - overflow: auto; - margin: 0 0 18px 0; - padding: 0 0 15px 0; - border-bottom: var(--detailedinfo-border-color) solid 1px; -} -#detailedinfo dt, #tracking dt { - width: 35%; - margin: 0 0 3px 0; - font-weight: 700; -} -#detailedinfo dd, #tracking dd { - width: 65%; - float: left; - margin: 0 0 3px 0; -} -#detailedinfo dl.settings:last-of-type { - border-bottom: 0; -} -#detailedinfo dt.clear { - width: 100%; -} -#personal_picture { - display: block; - margin-bottom: 4px; -} -#avatar_server_stored div { - float: left; -} -#avatar_upload { - overflow: auto; -} -#smileypr { - margin-left: 10px; -} -.edit_avatar_img { - margin: 0 0 1em; -} - -/* Activity by time */ -#activitytime { - margin: 6px 0; -} -.activity_stats { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(2em, 1fr)); - justify-content: center; - margin: 10px 0; -} -.activity_stats li { - text-align: center; -} -.activity_stats li span { - background: var(--window-bg); - border-color: var(--window-border-color); - border-style: var(--window-border-style); - border-width: 1px 0; - display: block; - font-size: 0.8em; -} -.activity_stats li .generic_bar { - height: 100px; - margin-inline: auto; -} -.activity_stats li .generic_bar span { - position: absolute; - top: -1000em; - left: -1000em; -} -.profile_pie { - background: url(../images/stats_pie.png); - background-size: auto 20px; - float: left; - height: 20px; - width: 20px; - margin: 0 12px 0 0; - text-indent: -1000em; -} - -/* View posts */ -.topic .time { - float: right; -} -.counter { - padding: 5px 6px 1px 2px; - font-size: 1.5em; - font-weight: bold; - float: left; -} -.topic_details { - padding: 0 4px 4px 4px; -} -.counter + .topic_details { - margin-left: 25px; -} -.list_posts { - background: var(--post-inner-bg); - border-color: var(--post-inner-border-color); - border-radius: var(--post-inner-border-radius); - border-style: var(--post-inner-border-style); - border-width: var(--post-inner-border-width); - box-shadow: var(--post-inner-box-shadow); - clear: both; - hyphens: auto; - margin-block: var(--post-inner-margin-block); - margin-inline: var(--post-inner-margin-inline); - min-height: var(--post-inner-height); - overflow-wrap: break-word; - padding-block: var(--post-inner-padding-block); - padding-inline: var(--post-inner-padding-inline); - word-wrap: break-word; -} -.topic h4 { - margin: 3px 0; -} -.topic .post { - margin: 0 12px; - min-height: 80px; - height: auto !important; - height: 80px; -} -.topic .mod_icons { - text-align: right; - margin-right: 12px; -} - -#creator dt { - width: 40%; -} -#creator dd { - width: 55%; - margin: 0 0 10px 2px; -} -.centericon { - vertical-align: middle; -} -.sizefix { - width: 16px; - height: 16px; -} - -.boardslist > ul > li { - margin: 12px; -} -.boardslist > ul > li > ul { - columns: 2 250px; -} -.boardslist > ul > li > ul > li { - break-inside: avoid; - display: inline-block; - vertical-align: top; - width: 100%; -} -.boardslist a { - font-weight: bold; - border-bottom: var(--border_width) var(--border_style) var(--border_color); - display: block; - margin-bottom: 0.5em; -} -.boardslist a:hover { - text-decoration: none; - border-bottom: var(--border_width) var(--border_style) var(--border_color); -} -.boardslist label { - display: inline-block; - text-indent: -3ch; - margin: 0 3ch; -} - -#theme_settings { - overflow: auto; - margin: 0; - padding: 0; -} - -#theme_settings li { - margin: 10px 0; - padding: 0; -} -/* Paid Subscriptions */ -#paid_subscription { - width: 100%; -} -#paid_subscription dl.settings { - margin-bottom: 0; -} -#paid_subscription dl.settings dd, #paid_subscription dl.settings dt { - margin-bottom: 4px; -} -/* Pick theme */ -#pick_theme { - width: 100%; - float: left; -} -#pick_theme .selected { - background: var(--window-bg_hover); -} - -/* Signature preview */ -#preview_signature, #preview_signature_display { - width: 100%; - overflow: hidden; -} - /* Styles for the statistics center. ------------------------------------------------- */ #statistics .roundframe { diff --git a/Themes/default/css/profile.css b/Themes/default/css/profile.css new file mode 100644 index 0000000000..9aee227024 --- /dev/null +++ b/Themes/default/css/profile.css @@ -0,0 +1,286 @@ +/* Styles for the profile section. +------------------------------------------------- */ +/* The basic user info on the left */ +#profileview { + display: grid; + gap: var(--profilesummary-gap); + grid: var(--profilesummary-grid); + padding-block: var(--profilesummary-padding-block); + padding-inline: var(--profilesummary-padding-inline); +} +#basicinfo { + background: var(--basicinfo-bg); + border-color: var(--basicinfo-border-color); + border-radius: var(--basicinfo-border-radius); + border-style: var(--basicinfo-border-style); + border-width: var(--basicinfo-border-width); + box-shadow: var(--basicinfo-box-shadow); + display: flex; + flex-direction: column; + gap: var(--basicinfo-gap); + margin-block: var(--basicinfo-margin-block); + margin-inline: var(--basicinfo-margin-inline); + padding-block: var(--basicinfo-padding-block); + padding-inline: var(--basicinfo-padding-inline); + text-align: center; +} +#detailedinfo { + background: var(--detailedinfo-bg); + border-color: var(--detailedinfo-border-color); + border-radius: var(--detailedinfo-border-radius); + border-style: var(--detailedinfo-border-style); + border-width: var(--detailedinfo-border-width); + box-shadow: var(--detailedinfo-box-shadow); + display: flex; + flex-direction: column; + gap: var(--detailedinfo-gap); + margin-block: var(--detailedinfo-margin-block); + margin-inline: var(--detailedinfo-margin-inline); + padding-block: var(--detailedinfo-padding-block); + padding-inline: var(--detailedinfo-padding-inline); +} + +#basicinfo h4 { + font-size: 1.4em; + font-weight: normal; + hyphens: auto; + overflow-wrap: break-word; + word-wrap: break-word; /* IE fallback */ +} +#basicinfo h4 span.position { + display: block; + font-size: 0.8em; +} +#basicinfo ul { + list-style-type: none; +} +#basicinfo .icon_fields { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 0.5em; + justify-content: center; + margin-bottom: 1em; +} +#basicinfo .icon_fields img { + display: block; +} +#basicinfo .icon_fields li { + margin: 0; + padding: 0; +} +#basicinfo img.avatar, dl.settings img.avatar { + display: block; + max-width: 160px; + height: auto !important; + margin-inline: auto; +} +#basicinfo #userstatus { + display: block; +} +#detailedinfo dl, #tracking dl { + clear: right; + overflow: auto; + margin: 0 0 18px 0; + padding: 0 0 15px 0; + border-bottom: var(--detailedinfo-border-color) solid 1px; +} +#detailedinfo dt, #tracking dt { + width: 35%; + margin: 0 0 3px 0; + font-weight: 700; +} +#detailedinfo dd, #tracking dd { + width: 65%; + float: left; + margin: 0 0 3px 0; +} +#detailedinfo .noborder { + border-bottom: 0; +} +#detailedinfo dt.clear { + width: 100%; +} +#personal_picture { + display: block; + margin-bottom: 4px; +} +#avatar_upload { + overflow: auto; +} +#smileypr { + margin-inline: 1em 0; +} +#current_avatar { + margin-block: 1em 0; +} + +/* Activity by time */ +#statspanel { + display: flex; + flex-direction: column; + gap: 0.25em; +} +#statspanel > .title_bar { + margin-block: 0.25em 0; +} +.activity_stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(2em, 1fr)); + justify-content: center; + margin: 10px 0; +} +.activity_stats li { + text-align: center; +} +.activity_stats li span { + background: var(--window-bg); + border-color: var(--window-border-color); + border-style: var(--window-border-style); + border-width: 1px 0; + display: block; + font-size: 0.8em; +} +.activity_stats li .generic_bar { + height: 100px; + margin-inline: auto; +} +.activity_stats li .generic_bar span { + position: absolute; + top: -1000em; + left: -1000em; +} +.profile_pie { + background: url(../images/stats_pie.png); + background-size: auto 20px; + float: left; + height: 20px; + width: 20px; + margin: 0 12px 0 0; + text-indent: -1000em; +} + +/* View posts */ +.topic .time { + float: right; +} +.counter { + padding: 5px 6px 1px 2px; + font-size: 1.5em; + font-weight: bold; + float: left; +} +.topic_details { + padding: 0 4px 4px 4px; +} +.counter + .topic_details { + margin-left: 25px; +} +.list_posts { + background: var(--post-inner-bg); + border-color: var(--post-inner-border-color); + border-radius: var(--post-inner-border-radius); + border-style: var(--post-inner-border-style); + border-width: var(--post-inner-border-width); + box-shadow: var(--post-inner-box-shadow); + clear: both; + hyphens: auto; + margin-block: var(--post-inner-margin-block); + margin-inline: var(--post-inner-margin-inline); + min-height: var(--post-inner-height); + overflow-wrap: break-word; + padding-block: var(--post-inner-padding-block); + padding-inline: var(--post-inner-padding-inline); + word-wrap: break-word; +} +.topic h4 { + margin: 3px 0; +} +.topic .post { + margin: 0 12px; + min-height: 80px; + height: auto !important; + height: 80px; +} +.topic .mod_icons { + text-align: right; + margin-right: 12px; +} + +#creator dt { + width: 40%; +} +#creator dd { + width: 55%; + margin: 0 0 10px 2px; +} +.centericon { + vertical-align: middle; +} +.sizefix { + width: 16px; + height: 16px; +} + +.boardslist > ul > li { + margin: 12px; +} +.boardslist > ul > li > ul { + columns: 2 250px; +} +.boardslist > ul > li > ul > li { + break-inside: avoid; + display: inline-block; + vertical-align: top; + width: 100%; +} +.boardslist a { + font-weight: bold; + border-bottom: var(--border_width) var(--border_style) var(--border_color); + display: block; + margin-bottom: 0.5em; +} +.boardslist a:hover { + text-decoration: none; + border-bottom: var(--border_width) var(--border_style) var(--border_color); +} +.boardslist label { + display: inline-block; + text-indent: -3ch; + margin: 0 3ch; +} + +#theme_settings { + overflow: auto; + margin: 0; + padding: 0; +} + +#theme_settings li { + margin: 10px 0; + padding: 0; +} +/* Paid Subscriptions */ +#paid_subscription { + width: 100%; +} +#paid_subscription dl.settings { + margin-bottom: 0; +} +#paid_subscription dl.settings dd, #paid_subscription dl.settings dt { + margin-bottom: 4px; +} +/* Pick theme */ +#pick_theme { + width: 100%; + float: left; +} +#pick_theme .selected { + background: var(--window-bg_hover); +} + +/* Signature preview */ +#preview_signature, #preview_signature_display { + width: 100%; + overflow: hidden; +} \ No newline at end of file diff --git a/Themes/default/css/rtl.css b/Themes/default/css/rtl.css index 3608b5c12a..1f39f34f84 100644 --- a/Themes/default/css/rtl.css +++ b/Themes/default/css/rtl.css @@ -263,9 +263,6 @@ div#admin_menu { margin-right: 0; margin-left: 5px; } -#avatar_server_stored div { - float: right; -} #detailedinfo dt, #tracking dt { float: right; } diff --git a/Themes/default/scripts/profile.js b/Themes/default/scripts/profile.js index e72465db71..2164b57f9e 100644 --- a/Themes/default/scripts/profile.js +++ b/Themes/default/scripts/profile.js @@ -1,47 +1,72 @@ -var localTime = new Date(); -function autoDetectTimeOffset(currentTime) +// Determine browser's timezone and DST +function autoDetectTimeOffset() { - if (typeof(currentTime) != 'string') - var serverTime = currentTime; - else - var serverTime = new Date(currentTime); - - // Something wrong? - if (!localTime.getTime() || !serverTime.getTime()) - return 0; - - // Get the difference between the two, set it up so that the sign will tell us who is ahead of who. - var diff = Math.round((localTime.getTime() - serverTime.getTime())/3600000); - - // Make sure we are limiting this to one day's difference. - diff %= 24; + const getUtcDateFromTz = (date, timeZone) => { + const dateComponents = date.toLocaleString("sv", { timeZone }).split(/[-\s:]/); + + // Months are zero-based in JavaScript. + dateComponents[1]--; + + // Discard milliseconds by rounding. + return Math.round((date - Date.UTC(...dateComponents)) / 6e4); + }; + + const now = new Date; + const tz = Intl.DateTimeFormat().resolvedOptions().timeZone; + const getRegion = tz => tz.split('/')[0]; + const r = getRegion(tz); + const diff1 = getUtcDateFromTz(now, tz); + const offset = diff1; + + const jan = new Date(now.getFullYear(), 0, 1); + const jun = new Date(now.getFullYear(), 5, 1); + const dst = getUtcDateFromTz(jun, tz) - getUtcDateFromTz(jan, tz) != 0; + + const hr = Math.floor(Math.abs(diff1) / 60); + const min = diff1 % 60; + const pad = n => ('00' + n).slice(-2); + + const span = document.createElement('span'); + span.className = 'padding smalltext'; + span.textContent = tz + ' [UTC ' + (diff1 < 0 ? '+' : '-') + pad(hr) + ':' + pad(min) + ']'; + this.after(span); + + const div = document.createElement('div'); + div.className = 'padding smalltext'; + + for (const el of this.form.timezone.options) { + try { + const o = getUtcDateFromTz(now, el.value); + const d = getUtcDateFromTz(jun, el.value) - getUtcDateFromTz(jan, el.value) != 0; + + if (o == offset && d == dst && getRegion(el.value) == r) { + div.textContent = el.textContent; + el.selected = true; + } + } catch { + continue; + } + } - return diff; + span.after(div); } // Prevent Chrome from auto completing fields when viewing/editing other members profiles function disableAutoComplete() { - if (is_chrome && document.addEventListener) - document.addEventListener("DOMContentLoaded", disableAutoCompleteNow, false); -} - -// Once DOMContentLoaded is triggered, call the function -function disableAutoCompleteNow() -{ - for (var i = 0, n = document.forms.length; i < n; i++) - { - var die = document.forms[i].elements; - for (var j = 0, m = die.length; j < m; j++) - // Only bother with text/password fields? - if (die[j].type == "text" || die[j].type == "password") - die[j].setAttribute("autocomplete", "off"); - } + if (is_chrome) + for (const form of document.forms) { + for (const el of form.elements) { + // Only bother with text/password fields, + if (el.type == "text" || el.type == "password") + el.setAttribute("autocomplete", "off"); + } + } } function calcCharLeft() { - var oldSignature = "", currentSignature = document.forms.creator.signature.value; + var oldSignature = "", currentSignature = this.value; var currentChars = 0; if (!document.getElementById("signatureLeft")) @@ -162,156 +187,471 @@ function ajax_getSignaturePreview (showPreview) return false; } -function changeSel(selected) +function changeSel(f, opts) { - if (cat.selectedIndex == -1) + if (f.cat.selectedIndex == -1) return; - if (cat.options[cat.selectedIndex].value.indexOf("/") > 0) + if (opts[f.cat.options[f.cat.selectedIndex].value]) { + f.file.style.display = "inline"; + f.file.disabled = false; + + while (f.file.options.length) + f.file.remove(0); + + for (el of opts[f.cat.options[f.cat.selectedIndex].value]) { + el.selected = el.attributes.selected; + f.file.add(el); + } + + if (f.file.selectedIndex == -1) { + f.file.options[0].selected = true; + f.file.dispatchEvent(new Event('change')); + } + } + else { - var i; - var count = 0; + f.file.style.display = "none"; + f.file.disabled = true; + previewExternalAvatar(f.cat.dataset.avatardir + f.cat.options[f.cat.selectedIndex].value); + } +} - file.style.display = "inline"; - file.disabled = false; +function get_gravatar_image_url(email, size, default_image, allowed_rating, force_default) +{ + email = typeof email !== 'undefined' ? email : 'john.doe@example.com'; + size = (size >= 1 && size <= 2048) ? size : 80; + default_image = typeof default_image !== 'undefined' ? default_image : 'mm'; + allowed_rating = typeof allowed_rating !== 'undefined' ? allowed_rating : 'g'; + force_default = force_default === true ? 'y' : 'n'; - for (i = file.length; i >= 0; i = i - 1) - file.options[i] = null; + return "https://secure.gravatar.com/avatar/" + smf_md5(email.toLowerCase().trim()) + "?size=" + size + "&default=" + encodeURIComponent(default_image) + "&rating=" + allowed_rating + (force_default === 'y' ? "&forcedefault=" + force_default : ''); +} - for (i = 0; i < files.length; i++) - if (files[i].indexOf(cat.options[cat.selectedIndex].value) == 0) - { - var filename = files[i].substr(files[i].indexOf("/") + 1); - var showFilename = filename.substr(0, filename.lastIndexOf(".")); - showFilename = showFilename.replace(/[_]/g, " "); +function initAvatar(f) { + const debounce = (callback, wait) => { + let timeoutId = null; - file.options[count] = new Option(showFilename, files[i]); + return (...args) => { + window.clearTimeout(timeoutId); + timeoutId = window.setTimeout(() => { + callback(...args); + }, wait); + }; + }; - if (filename == selected) - { - if (file.options.defaultSelected) - file.options[count].defaultSelected = true; - else - file.options[count].selected = true; - } + const update = e => + { + for (const el of f) + if (el.name == "avatar_choice") { + const fieldset = f['avatar_' + el.value]; + + if (fieldset) + fieldset.hidden = !el.checked; + + if (el.checked && e) + switch (el.value) { + case 'none': + case 'upload': + previewExternalAvatar(f.file.dataset.avatardir + '/default.png'); + + break; + + case 'server_stored': + const sel = f.file || f.cat; + previewExternalAvatar(f.cat.dataset.avatardir + sel.options[sel.selectedIndex].value); + + break; + + case 'extenal': + previewExternalAvatar(f.userpicpersonal); - count++; + break; + + case 'gravatar': + previewExternalAvatar(get_gravatar_image_url(fieldset.dataset.email)); + + if (f.gravatarEmail) + previewExternalAvatar(get_gravatar_image_url(f.gravatarEmail)); + + break; + } } + }; + + for (const el of f) + if (el.name == "avatar_choice") + el.addEventListener("click", update); + + update(); + let opts = {}; + + if (f.cat) { + let toAdd = [], toRemove = []; + + const sel = document.createElement('select'); + sel.name = 'file'; + sel.size = 10; + sel.style.marginInline = '1em 0'; + f.cat.after(sel); + + for (let i = 0; i < f.cat.options.length; i++) { + const el = f.cat.options[i]; + const p = el.parentElement; + + if (p.label && p.dataset.dir) { + if (!opts[p.label]) { + toRemove.push(p); + const opt = new Option(p.label); + + for (const image of document.images) { + if (image.id == 'current_avatar' && image.src.includes(p.dataset.dir + '/')) { + opt.selected = true; + + break; + } + } + f.cat.add(opt); + opts[p.label] = [...p.children]; + } + } + } - if (file.selectedIndex == -1 && file.options[0]) - file.options[0].selected = true; + for (const el of toRemove) + el.remove(); - showAvatar(); - } - else - { - file.style.display = "none"; - file.disabled = true; - document.getElementById("avatar").src = avatardir + cat.options[cat.selectedIndex].value; - document.getElementById("avatar").style.width = ""; - document.getElementById("avatar").style.height = ""; + f.cat.addEventListener('change', changeSel.bind(null, f, opts)); + changeSel(f, opts); } -} -function showAvatar() -{ - if (file.selectedIndex == -1) - return; + if (f.file) + f.file.addEventListener('change', function() { + previewExternalAvatar(f.cat.dataset.avatardir + this.options[this.selectedIndex].value); + }); + + if (f.userpicpersonal) + f.userpicpersonal.addEventListener('input', function() { + previewExternalAvatar(smf_images_url + '/loading_sm.gif'); + debounce(() => { + previewExternalAvatar(this.value); + }, 500)(); + }); + + if (f.attachment) + f.attachment.addEventListener('change', function() { + if (this.files && this.files[0]) { + const reader = new FileReader; + + reader.onload = e => { + previewExternalAvatar(e.target.result); + } - document.getElementById("avatar").src = avatardir + file.options[file.selectedIndex].value; - document.getElementById("avatar").alt = file.options[file.selectedIndex].text; - document.getElementById("avatar").alt += file.options[file.selectedIndex].text == size ? "!" : ""; - document.getElementById("avatar").style.width = ""; - document.getElementById("avatar").style.height = ""; + reader.readAsDataURL(this.files[0]); + } + }); + + if (f.gravatarEmail) + f.gravatarEmail.addEventListener('input', function() { + previewExternalAvatar(smf_images_url + '/loading_sm.gif'); + debounce(() => { + previewExternalAvatar(get_gravatar_image_url(this.value)); + }, 500)(); + }); } function previewExternalAvatar(src) { - if ($('#external_avatar_img_new').length){ - $('#external_avatar_img_new').remove(); - } - - var newImage = $('', { - id: 'external_avatar_img_new', - src: src, - class: 'avatar', - }); + for (const image of document.images) + if (image.id == 'current_avatar') { + image.src = src; - newImage.appendTo($('#avatar_external')); + break; + } } -function readfromUpload(input) { - if (input.files && input.files[0]) { - var reader = new FileReader(); +window.addEventListener("DOMContentLoaded", function() { + disableAutoComplete(); + const f = document.forms.creator; - reader.onload = function (e) { + if (!f) + return; - // If there is an image already, hide it... - if ($('#attached_image').length){ - $('#attached_image').remove(); - } +console.log(f) + + let tmp = f['additional_groups[]']; + if (tmp) + makeToggle(tmp[0].parentNode); - if ($('#attached_image_new').length){ - $('#attached_image_new').remove(); + if (f.avatar_choice) + initAvatar(f); + + if (typeof require_password != 'undefined' && require_password) + f.addEventListener('submit', e => { + if (f.oldpasswrd.value == "") { + e.preventDefault(); + alert(required_security_reasons); } + }); - var tempImage = new Image(); - tempImage.src = e.target.result; + if (f.smiley_set) + f.smiley_set.addEventListener('change', function() { + this.nextElementSibling.src = this.options[this.selectedIndex].dataset.preview; + }); - var uploadedImage = $('', { - id: 'attached_image_new', - src: e.target.result, - class: 'avatar', - }); + if (f.signature) { + calcCharLeft.call(f.signature); + f.preview_button.addEventListener('click', ajax_getSignaturePreview.bind(null, true)); + f.signature.addEventListener('input', calcCharLeft); + } - uploadedImage.appendTo($('#avatar_upload')); - } + if (f.timezone) { + const button = document.createElement('button'); + button.type = 'button'; + button.className = 'button'; + button.textContent = autodetect; + f.timezone.after(document.createElement('hr'), button); + button.addEventListener('click', autoDetectTimeOffset); + } - reader.readAsDataURL(input.files[0]); + tmp = f.warn_notify; + if (tmp) { + f.warning_level.addEventListener('change', updateSlider); + f.warn_temp.addEventListener('change', populateNotifyTemplate); + f.preview.addEventListener('click', ajax_getTemplatePreview); + tmp.addEventListener('click', modifyWarnNotify); + modifyWarnNotify.call(tmp); + const a = document.createElement('a'); + a.className = 'button'; + a.textContent = f.warn_temp.dataset.text; + a.href = smf_scripturl + '?action=moderate;area=warnings;sa=templateedit;tid=0'; + f.warn_temp.after(' ', a, document.createElement('br')); + } + + if (f.export_format_select) { + const toggleExport = function() { + const flag = completed_formats.indexOf(this.value) > -1; + f.export_begin.hidden = flag; + f.export_begin.disabled = flag; + f.export_restart.hidden = !flag; + f.export_restart.disabled = !flag; + }; + toggleExport.call(f.export_format_select); + f.export_format_select.addEventListener('change', toggleExport); } -} -// The smiley set selector code -$(document).on('change', '#smiley_set', function () { - $("#smileypr").attr("src", $('#smiley_set option:selected').data('preview')); + const els = document.getElementsByClassName('export_download_all'); + + if (els) + for (const el of els) + el.addEventListener('click', export_download_all); }); -function changeVariant(iThemeId, el) +// Disable notification boxes as required. +function modifyWarnNotify() { - document.getElementById('theme_thumb_' + iThemeId).src = oThemeVariants[iThemeId][el.value]['thumbnail']; - document.getElementById('theme_thumb_preview_' + iThemeId).href = el.form.action + ';theme=' + iThemeId + ';variant=' + el.value; - document.getElementById('theme_preview_' + iThemeId).href = el.form.action + ';theme=' + iThemeId + ';variant=' + el.value; + const disable = !this.form.warn_notify.checked; + this.form.warn_sub.disabled = disable; + this.form.warn_body.disabled = disable; + this.form.warn_temp.disabled = disable; + this.form.preview.disabled = disable; } -$(document).on('change', '#export_format_select', function() { - var selected_format = $('#export_format_select').val(); - if (completed_formats.indexOf(selected_format) > -1) - { - $('#export_begin').hide(); - $('#export_begin input').prop('disabled', true); - $('#export_restart').show(); - $('#export_restart input').prop('disabled', false); - } else { - $('#export_begin').show(); - $('#export_begin input').prop('disabled', false); - $('#export_restart').hide(); - $('#export_restart input').prop('disabled', true); - } -}); +// Warn template. +function populateNotifyTemplate() { + const opt = this.options[this.selectedIndex]; -$(document).ready(function() { - $(".export_download_all").show(); -}); + if (opt.value == -1) + return; -function export_download_all(format) -{ - $('#' + format + '_export_files a').each(function(index, element) { - // Add an invisible iframe pointing to the file. - var iframe = $(''); - iframe[0].src = $(element).attr('href'); - $('body').append(iframe); - - // Give plenty of time for the download to complete, then clean up. - setTimeout(function() { iframe.remove(); }, 30000); + const el = this.nextElementSibling; + el.href = el.href.replacce('0', opt.value); + + for (const tpl of notification_templates) + if (opt.text == tpl.title) { + this.form.warn_body.value = tpl.body; + this.form.warn_body.focus; + break; + } +} + +function updateSlider() { + for (const l in level_effects) + if (this.value >= l) + this.form.cur_level.value = this.value + '% (' + level_effects[l] + ')'; +} + +function ajax_getTemplatePreview() { + $.ajax({ + type: "POST", + headers: { + "X-SMF-AJAX": 1 + }, + xhrFields: { + withCredentials: typeof allow_xhjr_credentials !== "undefined" ? allow_xhjr_credentials : false + }, + url: smf_scripturl + '?action=xmlhttp;sa=previews;xml', + data: {item: "warning_preview", title: $("#warn_sub").val(), body: $("#warn_body").val(), issuing: true}, + context: document.body, + success: function(request) { + $("#box_preview").css({display:""}); + $("#body_preview").html($(request).find('body').text()); + if ($(request).find("error").text() != '') + { + $("#profile_error").css({display:""}); + var errors_html = '
    '; + var errors = $(request).find('error').each(function() { + errors_html += '
  • ' + $(this).text() + '
    • '; + }); + errors_html += '
'; + + $("#profile_error").html(errors_html); + } + else + { + $("#profile_error").css({display:"none"}); + $("#error_list").html(''); + } + return false; + }, }); + return false; +} + +function changeVariant(iThemeId, el) +{ + document.getElementById('theme_thumb_' + iThemeId).src = oThemeVariants[iThemeId][el.value]['thumbnail']; + const href = el.form.action + ';theme=' + iThemeId + ';variant=' + el.value; + document.getElementById('theme_thumb_preview_' + iThemeId).href = href; + document.getElementById('theme_preview_' + iThemeId).href = href; +} + +function export_download_all() +{ + for (el of document.links) { + if (el.id == this.dataset.format + '_export_files') { + // Add an invisible iframe pointing to the file to automatically download it. + const iframe = document.createElement('iframe'); + iframe.style.display = 'collapse'; + iframe.src = el.href; + document.body.append(iframe); + + // Give plenty of time for the download to complete, then clean up. + setTimeout(() => { iframe.remove(); }, 30000); + } + } } + +function smf_md5(inputString) { + const hc = '0123456789abcdef'; + const rh = n => { + let j, s = ''; + for (j = 0; j <= 3; j++) s += hc.charAt((n >> (j * 8 + 4)) & 0x0F) + hc.charAt((n >> (j * 8)) & 0x0F); + return s; + } + const ad = (x, y) => { + let l = (x & 0xFFFF) + (y & 0xFFFF); + let m = (x >> 16) + (y >> 16) + (l >> 16); + return (m << 16) | (l & 0xFFFF); + } + const rl = (n, c) => (n << c) | (n >>> (32 - c)); + const cm = (q, a, b, x, s, t) => ad(rl(ad(ad(a, q), ad(x, t)), s), b); + const ff = (a, b, c, d, x, s, t) => cm((b & c) | ((~b) & d), a, b, x, s, t); + const gg = (a, b, c, d, x, s, t) => cm((b & d) | (c & (~d)), a, b, x, s, t); + const hh = (a, b, c, d, x, s, t) => cm(b ^ c ^ d, a, b, x, s, t); + const ii = (a, b, c, d, x, s, t) => cm(c ^ (b | (~d)), a, b, x, s, t); + const sb = x => { + let i; + const nblk = ((x.length + 8) >> 6) + 1; + const blks = []; + for (i = 0; i < nblk * 16; i++) { + blks[i] = 0 + }; + for (i = 0; i < x.length; i++) { + blks[i >> 2] |= x.charCodeAt(i) << ((i % 4) * 8); + } + blks[i >> 2] |= 0x80 << ((i % 4) * 8); + blks[nblk * 16 - 2] = x.length * 8; + return blks; + } + let i, x = sb(inputString), + a = 1732584193, + b = -271733879, + c = -1732584194, + d = 271733878, + olda, oldb, oldc, oldd; + for (i = 0; i < x.length; i += 16) { + olda = a; + oldb = b; + oldc = c; + oldd = d; + a = ff(a, b, c, d, x[i + 0], 7, -680876936); + d = ff(d, a, b, c, x[i + 1], 12, -389564586); + c = ff(c, d, a, b, x[i + 2], 17, 606105819); + b = ff(b, c, d, a, x[i + 3], 22, -1044525330); + a = ff(a, b, c, d, x[i + 4], 7, -176418897); + d = ff(d, a, b, c, x[i + 5], 12, 1200080426); + c = ff(c, d, a, b, x[i + 6], 17, -1473231341); + b = ff(b, c, d, a, x[i + 7], 22, -45705983); + a = ff(a, b, c, d, x[i + 8], 7, 1770035416); + d = ff(d, a, b, c, x[i + 9], 12, -1958414417); + c = ff(c, d, a, b, x[i + 10], 17, -42063); + b = ff(b, c, d, a, x[i + 11], 22, -1990404162); + a = ff(a, b, c, d, x[i + 12], 7, 1804603682); + d = ff(d, a, b, c, x[i + 13], 12, -40341101); + c = ff(c, d, a, b, x[i + 14], 17, -1502002290); + b = ff(b, c, d, a, x[i + 15], 22, 1236535329); + a = gg(a, b, c, d, x[i + 1], 5, -165796510); + d = gg(d, a, b, c, x[i + 6], 9, -1069501632); + c = gg(c, d, a, b, x[i + 11], 14, 643717713); + b = gg(b, c, d, a, x[i + 0], 20, -373897302); + a = gg(a, b, c, d, x[i + 5], 5, -701558691); + d = gg(d, a, b, c, x[i + 10], 9, 38016083); + c = gg(c, d, a, b, x[i + 15], 14, -660478335); + b = gg(b, c, d, a, x[i + 4], 20, -405537848); + a = gg(a, b, c, d, x[i + 9], 5, 568446438); + d = gg(d, a, b, c, x[i + 14], 9, -1019803690); + c = gg(c, d, a, b, x[i + 3], 14, -187363961); + b = gg(b, c, d, a, x[i + 8], 20, 1163531501); + a = gg(a, b, c, d, x[i + 13], 5, -1444681467); + d = gg(d, a, b, c, x[i + 2], 9, -51403784); + c = gg(c, d, a, b, x[i + 7], 14, 1735328473); + b = gg(b, c, d, a, x[i + 12], 20, -1926607734); + a = hh(a, b, c, d, x[i + 5], 4, -378558); + d = hh(d, a, b, c, x[i + 8], 11, -2022574463); + c = hh(c, d, a, b, x[i + 11], 16, 1839030562); + b = hh(b, c, d, a, x[i + 14], 23, -35309556); + a = hh(a, b, c, d, x[i + 1], 4, -1530992060); + d = hh(d, a, b, c, x[i + 4], 11, 1272893353); + c = hh(c, d, a, b, x[i + 7], 16, -155497632); + b = hh(b, c, d, a, x[i + 10], 23, -1094730640); + a = hh(a, b, c, d, x[i + 13], 4, 681279174); + d = hh(d, a, b, c, x[i + 0], 11, -358537222); + c = hh(c, d, a, b, x[i + 3], 16, -722521979); + b = hh(b, c, d, a, x[i + 6], 23, 76029189); + a = hh(a, b, c, d, x[i + 9], 4, -640364487); + d = hh(d, a, b, c, x[i + 12], 11, -421815835); + c = hh(c, d, a, b, x[i + 15], 16, 530742520); + b = hh(b, c, d, a, x[i + 2], 23, -995338651); + a = ii(a, b, c, d, x[i + 0], 6, -198630844); + d = ii(d, a, b, c, x[i + 7], 10, 1126891415); + c = ii(c, d, a, b, x[i + 14], 15, -1416354905); + b = ii(b, c, d, a, x[i + 5], 21, -57434055); + a = ii(a, b, c, d, x[i + 12], 6, 1700485571); + d = ii(d, a, b, c, x[i + 3], 10, -1894986606); + c = ii(c, d, a, b, x[i + 10], 15, -1051523); + b = ii(b, c, d, a, x[i + 1], 21, -2054922799); + a = ii(a, b, c, d, x[i + 8], 6, 1873313359); + d = ii(d, a, b, c, x[i + 15], 10, -30611744); + c = ii(c, d, a, b, x[i + 6], 15, -1560198380); + b = ii(b, c, d, a, x[i + 13], 21, 1309151649); + a = ii(a, b, c, d, x[i + 4], 6, -145523070); + d = ii(d, a, b, c, x[i + 11], 10, -1120210379); + c = ii(c, d, a, b, x[i + 2], 15, 718787259); + b = ii(b, c, d, a, x[i + 9], 21, -343485551); + a = ad(a, olda); + b = ad(b, oldb); + c = ad(c, oldc); + d = ad(d, oldd); + } + return rh(a) + rh(b) + rh(c) + rh(d); +} \ No newline at end of file diff --git a/Themes/default/scripts/script.js b/Themes/default/scripts/script.js index 5617ff901c..151b5a71f3 100644 --- a/Themes/default/scripts/script.js +++ b/Themes/default/scripts/script.js @@ -1587,16 +1587,62 @@ function makeToggle(el, text) { var t = document.createElement("a"); t.href = 'javascript:void(0);'; - t.textContent = text; + t.textContent = text || el.dataset.text; t.className = 'toggle_down'; t.addEventListener('click', function() { - var d = this.nextSibling; - d.classList.toggle('hidden'); - this.className = this.className == 'toggle_down' ? 'toggle_up' : 'toggle_down'; - }, false); - el.classList.add('hidden'); - el.parentNode.insertBefore(t, el); + el.hidden = !el.hidden; + this.className = el.hidden ? 'toggle_down' : 'toggle_up'; + }); + el.hidden = true; + el.before(t, ' '); +} + +function makeChecks(f) +{ + // Set state dependinng on the status of the checkboxes. + const update = (els, b) => + { + let checkedCount = 0; + for (const el of els) + if (el.checked) + checkedCount++; + + b.checked = checkedCount == els.length; + b.indeterminate = checkedCount > 0 && checkedCount != els.length; + }; + + for (const div of f) + if (div.nodeName == "FIELDSET") + { + const aEls = [...div.elements]; + if (!aEls.every(o => o.nodeName == "INPUT" && o.type == "checkbox")) + continue; + + // Add master checkbox to the legend. + var + a = document.createElement("legend"), + b = document.createElement("input"), + c = document.createElement("label"); + b.type = "checkbox"; + c.append(b, div.dataset.c || div.firstElementChild.textContent); + a.appendChild(c); + update(div.elements, b); + + // Prepend it to the fieldset if there is no legend. + if (div.firstElementChild.tagName == 'LEGEND') + div.firstElementChild.replaceWith(a); + else + div.prepend(a); + + aEls.forEach(el => el.addEventListener("click", update.bind(null, div.elements, b))); + b.addEventListener("click", function(els) + { + for (const o of els) + if (o.nodeName == "INPUT" && o.type == "checkbox") + o.checked = this.checked; + }.bind(b, div.elements)); + } } function smc_resize(selector) From 5251b525aea98dce83a9d8de248489a7aeb6c87b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Andr=C3=A9s?= Date: Thu, 29 Feb 2024 01:19:01 -0600 Subject: [PATCH 051/115] popup_container and generic menus MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Diego Andrés --- Themes/default/GenericMenu.template.php | 68 ++++++------ Themes/default/css/index.css | 138 ++++++++++++------------ Themes/default/css/responsive.css | 138 ++++++++++++------------ Themes/default/css/rtl.css | 6 -- Themes/default/css/variables.css | 66 ++++++++---- 5 files changed, 214 insertions(+), 202 deletions(-) diff --git a/Themes/default/GenericMenu.template.php b/Themes/default/GenericMenu.template.php index 69abf868c5..31fc7ddd1e 100644 --- a/Themes/default/GenericMenu.template.php +++ b/Themes/default/GenericMenu.template.php @@ -28,7 +28,7 @@ function template_generic_menu_dropdown_above() // Load the menu // Add mobile menu as well echo ' -

-
+ '; } diff --git a/Themes/default/Recent.template.php b/Themes/default/Recent.template.php index 8e79f76925..33fd5ba317 100644 --- a/Themes/default/Recent.template.php +++ b/Themes/default/Recent.template.php @@ -415,4 +415,4 @@ function template_replies() template_topic_legend(); } -?> +?> \ No newline at end of file diff --git a/Themes/default/Themes.template.php b/Themes/default/Themes.template.php index b7f47e87aa..d41a3eac24 100644 --- a/Themes/default/Themes.template.php +++ b/Themes/default/Themes.template.php @@ -690,65 +690,68 @@ function template_set_settings() function template_pick() { echo ' -
'; - // Just go through each theme and show its information - thumbnail, etc. - foreach (Utils::$context['available_themes'] as $theme) + for ($i = 0; $i < 2; $i++) { echo ' -
-

+
+

', Lang::$txt[$i == 0 ? 'current_theme' : 'theme_pick'], '

+
+
'; + + // Just go through each theme and show its information - thumbnail, etc. + foreach (Utils::$context['available_themes'] as $theme) + { + if (($theme['selected'] && $i == 0) || (!$theme['selected'] && $i == 1)) + { + echo ' +
+

', $theme['name'], '

-
-
-
- - - -
-

', $theme['description'], '

'; - - if (!empty($theme['variants'])) - { - echo ' - : - '; - echo ' - '; - } + foreach ($theme['variants'] as $key => $variant) + echo ' + '; - echo ' -
-

- ', Lang::getTxt('theme_num_users', [$theme['num_users']], file: 'Themes'), ' -

-
- + echo ' + + '; + } + + echo ' + +
+ '; + } } echo ' - - - - -
'; +
+ + + '; + } + + echo ' + '; } /** diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index aa7df0afb9..1f62757ea7 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -530,6 +530,23 @@ blockquote { blockquote blockquote { font-size: 1em; } +blockquote.expand { + position: relative; + overflow: clip; + height: var(--height); +} +blockquote a.expand { + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 75px; + display: flex; + justify-content: center; + align-items: end; + background: linear-gradient(to bottom,rgba(249,249,249,0) 0%,#F9F9F9 80%); + padding: 5px; +} blockquote cite { background: var(--quote-cite-bg); border-color: var(--quote-cite-border-color); @@ -1459,6 +1476,7 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi padding-block: var(--genericmenu-padding-block); padding-inline: var(--genericmenu-padding-inline); } + /* Styles for the standard dropdown menus. ------------------------------------------------------- */ /* Dropmenu Level 1. */ @@ -5154,3 +5172,31 @@ input:checked + .slider:before { font-weight: 700; font-family: "Font Awesome 6 Free"; } +/* Fade-in animation */ +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/* Fade-out animation */ +@keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +/* Apply fade-in and fade-out animations */ +.fade-in { + animation: fadeIn 0.3s ease forwards; +} + +.fade-out { + animation: fadeOut 0.3s ease forwards; +} diff --git a/Themes/default/css/profile.css b/Themes/default/css/profile.css index 9aee227024..abe7ce1c9d 100644 --- a/Themes/default/css/profile.css +++ b/Themes/default/css/profile.css @@ -271,12 +271,18 @@ margin-bottom: 4px; } /* Pick theme */ -#pick_theme { - width: 100%; - float: left; +#pick_theme .windowbg { + display: grid; + grid: auto / 1fr auto; + gap: .5em; +} +#pick_theme .windowbg > :nth-child(3n+2) { + display: flex; + flex-flow: column; + gap: .5em; } -#pick_theme .selected { - background: var(--window-bg_hover); +#pick_theme .windowbg > :nth-child(3n+1) { + grid-column: 1 / 3; } /* Signature preview */ diff --git a/Themes/default/css/rtl.css b/Themes/default/css/rtl.css index b6af35bfd7..6bea9a4f11 100644 --- a/Themes/default/css/rtl.css +++ b/Themes/default/css/rtl.css @@ -332,9 +332,6 @@ h3.profile_hd { float: right; } -#pick_theme { - float: right; -} .infolinks { min-width: 95%; float: right; diff --git a/Themes/default/scripts/login.js b/Themes/default/scripts/login.js index a7f06bb5fa..398e445ebd 100644 --- a/Themes/default/scripts/login.js +++ b/Themes/default/scripts/login.js @@ -1,30 +1,34 @@ -function smf_Login(oOptions) { - this.opt = oOptions; -} +class SMF_Login { + constructor(oOptions) { + this.opt = oOptions; + } -smf_Login.prototype.login = function() { - const - opt = this.opt, - form = opt.oForm, - isSameCors = opt.sCors == '' || opt.sCors == 'same', - url = new URL(form.action); + login() { + const opt = this.opt; + const form = opt.oForm; + const isSameCors = opt.sCors == '' || opt.sCors == 'same'; + const url = new URL(form.action); + url.searchParams.set('ajax', '1'); - url.searchParams.set('ajax', '1'); + form.addEventListener("submit", function (e) { + e.preventDefault(); - form.addEventListener("submit", e => { - e.preventDefault(); - - $.ajax({ - url: url.toString(), - method: "POST", - headers: { - "X-SMF-AJAX": 1 - }, - xhrFields: { - withCredentials: typeof allow_xhjr_credentials !== "undefined" ? allow_xhjr_credentials : false - }, - data: new URLSearchParams(new FormData(form)).toString(), - success: function(data) { + fetch(url.toString(), { + method: "POST", + headers: { + "Content-Type": "application/x-www-form-urlencoded", + "X-SMF-AJAX": 1 + }, + credentials: typeof allow_xhjr_credentials !== "undefined" ? "include" : "same-origin", + body: new URLSearchParams(new FormData(form)).toString() + }) + .then(response => { + if (!response.ok) { + throw new Error("Network response was not ok."); + } + return response.text(); + }) + .then(data => { /* * While a nice action is to replace the document body after a login, * this may fail on CORS requests because the action may not be @@ -38,22 +42,15 @@ smf_Login.prototype.login = function() { document.write(data); document.close(); } else { - $(form).parent().html($(data).find(".windowbg form_grid").html()); + form.parentNode.innerHTML = data; } } else { window.location.reload(); } - }, - error: function(xhr) { - var data = xhr.responseText; - if (data.indexOf(" -1) { - document.open(); - document.write(data); - document.close(); - } - else - $(form).parent().html($(data).filter("#fatal_error").html()); - } + }) + .catch(error => { + console.error("Error:", error); + }); }); - }); + } } \ No newline at end of file diff --git a/Themes/default/scripts/profile.js b/Themes/default/scripts/profile.js index 2164b57f9e..c53ad276fc 100644 --- a/Themes/default/scripts/profile.js +++ b/Themes/default/scripts/profile.js @@ -64,127 +64,121 @@ function disableAutoComplete() } } -function calcCharLeft() -{ - var oldSignature = "", currentSignature = this.value; - var currentChars = 0; +function calcCharLeft() { + let oldSignature = ""; + const currentSignature = this.value; + let currentChars = 0; - if (!document.getElementById("signatureLeft")) + const el = document.getElementById("signatureLeft" ); + if (!el) { return; + } - if (oldSignature != currentSignature) - { + if (oldSignature !== currentSignature) { oldSignature = currentSignature; - var currentChars = currentSignature.replace(/\r/, "").length; - if (is_opera) + currentChars = currentSignature.replace(/\r/, "").length; + if (is_opera) { currentChars = currentSignature.replace(/\r/g, "").length; + } - if (currentChars > maxLength) - document.getElementById("signatureLeft").className = "error"; - else - document.getElementById("signatureLeft").className = ""; + if (currentChars > maxLength) { + el.className = "error"; + } else { + el.className = ""; + } - if (currentChars > maxLength) + if (currentChars > maxLength) { ajax_getSignaturePreview(false); - // Only hide it if the only errors were signature errors... - else if (currentChars <= maxLength) - { - // Are there any errors to begin with? - if ($(document).has("#list_errors")) - { - // Remove any signature errors - $("#list_errors").remove(".sig_error"); - - // Don't hide this if other errors remain - if (!$("#list_errors").has("li")) - { - $("#profile_error").css({display:"none"}); - $("#profile_error").html(''); + } else if (currentChars <= maxLength) { + if (document.contains(document.getElementById("list_errors"))) { + const listErrors = document.getElementById("list_errors"); + listErrors.querySelectorAll(".sig_error").forEach(error => error.remove()); + if (!listErrors.querySelector("li")) { + document.getElementById("profile_error").style.display = "none"; + document.getElementById("profile_error").innerHTML = ''; } } } } - setInnerHTML(document.getElementById("signatureLeft"), maxLength - currentChars); + el.innerHTML = maxLength - currentChars; } -function ajax_getSignaturePreview (showPreview) -{ - showPreview = (typeof showPreview == 'undefined') ? false : showPreview; - +function ajax_getSignaturePreview(showPreview = false) { // Is the error box already visible? - var errorbox_visible = $("#profile_error").is(":visible"); - - $.ajax({ - type: "POST", - url: smf_scripturl + "?action=xmlhttp;sa=previews;xml", - headers: { - "X-SMF-AJAX": 1 - }, - xhrFields: { - withCredentials: typeof allow_xhjr_credentials !== "undefined" ? allow_xhjr_credentials : false - }, - data: {item: "sig_preview", signature: $("#signature").val(), user: $('input[name="u"]').attr("value")}, - context: document.body, - success: function(request){ - if (showPreview) - { - var signatures = new Array("current", "preview"); - for (var i = 0; i < signatures.length; i++) - { - $("#" + signatures[i] + "_signature").css({display:""}); - $("#" + signatures[i] + "_signature_display").css({display:""}).html($(request).find('[type="' + signatures[i] + '"]').text() + '
'); + const errorBox = document.getElementById("profile_error"); + const errorbox_visible = errorBox.style.display !== "none"; + + const signature = encodeURIComponent(this.form.signature.value); + const user = this.form.u.value; + const allowCredentials = typeof allow_xhjr_credentials !== "undefined" ? allow_xhjr_credentials : false; + + fetch(smf_scripturl + "?action=xmlhttp;sa=previews;xml", { + method: "POST", + headers: { + "Content-Type": "application/x-www-form-urlencoded", + "X-SMF-AJAX": 1 + }, + body: "item=sig_preview&signature=" + signature + "&user=" + user, + credentials: allowCredentials ? "include" : "same-origin" + }) + .then(response => { + if (!response.ok) { + throw new Error("Network response was not ok."); + } + return response.text(); + }) + .then(responseData => { + const parser = new DOMParser(); + const xmlDoc = parser.parseFromString(responseData, "application/xml"); + + if (showPreview) { + const signatures = ["current", "preview"]; + for (const sig of signatures) { + const sigElement = document.getElementById(sig + "_signature"); + const sigDisplayElement = document.getElementById(sig + "_signature_display"); + sigElement.style.display = ""; + sigDisplayElement.style.display = ""; + sigDisplayElement.innerHTML = xmlDoc.querySelector('[type="' + sig + '"]').textContent + '
'; } } - if ($(request).find("error").text() != '') - { - // If the box isn't already visible... - // 1. Add the initial HTML - // 2. Make it visible - if (!errorbox_visible) - { - // Build our HTML... - var errors_html = '' + $(request).find('[type="errors_occurred"]').text() + '
    '; - - // Add it to the box... - $("#profile_error").html(errors_html); - - // Make it visible - $("#profile_error").css({display: ""}); - } - else - { - // Remove any existing signature-related errors... - $("#list_errors").remove(".sig_error"); + const errorNodes = xmlDoc.querySelectorAll("error"); + const errorsOccurred = xmlDoc.querySelector('[type="errors_occurred"]').textContent; + + if (errorNodes.length > 0) { + if (!errorbox_visible) { + const errorsHtml = "" + errorsOccurred + "
      "; + errorBox.innerHTML = errorsHtml; + errorBox.style.display = ""; + } else { + const existingErrors = errorBox.querySelectorAll(".sig_error"); + for (const error of existingErrors) { + error.remove(); + } } - var errors = $(request).find('[type="error"]'); - var errors_list = ''; - - for (var i = 0; i < errors.length; i++) - errors_list += '
    • ' + $(errors).text() + '
      • '; - - $("#list_errors").html(errors_list); - } - // If there were more errors besides signature-related ones, don't hide it - else - { - // Remove any signature errors first... - $("#list_errors").remove(".sig_error"); - - // If it still has content, there are other non-signature errors... - if (!$("#list_errors").has("li")) - { - $("#profile_error").css({display:"none"}); - $("#profile_error").html(''); + let errorsList = ''; + for (const errorNode of errorNodes) { + errorsList += "
    • " + errorNode.textContent + "
      • "; + } + document.getElementById("list_errors").innerHTML = errorsList; + } else { + const listErrors = document.getElementById("list_errors"); + const sigErrors = listErrors.querySelectorAll(".sig_error"); + for (const error of sigErrors) { + error.remove(); + } + if (!listErrors.querySelector("li")) { + errorBox.style.display = "none"; + errorBox.innerHTML = ''; } } - return false; - }, - }); - return false; + }) + .catch(error => { + console.error("Error:", error); + }); } function changeSel(f, opts) @@ -376,8 +370,6 @@ window.addEventListener("DOMContentLoaded", function() { if (!f) return; -console.log(f) - let tmp = f['additional_groups[]']; if (tmp) makeToggle(tmp[0].parentNode); @@ -427,6 +419,14 @@ console.log(f) f.warn_temp.after(' ', a, document.createElement('br')); } + if (f.id = 'pick_theme') { + for (const el of f) { + if (el.dataset.themeId) { + el.addEventListener('change', changeVariant); + } + } + } + if (f.export_format_select) { const toggleExport = function() { const flag = completed_formats.indexOf(this.value) > -1; @@ -464,8 +464,6 @@ function populateNotifyTemplate() { return; const el = this.nextElementSibling; - el.href = el.href.replacce('0', opt.value); - for (const tpl of notification_templates) if (opt.text == tpl.title) { this.form.warn_body.value = tpl.body; @@ -481,48 +479,71 @@ function updateSlider() { } function ajax_getTemplatePreview() { - $.ajax({ - type: "POST", + const allowCredentials = typeof allow_xhjr_credentials !== "undefined" ? allow_xhjr_credentials : false; + const title = encodeURIComponent(this.form.warn_sub.value); + const body = encodeURIComponent(this.form.warn_body.value); + const data = "item=warning_preview&title=" + title + "&body=" + body + "&issuing=true"; + + fetch(smf_scripturl + '?action=xmlhttp;sa=previews;xml', { + method: "POST", headers: { - "X-SMF-AJAX": 1 - }, - xhrFields: { - withCredentials: typeof allow_xhjr_credentials !== "undefined" ? allow_xhjr_credentials : false - }, - url: smf_scripturl + '?action=xmlhttp;sa=previews;xml', - data: {item: "warning_preview", title: $("#warn_sub").val(), body: $("#warn_body").val(), issuing: true}, - context: document.body, - success: function(request) { - $("#box_preview").css({display:""}); - $("#body_preview").html($(request).find('body').text()); - if ($(request).find("error").text() != '') - { - $("#profile_error").css({display:""}); - var errors_html = '
        '; - var errors = $(request).find('error').each(function() { - errors_html += '
      • ' + $(this).text() + '
        • '; - }); - errors_html += '
      '; - - $("#profile_error").html(errors_html); - } - else - { - $("#profile_error").css({display:"none"}); - $("#error_list").html(''); - } - return false; + "Content-Type": "application/x-www-form-urlencoded", + "X-SMF-AJAX": "1" }, + body: data, + credentials: allowCredentials ? "include" : "same-origin" + }) + .then(response => { + if (!response.ok) { + throw new Error("Network response was not ok."); + } + return response.text(); + }) + .then(responseData => { + const parser = new DOMParser(); + const xmlDoc = parser.parseFromString(responseData, "application/xml"); + const boxPreview = document.getElementById("box_preview"); + const bodyPreview = document.getElementById("body_preview"); + const profileError = document.getElementById("profile_error"); + const errorNodes = xmlDoc.querySelectorAll("error"); + + boxPreview.style.display = ""; + bodyPreview.innerHTML = xmlDoc.querySelector('body').textContent; + + if (errorNodes.length > 0) { + profileError.style.display = ""; + let errorsHtml = '
        '; + errorNodes.forEach(errorNode => { + errorsHtml += '
      • ' + errorNode.textContent + '
        • '; + }); + errorsHtml += '
      '; + profileError.innerHTML = errorsHtml; + } else { + profileError.style.display = "none"; + profileError.innerHTML = ''; + } + }) + .catch(error => { + console.error("Error:", error); }); - return false; } -function changeVariant(iThemeId, el) +function changeVariant() { - document.getElementById('theme_thumb_' + iThemeId).src = oThemeVariants[iThemeId][el.value]['thumbnail']; - const href = el.form.action + ';theme=' + iThemeId + ';variant=' + el.value; - document.getElementById('theme_thumb_preview_' + iThemeId).href = href; - document.getElementById('theme_preview_' + iThemeId).href = href; + const id = this.dataset.themeId; + for (const image of document.images) + if (image.id == 'theme_thumb_' + id) { + image.src = this.options[this.selectedIndex].dataset.url; + + break; + } + + for (const link of document.links) + if (link.id == 'theme_thumb_preview_' + id || link.id == 'theme_preview_' + id) { + link.href = this.form.action + ';theme=' + id + ';variant=' + this.value; + + break; + } } function export_download_all() diff --git a/Themes/default/scripts/quotedText.js b/Themes/default/scripts/quotedText.js index 525f736871..2417f3ccfd 100644 --- a/Themes/default/scripts/quotedText.js +++ b/Themes/default/scripts/quotedText.js @@ -1,37 +1,28 @@ -// Traverse the DOM tree in our spinoff of jQuery's closest() -function getClosest(el, divID) -{ +function getClosest(el, divID) { if (typeof divID == 'undefined' || divID == false) return null; - do - { - // End the loop if quick edit is detected. + do { if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT' || el.id === 'error_box') break; - if (el.id === divID) - { + if (el.id === divID) { return el; } - } - while (el = el.parentNode); + } while (el = el.parentNode); - // not found :( return null; } function getSelectedText(node) { - var selection = window.getSelection(); - // Need to be sure the selected text includes the right div. - for (var i = 0; i < selection.rangeCount; i++) { + const selection = window.getSelection(); + for (let i = 0; i < selection.rangeCount; i++) { const range = selection.getRangeAt(i); if (range.intersectsNode(node)) { - const - frag = range.cloneContents(), - s = getClosest(range.startContainer, node.id), - e = getClosest(range.endContainer, node.id); + const frag = range.cloneContents(); + const s = getClosest(range.startContainer, node.id); + const e = getClosest(range.endContainer, node.id); if (s && e) { const container = document.createElement("div"); @@ -45,114 +36,62 @@ function getSelectedText(node) { } } -function quotedTextClick(oOptions) -{ - text = ''; - - // The process has been started, hide the button. - $('#quoteSelected_' + oOptions.msgID).hide(); - - // Do a call to make sure this is a valid message. - $.ajax({ - url: smf_prepareScriptUrl(smf_scripturl) + 'action=quotefast;quote=' + oOptions.msgID + ';xml;pb='+ oEditorID + ';mode=' + (oEditorObject?.bRichTextEnabled ? 1 : 0), - type: 'GET', - headers: { - "X-SMF-AJAX": 1 - }, - xhrFields: { - withCredentials: typeof allow_xhjr_credentials !== "undefined" ? allow_xhjr_credentials : false - }, - dataType: 'xml', - beforeSend: function () { - ajax_indicator(true); - }, - complete: function(jqXHR, textStatus){ - ajax_indicator(false); - }, - success: function (data, textStatus, xhr) { - // Convert all smileys from images back to smiley code - oOptions.text = oOptions.text.replaceAll(/(.*?)/, '$1'); - - // Search the xml data to get the quote tag. - text = $(data).find('quote').text(); - - // Insert the selected text between the quotes BBC tags. - text = text.match(/^\[quote(.*)]/ig) + oOptions.text + '[/quote]' + '\n\n'; - - // Get the editor stuff. - var e = $('#' + oEditorID).get(0); - var oEditor = sceditor.instance(e); - - // Convert any HTML into BBC tags. - text = oEditor.toBBCode(text); - - // Push the text to the editor. - oEditor.insert(text); - - // Move the view to the quick reply box. If available. - if (typeof oJumpAnchor != 'undefined'){ - if (navigator.appName == 'Microsoft Internet Explorer') - window.location.hash = oJumpAnchor; - else - window.location.hash = '#' + oJumpAnchor; - } - }, - error: function (xhr, textStatus, errorThrown) { - // @todo Show some error. - } - }); +let selectedText; + +function quotedTextClick(msgID, e) { + e.preventDefault(); + + ajax_indicator(true); + selectedText = selectedText.replaceAll(/(.*?)/, '$1'); + + fetch(smf_prepareScriptUrl(smf_scripturl) + 'action=quotefast;quote=' + msgID + ';xml', { + method: 'GET', + headers: { + "X-SMF-AJAX": 1 + }, + credentials: typeof allow_xhjr_credentials !== "undefined" ? 'include' : 'omit' + }).finally (() => { + ajax_indicator(false); + }).then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.text(); + }).then(data => (new DOMParser).parseFromString(data, 'text/xml').getElementsByTagName('quote')[0].textContent) + .then(data => { + const text = data.match(/^\[quote(.*)]/ig) + selectedText + '[/quote]' + '\n\n'; + const oEditor = sceditor.instance(document.getElementById(oEditorID)); + oEditor.insert(oEditor.toBBCode(text)); + + // Manually move cursor to after the quote. + var + rangeHelper = oEditor.getRangeHelper(), + parent = rangeHelper.parentNode(); + if (parent && parent.nodeName === 'BLOCKQUOTE') { + var range = rangeHelper.selectedRange(); + range.setStartAfter(parent); + rangeHelper.selectRange(range); + } + window.location.hash = '#' + oJumpAnchor; + oEditor.focus(); + }).catch(error => { + console.error('There has been a problem with your fetch operation:', error); + }); } -$(function() { +addEventListener('load', () => { + const els = document.querySelectorAll('.inner, .list_posts'); - // Event for handling selected quotes. - $(document).on('mouseup', '.inner, .list_posts', function() { - - // Get everything we need. - var oSelected = { - divID : $(this).attr('id'), - msgID : $(this).data('msgid'), - }; - - // Get any selected text. - const node = this; - oSelected.text = getSelectedText(this); - - // Do we have some selected text? - if (typeof oSelected.text == 'undefined' || oSelected.text == false) - return true; - - // Show the "quote this" button. - $('#quoteSelected_' + oSelected.msgID).show(); - - // Remove any previous selection - $(document).off('click', '#quoteSelected_' + oSelected.msgID + ' a'); - - $(document).one('click', '#quoteSelected_' + oSelected.msgID + ' a', function(e) { - e.preventDefault(); - quotedTextClick(oSelected); - }); - - // Register global on click listener to catch deselect clicks outside of the div. - $(document).on('click.ondeselecttext' + oSelected.msgID, function() { - // Delay the check a bit to allow the deselection to happen. - setTimeout(function() { - selectedText = getSelectedText(node); - - if (typeof selectedText != 'undefined' && selectedText != false) - return; - - // Remove any 'click' event to the button. - $(document).off('click', '#quoteSelected_' + oSelected.msgID + ' a'); - - // Hide the button. - $('#quoteSelected_' + oSelected.msgID).hide(); - - // Remove this on click listener - $(document).off('click.ondeselecttext' + oSelected.msgID); - }, 1); - }); + for (const el of els) { + const btn = document.getElementById('quoteSelected_' + el.dataset.msgid); + btn.querySelector('a').addEventListener('click', quotedTextClick.bind(btn, el.dataset.msgid)); + } - return true; + document.addEventListener('selectionchange', () => { + for (const el of els) { + selectedText = getSelectedText(el); + const btn = document.getElementById('quoteSelected_' + el.dataset.msgid); + btn.style.display = !selectedText ? 'none' : ''; + } }); -}); +}); \ No newline at end of file diff --git a/Themes/default/scripts/script.js b/Themes/default/scripts/script.js index 151b5a71f3..e6d17e7233 100644 --- a/Themes/default/scripts/script.js +++ b/Themes/default/scripts/script.js @@ -1,5 +1,4 @@ var lastKeepAliveCheck = new Date().getTime(); -var smf_editorArray = new Array(); // Some very basic browser detection - from Mozilla's sniffer page. var ua = navigator.userAgent.toLowerCase(); @@ -21,82 +20,140 @@ var is_android = ua.indexOf('android') != -1; var ajax_indicator_ele = null; // Get a response from the server. -function getServerResponse(sUrl, funcCallback, sType, sDataType) -{ +function getServerResponse(sUrl, funcCallback, sType = 'GET', sDataType = 'json') { var oCaller = this; - return oMyDoc = $.ajax({ - type: sType, - url: sUrl, - headers: { - "X-SMF-AJAX": 1 - }, - xhrFields: { - withCredentials: typeof allow_xhjr_credentials !== "undefined" ? allow_xhjr_credentials : false - }, - cache: false, - dataType: sDataType, - success: function(response) { - if (typeof(funcCallback) != 'undefined') - { - funcCallback.call(oCaller, response); - } - }, + return smc_Request.fetch(sUrl, { + method: sType, + cache: 'no-cache' + }) + .then(response => { + if (sDataType === 'json') return response.json(); + + if (sDataType === 'text') return response.text(); + + if (sDataType === 'blob') return response.blob(); + + if (sDataType === 'arrayBuffer') return response.arrayBuffer(); + + return response; + }) + .then(data => { + if (typeof funcCallback !== 'undefined') { + funcCallback.call(oCaller, data); + } + + return data; + }) + .catch(error => { + console.error('Error fetching server response:', error); + + if (typeof funcCallback !== 'undefined') { + funcCallback.call(oCaller, false); + } + + return Promise.reject(error); }); } +class smc_Request { + static fetch(sUrl, oOptions, iMilliseconds) { + let timeout; + let options = oOptions || {}; + + if (iMilliseconds) { + const controller = new AbortController(); + options.signal = controller.signal; + timeout = setTimeout(() => controller.abort(), iMilliseconds); + } + + if (typeof allow_xhjr_credentials !== "undefined" && allow_xhjr_credentials) { + options.credentials = 'include'; + } + + if (options.headers) { + if (options.headers instanceof Headers) { + options.headers.set("X-SMF-AJAX", 1); + } else { + options.headers["X-SMF-AJAX"] = 1; + } + } else { + options.headers = { + "X-SMF-AJAX": 1 + }; + } + + const promise = fetch(sUrl, options) + .then(res => res.ok ? res : Promise.reject(res)) + .catch(err => Promise.reject(new Error(`Network request failed: ${err.message}`))); + + if (iMilliseconds) { + return promise.finally(() => timeout && clearTimeout(timeout)); + } + + return promise; + } + + static fetchXML(sUrl, oOptions, iMilliseconds) { + return this.fetch(sUrl, oOptions, iMilliseconds) + .then(res => res.text()) + .then(str => new DOMParser().parseFromString(str, "text/xml")); + } +} + // Load an XML document. -function getXMLDocument(sUrl, funcCallback) -{ +function getXMLDocument(sUrl, funcCallback, iMilliseconds) { var oCaller = this; + const promise = smc_Request.fetchXML(sUrl, null, iMilliseconds); + + if (funcCallback) { + return promise + .then(data => { + funcCallback.call(oCaller, data); + return data; + }) + .catch(err => { + funcCallback.call(oCaller, false); + return Promise.reject(err); + }); + } - return $.ajax({ - type: 'GET', - url: sUrl, - headers: { - "X-SMF-AJAX": 1 - }, - xhrFields: { - withCredentials: typeof allow_xhjr_credentials !== "undefined" ? allow_xhjr_credentials : false - }, - cache: false, - dataType: 'xml', - success: function(responseXML) { - if (typeof(funcCallback) != 'undefined') - { - funcCallback.call(oCaller, responseXML); - } - }, - }); + return promise; } // Send a post form to the server. -function sendXMLDocument(sUrl, sContent, funcCallback) -{ +function sendXMLDocument(sUrl, sContent, funcCallback) { var oCaller = this; - var oSendDoc = $.ajax({ - type: 'POST', - url: sUrl, - headers: { - "X-SMF-AJAX": 1 - }, - xhrFields: { - withCredentials: typeof allow_xhjr_credentials !== "undefined" ? allow_xhjr_credentials : false - }, - data: sContent, - beforeSend: function(xhr) { - xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); - }, - dataType: 'xml', - success: function(responseXML) { - if (typeof(funcCallback) != 'undefined') - { - funcCallback.call(oCaller, responseXML); - } - }, + + const headers = {}; + if (typeof sContent === 'string' || sContent instanceof URLSearchParams) { + headers['Content-Type'] = 'application/x-www-form-urlencoded'; + } else if (sContent instanceof Blob) { + headers['Content-Type'] = sContent.type || 'application/octet-stream'; + } else if (!(sContent instanceof FormData)) { + headers['Content-Type'] = 'application/json'; // Default to JSON + sContent = JSON.stringify(sContent); // Convert object to JSON string + } + + const promise = smc_Request.fetchXML(sUrl, { + method: 'POST', + headers, + body: sContent }); - return true; + if (funcCallback) { + return promise + .then(data => { + funcCallback.call(oCaller, data); + return data; + }) + .catch(err => { + funcCallback.call(oCaller, false); + return Promise.reject(err); + }); + } + + return promise; } // A property we'll be needing for php_to8bit. @@ -323,69 +380,65 @@ function reqWin(desktopURL, alternateWidth, alternateHeight, noScrollbars) function reqOverlayDiv(desktopURL, sHeader, sIcon) { // Set up our div details - var sAjax_indicator = '
      '; - var sHeader = sHeader || help_popup_heading_text; - - var containerOptions; - if (sIcon && sIcon.match(/\.(gif|png|jpe?g|svg|bmp|tiff)$/) != null) - containerOptions = {heading: sHeader, content: sAjax_indicator, icon: smf_images_url + '/' + sIcon}; - else - containerOptions = {heading: sHeader, content: sAjax_indicator, icon_class: 'main_icons ' + (sIcon || 'help')}; + const sAjax_indicator = '
      '; + sHeader = sHeader || help_popup_heading_text; + + let containerOptions; + if (sIcon && sIcon.match(/\.(gif|png|jpe?g|svg|bmp|tiff)$/) != null) { + containerOptions = { heading: sHeader, content: sAjax_indicator, icon: smf_images_url + '/' + sIcon }; + } else { + containerOptions = { heading: sHeader, content: sAjax_indicator, icon_class: 'main_icons ' + (sIcon || 'help') }; + } // Create the div that we are going to load - var oContainer = new smc_Popup(containerOptions); - var oPopup_body = $('#' + oContainer.popup_id).find('.popup_content'); + const oContainer = new smc_Popup(containerOptions); + const oPopup_body = oContainer.cover.querySelector('.popup_content'); // Load the help page content (we just want the text to show) - $.ajax({ - url: desktopURL + (desktopURL.includes('?') ? ';' : '?') + 'ajax', + fetch(desktopURL + (desktopURL.includes('?') ? ';' : '?') + 'ajax', { + method: 'GET', headers: { - 'X-SMF-AJAX': 1 - }, - xhrFields: { - withCredentials: typeof allow_xhjr_credentials !== "undefined" ? allow_xhjr_credentials : false - }, - type: "GET", - dataType: "html", - success: function (data, textStatus, xhr) { - oPopup_body.html(data); - }, - error: function (xhr, textStatus, errorThrown) { - oPopup_body.html(textStatus); + 'X-SMF-AJAX': '1', + + // @fixme This is checked for in SMF\Actions\Login2::checkAjax(). + "X-Requested-With": "XMLHttpRequest" }, - statusCode: { - 403: function(res, status, xhr) { - let errorMsg = res.getResponseHeader('x-smf-errormsg'); - oPopup_body.html(errorMsg ?? banned_text); - }, - 500: function() { - oPopup_body.html('500 Internal Server Error'); - } - } - }); + credentials: typeof allow_xhjr_credentials !== 'undefined' ? 'include' : 'omit' + }) + .then((res, rej) => res.ok ? res.text() : rej(res)) + .then(data => { + oPopup_body.innerHTML = data; + }) + .catch(error => { + const errorMsg = error.headers.get('x-smf-errormsg'); + oPopup_body.innerHTML = errorMsg || error.message || banned_text; + }); + return false; } // Create the popup menus for the top level/user menu area. function smc_PopupMenu(oOptions) { - this.opt = (typeof oOptions == 'object') ? oOptions : {}; + this.opt = oOptions || {}; this.opt.menus = {}; } smc_PopupMenu.prototype.add = function (sItem, sUrl) { - var $menu = $('#' + sItem + '_menu'), $item = $('#' + sItem + '_menu_top'); - if ($item.length == 0) + const menu = document.getElementById(sItem + '_menu'); + const item = document.getElementById(sItem + '_menu_top'); + + if (!item) { return; + } - this.opt.menus[sItem] = {open: false, loaded: false, sUrl: sUrl, itemObj: $item, menuObj: $menu }; + this.opt.menus[sItem] = { open: false, loaded: false, sUrl: sUrl, itemObj: item, menuObj: menu }; - $item.click({obj: this}, function (e) { + item.addEventListener('click', function(e) { e.preventDefault(); - - e.data.obj.toggle(sItem); - }); + this.toggle(sItem); + }.bind(this)); } smc_PopupMenu.prototype.toggle = function (sItem) @@ -400,48 +453,50 @@ smc_PopupMenu.prototype.open = function (sItem) { this.closeAll(); - if (!this.opt.menus[sItem].loaded) - { - this.opt.menus[sItem].menuObj.html('
      ' + (typeof(ajax_notification_text) != null ? ajax_notification_text : '') + '
      '); + if (!this.opt.menus[sItem].loaded) { + this.opt.menus[sItem].menuObj.innerHTML = '
      ' + (ajax_notification_text || '') + '
      '; - $.ajax({ - url: this.opt.menus[sItem].sUrl + (this.opt.menus[sItem].sUrl.includes('?') ? ';' : '?') + 'ajax', + fetch(this.opt.menus[sItem].sUrl + (this.opt.menus[sItem].sUrl.includes('?') ? ';' : '?') + 'ajax', { + method: "GET", headers: { - 'X-SMF-AJAX': 1 - }, - xhrFields: { - withCredentials: typeof allow_xhjr_credentials !== "undefined" ? allow_xhjr_credentials : false + 'X-SMF-AJAX': 1, }, - type: "GET", - dataType: "html", - context: this.opt.menus[sItem].menuObj, - success: function (data, textStatus, xhr) { - this.html(data); + credentials: typeof allow_xhjr_credentials !== "undefined" ? 'include' : 'same-origin', + }) + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); } + return response.text(); + }) + .then(data => { + this.opt.menus[sItem].menuObj.innerHTML = data; + this.opt.menus[sItem].loaded = true; }); - - this.opt.menus[sItem].loaded = true; } - this.opt.menus[sItem].menuObj.addClass('visible'); - this.opt.menus[sItem].itemObj.addClass('open'); + this.opt.menus[sItem].menuObj.classList.add('visible'); + this.opt.menus[sItem].itemObj.classList.add('open'); this.opt.menus[sItem].open = true; // Now set up closing the menu if we click off. - $(document).on('click.menu', {obj: this}, function(e) { - if ($(e.target).closest(e.data.obj.opt.menus[sItem].menuObj.parent()).length) + this.opt.menus[sItem].handleClickOutside = function(e) { + if (e.target.closest('#' + this.opt.menus[sItem].itemObj.id) || e.target.closest('#' + this.opt.menus[sItem].menuObj.id)) { return; - e.data.obj.closeAll(); - $(document).off('click.menu'); - }); + } + + this.closeAll(); + }.bind(this); + + document.addEventListener('click', this.opt.menus[sItem].handleClickOutside); } smc_PopupMenu.prototype.close = function (sItem) { - this.opt.menus[sItem].menuObj.removeClass('visible'); - this.opt.menus[sItem].itemObj.removeClass('open'); + this.opt.menus[sItem].menuObj.classList.remove('visible'); + this.opt.menus[sItem].itemObj.classList.remove('open'); this.opt.menus[sItem].open = false; - $(document).off('click.menu'); + document.removeEventListener('click', this.opt.menus[sItem].handleClickOutside); } smc_PopupMenu.prototype.closeAll = function () @@ -474,39 +529,41 @@ smc_Popup.prototype.show = function () const root = document.createElement("div"); const heading = document.createElement("div"); const content = document.createElement("div"); - const a = document.createElement("a"); + const button = document.createElement("button"); heading.insertAdjacentHTML('beforeend', icon); heading.append(this.opt.heading); - heading.append(a); + heading.append(button); root.append(heading, content); this.cover.appendChild(root); root.className = popup_class; content.className = 'popup_content'; content.innerHTML = this.opt.content; heading.className = 'popup_heading'; - a.className = 'main_icons hide_popup'; - a.setAttribute('role', 'button'); - a.setAttribute('tabindex', '0'); - a.addEventListener("click", this.hide.bind(this)); - this.cover.addEventListener('click', function(e) - { - if (e.target === this.cover) - this.hide(); - }.bind(this)); + button.className = 'main_icons hide_popup link reset'; + button.addEventListener("click", this.hide.bind(this)); document.body.appendChild(this.cover); // Show it - $(this.cover).fadeIn(300, function() + this.cover.classList.add('fade-in'); + + const onAnimationEnd = function() { - var focusableEls = root.querySelectorAll('a[href]:not([href="javascript:self.close();"]), area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex^="-"])'); - this.focusableEls = Array.prototype.slice.call(focusableEls); + const focusableEls = Array.from(root.querySelectorAll('a[href]:not([href="javascript:self.close();"]), area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex^="-"])')); + this.focusableEls = focusableEls; this.firstFocusableEl = focusableEls[0]; this.lastFocusableEl = focusableEls[focusableEls.length - 1]; this.focusedElBeforeOpen = document.activeElement; - if (focusableEls[1]) - focusableEls[1].focus(); - }.bind(this)); + if (focusableEls[1]) focusableEls[1].focus(); + + this.cover.addEventListener('click', function(e) + { + if (e.target === this.cover) + this.hide(); + }.bind(this)); + }; + + this.cover.addEventListener('animationend', onAnimationEnd.bind(this), { once: true }); root.addEventListener('keydown', function(e) { @@ -530,14 +587,15 @@ smc_Popup.prototype.show = function () this.firstFocusableEl.focus(); } break; + case 27: this.hide(); break; } }.bind(this)); - // Disable document scrolling.. - document.body.style.overflow = 'hidden'; + // Disable document scrolling. + document.body.style.overflow = 'clip'; } smc_Popup.prototype.hide = function () @@ -546,15 +604,15 @@ smc_Popup.prototype.hide = function () this.focusedElBeforeOpen.focus(); document.body.style.overflow = ''; - $(this.cover).fadeOut(300, function() { this.remove(); }); -} -// Remember the current position. -function storeCaret(oTextHandle) -{ - // Only bother if it will be useful. - if ('createTextRange' in oTextHandle) - oTextHandle.caretPos = document.selection.createRange().duplicate(); + this.cover.classList.remove('fade-in'); + this.cover.classList.add('fade-out'); + + const onAnimationEnd = function() + { + this.cover.remove(); + }; + this.cover.addEventListener('animationend', onAnimationEnd.bind(this), { once: true }); } // Replaces the currently selected text with the passed text. @@ -645,20 +703,8 @@ function surroundText(text1, text2, oTextHandle) // Checks if the passed input's value is nothing. function isEmptyText(theField) { - // Copy the value so changes can be made.. - if (typeof(theField) == 'string') - var theValue = theField; - else - var theValue = theField.value; - - // Strip whitespace off the left side. - while (theValue.length > 0 && (theValue.charAt(0) == ' ' || theValue.charAt(0) == '\t')) - theValue = theValue.substring(1, theValue.length); - // Strip whitespace off the right side. - while (theValue.length > 0 && (theValue.charAt(theValue.length - 1) == ' ' || theValue.charAt(theValue.length - 1) == '\t')) - theValue = theValue.substring(0, theValue.length - 1); - - return theValue == ''; + // It can either be a string or a form element... + return (theField.value || theField).trim() == ''; } // Only allow form submission ONCE. @@ -674,7 +720,6 @@ function submitThisOnce(oControl) function reActivateThis(oForm) { oForm.inert = false; - } // Deprecated, as innerHTML is supported everywhere. @@ -737,7 +782,7 @@ function selectRadioByName(oRadioGroup, sName) function selectAllRadio(oInvertCheckbox, oForm, sMask, sValue, bIgnoreDisabled) { for (var i = 0; i < oForm.length; i++) - if (oForm[i].name != undefined && oForm[i].name.substr(0, sMask.length) == sMask && oForm[i].value == sValue && (!oForm[i].disabled || (typeof(bIgnoreDisabled) == 'boolean' && bIgnoreDisabled))) + if (oForm[i].name != undefined && oForm[i].name.substr(0, sMask.length) == sMask && oForm[i].value == sValue && (!oForm[i].disabled || bIgnoreDisabled)) oForm[i].checked = true; } @@ -746,10 +791,10 @@ function invertAll(oInvertCheckbox, oForm, sMask, bIgnoreDisabled) { for (var i = 0; i < oForm.length; i++) { - if (!('name' in oForm[i]) || (typeof(sMask) == 'string' && oForm[i].name.substr(0, sMask.length) != sMask && oForm[i].id.substr(0, sMask.length) != sMask)) + if (!('name' in oForm[i]) || (oForm[i].name.substr(0, sMask.length) != sMask && oForm[i].id.substr(0, sMask.length) != sMask)) continue; - if (!oForm[i].disabled || (typeof(bIgnoreDisabled) == 'boolean' && bIgnoreDisabled)) + if (!oForm[i].disabled || bIgnoreDisabled) oForm[i].checked = oInvertCheckbox.checked; } } @@ -775,17 +820,8 @@ window.setTimeout(smf_sessionKeepAlive, 1200000); // Set a theme option through javascript. function smf_setThemeOption(theme_var, theme_value, theme_id, theme_cur_session_id, theme_cur_session_var, theme_additional_vars) { - // Compatibility. - if (theme_cur_session_id == null) - theme_cur_session_id = smf_session_id; - if (typeof(theme_cur_session_var) == 'undefined') - theme_cur_session_var = 'sesc'; - - if (theme_additional_vars == null) - theme_additional_vars = ''; - var tempImage = new Image(); - tempImage.src = smf_prepareScriptUrl(smf_scripturl) + 'action=jsoption;var=' + theme_var + ';val=' + theme_value + ';' + theme_cur_session_var + '=' + theme_cur_session_id + theme_additional_vars + (theme_id == null ? '' : '&th=' + theme_id) + ';time=' + (new Date().getTime()); + tempImage.src = smf_prepareScriptUrl(smf_scripturl) + 'action=jsoption;var=' + theme_var + ';val=' + theme_value + ';' + theme_cur_session_var + '=' + theme_cur_session_id + (theme_additional_vars || '') + (theme_id == null ? '' : '&th=' + theme_id) + ';time=' + (new Date().getTime()); } // Shows the page numbers by clicking the dots (in compact view). @@ -806,10 +842,9 @@ function expandPages(spanNode, baseLink, firstPage, lastPage, perPage) replacement += baseLink.replace(/%1\$d/, i).replace(/%2\$s/, 1 + i / perPage).replace(/%%/g, '%'); // Add the new page links. - spanNode.before(replacement); + spanNode.insertAdjacentHTML('beforebegin', replacement); if (oldLastPage) - // Access the raw DOM element so the native onclick event can be overridden. spanNode.onclick = expandPages.bind(null, spanNode, baseLink, lastPage, oldLastPage, perPage); else spanNode.remove(); @@ -952,88 +987,70 @@ smc_Toggle.prototype.init = function () smc_Toggle.prototype.changeState = function(bCollapse, bInit) { // Default bInit to false. - bInit = typeof(bInit) !== 'undefined'; + bInit = typeof bInit !== 'undefined'; // Handle custom function hook before collapse. - if (!bInit && bCollapse && 'funcOnBeforeCollapse' in this.opt) - { - this.tmpMethod = this.opt.funcOnBeforeCollapse; - this.tmpMethod(); - delete this.tmpMethod; - } - - // Handle custom function hook before expand. - else if (!bInit && !bCollapse && 'funcOnBeforeExpand' in this.opt) - { - this.tmpMethod = this.opt.funcOnBeforeExpand; - this.tmpMethod(); - delete this.tmpMethod; + if (!bInit && bCollapse && this.opt.funcOnBeforeCollapse) { + this.opt.funcOnBeforeCollapse.call(this); + } else if (!bInit && !bCollapse && this.opt.funcOnBeforeExpand) { + this.opt.funcOnBeforeExpand.call(this); } // Loop through all the images that need to be toggled. - if ('aSwapImages' in this.opt) - { - for (var i = 0, n = this.opt.aSwapImages.length; i < n; i++) - { - this.opt.aSwapImages[i].altExpanded = this.opt.aSwapImages[i].altExpanded ? this.opt.aSwapImages[i].altExpanded : smf_collapseAlt; - this.opt.aSwapImages[i].altCollapsed = this.opt.aSwapImages[i].altCollapsed ? this.opt.aSwapImages[i].altCollapsed : smf_expandAlt; - if (this.opt.aSwapImages[i].isCSS) - { - $('#' + this.opt.aSwapImages[i].sId).toggleClass(this.opt.aSwapImages[i].cssCollapsed, bCollapse).toggleClass(this.opt.aSwapImages[i].cssExpanded, !bCollapse).attr('title', bCollapse ? this.opt.aSwapImages[i].altCollapsed : this.opt.aSwapImages[i].altExpanded); - } - else - { - var oImage = document.getElementById(this.opt.aSwapImages[i].sId); - if (typeof(oImage) == 'object' && oImage != null) - { - // Only (re)load the image if it's changed. - var sTargetSource = bCollapse ? this.opt.aSwapImages[i].srcCollapsed : this.opt.aSwapImages[i].srcExpanded; - if (oImage.src != sTargetSource) + if (this.opt.aSwapImages) { + for (const i in this.opt.aSwapImages) { + const image = this.opt.aSwapImages[i]; + const altExpanded = image.altExpanded ? image.altExpanded : smf_collapseAlt; + const altCollapsed = image.altCollapsed ? image.altCollapsed : smf_expandAlt; + const oImage = document.getElementById(image.sId); + + if (oImage) { + if (image.isCSS) { + oImage.classList.toggle(image.cssCollapsed, bCollapse); + oImage.classList.toggle(image.cssExpanded, !bCollapse); + } else { + const sTargetSource = bCollapse ? image.srcCollapsed : image.srcExpanded; + if (oImage.src !== sTargetSource) { oImage.src = sTargetSource; - - oImage.alt = oImage.title = bCollapse ? this.opt.aSwapImages[i].altCollapsed : this.opt.aSwapImages[i].altExpanded; + } } + + oImage.alt = oImage.title = bCollapse ? altCollapsed : altExpanded; } } } // Loop through all the links that need to be toggled. - if ('aSwapLinks' in this.opt) - { - for (var i = 0, n = this.opt.aSwapLinks.length; i < n; i++) - { - var oLink = document.getElementById(this.opt.aSwapLinks[i].sId); - if (typeof(oLink) == 'object' && oLink != null) - setInnerHTML(oLink, bCollapse ? this.opt.aSwapLinks[i].msgCollapsed : this.opt.aSwapLinks[i].msgExpanded); + if (this.opt.aSwapLinks) { + for (const link of this.opt.aSwapLinks) { + const oLink = document.getElementById(link.sId); + if (oLink) { + oLink.innerHTML = bCollapse ? link.msgCollapsed : link.msgExpanded; + } } } // Now go through all the sections to be collapsed. - for (var i = 0, n = this.opt.aSwappableContainers.length; i < n; i++) - { - if (this.opt.aSwappableContainers[i] == null) - continue; - - var oContainer = document.getElementById(this.opt.aSwappableContainers[i]); - if (typeof(oContainer) == 'object' && oContainer != null) - { - if (!!this.opt.bNoAnimate || bInit) - { - $(oContainer).toggle(!bCollapse); - } - else - { - if (bCollapse) - { - if (this.opt.aHeader != null && this.opt.aHeader.hasClass('cat_bar')) - $(this.opt.aHeader).addClass('collapsed'); - $(oContainer).slideUp(); - } - else - { - if (this.opt.aHeader != null && this.opt.aHeader.hasClass('cat_bar')) - $(this.opt.aHeader).removeClass('collapsed'); - $(oContainer).slideDown(); + if (this.opt.aSwappableContainers) { + for (const containerId of this.opt.aSwappableContainers) { + if (containerId === null) continue; + + const oContainer = document.getElementById(containerId); + if (oContainer) { + if (!!this.opt.bNoAnimate || bInit) { + oContainer.style.display = bCollapse ? 'none' : ''; + } else { + if (bCollapse) { + if (this.opt.aHeader != null && this.opt.aHeader.classList.contains('cat_bar')) { + this.opt.aHeader.classList.add('collapsed'); + } + oContainer.style.display = 'none'; + } else { + if (this.opt.aHeader != null && this.opt.aHeader.classList.contains('cat_bar')) { + this.opt.aHeader.classList.remove('collapsed'); + } + oContainer.style.display = ''; + } } } } @@ -1043,11 +1060,13 @@ smc_Toggle.prototype.changeState = function(bCollapse, bInit) this.bCollapsed = bCollapse; // Update the cookie, if desired. - if ('oCookieOptions' in this.opt && this.opt.oCookieOptions.bUseCookie) + if (this.opt.oCookieOptions && this.opt.oCookieOptions.bUseCookie) { this.oCookie.set(this.opt.oCookieOptions.sCookieName, this.bCollapsed | 0); + } - if (!bInit && 'oThemeOptions' in this.opt && this.opt.oThemeOptions.bUseThemeSettings) - smf_setThemeOption(this.opt.oThemeOptions.sOptionName, this.bCollapsed | 0, 'sThemeId' in this.opt.oThemeOptions ? this.opt.oThemeOptions.sThemeId : null, smf_session_id, smf_session_var, 'sAdditionalVars' in this.opt.oThemeOptions ? this.opt.oThemeOptions.sAdditionalVars : null); + if (!bInit && this.opt.oThemeOptions && this.opt.oThemeOptions.bUseThemeSettings) { + smf_setThemeOption(this.opt.oThemeOptions.sOptionName, this.bCollapsed | 0, this.opt.oThemeOptions.sThemeId ?? null, smf_session_id, smf_session_var, this.opt.oThemeOptions.sAdditionalVars ?? null); + } } smc_Toggle.prototype.toggle = function() @@ -1093,31 +1112,28 @@ function create_ajax_indicator_ele() // This function will retrieve the contents needed for the jump to boxes. function grabJumpToContent(elem) { - var oXMLDoc = getXMLDocument(smf_prepareScriptUrl(smf_scripturl) + 'action=xmlhttp;sa=jumpto;xml'); - var aBoardsAndCategories = []; - ajax_indicator(true); - oXMLDoc.done(function(data, textStatus, jqXHR){ + getXMLDocument(smf_prepareScriptUrl(smf_scripturl) + 'action=xmlhttp;sa=jumpto;xml', function(oXMLDoc) + { + let aBoardsAndCategories = []; + const items = oXMLDoc.getElementsByTagName('smf')[0].getElementsByTagName('item'); - var items = $(data).find('item'); - items.each(function(i) { - aBoardsAndCategories[i] = { - id: parseInt($(this).attr('id')), - isCategory: $(this).attr('type') == 'category', - name: this.firstChild.nodeValue.removeEntities(), + for (const item of items) + { + aBoardsAndCategories.push({ + id: parseInt(item.getAttribute('id')), + isCategory: item.getAttribute('type') === 'category', + name: item.firstChild.nodeValue.removeEntities(), is_current: false, - isRedirect: parseInt($(this).attr('is_redirect')), - childLevel: parseInt($(this).attr('childlevel')) - } - }); + isRedirect: parseInt(item.getAttribute('is_redirect')), + childLevel: parseInt(item.getAttribute('childlevel')) + }); + } ajax_indicator(false); - for (var i = 0, n = aJumpTo.length; i < n; i++) - { - aJumpTo[i].fillSelect(aBoardsAndCategories); - } + this.fillSelect(aBoardsAndCategories); }); } @@ -1131,90 +1147,102 @@ function JumpTo(oJumpToOptions) this.dropdownList = null; this.showSelect(); - // Register a change event after the select has been created. - $('#' + this.opt.sContainerId).one('mouseenter', function() { - grabJumpToContent(this); - }); + const el = document.getElementById(this.opt.sContainerId); + this.oContainer = el; + let timeout = null; + + // Detect if a "coarse pointer" (usually a touch screen) is the primary input device. + if (window.matchMedia("(pointer: coarse)").matches) { + el.onfocus = () => { + (this.opt.funcFetchData || grabJumpToContent).call(this); + + el.onfocus = null; + }; + } else { + el.onmouseover = () => { + timeout = setTimeout(() => { + (this.opt.funcFetchData || grabJumpToContent).call(this); + + el.onmouseover = null; + el.onmouseout = null; + }, 200); + }; + el.onmouseout = () => { + clearTimeout(timeout); + }; + } } // Show the initial select box (onload). Method of the JumpTo class. JumpTo.prototype.showSelect = function () { - var sChildLevelPrefix = ''; - for (var i = this.opt.iCurBoardChildLevel; i > 0; i--) - sChildLevelPrefix += this.opt.sBoardChildLevelIndicator; - setInnerHTML(document.getElementById(this.opt.sContainerId), this.opt.sJumpToTemplate.replace(/%select_id%/, this.opt.sContainerId + '_select').replace(/%dropdown_list%/, ' ' + (this.opt.sGoButtonLabel != undefined ? '' : ''))); - this.dropdownList = document.getElementById(this.opt.sContainerId + '_select'); + const el = this.oContainer; + el.innerHTML = this.opt.sJumpToTemplate + .replace(/%select_id%/, this.opt.sContainerId + '_select') + .replace(/%dropdown_list%/, ''); + + if (this.opt.sGoButtonLabel) { + const btn = document.createElement('button'); + btn.textContent = this.opt.sGoButtonLabel; + btn.className = 'button'; + btn.addEventListener('click', () => { + window.location.href = smf_prepareScriptUrl(smf_scripturl) + 'board=' + this.opt.iCurBoardId + '.0'; + }); + el.append(' ', btn); + } + this.dropdownList = el.getElementById(this.opt.sContainerId + '_select'); + + // Add an onchange action + if (!this.opt.bNoRedirect) { + this.dropdownList.onchange = function() { + const val = this.options[this.selectedIndex].value; + if (this.selectedIndex > 0 && val) + window.location.href = smf_scripturl + (val.startsWith('?') ? val.substring(1) : val); + }; + } } // Fill the jump to box with entries. Method of the JumpTo class. JumpTo.prototype.fillSelect = function (aBoardsAndCategories) { - // Don't do this twice. - $('#' + this.opt.sContainerId).off('mouseenter'); - // Create an option that'll be above and below the category. - var oDashOption = document.createElement('option'); - oDashOption.appendChild(document.createTextNode(this.opt.sCatSeparator)); + const oDashOption = new Option(this.opt.sCatSeparator, ''); oDashOption.disabled = 'disabled'; - oDashOption.value = ''; - - if ('onbeforeactivate' in document) - this.dropdownList.onbeforeactivate = null; - else - this.dropdownList.onfocus = null; if (this.opt.bNoRedirect) this.dropdownList.options[0].disabled = 'disabled'; // Create a document fragment that'll allowing inserting big parts at once. - var oListFragment = document.createDocumentFragment(); + const oListFragment = document.createDocumentFragment(); // Loop through all items to be added. - for (var i = 0, n = aBoardsAndCategories.length; i < n; i++) - { - var j, sChildLevelPrefix, oOption; - + for (const item of aBoardsAndCategories) { // If we've reached the currently selected board add all items so far. - if (!aBoardsAndCategories[i].isCategory && aBoardsAndCategories[i].id == this.opt.iCurBoardId) - { + if (!item.isCategory && item.id == this.opt.iCurBoardId) { this.dropdownList.insertBefore(oListFragment, this.dropdownList.options[0]); oListFragment = document.createDocumentFragment(); continue; } - if (aBoardsAndCategories[i].isCategory) + if (item.isCategory) oListFragment.appendChild(oDashOption.cloneNode(true)); - else - for (j = aBoardsAndCategories[i].childLevel, sChildLevelPrefix = ''; j > 0; j--) - sChildLevelPrefix += this.opt.sBoardChildLevelIndicator; - oOption = document.createElement('option'); - oOption.appendChild(document.createTextNode((aBoardsAndCategories[i].isCategory ? this.opt.sCatPrefix : sChildLevelPrefix + this.opt.sBoardPrefix) + aBoardsAndCategories[i].name)); - if (!this.opt.bNoRedirect) - oOption.value = aBoardsAndCategories[i].isCategory ? '#c' + aBoardsAndCategories[i].id : '?board=' + aBoardsAndCategories[i].id + '.0'; - else - { - if (aBoardsAndCategories[i].isCategory || aBoardsAndCategories[i].isRedirect) - oOption.disabled = 'disabled'; - else - oOption.value = aBoardsAndCategories[i].id; + const oOption = new Option( + (item.isCategory ? this.opt.sCatPrefix : this.opt.sBoardChildLevelIndicator.repeat(item.childLevel) + this.opt.sBoardPrefix) + item.name, + item.isCategory ? '#c' + item.id : '?board=' + item.id + '.0' + ); + if (this.opt.bNoRedirect && (item.isCategory || item.isRedirect)) { + oOption.disabled = 'disabled'; } oListFragment.appendChild(oOption); - - if (aBoardsAndCategories[i].isCategory) + + if (item.isCategory) oListFragment.appendChild(oDashOption.cloneNode(true)); } // Add the remaining items after the currently selected item. this.dropdownList.appendChild(oListFragment); - - // Add an onchange action - if (!this.opt.bNoRedirect) - this.dropdownList.onchange = function() { - if (this.selectedIndex > 0 && this.options[this.selectedIndex].value) - window.location.href = smf_scripturl + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf('?') == -1 || this.options[this.selectedIndex].value.substr(0, 1) != '?' ? 0 : 1); - } } // A global array containing all IconList objects. @@ -1416,42 +1444,18 @@ function smf_itemPos(itemHandle) } // This function takes the script URL and prepares it to allow the query string to be appended to it. -function smf_prepareScriptUrl(sUrl) -{ +// If `sUrl` does not end with `?`, `&`, or `;`, append `?` or `;`, depending on whether the URL already contains a query string. +function smf_prepareScriptUrl(sUrl) { // Ensure index.php is in the URL even when the option to hide it is enabled. if (sUrl.indexOf('/index.php') == -1) { sUrl = sUrl + '/index.php'; } - return sUrl.indexOf('?') == -1 ? sUrl + '?' : sUrl + (sUrl.charAt(sUrl.length - 1) == '?' || sUrl.charAt(sUrl.length - 1) == '&' || sUrl.charAt(sUrl.length - 1) == ';' ? '' : ';'); + return sUrl + (!sUrl.includes('?') ? '?' : /[&;]$/.test(sUrl) ? '' : ';'); } -var aOnloadEvents = new Array(); -function addLoadEvent(fNewOnload) -{ - // If there's no event set, just set this one - if (typeof(fNewOnload) == 'function' && (!('onload' in window) || typeof(window.onload) != 'function')) - window.onload = fNewOnload; - - // If there's just one event, setup the array. - else if (aOnloadEvents.length == 0) - { - aOnloadEvents[0] = window.onload; - aOnloadEvents[1] = fNewOnload; - window.onload = function() { - for (var i = 0, n = aOnloadEvents.length; i < n; i++) - { - if (typeof(aOnloadEvents[i]) == 'function') - aOnloadEvents[i](); - else if (typeof(aOnloadEvents[i]) == 'string') - eval(aOnloadEvents[i]); - } - } - } - - // This isn't the first event function, add it to the list. - else - aOnloadEvents[aOnloadEvents.length] = fNewOnload; +function addLoadEvent(fNewOnload) { + window.addEventListener("load", fNewOnload); } // A function used to clean the attachments on post page @@ -1508,7 +1512,7 @@ function expandThumb(thumbID) function generateDays(offset) { // Work around JavaScript's lack of support for default values... - offset ||= ''; + offset = typeof(offset) != 'undefined' ? offset : ''; var days = 0, selected = 0; var dayElement = document.getElementById("day" + offset), yearElement = document.getElementById("year" + offset), monthElement = document.getElementById("month" + offset); @@ -1527,7 +1531,7 @@ function generateDays(offset) days = monthLength[monthElement.value - 1]; - for (let i = 1; i <= days; i++) + for (i = 1; i <= days; i++) dayElement.options[dayElement.length] = new Option(i, i); if (selected < days) @@ -1644,207 +1648,182 @@ function makeChecks(f) }.bind(b, div.elements)); } } +function smc_resize(selector) { + const allElements = []; -function smc_resize(selector) -{ - var allElements = []; - - $(selector).each(function(){ - $thisElement = $(this); - - // Get rid of the width and height attributes. - $thisElement.removeAttr('width').removeAttr('height'); - - // Get the default vars. - $thisElement.basedElement = $thisElement.parent(); - $thisElement.defaultWidth = $thisElement.width(); - $thisElement.defaultHeight = $thisElement.height(); - $thisElement.aspectRatio = $thisElement.defaultHeight / $thisElement.defaultWidth; - - allElements.push($thisElement); - }); + const elements = document.querySelectorAll(selector); + for (const element of elements) { + element.removeAttribute('width'); + element.removeAttribute('height'); - $(window).resize(function(){ - $(allElements).each(function(){ - _innerElement = this; + const basedElement = element.parentElement; + const defaultWidth = element.clientWidth; + const defaultHeight = element.clientHeight; + const aspectRatio = defaultHeight / defaultWidth; - // Get the new width and height. - var newWidth = _innerElement.basedElement.width(); - var newHeight = (newWidth * _innerElement.aspectRatio) <= _innerElement.defaultHeight ? (newWidth * _innerElement.aspectRatio) : _innerElement.defaultHeight; + allElements.push({ element, basedElement, defaultWidth, defaultHeight, aspectRatio }); + } - // If the new width is lower than the "default width" then apply some resizing. No? then go back to our default sizes - var applyResize = (newWidth <= _innerElement.defaultWidth), - applyWidth = !applyResize ? _innerElement.defaultWidth : newWidth, - applyHeight = !applyResize ? _innerElement.defaultHeight : newHeight; + window.addEventListener('resize', () => { + for (const innerElement of allElements) { + const newWidth = innerElement.basedElement.clientWidth; + const newHeight = (newWidth * innerElement.aspectRatio) <= innerElement.defaultHeight ? (newWidth * innerElement.aspectRatio) : innerElement.defaultHeight; + const applyResize = (newWidth <= innerElement.defaultWidth); + const applyWidth = !applyResize ? innerElement.defaultWidth : newWidth; + const applyHeight = !applyResize ? innerElement.defaultHeight : newHeight; - // Gotta check the applied width and height is actually something! if (applyWidth <= 0 && applyHeight <= 0) { - applyWidth = _innerElement.defaultWidth; - applyHeight = _innerElement.defaultHeight; + applyWidth = innerElement.defaultWidth; + applyHeight = innerElement.defaultHeight; } - // Finally resize the element! - _innerElement.width(applyWidth).height(applyHeight); - }); + innerElement.element.style.width = applyWidth + 'px'; + innerElement.element.style.height = applyHeight + 'px'; + } + }); - // Kick off one resize to fix all elements on page load. - }).resize(); + window.dispatchEvent(new Event('resize')); } -$(function() { - $('.buttonlist li > .top_menu').each(function(index, item) { - $(item).prev().click(function(e) { +document.addEventListener('DOMContentLoaded', () => { + const dropMenus = document.querySelectorAll('.buttonlist > .dropmenu'); + for (const item of dropMenus) { + const prevElement = item.previousElementSibling; + + prevElement.addEventListener('click', e => { e.stopPropagation(); e.preventDefault(); - if ($(item).is(':visible')) { - $(item).removeClass('visible'); - + if (window.getComputedStyle(item).display === 'block') { + item.style.display = 'none'; return true; } - $(item).addClass('visible'); + item.style.display = 'block'; + item.style.top = (prevElement.offsetTop + prevElement.offsetHeight) + 'px'; + item.style.left = Math.max(prevElement.offsetLeft - item.offsetWidth + prevElement.offsetWidth, 0) + 'px'; + item.style.height = item.querySelector('div:first-child').offsetHeight + 'px'; }); - $(document).click(function() { - $(item).removeClass('visible'); - }); - }); - - // Generic confirmation message. - $(document).on('click', '.you_sure', function() { - if (this.getAttribute('type') === 'checkbox' && !this.checked) { - return true; - } - - var custom_message = $(this).attr('data-confirm'); - var timeBefore = new Date(); - var result = confirm(custom_message ? custom_message.replace(/-n-/g, "\n") : smf_you_sure); - var timeAfter = new Date(); - - // Check if the browser disabled the alert - if (!result && (timeAfter - timeBefore) < 10) - return true; - - return result; - }); - // Expand quotes - if ((typeof(smf_quote_expand) != 'undefined') && (smf_quote_expand > 0)) - { - $('blockquote').each(function(index, item) { - - let cite = $(item).find('cite').first(); - let quote_height = parseInt($(item).height()); - - if(quote_height < smf_quote_expand) - return; - - $(item).css({ - 'overflow-y': 'hidden', - 'max-height': smf_quote_expand +'px' - }); - - let anchor = $('', { - text: ' [' + smf_txt_expand + ']', - class: 'expand' - }); - - if (cite.length) - cite.append(anchor); - - $(item).on('click', 'a.expand', function(event) { - event.preventDefault(); - - if (smf_quote_expand < parseInt($(item).height())) - { - cite.find('a.expand').text(' ['+ smf_txt_expand +']'); - $(item).css({ - 'overflow-y': 'hidden', - 'max-height': smf_quote_expand +'px' - }); - } + document.addEventListener('click', () => { + item.style.display = 'none'; + }); + } - else - { - cite.find('a.expand').text(' ['+ smf_txt_shrink +']'); - $(item).css({ - 'overflow-y': 'visible', - 'max-height': (quote_height + 10) +'px' - }); + const sureElements = document.querySelectorAll('.you_sure'); + for (const element of sureElements) { + element.addEventListener('click', () => { + const customMessage = element.getAttribute('data-confirm'); + const timeBefore = new Date(); + const result = confirm(customMessage ? customMessage.replace(/-n-/g, "\n") : smf_you_sure); + const timeAfter = new Date(); - expand_quote_parent($(item)); - } + if (!result && (timeAfter - timeBefore) < 10) { + return true; + } - return false; - }); + return result; }); } attachBbCodeEvents(document); }); -function expand_quote_parent(oElement) -{ - $.each(oElement.parentsUntil('div.inner'), function( index, value ) { - $(value).css({ - 'overflow-y': 'visible', - 'max-height': '', - }).find('a.expand').first().text(' ['+ smf_txt_shrink +']'); - }); -} - function attachBbCodeEvents(parent) { parent.querySelectorAll('.bbc_code').forEach(item => { - const selectButton = document.createElement('button'); - selectButton.textContent = item.dataset.selectTxt; - selectButton.className = 'reset link'; - selectButton.addEventListener('click', function() - { - window.getSelection().selectAllChildren(item); - }); - item.previousSibling.append(' [', selectButton, ']'); + const d = item.dataset; + const selectText = d.selectTxt; + const expandText = d.expandTxt; + + if (selectText) { + const selectButton = document.createElement('button'); + selectButton.textContent = selectText; + selectButton.className = 'reset link'; + selectButton.addEventListener('click', () => { + window.getSelection().selectAllChildren(item); + }); + item.previousSibling.append(' [', selectButton, ']'); + } // Show the Expand bbc button if needed if (item.innerHeight < item.scrollHeight) return; - const expandButton = document.createElement('button'); - expandButton.textContent = item.dataset.expandTxt; - expandButton.className = 'reset link'; - expandButton.addEventListener('click', function() + if (expandText) { + const expandButton = document.createElement('button'); + expandButton.textContent = expandText; + expandButton.className = 'reset link'; + expandButton.addEventListener('click', function() { + if (item.classList.contains('expand_code')) { + item.classList.remove('expand_code'); + this.textContent = expandText; + } else { + item.classList.add('expand_code'); + this.textContent = d.shrinkTxt; + } + }); + item.previousSibling.append(' [', expandButton, ']'); + } + }); + + // Expand quotes + if (smf_quote_expand && !/\D/.test(smf_quote_expand)) + for (const el of parent.getElementsByTagName('blockquote')) { - if (item.classList.contains('expand_code')) + if (el.offsetHeight < smf_quote_expand) + return; + + const fn = (p, idx, l) => { - item.classList.remove('expand_code'); - this.textContent = item.dataset.expandTxt; - } - else + for (const a of p.getElementsByTagName('a')) + if (a.href || idx === '0') + a.setAttribute('tabindex', idx); + }; + + // Disable tabbing for all hidden anchor links. + fn(el, '-1', a); + + const a = document.createElement('a'); + a.textContent = smf_txt_expand; + a.className = 'expand'; + a.setAttribute('role', 'button'); + if (el.parentNode.tagName != 'BLOCKQUOTE') + a.setAttribute('tabindex', '0'); + a.addEventListener('click', function() { - item.classList.add('expand_code'); - this.textContent = item.dataset.shrinkTxt; - } - }); - item.previousSibling.append(' [', expandButton, ']'); - }); + const d = this.parentNode; + d.classList.remove('expand'); + this.remove(); + fn(d, '0'); + }); + a.addEventListener('keydown', function(e) + { + // Keypresses other then Enter and Space should not trigger a command + if (e.keyCode != 13 && e.keyCode != 32) + return; + + this.click(); + e.preventDefault(); + }); + el.classList.add('expand'); + el.style.setProperty('--height', smf_quote_expand + 'px'); + el.append(a); + } } function avatar_fallback(e) { - var e = window.e || e; var default_url = smf_avatars_url + '/default.png'; - if (e.target.tagName !== 'IMG' || !e.target.classList.contains('avatar') || e.target.src === default_url ) - return; + if (e.target.tagName !== 'IMG' || !e.target.classList.contains('avatar') || e.target.src === default_url ) + return; e.target.src = default_url; return true; } -if (document.addEventListener) - document.addEventListener("error", avatar_fallback, true); -else - document.attachEvent("error", avatar_fallback); +document.addEventListener("error", avatar_fallback, true); // SMF Preview handler. function smc_preview_post(oOptions) diff --git a/Themes/default/scripts/smf_jquery_plugins.js b/Themes/default/scripts/smf_jquery_plugins.js index b956f96fa4..e54c5bfe94 100644 --- a/Themes/default/scripts/smf_jquery_plugins.js +++ b/Themes/default/scripts/smf_jquery_plugins.js @@ -715,7 +715,7 @@ $(function() { new smc_Toggle({ bToggleEnabled: true, bCurrentlyCollapsed: $('#category_' + catid + '_upshrink').data('collapsed'), - aHeader: $('#category_' + catid), + aHeader: document.getElementById('category_' + catid), aSwappableContainers: [ 'category_' + catid + '_boards' ], From 94383a7b1dab22b93b876d5484241d811f1af591 Mon Sep 17 00:00:00 2001 From: John Rayes Date: Thu, 14 Mar 2024 02:29:49 -0700 Subject: [PATCH 055/115] Rewrite our editor integration --- Languages/en_US/Editor.php | 15 + Sources/Actions/Display.php | 3 - Sources/Actions/Post.php | 3 - Sources/Editor.php | 817 ++++++---- Themes/default/Display.template.php | 14 +- Themes/default/GenericControls.template.php | 109 +- Themes/default/Post.template.php | 16 +- Themes/default/css/index.css | 24 - Themes/default/css/jquery.sceditor.css | 424 ++--- .../default/css/jquery.sceditor.default.css | 28 +- Themes/default/scripts/jquery.sceditor.smf.js | 1400 ++++++----------- .../scripts/sceditor.plugins.autolinker.js | 390 +++++ 12 files changed, 1550 insertions(+), 1693 deletions(-) create mode 100644 Themes/default/scripts/sceditor.plugins.autolinker.js diff --git a/Languages/en_US/Editor.php b/Languages/en_US/Editor.php index 33f3ad9b21..a701b24758 100644 --- a/Languages/en_US/Editor.php +++ b/Languages/en_US/Editor.php @@ -15,6 +15,21 @@ $editortxt['font_name'] = 'Font name'; $editortxt['font_size'] = 'Font size'; $editortxt['font_color'] = 'Font color'; +$editortxt['black'] = 'Black'; +$editortxt['red'] = 'Red'; +$editortxt['yellow'] = 'Yellow'; +$editortxt['pink'] = 'Pink'; +$editortxt['green'] = 'Green'; +$editortxt['orange'] = 'Orange'; +$editortxt['purple'] = 'Purple'; +$editortxt['blue'] = 'Blue'; +$editortxt['beige'] = 'Beige'; +$editortxt['brown'] = 'Brown'; +$editortxt['teal'] = 'Teal'; +$editortxt['navy'] = 'Navy'; +$editortxt['maroon'] = 'Maroon'; +$editortxt['lime_green'] = 'Lime Green'; +$editortxt['white'] = 'White'; $editortxt['remove_formatting'] = 'Remove formatting'; $editortxt['cut'] = 'Cut'; $editortxt['browser_no_cut'] = 'Your browser does not allow the cut command. Please use the keyboard shortcut Ctrl/Cmd-X'; diff --git a/Sources/Actions/Display.php b/Sources/Actions/Display.php index fe805583b1..8880c5ce7b 100644 --- a/Sources/Actions/Display.php +++ b/Sources/Actions/Display.php @@ -1320,9 +1320,6 @@ protected function loadEditor(): void 'labels' => [ 'post_button' => Lang::getTxt('post', file: 'General'), ], - // add height and width for the editor - 'height' => '150px', - 'width' => '100%', // We do HTML preview here. 'preview_type' => Editor::PREVIEW_HTML, // This is required diff --git a/Sources/Actions/Post.php b/Sources/Actions/Post.php index ea9ad3dd0a..608612bcd0 100644 --- a/Sources/Actions/Post.php +++ b/Sources/Actions/Post.php @@ -1776,9 +1776,6 @@ protected function loadEditor(): void 'labels' => [ 'post_button' => Utils::$context['submit_label'], ], - // add height and width for the editor - 'height' => '175px', - 'width' => '100%', // We do XML preview here. 'preview_type' => Editor::PREVIEW_XML, 'required' => true, diff --git a/Sources/Editor.php b/Sources/Editor.php index 647e88eb09..3b4b5b480d 100644 --- a/Sources/Editor.php +++ b/Sources/Editor.php @@ -21,7 +21,7 @@ /** * Creates the editor input box so that people can write messages to post. */ -class Editor implements \ArrayAccess +class Editor implements \ArrayAccess, \Stringable { use ArrayAccessHelper; @@ -51,28 +51,33 @@ class Editor implements \ArrayAccess public string $value; /** - * @var string + * Determines whether the editor starts in rich text (WYSIWYG) mode. + * + * This property is initialized based on several factors: + * - If the global setting `disable_wysiwyg` is enabled; + * - If the user's theme preference or the provided option `force_rich` is true; + * - If a request explicitly sets the editor mode for the instance (e.g., `$_REQUEST[$this->id . '_mode']`); it overrides other settings. * - * Whether WYSIWYG mode is initially on or off. + * @var bool True if the editor starts in WYSIWYG mode, false otherwise. */ public bool $rich_active; /** - * @var string + * @var bool * * Whether to show the smiley box. */ public bool $disable_smiley_box; /** - * @var string + * @var int * * Column width of the editor's input area. */ public int $columns; /** - * @var string + * @var int * * Row height of the editor's input area. */ @@ -169,21 +174,18 @@ class Editor implements \ArrayAccess public static array $bbc_toolbar = []; /** - * @var string + * @var array * * */ - public static string $bbc_handlers = ''; + public static array $bbc_handlers = []; /** * @var array * * */ - public static array $smileys_toolbar = [ - 'postform' => [], - 'popup' => [], - ]; + public static array $smileys_toolbar = []; /**************************** * Internal static properties @@ -203,9 +205,76 @@ class Editor implements \ArrayAccess ****************/ /** - * Constructor. + * Initializes a new instance of the editor class and configures its options and behavior. * - * @param array $options Various options for the editor. + * This constructor prepares the editor with default or user-specified options, including its + * dimensions, behavior, and visual features. It also sets up toolbars, smileys, and WYSIWYG + * capabilities if enabled. + * + * Behavior: + * 1. Initializes the editor with a unique ID and sets default options for its dimensions and behavior. + * 2. Configures the smiley and BBC toolbars, applying any necessary translations or replacements. + * 3. Enables WYSIWYG mode based on global settings, user preferences, or provided options. + * 4. Sets the SCEditor options using the provided `$options` array. + * 5. Adds backward compatibility support by storing the editor ID in the global context. + * + * Supported options: + * - `id` (string): The unique identifier for the editor instance. Defaults to 'message'. + * - `value` (string): The initial value of the editor, with certain replacements for compatibility. + * - `disable_smiley_box` (bool): Whether to disable the smiley selection box. Default is false. + * - `columns` (int): Number of columns for the editor text area. Default is 60. + * - `rows` (int): Number of rows for the editor text area. Default is 18. + * - `width` (string): Width of the editor. Default is '100%'. + * - `height` (string): Height of the editor. Default is '250px'. + * - `form` (string): The form name associated with the editor. Default is 'postmodify'. + * - `preview_type` (int): The type of preview for the editor. Default is `self::PREVIEW_HTML`. + * - `labels` (array): Additional labels for customization. + * - `required` (bool): Indicates whether the editor input is required. Default is false. + * - `force_rich` (bool): Force the editor to start in rich text mode. Default is false. + * This option directly influences `$this->rich_active`, which determines if WYSIWYG mode is enabled. + * - `plugins` (array): List of additional plugins to be loaded. Defaults to an empty array if not set. + * - `disable_url_autolinking` (bool): If set, disables the autolinker plugin for URLs. + * - `options` (array): Additional SCEditor configuration options to be merged with default settings. + * + * Custom SCEditor options: + * - `commandsWithDropdown`: Identifies buttons that use dropdown menus. + * - `textOnlyCommands`: Configures buttons to display text without icons. + * - `commandsWithText`: Configures buttons to show text alongside icons. + * + * Hooks: + * - Hook: `integrate_sceditor_options` + * - Parameters: + * - `array &$this->sce_options`: Reference to the array of SCEditor options. + * + * - Hook: `integrate_bbc_buttons` + * - Parameters: + * - `array &$bbc_tags`: Reference to the array of BBC tags. + * - `array &$editor_tag_map`: Reference to the mapping of BBC tags to SCEditor commands. + * - `array &$disabled_tags`: Reference to the array of disabled BBC tags. + * + * Example bbc tag array: + * ```php + * [ + * 'code' => 'b', + * 'description' => Lang::$editortxt['bold'], // Optional + * 'image' => 'bold', // Optional + * 'before' => '[b]', // Optional + * 'after' => '[/b]', // Optional + * ] + * ``` + * + * Example editor tag map: + * ```php + * [ + * 'bbcode' => 'sceditorCommand', + * ] + * ``` + * + * Notes: + * - A blank array (`[]`) in the `bbc_tags` represents a separator between groups of buttons in the toolbar. + * - The `editor_tag_map` is only used when the BBC tag and the SCEditor command differ. + * + * @param array $options An associative array of configuration options for the editor. */ public function __construct(array $options) { @@ -224,7 +293,7 @@ public function __construct(array $options) $this->disable_smiley_box = !empty($options['disable_smiley_box']); $this->columns = (int) ($options['columns'] ?? 60); $this->rows = (int) ($options['rows'] ?? 18); - $this->width = (string) ($options['width'] ?? '70%'); + $this->width = (string) ($options['width'] ?? '100%'); $this->height = (string) ($options['height'] ?? '250px'); $this->form = (string) ($options['form'] ?? 'postmodify'); $this->preview_type = (int) ($options['preview_type'] ?? self::PREVIEW_HTML); @@ -237,7 +306,7 @@ public function __construct(array $options) $this->buildBbcToolbar(); $this->buildSmileysToolbar(); - $this->setSCEditorOptions(); + $this->setSCEditorOptions($options); self::$loaded[$this->id] = $this; @@ -245,6 +314,14 @@ public function __construct(array $options) Utils::$context['post_box_name'] = $this->id; } + /** + * Allows this object to be handled like a string. + */ + public function __toString(): string + { + return json_encode($this->sce_options, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); + } + /*********************** * Public static methods ***********************/ @@ -260,6 +337,56 @@ public static function load(array $options): object return new self($options); } + /** + * Adds a new BBC tag to the toolbar before or after a specified tag. + * + * @param array $new_tag The new tag to add. + * @param string $reference_tag The tag code to reference. + * @param bool $before True to add the new tag before the reference tag, false to add it after. + */ + public static function addBbcTag(array $new_tag, string $reference_tag, bool $before = true): void + { + if (self::$bbc_tags == []) { + self::initBbcTags(); + } + + foreach (self::$bbc_tags as &$row) { + foreach ($row as $index => $tag) { + if (isset($tag['code']) && $tag['code'] === $reference_tag) { + if ($before) { + array_splice($row, $index, 0, [$new_tag]); + } else { + array_splice($row, $index + 1, 0, [$new_tag]); + } + + return; + } + } + } + } + + /** + * Removes a BBC tag from the toolbar. + * + * @param string $tag_code The tag code to remove. + */ + public static function removeBbcTag(string $tag_code): void + { + if (self::$bbc_tags == []) { + self::initBbcTags(); + } + + foreach (self::$bbc_tags as &$row) { + foreach ($row as $index => $tag) { + if (isset($tag['code']) && $tag['code'] === $tag_code) { + array_splice($row, $index, 1); + + return; + } + } + } + } + /** * Retrieves a list of message icons. * @@ -333,8 +460,6 @@ public static function getMessageIcons(int $board_id): array foreach ($icons as $k => $dummy) { $icons[$k]['url'] = Theme::$current->settings['images_url'] . '/post/' . $dummy['value'] . '.png'; - - $icons[$k]['is_last'] = false; } } // Otherwise load the icons, and check we give the right image too... @@ -360,7 +485,6 @@ public static function getMessageIcons(int $board_id): array 'value' => $row['filename'], 'name' => $row['title'], 'url' => Theme::$current->settings[file_exists(Theme::$current->settings['theme_dir'] . '/images/post/' . $row['filename'] . '.png') ? 'images_url' : 'default_images_url'] . '/post/' . $row['filename'] . '.png', - 'is_last' => false, ]; } Db::$db->free_result($request); @@ -374,6 +498,170 @@ public static function getMessageIcons(int $board_id): array return array_values($icons); } + /************************* + * Internal static methods + *************************/ + + /** + * Initializes BBC tags for the toolbar. + */ + protected static function initBbcTags(): void + { + // The below array makes it dead easy to add images to this control. Add it to the array and everything else is done for you! + /* + array( + 'code' => 'b', // Required + 'description' => Lang::$editortxt['bold'], // Required + 'image' => 'bold', // Optional + 'before' => '[b]', // Optional + 'after' => '[/b]', // Optional + ), + */ + self::$bbc_tags = [ + [ + [ + 'code' => 'bold', + 'description' => Lang::$editortxt['bold'], + ], + [ + 'code' => 'italic', + 'description' => Lang::$editortxt['italic'], + ], + [ + 'code' => 'underline', + 'description' => Lang::$editortxt['underline'], + ], + [ + 'code' => 'strike', + 'description' => Lang::$editortxt['strikethrough'], + ], + [ + 'code' => 'superscript', + 'description' => Lang::$editortxt['superscript'], + ], + [ + 'code' => 'subscript', + 'description' => Lang::$editortxt['subscript'], + ], + [], + [ + 'code' => 'pre', + 'description' => Lang::$editortxt['preformatted_text'], + ], + [ + 'code' => 'left', + 'description' => Lang::$editortxt['align_left'], + ], + [ + 'code' => 'center', + 'description' => Lang::$editortxt['center'], + ], + [ + 'code' => 'right', + 'description' => Lang::$editortxt['align_right'], + ], + [ + 'code' => 'justify', + 'description' => Lang::$editortxt['justify'], + ], + [], + [ + 'code' => 'font', + 'description' => Lang::$editortxt['font_name'], + ], + [ + 'code' => 'size', + 'description' => Lang::$editortxt['font_size'], + ], + [ + 'code' => 'color', + 'description' => Lang::$editortxt['font_color'], + ], + [], + [ + 'code' => 'removeformat', + 'description' => Lang::$editortxt['remove_formatting'], + ], + ], + [ + [ + 'code' => 'floatleft', + 'description' => Lang::$editortxt['float_left'], + ], + [ + 'code' => 'floatright', + 'description' => Lang::$editortxt['float_right'], + ], + [], + [ + 'code' => 'youtube', + 'description' => Lang::$editortxt['insert_youtube_video'], + ], + [ + 'code' => 'image', + 'description' => Lang::$editortxt['insert_image'], + ], + [ + 'code' => 'email', + 'description' => Lang::$editortxt['insert_email'], + ], + [ + 'code' => 'link', + 'description' => Lang::$editortxt['insert_link'], + ], + [ + 'code' => 'unlink', + 'description' => Lang::$editortxt['unlink'], + ], + [], + [ + 'code' => 'table', + 'description' => Lang::$editortxt['insert_table'], + ], + [ + 'code' => 'code', + 'description' => Lang::$editortxt['code'], + ], + [ + 'image' => 'tt', + 'code' => 'tt', + 'description' => Lang::$editortxt['tt'], + ], + [ + 'code' => 'quote', + 'description' => Lang::$editortxt['insert_quote'], + ], + [], + [ + 'code' => 'bulletlist', + 'description' => Lang::$editortxt['bullet_list'], + ], + [ + 'code' => 'orderedlist', + 'description' => Lang::$editortxt['numbered_list'], + ], + [ + 'code' => 'horizontalrule', + 'description' => Lang::$editortxt['insert_horizontal_rule'], + ], + [ + 'image' => 'heading', + 'code' => 'heading', + 'description' => Lang::$editortxt['heading'], + ], + [], + [ + 'code' => 'maximize', + 'description' => Lang::$editortxt['maximize'], + ], + [ + 'code' => 'source', + 'description' => Lang::$editortxt['view_source'], + ], + ], + ]; + } + /****************** * Internal methods ******************/ @@ -409,28 +697,27 @@ protected function init(): void */ Theme::loadCSSFile('jquery.sceditor.theme.css', ['force_current' => true, 'validate' => true], 'smf_jquery_sceditor_theme'); - // JS makes the editor go round - Theme::loadJavaScriptFile('editor.js', ['minimize' => true], 'smf_editor'); Theme::loadJavaScriptFile('jquery.sceditor.bbcode.min.js', [], 'smf_sceditor_bbcode'); Theme::loadJavaScriptFile('jquery.sceditor.smf.js', ['minimize' => true], 'smf_sceditor_smf'); - $scExtraLangs = ' - $.sceditor.locale["' . Lang::getTxt('lang_dictionary', file: 'General') . '"] = { - "Width (optional):": "' . Lang::getTxt('width', var: 'editortxt') . '", - "Height (optional):": "' . Lang::getTxt('height', var: 'editortxt') . '", - "Insert": "' . Lang::getTxt('insert', var: 'editortxt') . '", - "Description (optional):": "' . Lang::getTxt('description', var: 'editortxt') . '", - "Rows:": "' . Lang::getTxt('rows', var: 'editortxt') . '", - "Cols:": "' . Lang::getTxt('cols', var: 'editortxt') . '", - "URL:": "' . Lang::getTxt('url', var: 'editortxt') . '", - "E-mail:": "' . Lang::getTxt('email', var: 'editortxt') . '", - "Video URL:": "' . Lang::getTxt('video_url', var: 'editortxt') . '", - "More": "' . Lang::getTxt('more', var: 'editortxt') . '", - "Close": "' . Lang::getTxt('close', var: 'editortxt') . '", - dateFormat: "' . Lang::getTxt('dateformat', var: 'editortxt') . '" - };'; - - Theme::addInlineJavaScript($scExtraLangs, true); + Theme::addInlineJavaScript( + ' + sceditor.locale["' . Lang::$txt['lang_dictionary'] . '"] = { + "Width (optional):": "' . Lang::$editortxt['width'] . '", + "Height (optional):": "' . Lang::$editortxt['height'] . '", + "Insert": "' . Lang::$editortxt['insert'] . '", + "Description (optional):": "' . Lang::$editortxt['description'] . '", + "Rows:": "' . Lang::$editortxt['rows'] . '", + "Cols:": "' . Lang::$editortxt['cols'] . '", + "URL:": "' . Lang::$editortxt['url'] . '", + "E-mail:": "' . Lang::$editortxt['email'] . '", + "Video URL:": "' . Lang::$editortxt['video_url'] . '", + "More": "' . Lang::$editortxt['more'] . '", + "Close": "' . Lang::$editortxt['close'] . '", + dateFormat: "' . Lang::$editortxt['dateformat'] . '" + };', + true, + ); Theme::addInlineJavaScript(' var smf_smileys_url = \'' . Theme::$current->settings['smileys_url'] . '\'; @@ -464,8 +751,8 @@ protected function buildButtons(): void Utils::$context['richedit_buttons'] = [ 'save_draft' => [ 'type' => 'submit', - 'value' => Lang::getTxt('draft_save', file: 'Drafts'), - 'onclick' => !empty(Utils::$context['drafts_save']) ? 'submitThisOnce(this);' : (!empty(Utils::$context['drafts_save']) ? 'return confirm(' . Utils::escapeJavaScript(Lang::getTxt('draft_save_note', file: 'Drafts')) . ') && submitThisOnce(this);' : ''), + 'value' => Lang::$txt['draft_save'], + 'onclick' => !empty(Utils::$context['drafts_save']) ? 'return confirm(' . Utils::escapeJavaScript(Lang::$txt['draft_save_note']) . ');' : '', 'accessKey' => 'd', 'show' => !empty(Utils::$context['drafts_save']), ], @@ -488,12 +775,24 @@ protected function buildButtons(): void } /** - * Initialize the BBC button toolbar, if not already loaded. + * Initializes and constructs the BBC (Bulletin Board Code) button toolbar for the editor. + * + * This method sets up the available BBC tags and their corresponding actions for the editor. + * It manages which tags are enabled, disabled, and how they appear in the toolbar. The method + * also allows integrations or modifications via hooks for custom functionality. + * + * Behavior: + * 1. Links key context variables (e.g., `bbc_tags`, `disabled_tags`, `bbc_toolbar`) for use in the editor. + * 2. Initializes the BBC tags with predefined options, such as the tag's code, description, and icon. + * 3. Maps specific BBC tags to SCEditor commands for seamless functionality. + * 4. Dynamically generates a list of disabled buttons based on configuration settings. + * 5. Applies integration hooks (`integrate_bbc_buttons`) to allow modifications to BBC buttons. + * 6. Assembles the toolbar structure based on the active and disabled tags. */ protected function buildBbcToolbar(): void { - if (!empty(self::$bbc_tags)) { - return; + if (self::$bbc_tags == []) { + self::initBbcTags(); } Utils::$context['bbc_tags'] = &self::$bbc_tags; @@ -501,165 +800,7 @@ protected function buildBbcToolbar(): void Utils::$context['bbc_toolbar'] = &self::$bbc_toolbar; Utils::$context['bbcodes_handlers'] = &self::$bbc_handlers; - // The below array makes it dead easy to add images to this control. Add it to the array and everything else is done for you! - // Note: 'before' and 'after' are deprecated as of SMF 2.1. Instead, use a separate JS file to configure the functionality of your toolbar buttons. - /* - array( - 'code' => 'b', // Required - 'description' => Lang::getTxt('bold', var: 'editortxt'), // Required - 'image' => 'bold', // Optional - 'before' => '[b]', // Deprecated - 'after' => '[/b]', // Deprecated - ), - */ - self::$bbc_tags[] = [ - [ - 'code' => 'bold', - 'description' => Lang::getTxt('bold', var: 'editortxt'), - ], - [ - 'code' => 'italic', - 'description' => Lang::getTxt('italic', var: 'editortxt'), - ], - [ - 'code' => 'underline', - 'description' => Lang::getTxt('underline', var: 'editortxt'), - ], - [ - 'code' => 'strike', - 'description' => Lang::getTxt('strikethrough', var: 'editortxt'), - ], - [ - 'code' => 'superscript', - 'description' => Lang::getTxt('superscript', var: 'editortxt'), - ], - [ - 'code' => 'subscript', - 'description' => Lang::getTxt('subscript', var: 'editortxt'), - ], - [], - [ - 'code' => 'pre', - 'description' => Lang::getTxt('preformatted_text', var: 'editortxt'), - ], - [ - 'code' => 'left', - 'description' => Lang::getTxt('align_left', var: 'editortxt'), - ], - [ - 'code' => 'center', - 'description' => Lang::getTxt('center', var: 'editortxt'), - ], - [ - 'code' => 'right', - 'description' => Lang::getTxt('align_right', var: 'editortxt'), - ], - [ - 'code' => 'justify', - 'description' => Lang::getTxt('justify', var: 'editortxt'), - ], - [], - [ - 'code' => 'font', - 'description' => Lang::getTxt('font_name', var: 'editortxt'), - ], - [ - 'code' => 'size', - 'description' => Lang::getTxt('font_size', var: 'editortxt'), - ], - [ - 'code' => 'color', - 'description' => Lang::getTxt('font_color', var: 'editortxt'), - ], - ]; - - if (empty(Config::$modSettings['disable_wysiwyg'])) { - self::$bbc_tags[count(self::$bbc_tags) - 1][] = [ - 'code' => 'removeformat', - 'description' => Lang::getTxt('remove_formatting', var: 'editortxt'), - ]; - } - - self::$bbc_tags[] = [ - [ - 'code' => 'floatleft', - 'description' => Lang::getTxt('float_left', var: 'editortxt'), - ], - [ - 'code' => 'floatright', - 'description' => Lang::getTxt('float_right', var: 'editortxt'), - ], - [], - [ - 'code' => 'youtube', - 'description' => Lang::getTxt('insert_youtube_video', var: 'editortxt'), - ], - [ - 'code' => 'image', - 'description' => Lang::getTxt('insert_image', var: 'editortxt'), - ], - [ - 'code' => 'email', - 'description' => Lang::getTxt('insert_email', var: 'editortxt'), - ], - [ - 'code' => 'link', - 'description' => Lang::getTxt('insert_link', var: 'editortxt'), - ], - [ - 'code' => 'unlink', - 'description' => Lang::getTxt('unlink', var: 'editortxt'), - ], - [], - [ - 'code' => 'table', - 'description' => Lang::getTxt('insert_table', var: 'editortxt'), - ], - [ - 'code' => 'code', - 'description' => Lang::getTxt('code', var: 'editortxt'), - ], - [ - 'image' => 'tt', - 'code' => 'tt', - 'description' => Lang::getTxt('tt', var: 'editortxt'), - ], - [ - 'code' => 'quote', - 'description' => Lang::getTxt('insert_quote', var: 'editortxt'), - ], - [], - [ - 'code' => 'bulletlist', - 'description' => Lang::getTxt('bullet_list', var: 'editortxt'), - ], - [ - 'code' => 'orderedlist', - 'description' => Lang::getTxt('numbered_list', var: 'editortxt'), - ], - [ - 'code' => 'horizontalrule', - 'description' => Lang::getTxt('insert_horizontal_rule', var: 'editortxt'), - ], - [ - 'image' => 'heading', - 'code' => 'heading', - 'description' => Lang::getTxt('heading', var: 'editortxt'), - ], - [], - [ - 'code' => 'maximize', - 'description' => Lang::getTxt('maximize', var: 'editortxt'), - ], - ]; - - if (empty(Config::$modSettings['disable_wysiwyg'])) { - self::$bbc_tags[count(self::$bbc_tags) - 1][] = [ - 'code' => 'source', - 'description' => Lang::getTxt('view_source', var: 'editortxt'), - ]; - } - + // Map BBC tags to SCEditor commands. $editor_tag_map = [ 'b' => 'bold', 'i' => 'italic', @@ -672,12 +813,14 @@ protected function buildBbcToolbar(): void 'hr' => 'horizontalrule', ]; - // Allow mods to modify BBC buttons. - IntegrationHook::call('integrate_bbc_buttons', [&self::$bbc_tags, &$editor_tag_map, &self::$disabled_tags]); - // Generate a list of buttons that shouldn't be shown - this should be the fastest way to do this. $disabled_bbc = !empty(Config::$modSettings['disabledBBC']) ? explode(',', Config::$modSettings['disabledBBC']) : []; + if (empty(Config::$modSettings['disable_wysiwyg'])) { + self::$disabled_tags['removeformat'] = true; + self::$disabled_tags['orderedlist'] = true; + } + foreach ($disabled_bbc as $tag) { $tag = trim($tag); @@ -691,66 +834,52 @@ protected function buildBbcToolbar(): void self::$disabled_tags['floatright'] = true; } - foreach ($editor_tag_map as $tag_name => $tag_alias) { - if ($tag === $tag_name) { - self::$disabled_tags[$tag_alias] = true; - } - } - - self::$disabled_tags[$tag] = true; + self::$disabled_tags[$editor_tag_map[$tag] ?? $tag] = true; } - $bbcodes_styles = ''; + // Allow mods to modify BBC buttons. + IntegrationHook::call('integrate_bbc_buttons', [&self::$bbc_tags, &$editor_tag_map, &self::$disabled_tags]); + + $group = 0; foreach (self::$bbc_tags as $row => $tag_row) { if (!isset(self::$bbc_toolbar[$row])) { self::$bbc_toolbar[$row] = []; } - $tags_row = []; - foreach ($tag_row as $tag) { - if (empty($tag['code'])) { - self::$bbc_toolbar[$row][] = implode(',', $tags_row); - $tags_row = []; - } elseif (empty(self::$disabled_tags[$tag['code']])) { - $tags_row[] = $tag['code']; - - // If we have a custom button image, set it now. - if (isset($tag['image'])) { - $bbcodes_styles .= ' - .sceditor-button-' . $tag['code'] . ' div { - background: url(\'' . Theme::$current->settings['default_theme_url'] . '/images/bbc/' . $tag['image'] . '.png\'); - }'; - } + if (isset($tag['code']) && !isset(self::$disabled_tags[$tag['code']])) { + $this_tag = $editor_tag_map[$tag['code']] ?? $tag['code']; + self::$bbc_toolbar[$row][$group][] = $this_tag; - // Set the tooltip and possibly the command info - self::$bbc_handlers .= ' - sceditor.command.set(' . Utils::escapeJavaScript($tag['code']) . ', { - tooltip: ' . Utils::escapeJavaScript($tag['description'] ?? $tag['code']); - - // Legacy support for 2.0 BBC mods - if (isset($tag['before'])) { - self::$bbc_handlers .= ', - exec: function () { - this.insertText(' . Utils::escapeJavaScript($tag['before']) . (isset($tag['after']) ? ', ' . Utils::escapeJavaScript($tag['after']) : '') . '); - }, - txtExec: [' . Utils::escapeJavaScript($tag['before']) . (isset($tag['after']) ? ', ' . Utils::escapeJavaScript($tag['after']) : '') . ']'; + if (isset($tag['before']) || isset($tag['image'])) { + self::$bbc_handlers[$this_tag] = $tag; } - - self::$bbc_handlers .= ' - });'; + } else { + $group++; } } - - if (!empty($tags_row)) { - self::$bbc_toolbar[$row][] = implode(',', $tags_row); - } } + } - if (!empty($bbcodes_styles)) { - Theme::addInlineCss($bbcodes_styles); - } + /** + * Recursively implodes an array + * + * @param string[] $glue list of values that glue elements together + * @param array $pieces multi-dimensional array to recursively implode + * @param int $counter internal + * + * @return string imploded array + */ + protected function implodeRecursive(array $glue, array $pieces, int $counter = 0): string + { + return implode( + $glue[$counter++], + array_map( + fn($v) => is_array($v) ? $this->implodeRecursive($glue, $v, $counter) : $v, + $pieces, + ), + ); } /** @@ -758,11 +887,11 @@ protected function buildBbcToolbar(): void */ protected function buildSmileysToolbar(): void { - if ($this->disable_smiley_box || !empty(self::$smileys_toolbar['postform']) || !empty(self::$smileys_toolbar['popup'])) { + if ($this->disable_smiley_box || self::$smileys_toolbar != []) { return; } - Utils::$context['smileys'] = self::$smileys_toolbar; + Utils::$context['smileys'] = &self::$smileys_toolbar; if (User::$me->smiley_set != 'none') { // Cache for longer when customized smiley codes aren't enabled @@ -785,26 +914,9 @@ protected function buildSmileysToolbar(): void ); while ($row = Db::$db->fetch_assoc($request)) { - if (Lang::txtExists('icon_' . strtolower($row['description']), file: 'General')) { - $row['description'] = Utils::htmlspecialchars(Lang::getTxt('icon_' . strtolower($row['description']), file: 'General')); - } else { - $row['description'] = Utils::htmlspecialchars($row['description']); - } - - self::$smileys_toolbar[empty($row['hidden']) ? 'postform' : 'popup'][$row['smiley_row']]['smileys'][] = $row; + self::$smileys_toolbar[] = $row; } Db::$db->free_result($request); - - foreach (self::$smileys_toolbar as $section => $smiley_rows) { - foreach ($smiley_rows as $rowIndex => $smileys) { - self::$smileys_toolbar[$section][$rowIndex]['smileys'][count($smileys['smileys']) - 1]['isLast'] = true; - } - - if (!empty($smiley_rows)) { - self::$smileys_toolbar[$section][count($smiley_rows) - 1]['isLast'] = true; - } - } - CacheApi::put('posting_smileys_' . User::$me->smiley_set, self::$smileys_toolbar, $cache_time); } else { self::$smileys_toolbar = $temp; @@ -813,98 +925,105 @@ protected function buildSmileysToolbar(): void } /** - * Initialize the smiley toolbar, if enabled and not already loaded. + * Configures the options for the SCEditor instance and applies + * necessary plugins, styles, and other customizations. + * + * This method sets default options for the SCEditor, including dimensions, + * style paths, plugins, toolbar configuration, emoticons, and localization + * settings. Additionally, it allows for customization via integration hooks + * and external editor options provided as arguments. + * + * @param array $editorOptions An associative array of editor options provided externally. + * + * Behavior: + * 1. Initializes default plugins, enabling `autolinker` if URL auto-linking is enabled. + * 2. Configures SCEditor options such as dimensions, toolbar, colors, fonts, and parsing behavior. + * 3. Sets emoticons and their display behavior based on smiley toolbar configurations. + * 4. Provides integration hooks to allow further modification by mods. */ - protected function setSCEditorOptions(): void + protected function setSCEditorOptions(array $editorOptions) { - // Set up the SCEditor options + if (!isset($editorOptions['plugins'])) { + $editorOptions['plugins'] = []; + } + + if (!empty(Config::$modSettings['autoLinkUrls']) && empty($editorOptions['disable_url_autolinking'])) { + $editorOptions['plugins'][] = 'autolinker'; + Autolinker::createJavaScriptFile(); + Theme::loadJavaScriptFile('sceditor.plugins.autolinker.js', ['minimize' => true], 'smf_autolinker'); + } + $this->sce_options = [ 'width' => $this->width ?? '100%', 'height' => $this->height ?? '250px', 'style' => Theme::$current->settings[file_exists(Theme::$current->settings['theme_dir'] . '/css/jquery.sceditor.default.css') ? 'theme_url' : 'default_theme_url'] . '/css/jquery.sceditor.default.css' . Utils::$context['browser_cache'], + 'autoUpdate' => true, 'emoticonsCompat' => true, - 'colors' => 'black,maroon,brown,green,navy,grey,red,orange,teal,blue,white,hotpink,yellow,limegreen,purple', + 'emoticons' => [], + 'emoticonsEnabled' => !$this->disable_smiley_box, + 'emoticonsRoot' => Theme::$current->settings['smileys_url'] . '/', + 'colors' => [ + ['black', Lang::$editortxt['black']], + ['red', Lang::$editortxt['red']], + ['yellow', Lang::$editortxt['yellow']], + ['pink', Lang::$editortxt['pink']], + ['green', Lang::$editortxt['green']], + ['orange', Lang::$editortxt['orange']], + ['purple', Lang::$editortxt['purple']], + ['blue', Lang::$editortxt['blue']], + ['beige', Lang::$editortxt['beige']], + ['brown', Lang::$editortxt['brown']], + ['teal', Lang::$editortxt['teal']], + ['navy', Lang::$editortxt['navy']], + ['maroon', Lang::$editortxt['maroon']], + ['limegreen', Lang::$editortxt['lime_green']], + ['white', Lang::$editortxt['white']], + ], + 'fonts' => 'Arial,Arial Black,Comic Sans MS,Courier New,Georgia,Impact,Sans-serif,Serif,Times New Roman,Trebuchet MS,Verdana', + 'icons' => 'monocons', 'format' => 'bbcode', - 'plugins' => '', + 'plugins' => 'smf,' . implode(',', $editorOptions['plugins'] ?? []), + 'toolbar' => $this->implodeRecursive(['||', '|', ','], self::$bbc_toolbar), + 'customTextualCommands' => self::$bbc_handlers, + 'startInSourceMode' => !$this->rich_active, 'bbcodeTrim' => false, + 'resizeWidth' => false, + 'resizeMaxHeight' => -1, + 'locale' => $this->locale ?? 'en', + 'rtl' => !empty(Utils::$context['right_to_left']), + 'commandsWithDropdown' => [ + 'color' => true, + 'heading' => true, + 'font' => true, + 'size' => true, + ], + 'textOnlyCommands' => [], + 'commandsWithText' => [], + 'parserOptions' => [ + 'txtVars' => [ + 'code' => Lang::$txt['code'], + ], + ], ]; - if (!empty(Config::$modSettings['autoLinkUrls'])) { - $this->sce_options['plugins'] = 'autolinker'; - Autolinker::createJavaScriptFile(); - Theme::loadJavaScriptFile('autolinker.js', ['minimize' => true], 'smf_autolinker'); - } - - if (!empty($this->locale)) { - $this->sce_options['locale'] = $this->locale; - } - - if (!empty(Utils::$context['right_to_left'])) { - $this->sce_options['rtl'] = true; + if (isset($editorOptions['options'])) { + $this->sce_options = array_merge_recursive($this->sce_options, $editorOptions['options']); } - if ($this->id != 'quickReply') { - $this->sce_options['autofocus'] = true; - } - - $this->sce_options['emoticons'] = []; - $this->sce_options['emoticonsDescriptions'] = []; - $this->sce_options['emoticonsEnabled'] = false; - - if ((!empty(self::$smileys_toolbar['postform']) || !empty(self::$smileys_toolbar['popup'])) && !$this->disable_smiley_box) { - $this->sce_options['emoticonsEnabled'] = true; - $this->sce_options['emoticons']['dropdown'] = []; - $this->sce_options['emoticons']['popup'] = []; - - $count_locations = count(self::$smileys_toolbar); - - foreach (self::$smileys_toolbar as $location => $smiley_rows) { - $count_locations--; - - unset($smiley_location); - - if ($location == 'postform') { - $smiley_location = &$this->sce_options['emoticons']['dropdown']; - } elseif ($location == 'popup') { - $smiley_location = &$this->sce_options['emoticons']['popup']; - } - - $num_rows = count($smiley_rows); - - // This is needed because otherwise the editor will remove all the duplicate (empty) keys and leave only 1 additional line - $empty_placeholder = 0; - - foreach ($smiley_rows as $smiley_row) { - foreach ($smiley_row['smileys'] as $smiley) { - $smiley_location[$smiley['code']] = Theme::$current->settings['smileys_url'] . '/' . $smiley['filename']; - - $this->sce_options['emoticonsDescriptions'][$smiley['code']] = $smiley['description']; - } - - if (empty($smiley_row['isLast']) && $num_rows != 1) { - $smiley_location['-' . $empty_placeholder++] = ''; - } - } - } - } - - $this->sce_options['parserOptions']['txtVars'] = [ - 'code' => Lang::getTxt('code', file: 'General'), - ]; - - $this->sce_options['toolbar'] = ''; - - if (!empty(Config::$modSettings['enableBBC'])) { - $count_tags = count(self::$bbc_tags); - - foreach (self::$bbc_toolbar as $i => $buttonRow) { - $this->sce_options['toolbar'] .= implode('|', $buttonRow); - - $count_tags--; - - if (!empty($count_tags)) { - $this->sce_options['toolbar'] .= '||'; - } + if ($this->sce_options['emoticonsEnabled']) { + $translations = [ + 0 => 'dropdown', + 2 => 'more', + ]; + $prevRowIndex = 0; + + foreach (self::$smileys_toolbar as $smiley) { + $this->sce_options['emoticons'][$translations[$smiley['hidden']]][$smiley['code']] = [ + 'newRow' => $smiley['smiley_row'] != $prevRowIndex, + 'url' => $smiley['filename'], + 'tooltip' => Utils::htmlspecialchars(Lang::$txt['icon_' . strtolower($smiley['description'])] ?? $smiley['description']), + ]; + $prevRowIndex = $smiley['smiley_row']; } } diff --git a/Themes/default/Display.template.php b/Themes/default/Display.template.php index 0117267acd..13f0c2c71c 100644 --- a/Themes/default/Display.template.php +++ b/Themes/default/Display.template.php @@ -931,17 +931,7 @@ function template_quickreply() '; } - echo ' - ', template_control_richedit(Utils::$context['post_box_name'], 'smileyBox_message', 'bbcBox_message'), ' - '; + template_control_richedit('quickReply', 'smileyBox_message', 'bbcBox_message'); // Is visual verification enabled? if (Utils::$context['require_verification']) @@ -954,7 +944,7 @@ function insertQuoteFast(messageid) // Finally, the submit buttons. echo ' - ', template_control_richedit_buttons(Utils::$context['post_box_name']), ' + ', template_control_richedit_buttons('quickReply'), ' '; echo ' diff --git a/Themes/default/GenericControls.template.php b/Themes/default/GenericControls.template.php index a88ba09d81..686870d52a 100644 --- a/Themes/default/GenericControls.template.php +++ b/Themes/default/GenericControls.template.php @@ -18,69 +18,47 @@ use SMF\Verifier; /** - * This function displays all the stuff you get with a richedit box - BBC, smileys, etc. + * Renders a rich-text editor, including BBC buttons and smileys if enabled. * - * @param string $editor_id The editor ID - * @param null|bool $smileyContainer If null, hides the smiley section regardless of settings - * @param null|bool $bbcContainer If null, hides the bbcode buttons regardless of settings + * This function sets up a textarea as a rich-text editor using SCEditor. + * The `$smiley_container` and `$bbc_container` parameters control the visibility + * and source of smiley and BBC containers, respectively. + * + * @param string $editor_id The unique ID of the editor. + * @param null|bool|string $smiley_container Controls the smiley container: + * - `null`: Hides the smiley section. + * - `true`: Generates the container dynamically using JavaScript. + * - `string`: Specifies the HTML element ID for the smiley container. + * @param null|bool|string $bbc_container Controls the BBC container: + * - `null`: Hides the BBC buttons. + * - `true`: Generates the container dynamically using JavaScript. + * - `string`: Specifies the HTML element ID for the BBC container. */ -function template_control_richedit($editor_id, $smileyContainer = null, $bbcContainer = null) +function template_control_richedit(string $editor_id, null|bool|string $smiley_container = null, null|bool|string $bbc_container = null): void { $editor_context = Editor::$loaded[$editor_id]; - if ($smileyContainer === null) - $editor_context['sce_options']['emoticonsEnabled'] = false; - - if ($bbcContainer === null) - $editor_context['sce_options']['toolbar'] = ''; - echo ' - -
      - + '; } /** - * This template shows the form buttons at the bottom of the editor + * Renders the buttons section below a rich-text editor. * - * @param string $editor_id The editor ID + * Displays form buttons such as "Post" or "Preview" and integrates + * functionality like auto-saving drafts if enabled. + * + * @param string $editor_id The unique ID of the editor for which buttons are displayed. + * + * @return void */ -function template_control_richedit_buttons($editor_id) +function template_control_richedit_buttons(string $editor_id): void { $editor_context = Editor::$loaded[$editor_id]; @@ -92,7 +70,7 @@ function template_control_richedit_buttons($editor_id) foreach (Utils::$context['richedit_buttons'] as $name => $button) { if ($name == 'preview') { - $button['value'] = isset($editor_context['labels']['preview_button']) ? $editor_context['labels']['preview_button'] : $button['value']; + $button['value'] = $editor_context['labels']['preview_button'] ?? $button['value']; $button['show'] = $editor_context['preview_type']; } @@ -103,15 +81,15 @@ function template_control_richedit_buttons($editor_id) } echo ' - + '; - // Start an instance of the auto saver if it's enabled + // Include auto-save feature if drafts are enabled. if (!empty(Utils::$context['drafts_save']) && !empty(Utils::$context['drafts_autosave'])) echo ' - + '; } /** - * This template displays a verification form + * Displays a verification form with CAPTCHA or question-based challenges. + * + * Used to validate user input for forms, supporting various verification + * mechanisms such as CAPTCHA images, reCAPTCHA, and custom questions. + * + * @param int|string $verify_id The unique identifier for the verification control. + * @param string $display_type Determines how to display items: + * - `'single'`: Displays one item at a time (e.g., in a loop). + * - `'all'`: Displays all items together. + * @param bool $reset Whether to reset the internal tracking counter. * - * @param int|string $verify_id The verification control ID - * @param string $display_type What type to display. Can be 'single' to only show one verification option or 'all' to show all of them - * @param bool $reset Whether to reset the internal tracking counter - * @return bool False if there's nothing else to show, true if $display_type is 'single', nothing otherwise + * @return bool Returns `false` if no items are left to display, `true` if displaying a single item, and `void` otherwise. */ -function template_control_verification($verify_id, $display_type = 'all', $reset = false) +function template_control_verification(int|string $verify_id, string $display_type = 'all', bool $reset = false): bool { $verify_context = Verifier::$loaded[$verify_id]; - // Keep track of where we are. + // Reset tracking if necessary. if (empty($verify_context->tracking) || $reset) $verify_context->tracking = 0; - // How many items are there to display in total. $total_items = count($verify_context->questions) + ($verify_context->show_visual || $verify_context->can_recaptcha ? 1 : 0); - // If we've gone too far, stop. + // Stop if all items are processed. if ($verify_context->tracking > $total_items) return false; diff --git a/Themes/default/Post.template.php b/Themes/default/Post.template.php index 552b88cd9e..0c53a2265f 100644 --- a/Themes/default/Post.template.php +++ b/Themes/default/Post.template.php @@ -28,14 +28,7 @@ function template_main() // Start with message icons - and any missing from this theme. echo ' - var icon_urls = {'; - - foreach (Utils::$context['icons'] as $icon) - echo ' - \'', $icon['value'], '\': \'', $icon['url'], '\'', $icon['is_last'] ? '' : ','; - - echo ' - };'; + var icon_urls = ', json_encode(array_column(Utils::$context['icons'], 'url', 'value'), JSON_UNESCAPED_SLASHES), ';'; // If we are making a calendar event we want to ensure we show the current days in a month etc... this is done here. if (Utils::$context['make_event']) @@ -203,8 +196,7 @@ function template_main() } // Show the actual posting area... - echo ' - ', template_control_richedit(Utils::$context['post_box_name'], 'smileyBox_message', 'bbcBox_message'); + template_control_richedit('message', 'smileyBox_message', 'bbcBox_message'); // Show attachments. if (!empty(Utils::$context['current_attachments']) || Utils::$context['can_post_attachment']) @@ -412,7 +404,7 @@ function template_main() // Finally, the submit buttons. echo ' - ', template_control_richedit_buttons(Utils::$context['post_box_name']); + ', template_control_richedit_buttons('message'); echo ' @@ -467,7 +459,7 @@ function template_main() sErrorsListContainerID: "error_list", sCaptionContainerID: "caption_%ID%", sNewImageContainerID: "image_new_%ID%", - sPostBoxContainerID: ', Utils::escapeJavaScript(Utils::$context['post_box_name']), ', + sPostBoxContainerID: ', Utils::escapeJavaScript('message'), ', bMakePoll: ', Utils::$context['make_poll'] ? 'true' : 'false', ', sTxtPreviewTitle: ', Utils::escapeJavaScript(Lang::getTxt('preview_title', file: 'General')), ', sTxtPreviewFetch: ', Utils::escapeJavaScript(Lang::getTxt('preview_fetch', file: 'General')), ', diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 1f62757ea7..16b634a336 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -229,11 +229,6 @@ img, input, select, textarea { #chrome input { font-family: "Segoe UI", "Helvetica Neue", Arial, "Liberation Sans", sans-serif; } -/* The following is necessary */ -textarea { - font-size: 1em; -} - /* Use a consistent monospace font everywhere */ .monospace, .bbc_code, .bbc_tt, .phpcode, pre { font-family: "DejaVu Sans Mono", Menlo, Monaco, Consolas, monospace; @@ -4250,25 +4245,6 @@ ul.post_options li { .post_verification #verification_control { margin: 4px 0 4px 12px; } -/* The BBC buttons */ -#bbcBox_message { - margin: 10px 6px; -} -#bbcBox_message div { - margin: 2px 0; - vertical-align: top; -} -#bbcBox_message div img { - margin: 0 1px 0 0; - vertical-align: top; -} -#bbcBox_message select { - margin: 0 2px; -} -/* The smiley strip */ -#smileyBox_message { - margin: 6px; -} /* All the signatures used in the forum. */ .signature, .attachments, .under_message, .custom_fields_above_signature, diff --git a/Themes/default/css/jquery.sceditor.css b/Themes/default/css/jquery.sceditor.css index 9bb6a86bd7..13e4c75451 100644 --- a/Themes/default/css/jquery.sceditor.css +++ b/Themes/default/css/jquery.sceditor.css @@ -8,16 +8,23 @@ * SCEditor is licensed under the MIT license: * https://opensource.org/licenses/mit-license.php */ -div.sceditor-grip, +.sceditor-grip { + border-top: 1px solid var(--input-border-color); + cursor: s-resize; + padding-block: 4px; +} +.sceditor-grip::before { + background: linear-gradient(#0000 0, var(--input-border-color) 2px, #0000 3px, var(--input-border-color) 5px, #0000 6px, var(--input-border-color) 8px, #0000 9px); + content: ""; + display: block; + height: 9px; +} .sceditor-button div { background-image: url("../images/icons/editor_sprite.png"); background-repeat: no-repeat; width: 16px; height: 16px; } -.sceditor-button-flash div { - background-position: 0px -712px; -} .sceditor-button-youtube div { background-position: 0px 0px; } @@ -108,8 +115,8 @@ div.sceditor-grip, .sceditor-button-font div { background-position: 0px -464px; } -.sceditor-button-emoticon div { - background-position: 0px -480px; +.sceditor-insertemoticon img { + margin: 4px; } .sceditor-button-email div { background-position: 0px -496px; @@ -138,90 +145,21 @@ div.sceditor-grip, .sceditor-button-bold div { background-position: 0px -624px; } -div.sceditor-grip { - background-position: 0px -640px; - width: 10px; - height: 10px; -} -.rtl div.sceditor-grip { - background-position: 0px -650px; - width: 10px; - height: 10px; -} -/** - * SCEditor - * https://www.sceditor.com/ - * - * Copyright (C) 2011-12, Sam Clarke (samclarke.com) - * - * SCEditor is licensed under the MIT license: - * https://opensource.org/licenses/mit-license.php - */ -/*--------------------------------------------------- - LESS Elements 0.7 - --------------------------------------------------- - A set of useful LESS mixins - More info at: http://lesselements.com - ---------------------------------------------------*/ .sceditor-container { - display: -ms-flexbox; + position: relative; display: flex; - -ms-flex-direction: column; flex-direction: column; - position: relative; - background: #fff; - border: 1px solid #d9d9d9; - font-size: 13px; - font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; - color: #222; - line-height: 1; - font-weight: bold; - border-radius: 4px 4px 0 0; - background-clip: padding-box; - min-width: 100%; - max-width: 100%; -} -.sceditor-container *, -.sceditor-container *::before, -.sceditor-container *::after { - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; -} -.sceditor-container, -.sceditor-container div, -div.sceditor-dropdown, -div.sceditor-dropdown div { - padding: 0; - margin: 0; - z-index: 5; + border: var(--input-border-width) var(--input-border-style) var(--input-border-color); } .sceditor-container iframe, .sceditor-container textarea { - line-height: normal; + flex: 1 1 0%; border: 0; outline: none; - font-size: 14px; - color: #111; - box-sizing: border-box; - padding: 0 5px; - margin: 0px; + padding: 0; + margin: 0; + min-height: 0; resize: none; - background: #fff; - display: flex; - flex-basis: 250px; - flex-grow: 1; - min-width: 100%; - max-width: 100%; - height: 250px; - min-height: 1px; - max-height: 100%; -} -.sceditor-container iframe { - font-family: Verdana, Arial, Helvetica, sans-serif; -} -.sceditor-container textarea { - font-family: "DejaVu Sans Mono", Monaco, Consolas, monospace; } div.sceditor-dnd-cover { position: absolute; @@ -244,26 +182,12 @@ div.sceditor-dnd-cover p { div.sceditor-resize-cover { position: absolute; top: 0; - left: 0; - background: #000; + left: 0; + background: currentColor; + opacity: 0.3; + cursor: s-resize; width: 100%; height: 100%; - z-index: 10; - opacity: 0.3; -} -div.sceditor-grip { - overflow: hidden; - width: 10px; - height: 10px; - cursor: pointer; - position: absolute; - bottom: 0; - right: 0; - z-index: 3; - line-height: 0; -} -div.sceditor-grip.has-icon { - background-image: none; } .sceditor-maximize { position: fixed; @@ -272,7 +196,6 @@ div.sceditor-grip.has-icon { height: 100% !important; width: 100% !important; border-radius: 0; - background-clip: padding-box; z-index: 2000; } html.sceditor-maximize, @@ -283,238 +206,81 @@ body.sceditor-maximize { margin: 0; overflow: hidden; } -.ie6.sceditor-maximize { - position: absolute; -} .sceditor-maximize div.sceditor-grip { display: none; } -.sceditor-maximize div.sceditor-toolbar { - border-radius: 0; - background-clip: padding-box; -} -div.sceditor-smileyPopup, div.sceditor-dropdown { - border: 1px solid #ccc; - background: #fff; - color: #333; - z-index: 4000; - padding: 10px; - line-height: 1; - border-radius: 2px; - background-clip: padding-box; - box-shadow: 1px 2px 4px rgba(0, 0, 0, .2); - overflow-y: auto; -} - -div.sceditor-smileyPopup { - top: unset; - left: 0; - right: 0; - transform: unset; - position: absolute; - min-height: 100px; - min-width: 250px; - margin-inline: auto; - display: flex; - box-sizing: border-box; - max-height: 215px; - max-width: 450px; -} -div.sceditor-smileyPopup #sceditor-popup { - width: 100%; - display: flex; - flex-direction: column; -} -div.sceditor-smileyPopup #sceditor-popup div#sceditor-popup-smiley { - flex-grow: 1; - align-self: flex-start; -} -div.sceditor-smileyPopup #sceditor-popup span.button { - margin-top: 20px; - align-self: center; -} -/** - * Dropdown styleing - */ -div.sceditor-dropdown { +.sceditor-dropdown { position: absolute; border: 1px solid #ccc; background: #fff; - color: #333; z-index: 4000; - padding: 10px; - line-height: 1; border-radius: 2px; - background-clip: padding-box; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2); } -div.sceditor-dropdown a, -div.sceditor-dropdown a:link { - color: #333; +.sceditor-dropdown:not(.sceditor-font-picker, .sceditor-item-picker) > div { + display: grid; + grid-template-columns: 20em 20em; + gap: 0.5em; + padding: 0.5em; } -div.sceditor-dropdown form { - margin: 0; +.sceditor-dropdown:not(.sceditor-font-picker, .sceditor-item-picker, .sceditor-insertimage) div, +.sceditor-insertimage > div > :first-child, +.sceditor-insertimage > div > :last-child { + grid-column: span 2; +} +.sceditor-dropdown:not(.sceditor-font-picker, .sceditor-item-picker, .sceditor-insertimage) input[type=text], +.sceditor-insertimage > div > :first-child input { + width: 90%; } -div.sceditor-dropdown label { +.sceditor-dropdown label { display: block; - font-weight: bold; color: #3c3c3c; padding: 4px 0; } -div.sceditor-dropdown input, -div.sceditor-dropdown textarea { - font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; - outline: 0; - padding: 4px; - border: 1px solid #ccc; - border-top-color: #888; - margin: 0 0 .75em; - border-radius: 1px; - background-clip: padding-box; -} -div.sceditor-dropdown textarea { - padding: 6px; -} -div.sceditor-dropdown input:focus, -div.sceditor-dropdown textarea:focus { - border-color: #aaa; - border-top-color: #666; - box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1); -} -div.sceditor-dropdown .button { - font-weight: bold; - color: #444; - padding: 0 12px; - background: #ececec; - border: solid 1px #ccc; - border-radius: 2px; - background-clip: padding-box; - cursor: pointer; - margin: .3em 0 0; -} -div.sceditor-dropdown .button:hover { - background: #f3f3f3; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); -} -div.sceditor-font-picker, -div.sceditor-fontsize-picker, -div.sceditor-format { - padding: 6px 0; -} -div.sceditor-emoticons, -div.sceditor-more-emoticons, -div.sceditor-color-picker { - padding: 0; -} -.sceditor-pastetext textarea { - border: 1px solid #bbb; - width: 20em; -} -.sceditor-emoticons img, -.sceditor-more-emoticons img { - padding: 0; - cursor: pointer; - margin: 2px; -} -.sceditor-insertemoticon { - padding: 4px !important; -} - -.sceditor-insertemoticon > div, .sceditor-insertemoticon > center { - display: inline-block; - vertical-align: middle; -} -.sceditor-more { - border-top: 1px solid #bbb; - display: inline-block; - cursor: pointer; - font-weight: bold; - padding: 0 4px !important; - margin-top: 4px !important; -} .sceditor-dropdown a:hover { background: #eee; + text-decoration: none; } -.sceditor-fontsize-option, -.sceditor-font-option, -.sceditor-format a { +.sceditor-dropdown a { + color: #222; display: block; + line-height: 1; padding: 7px 10px; - cursor: pointer; - text-decoration: none; - color: #222; -} -.sceditor-fontsize-option { - padding: 7px 13px; } -.sceditor-color-column { +.sceditor-color-picker span { float: left; + width: 1em; + height: 1em; + margin: 0 0.3em; } -.sceditor-color-option { - display: block; - border: 1px solid #fff; - height: 10px; - width: 10px; - overflow: hidden; - display: inline-block; - border: 1px solid #fff; -} -@media screen and (min-width: 1024px) { - .sceditor-color-option { - height: 24px; - width: 24px; - } - .sceditor-color-picker { - width: 131px; - } -} -@media screen and (max-width: 1024px) { - .sceditor-color-option { - height: 48px; - width: 48px; - } - .sceditor-color-picker { - width: 251px; - } -} -.sceditor-color-option:hover { - border: 1px solid #333; +.sceditor-insertemoticon { + margin: 0.4em 0.2em; } -/** - * Toolbar styleing - */ -div.sceditor-toolbar { - flex-shrink: 0; - overflow: hidden; - padding: 3px 5px 2px; - background: #f7f7f7; - border-bottom: 1px solid #c0c0c0; - line-height: 0; - text-align: left; - user-select: none; - border-radius: 3px 3px 0 0; - background-clip: padding-box; - margin: 0 0 5px; +.sceditor-toolbar { + display: flex; + flex-wrap: wrap; } -div.sceditor-group { +.sceditor-toolbar > div:not([class]) { + flex: 100%; +} +.sceditor-group { display: inline-block; background: #ddd; - margin: 1px 5px 1px 0; - padding: 1px; + padding: 1px 2px; + margin: 2px 4px; border-bottom: 1px solid #aaa; border-radius: 3px; - background-clip: padding-box; } .sceditor-button { - float: left; cursor: pointer; padding: 3px 5px; - width: 16px; - height: 20px; + display: inline-block; border-radius: 3px; - background-clip: padding-box; } -.sceditor-button:hover, +.sceditor-button.fa { + padding: 6px 8px; +} +.sceditor-button:not(.disabled):hover, .sceditor-button:active, .sceditor-button.active { background: #fff; @@ -525,14 +291,8 @@ div.sceditor-group { background: #fff; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3); } -.sceditor-button.disabled:hover { - background: inherit; +.sceditor-button.disabled { cursor: default; - box-shadow: none; -} -.sceditor-button, -.sceditor-button div { - display: block; } .sceditor-button svg { display: inline-block; @@ -590,18 +350,23 @@ div.sceditor-group { .sceditor-button.text-icon div { padding: 0 2px 0 20px; } -.rtl div.sceditor-toolbar { - text-align: right; -} -.rtl .sceditor-button { - float: right; + +/* Styles for SMF-centric elements */ +.sceditor-button.with-dropdown { + padding-inline-end: 16PX; + position: relative; } -.rtl div.sceditor-grip { - right: auto; - left: 0; +.sceditor-button.with-dropdown::after { + border-top: 8px solid currentColor; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + content: ""; + margin: 10px 5px; + opacity: 0.5; + position: absolute; + top: 0; + right: 0; } - -/* SMF buttons styles */ .sceditor-button-pre div { background-position: 0 -696px; } @@ -611,12 +376,29 @@ div.sceditor-group { .sceditor-button-floatright div { background-position: 0px -664px; } -.sceditor-insertemoticon img, -.sceditor-smileyPopup img { - margin: 6px 7px 0 0; +.sceditor-font-picker, +.sceditor-item-picker { + display: flex; + gap: 2em; } -.sceditor-insertemoticon img, -div.sceditor-dropdown img, -.sceditor-smileyPopup img { - cursor: pointer; -} \ No newline at end of file +.sceditor-insert-table { + display: flex; + gap: 2em; +} +.sceditor-insert-table-grid { + display: grid; + grid-template: repeat(12, 1em) / repeat(12, 1em); + gap: 0.5em; +} +.sceditor-insert-table .largetext { + opacity: 0.5; + margin-top: 5em; +} +.sceditor-insert-table-grid span { + opacity: 0.5; + border: 1px solid var(--input-border-color); +} +.sceditor-insert-table-grid .active { + background: var(--input-border-color); +} +#popup{background:#568d;height:100%;left:0;opacity:0;overflow:auto;position:fixed;top:0;transition:500ms all;visibility:hidden;width:100%;z-index:1000}#popup.show{opacity:1;transition:1s all;visibility:visible}#popup.show #popup-container{transform:scale(1) translateY(-50%);transition:500ms all}#popup-container{background:var(--roundframe-bg);border-radius:0.4em;margin:0 auto;padding:1rem;position:relative;top:50%;transform:translateY(-200%);transition:500ms all;width:40%}#popup-container #close{background:none;border:none;height:32px;opacity:0.3;position:absolute;right:1em;top:1em;width:32px}#popup-container #close:hover{opacity:1}#popup-container #close::before,#popup-container #close::after{background:currentColor;content:'';height:26px;position:absolute;top:0;width:2px}#popup-container #close::before{transform:rotate(45deg)}#popup-container #close::after{transform:rotate(-45deg)} \ No newline at end of file diff --git a/Themes/default/css/jquery.sceditor.default.css b/Themes/default/css/jquery.sceditor.default.css index 7672df2dcc..bb3439d9c4 100644 --- a/Themes/default/css/jquery.sceditor.default.css +++ b/Themes/default/css/jquery.sceditor.default.css @@ -1,34 +1,18 @@ /*! SCEditor | (C) 2011-2013, Sam Clarke | sceditor.com/license */ -html, p, .bbc_code code::before, table { +html, p, .bbc_code code::before, table, body, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 14px; - color: #111; - line-height: 1.25; - overflow: visible; tab-size: 4ch; } html { + display: flex; height: 100%; } -.ios { - /* Needed for iOS scrolling bug fix */ - overflow: auto; - -webkit-overflow-scrolling: touch; -} -.ios body { - /* Needed for iOS scrolling bug fix */ - position: relative; - overflow: auto; -} body { - /* Needed to make sure body covers the whole editor and that - long lines don't cause horizontal scrolling */ - min-height: 100%; - word-wrap: break-word; - margin: 0 5px; - padding: 0; + flex: 1; + background: var(--input-bg); + color: var(--input-color); + font: 1em / var(--input-line-height) var(--body-font-family); } ul, ol { diff --git a/Themes/default/scripts/jquery.sceditor.smf.js b/Themes/default/scripts/jquery.sceditor.smf.js index 25042707be..1cb1e9dbfd 100644 --- a/Themes/default/scripts/jquery.sceditor.smf.js +++ b/Themes/default/scripts/jquery.sceditor.smf.js @@ -9,630 +9,333 @@ * @version 3.0 Alpha 2 */ -(function ($) { - var extensionMethods = { - insertQuoteFast: function (messageid) - { - var self = this; - getXMLDocument( - smf_prepareScriptUrl(smf_scripturl) + 'action=quotefast;quote=' + messageid + ';xml', - function(XMLDoc) - { - var text = ''; - - for (var i = 0, n = XMLDoc.getElementsByTagName('quote')[0].childNodes.length; i < n; i++) - text += XMLDoc.getElementsByTagName('quote')[0].childNodes[i].nodeValue; - self.insert(text); - - // Manually move cursor to after the quote. - var - rangeHelper = self.getRangeHelper(), - parent = rangeHelper.parentNode(); - if (parent && parent.nodeName === 'BLOCKQUOTE') - { - var range = rangeHelper.selectedRange(); - range.setStartAfter(parent); - rangeHelper.selectRange(range); - } - - ajax_indicator(false); - } - ); - }, - InsertText: function (text, bClear) { - if (bClear) - this.val(''); - - this.insert(text); - }, - getText: function (filter) { - var current_value = ''; +(sceditor => { + sceditor.plugins.smf = function () + { + let editor; + let opts; + let line; + + const appendEmoticon = (code, {newrow, url, tooltip}) => { + if (newrow) + line.appendChild(document.createElement('br')); + + const i = document.createElement("img"); + i.src = opts.emoticonsRoot + url; + i.alt = code; + i.title = tooltip; + i.addEventListener('click', function (e) + { + if (editor.inSourceMode()) + editor.insertText(' ' + this.alt + ' '); + else + editor.wysiwygEditorInsertHtml(' '); - if (this.inSourceMode()) - current_value = this.getSourceEditorValue(false); - else - current_value = this.getWysiwygEditorValue(filter); + e.preventDefault(); + }); + line.appendChild(i); + }; - return current_value; - }, - appendEmoticon: function (code, emoticon, description) { - if (emoticon == '') - line.append($('
      ')); - else - line.append($('') - .attr({ - src: emoticon, - alt: code, - title: description, - }) - .click(function (e) { - var start = '', end = ''; - - if (base.opts.emoticonsCompat) - { - start = ' '; - end = ' '; - } + const createPopup = el => { + const t = document.createElement("div"); + const cover = document.createElement('div'); + const root = document.createElement('div'); - if (base.inSourceMode()) - base.sourceEditorInsertText(' ' + $(this).attr('alt') + ' '); - else - base.wysiwygEditorInsertHtml(start + '' + end); + const hide = () => { + cover.classList.remove('show'); + document.removeEventListener('keydown', esc); + }; - e.preventDefault(); - }) - ); - }, - storeLastState: function (){ - this.wasSource = this.inSourceMode(); - }, - setTextMode: function () { - if (!this.inSourceMode()) - this.toggleSourceMode(); - }, - createPermanentDropDown: function () { - var emoticons = $.extend({}, this.opts.emoticons.dropdown); - var popup_exists = false; - content = $('
      '); - line = $('
      '); - base = this; - - for (smiley_popup in this.opts.emoticons.popup) - { - popup_exists = true; - break; - } - if (popup_exists) - { - base.opts.emoticons.more = base.opts.emoticons.popup; - moreButton = $('
      ').text(this._('More')).click(function () { - if ($(".sceditor-smileyPopup").length > 0) - { - $(".sceditor-smileyPopup").fadeIn('fast'); - } - else - { - var emoticons = $.extend({}, base.opts.emoticons.popup); - var popup_position; - var titlebar = $('
      '); - popupContent = $('
      '); - allowHide = true; - line = $('
      '); - adjheight = 0; - - popupContent.append(titlebar); - closeButton = $('').text(base._('Close')).click(function () { - $(".sceditor-smileyPopup").fadeOut('fast'); - }); - $(document).mouseup(function (e) { - if (allowHide && !popupContent.is(e.target) && popupContent.has(e.target).length === 0) - $(smileyPopup).fadeOut('fast'); - }).keyup(function (e) { - if (e.keyCode === 27) - $(smileyPopup).fadeOut('fast'); - }); - - $.each(emoticons, function( code, emoticon ) { - base.appendEmoticon(code, emoticon, base.opts.emoticonsDescriptions[code]); - }); - - if (line.children().length > 0) - popupContent.append(line); - if (typeof closeButton !== "undefined") - popupContent.append(closeButton); - - // IE needs unselectable attr to stop it from unselecting the text in the editor. - // The editor can cope if IE does unselect the text it's just not nice. - if (base.ieUnselectable !== false) { - content = $(content); - content.find(':not(input,textarea)').filter(function () { return this.nodeType===1; }).attr('unselectable', 'on'); - } + var esc = ({keyCode}) => { + if (keyCode === 27) + hide(); + }; - dropdownIgnoreLastClick = true; - adjheight = closeButton.height() + titlebar.height(); - $dropdown = $('
      ') - .append(popupContent) - .appendTo($('.sceditor-container')); - - $('.sceditor-smileyPopup').animaDrag({ - speed: 150, - interval: 120, - during: function (e) { - $(this).height(this.startheight); - $(this).width(this.startwidth); - }, - before: function (e) { - this.startheight = $(this).innerHeight(); - this.startwidth = $(this).innerWidth(); - }, - grip: '.sceditor-popup-grip' - }); - // stop clicks within the dropdown from being handled - $dropdown.click(function (e) { - e.stopPropagation(); - }); - } - }); - } - $.each(emoticons, function( code, emoticon ) { - base.appendEmoticon(code, emoticon, base.opts.emoticonsDescriptions[code]); + const a = document.createElement('button'); + + root.appendChild(a); + cover.appendChild(root); + document.body.appendChild(cover); + root.id = 'popup-container'; + cover.id = 'popup'; + a.id = 'close'; + cover.addEventListener('click', ({target}) => { + if (target.id === 'popup') + hide(); }); - if (line.children().length > 0) - content.append(line); - $(".sceditor-toolbar").append(content); - if (typeof moreButton !== "undefined") - content.append($('
      ').append(moreButton)); - } - }; - - // Our custom autolinker plugin. - sceditor.plugins.autolinker = function () { - if (typeof autolinker_regexes === 'undefined') { - return; - } - - const testOnKeyDown = [ - 'Enter', - 'ArrowLeft', - 'ArrowRight', - 'ArrowUp', - 'ArrowDown', - 'End', - 'Home', - 'PageDown', - 'PageUp', - ]; - - // Detects and links plain text URLs when the user presses certain keys down. - this.signalKeydownEvent = function (e) { - if (this.inSourceMode() || !testOnKeyDown.includes(e.key)) { - return; - } + a.addEventListener('click', hide); + document.addEventListener('keydown', esc); + root.appendChild(el); + root.appendChild(a); + cover.classList.add('show'); + editor.hidePopup = hide; + }; - const rangeHelper = this.getRangeHelper(); - const range = rangeHelper.selectedRange(); + const ev = ({children, nextSibling}, col, row) => { + for (let i = 1; i <= 144; i++) + children[i - 1].className = Math.ceil(i / 12) <= col && (i % 12 || 12) <= row ? 'active' : ''; - // Are we in a link or a span that was specifically set not to autolink? - if ( - range.endContainer.parentNode.closest('a') - || range.endContainer.parentNode.closest('span.nolink') - ) { - return; - } + nextSibling.textContent = col + 'x' + row; + }; - // Only do this when the caret is at the end of a string of non-space characters. - if (range.endContainer.textContent.substring(range.endOffset).match(/^\S/)) { - return; + const tbl = callback => { + const content = document.createElement('div'); + content.className = 'sceditor-insert-table'; + const div = document.createElement('div'); + div.className = 'sceditor-insert-table-grid'; + div.addEventListener('mouseleave', ev.bind(null, div, 0, 0)); + const div2 = document.createElement('div'); + div2.className = 'largetext'; + div2.textContent = '0x0'; + + for (let i = 1; i <= 144; i++) + { + const row = i % 12 || 12; + const col = Math.ceil(i / 12); + const span = document.createElement('span'); + span.className = 'windowbg'; + span.addEventListener('mouseenter', ev.bind(null, div, col, row)); + span.addEventListener('click', function (col, row) { + callback(col, row); + editor.hidePopup(); + editor.focus(); + }.bind(null, col, row)); + div.appendChild(span); } + content.append(div, div2); + createPopup(content); + }; - // We want to search from the start of the current text node to the caret position. - let str = range.endContainer.textContent.substring(0, range.endOffset); - - let found = false; + this.init = function () + { + editor = this; + opts = editor.opts; - for (const [name, regex] of autolinker_regexes.entries()) { - if (!name.startsWith('keypress_')) { - continue; + if (opts.emoticonsEnabled) + { + const emoticons = opts.emoticons; + content = opts.smileyContainer; + if (emoticons.dropdown && content) + { + line = document.createElement('div'); + sceditor.utils.each(emoticons.dropdown, appendEmoticon); + content.appendChild(line); } - // Ensure the search always starts from the beginning. - regex.lastIndex = 0; - - // Append a space so that the keyup regex will match. - const url = regex.exec(str + " "); - - if (url !== null) { - found = true; - - insertAutolink(this, str, url, regex, name, rangeHelper); + if (emoticons.more) + { + const moreButton = document.createElement('button'); + moreButton.type = 'button'; + moreButton.className = 'button'; + moreButton.textContent = editor._('More'); + moreButton.addEventListener('click', e => { + line = document.createElement('div'); + sceditor.utils.each(emoticons.more, appendEmoticon); + createPopup(line); - break; + e.preventDefault(); + }); + content.appendChild(moreButton); } + content.className = 'sceditor-insertemoticon'; } + editor.commands.table = { + state(parents, firstBlock) { + return firstBlock && firstBlock.closest('table') ? 1 : 0; + }, + exec() { + tbl((cols, rows) => { + editor.wysiwygEditorInsertHtml( + ''+ Array(cols).join('') + Array(rows).join('' + Array(cols+1).join('')) + '
      ', + '

      ' + ); + }); + }, + txtExec() { + tbl((cols, rows) => { + editor.insertText( + '[table]\n[tr]\n[td]', + '[/td]'+ Array(cols).join('\n[td][/td]') + Array(rows).join('\n[/tr]\n[tr]' + Array(cols+1).join('\n[td][/td]')) + '\n[/tr]\n[/table]' + ); + }); + }, + }; - if (!found) { - removeAutolink(rangeHelper, range.startOffset); - } - }; - - // Detects and links plain text URLs when user releases a key. - this.signalKeyupEvent = function (e) { - if (this.inSourceMode()) { - return; - } - - const rangeHelper = this.getRangeHelper(); - const range = rangeHelper.selectedRange(); + const fn = editor.createDropDown; + this.createDropDown = function (menuItem, name, content) { + fn(menuItem, name, content); + document.body.appendChild(document.querySelector('.sceditor-dropdown')); + }; - // Are we in a span that was specifically set not to autolink? - if (range.endContainer.parentNode.closest('span.nolink')) { - return; - } + editor.insertQuoteFast = messageid => + { + getXMLDocument( + smf_prepareScriptUrl(smf_scripturl) + 'action=quotefast;quote=' + messageid + ';xml', + XMLDoc => + { + var text = ''; - // We want to search from the start of the current text node to the caret position. - let str = range.endContainer.textContent.substring(0, range.endOffset); + for (var i = 0, n = XMLDoc.getElementsByTagName('quote')[0].childNodes.length; i < n; i++) + text += XMLDoc.getElementsByTagName('quote')[0].childNodes[i].nodeValue; + editor.insert(text); - let found = false; + // Manually move cursor to after the quote. + var + rangeHelper = editor.getRangeHelper(), + parent = rangeHelper.parentNode(); + if (parent && parent.nodeName === 'BLOCKQUOTE') + { + var range = rangeHelper.selectedRange(); + range.setStartAfter(parent); + rangeHelper.selectRange(range); + } - if (!testOnKeyDown.includes(e.key)) { - for (const [name, regex] of autolinker_regexes.entries()) { - if (!name.startsWith('keypress_')) { - continue; + ajax_indicator(false); } + ); + }; - // Ensure the search always starts from the beginning. - regex.lastIndex = 0; - - const url = regex.exec(str); - - if (url !== null) { - found = true; - - insertAutolink(this, str, url, regex, name, rangeHelper); - - // Put the caret back where it was originally. - rangeHelper.selectRange(range); + editor.addStyleshet = path => + { + const iframe = editor.getContentAreaContainer(); + const el = iframe.contentDocument.createElement('link'); + el.type = 'text/css'; + el.href = path; - break; - } - } - } + iframe.contentDocument.head.appendChild(el); + }; }; - // Used when editing an existing link or an "nolink" span. - this.signalInputEvent = function (e) { - if (this.inSourceMode() && ['insertText', 'insertLineBreak', 'insertParagraph'].includes(e.inputType)) { - const caretPos = this.sourceEditorCaret().start; - const val = this.val(); - const valBefore = val.substring(0, caretPos); - const valAfter = val.substring(caretPos); + let buttons = {}; - for (const [name, regex] of autolinker_regexes.entries()) { - if (!name.startsWith('keypress_')) { - continue; + this.signalReady = function () + { + for (const group of this.opts.toolbarContainer.children[0].children) { + for (const button of group.children) { + const cmd = button.dataset.sceditorCommand; + buttons[cmd] = button; + + // Create a pseudo linebreak. + if (this.opts.toolbar.includes(cmd + '||')) { + button.parentNode.after(document.createElement('div')); } - // Ensure the search always starts from the beginning. - regex.lastIndex = 0; - - let found = false; - let url = regex.exec(valBefore); - - if (url !== null) { - // Wrap in BBC tags. - this.sourceEditorCaret({start: url.index, end: regex.lastIndex}); - - const bbc_tag = name.endsWith('email') ? 'email' : url[0].startsWith(smf_scripturl) ? 'iurl' : 'url'; - - const tag_param = name.endsWith('naked_domain') ? '="//' + url[0] + '"' : ''; - - this.insert('[' + bbc_tag + tag_param + ']', '[/' + bbc_tag + ']'); - - // Bump the caret along by the length of the inserted tags. - this.sourceEditorCaret({start: caretPos + bbc_tag.length * 2 + tag_param.length + 5, end: caretPos + bbc_tag.length * 2 + tag_param.length + 5}); - - // Don't try any more regular expressions. - break; + // Add icon to custom buttons. + if (this.opts.customTextualCommands[cmd]) { + button.firstChild.style.backgroundImage = 'url(' + smf_default_theme_url + '/images/bbc/' + this.opts.customTextualCommands[cmd].image + '.png)'; } - } - - return; - } - - const rangeHelper = this.getRangeHelper(); - const range = rangeHelper.selectedRange(); - const parent = rangeHelper.parentNode(); - const container = parent.parentNode; - const containerParent = container.parentNode; - - // Adding text immediately after an existing link. - if ( - e.inputType === 'insertText' - && parent.nodeType === Node.TEXT_NODE - && parent.textContent === e.data - && parent.previousSibling - && parent.previousSibling.nodeType === Node.ELEMENT_NODE - && parent.previousSibling.nodeName === 'A' - && parent.previousSibling.href.replace(/\/$/, '').replace(/^mailto:/, '').startsWith(parent.previousSibling.textContent.replace(/\/$/, '').replace(/^mailto:/, '')) - ) { - // Turn the link back into plain text. - parent.previousSibling.replaceWith(parent.previousSibling.textContent); - containerParent.normalize(); - - // Put the caret back where it was originally. - rangeHelper.selectRange(range); - } - - // Inside an existing link. - if ( - container.nodeType === Node.ELEMENT_NODE - && container.nodeName === 'A' - ) { - containerParent.normalize(); - const str = container.textContent; - - // Pressed backspace inside a link. - if (e.inputType === 'deleteContentBackward') { - const caretPos = range.startOffset; - - // Turn the link back into plain text. - const strBefore = document.createTextNode(str.substring(0, caretPos)); - const strAfter = document.createTextNode(str.substring(caretPos)); - - containerParent.insertBefore(strBefore, container); - containerParent.replaceChild(strAfter, container); - containerParent.normalize(); - // Put the caret back where it was originally. - rangeHelper.selectRange(range); - return; - } - - // Any other edits. - for (const [name, regex] of autolinker_regexes.entries()) { - if (name.startsWith('keypress_') || name.startsWith('paste_')) { - continue; + // Add arrowhead to buttons. + if (this.opts.commandsWithDropdown[cmd]) { + button.classList.add('with-dropdown'); } - // Ensure the search always starts from the beginning. - regex.lastIndex = 0; + // This button uses text without an icon. + if (this.opts.textOnlyCommands[cmd]) { + button.classList.add('text'); + } - // If text content is a URL, update the href. - if (regex.test(str)) { - container.href = (name === 'email' ? 'mailto:' : '') + str; - break; + // Show text alongside the icon on this button. + if (this.opts.commandsWithText[cmd]) { + button.classList.add('text-icon'); } } - - return; } - // Inside a span that was specifically set not to autolink. - if ( - container.nodeType === Node.ELEMENT_NODE - && container.nodeName === 'SPAN' - && container.classList.contains('nolink') - ) { - const caretPos = range.startOffset; - - containerParent.normalize(); - const str = container.textContent; - - let url = null; + // Copy variables from variants into ifrane. + const iframe = editor.getContentAreaContainer(); + const el = iframe.contentDocument.createElement('style'); + el.type = 'text/css'; - for (const [name, regex] of autolinker_regexes.entries()) { - if (name.startsWith('keypress_') || name.startsWith('paste_')) { - continue; + for (const sheet of document.styleSheets) { + if (sheet.href?.includes('/index_') || sheet.href?.includes('/variables')) { + for (const rule of sheet.cssRules) { + el.innerHTML += rule.cssText; } - - // Ensure the search always starts from the beginning. - regex.lastIndex = 0; - - url = regex.exec(str); - - if (url !== null) { - break; + } else if (sheet.href?.includes('/minified_')) { + for (const rule of sheet.cssRules) { + if (rule.selectorText == ':root') { + el.innerHTML += rule.cssText; + } } } + } - // If the nolink span no longer contains a URL, remove the span. - if (url === null) { - const strBefore = document.createTextNode(str.substring(0, caretPos)); - const strAfter = document.createTextNode(str.substring(caretPos)); + iframe.contentDocument.head.appendChild(el); - containerParent.insertBefore(strBefore, container); - containerParent.replaceChild(strAfter, container); - containerParent.normalize(); + // Override these functions in order to convince SCEditor not to + // delete tabs. Supporting Markdown means we need to keep them. + const getSourceVal = editor.getSourceEditorValue; + const setSourceVal = editor.setSourceEditorValue; + const sourceEditor = editor.getContentAreaContainer().nextSibling; - // Put the caret back where it was originally. - rangeHelper.selectRange(range); - return; + editor.getSourceEditorValue = function (filter) { + if (filter !== false) { + sourceEditor.value = sourceEditor.value.replaceAll(/\t/, '[tab]'); } - // Move any trailing spaces out of the nolink span. - const trailing = str.match(/\s+$/); - - if (trailing !== null && str.replace(/\s+$/, '') === url[0]) { - const newText = document.createTextNode(trailing[0]); - const newSpan = document.createElement('span'); - newSpan.classList.add('nolink') - newSpan.textContent = url[0]; - - containerParent.insertBefore(newSpan, container); - containerParent.insertBefore(newText, container); - containerParent.removeChild(container); - containerParent.normalize(); + return getSourceVal(filter); + }; - // Put the caret back where it was originally. - rangeHelper.selectRange(range); - } - } + editor.setSourceEditorValue = function (value) { + setSourceVal(value.replaceAll(/\[tab\]/, '\t')); + }; }; + }; - // Autolink URLs that are pasted into the editor. - this.signalPasteRaw = function (data) { - if (!data.html && data.text) { - data.html = data.text; - } - - for (const [name, regex] of autolinker_regexes.entries()) { - if (!name.startsWith('paste_')) { - continue; - } - - const url = regex.exec(data.html); - - if (url !== null) { - const bbc_tag = name === 'paste_email' ? 'email' : (url[0].startsWith(smf_scripturl) ? 'iurl' : 'url'); - - data.html = data.html.replace(regex, '' + url[0] + ''); - - break; - } + const setCustomTextualCommands = cmds => { + for (let c in cmds) { + const cmd = cmds[c]; + const obj = { + tooltip: cmd.description || c + }; + if (!sceditor.commands[c] && cmd.before) { + obj.exec = function() { + this.insertText(cmd.before, cmd.after || ''); + }; + obj.txtExec = [cmd.before, cmd.after || '']; } - }; - - // Helper for this.signalKeydownEvent and this.signalKeyupEvent. - function insertAutolink(editor, str, url, regex, regex_name, rangeHelper) { - // Trim off trailing brackets and quotes that aren't part of balanced pairs. - let found_trailing_bracket_quote = false; - do { - for (const [opener, closer] of autolinker_balanced_pairs.entries()) { - found_trailing_bracket_quote = url[0].endsWith(opener) || url[0].endsWith(closer); - - if (url[0].endsWith(opener)) { - url[0] = url[0].slice(0, -1); - regex.lastIndex--; - break; - } - - if (url[0].endsWith(closer)) { - let allowed_closers = 0; - - for (const char of url[0]) { - if (char === opener) { - allowed_closers++; - } else if (char === closer) { - allowed_closers--; - } - } - - if (allowed_closers < 0) { - url[0] = url[0].slice(0, -1); - regex.lastIndex--; - } else { - found_trailing_bracket_quote = false; - } - - break; - } - } - } while (found_trailing_bracket_quote); - - // Which BBC do we want to use? - const bbc_tag = regex_name.endsWith('email') ? 'email' : (url[0].startsWith(smf_scripturl) ? 'iurl' : 'url'); - - // Set start of selection to the start of the URL. - rangeHelper.selectOuterText(str.length - url.index, 0); - - // Set end of selection to the end of the URL. - let selectedRange = rangeHelper.selectedRange(); - selectedRange.setEnd(rangeHelper.parentNode(), selectedRange.endOffset - (str.length - url.index - url[0].length)); + sceditor.command.set(c, obj); + } + }; - // Prepend '//' to naked domains. - if (regex_name.endsWith('naked_domain')) { - url[0] = '//' + url[0]; - } + const createFn = sceditor.create; + sceditor.create = (textarea, options, bbcContainer, smileyContainer) => { + setCustomTextualCommands(options.customTextualCommands); + options.original = textarea; - // Insert the URL. - editor.wysiwygEditorInsertHtml('      ' + url[0] + ''); + if (typeof oQuickModify !== "undefined") { + oQuickModify.opt.sceOptions = options; } - // Helper for this.signalKeydownEvent. - function removeAutolink(rangeHelper, caretPos) { - const container = rangeHelper.parentNode().parentNode; - - if ( - container.nodeType === Node.ELEMENT_NODE - && container.nodeName === 'A' - && container.href.replace(/\/$/, '').replace(/^mailto:/, '') === container.textContent.replace(/\/$/, '') - ) { - const url = container.textContent; - const containerParent = container.parentNode; + if (typeof bbcContainer === 'string') + options.toolbarContainer = document.getElementById(bbcContainer); - if (caretPos === url.length) { - container.replaceWith(url); - containerParent.normalize(); + if (typeof smileyContainer === 'string') + options.smileyContainer = document.getElementById(smileyContainer); - rangeHelper.selectOuterText(0, caretPos); - let selectedRange = rangeHelper.selectedRange(); - selectedRange.setStart(rangeHelper.parentNode(), selectedRange.endOffset); - } - } + if (bbcContainer === true || !options.toolbarContainer) { + options.toolbarContainer = document.createElement("div"); + textarea.before(options.toolbarContainer); + } else { + options.toolbar = ''; } - }; - var createFn = sceditor.create; - var isPatched = false; + if (smileyContainer === true || !options.smileyContainer) { + options.smileyContainer = document.createElement("div"); + textarea.before(options.smileyContainer); + } else { + options.emoticons = {}; + } - sceditor.create = function (textarea, options) { textarea.value = textarea.value.replaceAll(/\t/, '[tab]'); // Call the original create function createFn(textarea, options); textarea.value = textarea.value.replaceAll(/\[tab\]/, '\t'); - - // Constructor isn't exposed so get reference to it when - // creating the first instance and extend it then - var instance = sceditor.instance(textarea); - if (!isPatched && instance) { - const wysiwygEditor = instance.getContentAreaContainer(); - const editorContainer = wysiwygEditor.parentElement; - const sourceEditor = editorContainer.querySelector("textarea"); - - sceditor.utils.extend(instance.constructor.prototype, extensionMethods); - window.addEventListener('beforeunload', instance.updateOriginal, false); - - /* - * Stop SCEditor from resizing the entire container. Long - * toolbars and tons of smilies play havoc with this. - * Only resize the text areas instead. - */ - editorContainer.removeAttribute("style"); - sourceEditor.style.height = options.height; - sourceEditor.style.flexBasis = options.height; - - // Override these functions in order to convince SCEditor not to - // delete tabs. Supporting Markdown means we need to keep them. - const getSourceVal = instance.getSourceEditorValue; - const setSourceVal = instance.setSourceEditorValue; - - instance.getSourceEditorValue = function (filter) { - if (filter !== false) { - sourceEditor.value = sourceEditor.value.replaceAll(/\t/, '[tab]'); - } - - return getSourceVal(filter); - }; - - instance.setSourceEditorValue = function (value) { - setSourceVal(value.replaceAll(/\[tab\]/, '\t')); - }; - - isPatched = true; - } - - // Fix for minor bug where the toolbar buttons wouldn't initially be active. - if (options.autofocus) { - const rangeHelper = instance.getRangeHelper(); - rangeHelper.saveRange(); - instance.blur(); - instance.focus(); - rangeHelper.restoreRange(); - } }; -})(jQuery); +})(sceditor); sceditor.command.set( 'pre', { @@ -641,13 +344,12 @@ sceditor.command.set( this.wysiwygEditorInsertHtml('
      ', '
      '); } } -); -sceditor.command.set( +).set( 'link', { - exec: function (caller) { - var editor = this; + exec(caller) { + const editor = this; - editor.commands.link._dropDown(editor, caller, function (url, text) { + editor.commands.link._dropDown(editor, caller, (url, text) => { if (!editor.getRangeHelper().selectedHtml() || text) { text = text || url; @@ -657,8 +359,6 @@ sceditor.command.set( sceditor.escapeEntities(text, true) + '' ); } else { - // Can't just use `editor.execCommand('createlink', url)` - // because we need to set a custom attribute. editor.wysiwygEditorInsertHtml( '', '' @@ -667,15 +367,14 @@ sceditor.command.set( }); } } -); -sceditor.command.set( +).set( 'unlink', { - state: function () { + state() { if (this.inSourceMode()) { return 0; } - const rangeHelper = this.getRangeHelper() + const rangeHelper = this.getRangeHelper(); const container = rangeHelper.parentNode().parentNode; if (container.nodeType === Node.ELEMENT_NODE && container.nodeName === 'SPAN' && container.classList.contains('nolink')) { @@ -688,8 +387,8 @@ sceditor.command.set( return 0; }, - exec: function () { - const rangeHelper = this.getRangeHelper() + exec() { + const rangeHelper = this.getRangeHelper(); const container = rangeHelper.parentNode().parentNode; if ( @@ -728,7 +427,7 @@ sceditor.command.set( } } }, - txtExec: function () { + txtExec() { let caretPos = this.sourceEditorCaret().start; const val = this.val(); const valBefore = val.substring(0, caretPos); @@ -820,11 +519,9 @@ sceditor.command.set( } }, } -); - -sceditor.command.set( +).set( 'bulletlist', { - txtExec: function (caller, selected) { + txtExec(caller, selected) { if (selected) this.insertText( '[list]\n[li]' + @@ -835,11 +532,9 @@ sceditor.command.set( this.insertText('[list]\n[li]', '[/li]\n[li][/li]\n[/list]'); } } -); - -sceditor.command.set( +).set( 'orderedlist', { - txtExec: function (caller, selected) { + txtExec(caller, selected) { if (selected) this.insertText( '[list type=decimal]\n[li]' + @@ -850,24 +545,14 @@ sceditor.command.set( this.insertText('[list type=decimal]\n[li]', '[/li]\n[li][/li]\n[/list]'); } } -); - -sceditor.command.set( - 'table', { - txtExec: ["[table]\n[tr]\n[td]", "[/td]\n[/tr]\n[/table]"] - } -); - -sceditor.command.set( +).set( 'floatleft', { txtExec: ["[float=left max=45%]", "[/float]"], exec: function () { this.wysiwygEditorInsertHtml('
      ', '
      '); } } -); - -sceditor.command.set( +).set( 'floatright', { txtExec: ["[float=right max=45%]", "[/float]"], exec: function () { @@ -908,7 +593,7 @@ sceditor.command.set( }); } - editor.createDropDown(caller, 'heading-picker', content); + editor.createDropDown(caller, 'item-picker', content); }, state: function (parent, firstBlock) { return sceditor.dom.closest(this.currentNode(), 'h1, h2, h3, h4, h5, h6') ? 1 : 0; @@ -917,34 +602,32 @@ sceditor.command.set( var editor = this; editor.commands.heading._dropDown(editor, caller, function (tag) { - let caretPos = editor.sourceEditorCaret().start; - - if (tag.match(/h[1-6]/)) { - editor.insert('[' + tag + ']', '[/' + tag + ']'); - editor.toggleSourceMode(); - editor.toggleSourceMode(); - editor.sourceEditorCaret({start: caretPos, end: caretPos}); - } + editor.insert('[' + tag + ']', '[/' + tag + ']'); }); }, exec: function (caller) { var editor = this; editor.commands.heading._dropDown(editor, caller, function (tag) { - const rangeHelper = editor.getRangeHelper() - const container = rangeHelper.parentNode().parentNode; - const containerParent = container.parentNode; - const content = container.innerHTML; + const rangeHelper = editor.getRangeHelper(); + const container = rangeHelper.parentNode().parentNode.closest('h1, h2, h3, h4, h5, h6'); + + if (!container) { + return; + } if ( container.nodeType === Node.ELEMENT_NODE && container.nodeName.match(/H[1-6]/) ) { + const content = container.innerHTML; let newElement = document.createElement(tag.match(/h[1-6]/) ? tag : 'p'); newElement.innerHTML = content; container.replaceWith(newElement); - containerParent.normalize(); - rangeHelper.selectOuterText(0, content.length); + container.parentNode.normalize(); + const range = rangeHelper.selectedRange(); + range.setStartAfter(newElement); + rangeHelper.selectRange(range); } else if (tag.match(/h[1-6]/)) { editor.insert('[' + tag + ']', '[/' + tag + ']'); } @@ -953,18 +636,6 @@ sceditor.command.set( } ); -sceditor.command.set( - 'maximize', { - shortcut: '' - } -); - -sceditor.command.set( - 'source', { - shortcut: '' - } -); - sceditor.command.set( 'youtube', { exec: function (caller) { @@ -975,9 +646,55 @@ sceditor.command.set( }); } } -); +).set( + 'color', { + _dropDown(editor, caller, callback) + { + const content = document.createElement('div'); -sceditor.command.set( + for (const [color, name] of editor.opts.colors) + { + const link = document.createElement('a'); + const span = document.createElement('span'); + link.setAttribute('data-color', color); + link.textContent = name; + span.style.backgroundColor = color; + link.addEventListener('click', function (e) { + callback(this.getAttribute('data-color')); + editor.closeDropDown(true); + e.preventDefault(); + }); + link.appendChild(span); + content.appendChild(link); + } + + editor.createDropDown(caller, 'item-picker', content); + } + } +).set( + 'size', { + _dropDown(editor, caller, callback) + { + const content = document.createElement('div'); + + for (let i = 1; i <= 7; i++) + { + const link = document.createElement('a'); + link.setAttribute('data-size', i); + link.textContent = i; + link.addEventListener('click', function (e) { + callback(this.getAttribute('data-size')); + editor.closeDropDown(true); + e.preventDefault(); + }); + content.appendChild(link); + link.style.fontSize = i * 6 + 'px'; + } + + editor.createDropDown(caller, 'item-picker', content); + } + } +).set( 'email', { exec: function (caller) { @@ -1006,28 +723,24 @@ sceditor.command.set( ); }, } -); - -sceditor.command.set( +).set( 'image', { - exec: function (caller) - { - var editor = this; + exec(caller) { + const editor = this; editor.commands.image._dropDown( editor, caller, '', - function (url, width, height) - { - var attrs = ['src="' + sceditor.escapeEntities(url) + '"']; + (url, width, height) => { + const attrs = ['src="' + sceditor.escapeEntities(url) + '"']; if (width) attrs.push('width="' + sceditor.escapeEntities(width, true) + '"'); if (height) attrs.push('height="' + sceditor.escapeEntities(height, true) + '"'); - + editor.wysiwygEditorInsertHtml( '' ); @@ -1075,6 +788,31 @@ sceditor.command.set( } ); +let itemCodes = [ + ['*', 'disc'], + ['@', 'disc'], + ['+', 'square'], + ['x', 'square'], + ['o', 'circle'], + ['O', 'circle'], + ['0', 'circle'], +]; +for (const [code, attr] of itemCodes) +{ + sceditor.formats.bbcode.set(code, { + tags: { + li: { + 'data-itemcode': [code] + } + }, + isInline: false, + closedBy: ['/ul', '/ol', '/list', 'li', '*', '@', '+', 'x', '0', 'o', 'O'], + excludeClosing: true, + html: '
    • {0}
      • ', + format: '[' + code + ']{0}', + }); +} + // This pseudo-BBCode exists solely to convince SCEditor not to delete tab characters. sceditor.formats.bbcode.set( 'tab', { @@ -1098,32 +836,25 @@ sceditor.formats.bbcode.set( title: null } }, - format: function (element, content) { - return '[abbr=' + $(element).attr('title') + ']' + content + '[/abbr]'; + format(element, content) { + return '[abbr=' + element.getAttribute('title') + ']' + content + '[/abbr]'; }, - html: function (element, attrs, content) { - if (typeof attrs.defaultattr === "undefined" || attrs.defaultattr.length === 0) - return content; - - return '' + content + ''; - } + html: '{0}' } -); - -sceditor.formats.bbcode.set( +).set( 'list', { breakStart: true, isInline: false, // allowedChildren: ['*', 'li'], // Disabled for SCE 2.1.2 because it triggers a bug with inserting extra line breaks - html: function (element, attrs, content) { - var style = ''; - var code = 'ul'; - var olTypes = new Array('decimal', 'decimal-leading-zero', 'lower-roman', 'upper-roman', 'lower-alpha', 'upper-alpha', 'lower-greek', 'upper-greek', 'lower-latin', 'upper-latin', 'hebrew', 'armenian', 'georgian', 'cjk-ideographic', 'hiragana', 'katakana', 'hiragana-iroha', 'katakana-iroha'); + html(element, {type}, content) { + let style = ''; + let code = 'ul'; + const olTypes = ['decimal', 'decimal-leading-zero', 'lower-roman', 'upper-roman', 'lower-alpha', 'upper-alpha', 'lower-greek', 'upper-greek', 'lower-latin', 'upper-latin', 'hebrew', 'armenian', 'georgian', 'cjk-ideographic', 'hiragana', 'katakana', 'hiragana-iroha', 'katakana-iroha']; - if (attrs.type) { - style = ' style="list-style-type: ' + attrs.type + '"'; + if (type) { + style = ' style="list-style-type: ' + type + '"'; - if (olTypes.indexOf(attrs.type) > -1) + if (olTypes.includes(type)) code = 'ol'; } else @@ -1132,9 +863,7 @@ sceditor.formats.bbcode.set( return '<' + code + style + '>' + content + ''; } } -); - -sceditor.formats.bbcode.set( +).set( 'ul', { tags: { ul: null @@ -1142,16 +871,15 @@ sceditor.formats.bbcode.set( breakStart: true, isInline: false, html: '
        {0}
      ', - format: function (element, content) { - if ($(element).css('list-style-type') == 'disc') + format(element, content) { + const type = element.getAttribute('type') || element.style.listStyleType; + if (type == 'disc') return '[list]' + content + '[/list]'; else - return '[list type=' + $(element).css('list-style-type') + ']' + content + '[/list]'; + return '[list type=' + type + ']' + content + '[/list]'; } } -); - -sceditor.formats.bbcode.set( +).set( 'ol', { tags: { ol: null @@ -1159,135 +887,34 @@ sceditor.formats.bbcode.set( breakStart: true, isInline: false, html: '
        {0}
      ', - format: function (element, content) { - if ($(element).css('list-style-type') == 'none') - return '[list type=decimal]' + content + '[/list]'; - else - return '[list type=' + $(element).css('list-style-type') + ']' + content + '[/list]'; + format(element, content) { + const type = element.getAttribute('type') || element.style.listStyleType; + if (type == 'none') + type = 'decimal'; + + return '[list type=' + type + ']' + content + '[/list]'; } } -); - -sceditor.formats.bbcode.set( +).set( 'li', { tags: { li: null }, isInline: false, closedBy: ['/ul', '/ol', '/list', 'li', '*', '@', '+', 'x', 'o', 'O', '0'], - html: '
    • {0}
      • ', - format: function (element, content) { - var element = $(element), - token = 'li', - allowedTokens = ['li', '*', '@', '+', 'x', 'o', 'O', '0']; + html: '
    • {0}
      • ', + format(element, content) { + let token = 'li'; + const tok = element.getAttribute('data-itemcode'); + const allowedTokens = ['li', '*', '@', '+', 'x', 'o', 'O', '0']; - if (element.attr('data-bbc-tag') && allowedTokens.indexOf(element.attr('data-bbc-tag') > -1)) - token = element.attr('data-bbc-tag'); + if (tok && allowedTokens.includes(tok)) + token = tok; return '[' + token + ']' + content + (token === 'li' ? '[/' + token + ']' : ''); }, } -); -sceditor.formats.bbcode.set( - '*', { - tags: { - li: { - 'data-bbc-tag': ['*'] - } - }, - isInline: false, - closedBy: ['/ul', '/ol', '/list', 'li', '*', '@', '+', 'x', 'o', 'O', '0'], - excludeClosing: true, - html: '
    • {0}
      • ', - format: '[*]{0}', - } -); -sceditor.formats.bbcode.set( - '@', { - tags: { - li: { - 'data-bbc-tag': ['@'] - } - }, - isInline: false, - closedBy: ['/ul', '/ol', '/list', 'li', '*', '@', '+', 'x', 'o', 'O', '0'], - excludeClosing: true, - html: '
    • {0}
      • ', - format: '[@]{0}', - } -); -sceditor.formats.bbcode.set( - '+', { - tags: { - li: { - 'data-bbc-tag': ['+'] - } - }, - isInline: false, - closedBy: ['/ul', '/ol', '/list', 'li', '*', '@', '+', 'x', 'o', 'O', '0'], - excludeClosing: true, - html: '
    • {0}
      • ', - format: '[+]{0}', - } -); -sceditor.formats.bbcode.set( - 'x', { - tags: { - li: { - 'data-bbc-tag': ['x'] - } - }, - isInline: false, - closedBy: ['/ul', '/ol', '/list', 'li', '*', '@', '+', 'x', 'o', 'O', '0'], - excludeClosing: true, - html: '
    • {0}
      • ', - format: '[x]{0}', - } -); -sceditor.formats.bbcode.set( - 'o', { - tags: { - li: { - 'data-bbc-tag': ['o'] - } - }, - isInline: false, - closedBy: ['/ul', '/ol', '/list', 'li', '*', '@', '+', 'x', 'o', 'O', '0'], - excludeClosing: true, - html: '
    • {0}
      • ', - format: '[o]{0}', - } -); -sceditor.formats.bbcode.set( - 'O', { - tags: { - li: { - 'data-bbc-tag': ['O'] - } - }, - isInline: false, - closedBy: ['/ul', '/ol', '/list', 'li', '*', '@', '+', 'x', 'o', 'O', '0'], - excludeClosing: true, - html: '
    • {0}
      • ', - format: '[o]{0}', - } -); -sceditor.formats.bbcode.set( - '0', { - tags: { - li: { - 'data-bbc-tag': ['0'] - } - }, - isInline: false, - closedBy: ['/ul', '/ol', '/list', 'li', '*', '@', '+', 'x', 'o', 'O', '0'], - excludeClosing: true, - html: '
    • {0}
      • ', - format: '[o]{0}', - } -); - -sceditor.formats.bbcode.set( +).set( 'img', { tags: { img: { @@ -1295,26 +922,12 @@ sceditor.formats.bbcode.set( } }, allowsEmpty: true, - quoteType: $.sceditor.BBCodeParser.QuoteType.never, - format: function (element, content) { - var element = $(element), - attribs = '', - style = function (name) { - return element.style ? element.style[name] : null; - }; - + quoteType: sceditor.BBCodeParser.QuoteType.never, + format(element, content) { // check if this is an emoticon image - if (typeof element.attr('data-sceditor-emoticon') !== "undefined") + if (element.hasAttribute('data-sceditor-emoticon')) return content; - // only add width and height if one is specified - if (element.attr('width') || style('width')) - attribs += " width=" + element.attr('width'); - if (element.attr('height') || style('height')) - attribs += " height=" + element.attr('height'); - if (element.attr('alt')) - attribs += " alt=" + element.attr('alt'); - // Is this an attachment? if (element.attr('data-attachment')) { @@ -1326,29 +939,39 @@ sceditor.formats.bbcode.set( } else if (element.attr('title')) attribs += " title=" + element.attr('title'); - - return '[img' + attribs + ']' + element.attr('src') + '[/img]'; + let attribs = ''; + const width = element.getAttribute('width') || element.style.width; + const height = element.getAttribute('height') || element.style.height; + + if (width) + attribs += " width=" + width; + if (height) + attribs += " height=" + height; + if (element.alt) + attribs += " alt=" + element.alt; + if (element.title) + attribs += " title=" + element.title; + + return '[img' + attribs + ']' + element.src + '[/img]'; }, - html: function (token, attrs, content) { - var parts, - attribs = ''; + html(token, {width, height, alt, title}, content) { + let parts; + let attribs = ''; // handle [img width=340 height=240]url[/img] - if (typeof attrs.width !== "undefined") - attribs += ' width="' + attrs.width + '"'; - if (typeof attrs.height !== "undefined") - attribs += ' height="' + attrs.height + '"'; - if (typeof attrs.alt !== "undefined") - attribs += ' alt="' + attrs.alt + '"'; - if (typeof attrs.title !== "undefined") - attribs += ' title="' + attrs.title + '"'; + if (typeof width !== "undefined") + attribs += ' width="' + width + '"'; + if (typeof height !== "undefined") + attribs += ' height="' + height + '"'; + if (typeof alt !== "undefined") + attribs += ' alt="' + alt + '"'; + if (typeof title !== "undefined") + attribs += ' title="' + title + '"'; return ''; } } -); - -sceditor.formats.bbcode.set( +).set( 'attach', { tags: { img: { @@ -1440,22 +1063,20 @@ sceditor.formats.bbcode.set( if (typeof attrs.height !== "undefined") attribs += ' height="' + attrs.height + '"'; - var contentUrl = smf_scripturl +'?action=dlattach;attach='+ id + ';preview;image'; + var contentUrl = smf_scripturl +'?action=dlattach;attach='+ id + ';type=preview;thumb'; contentIMG = new Image(); contentIMG.src = contentUrl; } // If not an image, show a boring ol' link if (typeof contentUrl === "undefined" || contentIMG.getAttribute('width') == 0) - return '' + content + ''; + return '' + content + ''; // Show our purdy li'l picture else return ''; } } -); - -sceditor.formats.bbcode.set( +).set( 'email', { allowsEmpty: true, quoteType: sceditor.BBCodeParser.QuoteType.never, @@ -1478,14 +1099,12 @@ sceditor.formats.bbcode.set( } } ); - sceditor.formats.bbcode.set( 'url', { allowsEmpty: true, - quoteType: sceditor.BBCodeParser.QuoteType.always, - format(element, content) - { - if (element.hasAttribute('data-type') && element.getAttribute('data-type') != 'url') + quoteType: sceditor.BBCodeParser.QuoteType.never, + format(element, content) { + if (element.getAttribute('data-type') != 'url') return content; if (decodeURI(element.href).replace(/\/$/, '') === content.replace(/\/$/, '')) { @@ -1494,34 +1113,30 @@ sceditor.formats.bbcode.set( return '[url=' + decodeURI(element.href) + ']' + content + '[/url]'; }, - html: function (token, attrs, content) - { - return '' + content + ''; + html(token, {defaultattr}, content) { + return '' + content + ''; } } -); - -sceditor.formats.bbcode.set( +).set( 'iurl', { allowsEmpty: true, - quoteType: sceditor.BBCodeParser.QuoteType.always, + quoteType: sceditor.BBCodeParser.QuoteType.never, tags: { a: { 'data-type': ['iurl'] } }, - format: function (element, content) - { - if (decodeURI(element.href).replace(/\/$/, '') === content.replace(/\/$/, '')) { - return '[iurl]' + content + '[/iurl]'; - } - - return '[iurl=' + decodeURI(element.href) + ']' + content + '[/iurl]'; + format({href}, content) { + return '[iurl=' + href + ']' + content + '[/iurl]'; }, - html: function (token, attrs, content) - { - return '' + content + ''; + html(token, {defaultattr}, content) { + return '' + content + ''; } + }) +.set( + 'ftp', { + allowsEmpty: true, + quoteType: sceditor.BBCodeParser.QuoteType.never, } ); @@ -1533,28 +1148,62 @@ sceditor.formats.bbcode.set( 'class': 'nolink' }, }, - format: function (element, content) { - return '[nolink]' + content + '[/nolink]'; - }, - html: function (token, attrs, content) - { - return '' + content + ''; - } + format: '[nolink]{0}[/nolink]', + html: '{0}' } ); sceditor.formats.bbcode.set( 'pre', { + tags: { + a: { + 'data-type': ['ftp'] + } + }, + format({href}, content) { + return (href == content ? '[ftp]' : '[ftp=' + href + ']') + content + '[/ftp]'; + }, + html(token, {defaultattr}, content) { + return '' + content + ''; + } + }) + .set('table', { + breakStart: true, + isHtmlInline: false, + skipLastLineBreak: false, + }) + .set('tr', { + breakStart: true, + }) + .set('tt', { + tags: { + tt: null, + span: {'class': ['tt']} + }, + format: '[tt]{0}[/tt]', + html: '{0}' + }) + .set('pre', { tags: { pre: null }, isBlock: true, - format: "[pre]{0}[/pre]", - html: "
      {0}
      \n" - } -); - -sceditor.formats.bbcode.set( + format: '[pre]{0}[/pre]', + html: '
      {0}
      ' + }) + .set('me', { + tags: { + div: { + 'data-name' : null + } + }, + isInline: false, + format(element, content) { + return '[me=' + element.getAttribute('data-name') + ']' + content.replace(element.getAttribute('data-name') + ' ', '') + '[/me]'; + }, + html: '
      * {defaultattr} {0}
      ' + }) +.set( 'php', { tags: { code: { @@ -1615,15 +1264,13 @@ sceditor.formats.bbcode.set( return '[code' + from + ']' + content.replace('[', '[') + '[/code]'; }, - html: function (element, attrs, content) { - var from = attrs.defaultattr ? ' data-title="' + attrs.defaultattr + '"' : ''; + html(element, {defaultattr}, content) { + const from = defaultattr ? ' data-title="' + defaultattr + '"' : ''; return '
      ' + content.replace('[', '[').replaceAll(/\[tab\]/, '\t') + '
      '; } } -); - -sceditor.formats.bbcode.set( +).set( 'quote', { tags: { blockquote: null, @@ -1632,12 +1279,11 @@ sceditor.formats.bbcode.set( quoteType: sceditor.BBCodeParser.QuoteType.never, breakBefore: false, isInline: false, - format: function (element, content) - { - var attrs = ''; - var author = element.getAttribute('data-author'); - var date = element.getAttribute('data-date'); - var link = element.getAttribute('data-link'); + format(element, content) { + let attrs = ''; + const author = element.getAttribute('data-author'); + const date = element.getAttribute('data-date'); + const link = element.getAttribute('data-link'); // The contains only the graphic for the quote, so we can skip it if (element.tagName === 'CITE') @@ -1652,11 +1298,13 @@ sceditor.formats.bbcode.set( return '[quote' + attrs + ']' + content + '[/quote]'; }, - html: function (element, attrs, content) - { - var attr_author = '', author = ''; - var attr_date = '', sDate = ''; - var attr_link = '', link = ''; + html(element, attrs, content) { + let attr_author = ''; + let author = ''; + let attr_date = ''; + let sDate = ''; + let attr_link = ''; + let link = ''; if (attrs.author || attrs.defaultattr) { @@ -1683,9 +1331,7 @@ sceditor.formats.bbcode.set( return '
      ' + (author || bbc_quote) + ' ' + sDate + '' + content + '
      '; } } -); - -sceditor.formats.bbcode.set( +).set( 'font', { format: function (element, content) { var element = $(element); @@ -1707,9 +1353,7 @@ sceditor.formats.bbcode.set( return '[font=' + font + ']' + content + '[/font]'; } } -); - -sceditor.formats.bbcode.set( +).set( 'member', { isInline: true, tags: { @@ -1727,9 +1371,7 @@ sceditor.formats.bbcode.set( return '@'+ content.replace('@', '') +''; } } -); - -sceditor.formats.bbcode.set( +).set( 'float', { tags: { div: { @@ -1758,27 +1400,17 @@ sceditor.formats.bbcode.set( return '
      ' + content + '
      '; } } -); - -sceditor.formats.bbcode.set( +).set( 'youtube', { - allowsEmpty: true, tags: { div: { - class: 'videocontainer' + 'data-youtube-id': null } }, isInline: false, skipLastLineBreak: true, - format: function (element, content) { - youtube_id = $(element).find('iframe').data('youtube-id'); - - if (typeof youtube_id !== "undefined") - return '[youtube]' + youtube_id + '[/youtube]'; - else - return content; - }, - html: '
      ' + format: el => `[youtube]${el.getAttribute('data-youtube-id')}[/youtube]`, + html: '
      ' } ); diff --git a/Themes/default/scripts/sceditor.plugins.autolinker.js b/Themes/default/scripts/sceditor.plugins.autolinker.js new file mode 100644 index 0000000000..90d1f4ea70 --- /dev/null +++ b/Themes/default/scripts/sceditor.plugins.autolinker.js @@ -0,0 +1,390 @@ +(function (sceditor) { + 'use strict'; + + // Our custom autolinker plugin. + sceditor.plugins.autolinker = function () { + if (typeof autolinker_regexes === 'undefined') { + return; + } + + const testOnKeyDown = [ + 'Enter', + 'ArrowLeft', + 'ArrowRight', + 'ArrowUp', + 'ArrowDown', + 'End', + 'Home', + 'PageDown', + 'PageUp', + ]; + + // Detects and links plain text URLs when the user presses certain keys down. + this.signalKeydownEvent = function (e) { + if (this.inSourceMode() || !testOnKeyDown.includes(e.key)) { + return; + } + + const rangeHelper = this.getRangeHelper(); + const range = rangeHelper.selectedRange(); + + // Are we in a link or a span that was specifically set not to autolink? + if ( + range.endContainer.parentNode.closest('a') + || range.endContainer.parentNode.closest('span.nolink') + ) { + return; + } + + // Only do this when the caret is at the end of a string of non-space characters. + if (range.endContainer.textContent.substring(range.endOffset).match(/^\S/)) { + return; + } + + // We want to search from the start of the current text node to the caret position. + let str = range.endContainer.textContent.substring(0, range.endOffset); + + let found = false; + + for (const [name, regex] of autolinker_regexes.entries()) { + if (!name.startsWith('keypress_')) { + continue; + } + + // Ensure the search always starts from the beginning. + regex.lastIndex = 0; + + // Append a space so that the keyup regex will match. + const url = regex.exec(str + " "); + + if (url !== null) { + found = true; + + insertAutolink(this, str, url, regex, name, rangeHelper); + + break; + } + } + + if (!found) { + removeAutolink(rangeHelper, range.startOffset); + } + }; + + // Detects and links plain text URLs when user releases a key. + this.signalKeyupEvent = function (e) { + if (this.inSourceMode()) { + return; + } + + const rangeHelper = this.getRangeHelper(); + const range = rangeHelper.selectedRange(); + + // Are we in a span that was specifically set not to autolink? + if (range.endContainer.parentNode.closest('span.nolink')) { + return; + } + + // We want to search from the start of the current text node to the caret position. + let str = range.endContainer.textContent.substring(0, range.endOffset); + + let found = false; + + if (!testOnKeyDown.includes(e.key)) { + for (const [name, regex] of autolinker_regexes.entries()) { + if (!name.startsWith('keypress_')) { + continue; + } + + // Ensure the search always starts from the beginning. + regex.lastIndex = 0; + + const url = regex.exec(str); + + if (url !== null) { + found = true; + + insertAutolink(this, str, url, regex, name, rangeHelper); + + // Put the caret back where it was originally. + rangeHelper.selectRange(range); + + break; + } + } + } + }; + + // Used when editing an existing link or an "nolink" span. + this.signalInputEvent = function (e) { + if (this.inSourceMode() && ['insertText', 'insertLineBreak', 'insertParagraph'].includes(e.inputType)) { + const caretPos = this.sourceEditorCaret().start; + const val = this.val(); + const valBefore = val.substring(0, caretPos); + const valAfter = val.substring(caretPos); + + for (const [name, regex] of autolinker_regexes.entries()) { + if (!name.startsWith('keypress_')) { + continue; + } + + // Ensure the search always starts from the beginning. + regex.lastIndex = 0; + + let found = false; + let url = regex.exec(valBefore); + + if (url !== null) { + // Wrap in BBC tags. + this.sourceEditorCaret({start: url.index, end: regex.lastIndex}); + + const bbc_tag = name.endsWith('email') ? 'email' : url[0].startsWith(smf_scripturl) ? 'iurl' : 'url'; + + const tag_param = name.endsWith('naked_domain') ? '="//' + url[0] + '"' : ''; + + this.insert('[' + bbc_tag + tag_param + ']', '[/' + bbc_tag + ']'); + + // Bump the caret along by the length of the inserted tags. + this.sourceEditorCaret({start: caretPos + bbc_tag.length * 2 + tag_param.length + 5, end: caretPos + bbc_tag.length * 2 + tag_param.length + 5}); + + // Don't try any more regular expressions. + break; + } + } + + return; + } + + const rangeHelper = this.getRangeHelper(); + const range = rangeHelper.selectedRange(); + const parent = rangeHelper.parentNode(); + const container = parent.parentNode; + const containerParent = container.parentNode; + + // Adding text immediately after an existing link. + if ( + e.inputType === 'insertText' + && parent.nodeType === Node.TEXT_NODE + && parent.textContent === e.data + && parent.previousSibling + && parent.previousSibling.nodeType === Node.ELEMENT_NODE + && parent.previousSibling.nodeName === 'A' + && parent.previousSibling.href.replace(/\/$/, '').replace(/^mailto:/, '').startsWith(parent.previousSibling.textContent.replace(/\/$/, '').replace(/^mailto:/, '')) + ) { + // Turn the link back into plain text. + parent.previousSibling.replaceWith(parent.previousSibling.textContent); + containerParent.normalize(); + + // Put the caret back where it was originally. + rangeHelper.selectRange(range); + } + + // Inside an existing link. + if ( + container.nodeType === Node.ELEMENT_NODE + && container.nodeName === 'A' + ) { + containerParent.normalize(); + const str = container.textContent; + + // Pressed backspace inside a link. + if (e.inputType === 'deleteContentBackward') { + const caretPos = range.startOffset; + + // Turn the link back into plain text. + const strBefore = document.createTextNode(str.substring(0, caretPos)); + const strAfter = document.createTextNode(str.substring(caretPos)); + + containerParent.insertBefore(strBefore, container); + containerParent.replaceChild(strAfter, container); + containerParent.normalize(); + + // Put the caret back where it was originally. + rangeHelper.selectRange(range); + return; + } + + // Any other edits. + for (const [name, regex] of autolinker_regexes.entries()) { + if (name.startsWith('keypress_') || name.startsWith('paste_')) { + continue; + } + + // Ensure the search always starts from the beginning. + regex.lastIndex = 0; + + // If text content is a URL, update the href. + if (regex.test(str)) { + container.href = (name === 'email' ? 'mailto:' : '') + str; + break; + } + } + + return; + } + + // Inside a span that was specifically set not to autolink. + if ( + container.nodeType === Node.ELEMENT_NODE + && container.nodeName === 'SPAN' + && container.classList.contains('nolink') + ) { + const caretPos = range.startOffset; + + containerParent.normalize(); + const str = container.textContent; + + let url = null; + + for (const [name, regex] of autolinker_regexes.entries()) { + if (name.startsWith('keypress_') || name.startsWith('paste_')) { + continue; + } + + // Ensure the search always starts from the beginning. + regex.lastIndex = 0; + + url = regex.exec(str); + + if (url !== null) { + break; + } + } + + // If the nolink span no longer contains a URL, remove the span. + if (url === null) { + const strBefore = document.createTextNode(str.substring(0, caretPos)); + const strAfter = document.createTextNode(str.substring(caretPos)); + + containerParent.insertBefore(strBefore, container); + containerParent.replaceChild(strAfter, container); + containerParent.normalize(); + + // Put the caret back where it was originally. + rangeHelper.selectRange(range); + return; + } + + // Move any trailing spaces out of the nolink span. + const trailing = str.match(/\s+$/); + + if (trailing !== null && str.replace(/\s+$/, '') === url[0]) { + const newText = document.createTextNode(trailing[0]); + const newSpan = document.createElement('span'); + newSpan.classList.add('nolink') + newSpan.textContent = url[0]; + + containerParent.insertBefore(newSpan, container); + containerParent.insertBefore(newText, container); + containerParent.removeChild(container); + containerParent.normalize(); + + // Put the caret back where it was originally. + rangeHelper.selectRange(range); + } + } + }; + + // Autolink URLs that are pasted into the editor. + this.signalPasteRaw = function (data) { + if (!data.html && data.text) { + data.html = data.text; + } + + for (const [name, regex] of autolinker_regexes.entries()) { + if (!name.startsWith('paste_')) { + continue; + } + + const url = regex.exec(data.html); + + if (url !== null) { + const bbc_tag = name === 'paste_email' ? 'email' : (url[0].startsWith(smf_scripturl) ? 'iurl' : 'url'); + + data.html = data.html.replace(regex, '' + url[0] + ''); + + break; + } + } + }; + + // Helper for this.signalKeydownEvent and this.signalKeyupEvent. + function insertAutolink(editor, str, url, regex, regex_name, rangeHelper) { + // Trim off trailing brackets and quotes that aren't part of balanced pairs. + let found_trailing_bracket_quote = false; + do { + for (const [opener, closer] of autolinker_balanced_pairs.entries()) { + found_trailing_bracket_quote = url[0].endsWith(opener) || url[0].endsWith(closer); + + if (url[0].endsWith(opener)) { + url[0] = url[0].slice(0, -1); + regex.lastIndex--; + break; + } + + if (url[0].endsWith(closer)) { + let allowed_closers = 0; + + for (const char of url[0]) { + if (char === opener) { + allowed_closers++; + } else if (char === closer) { + allowed_closers--; + } + } + + if (allowed_closers < 0) { + url[0] = url[0].slice(0, -1); + regex.lastIndex--; + } else { + found_trailing_bracket_quote = false; + } + + break; + } + } + } while (found_trailing_bracket_quote); + + // Which BBC do we want to use? + const bbc_tag = regex_name.endsWith('email') ? 'email' : (url[0].startsWith(smf_scripturl) ? 'iurl' : 'url'); + + // Set start of selection to the start of the URL. + rangeHelper.selectOuterText(str.length - url.index, 0); + + // Set end of selection to the end of the URL. + let selectedRange = rangeHelper.selectedRange(); + selectedRange.setEnd(rangeHelper.parentNode(), selectedRange.endOffset - (str.length - url.index - url[0].length)); + + // Prepend '//' to naked domains. + if (regex_name.endsWith('naked_domain')) { + url[0] = '//' + url[0]; + } + + // Insert the URL. + editor.wysiwygEditorInsertHtml('' + url[0] + ''); + } + + // Helper for this.signalKeydownEvent. + function removeAutolink(rangeHelper, caretPos) { + const container = rangeHelper.parentNode().parentNode; + + if ( + container.nodeType === Node.ELEMENT_NODE + && container.nodeName === 'A' + && container.href.replace(/\/$/, '').replace(/^mailto:/, '') === container.textContent.replace(/\/$/, '') + ) { + const url = container.textContent; + const containerParent = container.parentNode; + + if (caretPos === url.length) { + container.replaceWith(url); + containerParent.normalize(); + + rangeHelper.selectOuterText(0, caretPos); + let selectedRange = rangeHelper.selectedRange(); + selectedRange.setStart(rangeHelper.parentNode(), selectedRange.endOffset); + } + } + } + }; +})(sceditor); \ No newline at end of file From 223ad4082ee7b95e7542d2cc9c573cfe4d3549cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Andr=C3=A9s?= Date: Sat, 9 Mar 2024 14:24:41 -0600 Subject: [PATCH 056/115] fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Diego Andrés --- Themes/default/BoardIndex.template.php | 2 +- Themes/default/css/index.css | 6 +++- Themes/default/css/profile.css | 44 +++++++++++++------------- Themes/default/css/responsive.css | 9 ++---- Themes/default/css/variables.css | 2 +- 5 files changed, 31 insertions(+), 32 deletions(-) diff --git a/Themes/default/BoardIndex.template.php b/Themes/default/BoardIndex.template.php index 80fcaed521..3ea07e0604 100644 --- a/Themes/default/BoardIndex.template.php +++ b/Themes/default/BoardIndex.template.php @@ -315,7 +315,7 @@ function template_info_center()

      - ', sprintf(Lang::$txt['info_center_title'], Utils::$context['forum_name_html_safe']), ' + ', Lang::getTxt('info_center_title', ['forum_name' => Utils::$context['forum_name_html_safe']]), '

      diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 16b634a336..4b9c59c8a3 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -149,6 +149,7 @@ input[type="number"][size="6"] { } /* Buttons styling */ button, .button, a.button, input[type="button"] { + align-items: center; background: var(--button-bg); border-color: var(--button-border-color); border-radius: var(--button-border-radius); @@ -157,6 +158,7 @@ button, .button, a.button, input[type="button"] { box-shadow: var(--button-box-shadow); color: var(--button-color); cursor: var(--button-cursor); + display: inline-flex; font-size: var(--button-font-size); font-weight: var(--button-font-weight); gap: var(--button-gap); @@ -1792,7 +1794,8 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi html[lang="el-GR"] .buttonlist > li > a { text-transform: capitalize; } -#mobile_action { +#mobile_action, +#mobile_moderation { display: none; } @@ -1857,6 +1860,7 @@ html[lang="el-GR"] .buttonlist > li > a { .mobile_buttons { display: none; flex: 1; + gap: 0.5em; } /* the page navigation area */ diff --git a/Themes/default/css/profile.css b/Themes/default/css/profile.css index abe7ce1c9d..2eb4bde5e4 100644 --- a/Themes/default/css/profile.css +++ b/Themes/default/css/profile.css @@ -1,13 +1,11 @@ /* Styles for the profile section. ------------------------------------------------- */ -/* The basic user info on the left */ #profileview { display: grid; - gap: var(--profilesummary-gap); - grid: var(--profilesummary-grid); - padding-block: var(--profilesummary-padding-block); - padding-inline: var(--profilesummary-padding-inline); + grid: auto / var(--basicinfo-width) 1fr; + padding: 0; } +/* The basic user info */ #basicinfo { background: var(--basicinfo-bg); border-color: var(--basicinfo-border-color); @@ -24,22 +22,6 @@ padding-inline: var(--basicinfo-padding-inline); text-align: center; } -#detailedinfo { - background: var(--detailedinfo-bg); - border-color: var(--detailedinfo-border-color); - border-radius: var(--detailedinfo-border-radius); - border-style: var(--detailedinfo-border-style); - border-width: var(--detailedinfo-border-width); - box-shadow: var(--detailedinfo-box-shadow); - display: flex; - flex-direction: column; - gap: var(--detailedinfo-gap); - margin-block: var(--detailedinfo-margin-block); - margin-inline: var(--detailedinfo-margin-inline); - padding-block: var(--detailedinfo-padding-block); - padding-inline: var(--detailedinfo-padding-inline); -} - #basicinfo h4 { font-size: 1.4em; font-weight: normal; @@ -49,7 +31,7 @@ } #basicinfo h4 span.position { display: block; - font-size: 0.8em; + font-size: 0.65em; } #basicinfo ul { list-style-type: none; @@ -78,6 +60,19 @@ #basicinfo #userstatus { display: block; } +/* More detailes user info */ +#detailedinfo { + background: var(--detailedinfo-bg); + border-color: var(--detailedinfo-border-color); + border-radius: var(--detailedinfo-border-radius); + border-style: var(--detailedinfo-border-style); + border-width: var(--detailedinfo-border-width); + box-shadow: var(--detailedinfo-box-shadow); + display: flex; + flex-direction: column; + gap: .75em 0; + padding: .75em 1em; +} #detailedinfo dl, #tracking dl { clear: right; overflow: auto; @@ -101,6 +96,11 @@ #detailedinfo dt.clear { width: 100%; } +#detailedinfo .signature { + padding-block: 1em 0; + padding-inline: .5em; +} + #personal_picture { display: block; margin-bottom: 4px; diff --git a/Themes/default/css/responsive.css b/Themes/default/css/responsive.css index 6c409ce770..48f6d95909 100644 --- a/Themes/default/css/responsive.css +++ b/Themes/default/css/responsive.css @@ -68,7 +68,8 @@ } @media screen and (min-width: 721px) { - #mobile_action { + #mobile_action, + #mobile_moderation { display: none !important; } } @@ -103,12 +104,6 @@ top: 0.25em; position: relative; } - .mobile_buttons { - margin: 5px 0; - } - .mobile_buttons .button { - margin: 0; - } .pagesection .buttonlist, #moderationbuttons { display: none; } diff --git a/Themes/default/css/variables.css b/Themes/default/css/variables.css index e4419134ab..ef6842d173 100644 --- a/Themes/default/css/variables.css +++ b/Themes/default/css/variables.css @@ -1590,7 +1590,7 @@ --genericbar-inner-border-radius: var(--genericbar-border-radius); --genericbar-inner-border-style: solid; --genericbar-inner-border-width: 0; - --genericbar-inner-box-shadow: 4px -4px 8px hsla(0, 0%, 0%, 0.1) inset, 4px 4px 8px hsla(0, 0%, 100%, 0.3) inset; + --genericbar-inner-box-shadow: 4px -4px 4px hsla(0, 0%, 0%, 0.1) inset, 4px 4px 4px hsla(0, 0%, 100%, 0.3) inset; --genericbar-inner-box-shadow_vertical: 4px -4px 4px hsla(0, 0%, 0%, 0.1) inset, 4px 4px 4px hsla(0, 0%, 100%, 0.3) inset; --genericbar-inner-color: hsla(0, 0%, 0%, 0.8); From 7db907a59470af2e4065823bdbc8367a9a6bedef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Andr=C3=A9s?= Date: Sat, 9 Mar 2024 16:21:11 -0600 Subject: [PATCH 057/115] remove padding and margins from variables MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Diego Andrés --- Themes/default/css/index.css | 592 ++++++++++-------------------- Themes/default/css/profile.css | 15 +- Themes/default/css/responsive.css | 12 +- Themes/default/css/variables.css | 408 +------------------- 4 files changed, 213 insertions(+), 814 deletions(-) diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 4b9c59c8a3..6747521b02 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -76,8 +76,7 @@ input, select, textarea { font-size: var(--input-font-size); height: var(--input-height); line-height: var(--input-line-height); - margin-block: var(--input-margin-block); - margin-inline: var(--input-margin-inline); + margin: 0; padding-block: var(--input-padding-block); padding-inline: var(--input-padding-inline); text-shadow: var(--input-text-shadow); @@ -163,12 +162,10 @@ button, .button, a.button, input[type="button"] { font-weight: var(--button-font-weight); gap: var(--button-gap); justify-content: center; - margin-block: var(--button-margin-block); - margin-inline: var(--button-margin-inline); + margin: 0; line-height: var(--button-line-height); min-height: var(--button-height); - padding-block: var(--button-padding-block); - padding-inline: var(--button-padding-inline); + padding: .25em .75em; text-decoration: var(--button-text-decoration); text-shadow: var(--button-text-shadow); text-transform: var(--button-text-transform); @@ -254,10 +251,9 @@ fieldset { border-style: var(--fieldset-border-style); border-width: var(--fieldset-border-width); box-shadow: var(--fieldset-box-shadow); - margin-block: var(--fieldset-margin-block); - margin-inline: var(--fieldset-margin-inline); - padding-block: var(--fieldset-padding-block); - padding-inline: var(--fieldset-padding-inline); + margin-block: 0 .5em; + margin-inline: 0; + padding: 1.5em; } fieldset legend { background: var(--fieldset-legend-bg); @@ -268,10 +264,6 @@ fieldset legend { box-shadow: var(--fieldset-legend-box-shadow); font-weight: bold; color: var(--fieldset-legend-color); - margin-block: var(--fieldset-legend-margin-block); - margin-inline: var(--fieldset-legend-margin-inline); - padding-block: var(--fieldset-legend-padding-block); - padding-inline: var(--fieldset-legend-padding-inline); } /* Details tag */ details { @@ -281,10 +273,9 @@ details { border-style: var(--details-border-style); border-width: var(--details-border-width); box-shadow: var(--details-box-shadow); - margin-block: var(--details-margin-block); - margin-inline: var(--details-margin-inline); - padding-block: var(--details-padding-block); - padding-inline: var(--details-padding-inline); + margin-block: 0 .5em; + margin-inline: 0; + padding: 0; } details[open] { background: var(--details-bg_open); @@ -301,10 +292,6 @@ details summary { cursor: var(--details-summary-cursor); font-size: var(--details-summary-font-size); font-weight: var(--details-summary-font-weight); - margin-block: var(--details-summary-margin-block); - margin-inline: var(--details-summary-margin-inline); - padding-block: var(--details-summary-padding-block); - padding-inline: var(--details-summary-padding-inline); } details[open] summary { background: var(--details-summary-bg_open); @@ -344,11 +331,10 @@ hr { border-style: var(--horizontalrule-border-style); border-width: var(--horizontalrule-border-width); box-shadow: var(--horizontalrule-box-shadow); - margin-block: var(--horizontalrule-margin-block); - margin-inline: var(--horizontalrule-margin-inline); height: var(--horizontalrule-height); - padding-block: var(--horizontalrule-padding-block); - padding-inline: var(--horizontalrule-padding-inline); + margin-block: 1em; + margin-inline: 0; + padding: 0; } #likes li { clear: both; @@ -389,8 +375,7 @@ hr { font-size: var(--new-font-size); font-weight: var(--new-font-weight); line-height: var(--new-line-height); - padding-block: var(--new-padding-block); - padding-inline: var(--new-padding-inline); + padding: .1em .6em; text-decoration: var(--new-text-decoration); text-shadow: var(--new-text-shadow); position: relative; @@ -519,10 +504,9 @@ blockquote { border-width: var(--quote-border-width); box-shadow: var(--quote-box-shadow); font-size: var(--quote-font-size); - margin-block: var(--quote-margin-block); - margin-inline: var(--quote-margin-inline); - padding-block: var(--quote-padding-block); - padding-inline: var(--quote-padding-inline); + margin-block: .2em .5em; + margin-inline: .25em; + padding: .5em 1em; } blockquote blockquote { font-size: 1em; @@ -554,10 +538,8 @@ blockquote cite { color: var(--quote-cite-color); display: block; font-size: var(--quote-cite-font-size); - margin-block: var(--quote-cite-margin-block); - margin-inline: var(--quote-cite-margin-inline); - padding-block: var(--quote-cite-padding-block); - padding-inline: var(--quote-cite-padding-inline); + margin-block: 0 .5em; + padding-inline: .2em; } blockquote cite::before { font-size: 1.75em; @@ -577,11 +559,10 @@ blockquote cite::before { color: var(--quote-header-color); font-size: var(--quote-header-font-size); font-weight: var(--quote-header-font-weight); - margin-block: var(--quote-header-margin-block); - margin-inline: var(--quote-header-margin-inline); + margin-block: .2em .4em; + margin-inline: .2em; max-height: var(--quote-header-height); - padding-block: var(--quote-header-padding-block); - padding-inline: var(--quote-header-padding-inline); + padding: .2em .25em; text-shadow: var(--quote-header-text-shadow); } /* A code block - maybe PHP ;). */ @@ -594,11 +575,10 @@ blockquote cite::before { box-shadow: var(--code-box-shadow); display: block; font-size: var(--code-font-size); - margin-block: var(--code-margin-block); - margin-inline: var(--code-margin-inline); + margin-block: .2em .4em; + margin-inline: .2em; max-height: var(--code-height); - padding-block: var(--code-padding-block); - padding-inline: var(--code-padding-inline); + padding: .2em 1em; overflow: auto; max-height: 25em; white-space: pre; @@ -608,11 +588,10 @@ blockquote cite::before { color: var(--code-header-color); font-size: var(--code-header-font-size); font-weight: var(--code-header-font-weight); - margin-block: var(--code-header-margin-block); - margin-inline: var(--code-header-margin-inline); + margin-block: .2em .4em; + margin-inline: .2em; max-height: var(--code-header-height); - padding-block: var(--code-header-padding-block); - padding-inline: var(--code-header-padding-inline); + padding: .2em .25em; text-shadow: var(--code-header-text-shadow); } /* For links to change the code stuff... */ @@ -732,11 +711,8 @@ a img { content: ""; display: inline-block; height: var(--toggle-height); - margin-block: var(--toggle-margin-block); - margin-inline: var(--toggle-margin-inline); + margin-inline: .2em; overflow: hidden; - padding-block: var(--toggle-padding-block); - padding-inline: var(--toggle-padding-inline); transition: background-color 0.25s; vertical-align: middle; width: var(--toggle-width); @@ -804,10 +780,8 @@ a.moderation_link { font-size: var(--moderationlink-font-size); font-weight: var(--moderationlink-font-weight); height: auto; - margin-block: var(--moderationlink-margin-block); - margin-inline: var(--moderationlink-margin-inline); - padding-block: var(--moderationlink-padding-block); - padding-inline: var(--moderationlink-padding-inline); + margin: 0; + padding: .1em .75em; width: auto; } @@ -821,11 +795,9 @@ a.moderation_link { color: var(--ajaxinprogress-color); font-size: var(--ajaxinprogress-font-size); font-weight: var(--ajaxinprogress-font-weight); - line-height: 25px; - margin-block: var(--ajaxinprogress-margin-block); - margin-inline: var(--ajaxinprogress-margin-inline); - padding-block: var(--ajaxinprogress-padding-block); - padding-inline: var(--ajaxinprogress-padding-inline); + line-height: var(--ajaxinprogress-line-height); + margin: 0; + padding: .75em 1.25em; position: fixed; text-align: center; top: 0; @@ -835,10 +807,7 @@ a.moderation_link { color: var(--ajaxinprogress-link-color); float: right; font-size: var(--ajaxinprogress-link-font-size); - margin-block: var(--ajaxinprogress-link-margin-block); - margin-inline: var(--ajaxinprogress-link-margin-inline); - padding-block: var(--ajaxinprogress-link-padding-block); - padding-inline: var(--ajaxinprogress-link-padding-inline); + margin-inline: 0 2em; text-decoration: var(--ajaxinprogress-link-text-decoration); } @@ -974,10 +943,8 @@ img.sort, .sort { border-style: var(--autosuggest-border-style); border-width: var(--autosuggest-border-width); box-shadow: var(--autosuggest-box-shadow); - margin-block: var(--autosuggest-margin-block); - margin-inline: var(--autosuggest-margin-inline); - padding-block: var(--autosuggest-padding-block); - padding-inline: var(--autosuggest-padding-inline); + margin: 0; + padding: 0; position: absolute; visibility: hidden; z-index: 5; @@ -993,10 +960,8 @@ img.sort, .sort { cursor: var(--autosuggest-item-cursor); font-size: var(--autosuggest-item-font-size); font-weight: var(--autosuggest-item-font-weight); - margin-block: var(--autosuggest-item-margin-block); - margin-inline: var(--autosuggest-item-margin-inline); - padding-block: var(--autosuggest-item-padding-block); - padding-inline: var(--autosuggest-item-padding-inline); + margin: 0; + padding: .2em .25em; } .auto_suggest_item_hover { background: var(--autosuggest-item-bg_hover); @@ -1066,14 +1031,12 @@ img.sort, .sort { cursor: var(--topinfo-cursor); font-size: var(--topinfo-font-size); font-weight: var(--topinfo-font-weight); - gap: var(--topinfo-gap); + gap: .25em .4em; justify-content: center; - margin-block: var(--topinfo-margin-block); - margin-inline: var(--topinfo-margin-inline); + margin: 0; line-height: var(--topinfo-line-height); height: var(--topinfo-height); - padding-block: var(--topinfo-padding-block); - padding-inline: var(--topinfo-padding-inline); + padding: .5em; position: relative; text-decoration: var(--topinfo-text-decoration); text-shadow: var(--topinfo-text-shadow); @@ -1129,10 +1092,6 @@ img.sort, .sort { border-width: var(--topinfo-avatar-border-width); box-shadow: var(--topinfo-avatar-box-shadow); height: var(--topinfo-avatar-height); - margin-block: var(--topinfo-avatar-margin-block); - margin-inline: var(--topinfo-avatar-margin-inline); - padding-block: var(--topinfo-avatar-padding-block); - padding-inline: var(--topinfo-avatar-padding-inline); width: var(--topinfo-avatar-width); } #profile_menu_top::after { @@ -1165,10 +1124,7 @@ img.sort, .sort { font-weight: var(--topmenu-font-weight); line-height: var(--topmenu-line-height); inset-inline-end: 0; - margin-block: var(--topmenu-margin-block); - margin-inline: var(--topmenu-margin-inline); - padding-block: var(--topmenu-padding-block); - padding-inline: var(--topmenu-padding-inline); + margin-block: 2px 0; position: absolute; text-shadow: var(--topmenu-text-shadow); text-transform: var(--topmenu-text-transform); @@ -1207,8 +1163,7 @@ img.sort, .sort { border-width: var(--topmenu-header-border-width); color: var(--topmenu-header-color); font-size: var(--topmenu-header-font-size); - padding-block: var(--topmenu-header-padding-block); - padding-inline: var(--topmenu-header-padding-inline); + padding: .25em .75em; } .top_menu .body { background: var(--topmenu-body-bg); @@ -1216,13 +1171,11 @@ img.sort, .sort { border-style: var(--topmenu-body-border-style); border-width: var(--topmenu-body-border-width); font-size: var(--topmenu-body-font-size); - padding-block: var(--topmenu-body-padding-block); - padding-inline: var(--topmenu-body-padding-inline); } #profile_menu .header { align-items: center; display: grid; - gap: var(--topmenu-header-padding-inline); + gap: .75em; grid-template-columns: auto 1fr; } #profile_menu time { @@ -1256,12 +1209,10 @@ ol.profile_user_links { box-shadow: var(--profilelinks-box-shadow); display: grid; font-size: var(--profilelinks-font-size); - gap: var(--profilelinks-gap); + gap: 0; grid: var(--profilelinks-grid); - margin-block: var(--profilelinks-margin-block); - margin-inline: var(--profilelinks-margin-inline); - padding-block: var(--profilelinks-padding-block); - padding-inline: var(--profilelinks-padding-inline); + margin: 0; + padding: .25em; user-select: none; } .profile_user_links li { @@ -1279,12 +1230,10 @@ ol.profile_user_links { font-family: var(--profilelinks-item-font-family); font-size: var(--profilelinks-item-font-size); font-weight: var(--profilelinks-item-font-weight); - gap: var(--profilelinks-item-gap); - margin-block: var(--profilelinks-item-margin-block); - margin-inline: var(--profilelinks-item-margin-inline); + gap: .2em .5em; min-height: var(--profilelinks-item-height); - padding-block: var(--profilelinks-item-padding-block); - padding-inline: var(--profilelinks-item-padding-inline); + padding-block: .2em; + padding-inline: .75em; text-decoration: var(--profilelinks-item-text-decoration); text-shadow: var(--profilelinks-item-text-shadow); } @@ -1336,8 +1285,7 @@ ol.profile_user_links { } .top_menu .no_unread { font-size: 1em; - padding-block: var(--genericnoti-read-padding-block); - padding-inline: var(--genericnoti-read-padding-inline); + padding: 1em .75em; } .generic_notification { align-items: flex-start; @@ -1351,11 +1299,8 @@ ol.profile_user_links { gap: var(--genericnoti-gap); grid-template-columns: auto 1fr; grid-template-rows: auto auto; - margin-block: var(--genericnoti-margin-block); - margin-inline: var(--genericnoti-margin-inline); min-height: var(--genericnoti-height); - padding-block: var(--genericnoti-padding-block); - padding-inline: var(--genericnoti-padding-inline); + padding: .5em; } .generic_notification:hover { background: var(--genericnoti-bg_hover); @@ -1408,10 +1353,7 @@ nav#main_menu { border-width: var(--nav-border-width); display: flex; min-height: var(--nav-height); - margin-block: var(--nav-margin-block); - margin-inline: var(--nav-margin-inline); - padding-block: var(--nav-padding-block); - padding-inline: var(--nav-padding-inline); + padding: .6em 0; } /* Mobile menu button */ a.mobile_user_menu { @@ -1419,9 +1361,8 @@ a.mobile_user_menu { display: none; font-size: var(--mobilenav-font-size); font-weight: var(--mobilenav-font-weight); - gap: var(--mobilenav-gap); - padding-block: var(--mobilenav-padding-block); - padding-inline: var(--mobilenav-padding-inline); + gap: 0 .75em; + padding: .25em 0; text-decoration: var(--mobilenav-text-decoration); text-shadow: var(--mobilenav-text-shadow); } @@ -1442,9 +1383,8 @@ nav:where(#genericmenu, #adm_submenus) a { display: none; font-size: var(--mobilegeneric-font-size); font-weight: var(--mobilegeneric-font-weight); - gap: var(--mobilegeneric-gap); - padding-block: var(--mobilegeneric-padding-block); - padding-inline: var(--mobilegeneric-padding-inline); + gap: 0 .75em; + padding: .25em .5em; text-decoration: var(--mobilegeneric-text-decoration); text-shadow: var(--mobilegeneric-text-shadow); } @@ -1468,10 +1408,8 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi border-radius: var(--genericmenu-border-radius); border-style: var(--genericmenu-border-style); border-width: var(--genericmenu-border-width); - margin-block: var(--genericmenu-margin-block); - margin-inline: var(--genericmenu-margin-inline); - padding-block: var(--genericmenu-padding-block); - padding-inline: var(--genericmenu-padding-inline); + margin-block: .25em; + padding: .5em .25em; } /* Styles for the standard dropdown menus. @@ -1480,11 +1418,7 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi .dropmenu { align-items: center; display: flex; - gap: var(--dropmenu-main-gap); - margin-block: var(--dropmenu-main-margin-block); - margin-inline: var(--dropmenu-main-margin-inline); - padding-block: var(--dropmenu-main-padding-block); - padding-inline: var(--dropmenu-main-padding-inline); + gap: .5em; user-select: none; } .dropmenu li { @@ -1502,12 +1436,9 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi font-family: var(--dropmenu-a1-font-family); font-size: var(--dropmenu-a1-font-size); font-weight: var(--dropmenu-a1-font-weight); - gap: var(--dropmenu-a1-gap); - margin-block: var(--dropmenu-a1-margin-block); - margin-inline: var(--dropmenu-a1-margin-inline); + gap: .5em; min-height: var(--dropmenu-a1-height); - padding-block: var(--dropmenu-a1-padding-block); - padding-inline: var(--dropmenu-a1-padding-inline); + padding: .2em .75em; text-decoration: var(--dropmenu-a1-text-decoration); text-shadow: var(--dropmenu-a1-text-shadow); } @@ -1550,7 +1481,7 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi content: "\25ba"; font-family: Arial, sans-serif; font-size: 0.8em; - inset-inline-end: var(--dropmenu-an-padding-inline); + inset-inline-end: .75em; inset-inline-start: auto; position: absolute; } @@ -1566,12 +1497,8 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi box-shadow: var(--dropmenu-child-box-shadow); display: flex; flex-direction: column; - gap: var(--dropmenu-child-gap); - margin-block: var(--dropmenu-child-margin-block); - margin-inline: var(--dropmenu-child-margin-inline); min-width: var(--dropmenu-child-width); - padding-block: var(--dropmenu-child-padding-block); - padding-inline: var(--dropmenu-child-padding-inline); + padding: .25em; position: absolute; z-index: 4; } @@ -1608,12 +1535,10 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi font-family: var(--dropmenu-an-font-family); font-size: var(--dropmenu-an-font-size); font-weight: var(--dropmenu-an-font-weight); - gap: var(--dropmenu-an-gap); - margin-block: var(--dropmenu-an-margin-block); - margin-inline: var(--dropmenu-an-margin-inline); + gap: .2em .5em; min-height: var(--dropmenu-an-height); - padding-block: var(--dropmenu-an-padding-block); - padding-inline: var(--dropmenu-an-padding-inline); + padding-block: .2em; + padding-inline: .75em; text-decoration: var(--dropmenu-an-text-decoration); text-shadow: var(--dropmenu-an-text-shadow); } @@ -1656,7 +1581,7 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi } .dropmenu ul ul { inset-inline-end: auto; - inset-inline-start: calc(100% - var(--dropmenu-an-padding-inline)); + inset-inline-start: calc(100% - .75em); top: 0.25em; } .dropmenu ul i::before, @@ -1696,11 +1621,8 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi box-shadow: var(--buttonlist-box-shadow); flex: 1; flex-wrap: wrap; - gap: var(--buttonlist-gap); - margin-block: var(--buttonlist-margin-block); - margin-inline: var(--buttonlist-margin-inline); - padding-block: var(--buttonlist-padding-block); - padding-inline: var(--buttonlist-padding-inline); + gap: .5em; + margin-block: .25em; user-select: none; } .buttonlist > li { @@ -1720,14 +1642,11 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi cursor: var(--buttonlist-link-cursor); font-size: var(--buttonlist-link-font-size); font-weight: var(--buttonlist-link-font-weight); - gap: var(--buttonlist-link-gap); + gap: .2em .5em; justify-content: center; - margin-block: var(--buttonlist-link-margin-block); - margin-inline: var(--buttonlist-link-margin-inline); line-height: var(--buttonlist-link-line-height); min-height: var(--buttonlist-link-height); - padding-block: var(--buttonlist-link-padding-block); - padding-inline: var(--buttonlist-link-padding-inline); + padding: .6em .75em; text-decoration: var(--buttonlist-link-text-decoration); text-shadow: var(--buttonlist-link-text-shadow); text-transform: var(--buttonlist-link-text-transform); @@ -1800,16 +1719,13 @@ html[lang="el-GR"] .buttonlist > li > a { } /* Buttonlist dropmenu/top_menu/dropdown */ -.buttonlist:has(.top_menu) { - --topmenu-margin-block: 0.25em 0; - --dropmenu-main-padding-block: 0.25em; - --dropmenu-main-padding-inline: 0.25em; +.buttonlist .top_menu { + margin-block: .25em 0; } .buttonlist .dropmenu { flex-direction: column; -} -.buttonlist .dropmenu li { - --dropmenu-an-padding-block: 0.5em; + padding-block: 0.25em; + padding-inline: 0.25em; } .buttonlist .dropmenu li a { --dropmenu-an-font-size: 0.9em; @@ -1825,7 +1741,7 @@ html[lang="el-GR"] .buttonlist > li > a { } .buttonlist .overview { display: grid; - gap: var(--dropmenu-an-gap); + gap: .2em .5em; width: 100%; } /* In a .buttonrow, the buttons are joined together */ @@ -1845,9 +1761,11 @@ html[lang="el-GR"] .buttonlist > li > a { } /* in a titlebg, the buttonlist is of small height */ .titlebg .buttonlist { - --buttonlist-margin-block: 0; - --buttonlist-padding-block: 0; - --buttonlist-link-margin-block: 0; + margin-block: 0; + padding-block: 0; +} +.titlebg .buttonlist a { + } .buttonlist.floatright, .mobile_buttons.floatright { @@ -1871,12 +1789,12 @@ html[lang="el-GR"] .buttonlist > li > a { border-style: var(--pagesection-border-style); border-width: var(--pagesection-border-width); box-shadow: var(--pagesection-box-shadow); - clear: var(--pagesection-clear); + clear: both; color: var(--pagesection-color); - margin-block: var(--pagesection-margin-block); - margin-inline: var(--pagesection-margin-inline); - padding-block: var(--pagesection-padding-block); - padding-inline: var(--pagesection-padding-inline); + margin-block: .25em; + margin-inline: auto; + padding-block: 0; + padding-inline: 0; } .pagelinks { align-items: center; @@ -1888,11 +1806,7 @@ html[lang="el-GR"] .buttonlist > li > a { box-shadow: var(--pages-box-shadow); display: flex; flex-wrap: wrap; - gap: var(--pages-gap); - margin-block: var(--pages-margin-block); - margin-inline: var(--pages-margin-inline); - padding-block: var(--pages-padding-block); - padding-inline: var(--pages-padding-inline); + gap: .2em; user-select: none; } .pagelinks a.nav_page, @@ -1909,14 +1823,11 @@ html[lang="el-GR"] .buttonlist > li > a { cursor: var(--pages-link-cursor); font-size: var(--pages-link-font-size); font-weight: var(--pages-link-font-weight); - gap: var(--pages-link-gap); + gap: .2em .5em; justify-content: center; - margin-block: var(--pages-link-margin-block); - margin-inline: var(--pages-link-margin-inline); line-height: var(--pages-link-line-height); min-height: var(--pages-link-height); - padding-block: var(--pages-link-padding-block); - padding-inline: var(--pages-link-padding-inline); + padding: .6em .75em; text-decoration: var(--pages-link-text-decoration); text-shadow: var(--pages-link-text-shadow); text-transform: var(--pages-link-text-transform); @@ -1990,7 +1901,7 @@ strong[id^='child_list_']::after { /* Set maximum width limit for content */ #top_section .inner_wrap, #wrapper, #header .inner_wrap, #footer .inner_wrap, #main_menu .inner_wrap { - max-width: 1200px; + max-width: var(--wrapper-width); margin: 0 auto; width: 90%; } @@ -2013,11 +1924,9 @@ strong[id^='child_list_']::after { border-style: var(--header-border-style); border-width: var(--header-border-width); box-shadow: var(--header-box-shadow); - margin-block: var(--header-margin-block); - margin-inline: var(--header-margin-inline); + margin: 0; min-height: var(--header-height); - padding-block: var(--header-padding-block); - padding-inline: var(--header-padding-inline); + padding: .5em .2em; } #header .inner_wrap { align-items: center; @@ -2037,10 +1946,6 @@ h1.forumtitle { font-family: var(--forumtitle-font-family); font-size: var(--forumtitle-font-size); font-weight: var(--forumtitle-font-weight); - margin-block: var(--forumtitle-margin-block); - margin-inline: var(--forumtitle-margin-inline); - padding-block: var(--forumtitle-padding-block); - padding-inline: var(--forumtitle-padding-inline); } h1.forumtitle a:hover { color: var(--forumtitle-color_hover); @@ -2102,8 +2007,7 @@ ul li.greeting { font-size: var(--newsfader-font-size); grid-template-columns: auto 1fr; height: var(--newsfader-height); - margin-block: var(--newsfader-margin-block); - margin-inline: var(--newsfader-margin-inline); + margin-block: .5em 1em; } .news_section .icon { align-items: center; @@ -2122,8 +2026,7 @@ ul li.greeting { display: grid; gap: 0.5em; margin: 0; - padding-block: var(--newsfader-padding-block); - padding-inline: var(--newsfader-padding-inline); + padding: .8em; } .news_section .sy-slides-wrap { overflow: auto; @@ -2131,7 +2034,7 @@ ul li.greeting { .news_section .sy-pager { align-items: flex-end; display: flex; - gap: var(--newsfader-pager-gap); + gap: .5em; margin: 0; } .news_section .sy-pager li { @@ -2140,10 +2043,6 @@ ul li.greeting { border-style: var(--newsfader-pager-border-style); border-width: var(--newsfader-pager-border-width); height: var(--newsfader-pager-height); - margin-block: var(--newsfader-pager-margin-block); - margin-inline: var(--newsfader-pager-margin-inline); - padding-block: var(--newsfader-pager-padding-block); - padding-inline: var(--newsfader-pager-padding-inline); width: var(--newsfader-pager-width); } .news_section .sy-pager li a { @@ -2174,10 +2073,9 @@ ul li.greeting { border-style: var(--navigatesection-border-style); border-width: var(--navigatesection-border-width); box-shadow: var(--navigatesection-box-shadow); - margin-block: var(--navigatesection-margin-block); - margin-inline: var(--navigatesection-margin-inline); - padding-block: var(--navigatesection-padding-block); - padding-inline: var(--navigatesection-padding-inline); + margin-block: .5em .75em; + margin-inline: 0; + padding: 0; } .navigate_section ul { align-items: center; @@ -2192,10 +2090,8 @@ ul li.greeting { flex-wrap: wrap; font-family: var(--breadcrumb-font-family); font-size: var(--breadcrumb-font-size); - margin-block: var(--breadcrumb-margin-block); - margin-inline: var(--breadcrumb-margin-inline); - padding-block: var(--breadcrumb-padding-block); - padding-inline: var(--breadcrumb-padding-inline); + margin: 0; + padding: .75em; } .navigate_section ul:before { font-family: "Font Awesome 6 Free"; @@ -2207,7 +2103,7 @@ ul li.greeting { .navigate_section li { align-items: center; display: flex; - gap: var(--breadcrumb-gap); + gap: .25em .15em; } .navigate_section a { color: var(--breadcrumb-link-color); @@ -2222,12 +2118,9 @@ ul li.greeting { align-items: center; display: inline-flex; font-weight: var(--breadcrumb-link-font-weight); - gap: var(--breadcrumb-link-gap); + gap: 0 .25em; line-height: var(--breadcrumb-link-line-height); - margin-block: var(--breadcrumb-link-margin-block); - margin-inline: var(--breadcrumb-link-margin-inline); - padding-block: var(--breadcrumb-link-padding-block); - padding-inline: var(--breadcrumb-link-padding-inline); + padding: .2em; text-decoration: var(--breadcrumb-link-text-decoration); text-shadow: var(--breadcrumb-link-text-shadow); } @@ -2262,10 +2155,8 @@ ul li.greeting { font-family: var(--breadcrumb_divider_font_family); font-size: var(--breadcrumb-divider-font-size); line-height: var(--breadcrumb-divider-line-height); - margin-block: var(--breadcrumb-divider-margin-block); - margin-inline: var(--breadcrumb-divider-margin-inline); - padding-block: var(--breadcrumb-divider-padding-block); - padding-inline: var(--breadcrumb-divider-padding-inline); + margin: 0; + padding: 0 .4em; } /* Match the heading */ .navigate_section:has(+ div#content_section #display_head) { @@ -2286,12 +2177,10 @@ ul li.greeting { border-style: var(--contentsection-border-style); border-width: var(--contentsection-border-width); box-shadow: var(--contentsection-box-shadow); - clear: var(--contentsection-clear); + clear: both; color: var(--contentsection-color); - margin-block: var(--contentsection-margin-block); - margin-inline: var(--contentsection-margin-inline); - padding-block: var(--contentsection-padding-block); - padding-inline: var(--contentsection-padding-inline); + margin: 0 auto; + padding: 0; } #main_content_section::after { content: ""; @@ -2309,11 +2198,10 @@ ul li.greeting { box-shadow: var(--footer-box-shadow); color: var(--footer-color); font-size: var(--footer-font-size); - margin-block: var(--footer-margin-block); - margin-inline: var(--footer-margin-inline); + margin-block: 4em 0; + margin-inline: 0; min-height: var(--footer-height); - padding-block: var(--footer-padding-block); - padding-inline: var(--footer-padding-inline); + padding: .75em 0; } #footer :not(a, li, p) { font-size: 1em; @@ -2337,10 +2225,10 @@ ul li.greeting { text-shadow: var(--footer-link-text-shadow_focus); } #footer .inner_wrap { - align-items: flex-start; + align-items: center; display: flex; flex-wrap: wrap; - gap: var(--footer-gap); + gap: 1.25em .25em; justify-content: space-between; } #footer li.helplinks { @@ -2366,7 +2254,7 @@ ul li.greeting { margin-block: 0 0.75em; } .mark_read .buttonlist { - --buttonlist-margin-block: 0; + margin-block: 0; } .fix_rtl_names { @@ -2384,12 +2272,9 @@ ul li.greeting { box-shadow: var(--quickbuttons-box-shadow); display: flex; flex-wrap: wrap; - gap: var(--quickbuttons-gap); + gap: .25em; justify-content: flex-end; - margin-block: var(--quickbuttons-margin-block); - margin-inline: var(--quickbuttons-margin-inline); - padding-block: var(--quickbuttons-padding-block); - padding-inline: var(--quickbuttons-padding-inline); + margin-block: .25em; user-select: none; } .quickbuttons > li { @@ -2412,14 +2297,11 @@ ul li.greeting { cursor: var(--quickbuttons-link-cursor); font-size: var(--quickbuttons-link-font-size); font-weight: var(--quickbuttons-link-font-weight); - gap: var(--quickbuttons-link-gap); + gap: .2em .5em; justify-content: center; - margin-block: var(--quickbuttons-link-margin-block); - margin-inline: var(--quickbuttons-link-margin-inline); line-height: var(--quickbuttons-link-line-height); min-height: var(--quickbuttons-link-height); - padding-block: var(--quickbuttons-link-padding-block); - padding-inline: var(--quickbuttons-link-padding-inline); + padding: .6em .75em; text-decoration: var(--quickbuttons-link-text-decoration); text-shadow: var(--quickbuttons-link-text-shadow); text-transform: var(--quickbuttons-link-text-transform); @@ -2472,13 +2354,9 @@ ul li.greeting { border-width: var(--quickoptions-border-width); box-shadow: var(--quickoptions-box-shadow); display: none; - gap: var(--quickoptions-gap); flex-direction: column; inset-inline-end: 0; - margin-block: var(--quickoptions-margin-block); - margin-inline: var(--quickoptions-margin-inline); - padding-block: var(--quickoptions-padding-block); - padding-inline: var(--quickoptions-padding-inline); + padding: .2em; position: absolute; width: var(--quickoptions-width); top: 100%; @@ -2503,12 +2381,9 @@ ul li.greeting { font-family: var(--quickoptions-link-font-family); font-size: var(--quickoptions-link-font-size); font-weight: var(--quickoptions-link-font-weight); - gap: var(--quickoptions-link-gap); - margin-block: var(--quickoptions-link-margin-block); - margin-inline: var(--quickoptions-link-margin-inline); + gap: .2em .5em; min-height: var(--quickoptions-link-height); - padding-block: var(--quickoptions-link-padding-block); - padding-inline: var(--quickoptions-link-padding-inline); + padding: .2em .75em; text-decoration: var(--quickoptions-link-text-decoration); text-shadow: var(--quickoptions-link-text-shadow); } @@ -2573,8 +2448,6 @@ ul li.greeting { margin: 1em 0 2em; } #post_event .roundframe { - --roundframe-padding-block: 12px; - --roundframe-padding-inline: 12%; padding: 12px 8%; overflow: auto; } @@ -2589,9 +2462,9 @@ ul li.greeting { border-bottom-right-radius: 0; } #post_event span.label { + display: inline-block; margin: 0 0.5em 0 2px; min-width: 60px; - display: inline-block; } .event_options { @@ -2809,8 +2682,7 @@ tr.windowbg td, tr.bg td, .table_grid tr td { box-shadow: var(--errorfile-box-shadow); font-family: var(--errorfile-font-family); font-size: var(--errorfile-font-size); - padding-block: var(--errorfile-padding-block); - padding-inline: var(--errorfile-padding-inline); + padding: .5em .2em; } .errorfile_table td { background: var(--errorfile-item-bg); @@ -2819,8 +2691,7 @@ tr.windowbg td, tr.bg td, .table_grid tr td { border-width: var(--errorfile-item-border-width); box-shadow: var(--errorfile-item-box-shadow); color: var(--errorfile-item-color); - padding-block: var(--errorfile-item-padding-block); - padding-inline: var(--errorfile-item-padding-inline); + padding-inline: .25em; } .errorfile_table .file_line { background: var(--errorfile-item-bg_line); @@ -2837,10 +2708,9 @@ tr.windowbg td, tr.bg td, .table_grid tr td { border-style: var(--generalbox-border-style); border-width: var(--generalbox-border-width); font-size: var(--generalbox-font-size); - margin-block: var(--generalbox-margin-block); - margin-inline: var(--generalbox-margin-inline); - padding-block: var(--generalbox-padding-block); - padding-inline: var(--generalbox-padding-inline); + margin-block: .75em .25em; + padding-block: .75em; + padding-inline: 3em 1.5em; position: relative; text-shadow: var(--generalbox-text-shadow); text-transform: var(--generalbox-text-transform); @@ -2901,10 +2771,8 @@ tr.windowbg td, tr.bg td, .table_grid tr td { border-color: var(--descbox-border-color); border-style: var(--descbox-border-style); border-width: var(--descbox-border-width); - margin-block: var(--descbox-margin-block); - margin-inline: var(--descbox-margin-inline); - padding-block: var(--descbox-padding-block); - padding-inline: var(--descbox-padding-inline); + margin-block: .5em; + padding: .5em .75em; } /* Styles for notice boxes @@ -2933,8 +2801,6 @@ tr.windowbg td, tr.bg td, .table_grid tr td { min-height: var(--genericbar-height); line-height: var(--genericbar-line-height); overflow: hidden; - padding-block: var(--genericbar-padding-block); - padding-inline: var(--genericbar-padding-inline); position: relative; text-shadow: var(--genericbar-text-shadow); } @@ -2980,8 +2846,6 @@ tr.windowbg td, tr.bg td, .table_grid tr td { min-height: var(--progressbar-height); line-height: var(--progressbar-line-height); overflow: hidden; - padding-block: var(--progressbar-padding-block); - padding-inline: var(--progressbar-padding-inline); position: relative; text-align: center; text-shadow: var(--progressbar-text-shadow); @@ -3076,8 +2940,8 @@ dl.stats { box-shadow: var(--capacitybar-box-shadow); display: block; height: var(--capacitybar-height); - margin-block: var(--capacitybar-margin-block); - margin-inline: var(--capacitybar-margin-inline); + margin-block: .2em 0; + margin-inline: .5em; width: var(--capacitybar-width); } #personal_messages .capacity_bar span { @@ -3187,9 +3051,8 @@ dl.addrules dt.floatleft { } #searchform .roundframe { --roundframe-border-radius: 0; - --roundframe-margin-block: 0; - --roundframe-padding-block: 2em; - --roundframe-padding-inline: 2em; + margin-block: 0; + padding: 2em; } #searchform .alt { border-top: 0; @@ -3265,10 +3128,8 @@ dl.addrules dt.floatleft { color: var(--tooltip-color); left: -9999px; max-width: var(--tooltip-width); - margin-block: var(--tooltip-margin-block); - margin-inline: var(--tooltip-margin-inline); - padding-block: var(--tooltip-padding-block); - padding-inline: var(--tooltip-padding-inline); + margin: 0; + padding: .5em .75em; overflow-wrap: break-word; position: absolute; word-wrap: break-word; /* IE fallback */ @@ -3293,10 +3154,8 @@ dl.addrules dt.floatleft { border-style: var(--popup-window-border-style); border-width: var(--popup-window-border-width); box-shadow: var(--popup-window-box-shadow); - margin-block: var(--popup-window-margin-block); - margin-inline: var(--popup-window-margin-inline); - padding-block: var(--popup-window-padding-block); - padding-inline: var(--popup-window-padding-inline); + margin-inline: auto; + padding-block: 0 .5em; position: relative; top: 20%; width: 480px; @@ -3316,11 +3175,9 @@ dl.addrules dt.floatleft { color: var(--popup-heading-color); display: flex; font-size: var(--popup-heading-font-size); - gap: var(--popup-heading-gap); - margin-block: var(--popup-heading-margin-block); - margin-inline: var(--popup-heading-margin-inline); - padding-block: var(--popup-heading-padding-block); - padding-inline: var(--popup-heading-padding-inline); + gap: .5em; + margin-block: 0 0.5em; + padding: .5em 1em; text-decoration: var(--popup-heading-text-decoration); text-shadow: var(--popup-heading-text-shadow); text-transform: var(--popup-heading-text-transform); @@ -3342,11 +3199,9 @@ dl.addrules dt.floatleft { color: var(--popup-content-color); font-size: var(--popup-content-font-size); line-height: var(--popup-content-line-height); - margin-block: var(--popup-content-margin-block); - margin-inline: var(--popup-content-margin-inline); + margin-inline: .5em; max-height: var(--popup-content-height); - padding-block: var(--popup-content-padding-block); - padding-inline: var(--popup-content-padding-inline); + padding: .5em; overflow: auto; } @@ -3699,11 +3554,7 @@ span.postby { /* Info Center Blocks */ #upshrink_stats { display: grid; - gap: var(--infocenter-gap); - margin-block: var(--infocenter-margin-block); - margin-inline: var(--infocenter-margin-inline); - padding-block: var(--infocenter-padding-block); - padding-inline: var(--infocenter-padding-inline); + gap: .5em 0; } .info_block { background: var(--infoblock-bg); @@ -3713,9 +3564,6 @@ span.postby { border-width: var(--infoblock-border-width); box-shadow: var(--infoblock-box-shadow); display: flex; - gap: var(--infoblock-gap); - margin-block: var(--infoblock-margin-block); - margin-inline: var(--infoblock-margin-inline); } .info_block_icon { background: var(--infoblock-icon-bg); @@ -3725,8 +3573,7 @@ span.postby { font-size: var(--infoblock-icon-font-size); justify-content: center; min-width: var(--infoblock-icon-width); - padding-block: var(--infoblock-icon-padding-block); - padding-inline: var(--infoblock-icon-padding-inline); + padding-block: .5em 1.25em; } .info_block_information { background: var(--infoblock-info-bg); @@ -3736,9 +3583,8 @@ span.postby { border-width: var(--infoblock-info-border-width); box-shadow: var(--infoblock-info-box-shadow); color: var(--infoblock-info-color); - gap: var(--infoblock-info-gap); - padding-block: var(--infoblock-info-padding-block); - padding-inline: var(--infoblock-info-padding-inline); + gap: .2em; + padding: .25em .5em; flex: 1; } @@ -3910,10 +3756,7 @@ div#pollmoderation { } .post_wrapper { display: grid; - gap: var(--postwrapper-gap); - grid: var(--postwrapper-grid); - padding-block: var(--postwrapper-padding-block); - padding-inline: var(--postwrapper-padding-inline); + grid: auto / var(--poster-width) 1fr; } /* poster details and list of items */ .poster { @@ -3924,11 +3767,8 @@ div#pollmoderation { gap: var(--poster-gap); grid-row: var(--poster-grid-row); hyphens: auto; - margin-block: var(--poster-margin-block); - margin-inline: var(--poster-margin-inline); overflow-wrap: break-word; - padding-block: var(--poster-padding-block); - padding-inline: var(--poster-padding-inline); + padding: .5em; word-wrap: break-word; width: var(--poster-width); } @@ -3936,10 +3776,6 @@ div#pollmoderation { background: var(--poster-title-bg); font-size: var(--poster-title-font-size); font-weight: var(--poster-title-font-weight); - margin-block: var(--poster-title-margin-block); - margin-inline: var(--poster-title-margin-inline); - padding-block: var(--poster-title-padding-block); - padding-inline: var(--poster-title-padding-inline); text-align: center; } .poster h4, @@ -3996,8 +3832,7 @@ div#pollmoderation { .postarea, .moderatorbar { grid-column: 2/-1; min-width: 0; - padding-block: var(--postarea-padding-block); - padding-inline: var(--postarea-padding-inline); + padding: .5em; } .postarea div.flow_hidden { width: 100%; @@ -4072,12 +3907,10 @@ div#pollmoderation { border-style: var(--post-inner-border-style); border-width: var(--post-inner-border-width); box-shadow: var(--post-inner-box-shadow); - margin-block: var(--post-inner-margin-block); - margin-inline: var(--post-inner-margin-inline); + margin-block: .5em 0; min-height: var(--post-inner-height); overflow-wrap: break-word; - padding-block: var(--post-inner-padding-block); - padding-inline: var(--post-inner-padding-inline); + padding: 1.25em .5em; word-wrap: break-word; } img.smiley { @@ -4122,12 +3955,11 @@ img.smiley { clear: both; } #quickreply_options .roundframe { - --roundframe-margin-block: 0; - --roundframe-padding-block: 8px 12px; - --roundframe-padding-inline: 10%; - padding: 8px 8% 12px; border-top-left-radius: 0; border-top-right-radius: 0; + margin-block: 0; + padding-block: 8px 12px; + padding-inline: 10%; } #quickReplyExpand { float: right; @@ -4135,9 +3967,8 @@ img.smiley { } /* Styles for edit post section */ form#postmodify .roundframe { - --roundframe-margin-block: 1.25em 0; - --roundframe-padding-block: 0.75em; - --roundframe-padding-inline: 12%; + margin-block: 1.25em 0; + padding: .75em 12%; } #post_header { padding: 6px; @@ -4270,10 +4101,8 @@ ul.post_options li { box-shadow: var(--attachments-box-shadow); font-size: var(--attachments-font-size); line-height: var(--attachments-line-height); - margin-block: var(--attachments-margin-block); - margin-inline: var(--attachments-margin-inline); - padding-block: var(--attachments-padding-block); - padding-inline: var(--attachments-padding-inline); + padding-block: 1em .25em; + padding-inline: .25em; } /* Signatures */ .signature { @@ -4285,10 +4114,8 @@ ul.post_options li { box-shadow: var(--signature-box-shadow); font-size: var(--signature-font-size); line-height: var(--signature-line-height); - margin-block: var(--signature-margin-block); - margin-inline: var(--signature-margin-inline); - padding-block: var(--signature-padding-block); - padding-inline: var(--signature-padding-inline); + padding-block: 1em .25em; + padding-inline: .25em; } .under_message { overflow: visible; @@ -4335,13 +4162,11 @@ ul.post_options li { font-family: var(--catbar-font-family); font-size: var(--catbar-font-size); font-weight: var(--catbar-font-weight); - gap: var(--catbar-gap); - line-height: var(--catbar-line-height); - margin-block: var(--catbar-margin-block); - margin-inline: var(--catbar-margin-inline); + gap: .25em .5em; + line-height: 1; + margin-block: .25em; min-height: var(--catbar-height); - padding-block: var(--catbar-padding-block); - padding-inline: var(--catbar-padding-inline); + padding: .5em .75em; text-decoration: var(--catbar-text-decoration); text-shadow: var(--catbar-text-shadow); } @@ -4349,7 +4174,7 @@ div.cat_bar { align-items: center; display: flex; flex-wrap: wrap; - gap: var(--titlebar-gap); + gap: 0 .5em; } .cat_bar:hover { color: var(--catbar-color_hover); @@ -4387,10 +4212,6 @@ h3.catbg { font-family: var(--catbg-font-family); font-size: var(--catbg-font-size); font-weight: var(--catbg-font-weight); - margin-block: var(--catbg-margin-block); - margin-inline: var(--catbg-margin-inline); - padding-block: var(--catbg-padding-block); - padding-inline: var(--catbg-padding-inline); text-decoration: var(--catbg-text-decoration); text-shadow: var(--catbg-text-shadow); } @@ -4423,8 +4244,7 @@ h3.catbg span.main_icons { } .cat_bar + .windowbg, .cat_bar + .roundframe { - --roundframe-margin-block: -1px 0; - --window-margin-block: -1px 0; + margin-block: -1px 0; border-top-left-radius: 0; border-top-right-radius: 0; } @@ -4444,12 +4264,10 @@ h3.catbg span.main_icons { font-family: var(--titlebar-font-family); font-size: var(--titlebar-font-size); font-weight: var(--titlebar-font-weight); - line-height: var(--titlebar-line-height); - margin-block: var(--titlebar-margin-block); - margin-inline: var(--titlebar-margin-inline); + line-height: 1; + margin-block: .25em; min-height: var(--titlebar-height); - padding-block: var(--titlebar-padding-block); - padding-inline: var(--titlebar-padding-inline); + padding: .25em 1em; text-decoration: var(--titlebar-text-decoration); text-shadow: var(--titlebar-text-shadow); } @@ -4457,7 +4275,7 @@ div.title_bar { align-items: center; display: flex; flex-wrap: wrap; - gap: var(--titlebar-gap); + gap: 0 .5em; } .title_bar:hover { color: var(--titlebar-color_hover); @@ -4493,10 +4311,6 @@ h3.titlebg { font-family: var(--titlebg-font-family); font-size: var(--titlebg-font-size); font-weight: var(--titlebg-font-weight); - margin-block: var(--titlebg-margin-block); - margin-inline: var(--titlebg-margin-inline); - padding-block: var(--titlebg-padding-block); - padding-inline: var(--titlebg-padding-inline); text-decoration: var(--titlebg-text-decoration); text-shadow: var(--titlebg-text-shadow); } @@ -4547,13 +4361,10 @@ h3.titlebg a:focus-visible { font-family: var(--subbar-font-family); font-size: var(--subbar-font-size); font-weight: var(--subbar-font-weight); - gap: var(--titlebar-gap); - line-height: var(--subbar-line-height); - margin-block: var(--subbar-margin-block); - margin-inline: var(--subbar-margin-inline); + gap: .5em; + line-height: 1; min-height: var(--subbar-height); - padding-block: var(--subbar-padding-block); - padding-inline: var(--subbar-padding-inline); + padding: .5em; text-decoration: var(--subbar-text-decoration); text-shadow: var(--subbar-text-shadow); } @@ -4585,10 +4396,6 @@ h3.subbg { font-family: var(--subbg-font-family); font-size: var(--subbg-font-size); font-weight: var(--subbg-font-weight); - margin-block: var(--subbg-margin-block); - margin-inline: var(--subbg-margin-inline); - padding-block: var(--subbg-padding-block); - padding-inline: var(--subbg-padding-inline); text-decoration: var(--subbg-text-decoration); text-shadow: var(--subbg-text-shadow); } @@ -4633,11 +4440,9 @@ h3.subbg a:focus-visible { box-shadow: var(--roundframe-box-shadow); color: var(--roundframe-color); font-size: var(--roundframe-font-size); - margin-block: var(--roundframe-margin-block); - margin-inline: var(--roundframe-margin-inline); + margin-block: .5em 0; overflow: auto; - padding-block: var(--roundframe-padding-block); - padding-inline: var(--roundframe-padding-inline); + padding: .75em 1em; text-shadow: var(--roundframe-text-shadow); } /* Information */ @@ -4650,11 +4455,9 @@ h3.subbg a:focus-visible { box-shadow: var(--information-box-shadow); color: var(--information-color); font-size: var(--information-font-size); - margin-block: var(--information-margin-block); - margin-inline: var(--information-margin-inline); + margin-block: 0 .5em; overflow: auto; - padding-block: var(--information-padding-block); - padding-inline: var(--information-padding-inline); + padding: 1em .75em; text-shadow: var(--information-text-shadow); } .generic_list_wrapper .information div { @@ -4705,11 +4508,10 @@ p.information img { border-width: var(--mentions-border-width); box-shadow: var(--mentions-box-shadow); display: none; - margin-block: var(--mentions-margin-block); - margin-inline: var(--mentions-margin-inline); + margin-block: 1.5em .25em; + margin-inline: 0; min-width: var(--mentions-width); - padding-block: var(--mentions-padding-block); - padding-inline: var(--mentions-padding-inline); + padding: 0; position: absolute; top: 0; z-index: 11110 !important; @@ -4730,10 +4532,8 @@ p.information img { cursor: var(--mentions-item-cursor); font-size: var(--mentions-item-font-size); font-weight: var(--mentions-item-font-weight); - margin-block: var(--mentions-item-margin-block); - margin-inline: var(--mentions-item-margin-inline); - padding-block: var(--mentions-item-padding-block); - padding-inline: var(--mentions-item-padding-inline); + margin: 0; + padding: .2em .25em; } .atwho-view li:last-child { --mentions-item-border-width: 0; @@ -4850,21 +4650,20 @@ h3.profile_hd::before, /* @todo display: flex; flex-direction: column; */ - gap: var(--sectionhead-gap); - margin-block: var(--sectionhead-margin-block); - margin-inline: var(--sectionhead-margin-inline); - padding-block: var(--sectionhead-padding-block); - padding-inline: var(--sectionhead-padding-inline); + gap: .25em 0; + margin-block: -2px 0.75em; + margin-inline: 0; + padding-block: 0.5em 1em; + padding-inline: .75em; } #display_head h2 { color: var(--sectionhead-title-color); font-weight: var(--sectionhead-title-font-weight); font-size: var(--sectionhead-title-font-size); line-height: var(--sectionhead-title-line-height); - margin-block: var(--sectionhead-title-margin-block); - margin-inline: var(--sectionhead-title-margin-inline); - padding-block: var(--sectionhead-title-padding-block); - padding-inline: var(--sectionhead-title-padding-inline); + margin-block: 0 .25em; + margin-inline: 0; + padding: 0; overflow-wrap: break-word; } #display_head p { @@ -4872,10 +4671,8 @@ h3.profile_hd::before, font-size: var(--sectionhead-text-font-size); font-weight: var(--sectionhead-text-font-weight); line-height: var(--sectionhead-text-line-height); - margin-block: var(--sectionhead-text-margin-block); - margin-inline: var(--sectionhead-text-margin-inline); - padding-block: var(--sectionhead-text-padding-block); - padding-inline: var(--sectionhead-text-padding-inline); + margin: 0; + padding: 0; } #display_head a { color: var(--sectionhead-link-color); @@ -5007,8 +4804,7 @@ input[name="attachBBC"] { .tfacode { background: var(--tfacode-bg); display: inline-block; - padding-block: var(--tfacode-padding-block); - padding-inline: var(--tfacode-padding-inline); + padding: .25em; } /* TFA QR block */ diff --git a/Themes/default/css/profile.css b/Themes/default/css/profile.css index 2eb4bde5e4..431d6a4f8f 100644 --- a/Themes/default/css/profile.css +++ b/Themes/default/css/profile.css @@ -15,11 +15,8 @@ box-shadow: var(--basicinfo-box-shadow); display: flex; flex-direction: column; - gap: var(--basicinfo-gap); - margin-block: var(--basicinfo-margin-block); - margin-inline: var(--basicinfo-margin-inline); - padding-block: var(--basicinfo-padding-block); - padding-inline: var(--basicinfo-padding-inline); + gap: .25em 0; + padding: .75em 1em; text-align: center; } #basicinfo h4 { @@ -185,12 +182,10 @@ box-shadow: var(--post-inner-box-shadow); clear: both; hyphens: auto; - margin-block: var(--post-inner-margin-block); - margin-inline: var(--post-inner-margin-inline); + margin-block: .5em 0; min-height: var(--post-inner-height); overflow-wrap: break-word; - padding-block: var(--post-inner-padding-block); - padding-inline: var(--post-inner-padding-inline); + padding: 1.25em .5em; word-wrap: break-word; } .topic h4 { @@ -255,11 +250,11 @@ margin: 0; padding: 0; } - #theme_settings li { margin: 10px 0; padding: 0; } + /* Paid Subscriptions */ #paid_subscription { width: 100%; diff --git a/Themes/default/css/responsive.css b/Themes/default/css/responsive.css index 48f6d95909..087b07f2ad 100644 --- a/Themes/default/css/responsive.css +++ b/Themes/default/css/responsive.css @@ -175,10 +175,10 @@ nav#main_menu, .navigate_section, #content_section { - --_padding-inline: 0.5em; - --contentsection-padding-inline: var(--_padding-inline); - --nav-padding-inline: var(--_padding-inline); - --navigatesection-margin-inline: var(--_padding-inline); + padding-inline: .5em; + } + .navigate_section { + margin-inline: .5em; } #boardindex_table .stats { display: none; @@ -531,7 +531,7 @@ flex-wrap: wrap; } h1.forumtitle { - --forumtitle-margin-inline: auto; + margin-inline: auto; } .board_moderators { display: none; @@ -545,7 +545,7 @@ max-width: calc(100vw - 17px); } #footer { - --footer-padding-inline: 0.5em; + padding-inline: 0.5em; } #footer .inner_wrap { justify-content: center; diff --git a/Themes/default/css/variables.css b/Themes/default/css/variables.css index ef6842d173..21f137d4a1 100644 --- a/Themes/default/css/variables.css +++ b/Themes/default/css/variables.css @@ -9,10 +9,7 @@ --body-font-size: 0.6889rem + 0.5682vw; --body-font-size-max: 1.125rem; --body-font-size-min: 0.8125rem; - --body-margin-block: 0; - --body-margin-inline: 0; - --body-padding-block: 0; - --body-padding-inline: 0; + /** Body Links **/ --body-link-color: hsl(var(--primary-color-hue), 75%, 33%); --body-link-color_focus: var(--body-link-color_hover); @@ -25,10 +22,6 @@ /** Wrapper **/ --wrapper-width: 1200px; - --wrapper-margin-block: 0; - --wrapper-margin-inline: auto; - --wrapper-padding-block: 0; - --wrapper-padding-inline: 0; /** Avatar General **/ --avatar-border-radius: 50%; @@ -44,10 +37,6 @@ --horizontalrule-border-width: 0; --horizontalrule-box-shadow: 0 1px 0 #bababa inset; --horizontalrule-height: 2px; - --horizontalrule-margin-block: 1em; - --horizontalrule-margin-inline: 0; - --horizontalrule-padding-block: 0; - --horizontalrule-padding-inline: 0; /** Heading Reset **/ --heading-color: #454545; @@ -82,8 +71,6 @@ --input-font-size: 0.8em; --input-height: 2.25em; --input-line-height: 1.5; - --input-margin-block: 0; - --input-margin-inline: 0; --input-outline: auto; --input-outline-offset: 0; --input-padding-block: 0; @@ -129,12 +116,8 @@ --button-gap: 0.2em 0.5em; --button-height: 2.5em; --button-line-height: 1; - --button-margin-block: 0; - --button-margin-inline: 0; --button-outline: auto; --button-outline-offset: 0.15em; - --button-padding-block: 0.25em; - --button-padding-inline: 0.75em; --button-text-decoration: none; --button-text-decoration_active: none; --button-text-decoration_focus: none; @@ -152,10 +135,6 @@ --fieldset-border-style: solid; --fieldset-border-width: 1px; --fieldset-box-shadow: none; - --fieldset-margin-block: 0 0.5em; - --fieldset-margin-inline: 0; - --fieldset-padding-block: 1.5em; - --fieldset-padding-inline: var(--fieldset-padding-block); /** Fieldset Legend **/ --fieldset-legend-bg: transparent; --fieldset-legend-border-color: transparent; @@ -164,10 +143,6 @@ --fieldset-legend-border-width: 0; --fieldset-legend-box-shadow: none; --fieldset-legend-color: hsl(0, 0%, 33%); - --fieldset-legend-margin-block: 0; - --fieldset-legend-margin-inline: 0; - --fieldset-legend-padding-block: 0; - --fieldset-legend-padding-inline: 0; /** Details **/ --details-bg: transparent; @@ -179,10 +154,6 @@ --details-border-width: 1px 0; --details-box-shadow: none; --details-box-shadow_open: none; - --details-margin-block: 0 0.5em; - --details-margin-inline: 0; - --details-padding-block: 0; - --details-padding-inline: 0; /** Details Summary **/ --details-summary-bg: transparent; --details-summary-bg_open: transparent; @@ -208,10 +179,6 @@ --header-border-width: 0; --header-box-shadow: none; --header-height: 80px; - --header-margin-block: 0; - --header-margin-inline: 0; - --header-padding-block: 0.5em; - --header-padding-inline: 0.2em; /** Forum Title **/ --forumtitle-color: hsl(213, 58%, 37%); @@ -220,10 +187,6 @@ --forumtitle-font-family: "Tahoma", sans-serif; --forumtitle-font-size: 1.8em; --forumtitle-font-weight: 400; - --forumtitle-margin-block: 0; - --forumtitle-margin-inline: 0; - --forumtitle-padding-block: 0; - --forumtitle-padding-inline: 0; --forumtitle-text-decoration: none; --forumtitle-text-decoration_focus: var(--forumtitle-text-decoration_hover); --forumtitle-text-decoration_hover: underline; @@ -239,11 +202,6 @@ --contentsection-border-width: 0; --contentsection-box-shadow: none; --contentsection-color: inherit; - --contentsection-clear: both; - --contentsection-margin-block: 0; - --contentsection-margin-inline: auto; - --contentsection-padding-block: 0; - --contentsection-padding-inline: 0; /** Footer **/ --footer-bg: var(--primary-color-700); @@ -254,12 +212,7 @@ --footer-box-shadow: none; --footer-color: hsl(0, 0%, 96%); --footer-font-size: 0.85em; - --footer-gap: 1.25em 0.25em; - --footer-height: 0; - --footer-margin-block: 4em 0; - --footer-margin-inline: 0; - --footer-padding-block: 0.75em; - --footer-padding-inline: 0; + --footer-height: 35px; /** Footer Links **/ --footer-link-color: #fff; --footer-link-color_focus: var(--footer-link-color_hover); @@ -281,10 +234,6 @@ --navigatesection-border-style: solid; --navigatesection-border-width: 1px; --navigatesection-box-shadow: 0px 0px 1px 1px rgb(255,255,255) inset; - --navigatesection-margin-block: 0.5em 0.75em; - --navigatesection-margin-inline: 0; - --navigatesection-padding-block: 0; - --navigatesection-padding-inline: 0; /* Breadcrumb */ --breadcrumb-bg: var(--navigatesection-bg); @@ -296,20 +245,11 @@ --breadcrumb-color: hsl(0, 0%, 27%); --breadcrumb-font-size: 0.9em; --breadcrumb-font-family: inherit; - --breadcrumb-gap: 0.25em 0.15em; - --breadcrumb-margin-block: 0; - --breadcrumb-margin-inline: 0; - --breadcrumb-padding-block: 0.75em; - --breadcrumb-padding-inline: 0.75em; /** Breadcrumb Divider **/ --breadcrumb-divider-color: hsl(206, 38%, 40%); --breadcrumb-divider-font-family: Arial, sans-serif; --breadcrumb-divider-font-size: 0.8em; --breadcrumb-divider-line-height: 150%; - --breadcrumb-divider-margin-block: 0; - --breadcrumb-divider-margin-inline: 0; - --breadcrumb-divider-padding-block: 0; - --breadcrumb-divider-padding-inline: 0.4em; /** Breadcrumb Link **/ --breadcrumb-link-color: var(--primary-color-800); --breadcrumb-link-color_focus: var(--breadcrumb-link-color_hover); @@ -319,12 +259,7 @@ --breadcrumb-link-font-weight_active: 700; --breadcrumb-link-font-weight_focus: var(--breadcrumb-link-font-weight_hover); --breadcrumb-link-font-weight_hover: var(--breadcrumb-link-font-weight); - --breadcrumb-link-gap: 0 0.25em; --breadcrumb-link-line-height: 1; - --breadcrumb-link-margin-block: 0; - --breadcrumb-link-margin-inline: 0; - --breadcrumb-link-padding-block: 0.2em; - --breadcrumb-link-padding-inline: 0.2em; --breadcrumb-link-text-decoration: none; --breadcrumb-link-text-decoration_active: none; --breadcrumb-link-text-decoration_focus: none; @@ -342,11 +277,7 @@ --sectionhead-border-width: 0 1px 1px; --sectionhead-box-shadow: var(--breadcrumb-box-shadow); --sectionhead-color: #333; - --sectionhead-gap: 0.25em 0; - --sectionhead-margin-block: -2px 0.75em; - --sectionhead-margin-inline: 0; - --sectionhead-padding-block: 0.5em 1em; - --sectionhead-padding-inline: var(--breadcrumb-padding-inline); + /** Sectin Head Title **/ --sectionhead-title-color: inherit; --sectionhead-title-color_focus: inherit; @@ -356,10 +287,6 @@ --sectionhead-title-font-weight_focus: normal; --sectionhead-title-font-weight_hover: normal; --sectionhead-title-line-height: 1em; - --sectionhead-title-margin-block: 0 0.25em; - --sectionhead-title-margin-inline: 0; - --sectionhead-title-padding-block: 0; - --sectionhead-title-padding-inline: 0; --sectionhead-title-text-decoration: none; --sectionhead-title-text-decoration_focus: none; --sectionhead-title-text-decoration_hover: none; @@ -370,11 +297,6 @@ --sectionhead-text-color: hsl(0, 0%, 58%); --sectionhead-text-font-size: 1em; --sectionhead-text-font-weight: normal; - --sectionhead-text-line-height: 1em; - --sectionhead-text-margin-block: 0; - --sectionhead-text-margin-inline: 0; - --sectionhead-text-padding-block: 0; - --sectionhead-text-padding-inline: 0; /** Section Head Link **/ --sectionhead-link-color: var(--body-link-color); --sectionhead-link-color_focus: var(--body-link-color_focus); @@ -383,6 +305,7 @@ --sectionhead-link-font-weight: 700; --sectionhead-link-font-weight_focus: var(--sectionhead-link-font-weight_hover); --sectionhead-link-font-weight_hover: var(--sectionhead-link-font-weight); + --sectionhead-text-line-height: 1.2; --sectionhead-link-text-decoration: none; --sectionhead-link-text-decoration_focus: none; --sectionhead-link-text-decoration_hover: none; @@ -400,10 +323,6 @@ --newsfader-color: inherit; --newsfader-font-size: 0.9em; --newsfader-height: 5em; - --newsfader-margin-block: 0.5em 1em; - --newsfader-margin-inline: 0; - --newsfader-padding-block: 0.8em; - --newsfader-padding-inline: var(--newsfader-padding-block); /** News Fader Icon **/ --newsfader-icon-bg: hsl(var(--primary-color-hue), 100%, 91%); --newsfader-icon-color: var(--primary-color-800); @@ -418,12 +337,7 @@ --newsfader-pager-border-style: solid; --newsfader-pager-border-width: 1px; --newsfader-pager-box-shadow: none; - --newsfader-pager-gap: 0.5em; --newsfader-pager-height: 1em; - --newsfader-pager-margin-block: 0; - --newsfader-pager-margin-inline: 0; - --newsfader-pager-padding-block: 0; - --newsfader-pager-padding-inline: 0; --newsfader-pager-width: var(--newsfader-pager-height); /** Top Info **/ @@ -461,15 +375,10 @@ --topinfo-font-weight_active: 400; --topinfo-font-weight_focus: var(--topinfo-font-weight_hover); --topinfo-font-weight_hover: 400; - --topinfo-gap: 0.25em 0.4em; --topinfo-height: 50px; --topinfo-line-height: 1; - --topinfo-margin-block: 0; - --topinfo-margin-inline: 0; --topinfo-outline: auto; --topinfo-outline-offset: 0.15em; - --topinfo-padding-block: 0.5em; - --topinfo-padding-inline: 0.5em; --topinfo-text-decoration: none; --topinfo-text-decoration_active: none; --topinfo-text-decoration_focus: none; @@ -486,10 +395,6 @@ --topinfo-avatar-border-width: 0; --topinfo-avatar-box-shadow: none; --topinfo-avatar-height: calc(var(--topinfo-height) * 0.6); - --topinfo-avatar-margin-block: 0; - --topinfo-avatar-margin-inline: 0; - --topinfo-avatar-padding-block: 0; - --topinfo-avatar-padding-inline: 0; --topinfo-avatar-width: var(--topinfo-avatar-height); /** Top Menu **/ @@ -514,10 +419,6 @@ --topmenu-font-weight: 400; --topmenu-height: 22em; --topmenu-line-height: 1; - --topmenu-margin-block: 2px 0; - --topmenu-margin-inline: 0; - --topmenu-padding-block: 0; - --topmenu-padding-inline: 0; --topmenu-text-shadow: none; --topmenu-text-transform: normal; --topmenu-width: 20em; @@ -528,16 +429,12 @@ --topmenu-header-border-width: 0 0 1px; --topmenu-header-color: inherit; --topmenu-header-font-size: 1em; - --topmenu-header-padding-block: 0.25em; - --topmenu-header-padding-inline: 0.75em; /** Top Menu Body **/ --topmenu-body-bg: transparent; --topmenu-body-border-color: transparent; --topmenu-body-border-style: solid; --topmenu-body-border-width: 0; --topmenu-body-font-size: 1em; - --topmenu-body-padding-block: 0; - --topmenu-body-padding-inline: 0; /** Profile Links **/ --profilelinks-bg: transparent; @@ -549,10 +446,6 @@ --profilelinks-font-size: inherit; --profilelinks-gap: 0; --profilelinks-grid: auto / 1fr 1fr; - --profilelinks-marign-block: 0; - --profilelinks-margin-inline: 0; - --profilelinks-padding-block: 0.25em; - --profilelinks-padding-inline: var(--profilelinks-padding-block); /** Profile Links Item **/ --profilelinks-item-bg: var(--dropmenu-an-bg); --profilelinks-item-bg_focus: var(--dropmenu-an-bg_focus); @@ -566,14 +459,9 @@ --profilelinks-item-font-weight: var(--dropmenu-an-font-weight); --profilelinks-item-font-weight_focus: var(--dropmenu-an-font-weight_focus); --profilelinks-item-font-weight_hover: var(--dropmenu-an-font-weight_hover); - --profilelinks-item-gap: var(--dropmenu-an-gap); --profilelinks-item-height: 2em; - --profilelinks-item-margin-block: var(--dropmenu-an-margin-block); - --profilelinks-item-margin-inline: var(--dropmenu-an-margin-inline); --profilelinks-item-outline: auto; --profilelinks-item-outline-offset: 0; - --profilelinks-item-padding-block: var(--dropmenu-an-padding-block); - --profilelinks-item-padding-inline: var(--dropmenu-an-padding-inline); --profilelinks-item-text-decoration: var(--dropmenu-an-text-decoration); --profilelinks-item-text-decoration_focus: var(--dropmenu-an-text-decoration_focus); --profilelinks-item-text-decoration_hover: var(--dropmenu-an-text-decoration_hover); @@ -596,10 +484,6 @@ --genericnoti-font-size: 1em; --genericnoti-gap: 0.25em 1em; --genericnoti-height: var(--genericnoti-avatar-height); - --genericnoti-margin-block: 0; - --genericnoti-margin-inline: 0; - --genericnoti-padding-block: 0.5em; - --genericnoti-padding-inline: 0.5em; /** Generic Noti Avatar **/ --genericnoti-avatar-height: 2.5em; --genericnoti-avatar-width: var(--genericnoti-avatar-height); @@ -609,9 +493,6 @@ /** Generic Noti Link **/ --genericnoti-link-color: var(--body-link-color); --genericnoti-link-color_hover: var(--body-link-color_hover); - /** Generic Noti Read **/ - --genericnoti-read-padding-block: 1em; - --genericnoti-read-padding-inline: 0.75em; /** AMT **/ --amt-bg: var(--secondary-color-700); @@ -642,8 +523,6 @@ --new-font-weight_focus: var(--new-font-weight_hover); --new-font-weight_hover: var(--new-font-weight); --new-line-height: 15px; - --new-padding-block: 0.1em; - --new-padding-inline: 0.6em; --new-text-decoration: none; --new-text-decoration_focus: var(--new-text-decoration_hover); --new-text-decoration_hover: none; @@ -657,10 +536,6 @@ --nav-border-style: solid; --nav-border-width: 2px 0; --nav-height: 55px; - --nav-margin-block: 0; - --nav-margin-inline: 0; - --nav-padding-block: 0.6em; - --nav-padding-inline: 0; /** Mobile Nav **/ --mobilenav-color: #fff; @@ -670,9 +545,6 @@ --mobilenav-font-weight: 700; --mobilenav-font-weight_focus: var(--mobilenav-font-weight_hover); --mobilenav-font-weight_hover: 700; - --mobilenav-gap: 0 0.75em; - --mobilenav-padding-block: 0.25em; - --mobilenav-padding-inline: 0; --mobilenav-text-decoration: none; --mobilenav-text-shadow: none; --mobilenav-text-shadow_focus: none; @@ -685,30 +557,17 @@ --mobilegeneric-font-weight: 400; --mobilegeneric-font-weight_focus: var(--mobilegeneric-font-weight_hover); --mobilegeneric-font-weight_hover: var(--mobilegeneric-font-weight); - --mobilegeneric-gap: 0 0.75em; - --mobilegeneric-padding-block: 0.25em; - --mobilegeneric-padding-inline: 0.5em; --mobilegeneric-text-decoration: none; --mobilegeneric-text-shadow: none; --mobilegeneric-text-shadow_focus: none; --mobilegeneric-text-shadow_hover: none; /** Generic Menu **/ - --genericmenu-bg: var(--primary-color-800); + --genericmenu-bg: var(--primary-color-800) ; --genericmenu-border-color: transparent; --genericmenu-border-radius: 0.25em; --genericmenu-border-style: solid; --genericmenu-border-width: 0; - --genericmenu-margin-block: 0.25em; - --genericmenu-margin-inline: 0; - --genericmenu-padding-block: 0.5em; - --genericmenu-padding-inline: 0.25em; - /** Dropmenu list **/ - --dropmenu-main-gap: 0.5em; - --dropmenu-main-margin-block: 0; - --dropmenu-main-margin-inline: 0; - --dropmenu-main-padding-block: 0; - --dropmenu-main-padding-inline: 0; /** Dropmenu first level links **/ --dropmenu-a1-bg: transparent; --dropmenu-a1-bg_active: #fff; @@ -742,12 +601,7 @@ --dropmenu-a1-font-weight_active: 700; --dropmenu-a1-font-weight_focus: 400; --dropmenu-a1-font-weight_hover: 400; - --dropmenu-a1-gap: 0.5em; --dropmenu-a1-height: 2.75em; - --dropmenu-a1-margin-block: 0; - --dropmenu-a1-margin-inline: 0; - --dropmenu-a1-padding-block: 0.2em; - --dropmenu-a1-padding-inline: 0.75em; --dropmenu-a1-outline: auto; --dropmenu-a1-outline-offset: 0; --dropmenu-a1-text-decoration: none; @@ -765,11 +619,6 @@ --dropmenu-child-border-style: solid; --dropmenu-child-border-width: 1px; --dropmenu-child-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3); - --dropmenu-child-gap: 0; - --dropmenu-child-margin-block: 0; - --dropmenu-child-margin-inline: 0; - --dropmenu-child-padding-block: 0.25em; - --dropmenu-child-padding-inline: 0.25em; --dropmenu-child-width: 15em; /** Dropmenu n level links **/ --dropmenu-an-bg: transparent; @@ -804,12 +653,7 @@ --dropmenu-an-font-weight_active: 700; --dropmenu-an-font-weight_focus: 400; --dropmenu-an-font-weight_hover: 400; - --dropmenu-an-gap: 0.2em 0.5em; --dropmenu-an-height: 2.5em; - --dropmenu-an-margin-block: 0; - --dropmenu-an-margin-inline: 0; - --dropmenu-an-padding-block: 0.2em; - --dropmenu-an-padding-inline: 0.75em; --dropmenu-an-outline: auto; --dropmenu-an-outline-offset: 0; --dropmenu-an-text-decoration: none; @@ -828,11 +672,6 @@ --quickbuttons-border-style: solid; --quickbuttons-border-width: 0; --quickbuttons-box-shadow: none; - --quickbuttons-gap: 0.25em; - --quickbuttons-margin-block: 0.25em; - --quickbuttons-margin-inline: 0; - --quickbuttons-padding-block: 0; - --quickbuttons-padding-inline: 0; /** Quickbuttons Link **/ --quickbuttons-link-bg: hsl(var(--primary-color-hue), 20%, 85%); --quickbuttons-link-bg_focus: var(--quickbuttons-link-bg_hover); @@ -858,15 +697,10 @@ --quickbuttons-link-font-weight: 400; --quickbuttons-link-font-weight_focus: var(--quickbuttons-link-font-weight_hover); --quickbuttons-link-font-weight_hover: var(--quickbuttons-link-font-weight); - --quickbuttons-link-gap: 0.2em 0.5em; --quickbuttons-link-height: 2em; --quickbuttons-link-line-height: 1; - --quickbuttons-link-margin-block: 0; - --quickbuttons-link-margin-inline: 0; --quickbuttons-link-outline: auto; --quickbuttons-link-outline-offset: 0.1em; - --quickbuttons-link-padding-block: 0.6em; - --quickbuttons-link-padding-inline: 0.75em; --quickbuttons-link-text-decoration: none; --quickbuttons-link-text-decoration_active: var(--quickbuttons-link-text-decoration); --quickbuttons-link-text-decoration_focus: var(--quickbuttons-link-text-decoration_hover); @@ -884,11 +718,6 @@ --quickoptions-border-style: solid; --quickoptions-border-width: 1px; --quickoptions-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3); - --quickoptions-gap: 0; - --quickoptions-margin-block: 0; - --quickoptions-margin-inline: 0; - --quickoptions-padding-block: 0.2em; - --quickoptions-padding-inline: 0.2em; --quickoptions-width: 14em; /** Post Options Link **/ --quickoptions-link-bg: transparent; @@ -915,12 +744,7 @@ --quickoptions-link-font-weight: 400; --quickoptions-link-font-weight_focus: 400; --quickoptions-link-font-weight_hover: 400; - --quickoptions-link-gap: 0.2em 0.5em; --quickoptions-link-height: 2.5em; - --quickoptions-link-margin-block: 0; - --quickoptions-link-margin-inline: 0; - --quickoptions-link-padding-block: 0.2em; - --quickoptions-link-padding-inline: 0.75em; --quickoptions-link-outline: auto; --quickoptions-link-outline-offset: 0; --quickoptions-link-text-decoration: none; @@ -937,11 +761,6 @@ --buttonlist-border-style: solid; --buttonlist-border-width: 0; --buttonlist-box-shadow: none; - --buttonlist-gap: 0.5em; - --buttonlist-margin-block: 0.25em; - --buttonlist-margin-inline: 0; - --buttonlist-padding-block: 0; - --buttonlist-padding-inline: 0; /** Buttonlist Link **/ --buttonlist-link-bg: hsl(var(--primary-color-hue), 20%, 85%); --buttonlist-link-bg_active: var(--secondary-color-700); @@ -978,15 +797,10 @@ --buttonlist-link-font-weight_active: var(--buttonlist-link-font-weight); --buttonlist-link-font-weight_focus: var(--buttonlist-link-font-weight_hover); --buttonlist-link-font-weight_hover: var(--buttonlist-link-font-weight); - --buttonlist-link-gap: 0.2em 0.5em; --buttonlist-link-height: 2em; --buttonlist-link-line-height: 1; - --buttonlist-link-margin-block: 0; - --buttonlist-link-margin-inline: 0; --buttonlist-link-outline: auto; --buttonlist-link-outline-offset: 0.15em; - --buttonlist-link-padding-block: 0.6em; - --buttonlist-link-padding-inline: 0.75em; --buttonlist-link-text-decoration: none; --buttonlist-link-text-decoration_active: var(--buttonlist-link-text-decoration); --buttonlist-link-text-decoration_focus: var(--buttonlist-link-text-decoration_hover); @@ -1005,11 +819,6 @@ --pagesection-border-width: 0; --pagesection-box-shadow: none; --pagesection-color: inherit; - --pagesection-clear: both; - --pagesection-margin-block: 0.25em; - --pagesection-margin-inline: auto; - --pagesection-padding-block: 0; - --pagesection-padding-inline: 0; /** Pages **/ --pages-bg: transparent; @@ -1018,11 +827,6 @@ --pages-border-style: solid; --pages-border-width: 0; --pages-box-shadow: none; - --pages-gap: 0.2em; - --pages-margin-block: 0; - --pages-margin-inline: 0; - --pages-padding-block: 0; - --pages-padding-inline: 0; /** Page Link **/ --pages-link-bg: var(--buttonlist-link-bg); --pages-link-bg_active: var(--buttonlist-link-bg_active); @@ -1059,15 +863,10 @@ --pages-link-font-weight_active: 700; --pages-link-font-weight_focus: var(--pages-link-font-weight_hover); --pages-link-font-weight_hover: var(--pages-link-font-weight); - --pages-link-gap: 0.2em 0.5em; --pages-link-height: 2em; --pages-link-line-height: 1; - --pages-link-margin-block: 0; - --pages-link-margin-inline: 0; --pages-link-outline: auto; --pages-link-outline-offset: 0.15em; - --pages-link-padding-block: 0.6em; - --pages-link-padding-inline: 0.75em; --pages-link-text-decoration: none; --pages-link-text-decoration_active: var(--pages-link-text-decoration); --pages-link-text-decoration_focus: var(--pages-link-text-decoration_hover); @@ -1093,13 +892,7 @@ --catbar-font-weight: 400; --catbar-font-weight_focus: 400; --catbar-font-weight_hover: 400; - --catbar-gap: 0 0.5em; - --catbar-line-height: 1; --catbar-height: 2.5em; - --catbar-margin-block: 0.25em; - --catbar-margin-inline: 0; - --catbar-padding-block: 0.5em; - --catbar-padding-inline: 0.75em; --catbar-text-decoration: none; --catbar-text-decoration_focus: none; --catbar-text-decoration_hover: none; @@ -1121,12 +914,8 @@ --catbg-font-weight: inherit; --catbg-font-weight_focus: inherit; --catbg-font-weight_hover: inherit; - --catbg-margin-block: 0; - --catbg-margin-inline: 0; --catbg-outline: auto; --catbg-outline-offset: 0; - --catbg-padding-block: 0; - --catbg-padding-inline: 0; --catbg-text-decoration: none; --catbg-text-decoration_focus: none; --catbg-text-decoration_hover: none; @@ -1149,13 +938,7 @@ --titlebar-font-weight: 400; --titlebar-font-weight_focus: var(--titlebar-font-weight_hover); --titlebar-font-weight_hover: var(--titlebar-font-weight); - --titlebar-gap: 0 0.5em; - --titlebar-line-height: 1; --titlebar-height: 2.25em; - --titlebar-margin-block: 0.25em; - --titlebar-margin-inline: 0; - --titlebar-padding-block: 0.25em; - --titlebar-padding-inline: 1em; --titlebar-text-decoration: none; --titlebar-text-decoration_focus: none; --titlebar-text-decoration_hover: none; @@ -1177,12 +960,8 @@ --titlebg-font-weight: 700; --titlebg-font-weight_focus: var(--titlebg-font-weight_hover); --titlebg-font-weight_hover: var(--titlebg-font-weight); - --titlebg-margin-block: 0; - --titlebg-margin-inline: 0; --titlebg-outline: auto; --titlebg-outline-offset: 0; - --titlebg-padding-block: 0; - --titlebg-padding-inline: 0; --titlebg-text-decoration: none; --titlebg-text-decoration_focus: none; --titlebg-text-decoration_hover: none; @@ -1205,13 +984,7 @@ --subbar-font-weight: 400; --subbar-font-weight_focus: var(--subbar-font-weight_hover); --subbar-font-weight_hover: var(--subbar-font-weight); - --subbar-gap: 0.5em; - --subbar-line-height: 1; --subbar-height: auto; - --subbar-margin-block: 0; - --subbar-margin-inline: 0; - --subbar-padding-block: 0.5em; - --subbar-padding-inline: 0.5em; --subbar-text-decoration: none; --subbar-text-decoration_focus: none; --subbar-text-decoration_hover: none; @@ -1233,12 +1006,8 @@ --subbg-font-weight: inherit; --subbg-font-weight_focus: var(--subbg-font-weight_hover); --subbg-font-weight_hover: var(--subbg-font-weight); - --subbg-margin-block: 0; - --subbg-margin-inline: 0; --subbg-outline: auto; --subbg-outline-offset: 0; - --subbg-padding-block: 0; - --subbg-padding-inline: 0; --subbg-text-decoration: none; --subbg-text-decoration_focus: none; --subbg-text-decoration_hover: none; @@ -1296,10 +1065,6 @@ --roundframe-box-shadow: none; --roundframe-color: inherit; --roundframe-font-size: 1em; - --roundframe-margin-block: 0.5em 0; - --roundframe-margin-inline: 0; - --roundframe-padding-block: 0.75em; - --roundframe-padding-inline: 1em; --roundframe-text-shadow: none; /** Information Area **/ @@ -1311,20 +1076,12 @@ --information-box-shadow: none; --information-color: inherit; --information-font-size: 0.95em; - --information-margin-block: 0 0.5em; - --information-margin-inline: 0; - --information-padding-block: 1em; - --information-padding-inline: 0.75em; --information-text-shadow: none; /** General Box styles **/ --generalbox-border-style: solid; --generalbox-border-width: 2px 0; --generalbox-font-size: 1.1em; - --generalbox-margin-block: 0.75em 0.25em; - --generalbox-margin-inline: 0; - --generalbox-padding-block: 0.75em; - --generalbox-padding-inline: 3em 1.5em; --generalbox-text-shadow: none; --generalbox-text-transform: normal; @@ -1347,10 +1104,6 @@ --descbox-border-color: hsl(0, 0%, 77%); --descbox-border-style: solid; --descbox-border-width: 1px; - --descbox-margin-block: 0.5em; - --descbox-margin-inline: 0; - --descbox-padding-block: 0.5em; - --descbox-padding-inline: 0.75em; /** Code Block **/ --code-bg: hsl(0, 0%, 90%); @@ -1361,18 +1114,10 @@ --code-box-shadow: none; --code-font-size: 0.8rem; --code-height: 25em; - --code-margin-block: 0.2em 0.4em; - --code-margin-inline: 0.2em; - --code-padding-block: 0.2em; - --code-padding-inline: 1em; /** Code Header **/ --code-header-color: hsl(0, 0%, 40%); --code-header-font-size: 0.9em; --code-header-font-weight: 400; - --code-header-margin-block: 0.2em 0.4em; - --code-header-margin-inline: 0.2em; - --code-header-padding-block: 0.2em; - --code-header-padding-inline: 0.25em; --code-header-text-decoration: none; /** Quote Block **/ @@ -1383,10 +1128,6 @@ --quote-border-width: 1px 1px 2px; --quote-box-shadow: none; --quote-font-size: 0.8em; - --quote-margin-block: 0.2em 0.5em; - --quote-margin-inline: 0.25em; - --quote-padding-block: 0.5em; - --quote-padding-inline: 1em; /** Alternate Quote **/ --quote-alternate-bg: hsl(var(--primary-color-hue), 22%, 95%); /** Quote Cite **/ @@ -1398,18 +1139,10 @@ --quote-cite-box-shadow: none; --quote-cite-color: #4d4d4d; --quote-cite-font-size: 0.9em; - --quote-cite-margin-block: 0 0.5em; - --quote-cite-margin-inline: 0; - --quote-cite-padding-block: 0; - --quote-cite-padding-inline: 0.2em; /** Quote Header **/ --quote-header-color: hsl(0, 0%, 40%); --quote-header-font-size: 0.9em; --quote-header-font-weight: 400; - --quote-header-margin-block: 0.2em 0.4em; - --quote-header-margin-inline: 0.2em; - --quote-header-padding-block: 0.2em; - --quote-header-padding-inline: 0.25em; --quote-header-text-decoration: none; /** Post BBC Links **/ @@ -1427,10 +1160,6 @@ --autosuggest-border-style: solid; --autosuggest-border-width: 1px; --autosuggest-box-shadow: none; - --autosuggest-margin-block: 0; - --autosuggest-margin-inline: 0; - --autosuggest-padding-block: 0; - --autosuggest-padding-inline: 0; /** Auto Suggest Item **/ --autosuggest-item-bg: hsl(0, 0%, 87%); --autosuggest-item-bg_hover: hsl(0, 0%, 53%); @@ -1445,10 +1174,6 @@ --autosuggest-item-font-size_hover: var(--autosuggest-item-font-size); --autosuggest-item-font-weight: 50px; --autosuggest-item-font-weight_hover: 50px; - --autosuggest-item-margin-block: 0; - --autosuggest-item-margin-inline: 0; - --autosuggest-item-padding-block: 0.2em; - --autosuggest-item-padding-inline: 0.25em; /* Mentions */ --mentions-bg: hsl(0, 0%, 100%); @@ -1457,10 +1182,6 @@ --mentions-border-style: solid; --mentions-border-width: 1px; --mentions-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - --mentions-margin-block: 1.5em 0.25em; - --mentions-margin-inline: 0; - --mentions-padding-block: 0; - --mentions-padding-inline: 0; --mentions-width: 120px; /** Mentions Item **/ --mentions-item-bg: #f2f2f2; @@ -1475,10 +1196,6 @@ --mentions-item-font-size_current: var(--mentions-item-font-size); --mentions-item-font-weight: 50px; --mentions-item-font-weight_current: 50px; - --mentions-item-margin-block: 0; - --mentions-item-margin-inline: 0; - --mentions-item-padding-block: 0.2em; - --mentions-item-padding-inline: 0.25em; /** AJAX Notification Bar **/ --ajaxinprogress-bg: hsl(0, 0%, 100%); @@ -1488,17 +1205,10 @@ --ajaxinprogress-color: var(--secondary-color-600); --ajaxinprogress-font-size: 1.5em; --ajaxinprogress-font-weight: 400; - --ajaxinprogress-margin-block: 0; - --ajaxinprogress-margin-inline: 0; - --ajaxinprogress-padding-block: 0.75em; - --ajaxinprogress-padding-inline: 1.25em; + --ajaxinprogress-line-height: 25px; /** AJAX Notification Bar Link **/ --ajaxinprogress-link-color: var(--secondary-color-900); --ajaxinprogress-link-font-size: 0.9em; - --ajaxinprogress-link-margin-block: 0; - --ajaxinprogress-link-margin-inline: 0 2em; - --ajaxinprogress-link-padding-block: 0; - --ajaxinprogress-link-padding-inline: 0; --ajaxinprogress-link-text-decoration: underline; /** Moderation Links **/ @@ -1511,10 +1221,6 @@ --moderationlink-color: #222; --moderationlink-font-size: 0.65em; --moderationlink-font-weight: 700; - --moderationlink-margin-block: 0; - --moderationlink-margin-inline: 0; - --moderationlink-padding-block: 0.1em; - --moderationlink-padding-inline: 0.75em; /** ToolTips **/ --tooltip-bg: hsl(0, 0%, 100%); @@ -1524,18 +1230,8 @@ --tooltip-border-width: 1px; --tooltip-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.05) inset; --tooltip-color: #333333; - --tooltip-margin-block: 0; - --tooltip-margin-inline: 0; - --tooltip-padding-block: 0.5em; - --tooltip-padding-inline: 0.75em; --tooltip-width: 350px; - /** Info Center **/ - --infocenter-gap: 0.5em 0; - --infocenter-margin-block: 0; - --infocenter-margin-inline: 0; - --infocenter-padding-block: 0; - --infocenter-padding-inline: 0; /** Info Center Block **/ --infoblock-bg: var(--window-bg); --infoblock-border-color: var(--window-border-color); @@ -1543,20 +1239,13 @@ --infoblock-border-style: solid; --infoblock-border-width: 0; --infoblock-box-shadow: 0px 2px 0px hsl(210, 11%, 85%); - --infoblock-gap: 0; - --infoblock-margin-block: 0; - --infoblock-margin-inline: 0; - --infoblock-padding-block: 0; - --infoblock-padding-inline: 0; /** Info Center Icon **/ --infoblock-icon-bg: hsl(0, 0%, 96%); --infoblock-icon-box-shadow: 0; --infoblock-icon-color: inherit; --infoblock-icon-font-size: 1em; - --infoblock-icon-padding-block: 0.5em; - --infoblock-icon-padding-inline: 1.25em; --infoblock-icon-width: 3em; - /** INfo Center Information **/ + /** Info Center Information **/ --infoblock-info-bg: transparent; --infoblock-info-border-color: transparent; --infoblock-info-border-radius: var(--infoblock-border-radius); @@ -1564,9 +1253,6 @@ --infoblock-info-border-width: 0; --infoblock-info-box-shadow: none; --infoblock-info-color: inherit; - --infoblock-info-gap: 0.2em; - --infoblock-info-padding-block: 0.25em; - --infoblock-info-padding-inline: 0.5em; /** Generic Bar **/ --genericbar-bg: hsl(0, 0%, 100%); @@ -1580,8 +1266,6 @@ --genericbar-font-weight: 400; --genericbar-height: 1em; --genericbar-line-height: 1.4em; - --genericbar-padding-block: 0; - --genericbar-padding-inline: 0; --genericbar-text-shadow: 1px 1px hsla(0, 0%, 100%, 0.4); --genericbar-width: 1em; /** Inner Generic Bar **/ @@ -1605,9 +1289,7 @@ --progressbar-font-size: 1.15em; --progressbar-font-weight: 700; --progressbar-height: var(--genericbar-height); - --progressbar-line-height: var(--genericbar-line-height); - --progressbar-padding-block: var(--genericbar-padding-block); - --progressbar-padding-inline: var(--genericbar-padding-inline); + --progressbar-line-height: 1.4em; --progressbar-text-shadow: var(--genericbar-text-shadow); /** Inner Progress Bar **/ --progressbar-inner-bg: hsl(100, 67%, 55%) linear-gradient(135deg, hsla(0, 0%, 100%, 0.15) 25%, transparent 25%, transparent 50%, hsla(0, 0%, 100%, 0.15) 50%, hsla(0, 0%, 100%, 0.15) 75%, transparent 75%, transparent) center / 2em 2em; @@ -1621,40 +1303,19 @@ --progressbar-inner-border-width: 0; --progressbar-inner-box-shadow: -1px 1px 0 hsla(0, 0%, 100%, 0.25) inset, 1px -1px 0 hsla(0, 0%, 0%, 0.1) inset; - /** Post Wrapper **/ - --postwrapper-gap: 0 0; - --postwrapper-grid: auto / var(--poster-width) 1fr; - --postwrapper-padding-block: 0; - --postwrapper-padding-inline: 0; - /** Poster **/ --poster-bg: hsla(0, 0%, 90%, 0.35); --poster-font-size: inherit; - --poster-gap: 0.25em 0.75em; --poster-grid-row: 1/3; - --poster-margin-block: 0; - --poster-margin-inline: 0; - --poster-padding-block: 0.5em; - --poster-padding-inline: 0.5em; --poster-width: 190px; /* Don't set this in em. It will eat too much space if people need to set large text sizes. */ /** Poster Title **/ --poster-title-bg: transparent; --poster-title-color: var(--body-link-color); --poster-title-font-size: 1.15em; --poster-title-font-weight: 400; - --poster-title-margin-block: 0; - --poster-title-margin-inline: 0; - --poster-title-padding-block: 0; - --poster-title-padding-inline: 0; --poster-title-text-decoration: none; --poster-title-text-shadow: none; - /** Postarea **/ - --postarea-margin-block: 0; - --postarea-margin-inline: 0; - --postarea-padding-block: 0.5em; - --postarea-padding-inline: 0.5em; - /** Post Inner **/ --post-inner-bg: transparent; --post-inner-border-color: hsl(0, 0%, 75%); @@ -1663,10 +1324,6 @@ --post-inner-border-width: 1px 0 0; --post-inner-box-shadow: 0 1px 0 hsl(0, 0%, 100%) inset; --post-inner-height: 85px; - --post-inner-margin-block: 0.5em 0; - --post-inner-margin-inline: 0; - --post-inner-padding-block: 1.25em; - --post-inner-padding-inline: 0.5em; /* On/Off Icons (User Status) */ --userstatus-border-radius: 50%; @@ -1684,8 +1341,6 @@ /* Two Factor Auth Code Container */ --tfacode-bg: var(--primary-color-50); - --tfacode-padding-block: 0.25em; - --tfacode-padding-inline: 0.25em; /** Basic Colors **/ --black: hsl(0, 0%, 0%); @@ -1723,10 +1378,6 @@ --attachments-box-shadow: 0 1px 0 hsl(0, 0%, 100%) inset; --attachments-font-size: 0.9em; --attachments-line-height: 1.4em; - --attachments-margin-block: 0; - --attachments-margin-inline: 0; - --attachments-padding-block: 1em 0.25em; - --attachments-padding-inline: 0.25em; /** Signature **/ --signature-bg: transparent; @@ -1737,16 +1388,6 @@ --signature-box-shadow: 0 1px 0 hsl(0, 0%, 100%) inset; --signature-font-size: 0.9em; --signature-line-height: 1.4em; - --signature-margin-block: 0; - --signature-margin-inline: 0; - --signature-padding-block: 1em 0.25em; - --signature-padding-inline: 0.25em; - - /** Profile Summary **/ - --profilesummary-gap: 0; - --profilesummary-grid: auto / var(--basicinfo-width) 1fr; - --profilesummary-padding-block: 0; - --profilesummary-padding-inline: 0; /** Basic Info **/ --basicinfo-bg: hsla(0, 0%, 85%, 0.2); @@ -1755,11 +1396,6 @@ --basicinfo-border-style: solid; --basicinfo-border-width: 0; --basicinfo-box-shadow: none; - --basicinfo-gap: 0.25em 0; - --basicinfo-margin-block: 0; - --basicinfo-margin-inline: 0; - --basicinfo-padding-block: var(--roundframe-padding-block); - --basicinfo-padding-inline: var(--roundframe-padding-inline); --basicinfo-width: 18%; /** Basic Info **/ @@ -1769,11 +1405,6 @@ --detailedinfo-border-style: solid; --detailedinfo-border-width: 0; --detailedinfo-box-shadow: none; - --detailedinfo-gap: 0.75em 0; - --detailedinfo-margin-block: 0; - --detailedinfo-margin-inline: 0; - --detailedinfo-padding-block: var(--roundframe-padding-block); - --detailedinfo-padding-inline: var(--roundframe-padding-inline); --detailedinfo-width: 100%; /* Toggle */ @@ -1786,10 +1417,6 @@ --toggle-box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 1px 1px #fff inset, 0 -5px 4px rgba(0,0,0,.1) inset; --toggle-box-shadow_hover: 0 1px 2px rgba(0, 0, 0, 0.25) inset; --toggle-height: 17px; - --toggle-margin-block: 0; - --toggle-margin-inline: 0.2em; - --toggle-padding-block: 0; - --toggle-padding-inline: 0; --toggle-width: 17px; /** Error File **/ @@ -1797,8 +1424,6 @@ --errorfile-box-shadow: none; --errorfile-font-family: monospace; --errorfile-font-size: 1em; - --errorfile-padding-block: 0.5em; - --errorfile-padding-inline: 0.2em; /** Error File Item **/ --errorfile-item-bg: var(--window-even-bg); --errorfile-item-bg_line: var(--roundframe-bg); @@ -1808,8 +1433,6 @@ --errorfile-item-border-width: 0; --errorfile-item-box-shadow: var(--roundframe-box-shadow); --errorfile-item-color: var(--roundframe-color); - --errorfile-item-padding-block: 0; - --errorfile-item-padding-inline: 0.25em; /** PM Capacity **/ --capacitybar-bg: hsl(206, 30%, 95%); @@ -1822,8 +1445,6 @@ --capacitybar-border-width: 1px; --capacitybar-box-shadow: none; --capacitybar-height: 0.8em; - --capacitybar-margin-block: 0.2em 0; - --capacitybar-margin-inline: 0.5em; --capacitybar-width: 10em; /** File Permissions **/ @@ -1842,10 +1463,6 @@ --popup-window-border-style: solid; --popup-window-border-width: 1px; --popup-window-box-shadow: none; - --popup-window-margin-block: 0; - --popup-window-margin-inline: auto; - --popup-window-padding-block: 0 0.5em; - --popup-window-padding-inline: 0; /** Popup Heading **/ --popup-heading-bg: hsl(var(--primary-color-hue), 50%, 95%); --popup-heading-border-color: var(--primary-color-800); @@ -1855,11 +1472,6 @@ --popup-heading-box-shadow: none; --popup-heading-color: var(--primary-color-800); --popup-heading-font-size: 1.1em; - --popup-heading-gap: 0.5em; - --popup-heading-margin-block: 0 0.5em; - --popup-heading-margin-inline: 0; - --popup-heading-padding-block: 0.5em; - --popup-heading-padding-inline: 1em; --popup-heading-text-decoration: none; --popup-heading-text-shadow: none; --popup-heading-text-transform: none; @@ -1874,8 +1486,4 @@ --popup-content-font-size: 0.95em; --popup-content-height: 30em; --popup-content-line-height: 1.6em; - --popup-content-margin-block: 0; - --popup-content-margin-inline: 0.5em; - --popup-content-padding-block: 0.5em; - --popup-content-padding-inline: 0.5em; } \ No newline at end of file From a51a02b8f46f6884e61032da8db0e2f6938d15dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Andr=C3=A9s?= Date: Sun, 10 Mar 2024 01:25:33 -0600 Subject: [PATCH 058/115] decouple postbit css MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Diego Andrés --- Sources/Actions/Display.php | 1 + Sources/Actions/PersonalMessage.php | 1 + Themes/default/Display.template.php | 11 +- Themes/default/css/index.css | 218 ++-------------------------- Themes/default/css/postbit.css | 193 ++++++++++++++++++++++++ Themes/default/css/responsive.css | 4 - Themes/default/css/rtl.css | 18 --- 7 files changed, 215 insertions(+), 231 deletions(-) create mode 100644 Themes/default/css/postbit.css diff --git a/Sources/Actions/Display.php b/Sources/Actions/Display.php index 8880c5ce7b..9b4bcff7c0 100644 --- a/Sources/Actions/Display.php +++ b/Sources/Actions/Display.php @@ -1015,6 +1015,7 @@ protected function setupTemplate(): void { // Load the proper template. Theme::loadTemplate('Display'); + Theme::loadCSSFile('postbit.css', ['minimize' => true], 'smf_post'); Theme::loadCSSFile('attachments.css', ['minimize' => true, 'order_pos' => 450], 'smf_attachments'); // Set a canonical URL for this page. diff --git a/Sources/Actions/PersonalMessage.php b/Sources/Actions/PersonalMessage.php index 0644b0071e..832cc83ae6 100644 --- a/Sources/Actions/PersonalMessage.php +++ b/Sources/Actions/PersonalMessage.php @@ -292,6 +292,7 @@ public function isAgreementAction(): bool public function execute(): void { Theme::loadTemplate(isset($_REQUEST['xml']) ? 'Xml' : 'PersonalMessage'); + Theme::loadCSSFile('postbit.css', ['minimize' => true], 'smf_post'); $this->buildLimitBar(); diff --git a/Themes/default/Display.template.php b/Themes/default/Display.template.php index 13f0c2c71c..43326d4299 100644 --- a/Themes/default/Display.template.php +++ b/Themes/default/Display.template.php @@ -639,18 +639,18 @@ function template_single_post($message)
      '; echo ' - ', !empty($message['counter']) ? '#' . $message['counter'] . '' : '', '
      settings['images_url'] . '/post/xx.png' && !$message['can_modify']) ? ' style="position: absolute; z-index: -1;"' : '', '> - ', $message['time'], ' - '; + + ', $message['time'], ' + '; // Show "<< Last Edit: Time by Person >>" if this post was edited. But we need the div even if it wasn't modified! // Because we insert into it through AJAX and we don't want to stop themers moving it around if they so wish so they can put it where they want it. echo ' - '; + '; if (!empty(Config::$modSettings['show_modify']) && !empty($message['modified']['name'])) echo @@ -659,6 +659,7 @@ function template_single_post($message) echo '
      + ', !empty($message['counter']) ? '#' . $message['counter'] . '' : '', '
      '; @@ -774,7 +775,7 @@ function template_single_post($message) if (!empty(Config::$modSettings['enable_likes'])) { echo ' -
        '; + +
        + Are you hardcore? +
        +
      '; } /** @@ -1005,94 +936,32 @@ function in_array(variable, theArray) */ function template_hms() { - $alt = false; - echo ' - - - - '; +
      +

      Binary Clock

      +
      +
      +
        '; foreach (Utils::$context['clockicons'] as $t => $v) { echo ' -
      - - '; - - $alt = !$alt; + '; } - echo ' - - - -
      Binary Clock
      '; +
        '; foreach ($v as $i) echo ' - '; +
      • '; echo ' -
      - Too tough for you? -
      '; echo ' - '; + +
      + Too tough for you? +
      +
      '; } /** @@ -1100,92 +969,29 @@ function in_array(variable, theArray) */ function template_omfg() { - $alt = false; - echo ' - - - - '; +
      +

      OMFG Binary Clock

      +
      +
      +
        '; foreach (Utils::$context['clockicons'] as $t => $v) { echo ' -
      - - '; - - $alt = !$alt; + '; } echo ' -
      OMFG Binary Clock
      '; +
        '; foreach ($v as $i) echo ' - '; +
      • '; echo ' -
      - '; + +
      '; } /** @@ -1193,33 +999,29 @@ function in_array(variable, theArray) */ function template_thetime() { - $alt = false; - echo ' - - - - '; +
      +

      OMFG Binary Clock

      +
      +
      +
        '; - foreach (Utils::$context['clockicons'] as $v) + foreach (Utils::$context['clockicons'] as $t => $v) { echo ' -
      - - '; - - $alt = !$alt; + '; } echo ' -
      The time you requested
      '; +
        '; foreach ($v as $i) echo ' - '; + '; echo ' -
      '; + +
      '; } ?> \ No newline at end of file diff --git a/Themes/default/css/calendar.css b/Themes/default/css/calendar.css index 94a452ebd7..a1223b6119 100644 --- a/Themes/default/css/calendar.css +++ b/Themes/default/css/calendar.css @@ -364,4 +364,36 @@ span.hidelink { clear: both; padding: 10px 0 0; } +} +@media (max-width: 479px) { + #calendar_navigation { + clear: both; + padding: 10px 0 0; + } +} +#geek-clock.bcd { + display: flex; + align-items: baseline; +} +#geek-clock.bcd > :nth-of-type(even) { + margin-inline: 0 20px; +} +#geek-clock.omfg li, +#geek-clock.hms li, +#geek-time li { + display: inline-block;; +} +#geek-clock li, +#geek-time li { + width: 30px; + height: 30px; + border: solid 1px currentColor; + border-radius: 100%; + opacity: 0.6; + -webkit-transform: scale(0.6); + -moz-transform: scale(0.6); + transform: scale(0.6); + -webkit-transition: all 0.3s ease-in-out 0s; + -moz-transition: all 0.3s ease-in-out 0s; + transition: all 0.3s ease-in-out 0s; } \ No newline at end of file diff --git a/Themes/default/images/bbc/bbc_bg.png b/Themes/default/images/bbc/bbc_bg.png deleted file mode 100644 index 1a2aa76fe4c2ecc643dad959022895e7db9c5262..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 425 zcmV;a0apHrP)2$kAQ7C}@cG$`w?^Wm8 zwA<~*X^`jndc8&|7GgB%$#r&qaoK7q`qwO18=KBYqr3hwke*!Rr36hM^>4lb`Gg%S TO0in500000NkvXXu0mjfx9!9I diff --git a/Themes/default/images/bbc/bbc_hoverbg.png b/Themes/default/images/bbc/bbc_hoverbg.png deleted file mode 100644 index 7d4fcfb05e8d1ff06d5d5f91a6e485a266fa0a25..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 583 zcmV-N0=WH&P)G7tw$#93EVR(|Szt8CJ_2cUDVtJE)ldF@ax}2`Tov*^5u)}+isq69gsJY9avBjXW z#d?savcl4Cgq@hGzM-_oqP57Qw#k&JyL5}BXn&cTuEC_Y%B8r>rn=3XuEMCg&8fT2 zs=Uviu*Ivs(5t@Dt-#Wtw8yW))vvBZOS#@Xt}+Uu^t)yUiIZ-t+#zS5?<&xW10gqpIo#MJ8W_MfoChMcvkztisX`0Voc zc#WmKd?zgc0004WQchCQPfAmu!?JJsG3$?sa!Php{o_p}ftn6g?0fR3eTLNmGZFu2h z?CH^DG@knid~RWUXhLPSBmRfthIfK>{%`!n+{~Sybm13aRH;NsUsJub@1n*KhHWV& zBHGYZ`U=k8T-2m7qJ33j+Na6frP;~sJH_7PLtpi4f@te5mpNVJcD=_l_v=mm;}=1e VDFa<0pP2vv002ovPDHLkV1oDrQ5OIJ diff --git a/Themes/default/scripts/calendar.js b/Themes/default/scripts/calendar.js index 510a94950a..8c9fe4716e 100644 --- a/Themes/default/scripts/calendar.js +++ b/Themes/default/scripts/calendar.js @@ -1,42 +1,114 @@ window.addEventListener("DOMContentLoaded", function() { - updateCalendarUI(); -}); + const start_el = document.getElementById("start_date"); + const end_el = document.getElementById("end_date"); + + if (start_el && end_el) { + let dates = { + current: { + start: new Date(start_el.value + "T12:00:00"), + end: new Date(end_el.value + "T12:00:00") + } + }; + start_el.addEventListener("change", updateCalendarUI.bind(start_el, dates)); + end_el.addEventListener("change", updateCalendarUI.bind(end_el, dates)); + + updateCalendarUI(dates); + } + + const clock = document.getElementById("geek-clock"); -document.getElementById("start_date").addEventListener("change", updateCalendarUI); -document.getElementById("end_date").addEventListener("change", updateCalendarUI); + if (clock) { + let els = []; -let current_start_date = new Date(document.getElementById("start_date").value + "T12:00:00"); -let current_end_date = new Date(document.getElementById("end_date").value + "T12:00:00"); + for (const elem of clock.children) { + for (const el of elem.children) { + els.push(el); + } + } + + setInterval(updateClock, 500, els, clock.className); + updateClock(els, clock.className); + } +}); // Update the date pickers in the calendar UI. -function updateCalendarUI() +function updateCalendarUI(dates) { - let start_date = new Date(document.getElementById("start_date").value + "T12:00:00"); - let end_date = new Date(document.getElementById("end_date").value + "T12:00:00"); + const start_el = document.getElementById("start_date"); + const end_el = document.getElementById("end_date"); + let start_date = new Date(start_el.value + "T12:00:00"); + let end_date = new Date(end_el.value + "T12:00:00"); if (this.id !== 'end_date') { - if (current_start_date.getTime() !== start_date.getTime()) { - const start_diff = start_date.getTime() - current_start_date.getTime(); + if (dates.current.start.getTime() !== start_date.getTime()) { + const start_diff = start_date.getTime() - dates.current.start.getTime(); end_date.setTime(end_date.getTime() + start_diff); - document.getElementById("end_date").value = end_date.getFullYear() + '-' + (end_date.getMonth() < 9 ? '0' : '') + (end_date.getMonth() + 1) + '-' + (end_date.getDate() < 10 ? '0' : '') + end_date.getDate(); + end_el.value = end_date.getFullYear() + '-' + (end_date.getMonth() < 9 ? '0' : '') + (end_date.getMonth() + 1) + '-' + (end_date.getDate() < 10 ? '0' : '') + end_date.getDate(); } } // Ensure start and end have a sane relationship. if (start_date.getTime() > end_date.getTime()) { - const current_duration = current_end_date.getTime() - current_start_date.getTime(); + const current_duration = dates.current.end.getTime() - dates.current.start.getTime(); end_date = start_date; end_date.setTime(end_date.getTime() + current_duration); - document.getElementById("end_date").value = end_date.getFullYear() + '-' + (end_date.getMonth() < 9 ? '0' : '') + (end_date.getMonth() + 1) + '-' + (end_date.getDate() < 10 ? '0' : '') + end_date.getDate(); + end_el.value = end_date.getFullYear() + '-' + (end_date.getMonth() < 9 ? '0' : '') + (end_date.getMonth() + 1) + '-' + (end_date.getDate() < 10 ? '0' : '') + end_date.getDate(); } - document.getElementById("end_date").min = document.getElementById("start_date").value; + end_el.min = start_el.value; // Remember any changes to start and end dates. - current_start_date = start_date; - current_end_date = end_date; + dates.current.start = start_date; + dates.current.end = end_date; +} + +function updateClock(els, which) +{ + // Get the current time + const time = new Date(); + const hour = time.getHours(); + const min = time.getMinutes(); + const sec = time.getSeconds(); + let digits = {}; + + // Break it up into individual digits + switch (which) { + case 'bcd': + digits = { + h1: parseInt(hour / 10), + h2: hour % 10, + m1: parseInt(min / 10), + m2: min % 10, + s1: parseInt(sec / 10), + s2: sec % 10, + }; + break; + + case 'hms': + digits = { + h: hour, + m: min, + s: sec + }; + break; + + case 'omfg': + digits = { + month: time.getMonth() + 1, + day: time.getDate(), + year: time.getFullYear() % 100, + hour, + min, + sec + }; + break; + } + + for (const el of els) { + el.style.background = digits[el.dataset.e] & el.dataset.v ? "currentColor" : "none"; + } } \ No newline at end of file From 4183105c4c054abe1ecfd84b62681d438297198c Mon Sep 17 00:00:00 2001 From: John Rayes Date: Sat, 1 Mar 2025 00:54:46 -0700 Subject: [PATCH 080/115] you killing me :P --- Themes/default/css/index.css | 9 +++------ Themes/default/css/variables.css | 4 +--- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index a76e71f747..3e621516e1 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -8,11 +8,8 @@ html { body { background: var(--body-bg); color: var(--body-color); - display: flex; - flex-direction: column; - font-family: var(--body-font-family); - font-size: clamp(var(--body-font-size-min), var(--body-font-size), var(--body-font-size-max)); - min-height: 100vh; + font: var(--body-font-size) / 150% var(--body-font-family); + min-height: 100dvh; tab-size: 4ch; } ::selection { @@ -100,7 +97,7 @@ input:focus, select:focus, textarea:focus { color: var(--input-color_focus); text-shadow: var(--input-text-shadow_focus); } -select[size] { +select[size], textarea { height: unset; } select optgroup option { diff --git a/Themes/default/css/variables.css b/Themes/default/css/variables.css index 72cd7443d0..d3f49c870f 100644 --- a/Themes/default/css/variables.css +++ b/Themes/default/css/variables.css @@ -33,9 +33,7 @@ --body-bg: hsl(var(--primary-color-hue), 45%, 95%); --body-color: #292929; --body-font-family: "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; - --body-font-size: 0.6889rem + 0.5682vw; - --body-font-size-max: 1.125rem; - --body-font-size-min: 0.8125rem; + --body-font-size: 94%; /** Body Links **/ --body-link-color: hsl(var(--primary-color-hue), 75%, 33%); From fc6294ba6cdc1bca22812f3b161de6b1b0e54f3d Mon Sep 17 00:00:00 2001 From: John Rayes Date: Wed, 4 Sep 2024 23:36:04 -0700 Subject: [PATCH 081/115] simplify menu a tad --- Themes/default/GenericMenu.template.php | 63 +++++-------------------- 1 file changed, 13 insertions(+), 50 deletions(-) diff --git a/Themes/default/GenericMenu.template.php b/Themes/default/GenericMenu.template.php index 96e88e9425..cc44883c61 100644 --- a/Themes/default/GenericMenu.template.php +++ b/Themes/default/GenericMenu.template.php @@ -56,8 +56,7 @@ function template_generic_menu_dropdown_above() echo '
      '; - // It's possible that some pages have their own tabs they wanna force... -// if (!empty(Utils::$context['tabs'])) + // It's possible that some pages have their own tabs they wanna show. template_generic_menu_tabs($menu_context); } @@ -75,7 +74,7 @@ function template_generic_menu_dropdown_below() * * @param array $menu_context An array of menu information */ -function template_generic_menu(&$menu_context, $menu_label) +function template_generic_menu($menu_context, $menu_label) { echo '
        '; @@ -99,11 +98,6 @@ function template_generic_menu(&$menu_context, $menu_label) ', $area['icon'], $area['label'], !empty($area['amt']) ? ' ' . $area['amt'] . '' : '', ''; - // Is this the current area, or just some area? - if (!empty($area['selected']) && empty(Utils::$context['tabs'])) - Utils::$context['tabs'] = isset($area['subsections']) ? $area['subsections'] : array(); - - // Are there any subsections? if (!empty($area['subsections']) && empty($area['hide_subsections'])) { echo ' @@ -146,9 +140,9 @@ function template_generic_menu(&$menu_context, $menu_label) * * @param array $menu_context An array of menu context data */ -function template_generic_menu_tabs(&$menu_context) +function template_generic_menu_tabs($menu_context) { - // Handy shortcut. + $tabs = Utils::$context['tabs'] ?? $menu_context['sections'][$menu_context['current_section']]['areas'][$menu_context['current_area']]['subsections'] ?? []; $tab_context = $menu_context['tab_data']; if (!empty($tab_context['title'])) @@ -158,9 +152,9 @@ function template_generic_menu_tabs(&$menu_context)

        '; // Exactly how many tabs do we have? - if (!empty(Utils::$context['tabs'])) + if (!empty($tabs)) { - foreach (Utils::$context['tabs'] as $id => $tab) + foreach ($tabs as $id => $tab) { // Can this not be accessed? if (!empty($tab['disabled'])) @@ -169,47 +163,21 @@ function template_generic_menu_tabs(&$menu_context) continue; } - // Did this not even exist - or do we not have a label? + // Ensure that this tab exists. if (!isset($tab_context['tabs'][$id])) $tab_context['tabs'][$id] = array('label' => $tab['label']); - elseif (!isset($tab_context['tabs'][$id]['label'])) - $tab_context['tabs'][$id]['label'] = $tab['label']; - - // Has a custom URL defined in the main admin structure? - if (isset($tab['url']) && !isset($tab_context['tabs'][$id]['url'])) - $tab_context['tabs'][$id]['url'] = $tab['url']; - // Any additional parameters for the url? - if (isset($tab['add_params']) && !isset($tab_context['tabs'][$id]['add_params'])) - $tab_context['tabs'][$id]['add_params'] = $tab['add_params']; + $tab_context['tabs'][$id] = array_replace($tab_context['tabs'][$id], $tab); // Has it been deemed selected? - if (!empty($tab['is_selected'])) - $tab_context['tabs'][$id]['is_selected'] = true; - - // Does it have its own help? - if (!empty($tab['help'])) - $tab_context['tabs'][$id]['help'] = $tab['help']; - - // Is this the last one? - if (!empty($tab['is_last']) && !isset($tab_context['override_last'])) - $tab_context['tabs'][$id]['is_last'] = true; - } - - // Find the selected tab - foreach ($tab_context['tabs'] as $sa => $tab) - { - if (!empty($tab['is_selected']) || (isset($menu_context['current_subsection']) && $menu_context['current_subsection'] == $sa)) + if (!empty($tab['is_selected']) || (!empty($tab_context['tabs'][$id]['selected']) && empty($selected_tab))) { - $selected_tab = $tab; - $tab_context['tabs'][$sa]['is_selected'] = true; + $tab_context['tabs'][$id]['is_selected'] = true; + $selected_tab = $tab_context['tabs'][$id]; } } } - // Show an icon and/or a help item? - if (!empty($selected_tab['icon_class']) || !empty($tab_context['icon_class']) || !empty($selected_tab['icon']) || !empty($tab_context['icon']) || !empty($selected_tab['help']) || !empty($tab_context['help'])) - { if (!empty($selected_tab['icon_class']) || !empty($tab_context['icon_class'])) echo ' '; @@ -221,13 +189,8 @@ function template_generic_menu_tabs(&$menu_context) echo ' '; - echo $tab_context['title']; - } - else echo ' - ', $tab_context['title']; - - echo ' + ', $tab_context['title'], '

        '; // The function is in Admin.template.php, but since this template is used elsewhere too better check if the function is available @@ -246,7 +209,7 @@ function template_generic_menu_tabs(&$menu_context)

        '; // Print out all the items in this tab (if any). - if (!empty(Utils::$context['tabs'])) + if (!empty($tabs)) { // The admin tabs. echo ' From ec9599b064f19a085ce8eb9da0659dca7e224c88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Andr=C3=A9s?= Date: Fri, 11 Oct 2024 18:54:50 -0600 Subject: [PATCH 082/115] formatting, tweaks + css fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Diego Andrés --- Themes/default/Packages.template.php | 7 +- Themes/default/Search.template.php | 3 +- Themes/default/css/dark.css | 16 +- Themes/default/css/index.css | 188 +++++++++++------- Themes/default/css/jquery-ui.datepicker.css | 1 + Themes/default/css/jquery.sceditor.css | 2 + .../default/css/jquery.sceditor.default.css | 4 +- Themes/default/css/profile.css | 3 +- Themes/default/css/rtl.css | 3 - Themes/default/css/variables.css | 46 ++--- 10 files changed, 158 insertions(+), 115 deletions(-) diff --git a/Themes/default/Packages.template.php b/Themes/default/Packages.template.php index 85c4abb2c9..ac6b88ab55 100644 --- a/Themes/default/Packages.template.php +++ b/Themes/default/Packages.template.php @@ -207,7 +207,6 @@ function template_view_package() '; $i = 1; - $j = 1; $action_num = 1; $js_operations = array(); foreach (Utils::$context['actions'] as $packageaction) @@ -216,7 +215,7 @@ function template_view_package() $js_operations[$action_num] = isset($packageaction['failed']) ? $packageaction['failed'] : 0; echo ' - + ', isset($packageaction['operations']) ? '' : '', ' ', $i++, '. ', $packageaction['type'], ' @@ -240,7 +239,7 @@ function template_view_package() $operation_text = $operation['position'] == 'replace' ? 'operation_replace' : ($operation['position'] == 'before' ? 'operation_after' : 'operation_before'); echo ' - + @@ -306,7 +305,7 @@ function template_view_package() foreach ($theme['actions'] as $action) { echo ' - + ', isset($packageaction['operations']) ? '' : '', ' diff --git a/Themes/default/Search.template.php b/Themes/default/Search.template.php index cd612754f7..9c46df92bc 100644 --- a/Themes/default/Search.template.php +++ b/Themes/default/Search.template.php @@ -271,8 +271,7 @@ function template_results() ', Lang::$txt['search_adjust_query'], ''; // Was anything even found? - if (!empty(Utils::$context['topics'])) - { + if (!empty(Utils::$context['topics'])) { echo '
        ', Lang::$txt['search_order'], ' diff --git a/Themes/default/css/dark.css b/Themes/default/css/dark.css index e0230f826f..b08e22996e 100644 --- a/Themes/default/css/dark.css +++ b/Themes/default/css/dark.css @@ -23,9 +23,8 @@ --input-accent-color: var(--primary-color-600); --input-bg: hsl(var(--primary-color-hue), 18%, 12%); --input-bg_disabled: hsl(var(--primary-color-hue), 12%, 9%); - /** @todo **/ - /* --input-bg_invalid: hsl(0, 24%, 20%); - --input-bg_valid: hsl(101, 8%, 39%); */ + --input-bg_invalid: hsl(0, 24%, 20%); + --input-bg_valid: hsl(101, 8%, 39%); --input-border-color: var(--primary-color-700); --input-border-color_disabled: #818181; --input-border-color_focus: var(--primary-color-900); @@ -145,6 +144,17 @@ --buttonlist-link-color_active_hover: #000; --buttonlist-link-color_hover: var(--primary-color-50); + /** Page Link **/ + --pages-link-bg: hsl(var(--primary-color-hue), 20%, 14%); + --pages-link-bg_active: var(--primary-color-600); + --pages-link-bg_active_focus: var(--pages-link-bg_active); + --pages-link-bg_active_hover: var(--pages-link-bg_active); + --pages-link-bg_focus: var(--pages-link-bg_hover); + --pages-link-bg_hover: hsl(var(--primary-color-hue), 20%, 17%); + --pages-link-color: var(--buttonlist-link-color); + --pages-link-color_active: #fff; + --pages-link-color_hover: var(--primary-color-50); + /** Category Bar **/ --catbar-bg: var(--primary-color-900); diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 3e621516e1..ba78dec2d7 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -60,6 +60,8 @@ abbr { } img.avatar { border-radius: var(--avatar-border-radius); + height: var(--avatar-size); + width: var(--avatar-size); } input, select, textarea { accent-color:var(--input-accent-color); @@ -146,7 +148,7 @@ input[type="number"][size="6"] { width: calc(6ch + 2em + var(--input-padding-inline)); } /* Buttons styling */ -button, .button, a.button, input[type="button"] { +.button, a.button, input[type="button"] { align-items: center; background: var(--button-bg); border-color: var(--button-border-color); @@ -170,7 +172,7 @@ button, .button, a.button, input[type="button"] { text-transform: var(--button-text-transform); user-select: none; } -button:hover, .button:hover, input[type="button"]:hover { +.button:hover, input[type="button"]:hover { background: var(--button-bg_hover); border-color: var(--button-border-color_hover); border-radius: var(--button-border-radius_hover); @@ -181,7 +183,7 @@ button:hover, .button:hover, input[type="button"]:hover { text-decoration: var(--button-text-decoration_hover); text-shadow: var(--button-text-shadow_hover); } -button:focus, .button:focus, input[type="button"]:focus { +.button:focus, input[type="button"]:focus { background: var(--button-bg_focus); border-color: var(--button-border-color_focus); border-radius: var(--button-border-radius_focus); @@ -192,7 +194,7 @@ button:focus, .button:focus, input[type="button"]:focus { text-decoration: var(--button-text-decoration_focus); text-shadow: var(--button-text-shadow_focus); } -button.active, .button.active, input[type="button"].active { +.button.active, input[type="button"].active { background: var(--button-bg_active); border-color: var(--button-border-color_active); border-radius: var(--button-border-radius_active); @@ -203,10 +205,10 @@ button.active, .button.active, input[type="button"].active { text-decoration: var(--button-text-decoration_active); text-shadow: var(--button-text-shadow_active); } -button.active:is(:hover, :focus, :focus-visible), .button.active:is(:hover, :focus, :focus-visible), input[type="button"].active:is(:hover, :focus, :focus-visible) { +.button.active:is(:hover, :focus, :focus-visible), input[type="button"].active:is(:hover, :focus, :focus-visible) { color: var(--button-color_active_hover); } -button:focus-visible, .button:focus-visible, input[type="button"]:focus-visible { +.button:focus-visible, input[type="button"]:focus-visible { outline: var(--button-outline); outline-offset: var(--button-outline-offset); } @@ -261,7 +263,8 @@ fieldset legend { border-style: var(--fieldset-legend-border-style); border-width: var(--fieldset-legend-border-width); box-shadow: var(--fieldset-legend-box-shadow); - font-weight: bold; + font-size: var(--fieldset-legend-font-size); + font-weight: var(--fieldset-legend-font-weight); color: var(--fieldset-legend-color); } /* Details tag */ @@ -343,8 +346,7 @@ hr { align-items: center; } #likes .avatar { - height: 5em; - width: 5em; + --avatar-size: 5em; margin: 0 10px 0 0; } #likes li .like_profile { @@ -426,7 +428,7 @@ hr { .clear_right { clear: inline-end; } -.reset, button.reset { +.reset { all: unset; outline: revert; } @@ -633,6 +635,9 @@ blockquote cite::before { border: 1px solid #ddd; border-collapse: collapse; } +.centertext .bbc_table { + margin: auto; +} .bbc_table th, .bbc_table td { color: inherit; @@ -918,10 +923,6 @@ table.table_grid td { display: block; clear: both; } -img.sort, .sort { - margin-bottom: -4px; - margin-left: 4px; -} /* table_grid styles for Profile > Show Permissions. */ #permissions table.table_grid td { @@ -1086,13 +1087,12 @@ img.sort, .sort { text-shadow: var(--topinfo-text-shadow_active); } #top_info > li > a img.avatar { + --avatar-size: var(--topinfo-avatar-size); background: var(--topinfo-avatar-bg); border-color: var(--topinfo-avatar-border-color); border-style: var(--topinfo-avatar-border-style); border-width: var(--topinfo-avatar-border-width); box-shadow: var(--topinfo-avatar-box-shadow); - height: var(--topinfo-avatar-height); - width: var(--topinfo-avatar-width); } #profile_menu_top::after { font-size: 0.5em; @@ -1101,6 +1101,20 @@ img.sort, .sort { #top_info > li:where(.button_login, .button_signup) > a { font-size: .75em; } +#top_info > li:is(.welcome) { + font-size: .8em; +} +#top_info > li.welcome > a { + background: none; + border: none; + color: var(--body-link-color); + margin: 0; + padding: 0; +} +#top_info > li.welcome > a:is(:hover, :focus, :focus-visible) { + color: var(--body-link-color_hover); + text-decoration: underline +} #top_info .amt { inset-inline-end: 0; position: absolute; @@ -1146,11 +1160,14 @@ img.sort, .sort { display: block; } @media (hover) { - .top_menu.scrollable { + .top_menu.scrollable .body { max-height: var(--topmenu-height); overflow: auto; } } +#pm_menu, #alerts_menu, #profile_menu { + top: 100% !important; +} /* User information. */ .top_menu .header { background: var(--topmenu-header-bg); @@ -1182,8 +1199,7 @@ img.sort, .sort { display: flex; } #profile_menu img.avatar { - height: 3em; - width: 3em; + --avatar-size: 3em; } .profile_user_info { display: grid; @@ -1221,6 +1237,7 @@ ol.profile_user_links { border-radius: var(--profilelinks-item-border-radius); border-style: var(--profilelinks-item-border-style); border-width: var(--profilelinks-item-border-width); + box-shadow: var(--profilelinks-item-box-shadow); color: var(--profilelinks-item-color); display: flex; font-family: var(--profilelinks-item-font-family); @@ -1238,6 +1255,7 @@ ol.profile_user_links { background: var(--profilelinks-item-bg_hover); border-color: var(--profilelinks-item-border-color_hover); border-width: var(--profilelinks-item-border-width_hover); + box-shadow: var(--profilelinks-item-box-shadow_hover); color: var(--profilelinks-item-color_hover); font-weight: var(--profilelinks-item-font-weight_hover); text-decoration: var(--profilelinks-item-text-decoration_hover); @@ -1248,6 +1266,7 @@ ol.profile_user_links { background: var(--profilelinks-item-bg_focus); border-color: var(--profilelinks-item-border-color_focus); border-width: var(--profilelinks-item-border-width_focus); + box-shadow: var(--profilelinks-item-box-shadow_focus); color: var(--profilelinks-item-color_focus); font-weight: var(--profilelinks-item-font-weight_focus); text-decoration: var(--profilelinks-item-text-decoration_focus); @@ -1292,6 +1311,7 @@ ol.profile_user_links { color: var(--genericnoti-color); display: grid; font-size: var(--genericnoti-font-size); + font-weight: 400; gap: var(--genericnoti-gap); grid-template-columns: auto 1fr; grid-template-rows: auto auto; @@ -1301,11 +1321,13 @@ ol.profile_user_links { .generic_notification:hover { background: var(--genericnoti-bg_hover); color: var(--genericnoti-color_hover); + font-weight: inherit; text-decoration: none; } .generic_notification:is(:focus, :focus-within, :focus-visible) { background: var(--genericnoti-bg_focus); color: var(--genericnoti-color_focus); + font-weight: inherit; } a.generic_notification .details, .generic_notification .details a { @@ -1326,9 +1348,8 @@ a.generic_notification:hover .details, position: relative; } .generic_notification img.avatar { - height: var(--genericnoti-avatar-height); + --avatar-size: var(--genericnoti-avatar-size); object-fit: var(--genericnoti-avatar-object-fit); - width: var(--genericnoti-avatar-width); } .generic_notification span.main_icons { color: var(--genericnoti-icon-color); @@ -1345,6 +1366,7 @@ nav#main_menu { align-items: center; background: var(--nav-bg); border-color: var(--nav-border-color); + border-radius: var(--nav-border-radius); border-style: var(--nav-border-style); border-width: var(--nav-border-width); display: flex; @@ -1414,6 +1436,7 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi .dropmenu { align-items: center; display: flex; + flex-wrap: wrap; gap: .5em; user-select: none; } @@ -1603,6 +1626,7 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi .buttonlist, .buttonlistend, .buttonrow, .pagelinks, .pagesection { align-items: baseline; display: flex; + flex-wrap: wrap; gap: 0.5em; } /* Items in mobile menu must be vertical. */ @@ -1628,7 +1652,7 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi .buttonlist > li { position: relative; } -.buttonlist > li > a, +.buttonlist > li > :is(a, button), .buttonlist > li.inline_mod_check { align-items: center; display: inline-flex; @@ -1651,7 +1675,7 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi text-shadow: var(--buttonlist-link-text-shadow); text-transform: var(--buttonlist-link-text-transform); } -.buttonlist > li > a:hover, +.buttonlist > li > :is(a, button):hover, .buttonlist > li.inline_mod_check:hover { background: var(--buttonlist-link-bg_hover); border-color: var(--buttonlist-link-border-color_hover); @@ -1663,8 +1687,8 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi text-decoration: var(--buttonlist-link-text-decoration_hover); text-shadow: var(--buttonlist-link-text-shadow_hover); } -.buttonlist > li > a:focus, -.buttonlist > li:has(.top_menu.visible) > a, +.buttonlist > li > :is(a, button):focus, +.buttonlist > li:has(.top_menu.visible) > :is(a, button):not(.active), .buttonlist > li.inline_mod_check:is(:focus, :focus-within) { background: var(--buttonlist-link-bg_focus); border-color: var(--buttonlist-link-border-color_focus); @@ -1676,7 +1700,7 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi text-decoration: var(--buttonlist-link-text-decoration_focus); text-shadow: var(--buttonlist-link-text-shadow_focus); } -.buttonlist > li > a.active { +.buttonlist > li > :is(a, button).active { background: var(--buttonlist-link-bg_active); border-color: var(--buttonlist-link-border-color_active); border-radius: var(--buttonlist-link-border-radius_active); @@ -1687,30 +1711,33 @@ nav:where(#genericmenu, #adm_submenus) a:is(:focus, :focus-visible, :focus-withi text-decoration: var(--buttonlist-link-text-decoration_active); text-shadow: var(--buttonlist-link-text-shadow_active); } -.buttonlist > li > a.active:hover { +.buttonlist > li > :is(a, button).active:hover { background: var(--buttonlist-link-bg_active_hover); color: var(--buttonlist-link-color_active_hover); } -.buttonlist > li > a.active:focus { +.buttonlist > li > :is(a, button).active:focus { background: var(--buttonlist-link-bg_active_focus); color: var(--buttonlist-link-color_active_focus); } -.buttonlist > li > a:focus-visible, +.buttonlist > li > :is(a, button):focus-visible, .buttonlist > li.inline_mod_check:focus-visible { outline: var(--buttonlist-link-outline); outline-offset: var(--buttonlist-link-outline-offset); } -.buttonlist > li > a.sub_buttons::after { +.buttonlist > li > :is(a, button).sub_buttons::after { font-family: "Font Awesome 6 Free"; content: "\f078"; font-size: 0.6em; font-weight: 700; height: 0.6em; } -.buttonlist > li:has(.top_menu.visible) > a.sub_buttons::after { +.buttonlist > li:has(.top_menu.visible) > :is(a, button).sub_buttons::after { content: "\f077"; } -html[lang="el-GR"] .buttonlist > li > a { +.buttonlist > li > input[type="checkbox"] { + height: 1em; +} +html[lang="el-GR"] .buttonlist > li > :is(a, button) { text-transform: capitalize; } #mobile_action, @@ -1728,16 +1755,16 @@ html[lang="el-GR"] .buttonlist > li > a { padding-inline: 0.25em; } .buttonlist .dropmenu li a { - --dropmenu-an-font-size: 0.9em; align-items: flex-start; flex-direction: column; justify-content: center; + padding-block: .5em; } -.buttonlist .dropmenu li a span:has(+ span) { +.buttonlist .dropmenu li a span.text-label:has(+ span) { font-weight: 700; } -.buttonlist .dropmenu li a span ~ span { - font-size: 0.75em; +.buttonlist .dropmenu li a span.text-label + span { + font-size: .9em; } .buttonlist .overview { display: grid; @@ -1791,10 +1818,10 @@ html[lang="el-GR"] .buttonlist > li > a { box-shadow: var(--pagesection-box-shadow); clear: both; color: var(--pagesection-color); - margin-block: .25em; + margin-block: .25em 0; margin-inline: auto; - padding-block: 0; - padding-inline: 0; + padding-block: .25em; + padding-inline: .5em; } .pagelinks { align-items: center; @@ -1806,7 +1833,7 @@ html[lang="el-GR"] .buttonlist > li > a { box-shadow: var(--pages-box-shadow); display: flex; flex-wrap: wrap; - gap: .2em; + gap: .5em; user-select: none; } .pagelinks a.nav_page, @@ -1827,7 +1854,7 @@ html[lang="el-GR"] .buttonlist > li > a { justify-content: center; line-height: var(--pages-link-line-height); min-height: var(--pages-link-height); - padding: .6em .75em; + padding: .25em .6em; text-decoration: var(--pages-link-text-decoration); text-shadow: var(--pages-link-text-shadow); text-transform: var(--pages-link-text-transform); @@ -1877,39 +1904,46 @@ html[lang="el-GR"] .buttonlist > li > a { outline: var(--pages-link-outline); outline-offset: var(--pages-link-outline-offset); } -.pages::after, .jump_to::after, .code::after, -strong[id^='child_list_']::after { - content: ": "; -} .expand_pages { font-weight: bold; cursor: pointer; } -.button.smalltext { - font-size: 0.6em; - padding: 0 5px; +.pagination_container { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: .25em; +} +.pagination_container .pages { + display: none; +} +.pagesection:not(:has(.buttonlist)) .pagelinks { + flex: 1; +} +.pagesection > div:has(> label) { + align-items: center; + display: flex; + gap: .25em; +} +.pagesection > div:has(> label) input[type="checkbox"] { + height: auto; } /* Styles for the general looks of the theme. ------------------------------------------------------- */ - -/* Box-shadow only on this one. */ -#wrapper { - clear: both; - border-radius: 8px; -} - /* Set maximum width limit for content */ #top_section .inner_wrap, #wrapper, #header .inner_wrap, #footer .inner_wrap, #main_menu .inner_wrap { max-width: var(--wrapper-width); margin: 0 auto; width: 90%; } - +.jump_to::after, .code::after, +strong[id^='child_list_']::after { + content: ": "; +} .notice { font-weight: bold; } - #languages_form, #search_form { padding: 5px 0; } @@ -1943,8 +1977,7 @@ strong[id^='child_list_']::after { h1.forumtitle { align-items: center; color: var(--forumtitle-color); - display: inline-grid; - flex: 1; + flex: 1 0 auto; gap: .2em; font-family: var(--forumtitle-font-family); font-size: var(--forumtitle-font-size); @@ -1966,7 +1999,6 @@ h1.forumtitle span#siteslogan { /* Even guests need to be aligned */ .welcome { - padding: 0 10px; line-height: 2.5em; } /* @@ -2012,9 +2044,9 @@ ul li.greeting { display: grid; font-size: var(--newsfader-font-size); grid-template-columns: auto 1fr; - height: var(--newsfader-height); margin-block: .5em 1em; max-height: calc(var(--newsfader-height) * 1.25); + min-height: var(--newsfader-height); overflow: hidden; } .news_section .icon { @@ -2037,12 +2069,10 @@ ul li.greeting { overflow: hidden; padding: .8em; } -.news_section .sy-pager { - overflow: auto; -} .news_section .sy-slides-wrap { max-height: calc(var(--newsfader-height) * 1.25); overflow: auto; + overscroll-behavior: contain; } .news_section .sy-pager { align-items: flex-end; @@ -2060,6 +2090,7 @@ ul li.greeting { } .news_section .sy-pager li a { background: var(--newsfader-pager-bg); + border-radius: var(--newsfader-pager-border-radius); } .news_section .sy-pager li.sy-active a { background: var(--newsfader-pager-bg_active); @@ -2078,9 +2109,10 @@ ul li.greeting { z-index: 0; } .random_news { - display: grid; + display: flex; gap: .25em; - padding-inline: .75em; + padding-block: .75em; + padding-inline: .25em; text-align: start; } .random_news h2 { @@ -2130,6 +2162,7 @@ ul li.greeting { .navigate_section li { align-items: center; display: flex; + flex-wrap: wrap; gap: .25em .15em; } .navigate_section a { @@ -2372,6 +2405,9 @@ ul li.greeting { .quickbuttons > li:has(.top_menu.visible) > a.sub_buttons::after { content: "\f077"; } +.quickbuttons > li > input[type="checkbox"] { + height: 1em; +} /* Drop part of QuickButtons */ .quickoptions ul { background: var(--quickoptions-bg); @@ -3166,6 +3202,7 @@ dl.addrules dt.floatleft { height: auto; inset: 0; margin: 0; + overscroll-behavior: contain; padding: 0; position: fixed; width: 100%; @@ -3236,7 +3273,7 @@ dl.addrules dt.floatleft { } /* Windowbg */ -.generic_list_wrapper, .windowbg, .approvebg, .approvebg2 { +.generic_list_wrapper, .windowbg, .approvebg, .approvebg2, .windowbg:is(.odd) { background: var(--window-bg); border-color: var(--window-border-color); border-radius: var(--window-border-radius); @@ -3250,7 +3287,7 @@ dl.addrules dt.floatleft { margin-inline: var(--window-margin-inline); overflow: auto; } -:nth-child(even of .windowbg), .bg.even { +:nth-child(even of .windowbg), .windowbg:is(.even) { background: var(--window-even-bg); } /* Special treatment for #forumposts area */ @@ -3276,7 +3313,7 @@ tr.windowbg { tr.windowbg:hover { background: var(--window-bg_hover); } -tr.windowbg:nth-of-type(odd):hover { +tr.windowbg:nth-of-type(even):hover { background: var(--window-even-bg_hover); } td.windowbg { @@ -3959,6 +3996,7 @@ ul.post_options li { padding-inline: .25em; } +/* Like button */ .smflikebutton { margin-top: 4px; } @@ -4458,10 +4496,10 @@ h3.profile_hd::before, } /* Topic/Board follow-alert menu */ -.dropmenu .viewport .overview strong { +.notify_dropdown strong { font-size: 1.1em; } -.dropmenu .viewport .overview a { +.notify_dropdown a { display: block; padding: 0.5em; text-decoration: none; @@ -4471,7 +4509,7 @@ h3.profile_hd::before, .notify_dropdown a:hover, .notify_dropdown a:focus { border-color: var(--border_color); } -.dropmenu .viewport .overview span { +.notify_dropdown span { font-size: 0.9em; } @@ -4785,6 +4823,7 @@ input:checked + .slider:before { font-weight: 700; font-family: "Font Awesome 6 Free"; } + /* Fade-in animation */ @keyframes fadeIn { from { @@ -4794,7 +4833,6 @@ input:checked + .slider:before { opacity: 1; } } - /* Fade-out animation */ @keyframes fadeOut { from { @@ -4804,12 +4842,10 @@ input:checked + .slider:before { opacity: 0; } } - /* Apply fade-in and fade-out animations */ .fade-in { animation: fadeIn 0.3s ease forwards; } - .fade-out { animation: fadeOut 0.3s ease forwards; -} +} \ No newline at end of file diff --git a/Themes/default/css/jquery-ui.datepicker.css b/Themes/default/css/jquery-ui.datepicker.css index 600e6d26a2..f562e278d2 100644 --- a/Themes/default/css/jquery-ui.datepicker.css +++ b/Themes/default/css/jquery-ui.datepicker.css @@ -166,6 +166,7 @@ font-size: 0.65em; font-weight: var(--titlebar-font-weight); overflow: hidden; + text-align: center; text-overflow: ellipsis; white-space: nowrap; } diff --git a/Themes/default/css/jquery.sceditor.css b/Themes/default/css/jquery.sceditor.css index 526d00d12d..38d3b732ba 100644 --- a/Themes/default/css/jquery.sceditor.css +++ b/Themes/default/css/jquery.sceditor.css @@ -8,6 +8,7 @@ * SCEditor is licensed under the MIT license: * https://opensource.org/licenses/mit-license.php */ + .sceditor-grip { background: var(--roundframe-bg); border-color: var(--roundframe-border-color); @@ -271,6 +272,7 @@ body.sceditor-maximize { margin: 0.4em 0.2em; } .sceditor-toolbar { + align-items: baseline; display: flex; flex-wrap: wrap; } diff --git a/Themes/default/css/jquery.sceditor.default.css b/Themes/default/css/jquery.sceditor.default.css index 8766b84fbb..f93d20bc1e 100644 --- a/Themes/default/css/jquery.sceditor.default.css +++ b/Themes/default/css/jquery.sceditor.default.css @@ -6,9 +6,9 @@ html, p, .bbc_code code::before, table, body, h1, h2, h3, h4, h5, h6 { } html { display: flex; - height: 100%; + height: auto; } -body { +body[contenteditable] { flex: 1; background: var(--input-bg); color: var(--input-color); diff --git a/Themes/default/css/profile.css b/Themes/default/css/profile.css index 8bd9ac795a..375aa81395 100644 --- a/Themes/default/css/profile.css +++ b/Themes/default/css/profile.css @@ -49,9 +49,8 @@ padding: 0; } #basicinfo img.avatar, dl.settings img.avatar { + --avatar-size: 160px; display: block; - max-width: 160px; - height: auto !important; margin-inline: auto; } #basicinfo #userstatus { diff --git a/Themes/default/css/rtl.css b/Themes/default/css/rtl.css index 70975c6ae2..5540e41fed 100644 --- a/Themes/default/css/rtl.css +++ b/Themes/default/css/rtl.css @@ -206,9 +206,6 @@ div#admin_menu { #info_center .cat_bar, .table_grid tr.catbg th { text-align: right; } -.message_index_title { - margin-left: 40px; -} /* Styles for the profile section. ------------------------------------------------- */ diff --git a/Themes/default/css/variables.css b/Themes/default/css/variables.css index d3f49c870f..4f0db6e433 100644 --- a/Themes/default/css/variables.css +++ b/Themes/default/css/variables.css @@ -51,6 +51,7 @@ /** Avatar General **/ --avatar-border-radius: 50%; + --avatar-size: 50px; /** Selection **/ --selection-bg: var(--primary-color-200); @@ -308,7 +309,7 @@ --sectionhead-title-color: inherit; --sectionhead-title-color_focus: inherit; --sectionhead-title-color_hover: inherit; - --sectionhead-title-font-size: 1.5em; + --sectionhead-title-font-size: 1.25em; --sectionhead-title-font-weight: normal; --sectionhead-title-font-weight_focus: normal; --sectionhead-title-font-weight_hover: normal; @@ -321,7 +322,7 @@ --sectionhead-title-text-shadow_hover: none; /** Section Head Text **/ --sectionhead-text-color: hsl(0, 0%, 58%); - --sectionhead-text-font-size: 1em; + --sectionhead-text-font-size: .8em; --sectionhead-text-font-weight: normal; /** Section Head Link **/ --sectionhead-link-color: var(--body-link-color); @@ -396,7 +397,7 @@ --topinfo-cursor_active: pointer; --topinfo-cursor_focus: pointer; --topinfo-cursor_hover: pointer; - --topinfo-font-size: 1.25em; + --topinfo-font-size: .95em; --topinfo-font-weight: 400; --topinfo-font-weight_active: 400; --topinfo-font-weight_focus: var(--topinfo-font-weight_hover); @@ -420,8 +421,7 @@ --topinfo-avatar-border-style: solid; --topinfo-avatar-border-width: 0; --topinfo-avatar-box-shadow: none; - --topinfo-avatar-height: calc(var(--topinfo-height) * 0.6); - --topinfo-avatar-width: var(--topinfo-avatar-height); + --topinfo-avatar-size: calc(var(--topinfo-height) * 0.6); /** Top Menu **/ --topmenu-bg: hsl(0, 0%, 100%); @@ -441,7 +441,7 @@ --topmenu-color: inherit; --topmenu-color_focus: var(--topmenu-color_hover); --topmenu-color_hover: inherit; - --topmenu-font-size: 1em; + --topmenu-font-size: .95em; --topmenu-font-weight: 400; --topmenu-height: 22em; --topmenu-line-height: 1; @@ -510,9 +510,8 @@ --genericnoti-gap: 0.25em 1em; --genericnoti-height: var(--genericnoti-avatar-height); /** Generic Noti Avatar **/ - --genericnoti-avatar-height: 2.5em; - --genericnoti-avatar-width: var(--genericnoti-avatar-height); --genericnoti-avatar-object-fit: scale-down; + --genericnoti-avatar-size: 2.5em; /** Generic Noti Icon **/ --genericnoti-icon-color: var(--primary-color-700); /** Generic Noti Link **/ @@ -558,6 +557,7 @@ /** Nav **/ --nav-bg: var(--primary-color-700); --nav-border-color: hsl(var(--primary-color-hue), 16%, 81%); + --nav-border-radius: 0; --nav-border-style: solid; --nav-border-width: 2px 0; --nav-height: 55px; @@ -648,8 +648,8 @@ /** Dropmenu n level links **/ --dropmenu-an-bg: transparent; --dropmenu-an-bg_active: var(--dropmenu-an-bg_hover); - --dropmenu-an-bg_active_hover: var(--dropmenu-an-bg_active); --dropmenu-an-bg_active_focus: var(--dropmenu-an-bg_active); + --dropmenu-an-bg_active_hover: var(--dropmenu-an-bg_active); --dropmenu-an-bg_focus: var(--dropmenu-an-bg_hover); --dropmenu-an-bg_hover: hsl(var(--primary-color-hue), 36%, 91%); --dropmenu-an-border-color: transparent; @@ -815,7 +815,7 @@ --buttonlist-link-color_focus: var(--buttonlist-link-color_hover); --buttonlist-link-color_hover: var(--primary-color-900); --buttonlist-link-cursor: pointer; - --buttonlist-link-font-size: 0.9em; + --buttonlist-link-font-size: 0.8em; --buttonlist-link-font-weight: 400; --buttonlist-link-font-weight_active: var(--buttonlist-link-font-weight); --buttonlist-link-font-weight_focus: var(--buttonlist-link-font-weight_hover); @@ -835,7 +835,7 @@ --buttonlist-link-text-transform: normal; /** Paage Section **/ - --pagesection-bg: transparent; + --pagesection-bg: var(--window-bg); --pagesection-border-color: transparent; --pagesection-border-radius: 0; --pagesection-border-style: solid; @@ -851,12 +851,12 @@ --pages-border-width: 0; --pages-box-shadow: none; /** Page Link **/ - --pages-link-bg: var(--buttonlist-link-bg); - --pages-link-bg_active: var(--buttonlist-link-bg_active); - --pages-link-bg_active_focus: var(--buttonlist-link-bg_active_focus); - --pages-link-bg_active_hover: var(--buttonlist-link-bg_active_hover); - --pages-link-bg_focus: var(--buttonlist-link-bg_focus); - --pages-link-bg_hover: var(--buttonlist-link-bg_hover); + --pages-link-bg: hsl(var(--primary-color-hue), 20%, 95%); + --pages-link-bg_active: var(--primary-color-600); + --pages-link-bg_active_focus: var(--pages-link-bg_active); + --pages-link-bg_active_hover: var(--pages-link-bg_active); + --pages-link-bg_focus: var(--pages-link-bg_hover); + --pages-link-bg_hover: var(--primary-color-100); --pages-link-border-color: transparent; --pages-link-border-color_active: var(--pages-link-border-color_active); --pages-link-border-color_focus: var(--pages-link-border-color_focus); @@ -875,13 +875,13 @@ --pages-link-box-shadow_focus: var(--pages-link-box-shadow); --pages-link-box-shadow_hover: var(--pages-link-box-shadow); --pages-link-color: var(--buttonlist-link-color); - --pages-link-color_active: var(--buttonlist-link-color_active); - --pages-link-color_ative_focus: var(--buttonlist-link-color_active_focus); - --pages-link-color_active_hover: var(--buttonlist-link-color_active_hover); - --pages-link-color_focus: var(--buttonlist-link-color_focus); - --pages-link-color_hover: var(--buttonlist-link-color_hover); + --pages-link-color_active: #fff; + --pages-link-color_ative_focus: var(--pages-link-color_active); + --pages-link-color_active_hover: var(--pages-link-color_active); + --pages-link-color_focus: var(--pages-link-color_hover); + --pages-link-color_hover: var(--primary-color-700); --pages-link-cursor: pointer; - --pages-link-font-size: 0.9em; + --pages-link-font-size: .8em; --pages-link-font-weight: 400; --pages-link-font-weight_active: 700; --pages-link-font-weight_focus: var(--pages-link-font-weight_hover); From f051c9171b357b55caafea9961210e681b3e71ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Andr=C3=A9s?= Date: Fri, 11 Oct 2024 19:53:55 -0600 Subject: [PATCH 083/115] board and topic layout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Diego Andrés --- Themes/default/BoardIndex.template.php | 45 ++-- Themes/default/MessageIndex.template.php | 134 ++++++------ Themes/default/css/index.css | 268 ++++++++++++----------- 3 files changed, 221 insertions(+), 226 deletions(-) diff --git a/Themes/default/BoardIndex.template.php b/Themes/default/BoardIndex.template.php index bfbde72bf1..e0f917164e 100644 --- a/Themes/default/BoardIndex.template.php +++ b/Themes/default/BoardIndex.template.php @@ -99,11 +99,11 @@ function template_main() foreach ($category['boards'] as $board) { echo ' -
        +
        ', function_exists('template_bi_' . $board['type'] . '_icon') ? call_user_func('template_bi_' . $board['type'] . '_icon', $board) : template_bi_board_icon($board), '
        -
        +
        ', function_exists('template_bi_' . $board['type'] . '_info') ? call_user_func('template_bi_' . $board['type'] . '_info', $board) : template_bi_board_info($board), '
        '; @@ -115,7 +115,7 @@ function template_main() // Show the last post if there is one. echo' -
        +
        ', function_exists('template_bi_' . $board['type'] . '_lastpost') ? call_user_func('template_bi_' . $board['type'] . '_lastpost', $board) : template_bi_board_lastpost($board), '
        '; @@ -175,7 +175,7 @@ function template_bi_redirect_icon($board) function template_bi_board_info($board) { echo ' - + ', $board['name'], ' '; @@ -202,7 +202,8 @@ function template_bi_board_stats($board) { echo '

        - ', Lang::getTxt('number_of_posts', [$board->posts], file: 'General'), '
        ', Lang::getTxt('number_of_topics', [$board->topics], file: 'General'), ' + ', Lang::getTxt('number_of_posts', [$board->posts]), ' + ', Lang::getTxt('number_of_topics', [$board->topics]), '

        '; } @@ -215,7 +216,7 @@ function template_bi_redirect_stats($board) { echo '

        - ', Lang::getTxt('number_of_redirects', [$board->posts], file: 'General'), ' + ', Lang::getTxt('number_of_redirects', [$board->posts]), '

        '; } @@ -227,26 +228,18 @@ function template_bi_redirect_stats($board) */ function template_bi_board_lastpost($board) { - if (!empty($board['last_post']['id'])) - { - if (!empty($board['last_post']['member']['avatar'])) - echo ' - '; - else - echo ' - '; - - echo ' -

        '; - echo ' - - ' . $board['last_post']['link'] .' - - - ' . $board['last_post']['member']['link'] . ' : '. timeformat($board['last_post']['timestamp']). ' - '; - echo '

        '; + if (empty($board['last_post']['id'])) { + return; } + + echo ' + ', ($board['last_post']['member']['id'] ? '' : ''), ' + + ', ($board['last_post']['member']['id'] ? '' : ''), ' + +

        + ', $board['last_post']['link'], ', ', Lang::getTxt('last_post_updated', ['time' => $board['last_post']['time'], 'member_link' => $board['last_post']['member']['link']]), ' +

        '; } /** @@ -278,7 +271,7 @@ function template_bi_board_children($board) } echo ' -
        +

        ', Lang::getTxt( 'sub_boards_list', diff --git a/Themes/default/MessageIndex.template.php b/Themes/default/MessageIndex.template.php index ec03a73731..49de115117 100644 --- a/Themes/default/MessageIndex.template.php +++ b/Themes/default/MessageIndex.template.php @@ -81,11 +81,11 @@ function template_main() foreach (Utils::$context['boards'] as $board) { echo ' -

        +
        ', function_exists('template_bi_' . $board['type'] . '_icon') ? call_user_func('template_bi_' . $board['type'] . '_icon', $board) : template_bi_board_icon($board), '
        -
        +
        ', function_exists('template_bi_' . $board['type'] . '_info') ? call_user_func('template_bi_' . $board['type'] . '_info', $board) : template_bi_board_info($board), '
        '; @@ -97,7 +97,7 @@ function template_main() // Show the last post if there is one. echo ' -
        +
        ', function_exists('template_bi_' . $board['type'] . '_lastpost') ? call_user_func('template_bi_' . $board['type'] . '_lastpost', $board) : template_bi_board_lastpost($board), '
        '; @@ -198,96 +198,99 @@ function template_main() foreach (Utils::$context['topics'] as $topic) { echo ' -
        -
        - - ', $topic['is_posted_in'] ? '' : '', ' -
        -
        -
        '; +
        +
        + + ', $topic['is_posted_in'] ? '' : '', ' +
        +
        +
        '; // Now we handle the icons echo ' -
        '; +
        '; if ($topic['is_watched']) echo ' - '; + '; if ($topic['is_locked']) echo ' - '; + '; if ($topic['is_sticky']) echo ' - '; + '; if ($topic['is_redirect']) echo ' - '; + '; if ($topic['is_poll']) echo ' - '; + '; echo ' -
        '; +
        '; echo ' -
        - ', $topic['new'] && User::$me->is_logged ? '' . Lang::getTxt('new', file: 'General') . '' : '', ' - - ', $topic['first_post']['link'], (!$topic['approved'] ? ' (' . Lang::getTxt('awaiting_approval', file: 'General') . ')' : ''), ' - -
        -

        - ', Lang::getTxt('started_by_member', ['member' => $topic['first_post']['member']['link']], file: 'General'), ' -

        - ', !empty($topic['pages']) ? '' . $topic['pages'] . '' : '', ' -
        -
        -
        -

        ', Lang::getTxt('number_of_replies', [$topic['replies']], file: 'General'), '
        ', Lang::getTxt('number_of_views', [$topic['views']], file: 'General'), '

        -
        -
        -

        ', Lang::getTxt('last_post_topic', ['post_link' => '' . $topic['last_post']['time'] . '', 'member_link' => $topic['last_post']['member']['link']], file: 'General'), '

        -
        '; +
        + ', $topic['new'] && User::$me->is_logged ? '' . Lang::$txt['new'] . '' : '', ' + + ', $topic['first_post']['link'], (!$topic['approved'] ? ' (' . Lang::$txt['awaiting_approval'] . ')' : ''), ' + +
        +

        + ', Lang::getTxt('started_by_member', ['member' => $topic['first_post']['member']['link']]), ' +

        + ', !empty($topic['pages']) ? '' . $topic['pages'] . '' : '', ' +
        +
        +
        +

        ', Lang::getTxt('number_of_replies', [$topic['replies']]), '
        ', Lang::getTxt('number_of_views', [$topic['views']]), '

        +
        +
        +

        ', Lang::getTxt('last_post_topic', ['post_link' => '' . $topic['last_post']['time'] . '', 'member_link' => $topic['last_post']['member']['link']]), '

        +
        '; // Show the quick moderation options? if (!empty(Utils::$context['can_quick_mod'])) { echo ' -
        '; +
        '; if (Theme::$current->options['display_quick_mod'] == 1) echo ' - '; + '; else { // Check permissions on each and show only the ones they are allowed to use. if ($topic['quick_mod']['remove']) - echo ''; + echo ' + '; if ($topic['quick_mod']['lock']) - echo ''; + echo ' + '; if ($topic['quick_mod']['lock'] || $topic['quick_mod']['remove']) - echo '
        '; + echo ' +
        '; if ($topic['quick_mod']['sticky']) - echo ''; + echo ' + '; if ($topic['quick_mod']['move']) - echo ''; + echo ' + '; } echo ' -
        '; +
        '; } echo ' -
        '; +
        '; } - echo ' -
        '; if (!empty(Utils::$context['can_quick_mod']) && Theme::$current->options['display_quick_mod'] == 1 && !empty(Utils::$context['topics'])) { @@ -420,7 +423,7 @@ function template_bi_redirect_icon($board) function template_bi_board_info($board) { echo ' - + ', $board['name'], ' '; @@ -447,7 +450,8 @@ function template_bi_board_stats($board) { echo '

        - ', Lang::getTxt('number_of_posts', [$board->posts], file: 'General'), '
        ', Lang::getTxt('number_of_topics', [$board->topics], file: 'General'), ' + ', Lang::getTxt('number_of_posts', [$board->posts]), ' + ', Lang::getTxt('number_of_topics', [$board->topics]), '

        '; } @@ -460,7 +464,7 @@ function template_bi_redirect_stats($board) { echo '

        - ', Lang::getTxt('number_of_redirects', [$board->posts], file: 'General'), ' + ', Lang::getTxt('number_of_redirects', [$board->posts]), '

        '; } @@ -472,26 +476,18 @@ function template_bi_redirect_stats($board) */ function template_bi_board_lastpost($board) { - if (!empty($board['last_post']['id'])) - { - if (!empty($board['last_post']['member']['avatar'])) - echo ' - '; - else - echo ' - '; - - echo ' -

        '; - echo ' - - ' . $board['last_post']['link'] .' - - - ' . $board['last_post']['member']['link'] . ' : '. timeformat($board['last_post']['timestamp']). ' - '; - echo '

        '; + if (empty($board['last_post']['id'])) { + return; } + + echo ' + ', ($board['last_post']['member']['id'] ? '' : ''), ' + + ', ($board['last_post']['member']['id'] ? '' : ''), ' + +

        + ', $board['last_post']['link'], ', ', Lang::getTxt('last_post_updated', ['time' => $board['last_post']['time'], 'member_link' => $board['last_post']['member']['link']]), ' +

        '; } /** @@ -523,7 +519,7 @@ function template_bi_board_children($board) } echo ' -
        +

        ', Lang::getTxt( 'sub_boards_list', diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index ba78dec2d7..d3ae82b208 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -3396,22 +3396,38 @@ div#manage_boards dl dd textarea[name=desc] { } /* BoardIndex */ -/* This place covers board places (boardindex/messageindex/recent) */ -h3 .collapse { - float: right; - margin: 4px 4px 0 0; +/* This place covers board places (boardindex/messageindex) */ +.board_container { + --window-border-width: 0 1px 1px; + align-items: center; + background: var(--window-bg); + border-color: var(--window-border-color); + border-style: var(--window-border-style); + border-width: var(--window-border-width); + display: grid; + gap: 0 .75em; + grid-template-areas: "icon info stats lastpost"; + grid-template-columns: 70px 1fr 12% 28%; + padding-inline: .75em; +} +.board_container:first-child { + --window-border-width: 1px; +} +.board_container > :where(div) { + padding-block: .5em; } .board_icon { - text-align: center; - padding: 8px 4px 0px 4px; - width: 60px; - flex-shrink: 0; + grid-area: icon; + text-align: center; +} +.board_icon:has(~ .board_children) { + grid-row: span 2; } .board_icon a { display: inline; text-decoration: none; } -.board_icon a:hover, .board_icon a:focus { +.board_icon a:is(:hover, :focus) { display: inline; text-decoration: none; } @@ -3422,13 +3438,13 @@ h3 .collapse { content: "\f086"; color: var(--body-link-color); } -.board_icon a.board_on::before { - font-weight: 900; -} -.board_icon a:hover::before { +.board_icon a:is(:hover, :focus)::before { color: var(--body-link-color_hover); text-decoration: none; } +.board_icon a.board_on::before { + font-weight: 900; +} .board_icon a.board_on2::before { font-weight: 900; } @@ -3439,116 +3455,62 @@ h3 .collapse { font-weight: 900; content: "\f0a9"; } -.boardindex_table .board_icon { - width: 80px; -} -.boardindex_table .info { - width: calc(70% - 80px); -} -.boardindex_table .board_stats { - padding: 13px 10px 10px; -} -.boardindex_table .board_stats p { - border: none; - text-align: right; - font-weight: 600; -} -.boardindex_table .board_stats_number { - font-size: 1.4em; - font-weight: 700; -} -.info { - overflow: hidden; +.board_info { + grid-area: info; overflow-wrap: break-word; - padding: 5px 5px 5px 0; - flex-grow: 1; } -.info .subject { - font-weight: 700; - font-size: 1em; +.board_info .subject { color: var(--body-link-color); + font-size: 1em; + font-weight: 700; } -.board_stats { - width: 10%; - font-size: 0.9em; - margin: 0 0 0 auto; - text-align: center; -} -.board_icon, .info, .board_stats, .lastpost { - display: inline-block; - align-self: center; -} -.lastpost { - width: 20%; - font-size: 0.9em; - display: inline-flex; -} -.lastpost .board_avatar { - padding-top: 7px; +.board_info .board_description { + font-size: .9em; } -.board_avatar { - display: inline-flex; - justify-content: center; - align-items: center; - margin-right: 2px; +.board_info .moderators { + font-size: 0.85em; } -.board_avatar img{ - width: 35px; - height: 35px; - border-radius: 50%; +.board_info .moderators a { + font-weight: bold; } - -@media (max-width: 855px) { -.board_avatar { - display: none; +.board_stats { + font-size: .8em; + grid-area: stats; + text-align: end; } +.board_stats p { + border: none; + display: grid; + text-align: right; + font-weight: 400; } - .board_lastpost { - padding: 7px 0px 0px 0px; -} -.main_container { - margin-bottom: 20px; -} -.up_contain { - background: var(--window-bg); - border-color: var(--window-border-color); - border-style: var(--window-border-style); - border-width: var(--window-border-width); + align-items: center; display: flex; - flex-wrap: wrap; - margin: 0; - overflow: hidden; + font-size: 0.9em; + gap: .75em; + grid-area: lastpost; } -.up_contain:not(:first-child) { - --window-border-width: 0 1px 1px; +.board_lastpost:not(:has(> p)) { + display: none; } -/* Child boards */ -/* @todo ? */ -.children { - background: var(--window-even-bg); - border-top: 1px var(--window-border-style) var(--window-border-color); - padding: 0.25em 1em; - width: 100%; +.board_lastpost img.avatar { + --avatar-size: 35px; } -.children p { - font-size: 0.9em; +.boardindex_table .main_container { + margin-bottom: 20px; } -.children span::after { +.board_children { + font-size: .9em; + grid-column: info/lastpost; + padding-block-start: 0; +} +.board_children span::after { content: ", "; } -.children span:last-of-type::after { +.board_children span:last-of-type::after { content: ""; } -p.moderators { - font-size: 0.9em; -} -p.moderators a { - font-weight: bold; -} -span.postby { - display: block; -} /* Info Center */ #info_center { @@ -3595,7 +3557,6 @@ span.postby { #ic_recentposts .recenttime { width: 25%; } - /* Info Center Blocks */ #upshrink_stats { display: grid; @@ -3665,45 +3626,90 @@ span.postby { content: " - "; } /* Topic list */ +#topic_header, +.topic_container { + display: grid; + font-size: .9em; + gap: .25em .75em; + grid-template-areas: "icon info stats lastpost moderation"; + grid-template-columns: auto 1fr 10% 28% auto; + padding-inline: .75em; +} #topic_header { margin: 0; - border-radius: 0; - display: flex; } -#topic_header div { - font-weight: bold; - font-size: 1em; - padding: 0; +.topic_container { + --window-margin-inline: 0; + --window-padding-block: .25em; + --window-padding-inline: 0; + align-items: center; } -#topic_header input { - margin-top: 5px !important; +#topic_header > :where(div), +.topic_container > :where(div) { + padding-block: .15em; } -#topic_container .windowbg { - border-color: var(--window-border-color); - border-style: var(--window-border-style); - border-width: var(--window-border-width); - border-top: none; +.topic_icon { + align-items: center; display: flex; - padding: 0; - margin: 0; - overflow: hidden; + flex-direction: column; + grid-area: icon; } -#topic_container .lastpost, #topic_header .lastpost { - width: 20%; +.topic_info { + grid-area: info; } -#topic_container .lastpost, #topic_container .board_stats { - flex-shrink: 0; +.topic_stats { + grid-area: stats; } -.icon img, .moderation input { - margin-top: 15px; +.topic_lastpost { + grid-area: lastpost; } -.moderation { +.topic_moderation { display: inline-block; - width: 35px; - flex-shrink: 0; - vertical-align: middle; + grid-area: moderation; text-align: center; + vertical-align: middle; + width: 35px; +} +.icon img, .moderation input { + margin-top: 15px; +} +.topic_info { + position: relative; +} +.topic_info .icons { + display: flex; + gap: .5em; + inset-inline-end: .5em; + position: absolute; +} +.topic_info .started_by { + float: inline-start; +} +.topic_info .pagelinks { + float: inline-end; + font-size: .85em; +} +.topic_stats { + text-align: end; +} +.topic_stats p { + border: none; + text-align: right; + font-size: .8em; + font-weight: 400; +} +.topic_lastpost { + align-items: center; + display: flex; + gap: .75em; } +.topic_container .topic_lastpost:not(:has(> p)) { + display: none; +} +.topic_lastpost img.avatar { + --avatar-size: 30px; +} + /* Quick moderation selects and submit */ #quick_actions { margin: 6px 0; From 485f9b714cbff16d86800cce6fce3a4d6d41936c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Andr=C3=A9s?= Date: Fri, 11 Oct 2024 20:04:30 -0600 Subject: [PATCH 084/115] postbit and poster layout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Diego Andrés --- Themes/default/Display.template.php | 94 ++++++++++----------- Themes/default/PersonalMessage.template.php | 82 ++++++++---------- Themes/default/css/postbit.css | 62 ++++++++------ 3 files changed, 115 insertions(+), 123 deletions(-) diff --git a/Themes/default/Display.template.php b/Themes/default/Display.template.php index 43326d4299..c3468f75f0 100644 --- a/Themes/default/Display.template.php +++ b/Themes/default/Display.template.php @@ -433,7 +433,9 @@ function template_single_post($message) // Show the message. echo '

        -
        '; + ', $message['id'] != Utils::$context['first_message'] ? ' + ' . ($message['first_new'] ? '' : '') : '', ' +
        '; // Show information about the poster of this message. echo ' @@ -443,16 +445,14 @@ function template_single_post($message) if (!empty($message['custom_fields']['above_member'])) { echo ' -
        -
          '; + '; foreach ($message['custom_fields']['above_member'] as $custom) echo ' -
        • ', $custom['value'], '
          • '; +
        • ', $custom['value'], '
          • '; echo ' -
        -
        '; +
      '; } echo ' @@ -481,153 +481,147 @@ function template_single_post($message) // Begin display of user info echo ' -

      -
      '; @@ -856,7 +850,7 @@ function template_single_post($message) echo '
      -
      +
      '; } diff --git a/Themes/default/PersonalMessage.template.php b/Themes/default/PersonalMessage.template.php index e39ccb021c..15e5b78603 100644 --- a/Themes/default/PersonalMessage.template.php +++ b/Themes/default/PersonalMessage.template.php @@ -284,23 +284,21 @@ function template_single_pm($message) { echo '
      -
      +
      '; // Are there any custom fields above the member name? if (!empty($message['custom_fields']['above_member'])) { echo ' -
      -
        '; +
          '; foreach ($message['custom_fields']['above_member'] as $custom) echo ' -
        • ', $custom['value'], '
          • '; +
        • ', $custom['value'], '
          • '; echo ' -
        -
      '; + '; } echo ' @@ -330,144 +328,136 @@ function template_single_pm($message) echo ' '; - echo ' -
      @@ -604,7 +594,7 @@ function template_single_pm($message) echo '
      -
      +
      '; } diff --git a/Themes/default/css/postbit.css b/Themes/default/css/postbit.css index ac61ea2004..038125ac89 100644 --- a/Themes/default/css/postbit.css +++ b/Themes/default/css/postbit.css @@ -19,26 +19,27 @@ white-space: pre; } /* poster and postarea + moderation area underneath */ -.post_wrapper::after { +.post_container::after { content: ""; display: block; clear: both; } -.post_wrapper { +.post_container { display: grid; grid: 1fr / var(--poster-width) 1fr; } /* poster details and list of items */ .poster { + align-content: flex-start; background: var(--poster-bg); - display: flex; - flex-direction: column; + display: grid; font-size: var(--poster-font-size); - gap: .25em .75em; + gap: .25em 1.5em; grid-row: var(--poster-grid-row); hyphens: auto; overflow-wrap: break-word; padding: .5em; + text-align: center; word-wrap: break-word; width: var(--poster-width); } @@ -57,36 +58,27 @@ .poster img { vertical-align: middle; } - -/* User info list (posts, group, etc) */ -.user_info { - display: flex; - flex-direction: column; - gap: .25em .75em; - justify-content: center; - text-align: center; -} -.user_info li.membergroup { +.poster .membergroup { font-weight: 700; } -.user_info li.warning a img { +.poster .warning a img { vertical-align: bottom; padding: 0 .25em; } -.user_info .profile_icons, -.user_info .im_icons ol { +.poster .profile_icons, +.poster .im_icons { align-items: center; display: flex; flex-wrap: wrap; gap: .25em .75em; justify-content: center; } -.user_info .profile_icons a, -.user_info .im_icons a { +.poster .profile_icons a, +.poster .im_icons a { display: inline-flex; } -.user_info img.avatar { - max-width: 100%; +.poster img.avatar { + --avatar-size: auto; object-fit: scale-down; } @@ -108,6 +100,7 @@ .keyinfo { align-items: center; display: grid; + gap: .75em; grid: auto auto / 1fr auto; } .keyinfo .postinfo { @@ -138,15 +131,15 @@ .keyinfo .page_number { font-size: .9em; font-weight: 700; - grid-row: 1/3; + grid-row: 1/4; line-height: 1.5em; } -.keyinfo h5.subject_title { - font-size: 1em; -} #reason::before { content: " - "; } +.subject_title { + grid-column: 1/3; +} .subject_title a { font-size: 0.9em; font-weight: bold; @@ -154,6 +147,9 @@ .subject_hidden a { display: none; } +.subject_title input { + width: 100%; +} /* Post or message */ .postarea .post { @@ -188,6 +184,18 @@ } /* Signatures */ -.post_wrapper .signature { +.post_container .signature { padding: 1em .75em; +} + +/* Quick Edit */ +input.quickModifyMargin { + margin-block: .5em; + width: 100%; +} +#quick_edit_body_container textarea { + margin-block: .75em; + min-height: 150px; + padding: .75em; + width: 100%; } \ No newline at end of file From d2026c23af22135bf0866bb19ab98d95a249b9c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Andr=C3=A9s?= Date: Fri, 11 Oct 2024 20:06:18 -0600 Subject: [PATCH 085/115] tidy up attachments css and use css variables MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Diego Andrés --- Themes/default/css/attachments.css | 139 +++++++++++++++-------------- Themes/default/css/dark.css | 3 +- Themes/default/css/index.css | 41 ++------- Themes/default/css/variables.css | 14 +-- 4 files changed, 87 insertions(+), 110 deletions(-) diff --git a/Themes/default/css/attachments.css b/Themes/default/css/attachments.css index 9398303969..2f4faf652c 100644 --- a/Themes/default/css/attachments.css +++ b/Themes/default/css/attachments.css @@ -1,52 +1,62 @@ -:root { - - --post_attachments_area_border_color: hsl(0, 0%, 93%);; - --post_attachments_area_border_style: dotted; - --post_attachments_area_border_width: 1px; - --post_attachments_area_hover_border_color: hsl(207, 31%, 48%); - -} - -/* For the revamped attachments UI introduced in 2.1.4 */ - /* Stuff common to both Display.template.php and Post.template.php */ .attachments { - padding: 12px 0 0 0; - display: flex; - flex-flow: row wrap; + background: var(--attachments-bg); + border-color: var(--attachments-border-color); + border-radius: var(--attachments-border-radius); + border-style: var(--attachments-border-style); + border-width: var(--attachments-border-width); + box-shadow: var(--attachments-box-shadow); + display: grid; + font-size: var(--attachments-font-size); + gap: .75em .5em; + grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); + line-height: var(--attachments-line-height); + padding-block: 1em .25em; + padding-inline: .25em; } .attached { - padding: 0 6px 8px 6px; - max-width: 100%; - display: flex; - flex-flow: column; - justify-content: center; - align-items: center; - vertical-align: initial; + align-items: flex-end; + align-self: flex-end; + display: grid; + grid-template-rows: auto 1fr; + padding: .25em .5em; + position: relative; } .attachments_top { - margin: 0 auto; - text-align: center; - flex: 1 1 auto; + align-items: flex-end; display: flex; - flex-flow: column; + margin-inline: auto; + height: 125px; justify-content: center; + overflow: hidden; + padding-block: 0 .5em; + width: 100%; +} +.attachments_top :is(a, img) { + height: 100%; + width: 100%; +} +.attachments_top img { + object-fit: contain; } .attachments_bot { overflow: hidden; text-overflow: ellipsis; - max-width: 100%; } .attachments_bot a, .attachments_bot .name, .attachments_info .name { white-space: nowrap; } +.attachments hr { + clear: both; + margin: 12px 0; +} /* Stuff unique to Post.template.php */ div#post_attachments_area.roundframe { + --roundframe-border-width: 0 1px 1px; --roundframe-border-color: var(--input-border-color); - border-top: none; overflow: visible; padding: 0; } @@ -55,30 +65,18 @@ div#post_attachments_area.roundframe { #post_attachments_area #attachment_previews { padding: initial; } -#post_attachments_area #postAttachment .attachments { - padding: 0; - border-top: none; - box-shadow: none; -} -#post_attachments_area #postAttachment .attached { - border-right: var(--post_attachments_area_border_width) vaR(--post_attachments_area_border_style) var(--post_attachments_area_border_color); - border-top: var(--post_attachments_area_border_width) vaR(--post_attachments_area_border_style) var(--post_attachments_area_border_color); - padding-top: 9px; - width: 200px; - position: relative; -} #post_attachments_area #postAttachment input { line-height: initial; } #post_attachments_area #postAttachment .attached input[type="checkbox"] { position: absolute; - right: 0; + inset-inline-end: 0; top: 0; } #post_attachments_area .attachment_spacer { display: flex; - flex-flow: column; flex: 1 1 200px; + flex-flow: column; min-width: 200px; order: 9999; } @@ -97,27 +95,33 @@ div#post_attachments_area.roundframe { margin: 0 2ch; } #post_attachments_area .dz-image-preview { + align-items: center; flex: 1 0 auto; display: flex; flex-flow: column; - align-items: center; justify-content: center; - position: relative; margin: 0; + position: relative; } #post_attachments_area .dz-image-preview .attachment_preview_wrapper { - flex: 1 0 auto; + align-items: center; display: flex; + flex: 1 0 auto; flex-flow: column; - align-items: center; justify-content: center; - width: 200px; padding: 5px; + width: 200px; } #post_attachments_area .dz-image-preview:not(.errorbox) .attachment_preview_wrapper { position: relative; } #post_attachments_area #attachment_previews { + background: var(--attachments-bg); + border-color: var(--attachments-border-color); + border-radius: var(--attachments-border-radius); + border-style: var(--attachments-border-style); + border-width: var(--attachments-border-width); + box-shadow: var(--attachments-box-shadow); display: none; flex-flow: row wrap; justify-content: space-evenly; @@ -134,48 +138,53 @@ div#post_attachments_area.roundframe { display: none; } #post_attachments_area #attachment_previews .attach-preview { - flex: 1 1 auto; display: flex; + flex: 1 1 auto; justify-content: center; margin: 0.5em 0; - min-height: 75px; max-height: 200px; + min-height: 75px; width: auto; } #post_attachments_area #attachment_previews .attach-preview img { object-fit: contain; } #post_attachments_area #attachment_previews .attachment_info { + flex: initial; + max-width: 100%; overflow: hidden; text-overflow: ellipsis; - max-width: 100%; - flex: initial; width: auto; } #post_attachments_area #attachment_previews .attachment_info span:not(:first-child)::before { - display: block; content: ""; + display: block; } #post_attachments_area #attachment_previews .attach-ui { - position: absolute; - right: 5px; - top: 5px; border-radius: 4px; - padding: 0.5ch; - min-height: initial; - margin: 0; box-shadow: none; + inset-inline-end: 5px; + margin: 0; + min-height: initial; + padding: 0.5ch; + position: absolute; + top: 5px; z-index: 2; } +#post_attachments_area #attachment_previews .attach-ui a { + font-weight: 700; + margin-inline: .25em; + text-decoration: none; +} #post_attachments_area .attached_BBC_width_height { - display: none; clear: both; + display: none; } #post_attachments_area .attached_BBC_width, #post_attachments_area .attached_BBC_height { - padding: 5px 0; - margin: 0; display: block; + margin: 0; + padding: 5px 0; } #post_attachments_area #attachment_upload { border: 2px dashed transparent; @@ -183,7 +192,7 @@ div#post_attachments_area.roundframe { min-height: initial; } #post_attachments_area #attachment_upload.dz-drag-hover { - border-color: var(--post_attachments_area_hover_border_color); + border-color: var(--input-border-color); } #post_attachments_area .dz-clickable { cursor: pointer; @@ -196,10 +205,10 @@ div#post_attachments_area.roundframe { } #post_attachments_area #max_files_progress { display: none; - border-radius: 0 0 7px 7px; - border-left: none; - border-right: none; - border-bottom: none; + border-radius: var(--roundframe-border-radius); + border-start-end-radius: 0; + border-start-start-radius: 0; + border-width: 1px 0 0; } #post_attachments_area #max_files_progress_text { display: none; diff --git a/Themes/default/css/dark.css b/Themes/default/css/dark.css index b08e22996e..67537007a0 100644 --- a/Themes/default/css/dark.css +++ b/Themes/default/css/dark.css @@ -294,8 +294,7 @@ --calendar-today-color: #fff; /** Attachments **/ - --attachments-border-color: hsl(var(--primary-color-hue), 15%, 22%); - --attachments-box-shadow: 0 1px 0 hsl(0, 0%, 0%) inset; + --attachments-bg: hsl(var(--primary-color-hue), 20%, 11%); /** Signature **/ --signature-border-color: hsl(var(--primary-color-hue), 15%, 22%); diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index d3ae82b208..221d2f6301 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -3800,24 +3800,6 @@ div#pollmoderation { img.smiley { vertical-align: bottom; } - -.attachments { - padding: 12px 0 0 0; -} -.attached { - padding: 0 6px 8px 6px; - max-width: 100%; - display: inline-block; - vertical-align: top; -} -.attachments_top { - margin: 0 auto; - text-align: center; -} -.attachments hr { - clear: both; - margin: 12px 0; -} .show_on_hover:hover span { display:none; } @@ -3978,28 +3960,15 @@ ul.post_options li { line-height: var(--signature-line-height); word-break: break-all; } -.attachments, +/* Custom fields above and below the signature */ .custom_fields_above_signature, .custom_fields_below_signature { - width: 100%; - overflow: auto; clear: inline-end; - padding: 12px 0 3px 0; - line-height: 1.4em; font-size: 0.9em; -} -/* Attachments */ -.attachments { - background: var(--attachments-bg); - border-color: var(--attachments-border-color); - border-radius: var(--attachments-border-radius); - border-style: var(--attachments-border-style); - border-width: var(--attachments-border-width); - box-shadow: var(--attachments-box-shadow); - font-size: var(--attachments-font-size); - line-height: var(--attachments-line-height); - padding-block: 1em .25em; - padding-inline: .25em; + line-height: 1.4em; + overflow: auto; + padding: 12px 0 3px 0; + width: 100%; } /* Like button */ diff --git a/Themes/default/css/variables.css b/Themes/default/css/variables.css index 4f0db6e433..973c43503d 100644 --- a/Themes/default/css/variables.css +++ b/Themes/default/css/variables.css @@ -1394,14 +1394,14 @@ --calendar-th-bg: var(--titlebar-bg); /** Attachments **/ - --attachments-bg: transparent; - --attachments-border-color: hsl(0, 0%, 75%); - --attachments-border-radius: 0; + --attachments-bg: hsl(var(--primary-color-hue), 45%, 97%); + --attachments-border-color: var(--window-border-color); + --attachments-border-radius: 1px; --attachments-border-style: solid; - --attachments-border-width: 1px 0 0; - --attachments-box-shadow: 0 1px 0 hsl(0, 0%, 100%) inset; - --attachments-font-size: 0.9em; - --attachments-line-height: 1.4em; + --attachments-border-width: 0; + --attachments-box-shadow: var(--window-box-shadow); + --attachments-font-size: .9em; + --attachments-line-height: 1.5; /** Signature **/ --signature-bg: transparent; From 1cb587f73002b3d0f9641bd3d5ae5493828c8eaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Andr=C3=A9s?= Date: Fri, 11 Oct 2024 20:10:36 -0600 Subject: [PATCH 086/115] icons cleanup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Diego Andrés --- Themes/default/css/icons.css | 351 ++++++++++++++--------------------- 1 file changed, 136 insertions(+), 215 deletions(-) diff --git a/Themes/default/css/icons.css b/Themes/default/css/icons.css index 47ebf44138..2848663138 100644 --- a/Themes/default/css/icons.css +++ b/Themes/default/css/icons.css @@ -1,44 +1,38 @@ -/** - * @package Theme Customs - * @author Diego Andrés - * @copyright Copyright (c) 2023, SMF Tricks - * @license MIT - */ - -/* Replace SMF Icons */ +/* SMF Icons */ .main_icons { display: inline-flex; -} -.main_icons::before, -.large_admin_menu_icon::before { font-family: "Font Awesome 6 Free"; - display: inline-block; - font-style: normal; + font-size: 1em; + -webkit-font-smoothing: antialiased; + font-style: normal; font-variant: normal; - text-rendering: auto; - -webkit-font-smoothing: antialiased; font-weight: 900; + text-rendering: auto; + width: auto; +} +.main_icons::before { + display: inline-block; background: none !important; width: auto; height: auto; - font-size: 1em; margin: 0; vertical-align: top; } -.main_icons.medium_icon::before { - font-size: 1.25em; +.main_icons.medium { + font-size: 1.5em; +} +.main_icons.large { + font-size: 2.5em; +} +.main_icons.regular { + font-weight: 400; } /* Menu Icons Adjustment */ .dropmenu .main_icons::before, #profile_menu .main_icons::before, .dropmenu img { margin: 0; vertical-align: middle; } -/* Bigger Icons */ -.large_admin_menu_icon::before { - font-size: 2.5em; - width: auto !important; - height: auto !important; -} + /* Remove height and width? */ h3.profile_hd::before, .main_icons.profile_hd::before { @@ -66,12 +60,11 @@ h3.profile_hd::before, /* Check */ .main_icons.check::before, .main_icons.valid::before, -.fa-solve_topic::before { - content: "\f00c"; +.main_icons.solve::before { + content: "\f058"; } /* Invalid */ .main_icons.invalid::before, -.fa-warn_button::before, .main_icons.warn_button::before { content: "\f071"; } @@ -100,13 +93,11 @@ h3.profile_hd::before, /* Boards */ .main_icons.boards::before, .large_admin_menu_icon.boards::before, -.fa-forum::before, .main_icons.menu_tpforum::before { content: "\f07c"; } /* General */ -.main_icons.general::before, -.fa-forum_stats::before { +.main_icons.general::before { content: "\f200"; } /* Features */ @@ -114,18 +105,15 @@ h3.profile_hd::before, content: "\f03a"; } /* Security */ -.main_icons.security::before, -.large_admin_menu_icon.security::before { +.main_icons.security::before { content: "\f544"; } /* Posters */ .main_icons.posters::before { content: "\f091"; } -/* Replies */ -/* Im On */ -.main_icons.replies::before, -.main_icons.topics_replies::before { +/* Comment */ +.main_icons.comment::before { content: "\f4ad"; } /* History */ @@ -137,8 +125,7 @@ h3.profile_hd::before, content: "\f253"; } /* Scheduled */ -.main_icons.scheduled::before, -.large_admin_menu_icon.scheduled::before { +.main_icons.scheduled::before { content: "\f017"; } /* Last Post */ @@ -151,8 +138,6 @@ h3.profile_hd::before, } /* Membergroups */ .main_icons.membergroups::before, -.large_admin_menu_icon.membergroups::before, -.fa-team::before, .main_icons.team::before { content: "\f509"; } @@ -190,8 +175,7 @@ h3.profile_hd::before, content: "\f35a"; } /* Mail */ -.main_icons.mail::before, -.large_admin_menu_icon.mail::before { +.main_icons.mail::before { content: "\f0e0"; } /* Mail New */ @@ -221,27 +205,23 @@ h3.profile_hd::before, content: "\f067"; } /* Warning */ -.main_icons.warning::before, -.large_admin_menu_icon.warning::before { +.main_icons.warning::before { content: "\f637"; } /* Themes */ .main_icons.themes::before, -.fa-features::before, -.large_admin_menu_icon.themes::before { +.main_icons.features::before { content: "\f5fd"; } /* Support */ -.main_icons.support::before, -.large_admin_menu_icon.support::before { +.main_icons.support::before { content: "\f1cd"; } /* Likes */ .main_icons.liked::before, .main_icons.liked_users::before, .main_icons.liked_messages::before, -.main_icons.like::before, -.fa-like::before { +.main_icons.like::before { content: "\f164"; } /* Unlike */ @@ -251,12 +231,12 @@ h3.profile_hd::before, content: "\f165"; } /* Current Theme */ -.main_icons.current_theme::before, -.large_admin_menu_icon.current_theme::before { +.main_icons.current_theme::before { content: "\f53f"; } /* Stats */ -.main_icons.stats::before { +.main_icons.stats::before, +.main_icons.forum_stats::before { content: "\f080"; } /* Right Arrow */ @@ -273,32 +253,26 @@ h3.profile_hd::before, content: "\f118"; } /* Server */ -.main_icons.server::before, -.large_admin_menu_icon.server::before { +.main_icons.server::before { content: "\f233"; } /* Ban */ -.main_icons.ban::before, -.large_admin_menu_icon.ban::before { +.main_icons.ban::before { content: "\f05e"; } /* Ignore */ -.fa-frenemy::before, -.fa-ignore::before, .main_icons.ignore::before, .main_icons.frenemy::before, .main_icons.disable::before { content: "\f506"; } /* Posts */ -.main_icons.posts::before, -.large_admin_menu_icon.posts::before { +.main_icons.posts::before { content: "\f0c5"; } /* Sort */ -.main_icons.sort_down::before, -.main_icons.sort_up::before { - margin: 0 8px; +.main_icons.sort::before { + content: "\f0dc"; } /* Sort Down */ .main_icons.sort_down::before { @@ -325,19 +299,15 @@ h3.profile_hd::before, content: "\f127"; } /* Permissions */ -.main_icons.permissions::before, -.large_admin_menu_icon.permissions::before { +.main_icons.permissions::before { content: "\f084"; } /* Paid */ -.main_icons.paid::before, -.large_admin_menu_icon.paid::before, -.fa-paid::before { +.main_icons.paid::before { content: "\f155"; } /* Packages */ -.main_icons.packages::before, -.large_admin_menu_icon.packages::before { +.main_icons.packages::before { content: "\f466"; } /* Filter */ @@ -349,13 +319,11 @@ h3.profile_hd::before, content: "\f362"; } /* Reports */ -.main_icons.reports::before, -.large_admin_menu_icon.reports::before { +.main_icons.reports::before { content: "\f573"; } /* News */ -.main_icons.news::before, -.large_admin_menu_icon.news::before { +.main_icons.news::before { content: "\f1ea"; } /* Hide Popup */ @@ -367,13 +335,11 @@ h3.profile_hd::before, content: "\f55a"; } /* Modifications */ -.main_icons.modifications::before, -.large_admin_menu_icon.modifications::before { +.main_icons.modifications::before { content: "\f12e"; } /* Maintain */ -.main_icons.maintain::before, -.large_admin_menu_icon.maintain::before { +.main_icons.maintain::before { content: "\f0ad"; } /* Administration */ @@ -381,8 +347,7 @@ h3.profile_hd::before, content: "\f552"; } /* Attachment */ -.main_icons.attachment::before, -.large_admin_menu_icon.attachment::before { +.main_icons.attachment::before { content: "\f0c6"; } /* Error & Report */ @@ -391,8 +356,7 @@ h3.profile_hd::before, content: "\f024"; } /* Languages */ -.main_icons.languages::before, -.large_admin_menu_icon.languages::before { +.main_icons.languages::before { content: "\f1ab"; } /* Members Request */ @@ -408,14 +372,11 @@ h3.profile_hd::before, content: "\f21b"; } /* Logs */ -.main_icons.logs::before, -.large_admin_menu_icon.logs::before { +.main_icons.logs::before { content: "\f46d"; } /* Features */ -.main_icons.features::before, -.fa-tasksmanager::before, -.large_admin_menu_icon.features::before { +.main_icons.features::before { content: "\f0ae"; } /* Settings */ @@ -447,254 +408,215 @@ h3.profile_hd::before, content: "\f103"; } /* Mark All Read */ -.fa-markread::before, -.fa-readall::before, -.fa-read_button::before, -.fa-mark_read_short::before, -.fa-mark_as_read::before, .main_icons.read_button::before, +.main_icons.mark_read_short::before, +.main_icons.mark_as_read::before, .main_icons.markread::before { content: "\f560"; } /* Mark Selected */ -.fa-markselectread::before, -.fa-quick_mod_markread::before, -.fa-TopicSolved_mark_solved::before { - content: "\f058"; +.main_icons.markselected::before { + content: "\f00c"; } -/* Not Read */ -.fa-mark_unread::before, -.fa-unread_button::before, -.fa-unsolve_topic::before, -.fa-TopicSolved_mark_unsolved::before, +/* All Unread */ +.main_icons.unread::before, +.main_icons.unread_topics_all::before { + content: "\f0ae"; +} +/* Mark Not Read */ +.main_icons.mark_unread::before, +.main_icons.markunread::before, .main_icons.unread_button::before { - content: "\f00d"; + content: "\f070"; } /* Send Topic */ -.main_icons.send::before, -.fa-send::before { +.main_icons.send::before { content: "\f1d8"; } /* Unnotify */ -.fa-unnotify::before { +.main_icons.unnotify::before { content: "\f1f6"; } /* New Poll */ -.fa-post_poll::before, -.fa-new_poll::before, -.fa-add_poll::before, -.main_icons.poll::before { +.main_icons.poll::before, +.main_icons.new_poll::before, +.main_icons.add_poll::before { content: "\f682"; } /* Delete */ -.fa-remove_poll::before, -.fa-delete::before, -.fa-remove_topic::before, -.fa-remove_button::before, -.fa-collections_remove::before, -.main_icons.remove_button::before, .main_icons.delete::before, -.main_icons.collections_remove::before { +.main_icons.remove_topic::before, +.main_icons.remove_button::before { content: "\f2ed"; } /* Restore */ -.fa-restore_topic::before, -.fa-restore_button::before, +.main_icons.restore::before, .main_icons.restore_button::before { content: "\f829"; } /* New Topic */ -.fa-new_topic::before, .main_icons.newtopic::before, +.main_icons.new_topic::before, .main_icons.newpm::before { content: "\2b"; } /* Move Topic */ -.fa-move::before, -.fa-move_topic::before, -.main_icons.move::before { +.main_icons.move::before, +.main_icons.move_topic::before { content: "\f0b2"; } /* Sticky Topic */ -.fa-set_sticky::before, -.fa-set_nonsticky::before, -.main_icons.sticky::before { +.main_icons.sticky::before, +.main_icons.set_sticky::before { content: "\f08d"; } /* Lock Topic */ -.fa-set_lock::before, -.main_icons.lock::before { +.main_icons.lock::before, +.main_icons.set_lock::before { content: "\f023"; } /* Unlock Topic */ -.fa-set_unlock::before, .main_icons.unlock::before, +.main_icons.set_unlock::before, .main_icons.post_moderation_allow::before { content: "\f3c1"; } /* Merge Topic */ -.fa-merge::before, .main_icons.merge::before { content: "\f248"; } /* Link Calendar */ -.fa-calendar_link::before { +.main_icons.calendar_link::before { content: "\f274"; } /* Members */ -.fa-view_all_members::before, -.fa-mlist::before, -.fa-people::before, .main_icons.mlist::before, -.main_icons.people::before { +.main_icons.people::before, +.main_icons.online_users::before, +.main_icons.view_all_members::before { content: "\f0c0"; } /* Find Member */ -.fa-mlist_search::before { +.main_icons.user_search::before, +.main_icons.mlist_search::before { content: "\f4fc"; } /* Calendar */ -.fa-calendar::before, -.fa-calendar_upcoming::before, .main_icons.calendar::before, -.large_admin_menu_icon.calendar::before { +.main_icons.calendar_upcoming::before { content: "\f073"; } /* Post Event */ -.fa-calendar_post_event::before { +.main_icons.post_event::before { content: "\f783"; } /* Register */ .main_icons.main_icons.regcenter::before, -.main_icons.signup::before, -.large_admin_menu_icon.regcenter::before, -.fa-register::before, -.fa-signup::before { +.main_icons.signup::before { content: "\f234"; } /* Login */ .main_icons.login { width: auto; } -.fa-login::before, .main_icons.login::before { content: "\f2f6"; } /* Logout */ .main_icons.logout::before, -.fa-logout::before, -.main_icons.exit::before, -.large_admin_menu_icon.exit::before { +.main_icons.exit::before { content: "\f2f5"; } /* Notifications */ -.fa-notifications::before, -.fa-alerts::before, -.fa-mail::before, -.fa-notify::before, +.main_icons.notifications::before, .main_icons.notify::before, .main_icons.alerts::before { content: "\f0f3"; } -/* Pokes */ -.fa-pokes::before, -.fa-poke::before, -.main_icons.poke::before { - content: "\f0a4"; +/* Notifications Off */ +.main_icons.notify-off::before { + content: "\f1f6"; +} +/* Notifications Email */ +.main_icons.notify-email::before { + content: "\e4e8"; } /* Posts */ -.fa-posts::before { +.main_icons.posts::before, +.main_icons.replies::before { content: "\f086"; } /* Drafts */ -.main_icons.drafts::before, -.fa-drafts::before { +.main_icons.drafts::before { content: "\f044"; } /* Details */ -.fa-details::before, .main_icons.details::before { content: "\f05a"; } /* Reply */ -.fa-reply_button::before, +.main_icons.reply::before, .main_icons.reply_button::before { content: "\f3e5"; } /* Reply to all */ -.fa-reply_all_button::before, +.main_icons.reply_all::before, .main_icons.reply_all_button::before { content: "\f122"; } +/* Print */ +.main_icons.print::before { + content: "\f02f"; +} /* Quote */ -.fa-quote::before, .main_icons.quote::before { content: "\f10e"; } /* Quote Selected */ -.fa-quote_selected::before, .main_icons.quote_selected::before { content: "\f10d"; } /* Edit */ -.fa-quick_edit_button::before, -.fa-modify_button::before, .main_icons.quick_edit_button::before, -.main_icons.modify_button::before, -.main_icons.collections_edit::before { +.main_icons.modify_button::before { content: "\f303"; } /* Approve */ -.fa-approve_button::before, -.fa-approve::before, .main_icons.approve::before, .main_icons.approve_button::before { content: "\f14a"; } -/* Disapprove */ -.fa-unapprove_button::before, +/* Unapprove */ .main_icons.unapprove_button::before { content: "\f057"; } /* Split */ -.fa-split_button::before, .main_icons.split_button::before { content: "\f0db"; } -/* Community */ -.fa-community::before, -.main_icons.fa-community::before { - content: "\f022"; -} /* FA Nav */ -.fa-portal::before, .main_icons.home::before { content: "\f015"; } /* Help */ -.fa-help::before, .main_icons.help::before { content: "\f128"; } /* Admin */ -.fa-admin::before, .main_icons.admin::before { content: "\f085"; } /* Mod */ -.fa-moderate::before, .main_icons.moderate::before { content: "\f7d9"; } /* Profile */ .main_icons.profile::before, -.main_icons.members::before, -.large_admin_menu_icon.members::before { +.main_icons.members::before { content: "\f007"; } /* PM */ -.fa-pm::before, .main_icons.personal_message::before, .main_icons.inbox::before { content: "\f0e0"; @@ -703,32 +625,35 @@ h3.profile_hd::before, .main_icons.more::before { content: "\f142"; } -/* Shop */ -.main_icons.shop::before, -.fa-shop::before { - content: "\f07a"; -} -/* Store */ -.fa-store::before, -.main_icons.store::before { - content: "\f54e"; -} /* Info Center icons */ -.fa-recent_posts::before, .main_icons.recent_posts::before { content: "\f550"; } -.fa-online_users::before { +.main_icons.online_users::before { content: "\f500"; } /* Profile Account */ -.fa-maintain::before { +.main_icons.account::before { content: "\f505"; } /* Profile Details */ -.fa-members::before { +.main_icons.profile_details::before { content: "\f2c2"; } + +/** MODS **/ +/* Community */ +.main_icons.fa-community::before { + content: "\f022"; +} +/* Shop */ +.main_icons.shop::before { + content: "\f07a"; +} +/* Store */ +.main_icons.store::before { + content: "\f54e"; +} /* Optimus */ .main_icons.optimus::before, .large_admin_menu_icon.optimus::before, @@ -743,9 +668,7 @@ h3.profile_hd::before, } .main_icons.collections_save::before, .fa-collections_save::before, -.main_icons.bookmarks::before, -.fa-sticky::before, -.main_icons.sticky::before { +.main_icons.bookmarks::before { content: "\f02e"; } .main_icons.collections_bookmark::before, @@ -753,29 +676,27 @@ h3.profile_hd::before, content: "\f518"; } /* Quiz */ -.main_icons.quiz::before, -.fa-quiz::before { +.main_icons.quiz::before { content: "\f559"; } /* Affiliates */ -.main_icons.affiliates::before, -.fa-affiliates::before { +.main_icons.affiliates::before { content: "\f0ac"; } /* Gallery */ -.main_icons.media::before, -.fa-media::before, -.main_icons.gallery::before, -.fa-gallery::before { +.main_icons.media::before +.main_icons.gallery::before { content: "\f87c"; } /* Arcade */ -.main_icons.arcade::before, -.fa-arcade::before { +.main_icons.arcade::before { content: "\f11b"; } /* Battle */ -.main_icons.battle::before, -.fa-battle::before { +.main_icons.battle::before { content: "\f66d"; +} +/* Pokes */ +.main_icons.poke::before { + content: "\f0a4"; } \ No newline at end of file From fb11687fedfa0ecb01cc05006169ddfbcd6835ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Andr=C3=A9s?= Date: Fri, 11 Oct 2024 20:11:20 -0600 Subject: [PATCH 087/115] admin layout tweaks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Diego Andrés --- Themes/default/Admin.template.php | 28 ++-- Themes/default/css/admin.css | 208 ++++++++---------------------- 2 files changed, 70 insertions(+), 166 deletions(-) diff --git a/Themes/default/Admin.template.php b/Themes/default/Admin.template.php index ea11eb687e..e81377a249 100644 --- a/Themes/default/Admin.template.php +++ b/Themes/default/Admin.template.php @@ -73,34 +73,40 @@ function template_admin()
      - '; + +
      '; foreach (Utils::$context[Utils::$context['admin_menu_name']]['sections'] as $area_id => $area) { echo ' -
      - ', $area['title'], ''; + ', $area['title'], ' +
      '; foreach ($area['areas'] as $item_id => $item) { // No point showing the 'home' page here, we're already on it! - if ($area_id == 'forum' && $item_id == 'index') + if ($area_id == 'forum' && $item_id == 'index') { continue; + } $url = isset($item['url']) ? $item['url'] : Config::$scripturl . '?action=admin;area=' . $item_id . (!empty(Utils::$context[Utils::$context['admin_menu_name']]['extra_parameters']) ? Utils::$context[Utils::$context['admin_menu_name']]['extra_parameters'] : ''); - if (!empty($item['icon_file'])) - echo ' - ', $item['label'], ''; - else - echo ' - ', $item['label'], ''; + echo ' + + + ', !empty($item['icon_file']) ? '' : '', ' + + ', $item['label'], ' + '; } echo ' -
      '; +
      '; } + echo ' + '; + // The below functions include all the scripts needed from the simplemachines.org site. The language and format are passed for internationalization. if (empty(Config::$modSettings['disable_smf_js'])) echo ' diff --git a/Themes/default/css/admin.css b/Themes/default/css/admin.css index cad487e740..535442b85f 100644 --- a/Themes/default/css/admin.css +++ b/Themes/default/css/admin.css @@ -80,24 +80,25 @@ legend { line-height: 1.7em; } -/* Cleaned this up a bit for less clutter. -/* Admin and moderation could generally do with a clean up everywhere. -/* Live news from smorg and support information. */ -#live_news, #support_info { - width: 70%; -} -#support_info { - width: 30%; - padding-left: 6px; +/* The update warning. */ +#update_section { + margin: 6px 0; } +/* Live news from smorg and support information. */ #admin_main_section { + display: grid; + gap: .25em .5em; + grid-template-columns: 1fr 30%; overflow: auto; + + @media screen and (max-width: 991px) { + grid-template-columns: 1fr; + } } -#admin_main_section .windowbg { - padding: 6px 0; - border-radius: 0; - height: 12em; - overflow: auto; +#live_news, #support_info { + .windowbg { + height: 12.5em; + } } #smfAnnouncements dt, #smfAnnouncements dd { @@ -109,48 +110,59 @@ legend { padding: 4px 6px 2px 6px; } #smfAnnouncements dt a { - font-weight: bold; display: block; + font-weight: bold; } #smfAnnouncements dd { margin: 0; padding: 6px 12px; } - -fieldset.admin_group { - display: grid; - gap: 1em; - grid: auto / repeat(auto-fill, minmax(8em, 1fr)); +.admin_areas { + --window-padding-block: 0; + --window-padding-inline: 0; + display: flex; + flex-direction: column; + gap: .75em; + grid-column: 1/-1; + margin-block: 0 .5em; padding-block: 0.75em; - padding-inline: 0.5em; + padding-inline: .5em; } -fieldset.admin_group legend { - background: var(--window-bg); - border-color: var(--window-border-color); - border-radius: var(--window-border-radius); - border-style: var(--window-border-style); - border-width: var(--window-border-width); - box-shadow: var(--window-box-shadow); - padding: 1px 5px; +.admin_areas .section { + border: none; + display: grid; + gap: .75em 1em; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + margin: -.75em 0 0; + padding: .25em 0; } -fieldset.admin_group a { +.admin_areas a { align-items: center; - display: flex; - flex-direction: column; - gap: 0.25em; - justify-content: flex-start; + border-radius: .2em; + color: var(--body-link-color); + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto 1fr; + gap: .25em; + justify-content: center; text-align: center; + text-decoration: none; } -fieldset.admin_group > :not(span) { - font-size: 0.9em; +.admin_areas a:is(:hover, :focus, :focus-visible) > :not(.text-label) { + background: var(--window-bg_hover); +} +.admin_areas a > .text-label { + align-self: flex-start; + font-size: .75em; } -fieldset.admin_group .inactive { +.admin_areas a.inactive > :not(.text-label) { opacity: 0.4; } - -/* The update warning. */ -#update_section { - margin: 6px 0; +.admin_areas a > :not(.text-label) { + align-items: center; + display: flex; + justify-content: center; + min-height: 100px; } /* The icons. */ @@ -160,107 +172,6 @@ fieldset.admin_group .inactive { width: 32px; height: 32px; } -.large_admin_menu_icon::before { - background: url(../images/icons/admin_sprite.png) no-repeat -5px -47px; - margin: 0 auto; - display: block; - content: ''; - width: 32px; - height: 32px; -} -.large_admin_menu_icon.attachment::before { - background-position: -5px -5px; -} -.large_admin_menu_icon.ban::before { - background-position: -47px -5px; -} -.large_admin_menu_icon.boards::before { - background-position: -89px -5px; -} -.large_admin_menu_icon.calendar::before { - background-position: -131px -5px; -} -.large_admin_menu_icon.current_theme::before { - background-position: -173px -5px; -} -.large_admin_menu_icon.default::before { - background-position: -5px -47px; -} -.large_admin_menu_icon.engines::before { - background-position: -47px -47px; -} -.large_admin_menu_icon.exit::before { - background-position: -89px -47px; -} -.large_admin_menu_icon.features::before { - background-position: -131px -47px; -} -.large_admin_menu_icon.languages::before { - background-position: -173px -47px; -} -.large_admin_menu_icon.logs::before { - background-position: -5px -89px; -} -.large_admin_menu_icon.mail::before { - background-position: -47px -89px; -} -.large_admin_menu_icon.maintain::before { - background-position: -89px -89px; -} -.large_admin_menu_icon.membergroups::before { - background-position: -131px -89px; -} -.large_admin_menu_icon.members::before { - background-position: -173px -89px; -} -.large_admin_menu_icon.modifications::before { - background-position: -5px -131px; -} -.large_admin_menu_icon.news::before { - background-position: -47px -131px; -} -.large_admin_menu_icon.packages::before { - background-position: -89px -131px; -} -.large_admin_menu_icon.paid::before { - background-position: -131px -131px; -} -.large_admin_menu_icon.permissions::before { - background-position: -173px -131px; -} -.large_admin_menu_icon.posts::before { - background-position: -5px -173px; -} -.large_admin_menu_icon.regcenter::before { - background-position: -47px -173px; -} -.large_admin_menu_icon.reports::before { - background-position: -89px -173px; -} -.large_admin_menu_icon.scheduled::before { - background-position: -131px -173px; -} -.large_admin_menu_icon.search::before { - background-position: -173px -173px; -} -.large_admin_menu_icon.security::before { - background-position: -215px -5px; -} -.large_admin_menu_icon.server::before { - background-position: -215px -47px; -} -.large_admin_menu_icon.smiley::before { - background-position: -215px -89px; -} -.large_admin_menu_icon.support::before { - background-position: -215px -131px; -} -.large_admin_menu_icon.themes::before { - background-position: -215px -173px; -} -.large_admin_menu_icon.warning::before { - background-position: -5px -215px; -} /* Styles for the support and credits page. /* Hey, people might actually want to put their names on it now! @@ -357,11 +268,6 @@ pre.file_content { #manage_boards { overflow: auto; } -.roundframe .windowbg { - border: 0; - padding: 0; - background: none; -} #manage_boards li.windowbg { --window-border-radius: 0; --window-border-width: 1px 1px 0; @@ -565,14 +471,6 @@ ul.moderation_notes li { min-height: 2.4em; padding: 3px 0; } -#report_filter fieldset { - display: flex; - flex-flow: wrap; - gap: 0 1em; -} -.report_result { - margin: 1ex 0 !important; -} #support_credits .sub_bar { padding: 6px 0px 5px 0px; } From c8661d0d7364df5d477c9cd1c12c4d02d0e645d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Andr=C3=A9s?= Date: Fri, 11 Oct 2024 20:12:55 -0600 Subject: [PATCH 088/115] replace wrapper id selectors with a generic wrapper container selector MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Diego Andrés --- Themes/default/css/index.css | 37 ++++--------------------------- Themes/default/index.template.php | 10 ++++----- 2 files changed, 9 insertions(+), 38 deletions(-) diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 221d2f6301..4c594302be 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -1932,7 +1932,7 @@ html[lang="el-GR"] .buttonlist > li > :is(a, button) { /* Styles for the general looks of the theme. ------------------------------------------------------- */ /* Set maximum width limit for content */ -#top_section .inner_wrap, #wrapper, #header .inner_wrap, #footer .inner_wrap, #main_menu .inner_wrap { +.content-wrapper { max-width: var(--wrapper-width); margin: 0 auto; width: 90%; @@ -1962,7 +1962,7 @@ strong[id^='child_list_']::after { min-height: var(--header-height); padding: .5em .2em; } -#header .inner_wrap { +#header .content-wrapper { align-items: center; display: flex; justify-content: space-between; @@ -2000,36 +2000,7 @@ h1.forumtitle span#siteslogan { /* Even guests need to be aligned */ .welcome { line-height: 2.5em; -} -/* -/* The user info, news, etc.*/ -#upper_section { - padding: 0px; -} -#inner_section { - padding: 0px; - border-radius: 6px 6px 0 0; -} -#inner_section::after { - content: ""; - display: block; - clear: both; -} -/* The upper_section, float the two each way */ -#inner_wrap { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 12px; -} -ul li.greeting { - font-weight: bold; -} -/* The login form. */ -#guest_form { - overflow: hidden; - font-size: 0.9em; - margin-left: -2px; + padding: 0 10px; } /* News section. */ @@ -2284,7 +2255,7 @@ ul li.greeting { text-decoration: var(--footer-link-text-decoration_focus); text-shadow: var(--footer-link-text-shadow_focus); } -#footer .inner_wrap { +#footer .content-wrapper { align-items: center; display: flex; flex-wrap: wrap; diff --git a/Themes/default/index.template.php b/Themes/default/index.template.php index 9d51535514..d1c0d2a785 100644 --- a/Themes/default/index.template.php +++ b/Themes/default/index.template.php @@ -238,7 +238,7 @@ function template_body_above() // Header echo '