From 0c584487d519850d8cc5e3eae3a25df24253c2cc Mon Sep 17 00:00:00 2001 From: Jun Pataleta Date: Mon, 4 Nov 2024 14:21:10 +0800 Subject: [PATCH] MDL-67683 theme_boost: Update selector for calendar block styles With the change from `aside` to `section` for blocks within the main content region, the selector for instances of the calendar block not in the main content region also needs to be updated to use a more generic selector that can cover when either the blocks container containing the calendar block is an `aside` or a `section`. The `data-blockregion` attribute is a good selector for this purpose. --- theme/boost/scss/moodle/calendar.scss | 2 +- theme/boost/style/moodle.css | 32 +++++++++++++-------------- theme/classic/style/moodle.css | 32 +++++++++++++-------------- 3 files changed, 33 insertions(+), 33 deletions(-) diff --git a/theme/boost/scss/moodle/calendar.scss b/theme/boost/scss/moodle/calendar.scss index 8bff7977909..c7865c455c7 100644 --- a/theme/boost/scss/moodle/calendar.scss +++ b/theme/boost/scss/moodle/calendar.scss @@ -609,7 +609,7 @@ table.calendartable caption { } @media (min-width: 768px) { - section:not(#region-main) { + [data-blockregion]:not([data-blockregion="content"]) { .block { &.block_calendar_month { .maincalendar { diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 0d4272e1e38..f0320141438 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -27773,41 +27773,41 @@ table.calendartable caption { } } @media (min-width: 768px) { - section:not(#region-main) .block.block_calendar_month .maincalendar div.header { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar div.header { visibility: hidden; height: 0; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .current { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .current { width: 40%; font-size: inherit; line-height: inherit; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .previous, - section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .next { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .previous, + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .next { width: 30%; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .previous .arrow_text, - section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .next .arrow_text { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .previous .arrow_text, + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .next .arrow_text { display: none; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth th, - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth th, + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td { border: none; text-align: center !important; padding: 0; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td { height: auto; font-size: 0.8em; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent [data-region=day-content] { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent [data-region=day-content] { display: none; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent .day-number { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent .day-number { display: inline-block; position: relative; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent .day-number:before { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent .day-number:before { content: "."; display: inline-block; position: absolute; @@ -27818,19 +27818,19 @@ table.calendartable caption { font-size: 3em; color: inherit; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td:after { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td:after { content: ""; display: block; margin-top: calc(100% - 26px); } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:hover { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:hover { background-color: inherit; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:not(.today):hover .day-number-circle { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:not(.today):hover .day-number-circle { border-radius: 50%; background-color: #ededed; } - section:not(#region-main) .block.block_calendar_month .bottom { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .bottom { border-top: 1px solid rgba(0, 0, 0, 0.125); padding-top: 0.5rem; } diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index 48728d0ed34..e09da2164e6 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -27773,41 +27773,41 @@ table.calendartable caption { } } @media (min-width: 768px) { - section:not(#region-main) .block.block_calendar_month .maincalendar div.header { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar div.header { visibility: hidden; height: 0; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .current { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .current { width: 40%; font-size: inherit; line-height: inherit; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .previous, - section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .next { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .previous, + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .next { width: 30%; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .previous .arrow_text, - section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .next .arrow_text { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .previous .arrow_text, + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .next .arrow_text { display: none; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth th, - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth th, + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td { border: none; text-align: center !important; padding: 0; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td { height: auto; font-size: 0.8em; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent [data-region=day-content] { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent [data-region=day-content] { display: none; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent .day-number { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent .day-number { display: inline-block; position: relative; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent .day-number:before { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent .day-number:before { content: "."; display: inline-block; position: absolute; @@ -27818,19 +27818,19 @@ table.calendartable caption { font-size: 3em; color: inherit; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td:after { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td:after { content: ""; display: block; margin-top: calc(100% - 26px); } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:hover { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:hover { background-color: inherit; } - section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:not(.today):hover .day-number-circle { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:not(.today):hover .day-number-circle { border-radius: 50%; background-color: #ededed; } - section:not(#region-main) .block.block_calendar_month .bottom { + [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .bottom { border-top: 1px solid rgba(0, 0, 0, 0.125); padding-top: 0.5rem; }