diff --git a/src/themes/Default.qpl b/src/themes/Default.qpl index c7755c7b..bfea1e58 100644 --- a/src/themes/Default.qpl +++ b/src/themes/Default.qpl @@ -43,7 +43,7 @@ colors: hsluv(hue, bgSaturation * 2, intensity * 2, Math.max(0.6, opacity)) color accentBackground: - hsluv(hue, saturation * 1.5, intensity * 32, Math.max(0.6, opacity)) + hsluv(hue, saturation * 1.5, intensity * 32, Math.max(0.9, opacity)) color accentElement: hsluv(hue, saturation * 1.5, intensity * 52, Math.max(0.6, opacity)) @@ -254,8 +254,8 @@ ui: // To have a solid color instead, // set gradientStartColor and gradientEndColor to the same value, e.g.: - // color gradientStartColor: hsluv(0, 0, 0, 0.8) - // color gradientEndColor: hsluv(0, 0, 0, 0.8) + // color gradientStartColor: hsluv(0, 0, 0, colors.bgOpacity) + // color gradientEndColor: hsluv(0, 0, 0, colors.bgOpacity) diff --git a/src/themes/Glass.qpl b/src/themes/Glass.qpl new file mode 100644 index 00000000..7f9f23e2 --- /dev/null +++ b/src/themes/Glass.qpl @@ -0,0 +1,412 @@ +// vim: syntax=qml + +// Base variables + +real uiScale: 1.0 + +int minimumSupportedWidth: 240 * uiScale +int minimumSupportedHeight: 120 * uiScale +int contentIsWideAbove: 472 * uiScale + +int baseElementsHeight: 36 * uiScale +int spacing: 12 * uiScale +int radius: 5 * uiScale +int animationDuration: 100 +real loadingElementsOpacity: 0.8 +real disabledElementsOpacity: 0.3 + + +fontSize: + int smaller: 13 * uiScale + int small: 13 * uiScale + int normal: 16 * uiScale + int big: 22 * uiScale + int bigger: 32 * uiScale + int biggest: 48 * uiScale + +fontFamily: + string sans: "Roboto" + string serif: "Roboto Slab" + string mono: "Hack" + +colors: + int hue: 240 + int saturation: 60 + int bgSaturation: saturation / 2 + real intensity: 1.0 + real opacity: 0.7 + real bgOpacity: 0.5 + + color weakBackground: hsluv(hue, bgSaturation, intensity * 9, opacity) + color mediumBackground: hsluv(hue, bgSaturation, intensity * 6.8, opacity) + color strongBackground: + hsluv(hue, bgSaturation * 2, intensity * 2, Math.max(0.6, opacity)) + + color accentBackground: + hsluv(hue, saturation * 1.5, intensity * 32, Math.max(0.9, opacity)) + + color accentElement: + hsluv(hue, saturation * 1.5, intensity * 52, Math.max(0.6, opacity)) + + color strongAccentElement: + hsluv(hue, saturation * 1.5, intensity * 72, Math.max(0.6, opacity)) + + color positiveBackground: + hsluv(155, saturation * 1.5, intensity * 52, Math.max(0.6, opacity)) + + color middleBackground: + hsluv(60, saturation * 1.5, intensity * 52, Math.max(0.6, opacity)) + + color negativeBackground: + hsluv(0, saturation * 1.5, intensity * 52, Math.max(0.6, opacity)) + + color alertBackground: negativeBackground + + + color brightText: hsluv(0, 0, intensity * 100) + color text: hsluv(0, 0, intensity * 85) + color halfDimText: hsluv(0, 0, intensity * 72) + color dimText: hsluv(0, 0, intensity * 60) + + color warningText: hsluv(60, saturation * 1.5, 72) + color errorText: hsluv(0, saturation * 1.5, 72) + color accentText: hsluv(hue, saturation * 1.5, 72) + color link: accentText + color code: hsluv(hue + 5, saturation * 1.5, intensity * 60) + + // Example of an animation, set running: true to enable + NumberAnimation on hue + running: false + from: 0 + to: 360 + duration: 10000 + loops: Animation.Infinite + +icons: + string preferredPack: "thin" + + // "transparent" to disable colorizing + color colorize: hsluv(0, 0, colors.intensity * 90) + color disabledColorize: "white" + + int smallDimension: 16 * uiScale + int dimension: 22 * uiScale + + +// Generic UI controls + +controls: + box: + int defaultWidth: minimumSupportedWidth + color background: colors.mediumBackground + int radius: theme.radius + + popup: + int defaultWidth: minimumSupportedWidth * 1.75 + color background: colors.mediumBackground + + header: + color background: colors.mediumBackground + + button: + color background: colors.strongBackground + color text: colors.text + + color hoveredOverlay: hsluv(0, 0, 50, 0.2) + color pressedOverlay: hsluv(0, 0, 50, 0.5) + color checkedOverlay: colors.accentBackground + + tab: + color text: controls.button.text + color background: controls.button.background + color alternateBackground: hsluv( + colors.hue, + colors.bgSaturation * 1.25, + colors.intensity * 4, + Math.max(0.6, colors.opacity) + ) + + color hoveredOverlay: controls.button.hoveredOverlay + color pressedOverlay: controls.button.pressedOverlay + color checkedOverlay: controls.button.checkedOverlay + + menu: + color background: controls.button.background + color border: "black" + real borderWidth: 2 + + menuItem: + color background: "transparent" + color text: controls.button.text + + color hoveredOverlay: controls.button.hoveredOverlay + color pressedOverlay: controls.button.hoveredOverlay + color checkedOverlay: controls.button.hoveredOverlay + + checkBox: + color checkIconColorize: colors.accentElement + color boxBackground: controls.button.background + int boxSize: 24 * uiScale + + color boxBorder: "black" + color boxHoveredBorder: colors.accentElement + color boxPressedBorder: colors.strongAccentElement + + color text: controls.button.text + color subtitle: colors.dimText + + listView: + color highlight: colors.strongBackground + + textField: + color background: colors.strongBackground + color focusedBackground: background + + int borderWidth: 1 + color border: "transparent" + color focusedBorder: colors.accentElement + color errorBorder: colors.negativeBackground + + color text: colors.text + color focusedText: colors.text + color placeholderText: colors.dimText + + textArea: + color background: colors.strongBackground + color text: colors.text + color placeholderText: controls.textField.placeholderText + + toolTip: + int delay: 500 + color background: colors.strongBackground + color text: colors.text + color border: "black" + int borderWidth: 2 + + progressBar: + int height: Math.max(2, spacing / 2) + color background: colors.strongBackground + color foreground: colors.accentElement + color pausedForeground: colors.middleBackground + color errorForeground: colors.negativeBackground + + circleProgressBar: + int thickness: Math.max(2, spacing / 2) + color background: colors.strongBackground + color foreground: colors.accentElement + color errorForeground: colors.negativeBackground + color text: colors.text + real indeterminateSpan: 0.5 // 0-1 + + slider: + int radius: 2 + int height: controls.progressBar.height + color background: controls.progressBar.background + color foreground: controls.progressBar.foreground + + handle: + int size: 20 + color inside: hsluv(0, 0, 90) + color pressedInside: "white" + color border: "black" + color pressedBorder: colors.strongAccentElement + + image: + int maxPauseIndicatorSize: 64 + + avatar: + int size: baseElementsHeight + int radius: theme.radius + + hoveredImage: + int size: 192 + color background: hsluv(0, 0, 0, 0.4) + + background: + int saturation: colors.saturation + int lightness: Math.min(50, colors.intensity * 23) + real opacity: 1.0 + + letter: + int saturation: colors.saturation + 20 + int lightness: colors.intensity * 60 + real opacity: 1.0 + + displayName: + int saturation: colors.saturation + 12 + int lightness: Math.min(67, colors.intensity * 67) + + +// Special UI parts + +ui: + // Image can be an URL or local file path. + // If not specified, the gradient will be shown instead. + url image: "" + + point gradientStart: Qt.point(0, 0) + point gradientEnd: Qt.point(window.width, window.height) + + color gradientStartColor: hsluv(0, 0, 0, colors.bgOpacity) + color gradientEndColor: hsluv(0, 0, 0, colors.bgOpacity) + + + +mainPane: + color background: colors.mediumBackground + + account: + real collapsedOpacity: 0.3 + color background: "transparent" + color name: colors.text + + room: + real leftRoomOpacity: 0.65 + + color background: "transparent" + color name: colors.text + color lastEventDate: colors.halfDimText + + color subtitle: colors.dimText + color subtitleQuote: hsluv(135, colors.saturation * 2.25, 65) + + settingsButton: + color background: colors.strongBackground + + filterRooms: + color background: colors.strongBackground + + +chat: + roomHeader: + color background: colors.strongBackground + color name: colors.text + color topic: colors.dimText + + roomPaneButtons: + color background: chat.roomHeader.background + + roomPane: + color background: colors.mediumBackground + + member: + real invitedOpacity: 0.5 + + color background: "transparent" + color name: colors.text + color subtitle: colors.dimText + + color adminIcon: hsluv(60, colors.saturation * 2.25, 60) + color moderatorIcon: adminIcon + color invitedIcon: hsluv(0, colors.saturation * 2.25, 60) + + inviteButton: + color background: colors.strongBackground + + filterMembers: + color background: colors.strongBackground + + eventList: + int ownEventsOnRightUnderWidth: 768 * theme.uiScale + color background: "transparent" + + message: + int avatarSize: 58 * uiScale + int collapsedAvatarSize: 28 * uiScale + + int radius: theme.radius + color background: colors.mediumBackground + color ownBackground: hsluv( + colors.hue, + colors.bgSaturation * 2, + colors.intensity * 5, + Math.max(0.6, opacity), + ) + + color body: colors.text + color date: colors.dimText + + color noticeBody: colors.halfDimText + int noticeLineWidth: 1 + + color quote: hsluv(135, colors.saturation * 1.5, colors.intensity * 80) + color link: colors.link + color code: colors.code + + string styleSheet: + "* { white-space: pre-wrap }" + + "a { color: " + link + " }" + + "p { margin-top: 0 }" + + + "code { font-family: " + fontFamily.mono + "; " + + "color: " + code + " }" + + + "h1, h2, h3 { font-weight: normal }" + + "h1 { font-size: " + fontSize.biggest + "px }" + + "h2 { font-size: " + fontSize.bigger + "px }" + + "h3 { font-size: " + fontSize.big + "px }" + + "h4 { font-size: " + fontSize.normal + "px }" + + "h5 { font-size: " + fontSize.small + "px }" + + "h6 { font-size: " + fontSize.smaller + "px }" + + + ".sender { margin-bottom: " + spacing / 2 + " }" + + ".quote { color: " + quote + " }" + + string styleInclude: + '\n' + + // Prefered minimum width of file messages + int fileMinWidth: 256 * uiScale + + // Don't scale down thumbnails below this size in pixels, if + // the becomes too small to show it at normal size. + size thumbnailMinSize: Qt.size(256 * uiScale, 256 * uiScale) + + // How much of the chat height thumbnails can take at most, + // by default 0.4 for 40%. + real thumbnailMaxHeightRatio: 0.4 * Math.min(1, uiScale) + + daybreak: + color background: colors.mediumBackground + color text: colors.text + int radius: theme.radius + + inviteBanner: + color background: colors.mediumBackground + + leftBanner: + color background: colors.mediumBackground + + unknownDevices: + color background: colors.mediumBackground + + typingMembers: + color background: hsluv( + colors.hue, colors.saturation, colors.intensity * 9, 0.52 + ) + + fileTransfer: + color background: chat.typingMembers.background + + composer: + color background: colors.strongBackground + + uploadButton: + color background: "transparent" + + +mediaPlayer: + hoverPreview: + int maxHeight: 192 + + progress: + int height: 8 + color background: hsluv(0, 0, 0, 0.5) + + controls: + int iconSize: icons.dimension + int volumeSliderWidth: 100 + int speedSliderWidth: 100 + color background: hsluv( + colors.hue, colors.saturation * 1.25, colors.intensity * 2, 0.85, + )