From 1d51328ba0e823d872211e10b33ba87fcd677a23 Mon Sep 17 00:00:00 2001 From: Ron Lucke Date: Wed, 8 Nov 2023 07:53:25 +0000 Subject: TIC 3361 - Courseware CSS aufteilen Closes #3361 Merge request studip/studip!2293 --- resources/assets/stylesheets/scss/courseware.scss | 5855 +------------------- .../assets/stylesheets/scss/courseware/a11y.scss | 10 + .../stylesheets/scss/courseware/blockadder.scss | 319 ++ .../stylesheets/scss/courseware/blocks/audio.scss | 231 + .../scss/courseware/blocks/biography.scss | 82 + .../stylesheets/scss/courseware/blocks/canvas.scss | 145 + .../stylesheets/scss/courseware/blocks/code.scss | 88 + .../scss/courseware/blocks/confirm.scss | 12 + .../stylesheets/scss/courseware/blocks/date.scss | 79 + .../scss/courseware/blocks/default-block.scss | 134 + .../scss/courseware/blocks/dialog-cards.scss | 150 + .../scss/courseware/blocks/document.scss | 176 + .../stylesheets/scss/courseware/blocks/embed.scss | 15 + .../stylesheets/scss/courseware/blocks/files.scss | 192 + .../scss/courseware/blocks/gallery.scss | 160 + .../scss/courseware/blocks/headline.scss | 651 +++ .../stylesheets/scss/courseware/blocks/iframe.scss | 54 + .../scss/courseware/blocks/image-map.scss | 35 + .../scss/courseware/blocks/keypoint.scss | 100 + .../stylesheets/scss/courseware/blocks/link.scss | 73 + .../stylesheets/scss/courseware/blocks/lti.scss | 20 + .../scss/courseware/blocks/table-of-contents.scss | 71 + .../stylesheets/scss/courseware/blocks/text.scss | 16 + .../scss/courseware/blocks/timeline.scss | 244 + .../scss/courseware/blocks/typewriter.scss | 38 + .../stylesheets/scss/courseware/comments.scss | 57 + .../scss/courseware/containers/accordion.scss | 0 .../courseware/containers/default-container.scss | 202 + .../scss/courseware/containers/list.scss | 0 .../scss/courseware/containers/tabs.scss | 0 .../scss/courseware/content-courses.scss | 12 + .../stylesheets/scss/courseware/dashboard.scss | 131 + .../stylesheets/scss/courseware/gradients.scss | 150 + .../scss/courseware/layouts/collapsible.scss | 46 + .../scss/courseware/layouts/companion.scss | 90 + .../scss/courseware/layouts/import-zip.scss | 22 + .../scss/courseware/layouts/input-file.scss | 36 + .../scss/courseware/layouts/progress.scss | 160 + .../scss/courseware/layouts/ribbon.scss | 359 ++ .../stylesheets/scss/courseware/layouts/tabs.scss | 114 + .../scss/courseware/layouts/talk-bubble.scss | 58 + .../stylesheets/scss/courseware/layouts/tile.scss | 157 + .../stylesheets/scss/courseware/layouts/tree.scss | 163 + .../assets/stylesheets/scss/courseware/shelf.scss | 53 + .../stylesheets/scss/courseware/sortable.scss | 57 + .../scss/courseware/structural-element.scss | 273 + .../stylesheets/scss/courseware/variables.scss | 205 + .../stylesheets/scss/courseware/widgets.scss | 56 + .../stylesheets/scss/courseware/wizards.scss | 57 + .../stylesheets/scss/courseware_gradients.scss | 150 - .../stylesheets/scss/progress_indicator.scss | 4 + resources/vue/components/blubber/Panel.vue | 2 +- .../vue/components/courseware/ActivitiesApp.vue | 4 +- resources/vue/components/courseware/AdminApp.vue | 4 +- .../vue/components/courseware/CommentsApp.vue | 6 +- .../components/courseware/ContentReleasesApp.vue | 2 +- .../courseware/CoursewareAccordionContainer.vue | 405 -- .../courseware/CoursewareActionWidget.vue | 42 - .../components/courseware/CoursewareActivities.vue | 2 +- .../CoursewareActivitiesWidgetFilterType.vue | 61 - .../CoursewareActivitiesWidgetFilterUnit.vue | 58 - .../courseware/CoursewareAdminActionWidget.vue | 34 - .../courseware/CoursewareAdminViewWidget.vue | 33 - .../components/courseware/CoursewareAudioBlock.vue | 636 --- .../courseware/CoursewareBeforeAfterBlock.vue | 287 - .../CoursewareBiographyAchievementsBlock.vue | 200 - .../courseware/CoursewareBiographyCareerBlock.vue | 262 - .../courseware/CoursewareBiographyGoalsBlock.vue | 136 - ...CoursewareBiographyPersonalInformationBlock.vue | 185 - .../courseware/CoursewareBlockActions.vue | 151 - .../courseware/CoursewareBlockAdderArea.vue | 72 - .../courseware/CoursewareBlockComments.vue | 138 - .../courseware/CoursewareBlockDiscussion.vue | 60 - .../components/courseware/CoursewareBlockEdit.vue | 50 - .../courseware/CoursewareBlockExportOptions.vue | 18 - .../courseware/CoursewareBlockFeedback.vue | 141 - .../courseware/CoursewareBlockHelper.vue | 256 - .../components/courseware/CoursewareBlockInfo.vue | 65 - .../courseware/CoursewareBlockadderItem.vue | 115 - .../courseware/CoursewareCanvasBlock.vue | 712 --- .../components/courseware/CoursewareChartBlock.vue | 333 -- .../courseware/CoursewareClipboardItem.vue | 246 - .../components/courseware/CoursewareCodeBlock.vue | 117 - .../courseware/CoursewareCollapsibleBox.vue | 57 - .../CoursewareCommentsOverviewDialog.vue | 10 +- ...ursewareCommentsOverviewWidgetFilterCreated.vue | 51 - .../CoursewareCommentsOverviewWidgetFilterType.vue | 51 - .../CoursewareCommentsOverviewWidgetFilterUnit.vue | 60 - .../courseware/CoursewareCompanionBox.vue | 24 - .../courseware/CoursewareCompanionOverlay.vue | 49 - .../courseware/CoursewareConfirmBlock.vue | 118 - .../courseware/CoursewareContainerActions.vue | 88 - .../courseware/CoursewareContainerAdderItem.vue | 52 - .../courseware/CoursewareDashboardStudents.vue | 4 +- .../courseware/CoursewareDashboardTasks.vue | 8 +- .../components/courseware/CoursewareDateBlock.vue | 204 - .../components/courseware/CoursewareDateInput.vue | 34 - .../courseware/CoursewareDefaultBlock.vue | 387 -- .../courseware/CoursewareDefaultBlockElements.vue | 47 - .../courseware/CoursewareDefaultContainer.vue | 392 -- .../courseware/CoursewareDialogCardsBlock.vue | 295 - .../courseware/CoursewareDocumentBlock.vue | 771 --- .../courseware/CoursewareDownloadBlock.vue | 296 - .../components/courseware/CoursewareEmbedBlock.vue | 252 - .../courseware/CoursewareEmptyElementBox.vue | 58 - .../components/courseware/CoursewareErrorBlock.vue | 56 - .../courseware/CoursewareExportWidget.vue | 95 - .../courseware/CoursewareFileChooser.vue | 139 - .../courseware/CoursewareFolderBlock.vue | 364 -- .../courseware/CoursewareFolderChooser.vue | 167 - .../courseware/CoursewareGalleryBlock.vue | 395 -- .../courseware/CoursewareHeadlineBlock.vue | 634 --- .../courseware/CoursewareIframeBlock.vue | 266 - .../courseware/CoursewareImageMapBlock.vue | 787 --- .../courseware/CoursewareImportWidget.vue | 60 - .../courseware/CoursewareKeyPointBlock.vue | 179 - .../components/courseware/CoursewareLinkBlock.vue | 152 - .../courseware/CoursewareListContainer.vue | 287 - .../components/courseware/CoursewareLtiBlock.vue | 279 - .../courseware/CoursewarePDFTableOfContent.vue | 30 - .../courseware/CoursewareProgressCircle.vue | 18 - .../vue/components/courseware/CoursewareRibbon.vue | 170 - .../courseware/CoursewareRibbonToolbar.vue | 206 - .../courseware/CoursewareSearchResults.vue | 80 - .../courseware/CoursewareSearchWidget.vue | 94 - .../courseware/CoursewareSharedItems.vue | 88 - .../courseware/CoursewareShelfActionWidget.vue | 30 - .../courseware/CoursewareShelfDialogAdd.vue | 317 -- .../courseware/CoursewareShelfDialogCopy.vue | 401 -- .../courseware/CoursewareShelfDialogImport.vue | 373 -- .../courseware/CoursewareShelfImportWidget.vue | 37 - .../courseware/CoursewareStructuralElement.vue | 1762 ------ .../CoursewareStructuralElementComments.vue | 139 - .../CoursewareStructuralElementDialogAdd.vue | 380 -- .../CoursewareStructuralElementDialogCopy.vue | 477 -- .../CoursewareStructuralElementDialogImport.vue | 200 - .../CoursewareStructuralElementDialogLink.vue | 232 - .../CoursewareStructuralElementDiscussion.vue | 60 - .../CoursewareStructuralElementFeedback.vue | 141 - .../CoursewareStructuralElementPermissions.vue | 471 -- .../CoursewareStructuralElementSelector.vue | 141 - .../CoursewareStructuralElementSelectorItem.vue | 272 - .../vue/components/courseware/CoursewareTab.vue | 51 - .../courseware/CoursewareTableOfContentsBlock.vue | 234 - .../vue/components/courseware/CoursewareTabs.vue | 133 - .../courseware/CoursewareTabsContainer.vue | 403 -- .../components/courseware/CoursewareTalkBubble.vue | 26 - .../courseware/CoursewareTasksActionWidget.vue | 31 - .../courseware/CoursewareTasksDialogDistribute.vue | 6 +- .../components/courseware/CoursewareTextBlock.vue | 113 - .../vue/components/courseware/CoursewareTile.vue | 145 - .../courseware/CoursewareTimelineBlock.vue | 312 -- .../courseware/CoursewareToolsBlockadder.vue | 437 -- .../courseware/CoursewareToolsContents.vue | 23 - .../vue/components/courseware/CoursewareTree.vue | 248 - .../components/courseware/CoursewareTreeItem.vue | 473 -- .../courseware/CoursewareTypewriterBlock.vue | 156 - .../components/courseware/CoursewareUnitItem.vue | 197 - .../courseware/CoursewareUnitItemDialogExport.vue | 132 - .../courseware/CoursewareUnitItemDialogLayout.vue | 197 - .../CoursewareUnitItemDialogSettings.vue | 311 -- .../components/courseware/CoursewareUnitItems.vue | 80 - .../courseware/CoursewareUnitProgress.vue | 118 - .../courseware/CoursewareUnitProgressItem.vue | 31 - .../components/courseware/CoursewareVideoBlock.vue | 242 - .../components/courseware/CoursewareViewWidget.vue | 81 - .../courseware/CoursewareWelcomeScreen.vue | 88 - resources/vue/components/courseware/IndexApp.vue | 21 +- resources/vue/components/courseware/IsoDate.vue | 17 - resources/vue/components/courseware/PublicApp.vue | 6 +- .../PublicCoursewareStructuralElement.vue | 256 - resources/vue/components/courseware/ShelfApp.vue | 16 +- resources/vue/components/courseware/TasksApp.vue | 4 +- resources/vue/components/courseware/block-mixin.js | 35 - .../courseware/blocks/CoursewareAudioBlock.vue | 633 +++ .../blocks/CoursewareBeforeAfterBlock.vue | 288 + .../CoursewareBiographyAchievementsBlock.vue | 200 + .../blocks/CoursewareBiographyCareerBlock.vue | 258 + .../blocks/CoursewareBiographyGoalsBlock.vue | 136 + ...CoursewareBiographyPersonalInformationBlock.vue | 186 + .../courseware/blocks/CoursewareBlockActions.vue | 151 + .../courseware/blocks/CoursewareBlockComments.vue | 138 + .../blocks/CoursewareBlockDiscussion.vue | 60 + .../courseware/blocks/CoursewareBlockEdit.vue | 50 + .../blocks/CoursewareBlockExportOptions.vue | 18 + .../courseware/blocks/CoursewareBlockFeedback.vue | 141 + .../courseware/blocks/CoursewareBlockInfo.vue | 65 + .../courseware/blocks/CoursewareCanvasBlock.vue | 705 +++ .../courseware/blocks/CoursewareChartBlock.vue | 325 ++ .../courseware/blocks/CoursewareCodeBlock.vue | 120 + .../courseware/blocks/CoursewareConfirmBlock.vue | 119 + .../courseware/blocks/CoursewareDateBlock.vue | 205 + .../courseware/blocks/CoursewareDefaultBlock.vue | 389 ++ .../blocks/CoursewareDialogCardsBlock.vue | 291 + .../courseware/blocks/CoursewareDocumentBlock.vue | 809 +++ .../courseware/blocks/CoursewareDownloadBlock.vue | 286 + .../courseware/blocks/CoursewareEmbedBlock.vue | 252 + .../courseware/blocks/CoursewareErrorBlock.vue | 52 + .../courseware/blocks/CoursewareFolderBlock.vue | 377 ++ .../courseware/blocks/CoursewareGalleryBlock.vue | 400 ++ .../courseware/blocks/CoursewareHeadlineBlock.vue | 631 +++ .../courseware/blocks/CoursewareIframeBlock.vue | 258 + .../courseware/blocks/CoursewareImageMapBlock.vue | 804 +++ .../courseware/blocks/CoursewareKeyPointBlock.vue | 184 + .../courseware/blocks/CoursewareLinkBlock.vue | 152 + .../courseware/blocks/CoursewareLtiBlock.vue | 300 + .../blocks/CoursewarePDFTableOfContent.vue | 30 + .../blocks/CoursewareTableOfContentsBlock.vue | 251 + .../courseware/blocks/CoursewareTextBlock.vue | 115 + .../courseware/blocks/CoursewareTimelineBlock.vue | 307 + .../blocks/CoursewareTypewriterBlock.vue | 156 + .../courseware/blocks/CoursewareVideoBlock.vue | 241 + .../courseware/blocks/block-components.js | 18 + .../components/courseware/container-components.js | 72 - .../containers/CoursewareAccordionContainer.vue | 403 ++ .../containers/CoursewareBlockAdderArea.vue | 72 + .../containers/CoursewareContainerActions.vue | 88 + .../containers/CoursewareContainerAdderItem.vue | 52 + .../containers/CoursewareDefaultContainer.vue | 392 ++ .../containers/CoursewareListContainer.vue | 285 + .../containers/CoursewareTabsContainer.vue | 399 ++ .../courseware/containers/container-components.js | 77 + .../vue/components/courseware/content-icons.js | 114 - .../layouts/CoursewareCollapsibleBox.vue | 57 + .../courseware/layouts/CoursewareCompanionBox.vue | 24 + .../layouts/CoursewareCompanionOverlay.vue | 49 + .../courseware/layouts/CoursewareDateInput.vue | 34 + .../courseware/layouts/CoursewareFileChooser.vue | 139 + .../courseware/layouts/CoursewareFolderChooser.vue | 167 + .../courseware/layouts/CoursewareTab.vue | 51 + .../courseware/layouts/CoursewareTabs.vue | 133 + .../courseware/layouts/CoursewareTalkBubble.vue | 26 + .../courseware/layouts/CoursewareTile.vue | 145 + .../vue/components/courseware/layouts/IsoDate.vue | 17 + .../vue/components/courseware/plugin-components.js | 16 +- .../CoursewareBlockadderItem.vue | 115 + .../structural-element/CoursewareClipboardItem.vue | 246 + .../CoursewareEmptyElementBox.vue | 58 + .../structural-element/CoursewareRibbon.vue | 170 + .../structural-element/CoursewareRibbonToolbar.vue | 206 + .../structural-element/CoursewareSearchResults.vue | 80 + .../CoursewareStructuralElement.vue | 1743 ++++++ .../CoursewareStructuralElementComments.vue | 139 + .../CoursewareStructuralElementDialogAdd.vue | 380 ++ .../CoursewareStructuralElementDialogCopy.vue | 477 ++ .../CoursewareStructuralElementDialogImport.vue | 200 + .../CoursewareStructuralElementDialogLink.vue | 232 + .../CoursewareStructuralElementDiscussion.vue | 60 + .../CoursewareStructuralElementFeedback.vue | 141 + .../CoursewareStructuralElementPermissions.vue | 471 ++ .../CoursewareStructuralElementSelector.vue | 141 + .../CoursewareStructuralElementSelectorItem.vue | 272 + .../CoursewareToolsBlockadder.vue | 436 ++ .../structural-element/CoursewareToolsContents.vue | 23 + .../structural-element/CoursewareTree.vue | 248 + .../structural-element/CoursewareTreeItem.vue | 473 ++ .../structural-element/CoursewareWelcomeScreen.vue | 88 + .../PublicCoursewareStructuralElement.vue | 236 + .../structural-element-components.js | 31 + .../courseware/unit/CoursewareProgressCircle.vue | 18 + .../courseware/unit/CoursewareSharedItems.vue | 88 + .../courseware/unit/CoursewareShelfDialogAdd.vue | 317 ++ .../courseware/unit/CoursewareShelfDialogCopy.vue | 401 ++ .../unit/CoursewareShelfDialogImport.vue | 373 ++ .../courseware/unit/CoursewareUnitItem.vue | 197 + .../unit/CoursewareUnitItemDialogExport.vue | 132 + .../unit/CoursewareUnitItemDialogLayout.vue | 197 + .../unit/CoursewareUnitItemDialogSettings.vue | 311 ++ .../courseware/unit/CoursewareUnitItems.vue | 80 + .../courseware/unit/CoursewareUnitProgress.vue | 118 + .../courseware/unit/CoursewareUnitProgressItem.vue | 31 + .../courseware/widgets/CoursewareActionWidget.vue | 42 + .../CoursewareActivitiesWidgetFilterType.vue | 61 + .../CoursewareActivitiesWidgetFilterUnit.vue | 58 + .../widgets/CoursewareAdminActionWidget.vue | 34 + .../widgets/CoursewareAdminViewWidget.vue | 33 + ...ursewareCommentsOverviewWidgetFilterCreated.vue | 51 + .../CoursewareCommentsOverviewWidgetFilterType.vue | 51 + .../CoursewareCommentsOverviewWidgetFilterUnit.vue | 60 + .../courseware/widgets/CoursewareExportWidget.vue | 95 + .../courseware/widgets/CoursewareImportWidget.vue | 60 + .../courseware/widgets/CoursewareSearchWidget.vue | 94 + .../widgets/CoursewareShelfActionWidget.vue | 30 + .../widgets/CoursewareShelfImportWidget.vue | 37 + .../widgets/CoursewareTasksActionWidget.vue | 31 + .../courseware/widgets/CoursewareViewWidget.vue | 81 + resources/vue/courseware-index-app.js | 2 +- resources/vue/courseware-public-app.js | 2 +- resources/vue/mixins/courseware/block.js | 37 + resources/vue/mixins/courseware/content-icons.js | 122 + 290 files changed, 28258 insertions(+), 28870 deletions(-) create mode 100644 resources/assets/stylesheets/scss/courseware/a11y.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blockadder.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/audio.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/biography.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/canvas.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/code.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/confirm.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/date.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/default-block.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/document.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/embed.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/files.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/gallery.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/headline.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/iframe.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/image-map.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/keypoint.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/link.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/lti.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/table-of-contents.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/text.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/timeline.scss create mode 100644 resources/assets/stylesheets/scss/courseware/blocks/typewriter.scss create mode 100644 resources/assets/stylesheets/scss/courseware/comments.scss create mode 100644 resources/assets/stylesheets/scss/courseware/containers/accordion.scss create mode 100644 resources/assets/stylesheets/scss/courseware/containers/default-container.scss create mode 100644 resources/assets/stylesheets/scss/courseware/containers/list.scss create mode 100644 resources/assets/stylesheets/scss/courseware/containers/tabs.scss create mode 100644 resources/assets/stylesheets/scss/courseware/content-courses.scss create mode 100644 resources/assets/stylesheets/scss/courseware/dashboard.scss create mode 100644 resources/assets/stylesheets/scss/courseware/gradients.scss create mode 100644 resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss create mode 100644 resources/assets/stylesheets/scss/courseware/layouts/companion.scss create mode 100644 resources/assets/stylesheets/scss/courseware/layouts/import-zip.scss create mode 100644 resources/assets/stylesheets/scss/courseware/layouts/input-file.scss create mode 100644 resources/assets/stylesheets/scss/courseware/layouts/progress.scss create mode 100644 resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss create mode 100644 resources/assets/stylesheets/scss/courseware/layouts/tabs.scss create mode 100644 resources/assets/stylesheets/scss/courseware/layouts/talk-bubble.scss create mode 100644 resources/assets/stylesheets/scss/courseware/layouts/tile.scss create mode 100644 resources/assets/stylesheets/scss/courseware/layouts/tree.scss create mode 100644 resources/assets/stylesheets/scss/courseware/shelf.scss create mode 100644 resources/assets/stylesheets/scss/courseware/sortable.scss create mode 100644 resources/assets/stylesheets/scss/courseware/structural-element.scss create mode 100644 resources/assets/stylesheets/scss/courseware/variables.scss create mode 100644 resources/assets/stylesheets/scss/courseware/widgets.scss create mode 100644 resources/assets/stylesheets/scss/courseware/wizards.scss delete mode 100644 resources/assets/stylesheets/scss/courseware_gradients.scss delete mode 100644 resources/vue/components/courseware/CoursewareAccordionContainer.vue delete mode 100644 resources/vue/components/courseware/CoursewareActionWidget.vue delete mode 100644 resources/vue/components/courseware/CoursewareActivitiesWidgetFilterType.vue delete mode 100644 resources/vue/components/courseware/CoursewareActivitiesWidgetFilterUnit.vue delete mode 100644 resources/vue/components/courseware/CoursewareAdminActionWidget.vue delete mode 100644 resources/vue/components/courseware/CoursewareAdminViewWidget.vue delete mode 100644 resources/vue/components/courseware/CoursewareAudioBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareBeforeAfterBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareBiographyAchievementsBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareBiographyCareerBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareBiographyGoalsBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareBiographyPersonalInformationBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareBlockActions.vue delete mode 100644 resources/vue/components/courseware/CoursewareBlockAdderArea.vue delete mode 100644 resources/vue/components/courseware/CoursewareBlockComments.vue delete mode 100644 resources/vue/components/courseware/CoursewareBlockDiscussion.vue delete mode 100644 resources/vue/components/courseware/CoursewareBlockEdit.vue delete mode 100644 resources/vue/components/courseware/CoursewareBlockExportOptions.vue delete mode 100644 resources/vue/components/courseware/CoursewareBlockFeedback.vue delete mode 100644 resources/vue/components/courseware/CoursewareBlockHelper.vue delete mode 100644 resources/vue/components/courseware/CoursewareBlockInfo.vue delete mode 100644 resources/vue/components/courseware/CoursewareBlockadderItem.vue delete mode 100644 resources/vue/components/courseware/CoursewareCanvasBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareChartBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareClipboardItem.vue delete mode 100644 resources/vue/components/courseware/CoursewareCodeBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareCollapsibleBox.vue delete mode 100644 resources/vue/components/courseware/CoursewareCommentsOverviewWidgetFilterCreated.vue delete mode 100644 resources/vue/components/courseware/CoursewareCommentsOverviewWidgetFilterType.vue delete mode 100644 resources/vue/components/courseware/CoursewareCommentsOverviewWidgetFilterUnit.vue delete mode 100644 resources/vue/components/courseware/CoursewareCompanionBox.vue delete mode 100644 resources/vue/components/courseware/CoursewareCompanionOverlay.vue delete mode 100644 resources/vue/components/courseware/CoursewareConfirmBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareContainerActions.vue delete mode 100644 resources/vue/components/courseware/CoursewareContainerAdderItem.vue delete mode 100644 resources/vue/components/courseware/CoursewareDateBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareDateInput.vue delete mode 100644 resources/vue/components/courseware/CoursewareDefaultBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareDefaultBlockElements.vue delete mode 100644 resources/vue/components/courseware/CoursewareDefaultContainer.vue delete mode 100644 resources/vue/components/courseware/CoursewareDialogCardsBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareDocumentBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareDownloadBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareEmbedBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareEmptyElementBox.vue delete mode 100644 resources/vue/components/courseware/CoursewareErrorBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareExportWidget.vue delete mode 100644 resources/vue/components/courseware/CoursewareFileChooser.vue delete mode 100644 resources/vue/components/courseware/CoursewareFolderBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareFolderChooser.vue delete mode 100644 resources/vue/components/courseware/CoursewareGalleryBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareHeadlineBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareIframeBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareImageMapBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareImportWidget.vue delete mode 100644 resources/vue/components/courseware/CoursewareKeyPointBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareLinkBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareListContainer.vue delete mode 100644 resources/vue/components/courseware/CoursewareLtiBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewarePDFTableOfContent.vue delete mode 100644 resources/vue/components/courseware/CoursewareProgressCircle.vue delete mode 100644 resources/vue/components/courseware/CoursewareRibbon.vue delete mode 100644 resources/vue/components/courseware/CoursewareRibbonToolbar.vue delete mode 100644 resources/vue/components/courseware/CoursewareSearchResults.vue delete mode 100644 resources/vue/components/courseware/CoursewareSearchWidget.vue delete mode 100644 resources/vue/components/courseware/CoursewareSharedItems.vue delete mode 100644 resources/vue/components/courseware/CoursewareShelfActionWidget.vue delete mode 100644 resources/vue/components/courseware/CoursewareShelfDialogAdd.vue delete mode 100644 resources/vue/components/courseware/CoursewareShelfDialogCopy.vue delete mode 100644 resources/vue/components/courseware/CoursewareShelfDialogImport.vue delete mode 100644 resources/vue/components/courseware/CoursewareShelfImportWidget.vue delete mode 100644 resources/vue/components/courseware/CoursewareStructuralElement.vue delete mode 100644 resources/vue/components/courseware/CoursewareStructuralElementComments.vue delete mode 100644 resources/vue/components/courseware/CoursewareStructuralElementDialogAdd.vue delete mode 100644 resources/vue/components/courseware/CoursewareStructuralElementDialogCopy.vue delete mode 100644 resources/vue/components/courseware/CoursewareStructuralElementDialogImport.vue delete mode 100644 resources/vue/components/courseware/CoursewareStructuralElementDialogLink.vue delete mode 100644 resources/vue/components/courseware/CoursewareStructuralElementDiscussion.vue delete mode 100644 resources/vue/components/courseware/CoursewareStructuralElementFeedback.vue delete mode 100644 resources/vue/components/courseware/CoursewareStructuralElementPermissions.vue delete mode 100644 resources/vue/components/courseware/CoursewareStructuralElementSelector.vue delete mode 100644 resources/vue/components/courseware/CoursewareStructuralElementSelectorItem.vue delete mode 100644 resources/vue/components/courseware/CoursewareTab.vue delete mode 100644 resources/vue/components/courseware/CoursewareTableOfContentsBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareTabs.vue delete mode 100644 resources/vue/components/courseware/CoursewareTabsContainer.vue delete mode 100644 resources/vue/components/courseware/CoursewareTalkBubble.vue delete mode 100644 resources/vue/components/courseware/CoursewareTasksActionWidget.vue delete mode 100644 resources/vue/components/courseware/CoursewareTextBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareTile.vue delete mode 100644 resources/vue/components/courseware/CoursewareTimelineBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareToolsBlockadder.vue delete mode 100644 resources/vue/components/courseware/CoursewareToolsContents.vue delete mode 100644 resources/vue/components/courseware/CoursewareTree.vue delete mode 100644 resources/vue/components/courseware/CoursewareTreeItem.vue delete mode 100644 resources/vue/components/courseware/CoursewareTypewriterBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareUnitItem.vue delete mode 100644 resources/vue/components/courseware/CoursewareUnitItemDialogExport.vue delete mode 100644 resources/vue/components/courseware/CoursewareUnitItemDialogLayout.vue delete mode 100644 resources/vue/components/courseware/CoursewareUnitItemDialogSettings.vue delete mode 100644 resources/vue/components/courseware/CoursewareUnitItems.vue delete mode 100644 resources/vue/components/courseware/CoursewareUnitProgress.vue delete mode 100644 resources/vue/components/courseware/CoursewareUnitProgressItem.vue delete mode 100644 resources/vue/components/courseware/CoursewareVideoBlock.vue delete mode 100644 resources/vue/components/courseware/CoursewareViewWidget.vue delete mode 100644 resources/vue/components/courseware/CoursewareWelcomeScreen.vue delete mode 100644 resources/vue/components/courseware/IsoDate.vue delete mode 100644 resources/vue/components/courseware/PublicCoursewareStructuralElement.vue delete mode 100644 resources/vue/components/courseware/block-mixin.js create mode 100644 resources/vue/components/courseware/blocks/CoursewareAudioBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareBeforeAfterBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareBiographyAchievementsBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareBiographyCareerBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareBiographyGoalsBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareBiographyPersonalInformationBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareBlockActions.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareBlockComments.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareBlockDiscussion.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareBlockEdit.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareBlockExportOptions.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareBlockFeedback.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareBlockInfo.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareCanvasBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareChartBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareCodeBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareConfirmBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareDateBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareDefaultBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareDialogCardsBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareDocumentBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareDownloadBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareEmbedBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareErrorBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareFolderBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareGalleryBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareHeadlineBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareIframeBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareImageMapBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareLinkBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareLtiBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewarePDFTableOfContent.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareTableOfContentsBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareTextBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareTimelineBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareTypewriterBlock.vue create mode 100644 resources/vue/components/courseware/blocks/CoursewareVideoBlock.vue create mode 100644 resources/vue/components/courseware/blocks/block-components.js delete mode 100644 resources/vue/components/courseware/container-components.js create mode 100644 resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue create mode 100644 resources/vue/components/courseware/containers/CoursewareBlockAdderArea.vue create mode 100644 resources/vue/components/courseware/containers/CoursewareContainerActions.vue create mode 100644 resources/vue/components/courseware/containers/CoursewareContainerAdderItem.vue create mode 100644 resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue create mode 100644 resources/vue/components/courseware/containers/CoursewareListContainer.vue create mode 100644 resources/vue/components/courseware/containers/CoursewareTabsContainer.vue create mode 100644 resources/vue/components/courseware/containers/container-components.js delete mode 100644 resources/vue/components/courseware/content-icons.js create mode 100644 resources/vue/components/courseware/layouts/CoursewareCollapsibleBox.vue create mode 100644 resources/vue/components/courseware/layouts/CoursewareCompanionBox.vue create mode 100644 resources/vue/components/courseware/layouts/CoursewareCompanionOverlay.vue create mode 100644 resources/vue/components/courseware/layouts/CoursewareDateInput.vue create mode 100644 resources/vue/components/courseware/layouts/CoursewareFileChooser.vue create mode 100644 resources/vue/components/courseware/layouts/CoursewareFolderChooser.vue create mode 100644 resources/vue/components/courseware/layouts/CoursewareTab.vue create mode 100644 resources/vue/components/courseware/layouts/CoursewareTabs.vue create mode 100644 resources/vue/components/courseware/layouts/CoursewareTalkBubble.vue create mode 100644 resources/vue/components/courseware/layouts/CoursewareTile.vue create mode 100644 resources/vue/components/courseware/layouts/IsoDate.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareBlockadderItem.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareClipboardItem.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareEmptyElementBox.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareRibbon.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareRibbonToolbar.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareSearchResults.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareStructuralElementComments.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogAdd.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogCopy.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogImport.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogLink.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareStructuralElementDiscussion.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareStructuralElementFeedback.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareStructuralElementPermissions.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareStructuralElementSelector.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareStructuralElementSelectorItem.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareToolsBlockadder.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareToolsContents.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareTree.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareTreeItem.vue create mode 100644 resources/vue/components/courseware/structural-element/CoursewareWelcomeScreen.vue create mode 100644 resources/vue/components/courseware/structural-element/PublicCoursewareStructuralElement.vue create mode 100644 resources/vue/components/courseware/structural-element/structural-element-components.js create mode 100644 resources/vue/components/courseware/unit/CoursewareProgressCircle.vue create mode 100644 resources/vue/components/courseware/unit/CoursewareSharedItems.vue create mode 100644 resources/vue/components/courseware/unit/CoursewareShelfDialogAdd.vue create mode 100644 resources/vue/components/courseware/unit/CoursewareShelfDialogCopy.vue create mode 100644 resources/vue/components/courseware/unit/CoursewareShelfDialogImport.vue create mode 100644 resources/vue/components/courseware/unit/CoursewareUnitItem.vue create mode 100644 resources/vue/components/courseware/unit/CoursewareUnitItemDialogExport.vue create mode 100644 resources/vue/components/courseware/unit/CoursewareUnitItemDialogLayout.vue create mode 100644 resources/vue/components/courseware/unit/CoursewareUnitItemDialogSettings.vue create mode 100644 resources/vue/components/courseware/unit/CoursewareUnitItems.vue create mode 100644 resources/vue/components/courseware/unit/CoursewareUnitProgress.vue create mode 100644 resources/vue/components/courseware/unit/CoursewareUnitProgressItem.vue create mode 100644 resources/vue/components/courseware/widgets/CoursewareActionWidget.vue create mode 100644 resources/vue/components/courseware/widgets/CoursewareActivitiesWidgetFilterType.vue create mode 100644 resources/vue/components/courseware/widgets/CoursewareActivitiesWidgetFilterUnit.vue create mode 100644 resources/vue/components/courseware/widgets/CoursewareAdminActionWidget.vue create mode 100644 resources/vue/components/courseware/widgets/CoursewareAdminViewWidget.vue create mode 100644 resources/vue/components/courseware/widgets/CoursewareCommentsOverviewWidgetFilterCreated.vue create mode 100644 resources/vue/components/courseware/widgets/CoursewareCommentsOverviewWidgetFilterType.vue create mode 100644 resources/vue/components/courseware/widgets/CoursewareCommentsOverviewWidgetFilterUnit.vue create mode 100644 resources/vue/components/courseware/widgets/CoursewareExportWidget.vue create mode 100644 resources/vue/components/courseware/widgets/CoursewareImportWidget.vue create mode 100644 resources/vue/components/courseware/widgets/CoursewareSearchWidget.vue create mode 100644 resources/vue/components/courseware/widgets/CoursewareShelfActionWidget.vue create mode 100644 resources/vue/components/courseware/widgets/CoursewareShelfImportWidget.vue create mode 100644 resources/vue/components/courseware/widgets/CoursewareTasksActionWidget.vue create mode 100644 resources/vue/components/courseware/widgets/CoursewareViewWidget.vue create mode 100644 resources/vue/mixins/courseware/block.js create mode 100644 resources/vue/mixins/courseware/content-icons.js diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss index b854bef..f5caa33 100644 --- a/resources/assets/stylesheets/scss/courseware.scss +++ b/resources/assets/stylesheets/scss/courseware.scss @@ -1,5831 +1,28 @@ -/* definitions */ @use '../mixins.scss' as *; -@import './drag-handle.scss'; -@import "courseware_gradients.scss"; -$companion-types: ( - default: basic, - unsure: unsure, - special: special, - alert: alert, - sad: sad, - happy: happy, - pointing: pointing-right, - curious: curious -); - -$element-icons: ( - content: content2, - draft: category-draft, - task: category-task, - template: category-template, - oer: oer-campus, - other: category-others, - portfolio: category-portfolio -); - -$tree-item-flag-icons: ( - date: date, - write: edit, - cant-read: lock-locked2, -); - -$tile-colors: ( - black: #000, - charcoal: #3c454e, - royal-purple: #8656a2, - iguana-green: #66b570, - queen-blue: #536d96, - verdigris: #41afaa, - mulberry: #bf5796, - pumpkin: #f26e00, - sunglow: #ffca5c, - apple-green: #8bbd40, - studip-blue: #28497c, - studip-lightblue: #e7ebf1, - studip-red: #d60000, - studip-green: #008512, - studip-yellow: #ffbd33, - studip-gray: #636a71, -); - -$icon-colors:( - icon-white: #ffffff, - icon-black: #000000, - icon-red: #cb1800, - icon-blue: #24437c, - icon-green: #00962d, - icon-gray: #6e6e6e, - icon-yellow: #ffad00 -); -$border-colors:( - white: #ffffff, - black: #000000, - studip-red: #cb1800, - studip-blue: #24437c, - studip-green: #00962d, - studip-gray: #6e6e6e, - studip-yellow: #ffad00 -); - -$blockadder-items: ( - before-after: block-comparison, - canvas: block-canvas, - gallery: block-gallery, - image-map: block-imagemap, - audio: audio, - chart: vote, - code: computer, - confirm: accept, - date: date, - dialog-cards: dialog-cards, - document: file-text, - download: download, - embed: code, - folder: folder-full, - headline: block-eyecatcher, - iframe: door-enter, - lti: plugin, - key-point: exclaim-circle, - link: link-extern, - table-of-contents: table-of-contents, - text: edit, - timeline: date-cycle, - typewriter: block-typewriter, - video: video2, - biography-achievements: medal, - biography-career: ranking, - biography-personal-information: own-license, - biography-goals: radar -); - -$containeradder-items: ( - accordion: block-accordion, - list: view-list, - tabs: block-tabs, -); - -$achievement-types: ( - certificate: file-text, - accreditation: vcard, - award: medal, - book: literature, - publication: news, - membership: group3, -); - -$goals-types: ( - personal: person2, - school: doctoral-cap, - academic: doctoral-cap, - professional: tools, -); - -$media-buttons: ( - play: play, - stop: stop, - pause: pause, - prev: arr_eol-left, - next: arr_eol-right -); - -$cw-wrapper-gap: 0.5em; - -/* * * * * * * * -c o n t e n t s -* * * * * * * * */ -.cw-content-overview { - max-width: 1100px; - h2 { - margin: 0; - font-weight: 400; - padding: 5px 0; - font-size: 1.4em; - } -} - -.cw-contents-overview-teaser { - max-width: 782px; - background-color: var(--content-color-20); - background-image: url("#{$image-path}/courseware-keyvisual-negative.svg"); - background-repeat: no-repeat; - background-size: 196px; - background-position-y: 50%; - background-position-x: 24px; - padding: 24px; - margin-bottom: 10px; - - .cw-contents-overview-teaser-content { - padding-left: 220px; - - header{ - font-size: 1.5em; - margin-bottom: 0.5em; - } - } -} -.responsive-display { - .cw-contents-overview-teaser { - max-width: 782px; - background-size: 60%; - background-position-y: 24px; - background-position-x: 50%; - padding: 24px; - margin-bottom: 10px; - - .cw-contents-overview-teaser-content { - padding-top: 28%; - padding-left: 0; - text-align: justify; - - header{ - font-size: 1.5em; - margin: 1em 0 0.5em 0; - text-align: center; - } - } - } -} - -.cw-loading-indicator-content { - margin-top: 76px; -} -.cw-content-loading { - /* Loading animation from activity feed */ - .loading-indicator { - text-align: center; - padding: 1em 0; - } - - .loading-indicator span { - background-color: var(--content-color-40); - border-radius: 50%; - height: 10px; - position: relative; - width: 10px; - display: inline-block; - } - - .loading-indicator span.load-1 { - animation: loading-animation-1 1s linear 20; - } - - .loading-indicator span.load-2 { - animation: loading-animation-2 1s linear 20; - } - - .loading-indicator span.load-3 { - animation: loading-animation-3 1s linear 20; - } - - @keyframes loading-animation-1 { - 0% { transform: scale(1); } - 16% { transform: scale(1.3); } - 33% { transform: scale(1); } - 100% { transform: scale(1); } - } - - @keyframes loading-animation-2 { - 0% { transform: scale(1); } - 33% { transform: scale(1); } - 49% { transform: scale(1.3); } - 65% { transform: scale(1); } - 100% { transform: scale(1); } - } - - @keyframes loading-animation-3 { - 0% { transform: scale(1); } - 66% { transform: scale(1); } - 81% { transform: scale(1.3); } - 100% { transform: scale(1); } - } -} - -.cw-content-courses { - h2 { - margin: 0; - font-weight: 400; - padding: 5px 0; - font-size: 1.4em; - } - ul.cw-tiles { - margin-bottom: 20px; - } -} - -.cw-contents-overview-personal { - margin-bottom: 2em; -} - -/* * * * * * * * * * * -c o n t e n t s e n d -* * * * * * * * * * */ - -/* * * * * * -r i b b o n -* * * * * */ -$consum_ribbon_width: calc(100% - 58px); -#course-courseware-courseware, -#contents-courseware-courseware, -#contents-courseware-shared_content_courseware { - &.consume { - overflow: hidden; - } - #content-wrapper { - position: relative; - } -} - -.cw-ribbon-wrapper-consume { - position: fixed; - padding: 15px; - background-color: var(--white); - width: $consum_ribbon_width; - height: 46px; - z-index: 42; -} -.cw-ribbon-consume-bottom { - position: fixed; - top: 75px; - height: 15px; - left: 0; - width: calc(100% - 1em); - background-color: var(--white); - z-index: 40; -} - -.cw-ribbon-sticky-top { - position: fixed; - top: 40px; - height: 20px; - width: calc(100% - 314px); - background-color: var(--white); - z-index: 39; -} -.cw-ribbon-sticky-bottom { - position: fixed; - top: 110px; - height: 16px; - width: calc(100% - 314px); - background-color: var(--white); - z-index: 39; -} -.cw-ribbon-sticky-spacer { - height: 80px; -} -.cw-ribbon { - display: flex; - flex-wrap: wrap; - height: auto; - min-height: 30px; - border: solid thin var(--dark-gray-color-30); - margin-bottom: 15px; - padding: 1em; - justify-content: space-between; - background-color: var(--dark-gray-color-5); - - &.cw-ribbon-sticky { - position: fixed; - top: 50px; - width: calc(100% - 346px); - z-index: 40; - } - - &.cw-ribbon-consume { - width: $consum_ribbon_width; - position: fixed; - margin-bottom: 0; - } - - .cw-ribbon-wrapper-left { - display: flex; - max-width: calc(100% - 106px); - - .cw-ribbon-nav { - display: flex; - min-width: 75px; - - &.single-icon { - min-width: 45px; - } - } - - .cw-ribbon-breadcrumb { - font-size: 1.25em; - line-height: 1.5em; - margin-right: 1em; - min-width: 0; - - ul { - display: flex; - list-style: none; - padding-left: 0; - - li+li:before { - padding: 0 0.25em; - content: '/'; - background-repeat: no-repeat; - background-position: center; - } - - .cw-ribbon-breadcrumb-item { - display: inline; - flex-shrink: 100000; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - a { - color: var(--base-color); - text-decoration: none; - &:hover { - color: var(--active-color); - } - } - - img { - vertical-align: text-top; - } - - &.cw-ribbon-breadcrumb-item-current { - flex-shrink: 1; - } - } - } - } - } - - .cw-ribbon-wrapper-right { - display: flex; - - button { - border: none; - background-color: transparent; - cursor: pointer; - } - } - - .cw-ribbon-button { - height: 24px; - width: 24px; - margin: 0 7px; - padding: 1px 2px; - border: none; - background-color: transparent; - background-repeat: no-repeat; - background-position: center; - background-size: 24px; - cursor: pointer; - - &.cw-ribbon-button-menu { - @include background-icon(table-of-contents, clickable, 24); - } - - &.cw-ribbon-button-prev { - @include background-icon(arr_1left, clickable, 24); - margin: 0 0.5em 0 0; - } - - &.cw-ribbon-button-next { - @include background-icon(arr_1right, clickable, 24); - margin: 0 1em 0 0; - } - - &.cw-ribbon-button-prev-disabled { - @include background-icon(arr_1left, inactive, 24); - margin: 0 0.5em 0 0; - cursor: default; - } - - &.cw-ribbon-button-next-disabled { - @include background-icon(arr_1right, inactive, 24); - margin: 0 1em 0 0; - cursor: default; - } - } - - .cw-ribbon-action-menu { - vertical-align: text-top; - margin: 2px 0 0 2px; - &.is-open { - z-index: 32; - } - } -} - -.cw-ribbon-tools { - background-color: var(--white); - border: solid thin var(--content-color-40); - box-shadow: 2px 2px var(--dark-gray-color-30); - position: absolute; - right: -570px; - top: 15px; - height: 100%; - max-width: calc(100% - 28px); - display: flex; - flex-flow: row; - transition: right 0.8s; - z-index: 42; - - &.unfold { - right: 0px; - margin-right: 15px; - } - - &.cw-ribbon-tools-consume { - position: fixed; - &.unfold { - right: 15px; - } - } - - &.cw-ribbon-tools-sticky { - position: absolute; - top: -1px; - margin-right: 0; - } - - .cw-ribbon-tool-content { - height: 100%; - width: 540px; - background-color: var(--white); - padding: 0; - overflow: hidden; - - - .cw-ribbon-tool-content-nav { - position: sticky; - height: 100%; - top: 0; - background-color: var(--white); - margin: 0; - padding: 0; - color: var(--base-color); - display: flex; - z-index: 43; - - .cw-tools-hide-button { - position: absolute; - border: none; - height: 36px; - width: 24px; - min-width: 24px; - margin-right: 1em; - padding: 0 4px; - right: 0; - top: 12px; - cursor: pointer; - - @include background-icon(decline, clickable, 24); - background-repeat: no-repeat; - background-size: 24px; - background-position: center right; - background-color: var(--white); - } - - >.cw-ribbon-tool-content-tablist { - width: 100%; - height: 100%; - >.cw-tabs-nav { - border: none; - width: calc(100% - 48px); - - >button { - padding: 18px 8px 4px 8px; - margin-top: 2px; - max-width: unset; - flex-grow: 0.5; - &::after { - margin-top: 16px; - } - } - - } - >.cw-tabs-content { - border: none; - border-top: solid thin var(--content-color-40); - padding: 0; - height: calc(100% - 58px); - - >.cw-tab { - height: calc(100% - 22px); - padding: 14px 8px 8px 8px; - position: relative; - overflow-y: auto; - overflow-x: hidden; - scrollbar-width: thin; - scrollbar-color: var(--base-color) var(--white); - - &.cw-ribbon-tool-blockadder-tab { - height: 100%; - overflow: hidden; - padding: 0; - } - } - } - } - } - - .cw-ribbon-tool { - padding: 14px 8px 6px 8px; - height: calc(100% - 64px); - overflow-y: auto; - overflow-x: hidden; - scrollbar-width: thin; - scrollbar-color: var(--base-color) var(--white); - } - } -} - -#courseware-public-index { - .cw-ribbon-tools { - top: 127px; - - &.cw-ribbon-tools-consume { - top: 14px; - } - - &.cw-ribbon-tools-sticky { - top: 56px; - } - } -} - -.cw-structural-element-consumemode { - .cw-ribbon-tools { - top: 25px; - } -} - -.responsive-display { - .cw-ribbon-sticky-top, - .cw-ribbon-sticky-bottom, - .cw-ribbon-wrapper-consume, - .cw-ribbon-consume-bottom { - width: 100%; - } - .cw-ribbon { - &.cw-ribbon-sticky { - width: calc(100% - 62px); - } - } - .cw-ribbon-sticky-spacer { - height: 75px; - } -} - -/* * * * * * -ribbon end -* * * * * */ - - -/* * * * * * * * * - structual element -* * * * * * * * * */ - -.cw-structural-element { - - &.cw-structural-element-consumemode { - position: fixed; - top: 0; - left: 0; - height: 100%; - width: 100%; - padding: 0; - background-color: var(--white); - z-index: 1004; - overflow-y: scroll; - overflow-x: hidden; - scrollbar-width: thin; - scrollbar-color: var(--base-color) var(--dark-gray-color-5); - } - - .cw-welcome-screen { - .cw-welcome-screen-keyvisual { - margin: 14px 0 42px 0; - width: 100%; - height: 400px; - background-image: url('#{$image-path}/courseware-keyvisual.svg'); - background-repeat: no-repeat; - background-position: center center; - } - header { - padding: 0.5em 0; - text-align: center; - font-size: 2.25em; - } - .cw-welcome-screen-actions { - display: flex; - flex-wrap: wrap; - justify-content: center; - } - - } - - .cw-structural-element-discussion { - max-width: 1606px; - width: 100%; - margin-bottom: 1em; - } - - .cw-container-wrapper { - max-width: $max-content-width; - margin: 0; - padding: 0; - display: flex; - flex-wrap: wrap; - align-items: stretch; - justify-content: space-between; - - &.cw-container-wrapper-consume { - margin: 0 auto; - padding: 91px 15px 15px 15px; - } - - &.cw-container-wrapper-discuss { - max-width: 1606px; - } - } - - .cw-structural-element-description { - width: 400px; - height: 200px; - overflow-y: auto; - resize: none; - } - .cw-structural-element-color { - color: var(--white); - &.black { - background-color: map-get($tile-colors, "black"); - } - &.charcoal { - background-color: map-get($tile-colors, "charcoal"); - } - &.royal-purple { - background-color: map-get($tile-colors, "royal-purple"); - } - &.iguana-green { - background-color: map-get($tile-colors, "iguana-green"); - } - &.queen-blue { - background-color: map-get($tile-colors, "queen-blue"); - } - &.verdigris { - background-color: map-get($tile-colors, "verdigris"); - } - &.mulberry { - background-color: map-get($tile-colors, "mulberry"); - } - &.pumpkin { - background-color: map-get($tile-colors, "pumpkin"); - } - &.sunglow { - background-color: map-get($tile-colors, "sunglow"); - } - &.apple-green { - background-color: map-get($tile-colors, "apple-green"); - } - - &.studip-blue { - background-color: map-get($tile-colors, "studip-blue"); - } - &.studip-lightblue { - background-color: map-get($tile-colors, "studip-lightblue"); - } - &.studip-red { - background-color: map-get($tile-colors, "studip-red"); - } - &.studip-green { - background-color: map-get($tile-colors, "studip-green"); - } - &.studip-yellow { - background-color: map-get($tile-colors, "studip-yellow"); - } - &.studip-gray { - background-color: map-get($tile-colors, "studip-gray"); - } - } - - .cw-structural-element-info { - width: 600px; - tr:first-child { - width: 12em; - vertical-align: top; - } - } -} - -.cw-structural-element-dialog { - input[type=text] { - width: 20em; - } -} - -.cw-structural-element-image-preview { - display: block; - max-height: 200px; - max-width: 400px; - width: auto; - height: auto; - margin: 0 auto; - padding-bottom: 1em; -} - -.cw-structural-element-image-preview-placeholder { - width: 356px; - height: 200px; - margin: 0 auto; - background-color: var(--content-color-20); - background-size: 100% auto; - background-repeat: no-repeat; - background-position: center; - @include background-icon(courseware, clickable, 128); - margin-bottom: 1em; -} - -.cw-element-permissions { - label { - display: block; - padding: 6px 0; - } - table.default { - > caption { - padding: 0; - font-size: 1.25em; - } - td.perm { - input.right, input.date { - cursor: pointer !important; - } - } - } - button.cw-add-persons { - margin-left: 4px; - } - button.cw-permission-delete { - width: 24px; - height: 24px; - border: none; - background-color: transparent; - @include background-icon(trash, clickable); - background-repeat: no-repeat; - cursor: pointer; - } -} - -.cw-element-export { - label { - input { - vertical-align: middle; - } - - span { - vertical-align: middle; - } - } -} - - - -/* * * * * * * * * * * * - structual element end -* * * * * * * * * * * */ - -/* * * * * - container -* * * * */ -.cw-container { - margin-bottom: 1em; - - &.cw-container-colspan-full { - max-width: $max-content-width; - width: 100%; - } - &.cw-container-colspan-half { - max-width: 540px; - width: 100%; - } - &.cw-container-colspan-half-center { - width: $max-content-width; - .cw-container-content { - max-width: 540px; - margin: auto; - } - } - - .cw-container-header { - background-color: var(--content-color-20); - padding: 4px 10px 4px 22px; - - .cw-container-header-toggle { - display: inline-block; - width: calc(100% - 40px); - } - - span { - color: var(--base-color); - font-weight: 700; - line-height: 2em; - font-size: 1.1em; - - &.cw-default-container-blocker-warning { - font-weight: 400; - } - } - - img { - vertical-align: text-bottom; - } - - .cw-container-actions { - position: relative; - float: right; - margin-top: 4px; - // z-index: 31; - .is-open { - z-index: 31; - } - } - } - - &.cw-container-active { - &.cw-container-colspan-half-center { - .cw-container-content { - max-width: unset; - .cw-block-wrapper { - max-width: 540px; - margin: auto; - } - } - } - .cw-container-content { - border: solid thin var(--content-color-40); - } - } - - - .cw-block-wrapper { - padding: 0; - margin: 0; - list-style: none; - - &.cw-block-wrapper-active { - padding: 14px 10px; - } - - .cw-block-item { - padding: 0; - margin: 0 0 1em 0; - } - } - - .cw-container-list-block-list { - padding: 0; - list-style: none; - } - - .cw-container-tabs-block-list { - list-style: none; - padding: 1em 1em 0 1em; - } - - .cw-container-accordion-block-list { - list-style: none; - padding: 0 1em; - } -} - -.cw-container-section-delete { - img { - cursor: pointer; - } -} - -form.cw-container-dialog-edit-form { - display: flex; - flex-wrap: wrap; - gap: 8px; - - fieldset { - max-width: 200px; - } -} - -.cw-container-wrapper-discuss { - flex-direction: column; - - .cw-container-colspan-full { - max-width: unset; - } - .cw-container-colspan-half-center, - .cw-container-colspan-half { - max-width: 1050px; - } - .cw-container-colspan-half-center { - width: 100%; - .cw-container-content { - width: 1050px; - } - } -} - -/* * * * * * * - container end -* * * * * * */ - -/* * * - block -* * */ -.cw-default-block { - display: flex; - flex-flow: row; - .cw-default-block-invisible-info { - img { - vertical-align: text-bottom; - } - } - -} -.cw-content-wrapper { - display: flex; - flex-flow: column; - width: 100%; - .cw-block-content { - overflow: auto; - position: relative; - } -} -.cw-content-wrapper-active { - border: solid thin var(--content-color-40); - .cw-block-content { - padding: $cw-wrapper-gap; - } -} -.cw-container-wrapper-discuss { - .cw-container-colspan-full { - .cw-content-wrapper { - max-width: $max-content-width; - } - } - .cw-container-colspan-half, - .cw-container-colspan-half-center { - .cw-content-wrapper { - max-width: 540px; - } - } -} -.cw-block-header { - background-color: var(--content-color-20); - padding: 4px 10px 4px 22px; - - .cw-block-header-toggle { - display: inline-block; - width: calc(100% - 50px); - } - - span { - color: var(--base-color); - font-weight: 700; - line-height: 2em; - font-size: 1.1em; - - &.cw-default-block-invisible-info, - &.cw-default-block-blocker-warning { - font-weight: 400; - } - } - - img { - vertical-align: text-bottom; - } - - .cw-block-actions { - position: relative; - float: right; - margin-top: 4px; - .is-open{ - z-index: 30; - } - } -} - -.cw-discuss-wrapper, -.cw-block-features { - - header{ - background-color: var(--content-color-20); - color: var(--base-color); - font-weight: 600; - padding: 0.5em; - } - - .cw-block-features-content{ - margin: 1em; - } -} - -.cw-discuss-wrapper { - flex-shrink: 3; - flex-grow: 2; - margin-left: 10px; -} - -.cw-draggable-shapes-wrapper { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - margin: $cw-wrapper-gap; - - .cw-draggable-area { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - &:hover { - cursor: grab; - } - } -} - -@media only screen and (max-width: 1820px) { - .cw-structural-element .cw-container-wrapper.cw-container-wrapper-discuss { - max-width: $max-content-width; - .cw-container.cw-container-list.cw-container-item.cw-container-colspan-full { - .cw-default-block { - flex-flow: column; - .cw-discuss-wrapper { - margin-left: 0; - margin-top: 8px; - } - } - } - } -} - -@media only screen and (max-width: 1200px) { - .cw-structural-element .cw-container-wrapper.cw-container-wrapper-discuss { - max-width: $max-content-width; - .cw-container.cw-container-list.cw-container-item.cw-container-colspan-half, - .cw-container.cw-container-list.cw-container-item.cw-container-colspan-half-center { - .cw-default-block { - flex-flow: column; - .cw-discuss-wrapper { - margin-left: 0; - margin-top: 8px; - max-width: 540px; - } - } - } - } -} - -.cw-button-feature-close { - float: right; - border: none; - height: 24px; - width: 24px; - @include background-icon(decline, clickable); - background-repeat: no-repeat; - background-color: transparent; - cursor: pointer; -} - -.cw-keypoint-content { - display: flex; - min-height: 52px; - padding:1.5em 2.5em 1.5em 2.5em; - border-style: solid; - border-width: 2px; - align-items: center; -} -.cw-keypoint-content > img { - flex-shrink: 0; -} -.cw-keypoint-red { - border-color: map-get($icon-colors, 'icon-red'); -} -.cw-keypoint-blue { - border-color: map-get($icon-colors, 'icon-blue'); -} -.cw-keypoint-green { - border-color: map-get($icon-colors, 'icon-green'); -} -.cw-keypoint-gray { - border-color: map-get($icon-colors, 'icon-gray'); -} -.cw-keypoint-yellow { - border-color: map-get($icon-colors, 'icon-yellow'); -} -.cw-keypoint-sentence { - display: inline; - font-size: 1.25em; - padding-left: 1.5em; - margin-top: 10px; -} -.cw-keypoint-label-color { - width: 32px !important; - min-width: 32px !important; - height: 32px; - padding: 5px !important; - - > .cw-keypoint-input-color { - visibility: hidden; - position: absolute; - } - - > .cw-keypoint-input-color + div { - cursor: pointer; - border: 2px solid transparent; - height: 32px; - width: 32px; - } - - > .cw-keypoint-input-color:checked + div { /* (RADIO CHECKED) IMAGE STYLES */ - @include background-icon(accept, info_alt, 24); - background-repeat: no-repeat; - background-position: center; - } -} -label[for="cw-keypoint-color"] { - vertical-align: top; -} -.cw-keypoint-label-color { - display: inline-block !important; -} -.cw-keypoint-icons { - background-color: var(--white); -} -.cw-keypoint-bg-red { - background-color: map-get($icon-colors, 'icon-red'); -} -.cw-keypoint-bg-blue { - background-color: map-get($icon-colors, 'icon-blue'); -} -.cw-keypoint-bg-green { - background-color: map-get($icon-colors, 'icon-green'); -} -.cw-keypoint-bg-gray { - background-color: map-get($icon-colors, 'icon-gray'); -} -.cw-keypoint-bg-yellow { - background-color: map-get($icon-colors, 'icon-yellow');; -} - - -.cw-static-content-iframe { - width: 100%; -} -.cw-static-content-preview { - span { - display: block; - } - img { - width: 50%; - } -} - -.cw-block-edit textarea { - width: -moz-available; - height: -moz-available; - min-height: 8em; - border: solid thin var(--content-color-40); - resize: none; -} - -.cw-typewriter-content { - - .vue-typer { - - &.font-typewriter{ - font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace; - } - &.font-trebuchet { - font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif; - } - &.font-tahoma { - font-family: Tahoma, Verdana, Segoe, sans-serif; - } - &.font-georgia { - font-family: Georgia, Times, "Times New Roman", serif; - } - &.font-narrow { - font-family: "Arial Narrow", Arial, "Helvetica Condensed", Helvetica, sans-serif; - } - - &.size-tall { - font-size: 1.25em; - line-height: 1.25em; - } - &.size-grande { - font-size: 1.5em; - line-height: 1.25em; - } - &.size-huge { - font-size: 2em; - line-height: 1.25em; - } - } -} - -.cw-block-actions { - padding-left: 14px; -} -.cw-button-box { - float: right; -} - -/* * * * * * - block end -* * * * * */ - -/* * * * * * * * - sortable handle - * * * * * * * */ - -.cw-sortable-handle { - @extend .drag-handle; - display: inline-block; - height: 24px; - &.cw-sortable-handle-dragging { - cursor: grabbing; - } -} - -.cw-block-item-sortable { - .cw-sortable-handle { - position: relative; - left: 4px; - } - .cw-block { - margin-top: -38px; - } -} - -.cw-container-item-sortable { - .cw-sortable-handle { - position: relative; - left: 4px; - } - .cw-container { - margin-top: -38px; - } -} - -.cw-collapsible-open { - .cw-container-list-sort-mode { - margin-top: 8px; - } -} - -.container-ghost, -.block-ghost { - opacity: 0.6; -} - - -.cw-container-wrapper-edit { - .cw-structural-element-list { - width: 100%; - padding: 0; - margin-top: 8px; - list-style: none; - } -} - -.cw-block-item-selected { - .cw-block-header { - font-style: italic; - } -} -.cw-container-item-selected { - .cw-container-header { - font-style: italic; - } -} - -/* * * * * * * * * * * - sortable handle end - * * * * * * * * * * */ - -/* * * * * - t r e e - * * * * */ - -.cw-tree { - ol { - list-style: none; - padding-left: 1.25em; - margin-bottom: 20px; - - &.cw-tree-root-list { - padding-left: 0; - > li.cw-tree-item { - > .cw-tree-item-wrapper { - border-bottom: solid thin var(--content-color-40); - display: block; - > a.cw-tree-item-link { - display: block; - font-size: 18px; - padding-left: 26px; - @include background-icon(courseware, clickable, 18); - background-repeat: no-repeat; - background-position: 3px 3px; - } - } - - ol { - padding-left: 0; - > li.cw-tree-item { - margin: 28px 0 0 0; - > .cw-tree-item-wrapper { - display: block; - border-bottom: solid thin var(--content-color-40); - margin-bottom: 12px; - > a.cw-tree-item-link { - display: inline-block; - width: calc(100% - 4px); - padding-left: 4px; - font-size: 16px; - &.cw-tree-item-link-edit { - width: calc(100% - 20px); - } - } - } - ol { - padding-left: 0.25em; - &.cw-tree-draggable-list { - padding-left: 1em; - } - > li.cw-tree-item { - margin: 4px 0; - > .cw-tree-item-wrapper { - border: none; - > a.cw-tree-item-link { - display: inline-block; - border-bottom: none; - font-size: 14px; - width: calc(100% - 20px); - background-repeat: no-repeat; - padding-left: 18px; - margin-left: 4px; - margin-bottom: 0; - - &.cw-tree-item-link-edit { - width: calc(100% - 38px); - } - - @include background-icon(bullet-dot, clickable, 18); - &:hover { - @include background-icon(bullet-dot, attention, 18); - } - &.cw-tree-item-link-current { - @include background-icon(bullet-dot, info, 18); - } - } - } - ol { - padding-left: 1em; - } - } - } - } - } - } - } - } - - .cw-sortable-handle { - vertical-align: middle; - } - .cw-tree-item-link { - &:hover { - background-color: var(--light-gray-color-20); - color: var(--active-color); - } - &.cw-tree-item-link-current { - color: var(--black); - font-weight: 600; - cursor: default; - &::before { - color: var(--black); - } - } - &.cw-tree-item-link-selected { - font-style: italic; - font-weight: 600; - } - - - @each $type, $icon in $tree-item-flag-icons { - .cw-tree-item-flag-#{$type} { - display: inline-block; - width: 16px; - height: 16px; - vertical-align: top; - @include background-icon(#{$icon}, clickable, 16); - } - &:hover .cw-tree-item-flag-#{$type} { - @include background-icon(#{$icon}, attention, 16); - } - &.cw-tree-item-link-current .cw-tree-item-flag-#{$type} { - @include background-icon(#{$icon}, info, 16); - } - } - } - .cw-tree-item-sequential { - display: inline-block; - position: absolute; - right: 8px; - - &.cw-tree-item-sequential-complete { - width: 16px; - height: 16px; - vertical-align: top; - @include background-icon(accept, info, 16); - } - &.cw-tree-item-sequential-percentage { - color: var(--black); - font-size: 14px; - } - } - - .cw-tree-item-ghost { - opacity: 0.6; - } -} - -/* * * * * * * -t r e e e n d -* * * * * * * */ - -/* * * * * * * * * * * * * * * -c o l l a p s i b l e b o x -* * * * * * * * * * * * * * */ -.cw-collapsible { - - border: solid thin var(--content-color-40); - margin-bottom: -1px; - - .cw-collapsible-title { - @include background-icon(arr_1right, clickable); - background-position: 6px center; - background-repeat: no-repeat; - background-color: var(--content-color-20); - padding: 0.5em 2em; - margin: 0; - font-weight: 600; - color: var(--base-color); - cursor: pointer; - - &.cw-collapsible-open { - @include background-icon(arr_1down, clickable); - } - - img { - vertical-align: top; - } - } - - .cw-collapsible-content { - display: none; - &.cw-collapsible-content-open { - display: block; - padding: 10px; - } - } -} - -form .cw-collapsible .cw-collapsible-content.cw-collapsible-content-open { - padding: unset; - label { - margin: 1.5ex; - } -} - -/* * * * * * * * * * * * * * * * * * -c o l l a p s i b l e b o x e n d -* * * * * * * * * * * * * * * * * */ - -/* * * * -t a b s -* * * */ -$icons: ( - accept, - add, - add-circle, - admin, - aladdin, - arr_1down, - arr_1left, - arr_1right, - arr_1up, - arr_2down, - arr_2left, - arr_2right, - arr_2up, - audio, - audio3, - billboard, - block-canvas, - block-comparison, - block-eyecatcher, - block-gallery, - block-gallery2, - block-imagemap, - brainstorm, - campusnavi, - chat2, - code, - community2, - computer, - consultation, - content, - courseware, - crown, - date-single, - decline, - decline-circle, - doctoral_cap, - download, - dropbox, - edit, - exclaim, - exclaim-circle, - export, - favorite, - filter, - globe, - graph, - group2, - group3, - group4, - home2, - info, - info-circle, - install, - institute, - key, - knife, - learnmodule, - lightbulb, - lightbulb2, - link2, - link3, - link-extern, - link-intern, - literature, - lock-locked, - lock-unlocked, - mail2, - medal, - metro, - microphone, - module, - network, - notification, - notification2, - opencast, - outer-space, - permalink, - person, - phone, - picture, - place, - plugin, - question, - question-circle, - ranking, - remove, - remove-circle, - resources, - roles, - schedule2, - search, - settings, - span-empty, - span-1quarter, - span-2quarter, - span-3quarter, - span-full, - spiral, - sport, - staple, - star, - star-empty, - star-halffull, - test, - tools, - topic, - ufo, - video2, - visibility-visible, - wizard -); - -.cw-tabs-nav { - display: flex; - flex-wrap: wrap; - list-style: none; - padding: 0; - margin: 0; - border: solid thin var(--content-color-40); - border-bottom: none; - - button { - background-color: var(--white); - border: none; - padding: 1em 0 4px 0; - margin: 0 7px 0 21px; - color: var(--base-color); - cursor: pointer; - text-align: center; - flex-grow: 1; - max-width: max-content; - - &::after { - display: block; - margin-top: 4px; - margin-bottom: -5px; - margin-left: -14px; - width: calc(100% + 28px); - content: ''; - border-bottom: solid 3px var(--dark-gray-color-75); - transform: scaleX(0); - transition: transform var(--transition-duration) ease-in-out; - } - - &.is-active, - &:hover { - color: var(--black); - &:after { - transform: scaleX(1); - } - } - - @each $icon in $icons { - &.cw-tabs-nav-icon-text-#{$icon} { - &::before { - @include background-icon($icon); - background-repeat: no-repeat; - background-position: left bottom; - - display: inline-block; - height: 16px; - width: 16px; - margin-bottom: -2px; - padding-left: 4px; - content: ''; - } - - } - &.is-active.cw-tabs-nav-icon-text-#{$icon}, - &.cw-tabs-nav-icon-text-#{$icon}:hover { - &::before { - @include background-icon($icon, info); - } - } - }; - @each $icon in $icons { - &.cw-tabs-nav-icon-solo-#{$icon} { - &::before { - display: inline-block; - height: 24px; - width: 24px; - content: ''; - - @include background-icon($icon, clickable, 24); - background-repeat: no-repeat; - background-position: center; - } - } - &.is-active.cw-tabs-nav-icon-solo-#{$icon}, - &.cw-tabs-nav-icon-solo-#{$icon}:hover { - &::before { - @include background-icon($icon, info); - } - } - }; - - } - - &:hover li { - &.is-active::after { - transform: scaleX(0); - } - &:hover::after { - transform: scaleX(1); - } - } -} -.cw-tabs-content { - border: solid thin var(--content-color-40); - padding: 4px; -} -.cw-block-wrapper-active { - .cw-tabs-content { - padding: 14px 0; - } -} - -.studip-dialog-with-tab { - .studip-dialog-body .studip-dialog-content { - padding: 0 4px; - .cw-tab-in-dialog { - .cw-tabs-nav { - border: none; - border-bottom: solid thin var(--content-color-40); - margin-bottom: 4px; - } - .cw-tabs-content { - border: none; - min-width: 500px; - min-height: 400px; - overflow-y: auto; - scrollbar-width: thin; - scrollbar-color: var(--base-color) var(--dark-gray-color-5); - } - } - } -} - -.cw-tabs { - .cw-tab { - display: none; - height: 0; - - &.cw-tab-active { - display: block; - height: unset; - padding: 4px 8px; - } - } - &.cw-course-manager-tabs { - .cw-tab { - display: none; - - &.cw-tab-active { - display: block; - } - } - } -} - -/* * * * * * * * -t a b s e n d -* * * * * * * */ - -/* * * * * * * * * * -b l o c k a d d e r -* * * * * * * * * */ - -.cw-tools-element-adder-tabs { - .cw-tabs-nav { - margin-top: 4px; - border: none; - border-bottom: solid thin var(--content-color-40); - - button { - max-width: unset; - padding: 1em 1.5em 4px 1.5em; - margin: 0px 2em; - } - } - .cw-tabs-content { - border: none; - overflow-x: hidden; - overflow-y: auto; - scrollbar-width: thin; - scrollbar-color: var(--base-color) var(--dark-gray-color-5); - - .input-group.files-search { - &.search { - border: thin solid var(--dark-gray-color-30); - margin-bottom: 0px; - input { - border: none; - } - } - - .input-group-append { - .button { - border: none; - border-left: thin solid var(--dark-gray-color-30); - &.active { - background-color: var(--base-color); - } - } - .reset-search { - border: none; - background-color: var(--white); - } - } - - .active-filter { - display: flex; - align-items: center; - justify-content: space-between; - border: solid thin var(--black); - background-color: var(--content-color-10); - margin: 3px; - padding: 2px 3px; - - .removefilter { - border: none; - background-color: transparent; - } - } - } - - .cw-block-search { - width: inherit; - } - - .filterpanel { - margin-bottom: 5px; - padding: 2px; - border: thin solid var(--dark-gray-color-30); - border-top: none; - background-color: var(--white); - - .button { - min-width: inherit; - margin: 4px 2px; - - &.button-active { - background-color: var(--base-color); - color: var(--white); - } - } - } - } - - .cw-collapsible { - .cw-collapsible-content { - display: none; - &.cw-collapsible-content-open { - display: block; - } - } - } -} - -.cw-element-adder-wrapper { - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} -.cw-blockadder-item-list { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - grid-auto-rows: auto; - grid-gap: 4px; - - .cw-blockadder-item-wrapper { - display: flex; - border: solid thin var(--content-color-40); - max-width: 254px; - - &:hover { - border-color: var(--base-color); - } - .cw-blockadder-item { - padding: 64px 10px 4px 10px; - @include background-icon(unit-test, clickable, 48); - background-position: 10px 10px; - background-repeat: no-repeat; - cursor: pointer; - - @each $item, $icon in $blockadder-items { - &.cw-blockadder-item-#{$item} { - @include background-icon($icon, clickable, 48); - } - } - .cw-clipboard-item-title, - .cw-blockadder-item-title { - display: inline-block; - font-weight: 600; - margin-bottom: 2px; - } - .cw-blockadder-item-description { - display: inline-block; - margin: 0 0 4px; - } - } - .cw-blockadder-item-fav { - height: 32px; - padding: 8px; - background-color: transparent; - border: none; - cursor: pointer; - } - } -} - -.cw-block-adder-area { - background-color: var(--white); - border: solid thin var(--content-color-40); - padding: 1em 0; - color: var(--base-color); - text-align: center; - width: 100%; - font-weight: 600; - cursor: pointer; - - &:hover { - border-color: var(--base-color); - } - - &.cw-block-adder-active { - border: solid thin var(--base-color); - background-color: var(--base-color); - color: var(--white); - } - - img { - vertical-align: text-bottom; - } -} -.cw-block-helper-buttons { - display: inline-block; - width: 100%; - - .cw-block-helper-reset { - float: right; - } - - .button.cw-block-helper-reset::before { - content: ''; - @include background-icon(refresh); - background-repeat: no-repeat; - float: left; - height: 16px; - width: 16px; - margin: 1px 5px 0 -8px; - } -} - -.cw-block-helper-results { - margin-top: 5px; -} - -.cw-containeradder-item { - margin-bottom: 4px; - padding: 1em 1em 1em 6em; - @include background-icon(unit-test, clickable, 48); - background-position: 12px center; - background-repeat: no-repeat; - border: solid thin var(--content-color-40); - cursor: pointer; - - &:hover { - border-color: var(--base-color); - } - - @each $item, $icon in $containeradder-items { - &.cw-containeradder-item-#{$item} { - @include background-icon($icon, clickable, 48); - } - } - - .cw-containeradder-item-title { - font-weight: 600; - } -} - -.cw-container-style-selector { - display: flex; - margin-bottom: 8px; - - label { - border: solid thin var(--content-color-40); - padding: calc(0.5em + 32px) 1em 0.5em 1em; - color: var(--base-color); - text-align: center; - width: 33%; - background-position: center 0.5em; - background-repeat: no-repeat; - cursor: pointer; - - &.full { - @include background-icon(column-full, clickable, 32); - } - &.half { - @include background-icon(column-half, clickable, 32); - } - &.half-center { - @include background-icon(column-half-centered, clickable, 32); - } - &:hover { - color: var(--active-color); - } - &:not(:first-child) { - border-left: solid thin transparent; - } - &.cw-container-style-selector-active { - background-color: var(--content-color-20); - border: solid thin var(--base-color); - } - - } - input[type=radio] { - position: absolute; - opacity: 0; - width: 0; - - &:focus + label { - outline-color: Highlight; - outline-color: -webkit-focus-ring-color; - outline-style: auto; - outline-width: 1px; - } - } -} -.cw-element-inserter-wrapper { - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} - - -.cw-clipboard-item-wrapper { - display: flex; - width: calc(50% - 4px); - border: solid thin var(--content-color-40); - margin-bottom: 4px; - - &:hover { - border-color: var(--base-color); - } - - .cw-clipboard-item { - width: 207px; - padding: 64px 10px 4px 10px; - @include background-icon(unit-test, clickable, 48); - background-position: 10px 10px; - background-repeat: no-repeat; - cursor: pointer; - background-color: var(--white); - border: none; - text-align: left; - color: var(--base-color); - - @each $item, $icon in $blockadder-items { - &.cw-clipboard-item-#{$item} { - @include background-icon($icon, clickable, 48); - } - } - @each $item, $icon in $containeradder-items { - &.cw-clipboard-item-#{$item} { - @include background-icon($icon, clickable, 48); - } - } - - .cw-clipboard-item-title { - display: inline-block; - font-weight: 600; - margin-bottom: 2px; - } - - } - .cw-clipboard-item-action-menu-wrapper { - padding: 8px; - } -} -.action-menu.is-open, -.action-menu-wrapper.is-open { - &.cw-clipboard-item-action-menu { - z-index: 42; - } -} - -/* * * * * * * * * * * * * -b l o c k a d d e r e n d -* * * * * * * * * * * * */ - -/* * * * * * * * * * * * * * * * -c o m p a n i o n o v e r l a y -* * * * * * * * * * * * * * * * */ - -.cw-companion-overlay { - position: fixed; - bottom: 46px; - right: 0; - width: 360px; - max-width: calc(100% - 140px); - height: 120px; - z-index: 42000; - border: solid thin var(--content-color-40); - background-color: var(--white); - background-repeat: no-repeat; - background-position: 1em center; - background-size: 100px; - box-shadow: 5px 5px var(--dark-gray-color-10); - padding-left: 120px; - transform: translateX(100%); - transition: transform .5s ease; - - @each $type, $image in $companion-types { - &.#{$type} { - background-image: url("#{$image-path}/companion/Tin_#{$image}.svg"); - } - } - - &.cw-companion-overlay-in { - transform: translateX(0); - right: 12px; - } - - .cw-companion-overlay-content { - display: inline-block; - position: relative; - top: 25%; - padding: 0 1em; - } - - .cw-compantion-overlay-close { - @include background-icon(decline); - background-color: var(--white); - background-repeat: no-repeat; - - position: absolute; - top: 7px; - right: 7px; - height: 16px; - width: 16px; - border: none; - cursor: pointer; - } -} - -.cw-companion-box { - display: flex; - height: 120px; - border: solid thin var(--content-color-40); - background-color: var(--white); - background-repeat: no-repeat; - background-position: 1em center; - background-size: 100px; - padding-left: 120px; - align-items: center; - margin-bottom: 1em; - - @each $type, $image in $companion-types { - &.#{$type} { - background-image: url("#{$image-path}/companion/Tin_#{$image}.svg"); - } - } - - &.cw-companion-box-in-form { - margin-top: 8px; - } - - p { - margin: 0 1em 10px 0; - } -} - -.cw-companion-box-wrapper { - width: 100%; - max-width: $max-content-width; -} - -/* * * * * * * * * * * * * * * * * * -c o m p a n i o n s m a l l e n d -* * * * * * * * * * * * * * * * * */ - -/* * * * * * * * * * -v i e w w i d g e t -* * * * * * * * * * */ -.cw-action-widget { - .cw-action-widget-show-toc { - @include background-icon(table-of-contents, clickable); - } - .cw-action-widget-edit{ - @include background-icon(edit, clickable); - } - .cw-action-widget-sort{ - @include background-icon(arr_1sort, clickable); - } - .cw-action-widget-add{ - @include background-icon(add, clickable); - } - .cw-action-widget-info{ - @include background-icon(info, clickable); - } - .cw-action-widget-star{ - @include background-icon(star, clickable); - } - .cw-action-widget-trash{ - @include background-icon(trash, clickable); - } - .cw-action-widget-oer{ - @include background-icon(oer-campus, clickable); - } - .cw-action-widget-remove-lock{ - @include background-icon(lock-unlocked, clickable); - } -} -.cw-export-widget { - .cw-export-widget-export{ - @include background-icon(export, clickable); - } - .cw-export-widget-export-pdf{ - @include background-icon(export, clickable); - } - .cw-export-widget-oer{ - @include background-icon(share, clickable); - } -} -.cw-import-widget { - .cw-import-widget-archive{ - @include background-icon(import, clickable); - } - .cw-import-widget-copy{ - @include background-icon(copy, clickable); - } - .cw-import-widget-import{ - @include background-icon(import, clickable); - } - .cw-action-widget-link { - @include background-icon(group, clickable); - } -} - -/* * * * * * * * * * * * * * -v i e w w i d g e t e n d -* * * * * * * * * * * * * */ - -/* * * * * * * * * * * * * * * * * * -c o m m e n t s & f e e d b a c k -* * * * * * * * * * * * * * * * * * */ - -.cw-structural-element-feedback, -.cw-structural-element-comments { - padding: 0 1em; -} - -.cw-structural-element-feedback-items, -.cw-structural-element-comments-items, -.cw-block-feedback-items, -.cw-block-comments-items { - min-height: 1em; - max-height: 225px; - overflow-y: auto; - overflow-x: hidden; - margin: -1em -1em 0em 0em; - padding: 0em 1em 0em 0em; - scroll-behavior: smooth; -} - -.studip-dialog-content { - .cw-structural-element-feedback-items, - .cw-structural-element-comments-items, - .cw-block-feedback-items, - .cw-block-comments-items { - max-height: unset; - } -} - -.cw-talk-bubble { - margin: 10px 20px; - position: relative; - width: 85%; - height: auto; - background-color: var(--dark-gray-color-10); - float: left; - - .cw-talk-bubble-talktext { - padding: 1em; - text-align: left; - line-height: 1.5em; - - .cw-talk-bubble-talktext-time { - color: var(--dark-gray-color-80); - text-align: right; - font-size: 0.8em; - margin-bottom: -0.5em; - } - } - - &.cw-talk-bubble-own-post { - float: right; - } - - &:after{ - content: ' '; - position: absolute; - width: 0; - height: 0; - top: 0px; - bottom: auto; - border: 22px solid; - border-color: var(--dark-gray-color-10) transparent transparent transparent; - left: -20px; - right: auto; - } - - &.cw-talk-bubble-own-post:after{ - left: auto; - right: -20px; - } - - .cw-talk-bubble-user { - padding: 1em 1em 0 1em; - - .cw-talk-bubble-avatar{ - display: inline-block; - } - - span { - padding-left: 4px; - color: var(--dark-gray-color-45); - font-weight: 600; - vertical-align: top; - } - } -} - -.cw-structural-element-feedback-create, -.cw-structural-element-comment-create, -.cw-block-feedback-create, -.cw-block-comment-create { - border-top: solid thin var(--content-color-40); - padding-top: 1em; - textarea { - width: calc(100% - 6px); - resize: none; - border: solid thin var(--content-color-40); - &:active { - border: solid thin var(--content-color-80); - } - } -} -.cw-structural-element-comments-empty, -.cw-structural-element-feedback-empty, -.cw-block-comments-empty, -.cw-block-feedback-empty { - .cw-structural-element-feedback-create, - .cw-structural-element-comment-create, - .cw-block-feedback-create, - .cw-block-comment-create { - border-top: none; - } -} - -/* * * * * * * * * * * * * * * * * * * * * * -c o m m e n t s & f e e d b a c k e n d -* * * * * * * * * * * * * * * * * * * * * * */ - -/* * * * * * * -w y s i w y g -* * * * * * */ -textarea.studip-wysiwyg { - width: 100% -} - -/* * * * * * * * * * * -w y s i w y g e n d -* * * * * * * * * * */ - -/* * * * * * * * * -d a s h b o a r d -* * * * * * * * */ - -.cw-dashboard { - display: flex; - max-width: 1112px; - flex-wrap: wrap; - - .cw-dashboard-box { - margin-bottom: 1em; - margin-right: 1em; - - &.cw-dashboard-box-full { - max-width: $max-content-width; - width: calc(100% - 16px); - } - &.cw-dashboard-box-half { - width: calc(50% - 16px); - } - - &.cw-collapsible .cw-collapsible-content.cw-collapsible-content-open { - padding: 0; - } - } - .cw-dashboard-overview { - display: flex; - padding: 10px; - flex-wrap: wrap; - justify-content: center; - - } - - &.cw-dashboard-task-view { - display: unset; - max-width: unset; - flex-wrap: unset; - - .cw-dashboard-tasks-wrapper, - .cw-dashboard-students-wrapper { - max-height: unset; - } - } -} - -#course-courseware-dashboard { - .action-menu-item a { - cursor: pointer; - } -} - -.responsive-display { - .cw-dashboard { - .cw-dashboard-box { - - &.cw-dashboard-box-full { - width: 100% - } - &.cw-dashboard-box-half { - width: 100% - } - } - } -} - -.cw-activities-wrapper { - max-width: $max-content-width; - - .cw-companion-box { - margin: 10px; - } - - .cw-activities { - list-style: none; - padding: 0; - - .cw-activity-item { - border-bottom: solid thin var(--content-color-40); - padding: 0.5em; - - &:last-child { - border: none; - } - - p { - margin: 0 0 4px 0; - img { - padding-right: 0.5em; - vertical-align: text-bottom; - } - } - } - } -} - -.cw-dashboard-box { - .cw-dashboard-tasks-wrapper, - .cw-dashboard-students-wrapper { - padding: 10px; - } -} - -.cw-dashboard-tasks-wrapper, -.cw-dashboard-students-wrapper { - - table.default { - margin: 0; - thead { - tr { - th { - &.feedback { - min-width: 11em; - } - &.renewal { - min-width: 14em; - } - } - } - } - tbody { - tr { - td { - img { - vertical-align: text-bottom; - &.display-feedback, - &.edit { - cursor: pointer; - } - } - } - } - } - } -} - -/* * * * * * * * * * * * -d a s h b o a r d e n d -* * * * * * * * * * * */ - -/* * * * * * * * * * * * - p r o g r e s s -* * * * * * * * * * * */ -.cw-unit-progress { - .cw-unit-progress-breadcrumb { - padding: 10px 0; - a img { - vertical-align: top; - } - } - - .cw-unit-progress-chapter { - text-align: center; - margin-bottom: -3.5em; - - h1 { - border: none; - margin: 0; - padding: 0; - } - - .cw-progress-circle { - font-size: 18px; - margin: 1em auto; - - &.cw-unit-progress-current { - font-size: 12px; - top: -4.5em; - left: -2.5em; - } - } - } - - .cw-unit-progress-subchapter-list { - border-top: solid thin var(--content-color-40); - padding: 0 1em 0 1em; - - .cw-unit-empty-info { - margin-top: 10px; - } - } -} - -.cw-unit-progress-item { - display: block; - border-bottom: solid thin var(--content-color-40); - padding: 10px 0; - - &:hover{ - background-color: hsla(217,6%,45%,.2); - } - - &:last-child { - border: none; - } - - .cw-unit-progress-item-value, - .cw-unit-progress-item-description { - display: inline-block; - vertical-align: top; - } - - .cw-unit-progress-item-value { - width: 70px; - color: var(--base-color); - font-size: xx-large; - - .cw-progress-circle { - font-size: 12px; - margin: 4px; - } - } - .cw-unit-progress-item-description { - color: var(--base-color); - padding: 0.5em 0 0 1em; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } -} -/* * * * * * * * * * * * - p r o g r e s s e n d -* * * * * * * * * * * */ - -/* * * * * * * * * * * * * * * -p r o g r e s s c i r c l e -* * * * * * * * * * * * * * */ - -.cw-progress-circle { - font-size: 14px; - margin: 10px; - position: relative; - padding: 0; - width: 5em; - height: 5em; - background-color: var(--dark-gray-color-10); - border-radius: 50%; - line-height: 5em; - - &:after{ - border: none; - position: absolute; - top: 0.35em; - left: 0.35em; - text-align: center; - display: block; - border-radius: 50%; - width: 4.3em; - height: 4.3em; - background-color: white; - content: " "; - } - - span { - position: absolute; - line-height: 5em; - width: 5em; - text-align: center; - display: block; - color: var(--base-color); - z-index: 2; - } - - .left-half-clipper { - border-radius: 50%; - width: 5em; - height: 5em; - position: absolute; - clip: rect(0, 5em, 5em, 2.5em); - } - - &.over50 .left-half-clipper { - clip: rect(auto,auto,auto,auto); - } - - .value-bar { - position: absolute; - clip: rect(0, 2.5em, 5em, 0); - width: 5em; - height: 5em; - border-radius: 50%; - border: 0.45em solid var(--base-color); - box-sizing: border-box; - } - - &.over50 .first50-bar { - position: absolute; - clip: rect(0, 5em, 5em, 2.5em); - background-color: var(--base-color); - border-radius: 50%; - width: 5em; - height: 5em; - } - - &:not(.over50) .first50-bar { - display: none; - } - - &.p0 .value-bar { display: none; } - - @for $i from 1 through 100 { - &.p#{$i} .value-bar { - transform: rotate(calc(360deg * $i / 100)); - } - } -} - -/* * * * * * * * * * * * * * * * * * -p r o g r e s s c i r c l e e n d -* * * * * * * * * * * * * * * * * */ - - - -.cw-import-zip { - margin-bottom: 1em; - - header { - font-size: 1.15; - font-weight: 700; - } - .progress-bar-wrapper { - width: 100%; - border: solid thin var(--content-color-40); - - .progress-bar { - display: flex; - flex-direction: column; - justify-content: center; - color: white; - text-align: center; - white-space: nowrap; - background-color: var(--base-color); - } - } -} - -/* * * * * * -b l o c k s -* * * * * */ - -.cw-block-title { - padding: 4px; - background-color: var(--content-color-20); - color: var(--base-color); - font-weight: 700; - text-align: center; - border: solid thin var(--content-color-40); - border-bottom: none; -} -/* * * * * * * * * -b l o c k s e n d -* * * * * * * * */ - -/* * * * * * * * * * -a u d i o b l o c k -* * * * * * * * * * */ -.cw-block-audio { - .cw-audio-container { - border: solid thin var(--content-color-40); - padding-top: 1em; - } - .cw-audio-controls { - text-align: right; - padding: 0 0.5em; - } - .cw-audio-range { - margin: 0 5px 10px 0; - &::-moz-focus-outer { - border: 0; - } - &.ui-widget-content { - background-color: var(--base-color); - } - .ui-widget-header { - background-color: var(--dark-gray-color-5); - } - .ui-slider-handle { - border-radius: 20px; - width: 1em; - height: 1.7em; - top: -0.5em; - background-color: var(--dark-gray-color-20); - border-color: var(--content-color-40); - cursor: pointer; - margin-left: -2px; - } - } - .cw-audio-button { - border: solid thin var(--content-color-40); - background-color: var(--white); - background-repeat: no-repeat; - background-position: center center; - background-size: 24px; - min-height: 27px; - line-height: 130%; - padding: 5px 15px 5px 30px; - cursor: pointer; - font-size: 14px; - box-sizing: border-box; - text-align: center; - text-decoration: none; - vertical-align: bottom; - white-space: nowrap; - min-width: unset; - margin: 5px; - height: 46px; - width: 46px; - display: inline-block; - - &:hover { - background-color: var(--base-color); - } - - @each $button, $icon in $media-buttons { - &.cw-audio-#{$button}button { - @include background-icon($icon, clickable, 24); - &:hover { - @include background-icon($icon, info-alt, 24); - } - } - }; - } - - - .cw-audio-time { - position: relative; - top: -1em; - color: var(--base-gray); - } - - .cw-audio-range { - display: block; - margin: 0 auto 1.5em; - -webkit-appearance: none; - position: relative; - overflow: hidden; - height: 18px; - width: 100%; - cursor: pointer; - border-radius: 0; - } - - .cw-audio-range::-webkit-slider-runnable-track { - background: var(--dark-gray-color-20); - } - - .cw-audio-range::-webkit-slider-thumb { - -webkit-appearance: none; - width: 9px; /* 1 */ - height: 18px; - background: var(--white); - box-shadow: -100vw 0 0 100vw var(--base-color); - border: solid thin var(--content-color-40); - } - - .cw-audio-range::-moz-range-track { - height: 18px; - background: var(--dark-gray-color-10); - } - - .cw-audio-range::-moz-range-thumb { - background: var(--white); - height: 18px; - width: 9px; - border: solid thin var(--content-color-40); - border-radius: 0 !important; - box-shadow: -100vw 0 0 100vw var(--base-color); - box-sizing: border-box; - } - - .cw-audio-range::-ms-fill-lower { - background: var(--base-color); - } - - .cw-audio-range::-ms-thumb { - background: var(--white); - border: solid thin var(--content-color-40); - height: 18px; - width: 9px; - box-sizing: border-box; - } - - .cw-audio-range::-ms-ticks-after { - display: none; - } - - .cw-audio-range::-ms-ticks-before { - display: none; - } - - .cw-audio-range::-ms-track { - background: var(--dark-gray-color-20); - color: transparent; - height: 18px; - border: none; - } - - .cw-audio-range::-ms-tooltip { - display: none; - } - .cw-audio-playlist-wrapper { - margin-top: -1em; - padding-top: 1em; - border: solid thin var(--content-color-40); - border-top: none; - - &.empty { - border: none; - } - - .cw-audio-playlist { - padding-left: 0; - list-style: none; - cursor: pointer; - - &.with-recorder { - border-bottom: solid thin var(--content-color-40); - } - - li { - margin: 0 1em; - &:not(:last-child) { - border-bottom: solid thin var(--dark-gray-color-30); - } - - .cw-playlist-item { - display: block; - @include background-icon(file-audio2, clickable, 24); - background-repeat: no-repeat; - background-position: 1em center; - - margin: 1em 0; - padding: 1em; - padding-left: 4em; - color: var(--base-color); - &:hover { - color: var(--active-color); - } - &.current-item { - @include background-icon(play, clickable, 24); - font-weight: 700; - &.is-playing { - @include background-icon(pause, clickable, 24); - } - } - } - } - } - .cw-audio-playlist-recorder { - padding: 1em; - } - } - - - .cw-audio-current-track { - @include background-icon(file-audio2, info, 96); - background-position: top center; - background-repeat: no-repeat; - width: 100%; - min-height: 140px; - margin: 1em 0 2em 0; - p { - text-align: center; - padding-top: 106px; - } - } - .cw-audio-empty { - @include background-icon(file, info, 96); - border: solid thin var(--content-color-40); - background-position: center 1em; - background-repeat: no-repeat; - min-height: 140px; - padding: 1em; - p { - text-align: center; - padding-top: 106px; - } - } -} -/* * * * * * * * * * * * * * -a u d i o b l o c k e n d -* * * * * * * * * * * * * */ - -/* * * * * * * * * * * * * * * * * * * * -f o r m u l t i m e d i a b l o c k s -* * * * * * * * * * * * * * * * * * * */ -.cw-file-empty { - @include background-icon(file, info, 96); - border: solid thin var(--content-color-40); - background-position: center 1em; - background-repeat: no-repeat; - min-height: 140px; - padding: 1em; - p { - text-align: center; - padding-top: 106px; - } -} - -/* * * * * * * * * * * * * * * * * * * * * * * * -f o r m u l t i m e d i a b l o c k s e n d -* * * * * * * * * * * * * * * * * * * * * * * */ - -/* * * * * * * * * * -v i d e o b l o c k -* * * * * * * * * * */ -.cw-block-video { - video { - width: 100%; - } -} -/* * * * * * * * * * * * * * -v i d e o b l o c k e n d -* * * * * * * * * * * * * */ - -/* * * * * * * * * * * * * * * * * -b e f o r e a f t e r b l o c k -* * * * * * * * * * * * * * * * */ -.cw-block-before-after { - .twentytwenty-container { - width: 100% !important; - z-index: 19; - .twentytwenty-handle { - z-index: 18; - } - .twentytwenty-overlay { - z-index: 17; - } - img { - width: 100%; - z-index: 16; - } - } -} -/* * * * * * * * * * * * * * * * * * * * -b e f o r e a f t e r b l o c k e n d -* * * * * * * * * * * * * * * * * * * */ - -/* * * * * * * * * -c o d e b l o c k -* * * * * * * * */ -.cw-block-code { - pre { - margin-bottom: 0; - } - - .hljs { - display: block; - overflow-x: auto; - padding: 0.5em; - background: var(--dark-gray-color-5); - color: black; - border: solid thin var(--content-color-40); - } - - .hljs-comment, - .hljs-quote, - .hljs-variable { - color: var(--dark-green); - } - - .hljs-keyword, - .hljs-selector-tag, - .hljs-selector-class, - .hljs-built_in, - .hljs-name, - .hljs-tag { - color: var(--base-color); - font-weight: 600; - } - - .hljs-string, - .hljs-title, - .hljs-section, - .hljs-attribute, - .hljs-literal, - .hljs-template-tag, - .hljs-template-variable, - .hljs-type, - .hljs-addition { - color: var(--orange-80); - font-weight: 400; - } - - .hljs-deletion, - .hljs-selector-attr, - .hljs-selector-pseudo, - .hljs-meta { - color: var(--petrol); - font-weight: 400; - } - - .hljs-doctag { - color: var(--dark-gray-color-75); - font-weight: 400; - } - - .hljs-attr { - color: var(--active-color); - font-weight: 400; - } - - .hljs-symbol, - .hljs-bullet, - .hljs-link { - color: var(--petrol); - font-weight: 400; - } - - .hljs-emphasis { - font-style: italic; - font-weight: 400; - } - - .hljs-strong { - font-weight: 600; - } - - .code-lang { - background: var(--dark-gray-color-5); - border: solid thin var(--content-color-40); - border-top: none; - padding: 5px 10px; - text-align: right; - color: var(--dark-gray-color-45); - font-family: monospace; - text-transform: full-width; - } - -} -/* * * * * * * * * * * * * -c o d e b l o c k e n d -* * * * * * * * * * * * */ - -/* * * * * * * * * * * * * -c o n f i r m b l o c k -* * * * * * * * * * * * */ -.cw-block-confirm { - .cw-block-confirm-content{ - border: solid thin var(--content-color-40); - padding: 1em; - margin: 0; - - input[type=checkbox] { - margin-right: 2em; - vertical-align: bottom; - } - } -} -/* * * * * * * * * * * * * * * * -c o n f i r m b l o c k e n d -* * * * * * * * * * * * * * * */ - -/* * * * * * * * * * -d a t e b l o c k -* * * * * * * * * */ - -.cw-container-colspan-half, -.cw-container-colspan-half-center { - .cw-block-date { - .cw-block-content { - font-size: 9px; - } - } -} - -.cw-block-date { - - .cw-date-countdown, - .cw-date-date { - margin: 0 auto; - width: max-content; - } - - .cw-date-countdown { - .cw-date-countdown-digit { - display: inline-block; - margin-right: 4px; - - .cw-date-countdown-number { - font-size: 6em; - line-height: 1.25em; - height: 1.25em; - padding: 3px 0.5em; - background: rgba(245,245,245,1); - font-weight: 300; - } - - .cw-date-countdown-label-sg, - .cw-date-countdown-label-pl { - padding: 5px; - font-size: 1.25em; - text-align: left; - text-transform: uppercase; - } - } - } - - .cw-date-date { - .cw-date-date-space { - display: inline-block; - width: 2em; - - } - - .cw-date-date-digits { - display: inline-block; - - .cw-date-date-number { - font-size: 5em; - line-height: 1.25em; - height: 1.25em; - padding: 0.25em; - background: rgba(245,245,245,1); - font-weight: 300; - } - } - } -} - -.responsive-display { - .cw-block-date { - .cw-block-content { - font-size: 9px; - - .cw-date-countdown-number { - font-size: 3.5em; - } - .cw-date-countdown-label-sg, - .cw-date-countdown-label-pl { - font-size: 1em; - } - .cw-date-date-number { - font-size: 3em; - } - } - } -} - -/* * * * * * * * * * * * * -d a t e b l o c k e n d -* * * * * * * * * * * * */ - -/* * * * * * * * * * * * -c a n v a s b l o c k -* * * * * * * * * * * */ -.cw-block-canvas { - .cw-canvasblock-canvas { - max-width: 100%; - border: solid thin var(--content-color-40); - } - - .cw-canvasblock-upload-message{ - display: none; - } - - .cw-canvasblock-original-img { - display: none; - } - - .cw-canvasblock-tool-selected-text { - cursor: text; - } - - h1.cw-canvasblock-description { - border-bottom: none; - } - - .cw-canvasblock-toolbar { - border: solid thin var(--content-color-40); - border-bottom: none; - - .cw-canvasblock-buttonset { - display: inline-block; - padding: 5px; - margin-right: 0.5em; - - button { - cursor: pointer; - user-select: none; - border: solid thin var(--content-color-40); - height: 32px; - width: 32px; - background-color: var(--white); - background-position: center; - background-repeat: no-repeat; - background-size: 24px 24px; - - &.cw-canvasblock-color { - $colors: ( - white: #ffffff, - blue: #3498db, - green: #2ecc71, - purple: #9b59b6, - red: #e74c3c, - yellow: #fed330, - orange: #f39c12, - grey: #95a5a6, - darkgrey: #34495e, - black: #000000, - ); - - @each $name, $color in $colors { - &.#{"" + $name} { - background-color: $color; - } - } - - &.selected-color { - border: solid 2px var(--black); - } - } - - &.cw-canvasblock-reset { - @include background-icon(refresh, clickable, 24); - } - - &.cw-canvasblock-size { - @include background-icon(stop, clickable); - - &.cw-canvasblock-size-small { - background-size: 8px 7px; - } - &.cw-canvasblock-size-normal { - background-size: 16px 14px; - } - &.cw-canvasblock-size-large { - background-size: 22px 20px; - } - &.cw-canvasblock-size-huge { - background-size: 26px 24px; - } - &.selected-size { - border: solid 2px var(--black); - } - } - - &.cw-canvasblock-tool { - &.cw-canvasblock-tool-pen { - @include background-icon(comment, clickable); - } - - &.cw-canvasblock-tool-text { - vertical-align: top; - font-size: 22px; - color: var(--base-color); - font-weight: 600; - } - - &.selected-tool { - border: solid 2px var(--black); - } - } - - &.cw-canvasblock-undo { - @include background-icon(arr_2left, clickable, 24); - } - - &.cw-canvasblock-download { - @include background-icon(download, clickable, 24); - } - &.cw-canvasblock-store { - @include background-icon(upload, clickable, 24); - } - &.cw-canvasblock-show-all { - @include background-icon(group2, clickable, 24); - &.selected-view { - border: solid 2px var(--black); - } - } - &.cw-canvasblock-show-own { - @include background-icon(person, clickable, 24); - &.selected-view { - border: solid 2px var(--black); - } - } - } - } - } - - .cw-canvasblock-tool-selected-text { - cursor: text; - } -} -/* * * * * * * * * * * * * * * -c a n v a s b l o c k e n d -* * * * * * * * * * * * * * */ - -/* * * * * * * * * * * * * -d o c u m e n t b l o c k -* * * * * * * * * * * * */ -.cw-block-document { - .cw-pdf-main-container { - width: calc(100% - 2px); - border: solid thin var(--content-color-40); - .cw-block-title { - border: none; - border-bottom: solid thin var(--content-color-40); - } - } - .cw-pdf-toolbar { - position: relative; - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: baseline; - align-content: space-around; - background-color: var(--content-color-20); - padding: 4px 8px; - - button { - height: 100%; - margin: 0 2px 0 0; - padding: 4px; - - &.active { - background-color: var(--base-color); - } - } - - .cw-pdf-toolbar-left { - position: relative; - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: baseline; - align-content: space-between; - width: 33%; - } - .cw-pdf-toolbar-middle { - position: relative; - display: flex; - justify-content: center; - width: 34%; - - .cw-pdf-zoom-buttons { - margin-right: 8px; - - button { - margin: 0; - padding: 4px 0; - } - } - } - .cw-pdf-toolbar-right { - display: flex; - flex-direction: row; - justify-content: flex-end; - align-items: baseline; - align-content: space-between; - position: relative; - width: 33%; - margin-right: 4px; - - } - .cw-pdf-page-nav { - margin: 0 4px; - - button { - margin: 0; - padding: 4px 0; - } - .cw-pdf-page-num { - text-align: right; - width: 2em; - } - } - - .cw-pdf-search-box { - position: absolute; - top: 33px; - left: 22px; - width: auto; - background-color: var(--content-color-20); - border-top: none; - padding: 6px; - z-index: 2; - line-height: normal; - - .cw-pdf-search-num { - margin: 4px 0 0 0; - display: block; - } - .cw-pdf-search-navs { - display: inline-block; - button { - margin: 0; - padding: 0; - } - } - } - } - .cw-pdf-outer-container { - position: relative; - width: 100%; - - .cw-pdf-content { - display: flex; - flex-direction: row; - - .cw-pdf-sidebar { - width: 25%; - min-width: 270px;; - align-self: stretch; - background-color: var(--white); - border-right: solid 1px var(--content-color-40); - - ul.cw-pdf-toc-list, ul.cw-pdf-toc-sub-list { - padding: 0; - list-style: none; - - li { - padding: 0.5em 1em; - } - } - ul.cw-pdf-toc-list { - margin-top: 1em; - } - } - - .cw-pdf-viewer-container { - width: 100%; - height: 100%; - overflow: hidden; - cursor: text; - - &.hand-cursor-grab { - cursor: grab; - &.grabbing { - cursor: grabbing; - } - } - &.has-error { - display: none; - } - .page { - position: relative; - margin: 0 auto; - } - } - - } - - - .cw-pdf-viewer-fake-container { - position: absolute; - } - - - .cw-pdf-error-page { - overflow: hidden; - width: calc(100% - 16px); - height: 100%; - padding: 8px; - display:table; - } - } -} -/* * * * * * * * * * * * * * * * * * -d o c u m e n t b l o c k e n d -* * * * * * * * * * * * * * * * * */ - -/* * * * * * * * * * * -e m b e d b l o c k -* * * * * * * * * * */ - -.cw-block-embed { - .cw-block-content { - .cw-block-embed-iframe-wrapper { - overflow-y: hidden; - iframe{ - height: 100% !important; - width: 100% !important; - } - } - .cw-block-embed-info { - margin-top: 0.5em; - } - } -} - -/* * * * * * * * * * * * * * -e m b e d b l o c k e n d -* * * * * * * * * * * * * */ - -/* * * * * * * * * * * -i f r a m e b l o c k -* * * * * * * * * * */ - -.cw-block-iframe { - .cw-block-content { - iframe { - border: solid thin var(--content-color-40); - width: calc(100% - 2px); - } - - .cw-block-iframe-cc-data { - border: solid thin var(--content-color-40); - border-top: none; - margin-top: -6px; - padding-top: 10px; - height: 75px; - - .cw-block-iframe-cc { - width: 120px; - height: 50px; - margin-left: 4px; - display: inline-block; - background-repeat: no-repeat; - &.cw-block-iframe-cc-by { - background-image: url("#{$image-path}/cc/by.svg"); - } - &.cw-block-iframe-cc-by-nc { - background-image: url("#{$image-path}/cc/by-nc.eu.svg"); - } - &.cw-block-iframe-cc-by-nc-nd { - background-image: url("#{$image-path}/cc/by-nc-nd.eu.svg"); - } - &.cw-block-iframe-cc-by-nc-sa { - background-image: url("#{$image-path}/cc/by-nc-sa.svg"); - } - &.cw-block-iframe-cc-by-nd { - background-image: url("#{$image-path}/cc/by-nd.svg"); - } - &.cw-block-iframe-cc-by-sa { - background-image: url("#{$image-path}/cc/by-sa.svg"); - } - } - .cw-block-iframe-cc-infos{ - display: inline-block; - vertical-align: top; - padding-left: 1em; - p { - margin: 0; - } - } - } - - - - } -} - -/* * * * * * * * * * * * * * -i f r a m e b l o c k e n d -* * * * * * * * * * * * * */ - -/* * * * * * * * + -l t i b l o c k -* * * * * * * * */ -.cw-block-lti { - .cw-block-content { - .cw-block-lti-content { - border: solid thin var(--content-color-40); - box-sizing: border-box; - } - .cw-block-lti-icon-tool { - @include background-icon(plugin, info, 24); - background-repeat: no-repeat; - - display: block; - padding: 16px 16px 16px 40px; - background-position: 10px center; - overflow: hidden; - text-overflow: ellipsis; - } - } -} -/* * * * * * * * * * * * -l t i b l o c k e n d -* * * * * * * * * * * */ - -/* * * * * * * * * * * * -f o l d e r b l o c k -* * * * * * * * * * * */ -.cw-block-folder-info { - border: solid thin var(--content-color-40); - padding: 10px 10px 0 10px; - overflow: hidden; - border-bottom: none; -} -.cw-block-folder-list { - border: solid thin var(--content-color-40); - padding: 0; - list-style: none; - - .cw-block-folder-file-item { - list-style: none; - - &:not(:last-child) { - border-bottom: solid thin var(--content-color-40); - } - a { - display: block; - } - &:hover { - background-color: hsla(217,6%,45%,.2); - } - } - .cw-block-folder-download-icon { - @include background-icon(download, clickable, 24); - background-repeat: no-repeat; - - float: right; - height: 24px; - width: 24px; - margin: 1em; - } -} -.cw-block-folder-upload { - border: solid thin var(--content-color-40); - padding: 1em 10px; - border-top: none; - - .cw-file-input { - width: calc(100% - 148px); - vertical-align: middle; - } -} -// for folder and download block -.cw-block-file-info { - @include background-icon(file, clickable, 24); - background-repeat: no-repeat; - - display: block; - padding: 16px 16px 16px 40px; - background-position: 10px 16px; - width: calc(100% - 56px); - overflow: hidden; - text-overflow: ellipsis; - - &.cw-block-file-icon-empty { - color: var(--black); - @include background-icon(folder-empty, info, 24); - } - &.cw-block-file-icon-none { - color: var(--black); - @include background-icon(file, info, 24); - } - &.cw-block-file-icon-audio { - @include background-icon(file-audio, clickable, 24); - &.download-disabled { - @include background-icon(file-audio, info, 24); - } - } - &.cw-block-file-icon-pic { - @include background-icon(file-pic, clickable, 24); - &.download-disabled { - @include background-icon(file-pic, info, 24); - } - } - &.cw-block-file-icon-video { - @include background-icon(file-video, clickable, 24); - &.download-disabled { - @include background-icon(file-video, info, 24); - } - } - &.cw-block-file-icon-pdf { - @include background-icon(file-pdf, clickable, 24); - &.download-disabled { - @include background-icon(file-pdf, info, 24); - } - } - &.cw-block-file-icon-word { - @include background-icon(file-word, clickable, 24); - &.download-disabled { - @include background-icon(file-word, info, 24); - } - } - &.cw-block-file-icon-spreadsheet { - @include background-icon(file-excel, clickable, 24); - &.download-disabled { - @include background-icon(file-excel, info, 24); - } - } - &.cw-block-file-icon-text { - @include background-icon(file-text, clickable, 24); - &.download-disabled { - @include background-icon(file-text, info, 24); - } - } - &.cw-block-file-icon-ppt { - @include background-icon(file-ppt, clickable, 24); - &.download-disabled { - @include background-icon(file-ppt, info, 24); - } - } - &.cw-block-file-icon-archive { - @include background-icon(file-archive, clickable, 24); - &.download-disabled { - @include background-icon(file-archive, info, 24); - } - } - &.cw-block-file-icon-file { - @include background-icon(file, clickable, 24); - &.download-disabled { - @include background-icon(file, info, 24); - } - } -} -.cw-block-file-details { - margin-top: -16px; - padding-left: 40px; - padding-bottom: 16px; - color: var(--dark-gray-color); -} -.cw-block-file-owner, -.cw-block-file-mkdate { - display: block; - width: calc(100% - 56px); - overflow: hidden; - text-overflow: ellipsis; -} -/* * * * * * * * * * * * * * * -f o l d e r b l o c k e n d -* * * * * * * * * * * * * * */ - - -/* * * * * * * * * * * * * * -d o w n l o a d b l o c k -* * * * * * * * * * * * * */ -.cw-block-download { - .cw-block-download-content { - border: solid thin var(--content-color-40); - .cw-block-download-file-item { - a { - display: block; - } - &:hover { - background-color: fade-out($dark-gray-color-75, 0.8); - } - .cw-block-download-download-icon { - @include background-icon(download, clickable, 24); - background-repeat: no-repeat; - - float: right; - height: 24px; - width: 24px; - margin: 1em; - } - } - } - -} - -/* * * * * * * * * * * * * * * * * -d o w n l o a d b l o c k e n d -* * * * * * * * * * * * * * * * */ - -/* * * * * * * * * * * * * -g a l l e r y b l o c k -* * * * * * * * * * * * */ - -.cw-block-gallery { - .cw-block-content { - overflow: hidden; - } -} - -.cw-block-gallery-content { - position: relative; - margin: auto; -} - -.cw-block-gallery-slides { - display: none; - img { - display: block; - max-width: 100%; - margin-left: auto; - margin-right: auto; - } -} - -.cw-block-gallery-prev, -.cw-block-gallery-next { - cursor: pointer; - position: absolute; - background-color: fade-out($white, 0.6); - top: 50%; - height: 36px; - width: 36px; - background-repeat: no-repeat; - background-position: center; - margin-top: -22px; - transition: 200ms ease; - user-select: none; - border: none; - - &:hover { - background-color: var(--base-color); - } -} - -.cw-block-gallery-prev { - @include background-icon(arr_1left, clickable, 24); - &:hover{ - @include background-icon(arr_1left, info-alt, 24); - } -} -.cw-block-gallery-next { - right: 0; - @include background-icon(arr_1right, clickable, 24); - &:hover { - @include background-icon(arr_1right, info-alt, 24); - } -} - -.cw-block-gallery-file-description { - width: -moz-available; - color: var(--white); - font-size: 15px; - padding: 8px 12px; - position: absolute; - bottom: 8px; - text-align: center; - p { - display: -webkit-inline-box; - background-color: fade-out($black, 0.6); - padding: 0 2em; - margin-bottom: 4px; - overflow: hidden; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - } - - &.show-on-hover { - display: none; - } -} - -.cw-block-gallery-content:hover .show-on-hover { - display: block; -} - -.cw-block-gallery-number-text { - color: var(--white); - font-size: 12px; - padding: 8px 12px; - position: absolute; - top: 0; - background-color: fade-out($black, 0.6); -} - - .cw-block-gallery-fade { - -webkit-animation-name: fade; - -webkit-animation-duration: 1.5s; - animation-name: fade; - animation-duration: 1.5s; -} - -@-webkit-keyframes fade { - from {opacity: .4} - to {opacity: 1} -} - -@keyframes fade { - from {opacity: .4} - to {opacity: 1} -} - - -.cw-block-gallery-grid { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-start; - list-style: none; - padding: 0; - figure { - padding: 1px 4px; - margin: unset; - figcaption { - margin-bottom: 12px; - - .cw-block-gallery-grid-file-name { - font-weight: 700; - margin-bottom: 4px; - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - } - .cw-block-gallery-grid-file-description { - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 5; - -webkit-box-orient: vertical; - } - } - } -} -.cw-container-wrapper-edit .cw-block-gallery-grid { - margin: 0; -} - -/* * * * * * * * * * * * * * * * * -g a l l e r y b l o c k e n d -* * * * * * * * * * * * * * * * */ - - -/* * * * * * * * * * * * * * * * * -i m a g e m a p b l o c k -* * * * * * * * * * * * * * * * */ -.cw-block-image-map { - .cw-image-map-canvas, - .cw-image-map-original-img { - display: none; - } - - form.default { - label.cw-block-image-map-dimensions > input[type=number] { - display: inline-block; - } - } -} - -/* * * * * * * * * * * * * * * * * -i m a g e m a p b l o c k e n d -* * * * * * * * * * * * * * * * */ - -/* * * * * * * * * * * * * * -b i o g r a p h y b l o c k -* * * * * * * * * * * * * */ - -.cw-block-biography { - .cw-block-biography-content { - display: flex; - min-height: 200px; - flex-direction: row; - padding: 2em 2em 2em 1em; - border: 2px solid var(--base-color); - - .cw-block-biography-type { - margin: auto 1em auto 0; - padding-top: 96px; - min-width: 192px; - max-width: 192px; - text-align: center; - background-repeat: no-repeat; - background-position: center top; - } - - .cw-block-biography-details { - h2, h3 { - margin-top: 0; - } - } - - } -} - -/* * * * * * * * * * * * * * * * * * -b i o g r a p h y b l o c k e n d -* * * * * * * * * * * * * * * * * */ - - -/* * * * * * * * * * * * * * * * * * * * * * * * * * * -b i o g r a p h y a c h i e v e m e n t s b l o c k -* * * * * * * * * * * * * * * * * * * * * * * * * * */ - -.cw-block-biography-achievements { - @each $type, $icon in $achievement-types { - .cw-block-biography-achievements-type-#{$type} { - @include background-icon($icon, clickable, 96); - } - } -} - -/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -b i o g r a p h y a c h i e v e m e n t s b l o c k e n d -* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - -/* * * * * * * * * * * * ** * * * * * * -b i o g r a p h y g o a l s b l o c k -* * * * * * * * * * * * * * * * * * * */ - -.cw-block-biography-goals { - @each $type, $icon in $goals-types { - .cw-block-biography-goals-type-#{$type} { - @include background-icon($icon, clickable, 96); - } - } -} - -/* * * * * * * * * * * * * * * * * * * * * * * -b i o g r a p h y g o a l s b l o c k e n d -* * * * * * * * * * * * * * * * * * * * * * */ - -/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -b i o g r a p h y p e r s o n a l i n f o r m a t i o n b l o c k -* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - -.cw-block-biography-personal-information { - .cw-block-biography-content { - min-height: 140px; - - .cw-block-biography-personal-information-type { - @include background-icon(person2, clickable, 96); - } - - .cw-block-biography-personal-information-details { - display: grid; - max-height: 7em; - grid-template-columns: max-content 1fr; - grid-gap: 5px 10px; - - .preface { - grid-column-start: 1; - grid-column-end: 3; - } - } - } -} - -/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -b i o g r a p h y p e r s o n a l i n f o r m a t i o n b l o c k e n d -* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - -/* * * * * * * * * * -l i n k b l o c k -* * * * * * * * * */ - -.cw-block-link { - a { - text-decoration: none; - } - .cw-link { - border: solid thin var(--content-color-40); - color: var(--base-color); - height: 20px; - padding: 1em; - - .cw-link-title { - margin-left: 3em; - } - - &:hover { - background-color: var(--base-color); - border: solid thin var(--base-color); - color: var(--white); - } - - &.internal { - @include background-icon(link-intern, clickable, 28); - background-position: 1em 50%; - background-repeat: no-repeat; - - &:hover { - @include background-icon(link-intern, info-alt, 28); - } - } - - &.external { - @include background-icon(link-extern, clickable, 28); - background-position: 1em 50%; - background-repeat: no-repeat; - &:hover { - @include background-icon(link-extern, info-alt, 28); - } - - .cw-link-og-image { - display: inline-block; - max-width: 40%; - vertical-align: top; - margin-right: 2em; - } - .cw-link-og-textwrapper { - display: inline-block; - max-width: 50%; - p { - margin: 0; - } - .cw-link-og-site { - font-size: 1.25em; - } - .cw-link-og-title { - font-weight: 600; - } - .cw-link-og-description { - color: var(--base-color-80); - text-align: justify; - } - } - } - } -} - -/* * * * * * * * * * * * * -l i n k b l o c k e n d -* * * * * * * * * * * * */ - -/* -dialog cards block -*/ -.cw-block-dialog-cards-content { - display: flex; - .cw-dialogcards { - flex-grow: 2; - .scene { - margin: 0 auto; - width: 440px; - height: 600px; - perspective: 880px; - display: none; - &.active { - display: block; - animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; - transform: translate3d(0, 0, 0); - backface-visibility: hidden; - perspective: 1000px; - } - } - - .card { - width: 100%; - height: 78%; - transition: transform 1s; - transform-style: preserve-3d; - cursor: pointer; - position: relative; - top: 11%; - } - - .card.is-flipped { - transform: rotateY(180deg); - } - - .card__face { - position: absolute; - width: 100%; - height: 100%; - color: var(--black); - text-align: center; - font-weight: bold; - font-size: 1.2em; - backface-visibility: hidden; - box-shadow: 0 2px 15px fade-out($black, 0.7); - - img { - max-width: 380px; - max-height: 220px; - margin-top: 1em; - } - - .cw-dialogcards-front-no-image { - @include background-icon(question, navigation, 150); - } - - .cw-dialogcards-back-no-image { - @include background-icon(exclaim, navigation, 150); - } - - .cw-dialogcards-front-no-image, - .cw-dialogcards-back-no-image { - width: 100%; - height: 180px; - margin-top: 2em; - background-repeat: no-repeat; - background-position-x: center; - } - - p { - margin: 1em 3em 1em 4em; - padding-right: 1em; - overflow-y: auto; - max-height: 12em; - text-align: justify; - } - } - - .card__face--front { - @include background-icon(arr_1right, clickable); - background-color: var(--white); - background-repeat: no-repeat; - background-position: 95% 95%; - } - - .card__face--back { - @include background-icon(arr_1left, clickable); - background-color: var(--white); - background-repeat: no-repeat; - background-position: 5% 95%; - transform: rotateY(180deg); - } - } - - .cw-dialogcards-navbutton { - color: transparent; - width: 35px; - height: 35px; - border-radius: 2px; - background-position: 50%; - background-repeat: no-repeat; - background-color: var(--base-color); - border: none; - display: block; - z-index: 4; - margin: auto 2px; - padding: 0; - cursor: pointer; - - &.cw-dialogcards-prev { - @include background-icon(arr_1left, info-alt, 24); - - } - - &.cw-dialogcards-next { - @include background-icon(arr_1right, info-alt, 24); - right: 0; - } - - &.cw-dialogcards-prev-disabled, - &.cw-dialogcards-next-disabled { - background-color: var(--light-gray-color-40); - } - } - - @keyframes shake { - 10%, 90% { - transform: translate3d(-1px, 0, 0); - } - - 20%, 80% { - transform: translate3d(2px, 0, 0); - } - - 30%, 50%, 70% { - transform: translate3d(-4px, 0, 0); - } - - 40%, 60% { - transform: translate3d(4px, 0, 0); - } - } -} - - -/* -dialog cards block end -*/ - -/* -headline block -*/ -$big-icon-size: 196; -$big-icon-size-px: $big-icon-size + px; -$large-icon-size: 128; -$large-icon-size-px: $large-icon-size + px; - -.cw-block-headline { - .cw-block-headline-content { - min-height: 600px; - overflow: hidden; - background-position: center; - background-size: $max-content-width; - background-repeat: no-repeat; - - &.half { - min-height: 300px; - } - - &.quarter { - min-height: 150px; - } - - &.heavy { - - .cw-block-headline-iconbox { - display: none; - } - .cw-block-headline-textbox { - margin: 2em; - h1, h2 { - display: inline; - border: none; - padding: 0.25em 0; - } - h1 { - font-size: 10em; - line-height: 1.2em; - } - h2 { - font-size: 2em; - line-height: 1em; - } - - &.quarter { - margin: 1.5em; - h1 { - font-size: 5em; - } - h2 { - font-size: 1.5em; - } - } - } - - } - &.bigicon_top { - .icon-layer { - background-repeat: no-repeat; - background-position: center; - margin-top: 8em; - margin-bottom: 1em; - background-size: $big-icon-size-px; - height: $big-icon-size-px; - - @each $icon in $icons { - &.icon-black-#{$icon} { - @include background-icon($icon, info, $big-icon-size); - } - &.icon-white-#{$icon} { - @include background-icon($icon, info-alt, $big-icon-size); - } - &.icon-studip-blue-#{$icon} { - @include background-icon($icon, clickable, $big-icon-size); - } - &.icon-studip-red-#{$icon} { - @include background-icon($icon, status-red, $big-icon-size); - } - &.icon-studip-yellow-#{$icon} { - @include background-icon($icon, status-yellow, $big-icon-size); - } - &.icon-studip-green-#{$icon} { - @include background-icon($icon, status-green, $big-icon-size); - } - &.icon-studip-gray-#{$icon} { - @include background-icon($icon, inactive, $big-icon-size); - } - }; - - &.half { - height: 144px; - background-size: 144px; - background-position: center; - margin-top: 2em; - margin-bottom: 0; - } - &.quarter { - height: 72px; - background-size: 72px; - background-position: center; - margin-top: 1em; - margin-bottom: 0; - } - } - - .cw-block-headline-textbox { - width: 80%; - padding-bottom: 4em; - margin: 0 auto; - .cw-block-headline-title { - h1 { - border: none; - font-size: 5em; - text-align: center; - } - } - - .cw-block-headline-subtitle { - h2 { - border: none; - font-size: 18px; - text-align: center; - margin-top: 10px; - } - } - - &.quarter { - padding-bottom: 1em; - .cw-block-headline-title { - h1 { - font-size: 2.25em; - margin: 0; - } - } - .cw-block-headline-subtitle { - h2 { - font-size: 1em; - margin: 0; - } - } - } - } - } - - &.bigicon_before { - display: flex; - align-items: center; - .icon-layer { - min-height: $big-icon-size-px; - min-width: $big-icon-size-px; - margin:0 28px 0 28px; - background-repeat: no-repeat; - background-position: left center; - - @each $icon in $icons { - &.icon-black-#{$icon} { - @include background-icon($icon, info, $big-icon-size); - } - &.icon-white-#{$icon} { - @include background-icon($icon, info-alt, $big-icon-size); - } - &.icon-studip-blue-#{$icon} { - @include background-icon($icon, clickable, $big-icon-size); - } - &.icon-studip-red-#{$icon} { - @include background-icon($icon, status-red, $big-icon-size); - } - &.icon-studip-yellow-#{$icon} { - @include background-icon($icon, status-yellow, $big-icon-size); - } - &.icon-studip-green-#{$icon} { - @include background-icon($icon, status-green, $big-icon-size); - } - &.icon-studip-gray-#{$icon} { - @include background-icon($icon, inactive, $big-icon-size); - } - }; - - &.quarter { - min-height: $large-icon-size-px; - min-width: $large-icon-size-px; - background-size: $large-icon-size-px; - } - } - - .cw-block-headline-textbox { - margin: 2em 1em 2em 0; - .cw-block-headline-title { - h1 { - border: none; - font-size: 5em; - text-align: left; - } - } - - .cw-block-headline-subtitle { - display: none; - } - } - } - - &.ribbon { - display: flex; - align-items: center; - - .cw-block-headline-textbox { - width: 100%; - padding: 1em 0; - margin: 3em 0; - background-color: fade-out($black, 0.5); - .cw-block-headline-title { - h1 { - border: none; - font-size: 5em; - text-align: center; - margin-bottom: 0; - } - } - - .cw-block-headline-subtitle { - h2 { - border: none; - font-size: 18px; - text-align: center; - margin-top: 10px; - } - } - } - } - - &.vertical { - .cw-block-headline-textbox { - - .cw-block-headline-title { - position: relative; - top: 0; - left: 5em; - height: 5em; - text-align: center; - width: 600px; - transform-origin: 0 0; - transform: rotate(90deg); - h1 { - text-transform: uppercase; - border: none; - font-size: 2em; - line-height: 2.5em; - } - } - - .cw-block-headline-subtitle { - margin: 0 8em; - padding: 2em; - h2 { - margin: 0; - font-weight: 400; - } - } - } - &.half { - .cw-block-headline-title { - width: 300px; - } - } - &.quarter { - .cw-block-headline-title { - width: 150px; - h1 { - font-size: 1em; - line-height: 5em; - } - } - .cw-block-headline-subtitle { - margin: -2em 8em 0 8em; - padding: 1em; - } - } - } - - &.skew_text { - min-height: 600px; - - .cw-block-headline-textbox { - font-size: 7em; - text-align: left; - text-transform: uppercase; - font-weight: 800; - font-family: sans-serif; - font-style: normal; - letter-spacing: -6px; - margin: 1.25em 0 1.5em 1em; - div { - overflow: hidden; - font-size: 1em; - margin: -1px 0; - white-space: nowrap; - height: .8em; - width: calc(100% - 1em); - - h1, h2 { - font-size: 0.8em; - margin: 0; - white-space: nowrap; - overflow: hidden; - line-height: .8em; - height: .8em; - } - } - .cw-block-headline-title, - .cw-block-headline-second-subtitle { - transform: skew(60deg,-15deg) scaley(.66667); - } - .cw-block-headline-subtitle { - transform: skew(0deg,-15deg) scaley(1.33333); - } - .cw-block-headline-subtitle { - position: relative; - left: 0.48em; - } - .cw-block-headline-second-subtitle { - position: relative; - left: 0.92em; - } - } - - &.half { - min-height: 300px; - height: 300px; - .cw-block-headline-textbox { - font-size: 4em; - margin: 1.5em 0 1.5em 1em; - div { - width: calc(100% - 9em); - } - } - } - &.quarter { - min-height: 150px; - height: 150px; - .cw-block-headline-textbox { - font-size: 2em; - margin: 0.75em 0 0.75em 1em; - letter-spacing: -2px; - div { - width: calc(100% - 18em); - } - } - } - } - - &.icon_top_lines { - .cw-block-headline-iconbox { - margin: 32px; - &::before, - &::after { - width: calc(50% - 96px); - height: 64px; - display: inline-block; - border-top: solid 4px; - content: ''; - } - @each $name, $hex in $border-colors { - &.border-#{""+$name}::before, - &.border-#{""+$name}::after { - border-color: $hex; - } - } - .icon-layer { - background-repeat: no-repeat; - background-position: center; - background-size: 128px; - height: 128px; - width: 192px; - display: inline-block; - margin: auto; - - @each $icon in $icons { - &.icon-black-#{$icon} { - @include background-icon($icon, info, 128); - } - &.icon-white-#{$icon} { - @include background-icon($icon, info-alt, 128); - } - &.icon-studip-blue-#{$icon} { - @include background-icon($icon, clickable, 128); - } - &.icon-studip-red-#{$icon} { - @include background-icon($icon, status-red, 128); - } - &.icon-studip-yellow-#{$icon} { - @include background-icon($icon, status-yellow, 128); - } - &.icon-studip-green-#{$icon} { - @include background-icon($icon, status-green, 128); - } - &.icon-studip-gray-#{$icon} { - @include background-icon($icon, inactive, 128); - } - }; - - &.half { - height: 128px; - background-size: 128px; - } - &.quarter { - height: 64px; - width: 96px; - background-size: 64px; - } - } - &.half { - margin: 16px 32px; - } - &.quarter { - margin: 8px 32px 0 32px; - &::before, - &::after { - width: calc(50% - 48px); - height: 32px; - } - } - } - .cw-block-headline-textbox { - width: calc(100% - 64px); - min-height: 350px; - margin: 0 auto; - border-bottom: solid 4px; - @each $name, $hex in $border-colors { - &.border-#{""+$name} { - border-color: $hex; - } - } - .cw-block-headline-title { - h1 { - border: none; - font-size: 5em; - text-align: center; - } - } - - .cw-block-headline-subtitle { - h2 { - border: none; - font-size: 18px; - text-align: center; - margin: 22px 64px; - } - } - - &.half { - min-height: 0px; - margin-bottom: 32px; - .cw-block-headline-title { - h1 { - font-size: 4em; - } - } - - .cw-block-headline-subtitle { - h2 { - font-size: 1em; - margin: 1em 64px; - } - } - } - &.quarter { - min-height: 0; - margin-bottom: 0; - border: none; - .cw-block-headline-title { - h1 { - font-size: 2em; - } - } - - .cw-block-headline-subtitle { - h2 { - font-size: 1em; - margin: 8px 64px; - } - } - } - } - } - } -} -.cw-container-colspan-half, -.cw-container-colspan-half-center { - .cw-block-headline { - .cw-block-headline-content { - min-height: 300px; - - &.half { - min-height: 150px; - } - &.heavy { - h1 { - font-size: 4.5em; - } - h2 { - font-size: 1.25em; - } - } - &.bigicon_top { - .icon-layer { - background-position: center; - height: 98px; - margin-top: 2em; - margin-bottom: 1em; - - @each $icon in $icons { - &.icon-black-#{$icon} { - @include background-icon($icon, info, 98); - } - &.icon-white-#{$icon} { - @include background-icon($icon, info-alt, 98); - } - &.icon-studip-blue-#{$icon} { - @include background-icon($icon, clickable, 98); - } - &.icon-studip-red-#{$icon} { - @include background-icon($icon, status-red, 98); - } - &.icon-studip-yellow-#{$icon} { - @include background-icon($icon, status-yellow, 98); - } - &.icon-studip-green-#{$icon} { - @include background-icon($icon, status-green, 98); - } - &.icon-studip-gray-#{$icon} { - @include background-icon($icon, inactive, 98); - } - }; - - &.half { - background-size: 72px; - height: 72px; - background-position: center; - } - } - - - .cw-block-headline-textbox { - max-width: 80%; - margin: 0 auto; - padding-bottom: 1em; - .cw-block-headline-title { - h1 { - font-size: 2em; - } - } - - .cw-block-headline-subtitle { - h2 { - font-size: 12px; - } - } - } - } - &.bigicon_before { - min-height: 300px; - .icon-layer { - min-height: 92px; - min-width: 92px; - background-position: 0 center; - @each $icon in $icons { - &.icon-black-#{$icon} { - @include background-icon($icon, info, 92); - } - &.icon-white-#{$icon} { - @include background-icon($icon, info-alt, 92); - } - &.icon-studip-blue-#{$icon} { - @include background-icon($icon, clickable, 92); - } - &.icon-studip-red-#{$icon} { - @include background-icon($icon, status-red, 92); - } - &.icon-studip-yellow-#{$icon} { - @include background-icon($icon, status-yellow, 92); - } - &.icon-studip-green-#{$icon} { - @include background-icon($icon, status-green, 92); - } - &.icon-studip-gray-#{$icon} { - @include background-icon($icon, inactive, 92); - } - }; - } - - .cw-block-headline-textbox { - .cw-block-headline-title { - h1 { - font-size: 2.5em; - } - } - } - - &.half { - min-height: 150px; - } - } - - &.ribbon { - min-height: 300px; - - &.half { - min-height: 150px; - } - - .cw-block-headline-textbox { - margin: 3em 0; - - .cw-block-headline-title { - h1 { - font-size: 2.5em; - } - } - .cw-block-headline-subtitle { - h2 { - font-size: 12px; - } - } - } - } - } - } -} - -.responsive-display { - .cw-block-headline { - .cw-block-headline-content { - background-size: 100%; - &.bigicon_before { - .icon-layer { - background-size: 144px; - } - .cw-block-headline-textbox .cw-block-headline-title h1 { - font-size: 4em; - } - } - &.skew_text { - min-height: 300px; - .cw-block-headline-textbox { - font-size: 4em; - letter-spacing: -4px; - } - } - } - } -} - -/* -headline block end -*/ - -/* -toc block -*/ -.cw-block-table-of-contents { - .cw-block-content { - overflow: unset; - } -} - -.cw-block-table-of-contents-list { - padding: 0; - list-style: none; - border: solid thin var(--content-color-40); - li { - &:not(:last-child) { - border-bottom: solid thin var(--dark-gray-color-30); - } - a { - display: block; - padding: 1em; - } - &:hover { - background-color: fade-out($dark-gray-color-75, 0.8); - } - } -} - -.cw-block-table-of-contents-list-details { - padding: 0; - list-style: none; - border: solid thin var(--content-color-40); - li { - &:not(:last-child) { - border-bottom: solid thin var(--dark-gray-color-30); - } - - &:hover { - background-color: fade-out($dark-gray-color-75, 0.8); - } - a { - display: block; - padding: 1em; - } - } -} - -.cw-block-table-of-contents-title-box { - min-height: 3em; - padding-left: 1em; - border-left-width: 10px; - border-left-style: solid; - - @each $name, $color in $tile-colors { - &.#{"" + $name} { - border-color: $color; - } - }; - - p, p:hover { - color: var(--black); - } -} - -.cw-container-colspan-half { - .cw-block-table-of-contents-tiles.cw-tiles { - .tile { - width: 267px; - } - } -} - -/* -toc block end -*/ - -/* -text block -*/ -.cw-block-text { - .cktoolbar { - width: 100% !important; - max-width: 100% !important; - position: relative !important; - top: 0 !important; - } - .cke { - width: 100% !important; - } - .ckplaceholder { - height: 0 !important; - } -} -/* -text block end -*/ - -/* * * * * * * * - t i m e l i n e -* * * * * * * */ -// Mixins and Placeholders -%clearfix { - &:after, &:before { - content: ''; - display: block; - width: 100%; - clear: both; - } -} - -// Timeline -.cw-timeline { - list-style: none; - width: 100%; - margin: 30px auto; - position: relative; - padding: 0; - transition: all 0.4s ease; - - &:before { - content:""; - width: 3px; - height: 100%; - background: var(--content-color-40); - left: 50%; - top: 0; - position: absolute; - } - - &:after { - content: ""; - clear: both; - display: table; - width: 100%; - } - - .cw-timeline-item { - margin-bottom: 50px; - position: relative; - @extend %clearfix; - - .cw-timeline-item-icon { - background: var(--white); - width: 50px; - height: 50px; - position: absolute; - top: 0; - left: 50%; - overflow: hidden; - margin-left: -25px; - @each $name, $color in $tile-colors { - &.cw-timeline-item-icon-color-#{"" + $name} { - border: solid 2px $color; - } - } - - border-radius: 50%; - - img { - position: relative; - top: 9px; - left: 9px; - - &.charcoal { - filter: brightness(0) saturate(100%) invert(22%) sepia(29%) saturate(364%) hue-rotate(168deg) brightness(87%) contrast(79%); - } - &.royal-purple { - filter: brightness(0) saturate(100%) invert(35%) sepia(43%) saturate(658%) hue-rotate(234deg) brightness(100%) contrast(87%); - } - &.iguana-green { - filter: brightness(0) saturate(100%) invert(74%) sepia(9%) saturate(1885%) hue-rotate(76deg) brightness(86%) contrast(88%); - } - &.queen-blue { - filter: brightness(0) saturate(100%) invert(44%) sepia(10%) saturate(2086%) hue-rotate(178deg) brightness(88%) contrast(80%); - } - &.verdigris { - filter: brightness(0) saturate(100%) invert(64%) sepia(11%) saturate(4959%) hue-rotate(131deg) brightness(103%) contrast(49%); - } - &.mulberry { - filter: brightness(0) saturate(100%) invert(49%) sepia(16%) saturate(1665%) hue-rotate(271deg) brightness(88%) contrast(95%); - } - &.pumpkin { - filter: brightness(0) saturate(100%) invert(38%) sepia(86%) saturate(1993%) hue-rotate(13deg) brightness(104%) contrast(108%); - } - &.sunglow { - filter: brightness(0) saturate(100%) invert(93%) sepia(69%) saturate(6824%) hue-rotate(313deg) brightness(102%) contrast(100%); - } - &.apple-green { - filter: brightness(0) saturate(100%) invert(69%) sepia(5%) saturate(5203%) hue-rotate(42deg) brightness(100%) contrast(84%); - } - &.studip-blue { - filter: brightness(0) saturate(100%) invert(26%) sepia(19%) saturate(1783%) hue-rotate(177deg) brightness(96%) contrast(93%); - } - &.studip-lightblue { - filter: brightness(0) saturate(100%) invert(91%) sepia(12%) saturate(190%) hue-rotate(190deg) brightness(104%) contrast(89%); - } - &.studip-red { - filter: brightness(0) saturate(100%) invert(8%) sepia(95%) saturate(6904%) hue-rotate(1deg) brightness(95%) contrast(109%); - } - &.studip-green { - filter: brightness(0) saturate(100%) invert(27%) sepia(85%) saturate(1531%) hue-rotate(109deg) brightness(95%) contrast(101%); - } - &.studip-yellow { - filter: brightness(0) saturate(100%) invert(94%) sepia(14%) saturate(7314%) hue-rotate(330deg) brightness(103%) contrast(101%); - } - &.studip-gray { - filter: brightness(0) saturate(100%) invert(46%) sepia(1%) saturate(2621%) hue-rotate(169deg) brightness(87%) contrast(87%); - } - } - } - - .cw-timeline-item-content { - width: 40%; - background: var(--white); - padding: 20px; - transition: all var(--transition-duration) ease; - - h3 { - padding: 15px; - color: var(--white); - margin: -20px -20px 0 -20px; - font-weight: 700; - min-height: 1.1em; - } - - article { - min-height: 2em; - border: solid thin var(--content-color-20); - border-top: none; - margin: 0 -20px; - padding: 15px; - - header { - font-weight: 700; - font-size: 1.1em; - margin: 0.5em 0; - } - } - - &:before { - content: ''; - position: absolute; - left: calc(40% + 40px); - top: 18px; - width: 0; - height: 0; - border-top: 7px solid transparent; - border-bottom: 7px solid transparent; - } - &.left { - h3 { - text-align: right; - } - } - &.right { - float: right; - - h3 { - text-align: left; - } - - &:before { - content: ''; - right: calc(40% + 40px); - left: inherit; - border-left: 0; - } - } - - @each $name, $color in $tile-colors { - &.cw-timeline-item-content-color-#{"" + $name} { - border-color: var(--color); - h3 { - background-color: var(--color); - } - &.left { - &:before { - border-left: 7px solid var(--color); - } - } - &.right { - &:before { - border-right: 7px solid var(--color); - } - } - } - } - } - } -} -@mixin oneSidedTimeline() { - .cw-timeline { - &:before { - left: 25px; - } - .cw-timeline-item { - .cw-timeline-item-icon { - left: 25px; - } - .cw-timeline-item-content { - width: stretch; - margin-left: 70px; - &.left { - float: unset; - - h3 { - text-align: left; - } - - &:before { - content: ''; - right: calc(100% - 70px); - left: inherit; - border-left: 0; - } - } - &.right { - float: unset; - &:before { - right: calc(100% - 70px); - } - } - - @each $name, $color in $tile-colors { - &.cw-timeline-item-content-color-#{"" + $name} { - &.left { - &:before { - border-right: 7px solid $color; - border-left: none; - } - } - } - } - } - } - } -} -.cw-container-colspan-half { - @include oneSidedTimeline(); -} - -@media only screen and (max-width: 1070px) { - @include oneSidedTimeline(); -} -/* * * * * * * * * * * * - t i m e l i n e e n d -* * * * * * * * * * * */ - -/* -cw tiles -*/ - -.cw-tiles { - list-style: none; - display: flex; - flex-wrap: wrap; - padding-left: 0; - row-gap: 5px; - column-gap: 5px; -} -.cw-tiles .tile, -.cw-tile { - height: 420px; - width: 270px; - margin: 0; - background-color: var(--base-color); - &:last-child { - margin-right: 0; - } - - @each $name, $color in $tile-colors { - &.#{"" + $name} { - background-color: $color; - } - }; - - .preview-image { - height: 180px; - width: 100%; - background-size: 100% auto; - background-repeat: no-repeat; - background-color: var(--content-color-20); - background-position: center; - &.default-image { - @include background-icon(courseware, clickable, 128); - } - - .overlay-text { - padding: 6px 7px; - margin: 4px; - background-color: rgba(255,255,255,0.8); - width: fit-content; - max-width: 100%; - height: 1.25em; - overflow: hidden; - text-overflow: ellipsis; - float: right; - text-align: right; - } - - .overlay-action-menu { - padding: 0; - margin: 0.25em; - background-color: rgba(255,255,255,0.8); - width: fit-content; - max-width: 100%; - overflow: hidden; - float: right; - text-align: right; - .action-menu { - margin: 5px; - } - } - } - - .description { - height: 220px; - padding: 14px; - color: var(--white); - position: relative; - display: block; - - header { - font-size: 20px; - line-height: 22px; - color: var(--white); - border: none; - width: 240px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - background-repeat: no-repeat; - background-position: 0 0; - - @each $type, $icon in $element-icons { - &.description-icon-#{$type} { - width: 212px; - padding-left: 28px; - @include background-icon(#{$icon}, info_alt, 22); - } - } - } - - .progress-wrapper { - width: 100%; - padding: 1em 0; - border: none; - background: none; - - progress { - appearance: none; - display: block; - width: 100%; - height: 3px; - margin: 0; - border: none; - background: rgba(0,0,0,0.3); - &::-webkit-progress-bar { - background: rgba(0,0,0,0.3); - } - &::-webkit-progress-value { - background: white; - } - &::-moz-progress-bar { - background: white; - } - } - } - - .description-text-wrapper { - overflow: hidden; - height: 10em; - margin-top: 0.5em; - display: -webkit-box; - margin-bottom: 1em; - -webkit-line-clamp: 7; - -webkit-box-orient: vertical; - p { - text-align: left; - } - } - - footer { - width: 242px; - text-align: right; - color: var(--white); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - img { - vertical-align: text-bottom; - } - } - } - - a[href].description { - transition: unset; - } - - a.description, - a.description:link, - a.description:visited, - a.description:hover { - height: 210px; - color: var(--white); - text-decoration: unset; - } -} -/* -cw tiles end -*/ - -/* courseware template preview */ -.cw-template-preview { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - width: calc(100% - 20px);; - padding: 10px; - .cw-template-preview-container-wrapper { - margin-bottom: 10px; - - &.cw-template-preview-container-full { - width: 100% - } - &.cw-template-preview-container-half { - width: calc(50% - 4px); - } - &.cw-template-preview-container-half-center { - width: 100%; - .cw-template-preview-container-content { - width: 50%; - margin: auto; - } - } - - .cw-template-preview-container-content { - border: solid thin var(--content-color-40); - } - - .cw-template-preview-container-title { - font-weight: 700; - padding: 4px 4px 4px 8px; - color: var(--base-color); - background-color: var(--content-color-20); - } - - .cw-template-preview-blocks { - border: solid thin var(--content-color-40); - padding: 1em; - margin: 5px; - background-color: var(--white); - - } - } -} -/* courseware template preview end*/ - -/* * * * * * * * * * - i n p u t f i l e -* * * * * * * * * */ - .cw-file-input { - width: stretch; - border: solid thin var(--base-color); - font-size: 14px; - cursor: pointer; - - &::file-selector-button { - font-family: inherit; - border: none; - border-right: solid thin var(--base-color); - background-color: var(--white); - padding: 6px 15px; - margin-right: 10px; - color: var(--base-color); - - &:hover { - background-color: var(--base-color); - color: var(--white); - } - } - } - .cw-file-input-change { - border: solid thin var(--base-color); - - button.button { - padding: 0.5em 1.5em; - margin: 0 0 0 -1px; - line-height: 100%; - border: none; - border-right: solid thin var(--base-color); - } - span { - padding: 0.5em 1.5em 0.5em 0.5em; - } - } - /* * * * * * * * * * * * * - i n p u t f i l e e n d -* * * * * * * * * * * * * */ - -/* * * * * * * * * * * * -p u b l i c l i n k s -* * * * * * * * * * * */ -.cw-public-link-clipboard-button { - width: 16px; - height: 16px; - margin-left: 0.5em; - background-color: transparent; - border: none; - vertical-align: text-bottom; - @include background-icon(clipboard, clickable, 16); - cursor: pointer; - -} -/* * * * * * * * * * * * * * * -e n d p u b l i c l i n k s -* * * * * * * * * * * * * * */ - -/* * * * * * * * * * * * -a s s i s t i v e -* * * * * * * * * * * */ -.assistive-text { - position: absolute; - margin: -1px; - border: 0; - padding: 0; - width: 1px; - height: 1px; - overflow: hidden; - clip: rect(0 0 0 0); - } -/* * * * * * * * * * * * * * * -e n d a s s i s t i v e -* * * * * * * * * * * * * * */ - -/* * * * * * * * * * * * * * * -w i z a r d e l e m e n t s -* * * * * * * * * * * * * * */ -.cw-element-selector-list { - list-style: none; - padding: 0; - - .cw-element-selector-item { - display: block; - width: 100%; - border: solid thin var(--content-color-40); - padding: 0.5em; - margin-bottom: 5px; - background-color: var(--white); - color: var(--base-color); - text-align: left; - cursor: pointer; - - &:hover { - color: var(--white); - background-color: var(--base-color); - } - } -} -form.default .courseware-structural-element-selector { - list-style: none; - padding-left: 0; - .courseware-structural-element-selector-item { - .radiobutton { - background: none; - border: none; - padding: 0; - } - a label { - cursor: pointer; - } - label { - display: inline-block; - margin-bottom: 0; - text-indent: 0; - vertical-align: middle; - } - img { - vertical-align: middle; - &.inactive { - opacity: 0.5; - } - } - ul { - list-style: none; - padding-left: 18px; - } - } -} -/* * * * * * * * * * * * * * * * * * -w i z a r d e l e m e n t s e n d -* * * * * * * * * * * * * * * * * */ - - -/* * * * * * * * * * * * * * * -s h e l f i t e m s -* * * * * * * * * * * * * * */ -.cw-unit-items, -.cw-shared-items { - margin-bottom: 10px; - h2 { - margin-top: 0; - } -} -/* * * * * * * * * * * * * * * * * * -s h e l f i t e m s e n d -* * * * * * * * * * * * * * * * * */ - -/* * * * * * * * * -r a d i o s e t -* * * * * * * * */ - -.cw-radioset { - display: flex; - flex-direction: row; - justify-content: center; - margin-bottom: 1em; - .cw-radioset-box { - width: 128px; - height: 128px; - text-align: center; - margin-right: 16px; - border: solid thin var(--content-color-40); - &.selected { - border-color: var(--base-color); - background-color: var(--content-color-20); - } - &:last-child { - margin-right: 0; - } - label { - height: 100%; - width: 100%; - margin: 0; - cursor: pointer; - .label-icon { - background-position: center 8px; - background-repeat: no-repeat; - height: 64px; - padding: 8px; - &.accordion { - @include background-icon(block-accordion, clickable, 64); - } - &.list { - @include background-icon(view-list, clickable, 64); - } - &.tabs { - @include background-icon(block-tabs, clickable, 64); - } - &.full { - @include background-icon(column-full, clickable, 64); - } - &.half { - @include background-icon(column-half, clickable, 64); - } - &.half-center { - @include background-icon(column-half-centered, clickable, 64); - } - } - - } - input[type=radio] { - position: absolute; - opacity: 0; - width: 0; - - &:focus + label { - outline-color: Highlight; - outline-color: -webkit-focus-ring-color; - outline-style: auto; - outline-width: 1px; - } - } - } -} - -/* * * * * * * * * * * * -r a d i o s e t e n d -* * * * * * * * * * * */ -/* * * * * * * * * * * * * * * * -c o m m e n t s o v e r v i e w -* * * * * * * * * * * * * * * */ - -.cw-comments-overview-dialog-comments-context { - margin: 0 0 1.5em 0; -} - -/* * * * * * * * * * * * * * * * * * * * -c o m m e n t s o v e r v i e w e n d -* * * * * * * * * * * * * * * * * * * */ - -#course-courseware-index, -#contents-courseware-index, -#course-courseware-courseware, -#contents-courseware-courseware { - form.default input[type=date] { - max-width: 9em; - } -} +@import './courseware/variables.scss'; + +@import './courseware/a11y.scss'; +@import './courseware/blockadder.scss'; +@import './courseware/comments.scss'; +@import './courseware/content-courses.scss'; +@import './courseware/dashboard.scss'; +@import './courseware/sortable.scss'; +@import './courseware/widgets.scss'; +@import './courseware/wizards.scss'; + +@import './courseware/shelf.scss'; +@import './courseware/structural-element.scss'; +@import './courseware/containers/default-container.scss'; +@import './courseware/blocks/default-block.scss'; + +@import './courseware/layouts/collapsible.scss'; +@import './courseware/layouts/companion.scss'; +@import './courseware/layouts/import-zip.scss'; +@import './courseware/layouts/input-file.scss'; +@import './courseware/layouts/progress.scss'; +@import './courseware/layouts/ribbon.scss'; +@import './courseware/layouts/tabs.scss'; +@import './courseware/layouts/talk-bubble.scss'; +@import './courseware/layouts/tile.scss'; +@import './courseware/layouts/tree.scss'; \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/a11y.scss b/resources/assets/stylesheets/scss/courseware/a11y.scss new file mode 100644 index 0000000..b887e74 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/a11y.scss @@ -0,0 +1,10 @@ +.assistive-text { + position: absolute; + margin: -1px; + border: 0; + padding: 0; + width: 1px; + height: 1px; + overflow: hidden; + clip: rect(0 0 0 0); +} diff --git a/resources/assets/stylesheets/scss/courseware/blockadder.scss b/resources/assets/stylesheets/scss/courseware/blockadder.scss new file mode 100644 index 0000000..12a43a9 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blockadder.scss @@ -0,0 +1,319 @@ +.cw-tools-element-adder-tabs { + .cw-tabs-nav { + margin-top: 4px; + border: none; + border-bottom: solid thin var(--content-color-40); + + button { + max-width: unset; + padding: 1em 1.5em 4px 1.5em; + margin: 0px 2em; + } + } + .cw-tabs-content { + border: none; + overflow-x: hidden; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--base-color) var(--dark-gray-color-5); + + .input-group.files-search { + &.search { + border: thin solid var(--dark-gray-color-30); + margin-bottom: 0px; + input { + border: none; + } + } + + .input-group-append { + .button { + border: none; + border-left: thin solid var(--dark-gray-color-30); + &.active { + background-color: var(--base-color); + } + } + .reset-search { + border: none; + background-color: var(--white); + } + } + + .active-filter { + display: flex; + align-items: center; + justify-content: space-between; + border: solid thin var(--black); + background-color: var(--content-color-10); + margin: 3px; + padding: 2px 3px; + + .removefilter { + border: none; + background-color: transparent; + } + } + } + + .cw-block-search { + width: inherit; + } + + .filterpanel { + margin-bottom: 5px; + padding: 2px; + border: thin solid var(--dark-gray-color-30); + border-top: none; + background-color: var(--white); + + .button { + min-width: inherit; + margin: 4px 2px; + + &.button-active { + background-color: var(--base-color); + color: var(--white); + } + } + } + } + + .cw-collapsible { + .cw-collapsible-content { + display: none; + &.cw-collapsible-content-open { + display: block; + } + } + } +} + +.cw-element-adder-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +.cw-blockadder-item-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + grid-auto-rows: auto; + grid-gap: 4px; + + .cw-blockadder-item-wrapper { + display: flex; + border: solid thin var(--content-color-40); + max-width: 254px; + + &:hover { + border-color: var(--base-color); + } + .cw-blockadder-item { + padding: 64px 10px 4px 10px; + @include background-icon(unit-test, clickable, 48); + background-position: 10px 10px; + background-repeat: no-repeat; + cursor: pointer; + + @each $item, $icon in $blockadder-items { + &.cw-blockadder-item-#{$item} { + @include background-icon($icon, clickable, 48); + } + } + .cw-clipboard-item-title, + .cw-blockadder-item-title { + display: inline-block; + font-weight: 600; + margin-bottom: 2px; + } + .cw-blockadder-item-description { + display: inline-block; + margin: 0 0 4px; + } + } + .cw-blockadder-item-fav { + height: 32px; + padding: 8px; + background-color: transparent; + border: none; + cursor: pointer; + } + } +} + +.cw-block-adder-area { + background-color: var(--white); + border: solid thin var(--content-color-40); + padding: 1em 0; + color: var(--base-color); + text-align: center; + width: 100%; + font-weight: 600; + cursor: pointer; + + &:hover { + border-color: var(--base-color); + } + + &.cw-block-adder-active { + border: solid thin var(--base-color); + background-color: var(--base-color); + color: var(--white); + } + + img { + vertical-align: text-bottom; + } +} +.cw-block-helper-buttons { + display: inline-block; + width: 100%; + + .cw-block-helper-reset { + float: right; + } + + .button.cw-block-helper-reset::before { + content: ''; + @include background-icon(refresh); + background-repeat: no-repeat; + float: left; + height: 16px; + width: 16px; + margin: 1px 5px 0 -8px; + } +} + +.cw-block-helper-results { + margin-top: 5px; +} + +.cw-containeradder-item { + margin-bottom: 4px; + padding: 1em 1em 1em 6em; + @include background-icon(unit-test, clickable, 48); + background-position: 12px center; + background-repeat: no-repeat; + border: solid thin var(--content-color-40); + cursor: pointer; + + &:hover { + border-color: var(--base-color); + } + + @each $item, $icon in $containeradder-items { + &.cw-containeradder-item-#{$item} { + @include background-icon($icon, clickable, 48); + } + } + + .cw-containeradder-item-title { + font-weight: 600; + } +} + +.cw-container-style-selector { + display: flex; + margin-bottom: 8px; + + label { + border: solid thin var(--content-color-40); + padding: calc(0.5em + 32px) 1em 0.5em 1em; + color: var(--base-color); + text-align: center; + width: 33%; + background-position: center 0.5em; + background-repeat: no-repeat; + cursor: pointer; + + &.full { + @include background-icon(column-full, clickable, 32); + } + &.half { + @include background-icon(column-half, clickable, 32); + } + &.half-center { + @include background-icon(column-half-centered, clickable, 32); + } + &:hover { + color: var(--active-color); + } + &:not(:first-child) { + border-left: solid thin transparent; + } + &.cw-container-style-selector-active { + background-color: var(--content-color-20); + border: solid thin var(--base-color); + } + + } + input[type=radio] { + position: absolute; + opacity: 0; + width: 0; + + &:focus + label { + outline-color: Highlight; + outline-color: -webkit-focus-ring-color; + outline-style: auto; + outline-width: 1px; + } + } +} +.cw-element-inserter-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + + +.cw-clipboard-item-wrapper { + display: flex; + width: calc(50% - 4px); + border: solid thin var(--content-color-40); + margin-bottom: 4px; + + &:hover { + border-color: var(--base-color); + } + + .cw-clipboard-item { + width: 207px; + padding: 64px 10px 4px 10px; + @include background-icon(unit-test, clickable, 48); + background-position: 10px 10px; + background-repeat: no-repeat; + cursor: pointer; + background-color: var(--white); + border: none; + text-align: left; + color: var(--base-color); + + @each $item, $icon in $blockadder-items { + &.cw-clipboard-item-#{$item} { + @include background-icon($icon, clickable, 48); + } + } + @each $item, $icon in $containeradder-items { + &.cw-clipboard-item-#{$item} { + @include background-icon($icon, clickable, 48); + } + } + + .cw-clipboard-item-title { + display: inline-block; + font-weight: 600; + margin-bottom: 2px; + } + + } + .cw-clipboard-item-action-menu-wrapper { + padding: 8px; + } +} +.action-menu.is-open, +.action-menu-wrapper.is-open { + &.cw-clipboard-item-action-menu { + z-index: 42; + } +} \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/blocks/audio.scss b/resources/assets/stylesheets/scss/courseware/blocks/audio.scss new file mode 100644 index 0000000..c5c530e --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/audio.scss @@ -0,0 +1,231 @@ +@use '../../../mixins.scss' as *; + +$media-buttons: ( + play: play, + stop: stop, + pause: pause, + prev: arr_eol-left, + next: arr_eol-right +); + +.cw-block-audio { + .cw-audio-container { + border: solid thin var(--content-color-40); + padding-top: 1em; + } + .cw-audio-controls { + text-align: right; + padding: 0 0.5em; + } + .cw-audio-range { + margin: 0 5px 10px 0; + &::-moz-focus-outer { + border: 0; + } + &.ui-widget-content { + background-color: var(--base-color); + } + .ui-widget-header { + background-color: var(--dark-gray-color-5); + } + .ui-slider-handle { + border-radius: 20px; + width: 1em; + height: 1.7em; + top: -0.5em; + background-color: var(--dark-gray-color-20); + border-color: var(--content-color-40); + cursor: pointer; + margin-left: -2px; + } + } + .cw-audio-button { + border: solid thin var(--content-color-40); + background-color: var(--white); + background-repeat: no-repeat; + background-position: center center; + background-size: 24px; + min-height: 27px; + line-height: 130%; + padding: 5px 15px 5px 30px; + cursor: pointer; + font-size: 14px; + box-sizing: border-box; + text-align: center; + text-decoration: none; + vertical-align: bottom; + white-space: nowrap; + min-width: unset; + margin: 5px; + height: 46px; + width: 46px; + display: inline-block; + + &:hover { + background-color: var(--base-color); + } + + @each $button, $icon in $media-buttons { + &.cw-audio-#{$button}button { + @include background-icon($icon, clickable, 24); + &:hover { + @include background-icon($icon, info-alt, 24); + } + } + } + } + + .cw-audio-time { + position: relative; + top: -1em; + color: var(--base-gray); + } + + .cw-audio-range { + display: block; + margin: 0 auto 1.5em; + -webkit-appearance: none; + position: relative; + overflow: hidden; + height: 18px; + width: 100%; + cursor: pointer; + border-radius: 0; + } + + .cw-audio-range::-webkit-slider-runnable-track { + background: var(--dark-gray-color-20); + } + + .cw-audio-range::-webkit-slider-thumb { + -webkit-appearance: none; + width: 9px; /* 1 */ + height: 18px; + background: var(--white); + box-shadow: -100vw 0 0 100vw var(--base-color); + border: solid thin var(--content-color-40); + } + + .cw-audio-range::-moz-range-track { + height: 18px; + background: var(--dark-gray-color-10); + } + + .cw-audio-range::-moz-range-thumb { + background: var(--white); + height: 18px; + width: 9px; + border: solid thin var(--content-color-40); + border-radius: 0 !important; + box-shadow: -100vw 0 0 100vw var(--base-color); + box-sizing: border-box; + } + + .cw-audio-range::-ms-fill-lower { + background: var(--base-color); + } + + .cw-audio-range::-ms-thumb { + background: var(--white); + border: solid thin var(--content-color-40); + height: 18px; + width: 9px; + box-sizing: border-box; + } + + .cw-audio-range::-ms-ticks-after { + display: none; + } + + .cw-audio-range::-ms-ticks-before { + display: none; + } + + .cw-audio-range::-ms-track { + background: var(--dark-gray-color-20); + color: transparent; + height: 18px; + border: none; + } + + .cw-audio-range::-ms-tooltip { + display: none; + } + .cw-audio-playlist-wrapper { + margin-top: -1em; + padding-top: 1em; + border: solid thin var(--content-color-40); + border-top: none; + + &.empty { + border: none; + } + + .cw-audio-playlist { + padding-left: 0; + list-style: none; + cursor: pointer; + + &.with-recorder { + border-bottom: solid thin var(--content-color-40); + } + + li { + margin: 0 1em; + &:not(:last-child) { + border-bottom: solid thin var(--dark-gray-color-30); + } + + .cw-playlist-item { + display: block; + @include background-icon(file-audio2, clickable, 24); + background-repeat: no-repeat; + background-position: 1em center; + + margin: 1em 0; + padding: 1em; + padding-left: 4em; + color: var(--base-color); + &:hover { + color: var(--active-color); + } + &.current-item { + @include background-icon(play, clickable, 24); + font-weight: 700; + &.is-playing { + @include background-icon(pause, clickable, 24); + } + } + } + } + } + .cw-audio-playlist-recorder { + padding: 1em; + } + } + + .cw-audio-current-track { + @include background-icon(file-audio2, info, 96); + background-position: top center; + background-repeat: no-repeat; + width: 100%; + min-height: 140px; + margin: 1em 0 2em 0; + p { + text-align: center; + padding-top: 106px; + } + } + .cw-audio-empty { + @include background-icon(file, info, 96); + border: solid thin var(--content-color-40); + background-position: center 1em; + background-repeat: no-repeat; + min-height: 140px; + padding: 1em; + p { + text-align: center; + padding-top: 106px; + } + } +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/biography.scss b/resources/assets/stylesheets/scss/courseware/blocks/biography.scss new file mode 100644 index 0000000..a40239b --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/biography.scss @@ -0,0 +1,82 @@ +@use '../../../mixins.scss' as *; + +$achievement-types: ( + certificate: file-text, + accreditation: vcard, + award: medal, + book: literature, + publication: news, + membership: group3, +); + +$goals-types: ( + personal: person2, + school: doctoral-cap, + academic: doctoral-cap, + professional: tools, +); + +.cw-block-biography { + .cw-block-biography-content { + display: flex; + min-height: 200px; + flex-direction: row; + padding: 2em 2em 2em 1em; + border: 2px solid var(--base-color); + + .cw-block-biography-type { + margin: auto 1em auto 0; + padding-top: 96px; + min-width: 192px; + max-width: 192px; + text-align: center; + background-repeat: no-repeat; + background-position: center top; + } + + .cw-block-biography-details { + h2, h3 { + margin-top: 0; + } + } + + } +} + +.cw-block-biography-achievements { + @each $type, $icon in $achievement-types { + .cw-block-biography-achievements-type-#{$type} { + @include background-icon($icon, clickable, 96); + } + } +} + +.cw-block-biography-goals { + @each $type, $icon in $goals-types { + .cw-block-biography-goals-type-#{$type} { + @include background-icon($icon, clickable, 96); + } + } +} + +.cw-block-biography-personal-information { + .cw-block-biography-content { + min-height: 140px; + + .cw-block-biography-personal-information-type { + @include background-icon(person2, clickable, 96); + } + + .cw-block-biography-personal-information-details { + display: grid; + max-height: 7em; + grid-template-columns: max-content 1fr; + grid-gap: 5px 10px; + + .preface { + grid-column-start: 1; + grid-column-end: 3; + } + } + } +} \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/blocks/canvas.scss b/resources/assets/stylesheets/scss/courseware/blocks/canvas.scss new file mode 100644 index 0000000..acfd935 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/canvas.scss @@ -0,0 +1,145 @@ +@use '../../../mixins.scss' as *; + +.cw-block-canvas { + .cw-canvasblock-canvas { + max-width: 100%; + border: solid thin var(--content-color-40); + } + + .cw-canvasblock-upload-message { + display: none; + } + + .cw-canvasblock-original-img { + display: none; + } + + .cw-canvasblock-tool-selected-text { + cursor: text; + } + + h1.cw-canvasblock-description { + border-bottom: none; + } + + .cw-canvasblock-toolbar { + border: solid thin var(--content-color-40); + border-bottom: none; + + .cw-canvasblock-buttonset { + display: inline-block; + padding: 5px; + margin-right: 0.5em; + + button { + cursor: pointer; + user-select: none; + border: solid thin var(--content-color-40); + height: 32px; + width: 32px; + background-color: var(--white); + background-position: center; + background-repeat: no-repeat; + background-size: 24px 24px; + + &.cw-canvasblock-color { + $colors: ( + white: var(--white), + blue: #3498db, + green: #2ecc71, + purple: #9b59b6, + red: #e74c3c, + yellow: #fed330, + orange: #f39c12, + grey: #95a5a6, + darkgrey: #34495e, + black: var(--black), + ); + + @each $name, $color in $colors { + &.#{'' + $name} { + background-color: $color; + } + } + + &.selected-color { + border: solid 2px var(--black); + } + } + + &.cw-canvasblock-reset { + @include background-icon(refresh, clickable, 24); + } + + &.cw-canvasblock-size { + @include background-icon(stop, clickable); + + &.cw-canvasblock-size-small { + background-size: 8px 7px; + } + &.cw-canvasblock-size-normal { + background-size: 16px 14px; + } + &.cw-canvasblock-size-large { + background-size: 22px 20px; + } + &.cw-canvasblock-size-huge { + background-size: 26px 24px; + } + &.selected-size { + border: solid 2px var(--black); + } + } + + &.cw-canvasblock-tool { + &.cw-canvasblock-tool-pen { + @include background-icon(comment, clickable); + } + + &.cw-canvasblock-tool-text { + vertical-align: top; + font-size: 22px; + color: var(--base-color); + font-weight: 600; + } + + &.selected-tool { + border: solid 2px var(--black); + } + } + + &.cw-canvasblock-undo { + @include background-icon(arr_2left, clickable, 24); + } + + &.cw-canvasblock-download { + @include background-icon(download, clickable, 24); + } + + &.cw-canvasblock-store { + @include background-icon(upload, clickable, 24); + } + + &.cw-canvasblock-show-all { + @include background-icon(group2, clickable, 24); + + &.selected-view { + border: solid 2px var(--black); + } + } + + &.cw-canvasblock-show-own { + @include background-icon(person, clickable, 24); + + &.selected-view { + border: solid 2px var(--black); + } + } + } + } + } + + .cw-canvasblock-tool-selected-text { + cursor: text; + } +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/code.scss b/resources/assets/stylesheets/scss/courseware/blocks/code.scss new file mode 100644 index 0000000..ac401cf --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/code.scss @@ -0,0 +1,88 @@ +.cw-block-code { + pre { + margin-bottom: 0; + } + + .hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: var(--dark-gray-color-5); + color: black; + border: solid thin var(--content-color-40); + } + + .hljs-comment, + .hljs-quote, + .hljs-variable { + color: var(--dark-green); + } + + .hljs-keyword, + .hljs-selector-tag, + .hljs-selector-class, + .hljs-built_in, + .hljs-name, + .hljs-tag { + color: var(--base-color); + font-weight: 600; + } + + .hljs-string, + .hljs-title, + .hljs-section, + .hljs-attribute, + .hljs-literal, + .hljs-template-tag, + .hljs-template-variable, + .hljs-type, + .hljs-addition { + color: var(--orange-80); + font-weight: 400; + } + + .hljs-deletion, + .hljs-selector-attr, + .hljs-selector-pseudo, + .hljs-meta { + color: var(--petrol); + font-weight: 400; + } + + .hljs-doctag { + color: var(--dark-gray-color-75); + font-weight: 400; + } + + .hljs-attr { + color: var(--active-color); + font-weight: 400; + } + + .hljs-symbol, + .hljs-bullet, + .hljs-link { + color: var(--petrol); + font-weight: 400; + } + + .hljs-emphasis { + font-style: italic; + font-weight: 400; + } + + .hljs-strong { + font-weight: 600; + } + + .code-lang { + background: var(--dark-gray-color-5); + border: solid thin var(--content-color-40); + border-top: none; + padding: 5px 10px; + text-align: right; + color: var(--dark-gray-color-45); + font-family: monospace; + text-transform: full-width; + } +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/confirm.scss b/resources/assets/stylesheets/scss/courseware/blocks/confirm.scss new file mode 100644 index 0000000..0c236fc --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/confirm.scss @@ -0,0 +1,12 @@ +.cw-block-confirm { + .cw-block-confirm-content { + border: solid thin var(--content-color-40); + padding: 1em; + margin: 0; + + input[type='checkbox'] { + margin-right: 2em; + vertical-align: bottom; + } + } +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/date.scss b/resources/assets/stylesheets/scss/courseware/blocks/date.scss new file mode 100644 index 0000000..f2cde08 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/date.scss @@ -0,0 +1,79 @@ +.cw-container-colspan-half, +.cw-container-colspan-half-center { + .cw-block-date { + .cw-block-content { + font-size: 9px; + } + } +} + +.cw-block-date { + .cw-date-countdown, + .cw-date-date { + margin: 0 auto; + width: max-content; + } + + .cw-date-countdown { + .cw-date-countdown-digit { + display: inline-block; + margin-right: 4px; + + .cw-date-countdown-number { + font-size: 6em; + line-height: 1.25em; + height: 1.25em; + padding: 3px 0.5em; + background: rgba(245, 245, 245, 1); + font-weight: 300; + } + + .cw-date-countdown-label-sg, + .cw-date-countdown-label-pl { + padding: 5px; + font-size: 1.25em; + text-align: left; + text-transform: uppercase; + } + } + } + + .cw-date-date { + .cw-date-date-space { + display: inline-block; + width: 2em; + } + + .cw-date-date-digits { + display: inline-block; + + .cw-date-date-number { + font-size: 5em; + line-height: 1.25em; + height: 1.25em; + padding: 0.25em; + background: rgba(245, 245, 245, 1); + font-weight: 300; + } + } + } +} + +.responsive-display { + .cw-block-date { + .cw-block-content { + font-size: 9px; + + .cw-date-countdown-number { + font-size: 3.5em; + } + .cw-date-countdown-label-sg, + .cw-date-countdown-label-pl { + font-size: 1em; + } + .cw-date-date-number { + font-size: 3em; + } + } + } +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss b/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss new file mode 100644 index 0000000..24c5751 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss @@ -0,0 +1,134 @@ +.cw-default-block { + display: flex; + flex-flow: row; + .cw-default-block-invisible-info { + img { + vertical-align: text-bottom; + } + } + +} + +.cw-block-header { + background-color: var(--content-color-20); + padding: 4px 10px 4px 22px; + + .cw-block-header-toggle { + display: inline-block; + width: calc(100% - 50px); + } + + span { + color: var(--base-color); + font-weight: 700; + line-height: 2em; + font-size: 1.1em; + + &.cw-default-block-invisible-info, + &.cw-default-block-blocker-warning { + font-weight: 400; + } + } + + img { + vertical-align: text-bottom; + } + + .cw-block-actions { + position: relative; + float: right; + margin-top: 4px; + .is-open{ + z-index: 30; + } + } +} + +.cw-discuss-wrapper, +.cw-block-features { + header{ + background-color: var(--content-color-20); + color: var(--base-color); + font-weight: 600; + padding: 0.5em; + } + + .cw-block-features-content{ + margin: 1em; + } +} + +.cw-discuss-wrapper { + flex-shrink: 3; + flex-grow: 2; + margin-left: 10px; +} + +.cw-block-edit textarea { + width: -moz-available; + height: -moz-available; + min-height: 8em; + border: solid thin var(--content-color-40); + resize: none; +} + +.cw-block-actions { + padding-left: 14px; +} +.cw-button-box { + float: right; +} + +.cw-content-wrapper { + display: flex; + flex-flow: column; + width: 100%; + .cw-block-content { + overflow: auto; + position: relative; + } +} +.cw-content-wrapper-active { + border: solid thin var(--content-color-40); + .cw-block-content { + padding: $cw-wrapper-gap; + } +} + + +.cw-container-wrapper-discuss { + .cw-container-colspan-full { + .cw-content-wrapper { + max-width: $max-content-width; + } + } + .cw-container-colspan-half, + .cw-container-colspan-half-center { + .cw-content-wrapper { + max-width: 540px; + } + } +} + +.cw-block-title { + padding: 4px; + background-color: var(--content-color-20); + color: var(--base-color); + font-weight: 700; + text-align: center; + border: solid thin var(--content-color-40); + border-bottom: none; +} + +.cw-file-empty { + @include background-icon(file, info, 96); + border: solid thin var(--content-color-40); + background-position: center 1em; + background-repeat: no-repeat; + min-height: 140px; + padding: 1em; + p { + text-align: center; + padding-top: 106px; + } +} \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss b/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss new file mode 100644 index 0000000..e8ba467 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss @@ -0,0 +1,150 @@ +@use '../../../mixins.scss' as *; + +.cw-block-dialog-cards-content { + display: flex; + + .cw-dialogcards { + flex-grow: 2; + + .scene { + margin: 0 auto; + width: 440px; + height: 600px; + perspective: 880px; + display: none; + + &.active { + display: block; + animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; + transform: translate3d(0, 0, 0); + backface-visibility: hidden; + perspective: 1000px; + } + } + + .card { + width: 100%; + height: 78%; + transition: transform 1s; + transform-style: preserve-3d; + cursor: pointer; + position: relative; + top: 11%; + } + + .card.is-flipped { + transform: rotateY(180deg); + } + + .card__face { + position: absolute; + width: 100%; + height: 100%; + color: var(--black); + text-align: center; + font-weight: bold; + font-size: 1.2em; + backface-visibility: hidden; + box-shadow: 0 2px 15px fade-out($black, 0.7); + + img { + max-width: 380px; + max-height: 220px; + margin-top: 1em; + } + + .cw-dialogcards-front-no-image { + @include background-icon(question, navigation, 150); + } + + .cw-dialogcards-back-no-image { + @include background-icon(exclaim, navigation, 150); + } + + .cw-dialogcards-front-no-image, + .cw-dialogcards-back-no-image { + width: 100%; + height: 180px; + margin-top: 2em; + background-repeat: no-repeat; + background-position-x: center; + } + + p { + margin: 1em 3em 1em 4em; + padding-right: 1em; + overflow-y: auto; + max-height: 12em; + text-align: justify; + } + } + + .card__face--front { + @include background-icon(arr_1right, clickable); + background-color: var(--white); + background-repeat: no-repeat; + background-position: 95% 95%; + } + + .card__face--back { + @include background-icon(arr_1left, clickable); + background-color: var(--white); + background-repeat: no-repeat; + background-position: 5% 95%; + transform: rotateY(180deg); + } + } + + .cw-dialogcards-navbutton { + color: transparent; + width: 35px; + height: 35px; + border-radius: 2px; + background-position: 50%; + background-repeat: no-repeat; + background-color: var(--base-color); + border: none; + display: block; + z-index: 4; + margin: auto 2px; + padding: 0; + cursor: pointer; + + &.cw-dialogcards-prev { + @include background-icon(arr_1left, info-alt, 24); + } + + &.cw-dialogcards-next { + @include background-icon(arr_1right, info-alt, 24); + right: 0; + } + + &.cw-dialogcards-prev-disabled, + &.cw-dialogcards-next-disabled { + background-color: var(--light-gray-color-40); + } + } + + @keyframes shake { + 10%, + 90% { + transform: translate3d(-1px, 0, 0); + } + + 20%, + 80% { + transform: translate3d(2px, 0, 0); + } + + 30%, + 50%, + 70% { + transform: translate3d(-4px, 0, 0); + } + + 40%, + 60% { + transform: translate3d(4px, 0, 0); + } + } +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/document.scss b/resources/assets/stylesheets/scss/courseware/blocks/document.scss new file mode 100644 index 0000000..fb230b2 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/document.scss @@ -0,0 +1,176 @@ +.cw-block-document { + .cw-pdf-main-container { + width: calc(100% - 2px); + border: solid thin var(--content-color-40); + + .cw-block-title { + border: none; + border-bottom: solid thin var(--content-color-40); + } + } + .cw-pdf-toolbar { + position: relative; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: baseline; + align-content: space-around; + background-color: var(--content-color-20); + padding: 4px 8px; + + button { + height: 100%; + margin: 0 2px 0 0; + padding: 4px; + + &.active { + background-color: var(--base-color); + } + } + + .cw-pdf-toolbar-left { + position: relative; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: baseline; + align-content: space-between; + width: 33%; + } + + .cw-pdf-toolbar-middle { + position: relative; + display: flex; + justify-content: center; + width: 34%; + + .cw-pdf-zoom-buttons { + margin-right: 8px; + + button { + margin: 0; + padding: 4px 0; + } + } + } + + .cw-pdf-toolbar-right { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: baseline; + align-content: space-between; + position: relative; + width: 33%; + margin-right: 4px; + } + + .cw-pdf-page-nav { + margin: 0 4px; + + button { + margin: 0; + padding: 4px 0; + } + + .cw-pdf-page-num { + text-align: right; + width: 2em; + } + } + + .cw-pdf-search-box { + position: absolute; + top: 33px; + left: 22px; + width: auto; + background-color: var(--content-color-20); + border-top: none; + padding: 6px; + z-index: 2; + line-height: normal; + + .cw-pdf-search-num { + margin: 4px 0 0 0; + display: block; + } + + .cw-pdf-search-navs { + display: inline-block; + + button { + margin: 0; + padding: 0; + } + } + } + } + + .cw-pdf-outer-container { + position: relative; + width: 100%; + + .cw-pdf-content { + display: flex; + flex-direction: row; + + .cw-pdf-sidebar { + width: 25%; + min-width: 270px; + align-self: stretch; + background-color: var(--white); + border-right: solid 1px var(--content-color-40); + + ul.cw-pdf-toc-list, + ul.cw-pdf-toc-sub-list { + padding: 0; + list-style: none; + + li { + padding: 0.5em 1em; + } + } + + ul.cw-pdf-toc-list { + margin-top: 1em; + } + } + + .cw-pdf-viewer-container { + width: 100%; + height: 100%; + overflow: hidden; + cursor: text; + + &.hand-cursor-grab { + cursor: grab; + + &.grabbing { + cursor: grabbing; + } + } + + &.has-error { + display: none; + } + + .page { + position: relative; + margin: 0 auto; + } + } + } + + .cw-pdf-viewer-fake-container { + position: absolute; + } + + .cw-pdf-error-page { + overflow: hidden; + width: calc(100% - 16px); + height: 100%; + padding: 8px; + display: table; + } + } +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/embed.scss b/resources/assets/stylesheets/scss/courseware/blocks/embed.scss new file mode 100644 index 0000000..094afca --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/embed.scss @@ -0,0 +1,15 @@ +.cw-block-embed { + .cw-block-content { + .cw-block-embed-iframe-wrapper { + overflow-y: hidden; + + iframe { + height: 100% !important; + width: 100% !important; + } + } + .cw-block-embed-info { + margin-top: 0.5em; + } + } +} \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/blocks/files.scss b/resources/assets/stylesheets/scss/courseware/blocks/files.scss new file mode 100644 index 0000000..7bc9727 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/files.scss @@ -0,0 +1,192 @@ +@use '../../../mixins.scss' as *; + +// folder block +.cw-block-folder-info { + border: solid thin var(--content-color-40); + padding: 10px 10px 0 10px; + overflow: hidden; + border-bottom: none; +} + +.cw-block-folder-list { + border: solid thin var(--content-color-40); + padding: 0; + list-style: none; + + .cw-block-folder-file-item { + list-style: none; + + &:not(:last-child) { + border-bottom: solid thin var(--content-color-40); + } + + a { + display: block; + } + + &:hover { + background-color: hsla(217, 6%, 45%, 0.2); + } + } + + .cw-block-folder-download-icon { + @include background-icon(download, clickable, 24); + background-repeat: no-repeat; + float: right; + height: 24px; + width: 24px; + margin: 1em; + } +} + +.cw-block-folder-upload { + border: solid thin var(--content-color-40); + padding: 1em 10px; + border-top: none; + + .cw-file-input { + width: calc(100% - 148px); + vertical-align: middle; + } +} + +// for folder and download block +.cw-block-file-info { + @include background-icon(file, clickable, 24); + background-repeat: no-repeat; + display: block; + padding: 16px 16px 16px 40px; + background-position: 10px 16px; + width: calc(100% - 56px); + overflow: hidden; + text-overflow: ellipsis; + + &.cw-block-file-icon-empty { + color: var(--black); + @include background-icon(folder-empty, info, 24); + } + + &.cw-block-file-icon-none { + color: var(--black); + @include background-icon(file, info, 24); + } + + &.cw-block-file-icon-audio { + @include background-icon(file-audio, clickable, 24); + + &.download-disabled { + @include background-icon(file-audio, info, 24); + } + } + + &.cw-block-file-icon-pic { + @include background-icon(file-pic, clickable, 24); + + &.download-disabled { + @include background-icon(file-pic, info, 24); + } + } + + &.cw-block-file-icon-video { + @include background-icon(file-video, clickable, 24); + + &.download-disabled { + @include background-icon(file-video, info, 24); + } + } + + &.cw-block-file-icon-pdf { + @include background-icon(file-pdf, clickable, 24); + + &.download-disabled { + @include background-icon(file-pdf, info, 24); + } + } + + &.cw-block-file-icon-word { + @include background-icon(file-word, clickable, 24); + + &.download-disabled { + @include background-icon(file-word, info, 24); + } + } + + &.cw-block-file-icon-spreadsheet { + @include background-icon(file-excel, clickable, 24); + + &.download-disabled { + @include background-icon(file-excel, info, 24); + } + } + + &.cw-block-file-icon-text { + @include background-icon(file-text, clickable, 24); + + &.download-disabled { + @include background-icon(file-text, info, 24); + } + } + + &.cw-block-file-icon-ppt { + @include background-icon(file-ppt, clickable, 24); + + &.download-disabled { + @include background-icon(file-ppt, info, 24); + } + } + + &.cw-block-file-icon-archive { + @include background-icon(file-archive, clickable, 24); + + &.download-disabled { + @include background-icon(file-archive, info, 24); + } + } + + &.cw-block-file-icon-file { + @include background-icon(file, clickable, 24); + + &.download-disabled { + @include background-icon(file, info, 24); + } + } +} +.cw-block-file-details { + margin-top: -16px; + padding-left: 40px; + padding-bottom: 16px; + color: var(--dark-gray-color); +} +.cw-block-file-owner, +.cw-block-file-mkdate { + display: block; + width: calc(100% - 56px); + overflow: hidden; + text-overflow: ellipsis; +} + +// download block +.cw-block-download { + .cw-block-download-content { + border: solid thin var(--content-color-40); + + .cw-block-download-file-item { + a { + display: block; + } + + &:hover { + background-color: fade-out($dark-gray-color-75, 0.8); + } + + .cw-block-download-download-icon { + @include background-icon(download, clickable, 24); + background-repeat: no-repeat; + float: right; + height: 24px; + width: 24px; + margin: 1em; + } + } + } +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/gallery.scss b/resources/assets/stylesheets/scss/courseware/blocks/gallery.scss new file mode 100644 index 0000000..9e1cfb4 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/gallery.scss @@ -0,0 +1,160 @@ +@use '../../../mixins.scss' as *; + +.cw-block-gallery { + .cw-block-content { + overflow: hidden; + } +} + +.cw-block-gallery-content { + position: relative; + margin: auto; +} + +.cw-block-gallery-slides { + display: none; + + img { + display: block; + max-width: 100%; + margin-left: auto; + margin-right: auto; + } +} + +.cw-block-gallery-prev, +.cw-block-gallery-next { + cursor: pointer; + position: absolute; + background-color: fade-out($white, 0.6); + top: 50%; + height: 36px; + width: 36px; + background-repeat: no-repeat; + background-position: center; + margin-top: -22px; + transition: 200ms ease; + user-select: none; + border: none; + + &:hover { + background-color: var(--base-color); + } +} + +.cw-block-gallery-prev { + @include background-icon(arr_1left, clickable, 24); + + &:hover { + @include background-icon(arr_1left, info-alt, 24); + } +} + +.cw-block-gallery-next { + right: 0; + @include background-icon(arr_1right, clickable, 24); + + &:hover { + @include background-icon(arr_1right, info-alt, 24); + } +} + +.cw-block-gallery-file-description { + width: -moz-available; + color: var(--white); + font-size: 15px; + padding: 8px 12px; + position: absolute; + bottom: 8px; + text-align: center; + + p { + display: -webkit-inline-box; + background-color: fade-out($black, 0.6); + padding: 0 2em; + margin-bottom: 4px; + overflow: hidden; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + } + + &.show-on-hover { + display: none; + } +} + +.cw-block-gallery-content:hover .show-on-hover { + display: block; +} + +.cw-block-gallery-number-text { + color: var(--white); + font-size: 12px; + padding: 8px 12px; + position: absolute; + top: 0; + background-color: fade-out($black, 0.6); +} + +.cw-block-gallery-fade { + -webkit-animation-name: fade; + -webkit-animation-duration: 1.5s; + animation-name: fade; + animation-duration: 1.5s; +} + +@-webkit-keyframes fade { + from { + opacity: 0.4; + } + to { + opacity: 1; + } +} + +@keyframes fade { + from { + opacity: 0.4; + } + to { + opacity: 1; + } +} + +.cw-block-gallery-grid { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + list-style: none; + padding: 0; + + figure { + padding: 1px 4px; + margin: unset; + + figcaption { + margin-bottom: 12px; + + .cw-block-gallery-grid-file-name { + font-weight: 700; + margin-bottom: 4px; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + + .cw-block-gallery-grid-file-description { + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; + } + } + } +} + +.cw-container-wrapper-edit .cw-block-gallery-grid { + margin: 0; +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/headline.scss b/resources/assets/stylesheets/scss/courseware/blocks/headline.scss new file mode 100644 index 0000000..3646327 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/headline.scss @@ -0,0 +1,651 @@ +@use '../../../mixins.scss' as *; +@import '../gradients.scss'; +@import '../variables.scss'; + +$big-icon-size: 196; +$big-icon-size-px: $big-icon-size + px; +$large-icon-size: 128; +$large-icon-size-px: $large-icon-size + px; + +.cw-block-headline { + .cw-block-headline-content { + min-height: 600px; + overflow: hidden; + background-position: center; + background-size: $max-content-width; + background-repeat: no-repeat; + + &.half { + min-height: 300px; + } + + &.quarter { + min-height: 150px; + } + + &.heavy { + .cw-block-headline-iconbox { + display: none; + } + .cw-block-headline-textbox { + margin: 2em; + h1, + h2 { + display: inline; + border: none; + padding: 0.25em 0; + } + h1 { + font-size: 10em; + line-height: 1.2em; + } + h2 { + font-size: 2em; + line-height: 1em; + } + + &.quarter { + margin: 1.5em; + h1 { + font-size: 5em; + } + h2 { + font-size: 1.5em; + } + } + } + } + &.bigicon_top { + .icon-layer { + background-repeat: no-repeat; + background-position: center; + margin-top: 8em; + margin-bottom: 1em; + background-size: $big-icon-size-px; + height: $big-icon-size-px; + + @each $icon in $icons { + &.icon-black-#{$icon} { + @include background-icon($icon, info, $big-icon-size); + } + &.icon-white-#{$icon} { + @include background-icon($icon, info-alt, $big-icon-size); + } + &.icon-studip-blue-#{$icon} { + @include background-icon($icon, clickable, $big-icon-size); + } + &.icon-studip-red-#{$icon} { + @include background-icon($icon, status-red, $big-icon-size); + } + &.icon-studip-yellow-#{$icon} { + @include background-icon($icon, status-yellow, $big-icon-size); + } + &.icon-studip-green-#{$icon} { + @include background-icon($icon, status-green, $big-icon-size); + } + &.icon-studip-gray-#{$icon} { + @include background-icon($icon, inactive, $big-icon-size); + } + } + + &.half { + height: 144px; + background-size: 144px; + background-position: center; + margin-top: 2em; + margin-bottom: 0; + } + &.quarter { + height: 72px; + background-size: 72px; + background-position: center; + margin-top: 1em; + margin-bottom: 0; + } + } + + .cw-block-headline-textbox { + width: 80%; + padding-bottom: 4em; + margin: 0 auto; + .cw-block-headline-title { + h1 { + border: none; + font-size: 5em; + text-align: center; + } + } + + .cw-block-headline-subtitle { + h2 { + border: none; + font-size: 18px; + text-align: center; + margin-top: 10px; + } + } + + &.quarter { + padding-bottom: 1em; + .cw-block-headline-title { + h1 { + font-size: 2.25em; + margin: 0; + } + } + .cw-block-headline-subtitle { + h2 { + font-size: 1em; + margin: 0; + } + } + } + } + } + + &.bigicon_before { + display: flex; + align-items: center; + .icon-layer { + min-height: $big-icon-size-px; + min-width: $big-icon-size-px; + margin: 0 28px 0 28px; + background-repeat: no-repeat; + background-position: left center; + + @each $icon in $icons { + &.icon-black-#{$icon} { + @include background-icon($icon, info, $big-icon-size); + } + &.icon-white-#{$icon} { + @include background-icon($icon, info-alt, $big-icon-size); + } + &.icon-studip-blue-#{$icon} { + @include background-icon($icon, clickable, $big-icon-size); + } + &.icon-studip-red-#{$icon} { + @include background-icon($icon, status-red, $big-icon-size); + } + &.icon-studip-yellow-#{$icon} { + @include background-icon($icon, status-yellow, $big-icon-size); + } + &.icon-studip-green-#{$icon} { + @include background-icon($icon, status-green, $big-icon-size); + } + &.icon-studip-gray-#{$icon} { + @include background-icon($icon, inactive, $big-icon-size); + } + } + + &.quarter { + min-height: $large-icon-size-px; + min-width: $large-icon-size-px; + background-size: $large-icon-size-px; + } + } + + .cw-block-headline-textbox { + margin: 2em 1em 2em 0; + .cw-block-headline-title { + h1 { + border: none; + font-size: 5em; + text-align: left; + } + } + + .cw-block-headline-subtitle { + display: none; + } + } + } + + &.ribbon { + display: flex; + align-items: center; + + .cw-block-headline-textbox { + width: 100%; + padding: 1em 0; + margin: 3em 0; + background-color: fade-out($black, 0.5); + .cw-block-headline-title { + h1 { + border: none; + font-size: 5em; + text-align: center; + margin-bottom: 0; + } + } + + .cw-block-headline-subtitle { + h2 { + border: none; + font-size: 18px; + text-align: center; + margin-top: 10px; + } + } + } + } + + &.vertical { + .cw-block-headline-textbox { + .cw-block-headline-title { + position: relative; + top: 0; + left: 5em; + height: 5em; + text-align: center; + width: 600px; + transform-origin: 0 0; + transform: rotate(90deg); + h1 { + text-transform: uppercase; + border: none; + font-size: 2em; + line-height: 2.5em; + } + } + + .cw-block-headline-subtitle { + margin: 0 8em; + padding: 2em; + h2 { + margin: 0; + font-weight: 400; + } + } + } + &.half { + .cw-block-headline-title { + width: 300px; + } + } + &.quarter { + .cw-block-headline-title { + width: 150px; + h1 { + font-size: 1em; + line-height: 5em; + } + } + .cw-block-headline-subtitle { + margin: -2em 8em 0 8em; + padding: 1em; + } + } + } + + &.skew_text { + min-height: 600px; + + .cw-block-headline-textbox { + font-size: 7em; + text-align: left; + text-transform: uppercase; + font-weight: 800; + font-family: sans-serif; + font-style: normal; + letter-spacing: -6px; + margin: 1.25em 0 1.5em 1em; + div { + overflow: hidden; + font-size: 1em; + margin: -1px 0; + white-space: nowrap; + height: 0.8em; + width: calc(100% - 1em); + + h1, + h2 { + font-size: 0.8em; + margin: 0; + white-space: nowrap; + overflow: hidden; + line-height: 0.8em; + height: 0.8em; + } + } + .cw-block-headline-title, + .cw-block-headline-second-subtitle { + transform: skew(60deg, -15deg) scaley(0.66667); + } + .cw-block-headline-subtitle { + transform: skew(0deg, -15deg) scaley(1.33333); + } + .cw-block-headline-subtitle { + position: relative; + left: 0.48em; + } + .cw-block-headline-second-subtitle { + position: relative; + left: 0.92em; + } + } + + &.half { + min-height: 300px; + height: 300px; + .cw-block-headline-textbox { + font-size: 4em; + margin: 1.5em 0 1.5em 1em; + div { + width: calc(100% - 9em); + } + } + } + &.quarter { + min-height: 150px; + height: 150px; + .cw-block-headline-textbox { + font-size: 2em; + margin: 0.75em 0 0.75em 1em; + letter-spacing: -2px; + div { + width: calc(100% - 18em); + } + } + } + } + + &.icon_top_lines { + .cw-block-headline-iconbox { + margin: 32px; + &::before, + &::after { + width: calc(50% - 96px); + height: 64px; + display: inline-block; + border-top: solid 4px; + content: ''; + } + @each $name, $hex in $border-colors { + &.border-#{'' + $name}::before, + &.border-#{'' + $name}::after { + border-color: $hex; + } + } + .icon-layer { + background-repeat: no-repeat; + background-position: center; + background-size: 128px; + height: 128px; + width: 192px; + display: inline-block; + margin: auto; + + @each $icon in $icons { + &.icon-black-#{$icon} { + @include background-icon($icon, info, 128); + } + &.icon-white-#{$icon} { + @include background-icon($icon, info-alt, 128); + } + &.icon-studip-blue-#{$icon} { + @include background-icon($icon, clickable, 128); + } + &.icon-studip-red-#{$icon} { + @include background-icon($icon, status-red, 128); + } + &.icon-studip-yellow-#{$icon} { + @include background-icon($icon, status-yellow, 128); + } + &.icon-studip-green-#{$icon} { + @include background-icon($icon, status-green, 128); + } + &.icon-studip-gray-#{$icon} { + @include background-icon($icon, inactive, 128); + } + } + + &.half { + height: 128px; + background-size: 128px; + } + &.quarter { + height: 64px; + width: 96px; + background-size: 64px; + } + } + &.half { + margin: 16px 32px; + } + &.quarter { + margin: 8px 32px 0 32px; + &::before, + &::after { + width: calc(50% - 48px); + height: 32px; + } + } + } + .cw-block-headline-textbox { + width: calc(100% - 64px); + min-height: 350px; + margin: 0 auto; + border-bottom: solid 4px; + @each $name, $hex in $border-colors { + &.border-#{'' + $name} { + border-color: $hex; + } + } + .cw-block-headline-title { + h1 { + border: none; + font-size: 5em; + text-align: center; + } + } + + .cw-block-headline-subtitle { + h2 { + border: none; + font-size: 18px; + text-align: center; + margin: 22px 64px; + } + } + + &.half { + min-height: 0px; + margin-bottom: 32px; + .cw-block-headline-title { + h1 { + font-size: 4em; + } + } + + .cw-block-headline-subtitle { + h2 { + font-size: 1em; + margin: 1em 64px; + } + } + } + &.quarter { + min-height: 0; + margin-bottom: 0; + border: none; + .cw-block-headline-title { + h1 { + font-size: 2em; + } + } + + .cw-block-headline-subtitle { + h2 { + font-size: 1em; + margin: 8px 64px; + } + } + } + } + } + } +} +.cw-container-colspan-half, +.cw-container-colspan-half-center { + .cw-block-headline { + .cw-block-headline-content { + min-height: 300px; + + &.half { + min-height: 150px; + } + &.heavy { + h1 { + font-size: 4.5em; + } + h2 { + font-size: 1.25em; + } + } + &.bigicon_top { + .icon-layer { + background-position: center; + height: 98px; + margin-top: 2em; + margin-bottom: 1em; + + @each $icon in $icons { + &.icon-black-#{$icon} { + @include background-icon($icon, info, 98); + } + &.icon-white-#{$icon} { + @include background-icon($icon, info-alt, 98); + } + &.icon-studip-blue-#{$icon} { + @include background-icon($icon, clickable, 98); + } + &.icon-studip-red-#{$icon} { + @include background-icon($icon, status-red, 98); + } + &.icon-studip-yellow-#{$icon} { + @include background-icon($icon, status-yellow, 98); + } + &.icon-studip-green-#{$icon} { + @include background-icon($icon, status-green, 98); + } + &.icon-studip-gray-#{$icon} { + @include background-icon($icon, inactive, 98); + } + } + + &.half { + background-size: 72px; + height: 72px; + background-position: center; + } + } + + .cw-block-headline-textbox { + max-width: 80%; + margin: 0 auto; + padding-bottom: 1em; + .cw-block-headline-title { + h1 { + font-size: 2em; + } + } + + .cw-block-headline-subtitle { + h2 { + font-size: 12px; + } + } + } + } + &.bigicon_before { + min-height: 300px; + .icon-layer { + min-height: 92px; + min-width: 92px; + background-position: 0 center; + @each $icon in $icons { + &.icon-black-#{$icon} { + @include background-icon($icon, info, 92); + } + &.icon-white-#{$icon} { + @include background-icon($icon, info-alt, 92); + } + &.icon-studip-blue-#{$icon} { + @include background-icon($icon, clickable, 92); + } + &.icon-studip-red-#{$icon} { + @include background-icon($icon, status-red, 92); + } + &.icon-studip-yellow-#{$icon} { + @include background-icon($icon, status-yellow, 92); + } + &.icon-studip-green-#{$icon} { + @include background-icon($icon, status-green, 92); + } + &.icon-studip-gray-#{$icon} { + @include background-icon($icon, inactive, 92); + } + } + } + + .cw-block-headline-textbox { + .cw-block-headline-title { + h1 { + font-size: 2.5em; + } + } + } + + &.half { + min-height: 150px; + } + } + + &.ribbon { + min-height: 300px; + + &.half { + min-height: 150px; + } + + .cw-block-headline-textbox { + margin: 3em 0; + + .cw-block-headline-title { + h1 { + font-size: 2.5em; + } + } + .cw-block-headline-subtitle { + h2 { + font-size: 12px; + } + } + } + } + } + } +} + +.responsive-display { + .cw-block-headline { + .cw-block-headline-content { + background-size: 100%; + &.bigicon_before { + .icon-layer { + background-size: 144px; + } + .cw-block-headline-textbox .cw-block-headline-title h1 { + font-size: 4em; + } + } + &.skew_text { + min-height: 300px; + .cw-block-headline-textbox { + font-size: 4em; + letter-spacing: -4px; + } + } + } + } +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/iframe.scss b/resources/assets/stylesheets/scss/courseware/blocks/iframe.scss new file mode 100644 index 0000000..6bba2ab --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/iframe.scss @@ -0,0 +1,54 @@ +@use '../../../mixins.scss' as *; + +.cw-block-iframe { + .cw-block-content { + iframe { + border: solid thin var(--content-color-40); + width: calc(100% - 2px); + } + + .cw-block-iframe-cc-data { + border: solid thin var(--content-color-40); + border-top: none; + margin-top: -6px; + padding-top: 10px; + height: 75px; + + .cw-block-iframe-cc { + width: 120px; + height: 50px; + margin-left: 4px; + display: inline-block; + background-repeat: no-repeat; + + &.cw-block-iframe-cc-by { + background-image: url('#{$image-path}/cc/by.svg'); + } + &.cw-block-iframe-cc-by-nc { + background-image: url('#{$image-path}/cc/by-nc.eu.svg'); + } + &.cw-block-iframe-cc-by-nc-nd { + background-image: url('#{$image-path}/cc/by-nc-nd.eu.svg'); + } + &.cw-block-iframe-cc-by-nc-sa { + background-image: url('#{$image-path}/cc/by-nc-sa.svg'); + } + &.cw-block-iframe-cc-by-nd { + background-image: url('#{$image-path}/cc/by-nd.svg'); + } + &.cw-block-iframe-cc-by-sa { + background-image: url('#{$image-path}/cc/by-sa.svg'); + } + } + + .cw-block-iframe-cc-infos { + display: inline-block; + vertical-align: top; + padding-left: 1em; + p { + margin: 0; + } + } + } + } +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/image-map.scss b/resources/assets/stylesheets/scss/courseware/blocks/image-map.scss new file mode 100644 index 0000000..398ce99 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/image-map.scss @@ -0,0 +1,35 @@ +@import '../variables.scss'; + +.cw-block-image-map { + .cw-image-map-canvas, + .cw-image-map-original-img { + display: none; + } + + form.default { + label.cw-block-image-map-dimensions > input[type='number'] { + display: inline-block; + } + } +} + +.cw-draggable-shapes-wrapper { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + margin: $cw-wrapper-gap; + + .cw-draggable-area { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + &:hover { + cursor: grab; + } + } +} \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/blocks/keypoint.scss b/resources/assets/stylesheets/scss/courseware/blocks/keypoint.scss new file mode 100644 index 0000000..1cf7b86 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/keypoint.scss @@ -0,0 +1,100 @@ +@use '../../../mixins.scss' as *; +@import '../variables.scss'; + +.cw-keypoint-content { + display: flex; + min-height: 52px; + padding: 1.5em 2.5em 1.5em 2.5em; + border-style: solid; + border-width: 2px; + align-items: center; +} + +.cw-keypoint-content > img { + flex-shrink: 0; +} + +.cw-keypoint-red { + border-color: map-get($icon-colors, 'icon-red'); +} + +.cw-keypoint-blue { + border-color: map-get($icon-colors, 'icon-blue'); +} + +.cw-keypoint-green { + border-color: map-get($icon-colors, 'icon-green'); +} + +.cw-keypoint-gray { + border-color: map-get($icon-colors, 'icon-gray'); +} + +.cw-keypoint-yellow { + border-color: map-get($icon-colors, 'icon-yellow'); +} + +.cw-keypoint-sentence { + display: inline; + font-size: 1.25em; + padding-left: 1.5em; + margin-top: 10px; +} + +.cw-keypoint-label-color { + width: 32px !important; + min-width: 32px !important; + height: 32px; + padding: 5px !important; + + > .cw-keypoint-input-color { + visibility: hidden; + position: absolute; + } + + > .cw-keypoint-input-color + div { + cursor: pointer; + border: 2px solid transparent; + height: 32px; + width: 32px; + } + + > .cw-keypoint-input-color:checked + div { + /* (RADIO CHECKED) IMAGE STYLES */ + @include background-icon(accept, info_alt, 24); + background-repeat: no-repeat; + background-position: center; + } +} + +label[for='cw-keypoint-color'] { + vertical-align: top; +} + +.cw-keypoint-label-color { + display: inline-block !important; +} + +.cw-keypoint-icons { + background-color: var(--white); +} + +.cw-keypoint-bg-red { + background-color: map-get($icon-colors, 'icon-red'); +} + +.cw-keypoint-bg-blue { + background-color: map-get($icon-colors, 'icon-blue'); +} + +.cw-keypoint-bg-green { + background-color: map-get($icon-colors, 'icon-green'); +} + +.cw-keypoint-bg-gray { + background-color: map-get($icon-colors, 'icon-gray'); +} + +.cw-keypoint-bg-yellow { + background-color: map-get($icon-colors, 'icon-yellow'); +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/link.scss b/resources/assets/stylesheets/scss/courseware/blocks/link.scss new file mode 100644 index 0000000..eeeab6b --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/link.scss @@ -0,0 +1,73 @@ +@use '../../../mixins.scss' as *; + +.cw-block-link { + a { + text-decoration: none; + } + + .cw-link { + border: solid thin var(--content-color-40); + color: var(--base-color); + height: 20px; + padding: 1em; + + .cw-link-title { + margin-left: 3em; + } + + &:hover { + background-color: var(--base-color); + border: solid thin var(--base-color); + color: var(--white); + } + + &.internal { + @include background-icon(link-intern, clickable, 28); + background-position: 1em 50%; + background-repeat: no-repeat; + + &:hover { + @include background-icon(link-intern, info-alt, 28); + } + } + + &.external { + @include background-icon(link-extern, clickable, 28); + background-position: 1em 50%; + background-repeat: no-repeat; + + &:hover { + @include background-icon(link-extern, info-alt, 28); + } + + .cw-link-og-image { + display: inline-block; + max-width: 40%; + vertical-align: top; + margin-right: 2em; + } + + .cw-link-og-textwrapper { + display: inline-block; + max-width: 50%; + + p { + margin: 0; + } + + .cw-link-og-site { + font-size: 1.25em; + } + + .cw-link-og-title { + font-weight: 600; + } + + .cw-link-og-description { + color: var(--base-color-80); + text-align: justify; + } + } + } + } +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/lti.scss b/resources/assets/stylesheets/scss/courseware/blocks/lti.scss new file mode 100644 index 0000000..c3d7af1 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/lti.scss @@ -0,0 +1,20 @@ +@use '../../../mixins.scss' as *; + +.cw-block-lti { + .cw-block-content { + .cw-block-lti-content { + border: solid thin var(--content-color-40); + box-sizing: border-box; + } + + .cw-block-lti-icon-tool { + @include background-icon(plugin, info, 24); + background-repeat: no-repeat; + display: block; + padding: 16px 16px 16px 40px; + background-position: 10px center; + overflow: hidden; + text-overflow: ellipsis; + } + } +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/table-of-contents.scss b/resources/assets/stylesheets/scss/courseware/blocks/table-of-contents.scss new file mode 100644 index 0000000..f1c1d22 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/table-of-contents.scss @@ -0,0 +1,71 @@ +@use '../../../mixins.scss' as *; +@import '../variables.scss'; + +.cw-block-table-of-contents { + .cw-block-content { + overflow: unset; + } +} + +.cw-block-table-of-contents-list { + padding: 0; + list-style: none; + border: solid thin var(--content-color-40); + li { + &:not(:last-child) { + border-bottom: solid thin var(--dark-gray-color-30); + } + a { + display: block; + padding: 1em; + } + &:hover { + background-color: fade-out($dark-gray-color-75, 0.8); + } + } +} + +.cw-block-table-of-contents-list-details { + padding: 0; + list-style: none; + border: solid thin var(--content-color-40); + li { + &:not(:last-child) { + border-bottom: solid thin var(--dark-gray-color-30); + } + + &:hover { + background-color: fade-out($dark-gray-color-75, 0.8); + } + a { + display: block; + padding: 1em; + } + } +} + +.cw-block-table-of-contents-title-box { + min-height: 3em; + padding-left: 1em; + border-left-width: 10px; + border-left-style: solid; + + @each $name, $color in $tile-colors { + &.#{'' + $name} { + border-color: $color; + } + } + + p, + p:hover { + color: var(--black); + } +} + +.cw-container-colspan-half { + .cw-block-table-of-contents-tiles.cw-tiles { + .tile { + width: 267px; + } + } +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/text.scss b/resources/assets/stylesheets/scss/courseware/blocks/text.scss new file mode 100644 index 0000000..6bb1824 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/text.scss @@ -0,0 +1,16 @@ +.cw-block-text { + .cktoolbar { + width: 100% !important; + max-width: 100% !important; + position: relative !important; + top: 0 !important; + } + + .cke { + width: 100% !important; + } + + .ckplaceholder { + height: 0 !important; + } +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/timeline.scss b/resources/assets/stylesheets/scss/courseware/blocks/timeline.scss new file mode 100644 index 0000000..e727313 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/timeline.scss @@ -0,0 +1,244 @@ +@import '../variables.scss'; + +%clearfix { + &:after, &:before { + content: ''; + display: block; + width: 100%; + clear: both; + } +} + +.cw-timeline { + list-style: none; + width: 100%; + margin: 30px auto; + position: relative; + padding: 0; + transition: all 0.4s ease; + + &:before { + content:""; + width: 3px; + height: 100%; + background: var(--content-color-40); + left: 50%; + top: 0; + position: absolute; + } + + &:after { + content: ""; + clear: both; + display: table; + width: 100%; + } + + .cw-timeline-item { + margin-bottom: 50px; + position: relative; + @extend %clearfix; + + .cw-timeline-item-icon { + background: var(--white); + width: 50px; + height: 50px; + position: absolute; + top: 0; + left: 50%; + overflow: hidden; + margin-left: -25px; + @each $name, $color in $tile-colors { + &.cw-timeline-item-icon-color-#{"" + $name} { + border: solid 2px $color; + } + } + + border-radius: 50%; + + img { + position: relative; + top: 9px; + left: 9px; + + &.charcoal { + filter: brightness(0) saturate(100%) invert(22%) sepia(29%) saturate(364%) hue-rotate(168deg) brightness(87%) contrast(79%); + } + &.royal-purple { + filter: brightness(0) saturate(100%) invert(35%) sepia(43%) saturate(658%) hue-rotate(234deg) brightness(100%) contrast(87%); + } + &.iguana-green { + filter: brightness(0) saturate(100%) invert(74%) sepia(9%) saturate(1885%) hue-rotate(76deg) brightness(86%) contrast(88%); + } + &.queen-blue { + filter: brightness(0) saturate(100%) invert(44%) sepia(10%) saturate(2086%) hue-rotate(178deg) brightness(88%) contrast(80%); + } + &.verdigris { + filter: brightness(0) saturate(100%) invert(64%) sepia(11%) saturate(4959%) hue-rotate(131deg) brightness(103%) contrast(49%); + } + &.mulberry { + filter: brightness(0) saturate(100%) invert(49%) sepia(16%) saturate(1665%) hue-rotate(271deg) brightness(88%) contrast(95%); + } + &.pumpkin { + filter: brightness(0) saturate(100%) invert(38%) sepia(86%) saturate(1993%) hue-rotate(13deg) brightness(104%) contrast(108%); + } + &.sunglow { + filter: brightness(0) saturate(100%) invert(93%) sepia(69%) saturate(6824%) hue-rotate(313deg) brightness(102%) contrast(100%); + } + &.apple-green { + filter: brightness(0) saturate(100%) invert(69%) sepia(5%) saturate(5203%) hue-rotate(42deg) brightness(100%) contrast(84%); + } + &.studip-blue { + filter: brightness(0) saturate(100%) invert(26%) sepia(19%) saturate(1783%) hue-rotate(177deg) brightness(96%) contrast(93%); + } + &.studip-lightblue { + filter: brightness(0) saturate(100%) invert(91%) sepia(12%) saturate(190%) hue-rotate(190deg) brightness(104%) contrast(89%); + } + &.studip-red { + filter: brightness(0) saturate(100%) invert(8%) sepia(95%) saturate(6904%) hue-rotate(1deg) brightness(95%) contrast(109%); + } + &.studip-green { + filter: brightness(0) saturate(100%) invert(27%) sepia(85%) saturate(1531%) hue-rotate(109deg) brightness(95%) contrast(101%); + } + &.studip-yellow { + filter: brightness(0) saturate(100%) invert(94%) sepia(14%) saturate(7314%) hue-rotate(330deg) brightness(103%) contrast(101%); + } + &.studip-gray { + filter: brightness(0) saturate(100%) invert(46%) sepia(1%) saturate(2621%) hue-rotate(169deg) brightness(87%) contrast(87%); + } + } + } + + .cw-timeline-item-content { + width: 40%; + background: var(--white); + padding: 20px; + transition: all var(--transition-duration) ease; + + h3 { + padding: 15px; + color: var(--white); + margin: -20px -20px 0 -20px; + font-weight: 700; + min-height: 1.1em; + } + + article { + min-height: 2em; + border: solid thin var(--content-color-20); + border-top: none; + margin: 0 -20px; + padding: 15px; + + header { + font-weight: 700; + font-size: 1.1em; + margin: 0.5em 0; + } + } + + &:before { + content: ''; + position: absolute; + left: calc(40% + 40px); + top: 18px; + width: 0; + height: 0; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; + } + &.left { + h3 { + text-align: right; + } + } + &.right { + float: right; + + h3 { + text-align: left; + } + + &:before { + content: ''; + right: calc(40% + 40px); + left: inherit; + border-left: 0; + } + } + + @each $name, $color in $tile-colors { + &.cw-timeline-item-content-color-#{"" + $name} { + border-color: $color; + h3 { + background-color: $color; + } + &.left { + &:before { + border-left: 7px solid $color; + } + } + &.right { + &:before { + border-right: 7px solid $color; + } + } + } + } + } + } +} +@mixin oneSidedTimeline() { + .cw-timeline { + &:before { + left: 25px; + } + .cw-timeline-item { + .cw-timeline-item-icon { + left: 25px; + } + .cw-timeline-item-content { + width: stretch; + margin-left: 70px; + &.left { + float: unset; + + h3 { + text-align: left; + } + + &:before { + content: ''; + right: calc(100% - 70px); + left: inherit; + border-left: 0; + } + } + &.right { + float: unset; + &:before { + right: calc(100% - 70px); + } + } + + @each $name, $color in $tile-colors { + &.cw-timeline-item-content-color-#{"" + $name} { + &.left { + &:before { + border-right: 7px solid $color; + border-left: none; + } + } + } + } + } + } + } +} +.cw-container-colspan-half { + @include oneSidedTimeline(); +} + +@media only screen and (max-width: 1070px) { + @include oneSidedTimeline(); +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/typewriter.scss b/resources/assets/stylesheets/scss/courseware/blocks/typewriter.scss new file mode 100644 index 0000000..89a12df --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/blocks/typewriter.scss @@ -0,0 +1,38 @@ +.cw-typewriter-content { + .vue-typer { + &.font-typewriter { + font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; + } + + &.font-trebuchet { + font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; + } + + &.font-tahoma { + font-family: Tahoma, Verdana, Segoe, sans-serif; + } + + &.font-georgia { + font-family: Georgia, Times, 'Times New Roman', serif; + } + + &.font-narrow { + font-family: 'Arial Narrow', Arial, 'Helvetica Condensed', Helvetica, sans-serif; + } + + &.size-tall { + font-size: 1.25em; + line-height: 1.25em; + } + + &.size-grande { + font-size: 1.5em; + line-height: 1.25em; + } + + &.size-huge { + font-size: 2em; + line-height: 1.25em; + } + } +} diff --git a/resources/assets/stylesheets/scss/courseware/comments.scss b/resources/assets/stylesheets/scss/courseware/comments.scss new file mode 100644 index 0000000..f953e86 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/comments.scss @@ -0,0 +1,57 @@ +.cw-structural-element-feedback, +.cw-structural-element-comments { + padding: 0 1em; +} + +.cw-structural-element-feedback-items, +.cw-structural-element-comments-items, +.cw-block-feedback-items, +.cw-block-comments-items { + min-height: 1em; + max-height: 225px; + overflow-y: auto; + overflow-x: hidden; + margin: -1em -1em 0em 0em; + padding: 0em 1em 0em 0em; + scroll-behavior: smooth; +} + +.studip-dialog-content { + .cw-structural-element-feedback-items, + .cw-structural-element-comments-items, + .cw-block-feedback-items, + .cw-block-comments-items { + max-height: unset; + } +} + +.cw-structural-element-feedback-create, +.cw-structural-element-comment-create, +.cw-block-feedback-create, +.cw-block-comment-create { + border-top: solid thin var(--content-color-40); + padding-top: 1em; + textarea { + width: calc(100% - 6px); + resize: none; + border: solid thin var(--content-color-40); + &:active { + border: solid thin var(--content-color-80); + } + } +} +.cw-structural-element-comments-empty, +.cw-structural-element-feedback-empty, +.cw-block-comments-empty, +.cw-block-feedback-empty { + .cw-structural-element-feedback-create, + .cw-structural-element-comment-create, + .cw-block-feedback-create, + .cw-block-comment-create { + border-top: none; + } +} + +.cw-comments-overview-dialog-comments-context { + margin: 0 0 1.5em 0; +} \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/containers/accordion.scss b/resources/assets/stylesheets/scss/courseware/containers/accordion.scss new file mode 100644 index 0000000..e69de29 diff --git a/resources/assets/stylesheets/scss/courseware/containers/default-container.scss b/resources/assets/stylesheets/scss/courseware/containers/default-container.scss new file mode 100644 index 0000000..489a1fa --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/containers/default-container.scss @@ -0,0 +1,202 @@ +.cw-container { + margin-bottom: 1em; + + &.cw-container-colspan-full { + max-width: $max-content-width; + width: 100%; + } + &.cw-container-colspan-half { + max-width: 540px; + width: 100%; + } + &.cw-container-colspan-half-center { + width: $max-content-width; + .cw-container-content { + max-width: 540px; + margin: auto; + } + } + + .cw-container-header { + background-color: var(--content-color-20); + padding: 4px 10px 4px 22px; + + .cw-container-header-toggle { + display: inline-block; + width: calc(100% - 40px); + } + + span { + color: var(--base-color); + font-weight: 700; + line-height: 2em; + font-size: 1.1em; + + &.cw-default-container-blocker-warning { + font-weight: 400; + } + } + + img { + vertical-align: text-bottom; + } + + .cw-container-actions { + position: relative; + float: right; + margin-top: 4px; + // z-index: 31; + .is-open { + z-index: 31; + } + } + } + + &.cw-container-active { + &.cw-container-colspan-half-center { + .cw-container-content { + max-width: unset; + .cw-block-wrapper { + max-width: 540px; + margin: auto; + } + } + } + .cw-container-content { + border: solid thin var(--content-color-40); + } + } + + + .cw-block-wrapper { + padding: 0; + margin: 0; + list-style: none; + + &.cw-block-wrapper-active { + padding: 14px 10px; + + .cw-tabs-content { + padding: 14px 0; + } + } + + .cw-block-item { + padding: 0; + margin: 0 0 1em 0; + } + } + + .cw-container-list-block-list { + padding: 0; + list-style: none; + } + + .cw-container-tabs-block-list { + list-style: none; + padding: 1em 1em 0 1em; + } + + .cw-container-accordion-block-list { + list-style: none; + padding: 0 1em; + } +} + +.cw-container-section-delete { + img { + cursor: pointer; + } +} + +form.cw-container-dialog-edit-form { + display: flex; + flex-wrap: wrap; + gap: 8px; + + fieldset { + max-width: 200px; + } +} + +.cw-container-wrapper-discuss { + flex-direction: column; + + .cw-container-colspan-full { + max-width: unset; + } + .cw-container-colspan-half-center, + .cw-container-colspan-half { + max-width: 1050px; + } + .cw-container-colspan-half-center { + width: 100%; + .cw-container-content { + width: 1050px; + } + } +} + +.cw-radioset { + display: flex; + flex-direction: row; + justify-content: center; + margin-bottom: 1em; + .cw-radioset-box { + width: 128px; + height: 128px; + text-align: center; + margin-right: 16px; + border: solid thin var(--content-color-40); + &.selected { + border-color: var(--base-color); + background-color: var(--content-color-20); + } + &:last-child { + margin-right: 0; + } + label { + height: 100%; + width: 100%; + margin: 0; + cursor: pointer; + .label-icon { + background-position: center 8px; + background-repeat: no-repeat; + height: 64px; + padding: 8px; + &.accordion { + @include background-icon(block-accordion, clickable, 64); + } + &.list { + @include background-icon(view-list, clickable, 64); + } + &.tabs { + @include background-icon(block-tabs, clickable, 64); + } + &.full { + @include background-icon(column-full, clickable, 64); + } + &.half { + @include background-icon(column-half, clickable, 64); + } + &.half-center { + @include background-icon(column-half-centered, clickable, 64); + } + } + + } + input[type=radio] { + position: absolute; + opacity: 0; + width: 0; + + &:focus + label { + outline-color: Highlight; + outline-color: -webkit-focus-ring-color; + outline-style: auto; + outline-width: 1px; + } + } + } +} \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/containers/list.scss b/resources/assets/stylesheets/scss/courseware/containers/list.scss new file mode 100644 index 0000000..e69de29 diff --git a/resources/assets/stylesheets/scss/courseware/containers/tabs.scss b/resources/assets/stylesheets/scss/courseware/containers/tabs.scss new file mode 100644 index 0000000..e69de29 diff --git a/resources/assets/stylesheets/scss/courseware/content-courses.scss b/resources/assets/stylesheets/scss/courseware/content-courses.scss new file mode 100644 index 0000000..16d712c --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/content-courses.scss @@ -0,0 +1,12 @@ +.cw-content-courses { + h2 { + margin: 0; + font-weight: 400; + padding: 5px 0; + font-size: 1.4em; + } + + ul.cw-tiles { + margin-bottom: 20px; + } +} \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/dashboard.scss b/resources/assets/stylesheets/scss/courseware/dashboard.scss new file mode 100644 index 0000000..a3e9dd3 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/dashboard.scss @@ -0,0 +1,131 @@ + +.cw-dashboard { + display: flex; + max-width: 1112px; + flex-wrap: wrap; + + .cw-dashboard-box { + margin-bottom: 1em; + margin-right: 1em; + + &.cw-dashboard-box-full { + max-width: $max-content-width; + width: calc(100% - 16px); + } + &.cw-dashboard-box-half { + width: calc(50% - 16px); + } + + &.cw-collapsible .cw-collapsible-content.cw-collapsible-content-open { + padding: 0; + } + } + .cw-dashboard-overview { + display: flex; + padding: 10px; + flex-wrap: wrap; + justify-content: center; + + } + + &.cw-dashboard-task-view { + display: unset; + max-width: unset; + flex-wrap: unset; + + .cw-dashboard-tasks-wrapper, + .cw-dashboard-students-wrapper { + max-height: unset; + } + } +} + +#course-courseware-dashboard { + .action-menu-item a { + cursor: pointer; + } +} + +.responsive-display { + .cw-dashboard { + .cw-dashboard-box { + + &.cw-dashboard-box-full { + width: 100% + } + &.cw-dashboard-box-half { + width: 100% + } + } + } +} + +.cw-activities-wrapper { + max-width: $max-content-width; + + .cw-companion-box { + margin: 10px; + } + + .cw-activities { + list-style: none; + padding: 0; + + .cw-activity-item { + border-bottom: solid thin var(--content-color-40); + padding: 0.5em; + + &:last-child { + border: none; + } + + p { + margin: 0 0 4px 0; + img { + padding-right: 0.5em; + vertical-align: text-bottom; + } + } + } + } +} + +.cw-dashboard-box { + .cw-dashboard-tasks-wrapper, + .cw-dashboard-students-wrapper { + padding: 10px; + } +} + +.cw-dashboard-tasks-wrapper, +.cw-dashboard-students-wrapper { + + table.default { + margin: 0; + thead { + tr { + th { + &.feedback { + min-width: 11em; + } + &.renewal { + min-width: 14em; + } + } + } + } + tbody { + tr { + td { + img { + vertical-align: text-bottom; + &.display-feedback, + &.edit { + cursor: pointer; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/gradients.scss b/resources/assets/stylesheets/scss/courseware/gradients.scss new file mode 100644 index 0000000..97f8c7d --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/gradients.scss @@ -0,0 +1,150 @@ +.faded-sun { + background: radial-gradient( + ellipse farthest-side at 76% 77%, + rgba(245, 228, 212, 0.25) 4%, + rgba(255, 255, 255, 0) calc(4% + 1px) + ), + radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), + linear-gradient(135deg, #ff0000 0%, #000036 100%), + radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), + linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%); + background-blend-mode: normal, normal, screen, overlay, normal; +} + +.romantic-sun { + background: linear-gradient(180deg, #ffb7b7 0%, #727272 100%), + radial-gradient(60.91% 100% at 50% 0%, #ffd1d1 0%, #260000 100%), + linear-gradient(238.72deg, #ffdddd 0%, #720066 100%), + linear-gradient(127.43deg, #00ffff 0%, #ff4444 100%), + radial-gradient(100.22% 100% at 70.57% 0%, #ff0000 0%, #00ffe0 100%), + linear-gradient(127.43deg, #b7d500 0%, #3300ff 100%); + background-blend-mode: screen, overlay, hard-light, color-burn, color-dodge, normal; +} + +.bright-rain { + background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%), + linear-gradient(121.28deg, #669600 0%, #ff0000 100%), + linear-gradient(360deg, #0029ff 0%, #8fff00 100%), + radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%), + radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%); + background-blend-mode: screen, color-dodge, overlay, difference, normal; +} + +.soft-weather { + background: radial-gradient(80.99% 100% at 50% 0%, #00ff0a 0%, #36008e 100%), + radial-gradient(50% 123.47% at 50% 50%, #efe7c8 0%, #36008e 100%), + linear-gradient(301.28deg, #ff006b 0%, #48dd9e 100%), + linear-gradient(294.84deg, #5a60e4 0%, #d30000 100%), + linear-gradient(52.29deg, #000000 0%, #00ff85 100%), + radial-gradient(100% 138.69% at 100% 0%, #0007a5 0%, #ff7a00 100%), + radial-gradient(70.41% 100% at 50% 0%, #d5b300 0%, #2200aa 100%); + background-blend-mode: screen, screen, lighten, overlay, lighten, difference, normal; +} + +.blue-bar { + background: linear-gradient( + 123deg, + #e7ebf1 0%, + #e7ebf1 40%, + #d4dbe5 calc(40% + 1px), + #d4dbe5 60%, + #7e92b0 calc(60% + 1px), + #7e92b0 75%, + #28497c calc(75% + 1px), + #28497c 100% + ); +} +.green-bar { + background: linear-gradient( + 123deg, + #c5dea0 0%, + #c5dea0 40%, + #8bbd40 calc(40% + 1px), + #8bbd40 60%, + #129c94 calc(60% + 1px), + #129c94 75%, + #66b570 calc(75% + 1px), + #66b570 100% + ); +} + +.paper { + background-image: repeating-linear-gradient(0deg, #d8dadc 0px, #d8dadc 1px, transparent 1px, transparent 23px), + repeating-linear-gradient(90deg, #d8dadc 0px, #d8dadc 1px, transparent 1px, transparent 23px), + linear-gradient(#ffffff, #ffffff); +} +.blueprint { + background: #28497c; + background-image: + radial-gradient(circle at center center, transparent 0%, #28497c 200%), + repeating-linear-gradient(0deg, #536d96 0px, #536d96 1px, transparent 1px, transparent 12px), + repeating-linear-gradient(90deg, #536d96 0px, #536d96 1px, transparent 1px, transparent 12px), + repeating-linear-gradient(0deg, #536d96 0px, #536d96 2px, transparent 1px, transparent 60px), + repeating-linear-gradient(90deg, #536d96 0px, #536d96 2px, transparent 1px, transparent 60px), + linear-gradient(#1f3f70, #1f3f70); +} + +.color-blue { + background: #28497c; + background: -webkit-linear-gradient(90deg, #28497c, #28497c, #7e92b0); + background: linear-gradient(90deg, #28497c, #28497c, #7e92b0); +} +.color-purple { + background: #682c8b; + background: -webkit-linear-gradient(90deg, #682c8b, #682c8b, #a480b9); + background: linear-gradient(90deg, #682c8b, #682c8b, #a480b9); +} +.color-violet { + background: #af2d7b; + background: -webkit-linear-gradient(90deg, #af2d7b, #af2d7b, #cf81b0); + background: linear-gradient(90deg, #af2d7b, #af2d7b, #cf81b0); +} +.color-red { + background: #d60000; + background: -webkit-linear-gradient(90deg, #d60000, #d60000, #e76666); + background: linear-gradient(90deg, #d60000, #d60000, #e76666); +} +.color-orange { + background: #f26e00; + background: -webkit-linear-gradient(90deg, #f26e00, #f26e00, #f7a866); + background: linear-gradient(90deg, #f26e00, #f26e00, #f7a866); +} +.color-yellow { + background: #ffbd33; + background: -webkit-linear-gradient(90deg, #ffbd33, #ffbd33, #ffd785); + background: linear-gradient(90deg, #ffbd33, #ffbd33, #ffd785); +} +.color-green { + background: #6ead10; + background: -webkit-linear-gradient(90deg, #6ead10, #6ead10, #a8ce70); + background: linear-gradient(90deg, #6ead10, #6ead10, #a8ce70); +} +.color-petrol { + background: #129c94; + background: -webkit-linear-gradient(90deg, #129c94, #129c94, #70c3bf); + background: linear-gradient(90deg, #129c94, #129c94, #70c3bf); +} +.color-grey { + background: #3c454e; + background: -webkit-linear-gradient(90deg, #3c454e, #3c454e, #898f94); + background: linear-gradient(90deg, #3c454e, #3c454e, #898f94); +} + +.grid { + background-image: radial-gradient(circle at center center, transparent 0%, #000000 95%), + repeating-linear-gradient( + 45deg, + #3c454e 0, + #3c454e 1px, + transparent 1px, + transparent 7px + ), + repeating-linear-gradient( + 135deg, + #3c454e 0, + #3c454e 1px, + transparent 1px, + transparent 14px + ), + linear-gradient(135deg, #000000, #000000); +} diff --git a/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss b/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss new file mode 100644 index 0000000..79dc2ee --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss @@ -0,0 +1,46 @@ +@use '../../../mixins.scss' as *; + +.cw-collapsible { + border: solid thin var(--content-color-40); + margin-bottom: -1px; + + .cw-collapsible-title { + @include background-icon(arr_1right, clickable); + background-position: 6px center; + background-repeat: no-repeat; + background-color: var(--content-color-20); + padding: 0.5em 2em; + margin: 0; + font-weight: 600; + color: var(--base-color); + cursor: pointer; + + &.cw-collapsible-open { + @include background-icon(arr_1down, clickable); + + .cw-container-list-sort-mode { + margin-top: 8px; + } + } + + img { + vertical-align: top; + } + } + + .cw-collapsible-content { + display: none; + &.cw-collapsible-content-open { + display: block; + padding: 10px; + } + } +} + +form .cw-collapsible .cw-collapsible-content.cw-collapsible-content-open { + padding: unset; + + label { + margin: 1.5ex; + } +} diff --git a/resources/assets/stylesheets/scss/courseware/layouts/companion.scss b/resources/assets/stylesheets/scss/courseware/layouts/companion.scss new file mode 100644 index 0000000..cf48c8f --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/layouts/companion.scss @@ -0,0 +1,90 @@ +@use '../../../mixins.scss' as *; + +$companion-types: ( + default: basic, + unsure: unsure, + special: special, + alert: alert, + sad: sad, + happy: happy, + pointing: pointing-right, + curious: curious +); + +.cw-companion-overlay { + position: fixed; + bottom: 46px; + right: 0; + width: 360px; + max-width: calc(100% - 140px); + height: 120px; + z-index: 42000; + border: solid thin var(--content-color-40); + background-color: var(--white); + background-repeat: no-repeat; + background-position: 1em center; + background-size: 100px; + box-shadow: 5px 5px var(--dark-gray-color-10); + padding-left: 120px; + transform: translateX(100%); + transition: transform .5s ease; + + @each $type, $image in $companion-types { + &.#{$type} { + background-image: url("#{$image-path}/companion/Tin_#{$image}.svg"); + } + } + + &.cw-companion-overlay-in { + transform: translateX(0); + right: 12px; + } + + .cw-companion-overlay-content { + display: inline-block; + position: relative; + top: 25%; + padding: 0 1em; + } + + .cw-compantion-overlay-close { + @include background-icon(decline); + background-color: var(--white); + background-repeat: no-repeat; + + position: absolute; + top: 7px; + right: 7px; + height: 16px; + width: 16px; + border: none; + cursor: pointer; + } +} + +.cw-companion-box { + display: flex; + height: 120px; + border: solid thin var(--content-color-40); + background-color: var(--white); + background-repeat: no-repeat; + background-position: 1em center; + background-size: 100px; + padding-left: 120px; + align-items: center; + margin-bottom: 1em; + + @each $type, $image in $companion-types { + &.#{$type} { + background-image: url("#{$image-path}/companion/Tin_#{$image}.svg"); + } + } + + &.cw-companion-box-in-form { + margin-top: 8px; + } + + p { + margin: 0 1em 10px 0; + } +} \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/layouts/import-zip.scss b/resources/assets/stylesheets/scss/courseware/layouts/import-zip.scss new file mode 100644 index 0000000..5ffd9a2 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/layouts/import-zip.scss @@ -0,0 +1,22 @@ +.cw-import-zip { + margin-bottom: 1em; + + header { + font-size: 1.15; + font-weight: 700; + } + .progress-bar-wrapper { + width: 100%; + border: solid thin var(--content-color-40); + + .progress-bar { + display: flex; + flex-direction: column; + justify-content: center; + color: white; + text-align: center; + white-space: nowrap; + background-color: var(--base-color); + } + } +} diff --git a/resources/assets/stylesheets/scss/courseware/layouts/input-file.scss b/resources/assets/stylesheets/scss/courseware/layouts/input-file.scss new file mode 100644 index 0000000..9159069 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/layouts/input-file.scss @@ -0,0 +1,36 @@ +.cw-file-input { + width: stretch; + border: solid thin var(--base-color); + font-size: 14px; + cursor: pointer; + + &::file-selector-button { + font-family: inherit; + border: none; + border-right: solid thin var(--base-color); + background-color: var(--white); + padding: 6px 15px; + margin-right: 10px; + color: var(--base-color); + + &:hover { + background-color: var(--base-color); + color: var(--white); + } + } +} +.cw-file-input-change { + border: solid thin var(--base-color); + + button.button { + padding: 0.5em 1.5em; + margin: 0 0 0 -1px; + line-height: 100%; + border: none; + border-right: solid thin var(--base-color); + } + + span { + padding: 0.5em 1.5em 0.5em 0.5em; + } +} diff --git a/resources/assets/stylesheets/scss/courseware/layouts/progress.scss b/resources/assets/stylesheets/scss/courseware/layouts/progress.scss new file mode 100644 index 0000000..822294f --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/layouts/progress.scss @@ -0,0 +1,160 @@ +.cw-unit-progress { + .cw-unit-progress-breadcrumb { + padding: 10px 0; + + a img { + vertical-align: top; + } + } + + .cw-unit-progress-chapter { + text-align: center; + margin-bottom: -3.5em; + + h1 { + border: none; + margin: 0; + padding: 0; + } + + .cw-progress-circle { + font-size: 18px; + margin: 1em auto; + + &.cw-unit-progress-current { + font-size: 12px; + top: -4.5em; + left: -2.5em; + } + } + } + + .cw-unit-progress-subchapter-list { + border-top: solid thin var(--content-color-40); + padding: 0 1em 0 1em; + + .cw-unit-empty-info { + margin-top: 10px; + } + } +} + +.cw-unit-progress-item { + display: block; + border-bottom: solid thin var(--content-color-40); + padding: 10px 0; + + &:hover { + background-color: hsla(217, 6%, 45%, 0.2); + } + + &:last-child { + border: none; + } + + .cw-unit-progress-item-value, + .cw-unit-progress-item-description { + display: inline-block; + vertical-align: top; + } + + .cw-unit-progress-item-value { + width: 70px; + color: var(--base-color); + font-size: xx-large; + + .cw-progress-circle { + font-size: 12px; + margin: 4px; + } + } + + .cw-unit-progress-item-description { + color: var(--base-color); + padding: 0.5em 0 0 1em; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } +} + +.cw-progress-circle { + font-size: 14px; + margin: 10px; + position: relative; + padding: 0; + width: 5em; + height: 5em; + background-color: var(--dark-gray-color-10); + border-radius: 50%; + line-height: 5em; + + &:after { + border: none; + position: absolute; + top: 0.35em; + left: 0.35em; + text-align: center; + display: block; + border-radius: 50%; + width: 4.3em; + height: 4.3em; + background-color: white; + content: ' '; + } + + span { + position: absolute; + line-height: 5em; + width: 5em; + text-align: center; + display: block; + color: var(--base-color); + z-index: 2; + } + + .left-half-clipper { + border-radius: 50%; + width: 5em; + height: 5em; + position: absolute; + clip: rect(0, 5em, 5em, 2.5em); + } + + &.over50 .left-half-clipper { + clip: rect(auto, auto, auto, auto); + } + + .value-bar { + position: absolute; + clip: rect(0, 2.5em, 5em, 0); + width: 5em; + height: 5em; + border-radius: 50%; + border: 0.45em solid var(--base-color); + box-sizing: border-box; + } + + &.over50 .first50-bar { + position: absolute; + clip: rect(0, 5em, 5em, 2.5em); + background-color: var(--base-color); + border-radius: 50%; + width: 5em; + height: 5em; + } + + &:not(.over50) .first50-bar { + display: none; + } + + &.p0 .value-bar { + display: none; + } + + @for $i from 1 through 100 { + &.p#{$i} .value-bar { + transform: rotate(calc(360deg * $i / 100)); + } + } +} \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss b/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss new file mode 100644 index 0000000..b39687f --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss @@ -0,0 +1,359 @@ +@use '../../../mixins.scss' as *; + +$consum_ribbon_width: calc(100% - 58px); +#course-courseware-courseware, +#contents-courseware-courseware, +#contents-courseware-shared_content_courseware { + &.consume { + overflow: hidden; + } + + #content-wrapper { + position: relative; + } +} + +.cw-ribbon-wrapper-consume { + position: fixed; + padding: 15px; + background-color: var(--white); + width: $consum_ribbon_width; + height: 46px; + z-index: 42; +} + +.cw-ribbon-consume-bottom { + position: fixed; + top: 75px; + height: 15px; + left: 0; + width: calc(100% - 1em); + background-color: var(--white); + z-index: 40; +} + +.cw-ribbon-sticky-top { + position: fixed; + top: 40px; + height: 20px; + width: calc(100% - 314px); + background-color: var(--white); + z-index: 39; +} + +.cw-ribbon-sticky-bottom { + position: fixed; + top: 110px; + height: 16px; + width: calc(100% - 314px); + background-color: var(--white); + z-index: 39; +} + +.cw-ribbon-sticky-spacer { + height: 80px; +} + +.cw-ribbon { + display: flex; + flex-wrap: wrap; + height: auto; + min-height: 30px; + border: solid thin var(--dark-gray-color-30); + margin-bottom: 15px; + padding: 1em; + justify-content: space-between; + background-color: var(--dark-gray-color-5); + + &.cw-ribbon-sticky { + position: fixed; + top: 50px; + width: calc(100% - 346px); + z-index: 40; + } + + &.cw-ribbon-consume { + width: $consum_ribbon_width; + position: fixed; + margin-bottom: 0; + } + + .cw-ribbon-wrapper-left { + display: flex; + max-width: calc(100% - 106px); + + .cw-ribbon-nav { + display: flex; + min-width: 75px; + + &.single-icon { + min-width: 45px; + } + } + + .cw-ribbon-breadcrumb { + font-size: 1.25em; + line-height: 1.5em; + margin-right: 1em; + min-width: 0; + + ul { + display: flex; + list-style: none; + padding-left: 0; + + li + li:before { + padding: 0 0.25em; + content: '/'; + background-repeat: no-repeat; + background-position: center; + } + + .cw-ribbon-breadcrumb-item { + display: inline; + flex-shrink: 100000; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + a { + color: var(--base-color); + text-decoration: none; + &:hover { + color: var(--active-color); + } + } + + img { + vertical-align: text-top; + } + + &.cw-ribbon-breadcrumb-item-current { + flex-shrink: 1; + } + } + } + } + } + + .cw-ribbon-wrapper-right { + display: flex; + + button { + border: none; + background-color: transparent; + cursor: pointer; + } + } + + .cw-ribbon-button { + height: 24px; + width: 24px; + margin: 0 7px; + padding: 1px 2px; + border: none; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + background-size: 24px; + cursor: pointer; + + &.cw-ribbon-button-menu { + @include background-icon(table-of-contents, clickable, 24); + } + + &.cw-ribbon-button-prev { + @include background-icon(arr_1left, clickable, 24); + margin: 0 0.5em 0 0; + } + + &.cw-ribbon-button-next { + @include background-icon(arr_1right, clickable, 24); + margin: 0 1em 0 0; + } + + &.cw-ribbon-button-prev-disabled { + @include background-icon(arr_1left, inactive, 24); + margin: 0 0.5em 0 0; + cursor: default; + } + + &.cw-ribbon-button-next-disabled { + @include background-icon(arr_1right, inactive, 24); + margin: 0 1em 0 0; + cursor: default; + } + } + + .cw-ribbon-action-menu { + vertical-align: text-top; + margin: 2px 0 0 2px; + &.is-open { + z-index: 32; + } + } +} + +.cw-ribbon-tools { + background-color: var(--white); + border: solid thin var(--content-color-40); + box-shadow: 2px 2px var(--dark-gray-color-30); + position: absolute; + right: -570px; + top: 15px; + height: 100%; + max-width: calc(100% - 28px); + display: flex; + flex-flow: row; + transition: right 0.8s; + z-index: 42; + + &.unfold { + right: 0px; + margin-right: 15px; + } + + &.cw-ribbon-tools-consume { + position: fixed; + + &.unfold { + right: 15px; + } + } + + &.cw-ribbon-tools-sticky { + position: absolute; + top: -1px; + margin-right: 0; + } + + .cw-ribbon-tool-content { + height: 100%; + width: 540px; + background-color: var(--white); + padding: 0; + overflow: hidden; + + .cw-ribbon-tool-content-nav { + position: sticky; + height: 100%; + top: 0; + background-color: var(--white); + margin: 0; + padding: 0; + color: var(--base-color); + display: flex; + z-index: 43; + + .cw-tools-hide-button { + position: absolute; + border: none; + height: 36px; + width: 24px; + min-width: 24px; + margin-right: 1em; + padding: 0 4px; + right: 0; + top: 12px; + cursor: pointer; + @include background-icon(decline, clickable, 24); + background-repeat: no-repeat; + background-size: 24px; + background-position: center right; + background-color: var(--white); + } + + > .cw-ribbon-tool-content-tablist { + width: 100%; + height: 100%; + + > .cw-tabs-nav { + border: none; + width: calc(100% - 48px); + + > button { + padding: 18px 8px 4px 8px; + margin-top: 2px; + max-width: unset; + flex-grow: 0.5; + &::after { + margin-top: 16px; + } + } + } + + > .cw-tabs-content { + border: none; + border-top: solid thin var(--content-color-40); + padding: 0; + height: calc(100% - 58px); + + > .cw-tab { + height: calc(100% - 22px); + padding: 14px 8px 8px 8px; + position: relative; + overflow-y: auto; + overflow-x: hidden; + scrollbar-width: thin; + scrollbar-color: var(--base-color) var(--white); + + &.cw-ribbon-tool-blockadder-tab { + height: 100%; + overflow: hidden; + padding: 0; + } + } + } + } + } + + .cw-ribbon-tool { + padding: 14px 8px 6px 8px; + height: calc(100% - 64px); + overflow-y: auto; + overflow-x: hidden; + scrollbar-width: thin; + scrollbar-color: var(--base-color) var(--white); + } + } +} + +#courseware-public-index { + .cw-ribbon-tools { + top: 127px; + + &.cw-ribbon-tools-consume { + top: 14px; + } + + &.cw-ribbon-tools-sticky { + top: 56px; + } + } +} + +.cw-structural-element-consumemode { + .cw-ribbon-tools { + top: 25px; + } +} + +.responsive-display { + .cw-ribbon-sticky-top, + .cw-ribbon-sticky-bottom, + .cw-ribbon-wrapper-consume, + .cw-ribbon-consume-bottom { + width: 100%; + } + + .cw-ribbon { + &.cw-ribbon-sticky { + width: calc(100% - 62px); + } + } + + .cw-ribbon-sticky-spacer { + height: 75px; + } +} diff --git a/resources/assets/stylesheets/scss/courseware/layouts/tabs.scss b/resources/assets/stylesheets/scss/courseware/layouts/tabs.scss new file mode 100644 index 0000000..aa12b5e --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/layouts/tabs.scss @@ -0,0 +1,114 @@ +@use '../../../mixins.scss' as *; +@import '../variables.scss'; + +.cw-tabs-nav { + display: flex; + flex-wrap: wrap; + list-style: none; + padding: 0; + margin: 0; + border: solid thin var(--content-color-40); + border-bottom: none; + + button { + background-color: var(--white); + border: none; + padding: 1em 0 4px 0; + margin: 0 7px 0 21px; + color: var(--base-color); + cursor: pointer; + text-align: center; + flex-grow: 1; + max-width: max-content; + + &::after { + display: block; + margin-top: 4px; + margin-bottom: -5px; + margin-left: -14px; + width: calc(100% + 28px); + content: ''; + border-bottom: solid 3px var(--dark-gray-color-75); + transform: scaleX(0); + transition: transform var(--transition-duration) ease-in-out; + } + + &.is-active, + &:hover { + color: var(--black); + &:after { + transform: scaleX(1); + } + } + + @each $icon in $icons { + &.cw-tabs-nav-icon-text-#{$icon} { + &::before { + @include background-icon($icon); + background-repeat: no-repeat; + background-position: left bottom; + + display: inline-block; + height: 16px; + width: 16px; + margin-bottom: -2px; + padding-left: 4px; + content: ''; + } + } + &.is-active.cw-tabs-nav-icon-text-#{$icon}, + &.cw-tabs-nav-icon-text-#{$icon}:hover { + &::before { + @include background-icon($icon, info); + } + } + } + @each $icon in $icons { + &.cw-tabs-nav-icon-solo-#{$icon} { + &::before { + display: inline-block; + height: 24px; + width: 24px; + content: ''; + + @include background-icon($icon, clickable, 24); + background-repeat: no-repeat; + background-position: center; + } + } + &.is-active.cw-tabs-nav-icon-solo-#{$icon}, + &.cw-tabs-nav-icon-solo-#{$icon}:hover { + &::before { + @include background-icon($icon, info); + } + } + } + } + + &:hover li { + &.is-active::after { + transform: scaleX(0); + } + &:hover::after { + transform: scaleX(1); + } + } +} + +.cw-tabs-content { + border: solid thin var(--content-color-40); + padding: 4px; +} + +.cw-tabs { + .cw-tab { + display: none; + height: 0; + + &.cw-tab-active { + display: block; + height: unset; + padding: 4px 8px; + } + } +} diff --git a/resources/assets/stylesheets/scss/courseware/layouts/talk-bubble.scss b/resources/assets/stylesheets/scss/courseware/layouts/talk-bubble.scss new file mode 100644 index 0000000..06062b6 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/layouts/talk-bubble.scss @@ -0,0 +1,58 @@ +.cw-talk-bubble { + margin: 10px 20px; + position: relative; + width: 85%; + height: auto; + background-color: var(--dark-gray-color-10); + float: left; + + .cw-talk-bubble-talktext { + padding: 1em; + text-align: left; + line-height: 1.5em; + + .cw-talk-bubble-talktext-time { + color: var(--dark-gray-color-80); + text-align: right; + font-size: 0.8em; + margin-bottom: -0.5em; + } + } + + &.cw-talk-bubble-own-post { + float: right; + } + + &:after { + content: ' '; + position: absolute; + width: 0; + height: 0; + top: 0px; + bottom: auto; + border: 22px solid; + border-color: var(--dark-gray-color-10) transparent transparent transparent; + left: -20px; + right: auto; + } + + &.cw-talk-bubble-own-post:after { + left: auto; + right: -20px; + } + + .cw-talk-bubble-user { + padding: 1em 1em 0 1em; + + .cw-talk-bubble-avatar { + display: inline-block; + } + + span { + padding-left: 4px; + color: var(--dark-gray-color-45); + font-weight: 600; + vertical-align: top; + } + } +} \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/layouts/tile.scss b/resources/assets/stylesheets/scss/courseware/layouts/tile.scss new file mode 100644 index 0000000..f4c795f --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/layouts/tile.scss @@ -0,0 +1,157 @@ +.cw-tiles { + list-style: none; + display: flex; + flex-wrap: wrap; + padding-left: 0; + row-gap: 5px; + column-gap: 5px; +} +.cw-tiles .tile, +.cw-tile { + height: 420px; + width: 270px; + margin: 0; + background-color: var(--base-color); + &:last-child { + margin-right: 0; + } + + @each $name, $color in $tile-colors { + &.#{'' + $name} { + background-color: $color; + } + } + + .preview-image { + height: 180px; + width: 100%; + background-size: 100% auto; + background-repeat: no-repeat; + background-color: var(--content-color-20); + background-position: center; + &.default-image { + @include background-icon(courseware, clickable, 128); + } + + .overlay-text { + padding: 6px 7px; + margin: 4px; + background-color: rgba(255, 255, 255, 0.8); + width: fit-content; + max-width: 100%; + height: 1.25em; + overflow: hidden; + text-overflow: ellipsis; + float: right; + text-align: right; + } + + .overlay-action-menu { + padding: 0; + margin: 0.25em; + background-color: rgba(255, 255, 255, 0.8); + width: fit-content; + max-width: 100%; + overflow: hidden; + float: right; + text-align: right; + .action-menu { + margin: 5px; + } + } + } + + .description { + height: 220px; + padding: 14px; + color: var(--white); + position: relative; + display: block; + + header { + font-size: 20px; + line-height: 22px; + color: var(--white); + border: none; + width: 240px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background-repeat: no-repeat; + background-position: 0 0; + + @each $type, $icon in $element-icons { + &.description-icon-#{$type} { + width: 212px; + padding-left: 28px; + @include background-icon(#{$icon}, info_alt, 22); + } + } + } + + .progress-wrapper { + width: 100%; + padding: 1em 0; + border: none; + background: none; + + progress { + appearance: none; + display: block; + width: 100%; + height: 3px; + margin: 0; + border: none; + background: rgba(0, 0, 0, 0.3); + &::-webkit-progress-bar { + background: rgba(0, 0, 0, 0.3); + } + &::-webkit-progress-value { + background: white; + } + &::-moz-progress-bar { + background: white; + } + } + } + + .description-text-wrapper { + overflow: hidden; + height: 10em; + margin-top: 0.5em; + display: -webkit-box; + margin-bottom: 1em; + -webkit-line-clamp: 7; + -webkit-box-orient: vertical; + p { + text-align: left; + } + } + + footer { + width: 242px; + text-align: right; + color: var(--white); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + img { + vertical-align: text-bottom; + } + } + } + + a[href].description { + transition: unset; + } + + a.description, + a.description:link, + a.description:visited, + a.description:hover { + height: 210px; + color: var(--white); + text-decoration: unset; + } +} diff --git a/resources/assets/stylesheets/scss/courseware/layouts/tree.scss b/resources/assets/stylesheets/scss/courseware/layouts/tree.scss new file mode 100644 index 0000000..5f976a2 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/layouts/tree.scss @@ -0,0 +1,163 @@ +.cw-tree { + ol { + list-style: none; + padding-left: 1.25em; + margin-bottom: 20px; + + &.cw-tree-root-list { + padding-left: 0; + + > li.cw-tree-item { + > .cw-tree-item-wrapper { + border-bottom: solid thin var(--content-color-40); + display: block; + + > a.cw-tree-item-link { + display: block; + font-size: 18px; + padding-left: 26px; + @include background-icon(courseware, clickable, 18); + background-repeat: no-repeat; + background-position: 3px 3px; + } + } + + ol { + padding-left: 0; + + > li.cw-tree-item { + margin: 28px 0 0 0; + + > .cw-tree-item-wrapper { + display: block; + border-bottom: solid thin var(--content-color-40); + margin-bottom: 12px; + + > a.cw-tree-item-link { + display: inline-block; + width: calc(100% - 4px); + padding-left: 4px; + font-size: 16px; + + &.cw-tree-item-link-edit { + width: calc(100% - 20px); + } + } + } + + ol { + padding-left: 0.25em; + + &.cw-tree-draggable-list { + padding-left: 1em; + } + + > li.cw-tree-item { + margin: 4px 0; + + > .cw-tree-item-wrapper { + border: none; + + > a.cw-tree-item-link { + display: inline-block; + border-bottom: none; + font-size: 14px; + width: calc(100% - 20px); + background-repeat: no-repeat; + padding-left: 18px; + margin-left: 4px; + margin-bottom: 0; + + &.cw-tree-item-link-edit { + width: calc(100% - 38px); + } + + @include background-icon(bullet-dot, clickable, 18); + + &:hover { + @include background-icon(bullet-dot, attention, 18); + } + + &.cw-tree-item-link-current { + @include background-icon(bullet-dot, info, 18); + } + } + } + + ol { + padding-left: 1em; + } + } + } + } + } + } + } + } + + .cw-sortable-handle { + vertical-align: middle; + } + + .cw-tree-item-link { + &:hover { + background-color: var(--light-gray-color-20); + color: var(--active-color); + } + + &.cw-tree-item-link-current { + color: var(--black); + font-weight: 600; + cursor: default; + + &::before { + color: var(--black); + } + } + + &.cw-tree-item-link-selected { + font-style: italic; + font-weight: 600; + } + + @each $type, $icon in $tree-item-flag-icons { + .cw-tree-item-flag-#{$type} { + display: inline-block; + width: 16px; + height: 16px; + vertical-align: top; + @include background-icon(#{$icon}, clickable, 16); + } + + &:hover .cw-tree-item-flag-#{$type} { + @include background-icon(#{$icon}, attention, 16); + } + + &.cw-tree-item-link-current .cw-tree-item-flag-#{$type} { + @include background-icon(#{$icon}, info, 16); + } + } + } + + .cw-tree-item-sequential { + display: inline-block; + position: absolute; + right: 8px; + + &.cw-tree-item-sequential-complete { + width: 16px; + height: 16px; + vertical-align: top; + @include background-icon(accept, info, 16); + } + + &.cw-tree-item-sequential-percentage { + color: var(--black); + font-size: 14px; + } + } + + .cw-tree-item-ghost { + opacity: 0.6; + } +} diff --git a/resources/assets/stylesheets/scss/courseware/shelf.scss b/resources/assets/stylesheets/scss/courseware/shelf.scss new file mode 100644 index 0000000..a7b3eab --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/shelf.scss @@ -0,0 +1,53 @@ +@use '../../mixins.scss' as *; + +.cw-contents-overview-teaser { + max-width: 782px; + background-color: var(--content-color-20); + background-image: url('#{$image-path}/courseware-keyvisual-negative.svg'); + background-repeat: no-repeat; + background-size: 196px; + background-position-y: 50%; + background-position-x: 24px; + padding: 24px; + margin-bottom: 10px; + + .cw-contents-overview-teaser-content { + padding-left: 220px; + + header { + font-size: 1.5em; + margin-bottom: 0.5em; + } + } +} + +.responsive-display { + .cw-contents-overview-teaser { + max-width: 782px; + background-size: 60%; + background-position-y: 24px; + background-position-x: 50%; + padding: 24px; + margin-bottom: 10px; + + .cw-contents-overview-teaser-content { + padding-top: 28%; + padding-left: 0; + text-align: justify; + + header { + font-size: 1.5em; + margin: 1em 0 0.5em 0; + text-align: center; + } + } + } +} + +.cw-unit-items, +.cw-shared-items { + margin-bottom: 10px; + h2 { + margin-top: 0; + } +} \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/sortable.scss b/resources/assets/stylesheets/scss/courseware/sortable.scss new file mode 100644 index 0000000..107b3a8 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/sortable.scss @@ -0,0 +1,57 @@ +@import '../drag-handle.scss'; + +.cw-sortable-handle { + @extend .drag-handle; + display: inline-block; + height: 24px; + &.cw-sortable-handle-dragging { + cursor: grabbing; + } +} + +.cw-block-item-sortable { + .cw-sortable-handle { + position: relative; + left: 4px; + } + .cw-block { + margin-top: -38px; + } +} + +.cw-container-item-sortable { + .cw-sortable-handle { + position: relative; + left: 4px; + } + .cw-container { + margin-top: -38px; + } +} + +.container-ghost, +.block-ghost { + opacity: 0.6; +} + + +.cw-container-wrapper-edit { + .cw-structural-element-list { + width: 100%; + padding: 0; + margin-top: 8px; + list-style: none; + } +} + +.cw-block-item-selected { + .cw-block-header { + font-style: italic; + } +} + +.cw-container-item-selected { + .cw-container-header { + font-style: italic; + } +} \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/structural-element.scss b/resources/assets/stylesheets/scss/courseware/structural-element.scss new file mode 100644 index 0000000..917684d --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/structural-element.scss @@ -0,0 +1,273 @@ +@use '../../mixins.scss' as *; +@import './variables.scss'; + +#course-courseware-index, +#contents-courseware-index, +#course-courseware-courseware, +#contents-courseware-courseware { + form.default input[type=date] { + max-width: 9em; + } +} + +.cw-structural-element { + &.cw-structural-element-consumemode { + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + padding: 0; + background-color: var(--white); + z-index: 1004; + overflow-y: scroll; + overflow-x: hidden; + scrollbar-width: thin; + scrollbar-color: var(--base-color) var(--dark-gray-color-5); + } + + .cw-welcome-screen { + .cw-welcome-screen-keyvisual { + margin: 14px 0 42px 0; + width: 100%; + height: 400px; + background-image: url('#{$image-path}/courseware-keyvisual.svg'); + background-repeat: no-repeat; + background-position: center center; + } + + header { + padding: 0.5em 0; + text-align: center; + font-size: 2.25em; + } + + .cw-welcome-screen-actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + } + } + + .cw-structural-element-discussion { + max-width: 1606px; + width: 100%; + margin-bottom: 1em; + } + + .cw-container-wrapper { + max-width: $max-content-width; + margin: 0; + padding: 0; + display: flex; + flex-wrap: wrap; + align-items: stretch; + justify-content: space-between; + + &.cw-container-wrapper-consume { + margin: 0 auto; + padding: 91px 15px 15px 15px; + } + + &.cw-container-wrapper-discuss { + max-width: 1606px; + } + } + + .cw-structural-element-description { + width: 400px; + height: 200px; + overflow-y: auto; + resize: none; + } + + .cw-structural-element-color { + color: var(--white); + &.black { + background-color: map-get($tile-colors, 'black'); + } + &.charcoal { + background-color: map-get($tile-colors, 'charcoal'); + } + &.royal-purple { + background-color: map-get($tile-colors, 'royal-purple'); + } + &.iguana-green { + background-color: map-get($tile-colors, 'iguana-green'); + } + &.queen-blue { + background-color: map-get($tile-colors, 'queen-blue'); + } + &.verdigris { + background-color: map-get($tile-colors, 'verdigris'); + } + &.mulberry { + background-color: map-get($tile-colors, 'mulberry'); + } + &.pumpkin { + background-color: map-get($tile-colors, 'pumpkin'); + } + &.sunglow { + background-color: map-get($tile-colors, 'sunglow'); + } + &.apple-green { + background-color: map-get($tile-colors, 'apple-green'); + } + + &.studip-blue { + background-color: map-get($tile-colors, 'studip-blue'); + } + &.studip-lightblue { + background-color: map-get($tile-colors, 'studip-lightblue'); + } + &.studip-red { + background-color: map-get($tile-colors, 'studip-red'); + } + &.studip-green { + background-color: map-get($tile-colors, 'studip-green'); + } + &.studip-yellow { + background-color: map-get($tile-colors, 'studip-yellow'); + } + &.studip-gray { + background-color: map-get($tile-colors, 'studip-gray'); + } + } + + .cw-structural-element-info { + width: 600px; + tr:first-child { + width: 12em; + vertical-align: top; + } + } + + .cw-companion-box-wrapper { + width: 100%; + max-width: $max-content-width; + } +} + +.cw-structural-element-dialog { + input[type='text'] { + width: 20em; + } +} + +.cw-structural-element-image-preview { + display: block; + max-height: 200px; + max-width: 400px; + width: auto; + height: auto; + margin: 0 auto; + padding-bottom: 1em; +} + +.cw-structural-element-image-preview-placeholder { + width: 356px; + height: 200px; + margin: 0 auto; + background-color: var(--content-color-20); + background-size: 100% auto; + background-repeat: no-repeat; + background-position: center; + @include background-icon(courseware, clickable, 128); + margin-bottom: 1em; +} + +.cw-element-permissions { + label { + display: block; + padding: 6px 0; + } + table.default { + > caption { + padding: 0; + font-size: 1.25em; + } + td.perm { + input.right, + input.date { + cursor: pointer !important; + } + } + } + button.cw-add-persons { + margin-left: 4px; + } + button.cw-permission-delete { + width: 24px; + height: 24px; + border: none; + background-color: transparent; + @include background-icon(trash, clickable); + background-repeat: no-repeat; + cursor: pointer; + } +} + +.cw-element-export { + label { + input { + vertical-align: middle; + } + + span { + vertical-align: middle; + } + } +} + +.studip-dialog-with-tab { + .studip-dialog-body .studip-dialog-content { + padding: 0 4px; + .cw-tab-in-dialog { + .cw-tabs-nav { + border: none; + border-bottom: solid thin var(--content-color-40); + margin-bottom: 4px; + } + .cw-tabs-content { + border: none; + min-width: 500px; + min-height: 400px; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--base-color) var(--dark-gray-color-5); + } + } + } +} + +@media only screen and (max-width: 1820px) { + .cw-structural-element .cw-container-wrapper.cw-container-wrapper-discuss { + max-width: $max-content-width; + .cw-container.cw-container-list.cw-container-item.cw-container-colspan-full { + .cw-default-block { + flex-flow: column; + .cw-discuss-wrapper { + margin-left: 0; + margin-top: 8px; + } + } + } + } +} + +@media only screen and (max-width: 1200px) { + .cw-structural-element .cw-container-wrapper.cw-container-wrapper-discuss { + max-width: $max-content-width; + .cw-container.cw-container-list.cw-container-item.cw-container-colspan-half, + .cw-container.cw-container-list.cw-container-item.cw-container-colspan-half-center { + .cw-default-block { + flex-flow: column; + .cw-discuss-wrapper { + margin-left: 0; + margin-top: 8px; + max-width: 540px; + } + } + } + } +} \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/variables.scss b/resources/assets/stylesheets/scss/courseware/variables.scss new file mode 100644 index 0000000..af97f92 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/variables.scss @@ -0,0 +1,205 @@ +$element-icons: ( + content: content2, + draft: category-draft, + task: category-task, + template: category-template, + oer: oer-campus, + other: category-others, + portfolio: category-portfolio +); + +$tree-item-flag-icons: ( + date: date, + write: edit, + cant-read: lock-locked2, +); + +$tile-colors: ( + black: #000, + charcoal: #3c454e, + royal-purple: #8656a2, + iguana-green: #66b570, + queen-blue: #536d96, + verdigris: #41afaa, + mulberry: #bf5796, + pumpkin: #f26e00, + sunglow: #ffca5c, + apple-green: #8bbd40, + studip-blue: #28497c, + studip-lightblue: #e7ebf1, + studip-red: #d60000, + studip-green: #008512, + studip-yellow: #ffbd33, + studip-gray: #636a71, +); + +$icon-colors:( + icon-white: #ffffff, + icon-black: #000000, + icon-red: #cb1800, + icon-blue: #24437c, + icon-green: #00962d, + icon-gray: #6e6e6e, + icon-yellow: #ffad00 +); +$border-colors:( + white: #ffffff, + black: #000000, + studip-red: #cb1800, + studip-blue: #24437c, + studip-green: #00962d, + studip-gray: #6e6e6e, + studip-yellow: #ffad00 +); + +$blockadder-items: ( + before-after: block-comparison, + canvas: block-canvas, + gallery: block-gallery, + image-map: block-imagemap, + audio: audio, + chart: vote, + code: computer, + confirm: accept, + date: date, + dialog-cards: dialog-cards, + document: file-text, + download: download, + embed: code, + folder: folder-full, + headline: block-eyecatcher, + iframe: door-enter, + lti: plugin, + key-point: exclaim-circle, + link: link-extern, + table-of-contents: table-of-contents, + text: edit, + timeline: date-cycle, + typewriter: block-typewriter, + video: video2, + biography-achievements: medal, + biography-career: ranking, + biography-personal-information: own-license, + biography-goals: radar +); + +$containeradder-items: ( + accordion: block-accordion, + list: view-list, + tabs: block-tabs, +); + +$cw-wrapper-gap: 0.5em; + +$icons: ( + accept, + add, + add-circle, + admin, + aladdin, + arr_1down, + arr_1left, + arr_1right, + arr_1up, + arr_2down, + arr_2left, + arr_2right, + arr_2up, + audio, + audio3, + billboard, + block-canvas, + block-comparison, + block-eyecatcher, + block-gallery, + block-gallery2, + block-imagemap, + brainstorm, + campusnavi, + chat2, + code, + community2, + computer, + consultation, + content, + courseware, + crown, + date-single, + decline, + decline-circle, + doctoral_cap, + download, + dropbox, + edit, + exclaim, + exclaim-circle, + export, + favorite, + filter, + globe, + graph, + group2, + group3, + group4, + home2, + info, + info-circle, + install, + institute, + key, + knife, + learnmodule, + lightbulb, + lightbulb2, + link2, + link3, + link-extern, + link-intern, + literature, + lock-locked, + lock-unlocked, + mail2, + medal, + metro, + microphone, + module, + network, + notification, + notification2, + opencast, + outer-space, + permalink, + person, + phone, + picture, + place, + plugin, + question, + question-circle, + ranking, + remove, + remove-circle, + resources, + roles, + schedule2, + search, + settings, + span-empty, + span-1quarter, + span-2quarter, + span-3quarter, + span-full, + spiral, + sport, + staple, + star, + star-empty, + star-halffull, + test, + tools, + topic, + ufo, + video2, + visibility-visible, + wizard +); \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/widgets.scss b/resources/assets/stylesheets/scss/courseware/widgets.scss new file mode 100644 index 0000000..d5db20c --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/widgets.scss @@ -0,0 +1,56 @@ +.cw-action-widget { + .cw-action-widget-show-toc { + @include background-icon(table-of-contents, clickable); + } + .cw-action-widget-edit { + @include background-icon(edit, clickable); + } + .cw-action-widget-sort { + @include background-icon(arr_1sort, clickable); + } + .cw-action-widget-add { + @include background-icon(add, clickable); + } + .cw-action-widget-info { + @include background-icon(info, clickable); + } + .cw-action-widget-star { + @include background-icon(star, clickable); + } + .cw-action-widget-trash { + @include background-icon(trash, clickable); + } + .cw-action-widget-oer { + @include background-icon(oer-campus, clickable); + } + .cw-action-widget-remove-lock { + @include background-icon(lock-unlocked, clickable); + } +} + +.cw-export-widget { + .cw-export-widget-export { + @include background-icon(export, clickable); + } + .cw-export-widget-export-pdf { + @include background-icon(export, clickable); + } + .cw-export-widget-oer { + @include background-icon(share, clickable); + } +} + +.cw-import-widget { + .cw-import-widget-archive { + @include background-icon(import, clickable); + } + .cw-import-widget-copy { + @include background-icon(copy, clickable); + } + .cw-import-widget-import { + @include background-icon(import, clickable); + } + .cw-action-widget-link { + @include background-icon(group, clickable); + } +} diff --git a/resources/assets/stylesheets/scss/courseware/wizards.scss b/resources/assets/stylesheets/scss/courseware/wizards.scss new file mode 100644 index 0000000..953f510 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/wizards.scss @@ -0,0 +1,57 @@ +.cw-element-selector-list { + list-style: none; + padding: 0; + + .cw-element-selector-item { + display: block; + width: 100%; + border: solid thin var(--content-color-40); + padding: 0.5em; + margin-bottom: 5px; + background-color: var(--white); + color: var(--base-color); + text-align: left; + cursor: pointer; + + &:hover { + color: var(--white); + background-color: var(--base-color); + } + } +} + +form.default .courseware-structural-element-selector { + list-style: none; + padding-left: 0; + + .courseware-structural-element-selector-item { + .radiobutton { + background: none; + border: none; + padding: 0; + } + + a label { + cursor: pointer; + } + + label { + display: inline-block; + margin-bottom: 0; + text-indent: 0; + vertical-align: middle; + } + + img { + vertical-align: middle; + &.inactive { + opacity: 0.5; + } + } + + ul { + list-style: none; + padding-left: 18px; + } + } +} diff --git a/resources/assets/stylesheets/scss/courseware_gradients.scss b/resources/assets/stylesheets/scss/courseware_gradients.scss deleted file mode 100644 index 97f8c7d..0000000 --- a/resources/assets/stylesheets/scss/courseware_gradients.scss +++ /dev/null @@ -1,150 +0,0 @@ -.faded-sun { - background: radial-gradient( - ellipse farthest-side at 76% 77%, - rgba(245, 228, 212, 0.25) 4%, - rgba(255, 255, 255, 0) calc(4% + 1px) - ), - radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), - linear-gradient(135deg, #ff0000 0%, #000036 100%), - radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), - linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%); - background-blend-mode: normal, normal, screen, overlay, normal; -} - -.romantic-sun { - background: linear-gradient(180deg, #ffb7b7 0%, #727272 100%), - radial-gradient(60.91% 100% at 50% 0%, #ffd1d1 0%, #260000 100%), - linear-gradient(238.72deg, #ffdddd 0%, #720066 100%), - linear-gradient(127.43deg, #00ffff 0%, #ff4444 100%), - radial-gradient(100.22% 100% at 70.57% 0%, #ff0000 0%, #00ffe0 100%), - linear-gradient(127.43deg, #b7d500 0%, #3300ff 100%); - background-blend-mode: screen, overlay, hard-light, color-burn, color-dodge, normal; -} - -.bright-rain { - background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%), - linear-gradient(121.28deg, #669600 0%, #ff0000 100%), - linear-gradient(360deg, #0029ff 0%, #8fff00 100%), - radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%), - radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%); - background-blend-mode: screen, color-dodge, overlay, difference, normal; -} - -.soft-weather { - background: radial-gradient(80.99% 100% at 50% 0%, #00ff0a 0%, #36008e 100%), - radial-gradient(50% 123.47% at 50% 50%, #efe7c8 0%, #36008e 100%), - linear-gradient(301.28deg, #ff006b 0%, #48dd9e 100%), - linear-gradient(294.84deg, #5a60e4 0%, #d30000 100%), - linear-gradient(52.29deg, #000000 0%, #00ff85 100%), - radial-gradient(100% 138.69% at 100% 0%, #0007a5 0%, #ff7a00 100%), - radial-gradient(70.41% 100% at 50% 0%, #d5b300 0%, #2200aa 100%); - background-blend-mode: screen, screen, lighten, overlay, lighten, difference, normal; -} - -.blue-bar { - background: linear-gradient( - 123deg, - #e7ebf1 0%, - #e7ebf1 40%, - #d4dbe5 calc(40% + 1px), - #d4dbe5 60%, - #7e92b0 calc(60% + 1px), - #7e92b0 75%, - #28497c calc(75% + 1px), - #28497c 100% - ); -} -.green-bar { - background: linear-gradient( - 123deg, - #c5dea0 0%, - #c5dea0 40%, - #8bbd40 calc(40% + 1px), - #8bbd40 60%, - #129c94 calc(60% + 1px), - #129c94 75%, - #66b570 calc(75% + 1px), - #66b570 100% - ); -} - -.paper { - background-image: repeating-linear-gradient(0deg, #d8dadc 0px, #d8dadc 1px, transparent 1px, transparent 23px), - repeating-linear-gradient(90deg, #d8dadc 0px, #d8dadc 1px, transparent 1px, transparent 23px), - linear-gradient(#ffffff, #ffffff); -} -.blueprint { - background: #28497c; - background-image: - radial-gradient(circle at center center, transparent 0%, #28497c 200%), - repeating-linear-gradient(0deg, #536d96 0px, #536d96 1px, transparent 1px, transparent 12px), - repeating-linear-gradient(90deg, #536d96 0px, #536d96 1px, transparent 1px, transparent 12px), - repeating-linear-gradient(0deg, #536d96 0px, #536d96 2px, transparent 1px, transparent 60px), - repeating-linear-gradient(90deg, #536d96 0px, #536d96 2px, transparent 1px, transparent 60px), - linear-gradient(#1f3f70, #1f3f70); -} - -.color-blue { - background: #28497c; - background: -webkit-linear-gradient(90deg, #28497c, #28497c, #7e92b0); - background: linear-gradient(90deg, #28497c, #28497c, #7e92b0); -} -.color-purple { - background: #682c8b; - background: -webkit-linear-gradient(90deg, #682c8b, #682c8b, #a480b9); - background: linear-gradient(90deg, #682c8b, #682c8b, #a480b9); -} -.color-violet { - background: #af2d7b; - background: -webkit-linear-gradient(90deg, #af2d7b, #af2d7b, #cf81b0); - background: linear-gradient(90deg, #af2d7b, #af2d7b, #cf81b0); -} -.color-red { - background: #d60000; - background: -webkit-linear-gradient(90deg, #d60000, #d60000, #e76666); - background: linear-gradient(90deg, #d60000, #d60000, #e76666); -} -.color-orange { - background: #f26e00; - background: -webkit-linear-gradient(90deg, #f26e00, #f26e00, #f7a866); - background: linear-gradient(90deg, #f26e00, #f26e00, #f7a866); -} -.color-yellow { - background: #ffbd33; - background: -webkit-linear-gradient(90deg, #ffbd33, #ffbd33, #ffd785); - background: linear-gradient(90deg, #ffbd33, #ffbd33, #ffd785); -} -.color-green { - background: #6ead10; - background: -webkit-linear-gradient(90deg, #6ead10, #6ead10, #a8ce70); - background: linear-gradient(90deg, #6ead10, #6ead10, #a8ce70); -} -.color-petrol { - background: #129c94; - background: -webkit-linear-gradient(90deg, #129c94, #129c94, #70c3bf); - background: linear-gradient(90deg, #129c94, #129c94, #70c3bf); -} -.color-grey { - background: #3c454e; - background: -webkit-linear-gradient(90deg, #3c454e, #3c454e, #898f94); - background: linear-gradient(90deg, #3c454e, #3c454e, #898f94); -} - -.grid { - background-image: radial-gradient(circle at center center, transparent 0%, #000000 95%), - repeating-linear-gradient( - 45deg, - #3c454e 0, - #3c454e 1px, - transparent 1px, - transparent 7px - ), - repeating-linear-gradient( - 135deg, - #3c454e 0, - #3c454e 1px, - transparent 1px, - transparent 14px - ), - linear-gradient(135deg, #000000, #000000); -} diff --git a/resources/assets/stylesheets/scss/progress_indicator.scss b/resources/assets/stylesheets/scss/progress_indicator.scss index 55358f4..1bf0d1a 100644 --- a/resources/assets/stylesheets/scss/progress_indicator.scss +++ b/resources/assets/stylesheets/scss/progress_indicator.scss @@ -3,6 +3,10 @@ display: flex; flex-direction: column; + &.loading-indicator-content { + margin-top: 76px; + } + .progress-indicator { width: 100%; background-image: url("#{$image-path}/loading-indicator.svg"); diff --git a/resources/vue/components/blubber/Panel.vue b/resources/vue/components/blubber/Panel.vue index 12f15a2..f70d1f6 100644 --- a/resources/vue/components/blubber/Panel.vue +++ b/resources/vue/components/blubber/Panel.vue @@ -1,6 +1,6 @@