From e65398d0fa7ebf53b35911937fb0697d3328e167 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=92=E9=85=92=E7=9A=84=E6=9D=8E=E7=99=BD?= <670939375@qq.com> Date: Wed, 3 Jul 2024 11:46:48 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=97=A5=E5=8E=86=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E3=80=91=E6=97=A5=E8=A7=86=E5=9B=BE=E5=92=8C=E5=91=A8=E8=A7=86?= =?UTF-8?q?=E5=9B=BE=E7=9A=84css=E5=BC=95=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/css/main1.css | 78 +++++++++++ static/css/main2.css | 309 +++++++++++++++++++++++++++++++++++++++++++ static/css/main3.css | 118 +++++++++++++++++ 3 files changed, 505 insertions(+) create mode 100644 static/css/main1.css create mode 100644 static/css/main2.css create mode 100644 static/css/main3.css diff --git a/static/css/main1.css b/static/css/main1.css new file mode 100644 index 0000000..81f5895 --- /dev/null +++ b/static/css/main1.css @@ -0,0 +1,78 @@ +/* DayGridView +--------------------------------------------------------------------------------------------------*/ +/* day row structure */ +.fc-dayGridWeek-view .fc-content-skeleton, +.fc-dayGridDay-view .fc-content-skeleton { + /* there may be week numbers in these views, so no padding-top */ + padding-bottom: 1em; + /* ensure a space at bottom of cell for user selecting/clicking */ +} + +.fc-dayGrid-view .fc-body .fc-row { + min-height: 4em; + /* ensure that all rows are at least this tall */ +} + +/* a "rigid" row will take up a constant amount of height because content-skeleton is absolute */ +.fc-row.fc-rigid { + overflow: hidden; +} + +.fc-row.fc-rigid .fc-content-skeleton { + position: absolute; + top: 0; + left: 0; + right: 0; +} + +/* week and day number styling */ +.fc-day-top.fc-other-month { + opacity: 0.3; +} + +.fc-dayGrid-view .fc-week-number, +.fc-dayGrid-view .fc-day-number { + padding: 2px; +} + +.fc-dayGrid-view th.fc-week-number, +.fc-dayGrid-view th.fc-day-number { + padding: 0 2px; + /* column headers can't have as much v space */ +} + +.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number { + float: right; +} + +.fc-rtl .fc-dayGrid-view .fc-day-top .fc-day-number { + float: left; +} + +.fc-ltr .fc-dayGrid-view .fc-day-top .fc-week-number { + float: left; + border-radius: 0 0 3px 0; +} + +.fc-rtl .fc-dayGrid-view .fc-day-top .fc-week-number { + float: right; + border-radius: 0 0 0 3px; +} + +.fc-dayGrid-view .fc-day-top .fc-week-number { + min-width: 1.5em; + text-align: center; + background-color: #f2f2f2; + color: #808080; +} + +/* when week/day number have own column */ +.fc-dayGrid-view td.fc-week-number { + text-align: center; +} + +.fc-dayGrid-view td.fc-week-number > * { + /* work around the way we do column resizing and ensure a minimum width */ + display: inline-block; + min-width: 1.25em; +} diff --git a/static/css/main2.css b/static/css/main2.css new file mode 100644 index 0000000..d5b84bb --- /dev/null +++ b/static/css/main2.css @@ -0,0 +1,309 @@ + +/* TimeGridView all-day area +--------------------------------------------------------------------------------------------------*/ +.fc-timeGrid-view .fc-day-grid { + position: relative; + z-index: 2; + /* so the "more.." popover will be over the time grid */ +} + +.fc-timeGrid-view .fc-day-grid .fc-row { + min-height: 3em; + /* all-day section will never get shorter than this */ +} + +.fc-timeGrid-view .fc-day-grid .fc-row .fc-content-skeleton { + padding-bottom: 1em; + /* give space underneath events for clicking/selecting days */ +} + +/* TimeGrid axis running down the side (for both the all-day area and the slot area) +--------------------------------------------------------------------------------------------------*/ +.fc .fc-axis { + /* .fc to overcome default cell styles */ + vertical-align: middle; + padding: 0 4px; + white-space: nowrap; +} + +.fc-ltr .fc-axis { + text-align: right; +} + +.fc-rtl .fc-axis { + text-align: left; +} + +/* TimeGrid Structure +--------------------------------------------------------------------------------------------------*/ +.fc-time-grid-container, +.fc-time-grid { + /* so slats/bg/content/etc positions get scoped within here */ + position: relative; + z-index: 1; +} + +.fc-time-grid { + min-height: 100%; + /* so if height setting is 'auto', .fc-bg stretches to fill height */ +} + +.fc-time-grid table { + /* don't put outer borders on slats/bg/content/etc */ + border: 0 hidden transparent; +} + +.fc-time-grid > .fc-bg { + z-index: 1; +} + +.fc-time-grid .fc-slats, +.fc-time-grid > hr { + /* the
TimeGridView injects when grid is shorter than scroller */ + position: relative; + z-index: 2; +} + +.fc-time-grid .fc-content-col { + position: relative; + /* because now-indicator lives directly inside */ +} + +.fc-time-grid .fc-content-skeleton { + position: absolute; + z-index: 3; + top: 0; + left: 0; + right: 0; +} + +/* divs within a cell within the fc-content-skeleton */ +.fc-time-grid .fc-business-container { + position: relative; + z-index: 1; +} + +.fc-time-grid .fc-bgevent-container { + position: relative; + z-index: 2; +} + +.fc-time-grid .fc-highlight-container { + position: relative; + z-index: 3; +} + +.fc-time-grid .fc-event-container { + position: relative; + z-index: 4; +} + +.fc-time-grid .fc-now-indicator-line { + z-index: 5; +} + +.fc-time-grid .fc-mirror-container { + /* also is fc-event-container */ + position: relative; + z-index: 6; +} + +/* TimeGrid Slats (lines that run horizontally) +--------------------------------------------------------------------------------------------------*/ +.fc-time-grid .fc-slats td { + height: 1.5em; + border-bottom: 0; + /* each cell is responsible for its top border */ +} + +.fc-time-grid .fc-slats .fc-minor td { + border-top-style: dotted; +} + +/* TimeGrid Highlighting Slots +--------------------------------------------------------------------------------------------------*/ +.fc-time-grid .fc-highlight-container { + /* a div within a cell within the fc-highlight-skeleton */ + position: relative; + /* scopes the left/right of the fc-highlight to be in the column */ +} + +.fc-time-grid .fc-highlight { + position: absolute; + left: 0; + right: 0; + /* top and bottom will be in by JS */ +} + +/* TimeGrid Event Containment +--------------------------------------------------------------------------------------------------*/ +.fc-ltr .fc-time-grid .fc-event-container { + /* space on the sides of events for LTR (default) */ + margin: 0 2.5% 0 2px; +} + +.fc-rtl .fc-time-grid .fc-event-container { + /* space on the sides of events for RTL */ + margin: 0 2px 0 2.5%; +} + +.fc-time-grid .fc-event, +.fc-time-grid .fc-bgevent { + position: absolute; + z-index: 1; + /* scope inner z-index's */ +} + +.fc-time-grid .fc-bgevent { + /* background events always span full width */ + left: 0; + right: 0; +} + +/* TimeGrid Event Styling +---------------------------------------------------------------------------------------------------- +We use the full "fc-time-grid-event" class instead of using descendants because the event won't +be a descendant of the grid when it is being dragged. +*/ +.fc-time-grid-event { + margin-bottom: 1px; +} + +.fc-time-grid-event-inset { + -webkit-box-shadow: 0px 0px 0px 1px #fff; + box-shadow: 0px 0px 0px 1px #fff; +} + +.fc-time-grid-event.fc-not-start { + /* events that are continuing from another day */ + /* replace space made by the top border with padding */ + border-top-width: 0; + padding-top: 1px; + /* remove top rounded corners */ + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.fc-time-grid-event.fc-not-end { + /* replace space made by the top border with padding */ + border-bottom-width: 0; + padding-bottom: 1px; + /* remove bottom rounded corners */ + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.fc-time-grid-event .fc-content { + overflow: hidden; + max-height: 100%; +} + +.fc-time-grid-event .fc-time, +.fc-time-grid-event .fc-title { + padding: 0 1px; +} + +.fc-time-grid-event .fc-time { + font-size: 0.85em; + white-space: nowrap; +} + +/* short mode, where time and title are on the same line */ +.fc-time-grid-event.fc-short .fc-content { + /* don't wrap to second line (now that contents will be inline) */ + white-space: nowrap; +} + +.fc-time-grid-event.fc-short .fc-time, +.fc-time-grid-event.fc-short .fc-title { + /* put the time and title on the same line */ + display: inline-block; + vertical-align: top; +} + +.fc-time-grid-event.fc-short .fc-time span { + display: none; + /* don't display the full time text... */ +} + +.fc-time-grid-event.fc-short .fc-time:before { + content: attr(data-start); + /* ...instead, display only the start time */ +} + +.fc-time-grid-event.fc-short .fc-time:after { + content: " - "; + /* seperate with a dash, wrapped in nbsp's */ +} + +.fc-time-grid-event.fc-short .fc-title { + font-size: 0.85em; + /* make the title text the same size as the time */ + padding: 0; + /* undo padding from above */ +} + +/* resizer (cursor device) */ +.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer { + left: 0; + right: 0; + bottom: 0; + height: 8px; + overflow: hidden; + line-height: 8px; + font-size: 11px; + font-family: monospace; + text-align: center; + cursor: s-resize; +} + +.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after { + content: "="; +} + +/* resizer (touch device) */ +.fc-time-grid-event.fc-selected .fc-resizer { + /* 10x10 dot */ + border-radius: 5px; + border-width: 1px; + width: 8px; + height: 8px; + border-style: solid; + border-color: inherit; + background: #fff; + /* horizontally center */ + left: 50%; + margin-left: -5px; + /* center on the bottom edge */ + bottom: -5px; +} + +/* Now Indicator +--------------------------------------------------------------------------------------------------*/ +.fc-time-grid .fc-now-indicator-line { + border-top-width: 1px; + left: 0; + right: 0; +} + +/* arrow on axis */ +.fc-time-grid .fc-now-indicator-arrow { + margin-top: -5px; + /* vertically center on top coordinate */ +} + +.fc-ltr .fc-time-grid .fc-now-indicator-arrow { + left: 0; + /* triangle pointing right... */ + border-width: 5px 0 5px 6px; + border-top-color: transparent; + border-bottom-color: transparent; +} + +.fc-rtl .fc-time-grid .fc-now-indicator-arrow { + right: 0; + /* triangle pointing left... */ + border-width: 5px 6px 5px 0; + border-top-color: transparent; + border-bottom-color: transparent; +} diff --git a/static/css/main3.css b/static/css/main3.css new file mode 100644 index 0000000..6af9bb7 --- /dev/null +++ b/static/css/main3.css @@ -0,0 +1,118 @@ +/* List View +--------------------------------------------------------------------------------------------------*/ +/* possibly reusable */ +.fc-event-dot { + display: inline-block; + width: 10px; + height: 10px; + border-radius: 5px; +} + +/* view wrapper */ +.fc-rtl .fc-list-view { + direction: rtl; + /* unlike core views, leverage browser RTL */ +} + +.fc-list-view { + border-width: 1px; + border-style: solid; +} + +/* table resets */ +.fc .fc-list-table { + table-layout: auto; + /* for shrinkwrapping cell content */ +} + +.fc-list-table td { + border-width: 1px 0 0; + padding: 8px 14px; +} + +.fc-list-table tr:first-child td { + border-top-width: 0; +} + +/* day headings with the list */ +.fc-list-heading { + border-bottom-width: 1px; +} + +.fc-list-heading td { + font-weight: bold; +} + +.fc-ltr .fc-list-heading-main { + float: left; +} + +.fc-ltr .fc-list-heading-alt { + float: right; +} + +.fc-rtl .fc-list-heading-main { + float: right; +} + +.fc-rtl .fc-list-heading-alt { + float: left; +} + +/* event list items */ +.fc-list-item.fc-has-url { + cursor: pointer; + /* whole row will be clickable */ +} + +.fc-list-item-marker, +.fc-list-item-time { + white-space: nowrap; + width: 1px; +} + +/* make the dot closer to the event title */ +.fc-ltr .fc-list-item-marker { + padding-right: 0; +} + +.fc-rtl .fc-list-item-marker { + padding-left: 0; +} + +.fc-list-item-title a { + /* every event title cell has an tag */ + text-decoration: none; + color: inherit; +} + +.fc-list-item-title a[href]:hover { + /* hover effect only on titles with hrefs */ + text-decoration: underline; +} + +/* message when no events */ +.fc-list-empty-wrap2 { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.fc-list-empty-wrap1 { + width: 100%; + height: 100%; + display: table; +} + +.fc-list-empty { + display: table-cell; + vertical-align: middle; + text-align: center; +} + +.fc-unthemed .fc-list-empty { + /* theme will provide own background */ + background-color: #eee; +}