From 76ae8eb7dd80d5b5e3919d6b8904d21090e92a90 Mon Sep 17 00:00:00 2001 From: albertlast Date: Wed, 2 Sep 2026 09:02:55 +0200 Subject: [PATCH] Spaces the theme with logical margins and padding where the sides mirror margin-inline and padding-inline follow the writing direction, so the twenty rules where rtl.css did nothing but swap the left and right values no longer need an override. A rule qualifies only when the right-to-left values are the exact mirror of the left-to-right ones: the same top and bottom, and the left and right swapped. Four-value shorthands become a block pair and an inline pair, so margin: 0 0 4px 2% turns into margin-block: 0 4px and margin-inline: 2% 0. Where the base sheet used a single longhand it stays a single longhand, so margin-left becomes margin-inline-start. Everything else is left as it is. rtl.css contains a good many spacing rules that are not mirrors at all - they change the value as well as the side, or they add spacing the base sheet does not have - and no logical declaration can express two different values at once. Signed-off-by: albertlast --- Themes/default/css/admin.css | 16 +++++--- Themes/default/css/index.css | 24 +++++++----- Themes/default/css/profile.css | 2 +- Themes/default/css/rtl.css | 70 ---------------------------------- 4 files changed, 26 insertions(+), 86 deletions(-) diff --git a/Themes/default/css/admin.css b/Themes/default/css/admin.css index 0b21abce68..0ac509d551 100644 --- a/Themes/default/css/admin.css +++ b/Themes/default/css/admin.css @@ -270,11 +270,12 @@ fieldset.admin_group .inactive { /* Styles for the package manager. */ #package_list .tborder { - margin: .25em 0 .25em 26px; + margin-block: .25em; + margin-inline: 26px 0; } #package_list ol, #package_list ol li { list-style: decimal; - margin-left: 50px; + margin-inline-start: 50px; border: none; } #package_list li { @@ -374,7 +375,8 @@ pre.file_content { background-color: var(--admin-redirect-board-bg); } .move_links { - padding: 0 13px 0 0; + padding-block: 0; + padding-inline: 0 13px; } #manage_boards .button { margin: 0 8px 0 0; @@ -429,7 +431,8 @@ span.search_weight { /* Styles for the manage bans section. */ .ban_restriction { - margin: 0.2em 0 0.2em 2.2em; + margin-block: 0.2em; + margin-inline: 2.2em 0; } .ban_settings { width: 46%; @@ -487,10 +490,11 @@ ul.theme_options li { padding: 0.4em; } .is_directory { - padding-left: 18px; + padding-inline-start: 18px; } .is_directory span { - margin: -2px 3px 0 0; + margin-block: -2px 0; + margin-inline: 0 3px; } .edit_file { width: 100%; diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 2a60a91631..1339c44fcf 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -609,7 +609,7 @@ strong[id^='child_list_']::after { } .pages { font-size: 0.9em; - margin-left: 7px; + margin-inline-start: 7px; } #main_content_section .pagesection { margin: 4px 0 0 0; @@ -850,7 +850,7 @@ img.sort, .sort { } /* For cases where we want to spotlight something specific to an item, e.g. an amount */ .amt { - margin-left: 3px; + margin-inline-start: 3px; padding: 0 5px; color: var(--amt-color); background: var(--amt-bg); @@ -941,7 +941,7 @@ a[class^="mobile_generic_menu_"] { .profile_user_links li { font-size: .8rem; line-height: 2em; - padding-left: 24px; + padding-inline-start: 24px; text-indent: -24px; -webkit-hyphens: auto; hyphens: auto; @@ -1254,7 +1254,8 @@ html[lang="el-GR"] .inline_mod_check { #profile_menu_top > img.avatar { height: 18px; width: 18px; - margin: 2px 5px 0 0; + margin-block: 2px 0; + margin-inline: 0 5px; float: left; } #pm_menu_top .main_icons, @@ -2365,7 +2366,8 @@ a.main_icons.feed::before { margin-top: -8px; } .errorbox, .noticebox, .infobox { - padding: 7px 10px 7px 35px; + padding-block: 7px; + padding-inline: 35px 10px; margin-bottom: 12px; position: relative; } @@ -2385,7 +2387,8 @@ a.main_icons.feed::before { } .errorbox p.alert { padding: 0; - margin: 0 4px 0 0; + margin-block: 0; + margin-inline: 0 4px; float: left; width: 12px; font-size: 1.5em; @@ -2641,7 +2644,8 @@ dl.stats dd { width: 48%; font-size: 1em; float: left; - margin: 0 0 4px 2%; + margin-block: 0 4px; + margin-inline: 2% 0; } dl.stats { padding: 5px; @@ -2859,7 +2863,8 @@ dl.addrules dt.floatleft { } #helpmain ul { line-height: 2em; - margin: 0 0 0 25px; + margin-block: 0; + margin-inline: 25px 0; } #helpmain ul li { list-style-type: disc; @@ -3470,7 +3475,8 @@ img.avatar { max-width: 100%; } .postarea, .moderatorbar { - margin: 0 0 0 175px; + margin-block: 0; + margin-inline: 175px 0; } .postarea div.flow_hidden { width: 100%; diff --git a/Themes/default/css/profile.css b/Themes/default/css/profile.css index 8a43434043..1dc2c0ac93 100644 --- a/Themes/default/css/profile.css +++ b/Themes/default/css/profile.css @@ -48,7 +48,7 @@ #basicinfo .icon_fields li { display: block; float: left; - margin-right: 5px; + margin-inline-end: 5px; height: 20px; } diff --git a/Themes/default/css/rtl.css b/Themes/default/css/rtl.css index 3cd748f49b..9546977a8e 100644 --- a/Themes/default/css/rtl.css +++ b/Themes/default/css/rtl.css @@ -21,12 +21,6 @@ background-position: -5px -31px; } -/* Amounts */ -.amt { - margin-left: 0; - margin-right: 3px; -} - /* Styles for popup windows ------------------------------------------------------- */ .popup_heading .hide_popup { @@ -107,7 +101,6 @@ img#smflogo { /* 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; @@ -115,17 +108,12 @@ img#smflogo { #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; } - .mark_read { float: left; } @@ -148,9 +136,6 @@ img#smflogo { .poster { float: right; } -.postarea, .moderatorbar { - margin: 0 175px 0 0; -} .keyinfo h5::after { clear: left; } @@ -326,23 +311,13 @@ div#admin_menu { .message_index_title { 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. ------------------------------------------------- */ @@ -354,8 +329,6 @@ div#admin_menu { } #basicinfo .icon_fields li { float: right; - margin-right: 0; - margin-left: 5px; } #avatar_server_stored div { float: right; @@ -431,9 +404,6 @@ h3.profile_hd { dl.stats dt { float: right; } -dl.stats dd { - margin: 0 2% 4px 0; -} #stats tr.windowbg th.stats_month { text-align: right; } @@ -466,14 +436,6 @@ tr.windowbg th.stats_month, tr.windowbg td.stats_day { #searchform fieldset p { text-align: right; } - -/* Styles for the help section. -------------------------------------------------- */ -/* put back the bullets please */ -#helpmain ul { - margin: 0 25px 0 0; - padding-left: 0; -} #helpmain #messageindex { clear: left; } @@ -489,16 +451,6 @@ tr.windowbg th.stats_month, tr.windowbg td.stats_day { margin: 2px 6px 0px 6px; } -/* Styles for the package manager. -------------------------------------------------- */ -#package_list .tborder { - margin: .25em 26px .25em 0; -} -#package_list ol, #package_list ol li { - margin-left: 0; - margin-right: 50px; -} - /* ManageBoards */ #manage_boards ul { overflow: hidden; @@ -506,28 +458,11 @@ tr.windowbg th.stats_month, tr.windowbg td.stats_day { #manage_boards li { overflow: hidden; } -.move_links { - padding: 0 0 0 13px; -} span.search_weight { text-align: left; } -/* Manage Bans */ -.ban_restriction { - margin: 0.2em 2.2em 0.2em 0; -} - -/* Themes */ -.is_directory { - padding-right: 18px; - padding-left: 0; -} -.is_directory span { - margin: -2px 0 0 3px; -} - /* Styles for the moderation center. ------------------------------------------------- */ ul.moderation_notes li { @@ -538,11 +473,6 @@ h3 .collapse { float: left; } -.pages { - margin-left: 0; - margin-right: 7px; -} - /* Styles for the calendar. ----------------------------- */ #main_grid th.days, #main_grid td.days {