Forked from
Stud.IP / Stud.IP
3843 commits behind the upstream repository.
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
courseware.scss 95.38 KiB
/* definitions */
$companion-types: (
default: basic,
unsure: unsure,
special: special,
alert: alert,
sad: sad,
happy: happy,
pointing: pointing-right
);
$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-red: #cb1800,
icon-blue: #24437c,
icon-green: #00962d,
icon-gray: #6e6e6e,
icon-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,
typewriter: wizard,
video: video2,
accordion: block-accordion,
list: view-list,
tabs: block-tabs
);
$media-buttons: (
play: play,
stop: stop, pause: pause,
prev: arr_eol-left,
next: arr_eol-right
);
/* * * * * * * *
c o n t e n t s
* * * * * * * * */
.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;
}
}
}
}
/* * * * * * * * * * *
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-index,
#contents-courseware-courseware {
#layout_container {
overflow-x: hidden;
position: relative;
#layout_content {
overflow: hidden;
}
}
}
.cw-ribbon-wrapper-consume {
position: fixed;
padding: 1em;
background-color: $white;
width: $consum_ribbon_width;
height: 46px;
z-index: 42;
}
.cw-ribbon-consume-bottom {
position: fixed;
top: 74px;
height: 8px;
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: 40;
}
.cw-ribbon-sticky-bottom {
position: fixed;
top: 112px;
height: 19px;
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: 56px;
width: calc(100% - 344px);
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 {
min-width: 75px;
}
.cw-ribbon-breadcrumb { font-size: 1.25em;
line-height: 1.5em;
ul {
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;
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 12em;
}
a {
color: $base-color;
text-decoration: none;
&:hover {
color: $active-color;
}
}
&.cw-ribbon-breadcrumb-item-current {
cursor: default;
}
}
}
}
}
.cw-ribbon-wrapper-right {
display: flex;
}
.cw-ribbon-button {
height: 24px;
width: 24px;
margin: 0 0.5em;
border: none;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 24px;
cursor: pointer;
outline: none;
&.cw-ribbon-button-menu {
@include background-icon(table-of-contents, clickable, 24);
}
&.cw-ribbon-button-zoom {
@include background-icon(fullscreen-on, clickable, 24);
}
&.cw-ribbon-button-zoom-out {
@include background-icon(fullscreen-off, 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: 15px;
height: calc(100% - 32px);
max-height: 760px;
max-width: calc(100% - 28px);
display: flex;
flex-flow: row;
transition: right 0.8s;
z-index: 42;
&.unfold {
right: 12px;
}
&.cw-ribbon-tools-consume {
position: fixed;
}
&.cw-ribbon-tools-sticky {
position: fixed;
top: 56px;
}
.cw-ribbon-tool-content {
height: 100%;
width: 540px;
background-color:$white;
padding: 0;
overflow: hidden;
.cw-ribbon-tool-content-nav {
position: sticky;
top: 0;
background-color: $white; margin: 0;
padding: 10px 0 0 0;
color: $base-color;
display: flex;
border-bottom: solid thin $content-color-40;
z-index: 43;
.cw-tools-hide-button {
border: none;
height: 36px;
width: 24px;
min-width: 24px;
margin-right: 1em;
padding: 0 4px;
float: right;
@include background-icon(decline, clickable, 24);
background-repeat: no-repeat;
background-size: 24px;
background-position: center right;
background-color: #fff;
outline: none;
cursor: pointer;
}
ul {
list-style-type: none;
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
li {
padding: 0 8px;
margin-top: 8px;
text-align: center;
flex-grow: 0.5;
cursor: pointer;
&:after {
display: block;
content: '';
border-bottom: solid 3px $dark-gray-color-75;
transform: scaleX(0);
transition: transform 300ms ease-in-out;
margin: 17px 0 0 0;
}
&.active,
&:hover {
color: $black;
&:after {
transform: scaleX(1);
}
}
}
&:hover li {
&.active::after {
transform: scaleX(0);
}
&:hover::after {
transform: scaleX(1);
}
}
}
.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;
}
}
}
.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-wellcome-screen {
.cw-wellcome-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-wellcome-screen-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
.cw-container-wrapper {
max-width: 1115px;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: stretch;
&.cw-container-wrapper-consume {
margin: 0 auto;
padding: 6em 1em 1em 1em;
}
}
.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;
}
}
}
.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: 1095px;
width: 100%;
}
&.cw-container-colspan-half {
max-width: 540px;
width: 100%;
margin-right: 15px;
}
&.cw-container-colspan-half-center {
width: 1095px;
.cw-container-content {
width: 540px;
margin: auto;
}
}
.cw-container-header {
background-color: $content-color-20;
max-height: 30px;
padding: 4px 10px;
span {
color: $base-color;
font-weight: 700;
line-height: 2em;
font-size: 1.1em;
}
.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;
width: 640px;
fieldset {
margin-right: 4px;
}
}
/* * * * * * *
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;
}
}
.cw-content-wrapper-active {
border: solid thin $content-color-40;
.cw-block-content {
padding: 0.5em;
}
}
.cw-block-header {
background-color: $content-color-20;
max-height: 30px;
padding: 4px 10px;
span { color: $base-color;
font-weight: 700;
line-height: 2em;
font-size: 1.1em;
}
.cw-block-actions {
position: relative;
float: right;
margin-top: 4px;
.is-open{
z-index: 30;
}
}
}
.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-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;
outline: none;
}
.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
* * * * * */
/* * * * *
t r e e
* * * * */
.cw-tree {
ul {
list-style: none;
padding-left: 1.25em;
margin-bottom: 20px;
&.cw-tree-chapter-list,
&.cw-tree-root-list {
padding-left: 0;
}
.cw-tree-item-is-root,
.cw-tree-item-first-level {
font-size: 16px;
border-bottom: solid thin $content-color-40;
.cw-tree-item-link { padding-left: 3px;
}
}
.cw-tree-item-is-root{
display: block;
font-size: 18px;
.cw-tree-item-link {
padding-left: 24px;
@include background-icon(courseware, clickable, 18);
background-repeat: no-repeat;
background-position: 3px 3px;
&:hover {
@include background-icon(courseware, attention, 18);
}
&.cw-tree-item-link-current {
@include background-icon(courseware, info, 18);
}
}
}
.cw-tree-item-first-level {
margin: 28px 0 12px 0;
&:hover {
background-color: $content-color-20;
}
}
.cw-tree-item-link {
display: inline-block;
width: calc(100% - 14px);
text-align: justify;
&:hover {
background-color: $light-gray-color-20;
color: $active-color;
}
&::before {
content: '\2022';
color: $base-color;
font-weight: 700;
width: 1em;
margin-left: -1em;
margin-right: 4px;
vertical-align: top;
}
&.cw-tree-item-link-current {
color: $black;
font-weight: 600;
&::before {
color: $black;
}
}
}
}
.cw-tree-item-first-level,
.cw-tree-item-is-root {
.cw-tree-item-link::before{
content: '';
width: 0;
margin: 0;
}
}
.cw-tree-item {
margin-bottom: 5px;
div {
display: inline; &.cw-tree-item-is-root,
&.cw-tree-item-first-level{
display: block;
}
}
}
}
/* * * * * * *
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;
height: 34px;
&.cw-collapsible-open {
height: unset;
}
.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 {
padding: 0;
visibility: hidden;
height: 0;
&.cw-collapsible-content-open {
visibility: visible;
height: unset;
padding: 10px;
}
}
}
/* * * * * * * * * * * * * * * * * *
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;
li {
background-color: $white;
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;
}
}
&.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 {
display: flex;
list-style: none;
padding: 0;
margin: 0;
border: solid thin $content-color-40;
border-bottom: none;
.cw-tools-element-adder-tab {
background-color: $white;
padding: 1em 1.5em 0 1.5em;
margin: 0 1em;
color: $base-color;
cursor: pointer;
text-align: center;
flex-grow: 1;
&:after {
display: block; margin-top: 4px;
content: '';
border-bottom: solid 3px $dark-gray-color-75;
transform: scaleX(0);
transition: transform 300ms ease-in-out;
}
&.active,
&:hover {
color: $black;
&:after {
transform: scaleX(1);
}
}
}
&:hover .cw-tools-element-adder-tab{
&.active::after {
transform: scaleX(0);
}
&:hover::after {
transform: scaleX(1);
}
}
}
.cw-tools-element-adder {
padding-bottom: 4em;
}
.cw-blockadder-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 $blockadder-items {
&.cw-blockadder-item-#{$item} {
@include background-icon($icon, clickable, 48);
}
}
.cw-blockadder-item-title {
font-weight: 600;
}
}
.cw-block-adder-area {
border: solid thin $content-color-40;
padding: 1em 0;
color: $base-color;
text-align: center;
width: 100%;
font-weight: 600;
cursor: pointer;
&.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-element-adder-favs-wrapper {
display: flex;
.cw-element-adder-all-blocks {
&.fav-edit-active {
.cw-blockadder-item {
height: 5em;
}
}
}
.cw-element-adder-favs {
.cw-block-fav-item {
@include background-icon(star-empty, clickable, 48);
background-position: center;
background-repeat: no-repeat;
height: 5em;
width: 5em;
padding: 1em;
margin: 0 0 4px 4px;
border: solid thin $content-color-40;
cursor: pointer;
&:hover {
border-color: $base-color;
}
&.cw-block-fav-item-active {
@include background-icon(star, clickable, 48);
}
}
}
}
/* * * * * * * * * * * * *
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-container-wrapper {
.cw-companion-box-wrapper {
width: 100%;
}
}
/* * * * * * * * * * * * * * * * * *
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-view-widget {
li {
color: $base-color;
&:hover {
color: $active-color;
cursor: pointer;
}
&.active {
padding-left: 10px !important;
}
}
}
.cw-action-widget {
.cw-action-widget-edit{
@include background-icon(edit, 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-export{
@include background-icon(export, clickable);
}
.cw-action-widget-oer{
@include background-icon(oer-campus, 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-block-feedback-items,
.cw-block-comments-items {
min-height: 1em;
max-height: 225px;
overflow-y: auto;
overflow-x: hidden;
margin: -1em -1em 0em -0.5em;
scroll-behavior: smooth;
}
.cw-talk-bubble {
margin: 10px 20px;
position: relative;
width: 80%;
height: auto;
background-color: $dark-gray-color-10;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
float: left;
.cw-talk-bubble-talktext {
padding: 1em;
text-align: left;
line-height: 1.5em;
.cw-talk-bubble-talktext-time {
color: $dark-gray-color-45;
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: $dark-gray-color-10 transparent transparent transparent;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
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: $dark-gray-color-45;
font-weight: 600;
vertical-align: top;
}
}
}
.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;
}
}
/* * * * * * * * * * * * * * * * * * * * * *
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 i a l o g
* * * * * */
.studip-dialog-backdrop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: fade-out($base-color, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 3001;
}
.studip-dialog-body {
position: absolute;
background: $white;
box-shadow: 0 0 8px fade-out($black, 0.5);
overflow-x: auto;
display: flex;
flex-direction: column;
padding: 3px;
margin: 3px;
max-height: 98vh;
.studip-dialog-header,
.studip-dialog-footer {
padding: 7px;
display: flex;
}
.studip-dialog-header {
background: $base-color none repeat scroll 0 0;
border-bottom: 1px solid $dark-gray-color-10;
color: $white;
justify-content: space-between;
font-size: 1.3em;
padding: 0.5em 1em;
cursor: grab;
&.drag-active {
cursor: grabbing;
}
}
.studip-dialog-close-button {
@include background-icon(decline, info-alt, 16);
background-repeat: no-repeat;
background-position-y: center;
width: 22px;
height: 22px;
margin-right: -10px;
margin-left: 2em;
cursor: pointer;
outline: none;
}
.studip-dialog-content {
color: $black;
position: relative;
padding: 15px;
overflow-y: auto;
min-width: 100%;
// resize: both;
box-sizing: border-box;
}
.studip-dialog-footer {
border-top: 1px solid $dark-gray-color-10;
justify-content: center;
}
&.studip-dialog-warning,
&.studip-dialog-alert {
.studip-dialog-content {
padding: 15px 15px 15px 62px;
background-position: 12px center;
background-repeat: no-repeat;
box-sizing: border-box;
display: flex;
align-items: center;
}
}
&.studip-dialog-alert {
.studip-dialog-header {
background: $active-color none repeat scroll 0 0;
}
.studip-dialog-content {
@include background-icon(question-circle-full, attention, 32);
}
}
&.studip-dialog-warning {
.studip-dialog-header {
color: $black;
background: $activity-color none repeat scroll 0 0;
}
.studip-dialog-close-button {
@include background-icon(decline, info);
}
.studip-dialog-content {
@include background-icon(question-circle-full, status-yellow, 32);
}
}
}
/* * * * * * * * *
d i a l o g e n d
* * * * * * * * */
/* * * * * * * * *
d a s h b o a r d
* * * * * * * * */
.cw-dashboard {
display: flex;
// TODO: Fixed width?
width: 1112px;
flex-wrap: wrap;
.cw-dashboard-box { margin-bottom: 1em;
margin-right: 1em;
&.cw-dashboard-box-full {
// TODO: Fixed width?
width: 1095px;
}
&.cw-dashboard-box-half {
// TODO: Fixed width?
width: 540px;
}
}
.cw-dashboard-overview {
display: flex;
justify-content: space-evenly;
.cw-oblong {
margin-right: 1em;
}
}
.cw-dashboard-progress {
.cw-dashboard-progress-breadcrumb {
span {
color: $base-color;
cursor: pointer;
&:hover {
color: $active-color;
}
}
}
.cw-dashboard-progress-chapter {
text-align: center;
h1 {
border: none;
margin: 0;
padding: 0;
}
.cw-progress-circle {
font-size: 18px;
margin: 1em auto;
&.cw-dashboard-progress-current {
font-size: 12px;
margin: -4.5em 0 2em 260px;
}
}
}
.cw-dashboard-progress-subchapter-list {
border-top: solid thin $content-color-40;
margin: -0.5em;
height: 300px;
overflow-y: scroll;
overflow-x: hidden;
padding: 1em;
scrollbar-width: thin;
scrollbar-color: $base-color $dark-gray-color-5;
}
}
}
.cw-dashboard-progress-item {
border-bottom: solid thin $content-color-40;
width: 492px;
cursor: pointer;
&:hover{
background-color: hsla(217,6%,45%,.2);
}
&:last-child {
border: none;
}
.cw-dashboard-progress-item-value,
.cw-dashboard-progress-item-description {
display: inline-block;
height: 70px;
vertical-align: top;
line-height: 70px;
}
.cw-dashboard-progress-item-value {
width: 70px;
color: $base-color;
font-size: xx-large;
.cw-progress-circle {
font-size: 12px;
margin: 4px;
}
}
.cw-dashboard-progress-item-description {
width: 404px;
color: $base-color;
padding-left: 14px;
}
}
.cw-dashboard-activities {
max-height: 476px;
list-style: none;
padding: 0;
margin: -0.5em;
scrollbar-width: thin;
scrollbar-color:$base-color #f5f5f5;
overflow-y: auto;
overflow-x: hidden;
.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-activity-item-text {
padding-left: 23px;
}
}
a{
}
}
}
/* * * * * * * * * * * *
d a s h b o a r d e n d* * * * * * * * * * * */
/* * * * * *
o b l o n g
* * * * * */
.cw-oblong-large {
border: solid thin $base-color;
width: 520px;
.cw-oblong-value,
.cw-oblong-description {
display: inline-block;
height: 90px;
vertical-align: top;
line-height: 90px;
text-align: center;
}
.cw-oblong-value {
width: 90px;
color: $base-color;
font-size: xx-large;
}
.cw-oblong-description {
width: 426px;
background-color: $base-color;
color: $white;
img {
vertical-align: middle;
margin-right: 4px;
}
}
}
.cw-oblong-small {
border: solid thin $base-color;
width: 271px;
.cw-oblong-value,
.cw-oblong-description {
display: inline-block;
height: 60px;
vertical-align: top;
line-height: 60px;
text-align: center;
}
.cw-oblong-value {
width: 60px;
background-color: $base-color;
color: $white;
font-size: x-large;
}
.cw-oblong-description {
width: calc(100% - 64px);
background-color: $white;
color: $base-color;
img {
vertical-align: middle;
margin-right: 8px;
}
}
}
/* * * * * * * * * *
o b l o n g 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(360 * $i / 100 + 0deg);
}
}
}
/* * * * * * * * * * * * * * * * * *
p r o g r e s s c i r c l e e n d
* * * * * * * * * * * * * * * * * */
/* * * * * * *
m a n a g e r
* * * * * * */
.cw-course-manager {
display: flex;
flex-wrap: wrap;
max-width: 1120px;
.cw-course-manager-tabs {
max-width: 560px;
width: calc(50% - 10px);
margin-right: 20px;
&:last-child{
margin: 0;
}
.cw-tabs-content {
min-height: 400px;
padding: 10px;
resize: vertical;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: $base-color $white;
}
}
}
.cw-manager-element {
.cw-sort-ease-move {
transition: all 0.4s ease-in-out;
}
.cw-manager-element-title {
img {
cursor: pointer;
vertical-align: text-bottom;
}
.cw-manager-element-breadcrumb {
display: inline;
.cw-manager-element-breadcrumb-home,
.cw-manager-element-breadcrumb-item {
cursor: pointer;
color: $base-color;
&::after {
content: ' / ';
} &:hover {
color: $active-color;
}
}
}
.cw-manager-element-actions {
position: relative;
display: inline;
float: right;
cursor: pointer;
z-index: 32;
}
header {
padding: 0.25em 0 0.5em 0;
font-size: 1.6em;
font-weight: 700;
}
}
.cw-manager-element-containers {
margin-bottom: 8px;
}
.cw-manager-container {
margin-bottom: 10px;
border: solid thin $content-color-40;
&:last-child {
margin-bottom: 0;
}
.cw-manager-container-title {
font-weight: 700;
padding: 4px 4px 4px 8px;
color: $base-color;
background-color: $content-color-20;
&.cw-manager-container-clickable-title {
cursor: pointer;
}
img {
vertical-align: middle;
}
}
.cw-manager-container-blocks {
margin: 4px;
}
.cw-manager-block {
border: solid thin $content-color-40;
padding: 1em;
margin-bottom: 4px;
background-color: $white;
&.cw-manager-block-clickable {
cursor: pointer;
&:hover {
background-color: $base-color;
color: $white;
}
}
img {
vertical-align: middle;
}
&:last-child {
margin-bottom: 0;
}
}
} .cw-manager-element-subchapters {
}
.cw-manager-element-item {
border: solid thin $content-color-40;
padding: 1em;
margin-bottom: 4px;
text-align: center;
vertical-align: middle;
background-color: $white;
color: $base-color;
cursor: pointer;
img {
vertical-align: middle;
}
&:last-child {
margin-bottom: 0;
}
&:hover {
color: $white;
background-color: $base-color;
}
&.cw-manager-element-item-sorting:hover{
background-color: $white;
color: $base-color;
}
}
.cw-manager-filing {
border: solid thin $content-color-40;
margin-top: 4px;
@include background-icon(arr_eol-down, clickable, 24);
background-color: $white;
background-position: calc(50% - 10em) calc(50% - 1px);
background-repeat: no-repeat;
padding: 1em 0;
color: $base-color;
text-align: center;
width: 100%;
font-weight: 600;
cursor: pointer;
&.cw-manager-filing-active {
@include background-icon(arr_eol-down, info-alt, 24);
background-color: $activity-color;
border: solid thin $activity-color;
color: $white;
}
&.cw-manager-filing-disabled {
@include background-icon(arr_eol-down, inactive, 24);
background-color: $white;
color: $dark-gray-color-80;
}
}
.cw-manager-block-buttons,
.cw-manager-container-buttons,
.cw-manager-element-item-buttons {
display: inline;
float: right;
img {
cursor: pointer;
transition: opacity 0.4s ease-in-out;
&.cw-manager-icon-disabled {
opacity: 0;
cursor: unset;
} }
}
.cw-collapsible-content {
display: none;
&.cw-collapsible-content-open {
display: block;
}
}
}
.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;
}
}
/* * * * * * * * * * *
m a n a g e r e n d
* * * * * * * * * * */
/* * * * * *
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;
outline: none;
&: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;
.cw-audio-playlist {
padding-left: 0;
list-style: none;
cursor: pointer;
.cw-playlist-item {
@include background-icon(file-audio2, clickable, 24);
background-repeat: no-repeat;
background-position: 1em center;
margin: 1em; 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);
}
}
&:not(:last-child) {
border-bottom: solid thin $dark-gray-color-30;
}
}
}
.cw-audio-playlist-recorder {
border-top: solid thin $content-color-40;
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
* * * * * * * * * * * * * */
/* * * * * * * * * *
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 h a r t b l o c k
* * * * * * * * * */
.cw-block-chart {
.cw-block-chart-item-remove {
float: right;
margin-right: 5px;
cursor: pointer;
img {
vertical-align: text-top;
}
}
}
/* * * * * * * * * * * * * *
c h a r t 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-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 29px;
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;
}
}
}
}
/* * * * * * * * * * * * *
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 $content-color-40;
border-bottom: none;
}
.cw-canvasblock-buttonset {
display: inline-block;
padding: 5px;
margin-right: 0.5em;
}
.cw-canvasblock-tool-selected-text {
cursor: text;
}
button {
cursor: pointer;
user-select: none;
border: solid thin $content-color-40;
height: 32px;
width: 32px;
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: 24px 24px;
&:focus {
outline: none;
}
&.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 $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 $black;
}
}
&.cw-canvasblock-tool {
&.cw-canvasblock-tool-pen {
@include background-icon(comment, clickable);
}
&.cw-canvasblock-tool-text {
vertical-align: top;
font-size: 22px;
color: $base-color;
font-weight: 600;
}
&.selected-tool {
border: solid 2px $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 $black;
}
}
&.cw-canvasblock-show-own {
@include background-icon(person, clickable, 24);
&.selected-view {
border: solid 2px $black;
}
}
}
}
/* * * * * * * * * * * * * * *
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-header {
position: relative;
.cw-pdf-button-prev,
.cw-pdf-button-next {
position: absolute;
border: none;
background-repeat: no-repeat;
background-color: transparent;
height: 24px;
width: 24px;
margin: 2px 12px;
cursor: pointer;
outline: none;
}
.cw-pdf-button-prev {
left: 0;
@include background-icon(arr_1left, clickable, 18);
&.inactive {
@include background-icon(arr_1left, inactive, 18);
}
}
.cw-pdf-button-next {
right: 0;
@include background-icon(arr_1right, clickable, 18);
&.inactive {
@include background-icon(arr_1right, inactive, 18);
}
}
.cw-pdf-download {
display: inline-block;
width: 18px;
height: 18px;
margin: 0 0.25em;
border: none;
cursor: pointer;
vertical-align: sub;
background: no-repeat scroll 0 0; @include background-icon(download, clickable, 18);
}
}
.cw-pdf-canvas {
border: solid thin $content-color-40;
width: calc(100% - 2px);
}
.cw-pdf-downloadbox {
border: solid thin $content-color-40;
padding: 0.5em 1em;
.cw-pdf-file-info {
@include background-icon(file, clickable, 24);
display: inline-block;
background-repeat: no-repeat;
padding-left: 26px;
margin: 1em;
line-height: 24px;
color: $base-color;
&.cw-pdf-fileicon-pdf {
@include background-icon(file-pdf, clickable, 24);
}
}
.cw-pdf-download-icon {
float: right;
@include background-icon(download, clickable, 24);
height: 24px;
width: 24px;
background-repeat: no-repeat;
margin: 1em;
}
}
}
/* * * * * * * * * * * * * * * * * *
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-list {
border: solid thin #ccc;
padding: 4px;
list-style: none;
.cw-block-folder-file-item {
list-style: none;
&:not(:last-child) {
border-bottom: solid thin #ccc;
}
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;
}
}
// for folder and download block
.cw-block-file-info {
@include background-icon(file, clickable, 24);
background-repeat: no-repeat;
display: inline-block;
padding-left: 26px;
margin: 1em;
line-height: 24px;
color: $base-color;
&.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);
}
&.cw-block-file-icon-pic {
@include background-icon(file-pic, clickable, 24);
}
&.cw-block-file-icon-video {
@include background-icon(file-video, clickable, 24);
}
&.cw-block-file-icon-pdf {
@include background-icon(file-pdf, clickable, 24);
}
&.cw-block-file-icon-word {
@include background-icon(file-word, clickable, 24);
}
&.cw-block-file-icon-spreadsheet {
@include background-icon(file-excel, clickable, 24);
}
&.cw-block-file-icon-text {
@include background-icon(file-text, clickable, 24);
}
&.cw-block-file-icon-ppt {
@include background-icon(file-ppt, clickable, 24);
}
&.cw-block-file-icon-archive {
@include background-icon(file-archive, clickable, 24);
}
&.cw-block-file-icon-file {
@include background-icon(file, clickable, 24);
}
}
/* * * * * * * * * * * * * * *
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;
padding: 4px;
.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-name {
color: $white;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
span {
background-color: fade-out($black, 0.6);
padding: 0.5em;
}
}
.cw-block-gallery-number-text {
color: $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}
}
/* * * * * * * * * * * * * * * * *
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;
}
}
/* * * * * * * * * * * * * * * * *
i m a g e m a p 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: auto;
.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;
outline: none;
display: block;
z-index: 4;
margin: auto;
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
*/
.cw-block-headline {
.cw-block-headline-content {
min-height: 600px;
overflow: hidden;
background-position: center;
background-size: 1095px;
&.half {
min-height: 300px;
}
&.heavy {
padding: 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;
}
}
&.bigicon_top {
.icon-layer {
display: flex;
align-items: center;
background-repeat: no-repeat;
background-position: center calc(50% - 8em);
background-size: 196px;
min-height: 600px;
@each $icon in $icons {
&.icon-black-#{$icon} {
@include background-icon($icon, info, 196);
}
&.icon-white-#{$icon} {
@include background-icon($icon, info-alt, 196);
} &.icon-studip-blue-#{$icon} {
@include background-icon($icon, clickable, 196);
}
&.icon-studip-red-#{$icon} {
@include background-icon($icon, status-red, 196);
}
&.icon-studip-yellow-#{$icon} {
@include background-icon($icon, status-yellow, 196);
}
&.icon-studip-green-#{$icon} {
@include background-icon($icon, status-green, 196);
}
};
&.half {
min-height: 300px;
background-size: 144px;
background-position: center calc(50% - 4em);
}
}
.cw-block-headline-textbox {
width: 100%;
.cw-block-headline-title {
h1 {
margin-top: 2em;
border: none;
font-size: 5em;
text-align: center;
}
}
.cw-block-headline-subtitle {
h2 {
border: none;
font-size: 18px;
text-align: center;
margin-top: 10px;
}
}
}
}
&.bigicon_before {
.icon-layer {
display: flex;
align-items: center;
background-repeat: no-repeat;
background-position: 4em center;
min-height: 600px;
&.half {
min-height: 300px;
}
@each $icon in $icons {
&.icon-black-#{$icon} {
@include background-icon($icon, info, 196);
}
&.icon-white-#{$icon} {
@include background-icon($icon, info-alt, 196);
}
&.icon-studip-blue-#{$icon} {
@include background-icon($icon, clickable, 196);
}
&.icon-studip-red-#{$icon} {
@include background-icon($icon, status-red, 196);
}
&.icon-studip-yellow-#{$icon} {
@include background-icon($icon, status-yellow, 196);
} &.icon-studip-green-#{$icon} {
@include background-icon($icon, status-green, 196);
}
};
}
.cw-block-headline-textbox {
width: 100%;
.cw-block-headline-title {
h1 {
border: none;
font-size: 5em;
text-align: left;
margin-left: 4.25em;
}
}
.cw-block-headline-subtitle {
display: none;
}
}
}
&.ribbon {
.icon-layer {
display: flex;
align-items: center;
min-height: 600px;
&.half {
min-height: 300px;
}
.cw-block-headline-textbox {
width: 100%;
padding: 1em 0;
background-color: fade-out($black, 0.5);
.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;
}
}
}
}
}
}
}
.cw-container-colspan-half {
.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 calc(50% - 4em);
min-height: 300px;
&.half {
min-height: 150px;
}
@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);
}
};
&.half {
background-size: 72px;
background-position: center calc(50% - 2em);
}
}
.cw-block-headline-textbox {
.cw-block-headline-title {
h1 {
margin-top: 2.5em;
font-size: 2em;
}
}
.cw-block-headline-subtitle {
h2 {
font-size: 12px;
}
}
}
}
&.bigicon_before {
.icon-layer {
min-height: 300px;
&.half {
min-height: 150px;
}
background-position: 2em 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);
}
};
}
.cw-block-headline-textbox {
.cw-block-headline-title {
h1 {
font-size: 2.5em;
}
}
}
}
&.ribbon {
.icon-layer {
min-height: 300px;
&.half {
min-height: 150px;
}
.cw-block-headline-textbox {
.cw-block-headline-title {
h1 {
font-size: 2.5em;
}
}
.cw-block-headline-subtitle {
h2 {
font-size: 12px;
}
}
}
}
}
}
}
}
/*
headline block end
*/
/*
toc block
*/
.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-block-table-of-contents-tiles.cw-tiles {
&.cw-tiles-space-between {
justify-content: space-between;
}
.tile {
margin: 0 0 5px 0;
&.cw-tile-margin {
margin: 0 5px 5px 0;
}
}
}
.cw-container-colspan-half {
.cw-block-table-of-contents-tiles.cw-tiles {
justify-content: space-between;
.tile {
margin: 0 0 5px 0;
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
*/
/*
cw tiles
*/
.cw-tiles {
list-style: none;
display: flex;
flex-wrap: wrap;
padding-left: 0;
.tile {
height: 420px;
width: 270px;
margin: 0 5px 5px 0;
background-color: $base-color;
cursor: pointer;
&: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: $black;
background-position: center;
}
.description {
height: 220px;
padding: 10px 14px;
color: $white;
position: relative;
header {
font-size: 1.25em;
color: $white;
border: none;
margin-bottom: 0.75em;
width: 240px; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.description-text-wrapper {
overflow: hidden;
height: 10em;
display: -webkit-box;
margin-bottom: 1em;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
p {
text-align: justify;
}
}
footer{
width: 242px;
text-align: right;
color: $white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
img {
vertical-align: text-bottom;
}
}
}
}
/*
cw tiles end
*/
/*
vSelect
*/
.cw-vs-select {
max-width: 48em;
.vs__dropdown-toggle {
border: solid thin $content-color-40;
border-radius: 0;
}
.vs__option-with-icon{
padding-left: 8px;
}
.vs__option-color {
border: solid thin $content-color-40;
padding-left: 20px;
height: 20px;
margin-right: 4px;
}
}
/*
vSelect end
*/
/* cw manager copy */
.cw-manager-copy-selector {
ul {
padding: 0;
margin: 0;
list-style: none;
}
.cw-manager-copy-selector-course { color: $base-color;
cursor: pointer;
line-height: 2em;
&:hover {
color: $active-color;
}
img {
vertical-align: text-bottom;
}
}
}
/* cw manager copy end*/