umberto 6.0.0 → 6.1.0

package/themes/umberto/src/umberto/css/_footer.scss

@@ -0,0 +1,40 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/color';
+@use 'helpers/font';
+@use 'helpers/globals';
+@use 'helpers/spacing';
+
+.footer {
+	z-index: 30;
+	font-size: font.u-font-size( -2 );
+	width: globals.$u-sidebar-width;
+	height: 50px;
+
+	@include globals.u-responsive-narrow {
+		background: color.u-color( 'background-bright' );
+		text-align: right;
+		padding: spacing.u-spacing( -2 ) spacing.u-spacing( 4 ) spacing.u-spacing( 0 ) spacing.u-spacing( 2 );
+		position: relative;
+		float:right;
+		height: globals.$u-footer-height;
+	}
+
+	@include globals.u-responsive-wide {
+		position: fixed;
+		bottom: 0;
+		right: 0;
+
+		&--bordered {
+			border-left: 1px solid color.u-color( 'background-hue' );
+		}
+	}
+
+	p {
+		color: color.u-color( 'text', 20% );
+		position: absolute;
+		bottom: spacing.u-spacing( 2 );
+		right: spacing.u-spacing( 3 );
+	}
+}

package/themes/umberto/src/umberto/css/_formatted.scss

@@ -0,0 +1,285 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/color';
+@use 'helpers/font';
+@use 'helpers/globals';
+@use 'helpers/spacing';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+
+.formatted {
+	// @include u-draw-baseline( 0 );
+
+	p, ul, ol, blockquote, pre {
+		@include font.u-baseline( 0 );
+	}
+
+	h1 {
+		@include font.u-baseline( 4 );
+
+		& + dl {
+			margin-top: spacing.u-spacing( 0 );
+		}
+
+		@include globals.u-responsive-mobile {
+			font-size: 1.9em;
+		}
+	}
+
+	dd {
+		margin-bottom: spacing.u-spacing( 0 );
+	}
+
+	// temporary, should not be needed after typography redesign
+	h1:first-of-type {
+		$rhythm: map.get( font.$u-baseline-levels, 4 );
+		width: 100%;
+
+		padding-top: list.nth( $rhythm, 3 ) - 0.5em;
+		margin-bottom: list.nth( $rhythm, 4 ) - 0.5em;
+
+		& + h2 {
+			padding-top: 0;
+		}
+	}
+
+	h2 {
+		@include font.u-baseline( 3 );
+		padding-bottom: .2em;
+		border-bottom: 1px solid color.u-color( 'separator' );
+		font-weight: 400;
+
+		@include globals.u-responsive-mobile {
+			font-size: 1.5em;
+		}
+	}
+
+	h2:first-of-type {
+		clear: both;
+	}
+
+	h3 {
+		@include font.u-baseline( 2 );
+		font-weight: 400;
+	}
+
+	h4 {
+		@include font.u-baseline( 1 );
+		@include font.u-baseline-margin( 2 );
+		@include font.u-baseline-padding( 2 );
+		font-weight: 400;
+	}
+
+	h5 {
+		@include font.u-baseline( 0 );
+		font-weight: 400;
+	}
+
+	.info-box {
+		& > h2, & > h3, & > h4 {
+			padding-top: 0;
+		}
+	}
+
+	strong, b {
+		font-weight: 600;
+	}
+
+	i, em {
+		font-style: italic;
+	}
+
+	pre {
+		overflow: hidden;
+	}
+
+	code {
+		font-family: font.$u-font-face-mono;
+		font-size: .866666em; // 13px
+		padding: spacing.u-spacing( 2 );
+	}
+
+	:not( pre ) > code:not( .highlight ) {
+		& {
+			// It's a darker shade of color.u-color( 'background-hue' ) so it looks good in info-boxes.
+			// See #230.
+			background: rgba( 202, 205, 207, 0.3 );
+			padding: spacing.u-spacing( -4 ) spacing.u-spacing( -3 );
+			border-radius: 3px;
+		}
+
+		// See #223.
+		&::after {
+			// To reduce the width of that space to 0px.
+			letter-spacing: -1em;
+			content: "\00a0";
+		}
+
+		// See #223.
+		&::before {
+			// To reduce the width of that space to 0px.
+			letter-spacing: -1em;
+			content: "\00a0";
+		}
+	}
+
+	a code:not( .highlight ) {
+		color: color.u-color( 'link' );
+	}
+
+	.highlight {
+		background: #2b2c26;
+		color: #f8f8f2;
+
+		a {
+			color: color.u-color( 'text-invert' );
+		}
+	}
+
+	.highlight code {
+		background: none;
+		padding: 0;
+		font-size: 1em;
+	}
+
+	blockquote {
+		border-left: 1px solid color.u-color( toggler );
+		padding-left: 10px;
+		padding-top: 0;
+		font-style: italic;
+	}
+
+	kbd {
+		display: inline-block;
+		background: color.u-color( 'background-dark' );
+		border: solid 1px color.u-border-color( 'background-hue', 5% );
+		border-bottom-color: color.u-border-color( 'background-hue', -5% );
+		box-shadow: inset 0 -1px 0  color.u-border-color( 'background-hue', -5% );
+		font-size: .866666em; // 13px
+		padding: spacing.u-spacing( -3 ) spacing.u-spacing( -2 );
+		line-height: 1em;
+		vertical-align: middle;
+		border-radius: 3px;
+	}
+
+	ul, ol {
+		margin-left: 2 * spacing.u-spacing( 2 );
+
+		@include font.u-baseline-margin( 0 );
+
+		@include globals.u-responsive-mobile {
+			margin-left: spacing.u-spacing( 2 );
+		}
+	}
+
+	ul, ol {
+		ul, ol {
+			padding-top: 0;
+			margin-bottom: 0;
+
+			&:last-of-type {
+				margin-bottom: math.div( spacing.u-spacing( 0 ), 3 );
+			}
+		}
+
+		li {
+			&:last-of-type {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	p img {
+		display: block;
+		margin: spacing.u-spacing( 3 ) auto;
+		box-sizing: content-box;
+	}
+
+	iframe:not( .cke_wysiwyg_frame ) {
+		display: block;
+		margin: spacing.u-spacing( 3 ) auto;
+	}
+
+	ol {
+		list-style-type: decimal;
+	}
+
+	table {
+		margin: spacing.u-spacing( 3 ) 0;
+		width: 100%;
+
+		/* See: #794. Long code or snippet without any white-space is breaking table. */
+		code {
+			word-break: break-word;
+			white-space: normal;
+		}
+	}
+
+	td, th {
+		border: 1px solid color.u-border-color( 'background-dark', 20% );
+		padding: 6px 12px;
+	}
+
+	th {
+		font-weight: bold;
+	}
+
+	abbr {
+		position: relative;
+		cursor: default;
+		text-decoration: none;
+		border-bottom: 1px dotted #000;
+	}
+
+	abbr::before {
+		content: attr(title);
+		display: none;
+		position: absolute;
+		bottom: calc( -100% - 15px );
+		left: 50%;
+		transform: translateX( -50% );
+		padding: 3px 5px;
+		font-size: 0.9em;
+		font-weight: bold;
+		border-radius: 3px;
+		color: #fff;
+		background: black;
+		white-space: nowrap;
+	}
+
+	abbr::after {
+		content: '';
+		display: none;
+		position: absolute;
+		bottom: -5px;
+		left: 50%;
+		transform: translateX( -50% );
+		width: 0;
+		height: 0;
+		border-style: solid;
+		border-width: 0 5px 5px 5px;
+		border-color: transparent transparent #000 transparent;
+
+	}
+
+	abbr:hover::before,
+	abbr:hover::after {
+		display: block;
+	}
+}
+
+/* See: https://github.com/ckeditor/ckeditor5/issues/1977. */
+.formatted {
+	[dir=rtl] {
+		ul, ol {
+			margin-left: 0;
+			margin-right: 2 * spacing.u-spacing( 2 );
+
+			@include globals.u-responsive-mobile {
+				margin-right: spacing.u-spacing( 2 );
+			}
+		}
+	}
+}

package/themes/umberto/src/umberto/css/_guide-content.scss

@@ -0,0 +1,37 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/color';
+@use 'helpers/spacing';
+
+.main__content-inner {
+  	h2, h3, h4, h5, h6 {
+		// Make sure only those headers that have IDs (and a link) get the relative position because applying
+		// this styles to all headers, including these in the editor content, breaks some editor feature styles
+		// See https://github.com/cksource/umberto/issues/899.
+		&[id] {
+			position: relative;
+
+			.headerlink {
+				display: none;
+				position: absolute;
+				padding: 0 1em;
+				left: -2em;
+				color: color.u-color( 'link', 20% );
+			}
+
+			&:hover {
+				.headerlink {
+					display: block;
+				}
+			}
+		}
+	}
+
+	.inline {
+	  	display: inline-block;
+	  	margin: 0;
+	  	padding: 0 spacing.u-spacing( -2 );
+	  	vertical-align: text-bottom;
+	}
+}

package/themes/umberto/src/umberto/css/_guide-sdk-tree.scss

@@ -0,0 +1,14 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/spacing';
+
+.guide-tree,
+.sdk-tree {
+	.tree__item__text {
+		padding-top: spacing.u-spacing( -2 );
+		padding-bottom: spacing.u-spacing( -2 );
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+}

package/themes/umberto/src/umberto/css/_loading-spinner.scss

@@ -0,0 +1,33 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+.loading {
+	.loading-spinner,
+	.loading-spinner:after {
+	  border-radius: 50%;
+	  width: 10em;
+	  height: 10em;
+	}
+
+	.loading-spinner {
+	  margin: 60px auto;
+	  font-size: 10px;
+	  position: relative;
+	  text-indent: -9999em;
+	  border-top: 1.1em solid rgba(0,0,0, 0.2);
+	  border-right: 1.1em solid rgba(0,0,0, 0.2);
+	  border-bottom: 1.1em solid rgba(0,0,0, 0.2);
+	  border-left: 1.1em solid #000000;
+	  transform: translateZ(0);
+	  animation: spin 1.1s infinite linear;
+	}
+
+	@keyframes spin {
+	  0% {
+		transform: rotate(0deg);
+	  }
+	  100% {
+		transform: rotate(360deg);
+	  }
+	}
+}

package/themes/umberto/src/umberto/css/_main.scss

@@ -0,0 +1,59 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/color';
+@use 'helpers/globals';
+@use 'helpers/spacing';
+@use 'sass:meta';
+
+.main {
+	display: flex;
+	justify-content: flex-end;
+	flex-direction: row-reverse;
+	flex-wrap: nowrap;
+	min-height: calc( 100vh - #{ globals.$u-top-height } );
+
+	@include globals.u-responsive-narrow {
+		background: color.u-color( 'background-bright' );
+		min-height: calc( 100vh - #{ globals.$u-top-height } - #{ globals.$u-footer-height } );
+	}
+
+	@include meta.load-css('content');
+	@include meta.load-css('navigation');
+
+	// We need to move it up, because of no subheader
+	&--home {
+		margin-top: globals.$u-top-sub * -1;
+
+		@include globals.u-responsive-narrow {
+			min-height: calc( 100vh - #{ globals.$u-top-sub } - #{ globals.$u-footer-height } );
+		}
+	}
+
+	&--no-sitenav {
+		.side-navigation {
+			display: none;
+		}
+
+		.main__content {
+			padding-right:0;
+		}
+
+		.main__content-inner {
+			width: auto;
+			margin: auto;
+			max-width: globals.$u-content-max-width + 2 * globals.$u-content-margin;
+			padding: {
+				left: globals.$u-content-margin;
+				right: globals.$u-content-margin;
+			}
+
+			@include globals.u-responsive-mobile {
+				padding: {
+					left: spacing.u-spacing( 0 );
+					right: spacing.u-spacing( 0 );
+				}
+			}
+		}
+	}
+}

package/themes/umberto/src/umberto/css/_navigation.scss

@@ -0,0 +1,35 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/color';
+@use 'helpers/globals';
+@use 'helpers/spacing';
+
+.side-navigation {
+	flex: 0 0 globals.$u-sidebar-width;
+
+	@include globals.u-responsive-tablet {
+		display: none;
+	}
+
+	// needed for independent scroll
+	&__wrapper {
+		@include globals.u-box;
+		height: calc( 100% - #{ globals.$u-top-height } );
+		display: flex;
+		position: fixed;
+	}
+
+	&__inner {
+		width: globals.$u-sidebar-width;
+		padding: spacing.u-spacing( 0 ) 0;
+		border-right: 1px solid color.u-color( 'background-hue' );
+		overflow-y: auto;
+		transition: 250ms ease margin;
+		overflow-x: hidden;
+
+		&--api {
+			margin-bottom: 50px;
+		}
+	}
+}

package/themes/umberto/src/umberto/css/_notice.scss

@@ -0,0 +1,116 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/color';
+@use 'helpers/globals';
+@use 'helpers/spacing';
+@use 'sass:math';
+
+p.notice,
+div.notice,
+nav.notice,
+/* Because CKEditor SDK Samples uses diffrent class. */
+div.tip,
+p.tip {
+	position: relative;
+	margin: spacing.u-spacing( 4 ) 0;
+	background: color.u-color( 'background-hue' );
+	border-left: 3px solid color.u-color( 'hint-info' );
+	padding: spacing.u-spacing( 4 );
+
+	p {
+		&:first-of-type {
+			padding-top: 0;
+		}
+
+		&:last-of-type {
+			margin-bottom: 0;
+		}
+	}
+
+	&::before {
+		display: block;
+		width: globals.$u-top-icon-width;
+		height: globals.$u-top-icon-width;
+		position: absolute;
+		left: ( globals.$u-top-icon-width * 2 - math.div( globals.$u-top-icon-width, 2 ) ) * -1;
+		top: math.div( globals.$u-top-icon-width, 2 );
+	}
+
+	@include globals.u-responsive-narrow {
+		position: relative;
+		background: color.u-color( 'background-dark' );
+
+		&::before {
+			display: block;
+			width: globals.$u-top-icon-width;
+			height: globals.$u-top-icon-width;
+			position: absolute;
+			left: globals.$u-top-icon-width - math.div( globals.$u-top-icon-width, 2 );
+			top: math.div( globals.$u-top-icon-width, 2 );
+		}
+	}
+
+	@include globals.u-responsive-mobile {
+		padding: spacing.u-spacing( 0 );
+		margin: spacing.u-spacing( 0 );
+	}
+
+	&__hint {
+		border-left: 3px solid color.u-color( 'hint-info' );
+	}
+
+	&__feedback {
+	  	border-left: 3px solid color.u-color( 'hint-hint' );
+	  	background-color: rgba( color.u-color( 'hint-hint' ), .1 );
+	}
+
+	&__warning {
+		border-left: 3px solid color.u-color( 'hint-warning' );
+		background-color: rgba( color.u-color( 'hint-warning' ), .1 );
+	}
+
+	&__error {
+		border-left: 3px solid color.u-color( 'hint-error' );
+		background-color: rgba( color.u-color( 'hint-error' ), .1 );
+	}
+
+	&_menu-like {
+		ul, ol {
+			list-style: none;
+			margin: 0;
+		}
+
+		@include globals.u-responsive-narrow {
+			// background: none;
+
+			li {
+				display: inline-block;
+			}
+		}
+
+		@include globals.u-responsive-wide {
+			padding: spacing.u-spacing( 0 ) 0 0;
+
+			ul, ol {
+				text-align: center;
+
+				li {
+					a {
+						padding: spacing.u-spacing( -1 ) spacing.u-spacing( 1 );
+						display: block;
+
+						&:hover {
+							background: color.u-color( 'background-dark' );
+						}
+					}
+
+					& + li {
+						border-top: 1px solid color.u-color( 'separator' );
+					}
+				}
+
+			}
+		}
+	}
+}

package/themes/umberto/src/umberto/css/_print.scss

@@ -0,0 +1,20 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@media print {
+	body {
+		padding-top: 0 !important;
+	}
+
+	.top {
+		position: relative !important;
+	}
+
+	.side-navigation {
+		display: none !important;
+	}
+
+	.main .main__content {
+		padding: 25px 50px 50px !important;
+	}
+}