Forked from
Stud.IP / Stud.IP
2186 commits behind the upstream repository.
-
Ron Lucke authoredCloses #2689 Merge request studip/studip!1754
Ron Lucke authoredCloses #2689 Merge request studip/studip!1754
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
courseware.scss 139.45 KiB
@import "courseware_gradients.scss";
/* definitions */
$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,
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: $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: #CCCCDD;
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: $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: $white;
z-index: 40;
}
.cw-ribbon-sticky-top {
position: fixed;
top: 40px;
height: 20px;
width: calc(100% - 314px);
background-color: $white;
z-index: 39;
}
.cw-ribbon-sticky-bottom {
position: fixed;
top: 110px;
height: 16px;
width: calc(100% - 314px);
background-color: $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 $dark-gray-color-30;
margin-bottom: 15px;
padding: 1em;
justify-content: space-between;
background-color: $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: $base-color;
text-decoration: none;
&:hover {
color: $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: $white;
border: solid thin $content-color-40;
box-shadow: 2px 2px #ccc;
position: absolute;
right: -570px;
top: 0;
height: 100%;
max-width: calc(100% - 28px);
display: flex;
flex-flow: row;
transition: right 0.8s;
z-index: 42;
&.unfold {
right: 0px;
}
&.cw-ribbon-tools-consume {
position: fixed;
&.unfold {
right: 15px;
}
}
&.cw-ribbon-tools-sticky {
position: absolute;
top: -1px;
}
.cw-ribbon-tool-content {
height: 100%;
width: 540px;
background-color:$white;
padding: 0; overflow: hidden;
.cw-ribbon-tool-content-nav {
position: sticky;
height: 100%;
top: 0;
background-color: $white;
margin: 0;
padding: 0;
color: $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: #fff;
}
>.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 $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: $base-color $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: $base-color $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: 14px;
}
}
.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: $white;
z-index: 1004;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: $base-color #f5f5f5;
}
.cw-welcome-screen {
.cw-welcome-screen-keyvisual {
margin: 14px 0 42px 0;
width: 100%;
height: 400px;
background-image: url('../../assets/images/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: $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-width: 300px;
max-height: 256px;
width: auto;
height: auto;
margin: 0 auto;
}
.cw-structural-element-image-preview-placeholder {
width: 400px;
height: 225px;
background-color: $black;
}
.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: $content-color-20;
max-height: 30px;
padding: 4px 10px 4px 22px;
.cw-container-header-toggle {
display: inline-block;
width: calc(100% - 40px);
}
span {
color: $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-content {
border: solid thin $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 $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: $content-color-20;
max-height: 30px;
padding: 4px 10px 4px 22px;
.cw-block-header-toggle {
display: inline-block;
width: calc(100% - 50px);
}
span {
color: $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: $content-color-20;
color: $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: $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 $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 $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 $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: $light-gray-color-20;
color: $active-color;
}
&.cw-tree-item-link-current {
color: $black;
font-weight: 600;
cursor: default;
&::before {
color: $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: $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 $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: $content-color-20;
padding: 0.5em 2em;
margin: 0;
font-weight: 600;
color: $base-color;
cursor: pointer;
&.cw-collapsible-open {
@include background-icon(arr_1down, clickable);
}
img {
vertical-align: middle;
}
}
.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 $content-color-40;
border-bottom: none;
button {
background-color: $white;
border: none;
padding: 1em 0 4px 0;
margin: 0 7px 0 21px;
color: $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 $dark-gray-color-75; transform: scaleX(0);
transition: transform 300ms ease-in-out;
}
&.is-active,
&:hover {
color: $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 $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 $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: $base-color #f5f5f5;
}
}
}
}
.cw-tabs {
.cw-tab {
display: none;
height: 0;
&.cw-tab-active {
display: block;
height: unset;
padding: 4px 8px;
}
form.default {
padding-left: 10px;
}
}
&.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 $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: $base-color #f5f5f5;
.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: #fff;
.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-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: $white;
border: solid thin $content-color-40; padding: 1em 0;
color: $base-color;
text-align: center;
width: 100%;
font-weight: 600;
cursor: pointer;
&:hover {
border-color: $base-color;
}
&.cw-block-adder-active {
border: solid thin $base-color;
background-color: $base-color;
color: $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 $content-color-40;
cursor: pointer;
&:hover {
border-color: $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;
}
}
}
/* * * * * * * * * * * * *
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 $content-color-40;
background-color: $white;
background-repeat: no-repeat;
background-position: 1em center;
background-size: 100px;
box-shadow: 5px 5px #ececed;
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: $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 $content-color-40;
background-color: $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 $content-color-40;
padding-top: 1em;
textarea {
width: calc(100% - 6px);
resize: none;
border: solid thin $content-color-40;
&:active {
border: solid thin $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 $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;
span {
color: $base-color;
cursor: pointer;
&:hover {
color: $active-color;
}
}
}
.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 $content-color-40;
padding: 0 1em 0 1em;
.cw-dashboard-empty-info {
margin-top: 10px;
}
}
}
.cw-unit-progress-item {
display: block;
border-bottom: solid thin $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: $base-color;
font-size: xx-large;
.cw-progress-circle {
font-size: 12px;
margin: 4px;
}
}
.cw-unit-progress-item-description {
color: $base-color;
padding-left: 14px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
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: $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: $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 $base-color;
box-sizing: border-box;
}
&.over50 .first50-bar { position: absolute;
clip: rect(0, 5em, 5em, 2.5em);
background-color: $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 $content-color-40;
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
color: white;
text-align: center;
white-space: nowrap;
background-color: $base-color;
}
}
}
/* * * * * *
b l o c k s
* * * * * */
.cw-block-title {
padding: 4px;
background-color: $content-color-20;
color: $base-color;
font-weight: 700;
text-align: center;
border: solid thin $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 $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: $base-color;
}
.ui-widget-header {
background-color: $dark-gray-color-5;
}
.ui-slider-handle {
border-radius: 20px;
width: 1em;
height: 1.7em;
top: -0.5em;
background-color: $dark-gray-color-20;
border-color: $content-color-40;
cursor: pointer;
margin-left: -2px;
}
}
.cw-audio-button {
border: solid thin $content-color-40;
background-color: $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: $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: $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: $dark-gray-color-20;
}
.cw-audio-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 9px; /* 1 */
height: 18px;
background: $white;
box-shadow: -100vw 0 0 100vw $base-color;
border: solid thin $content-color-40;
}
.cw-audio-range::-moz-range-track {
height: 18px;
background: $dark-gray-color-10;
}
.cw-audio-range::-moz-range-thumb {
background: $white;
height: 18px;
width: 9px;
border: solid thin $content-color-40;
border-radius: 0 !important;
box-shadow: -100vw 0 0 100vw $base-color;
box-sizing: border-box;
}
.cw-audio-range::-ms-fill-lower {
background: $base-color;
}
.cw-audio-range::-ms-thumb {
background: $white;
border: solid thin $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: $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 $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 $content-color-40;
}
li {
margin: 0 1em;
&:not(:last-child) {
border-bottom: solid thin $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: $base-color;
&:hover {
color: $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 $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 $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: $dark-gray-color-5;
color: black;
border: solid thin $content-color-40;
}
.hljs-comment,
.hljs-quote,
.hljs-variable {
color: $dark-green;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-selector-class,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: $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: $orange-80;
font-weight: 400;
}
.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
color: $petrol;
font-weight: 400;
}
.hljs-doctag {
color: $dark-gray-color-75;
font-weight: 400;
}
.hljs-attr {
color: $active-color;
font-weight: 400;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link {
color: $petrol; font-weight: 400;
}
.hljs-emphasis {
font-style: italic;
font-weight: 400;
}
.hljs-strong {
font-weight: 600;
}
.code-lang {
background: $dark-gray-color-5;
border: solid thin $content-color-40;
border-top: none;
padding: 5px 10px;
text-align: right;
color: $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 $content-color-40;
padding: 1em;
display: flex;
.cw-block-confirm-checkbox img{
margin-right: 2em;
vertical-align: middle;
height: 100%;
}
.cw-block-confirm-text {
margin: 0;
}
}
}
/* * * * * * * * * * * * * * * *
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 $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 $content-color-40; width: calc(100% - 2px);
}
.cw-block-iframe-cc-data {
border: solid thin $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
* * * * * * * * * * * * * */
/* * * * * * * * * * * *
f o l d e r b l o c k
* * * * * * * * * * * */
.cw-block-folder-info {
border: solid thin $content-color-40;
padding: 10px 10px 0 10px;
overflow: hidden;
border-bottom: none;
}
.cw-block-folder-list {
border: solid thin $content-color-40;
padding: 0;
list-style: none;
.cw-block-folder-file-item { list-style: none;
&:not(:last-child) {
border-bottom: solid thin $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 $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: $black;
@include background-icon(folder-empty, info, 24);
}
&.cw-block-file-icon-none {
color: $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: $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 $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;
&:hover {
background-color: $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 $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 $content-color-40;
color: $base-color;
height: 20px;
padding: 1em;
.cw-link-title {
margin-left: 3em;
}
&:hover {
background-color: $base-color;
border: solid thin $base-color;
color: $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: $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: $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: $white;
background-repeat: no-repeat;
background-position: 95% 95%;
}
.card__face--back {
@include background-icon(arr_1left, clickable);
background-color: $white;
background-repeat: no-repeat;
background-position: 5% 95%;
transform: rotateY(180deg);
}
}
.cw-dialogcards-navbutton {
color: transparent;
width: 35px;
height: 35px;
background-color: #bbb;
border-radius: 2px;
background-position: 50%;
background-repeat: no-repeat;
background-color: $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: $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);
margin-bottom: 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 $content-color-40;
li {
&:not(:last-child) {
border-bottom: solid thin $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 $content-color-40;
li {
&:not(:last-child) {
border-bottom: solid thin $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: $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: $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: $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: $white;
padding: 20px;
transition: all $transition-duration ease;
h3 {
padding: 15px;
color: #fff;
margin: -20px -20px 0 -20px;
font-weight: 700;
min-height: 1.1em;
}
article {
min-height: 2em;
border: solid thin $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();
}
/* * * * * * * * * * * *
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: $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: auto 180px;
background-repeat: no-repeat;
background-color: $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: $white;
position: relative;
display: block;
header {
font-size: 20px;
line-height: 22px;
color: $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: $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: $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 $content-color-40;
}
.cw-template-preview-container-title {
font-weight: 700;
padding: 4px 4px 4px 8px;
color: $base-color;
background-color: $content-color-20;
}
.cw-template-preview-blocks {
border: solid thin $content-color-40;
padding: 1em;
margin: 5px;
background-color: $white;
}
}
}
/* courseware template preview end*/
/* * * * * * * * * *
i n p u t f i l e
* * * * * * * * * */
.cw-file-input {
width: stretch;
border: solid thin $base-color;
font-size: 14px;
cursor: pointer;
&::file-selector-button {
font-family: inherit;
border: none;
border-right: solid thin $base-color;
background-color: $white;
padding: 6px 15px;
margin-right: 10px;
color: $base-color;
&:hover { background-color: $base-color;
color: $white;
}
}
}
.cw-file-input-change {
border: solid thin $base-color;
button.button {
padding: 0.5em 1.5em;
margin: 0 0 0 -1px;
line-height: 100%;
border: none;
border-right: solid thin $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 $content-color-40;
padding: 0.5em; margin-bottom: 5px;
background-color: $white;
color: $base-color;
text-align: left;
cursor: pointer;
&:hover {
color: $white;
background-color: $base-color;
}
}
}
/* * * * * * * * * * * * * * * * * *
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
* * * * * * * * * * * * * * * * * * * */