diff --git a/app/javascript/skins/glitch/queens-pink-contrast/diff.scss b/app/javascript/skins/glitch/queens-pink-contrast/diff.scss index 810c4ae78a1ed7..08812be8035c3d 100644 --- a/app/javascript/skins/glitch/queens-pink-contrast/diff.scss +++ b/app/javascript/skins/glitch/queens-pink-contrast/diff.scss @@ -3,7 +3,7 @@ // This file houses all of the modifications to the base style. Ergo, anything omitted will use the default mastodon styling. This is useful if we just want to change a few things. body { - background-color: $queen-bg; + background-color: darken($ui-base-color, 5%); } @mixin pane-style { @@ -18,6 +18,17 @@ body { } } +.icon-with-badge { + .icon-with-badge__badge { + border-radius: $queen-radius; + transform: scale(1.0); + transition: transform .5s ease-in-out; + } + .icon-with-badge__badge:hover { + transform: scale(1.5); + } +} + .drawer__inner__mastodon { background-color: transparent !important; @@ -25,11 +36,11 @@ body { .single-column, .auto-columns { - background: $queen-bg; + background: darken($ui-base-color, 5%); margin: .1rem; .column-header { - background: darken($ui-base-color, 5%); + background: $ui-base-color; border-radius: $queen-radius; margin: .1rem; } @@ -38,19 +49,18 @@ body { background-color: transparent; } - .column-header__button, - .column-header__back-button { - background-color: transparent; - } .columns-area__panels__pane__inner { // left & right panels @include pane-style; - background-color: darken($ui-base-color, 25%); + background-color: $black; border-radius: $queen-radius; color: $queen-highlight-color; } + .columns-area { + background-color: transparent; + } .search { margin: 1rem; @@ -59,8 +69,17 @@ body { } } - .button { - background-color: transparent; + .report-modal { + background-color: $ui-base-color; + color: $white; + border-radius: $queen-radius; + } + + .column-header__button, + .column-header__back-button, + .button, + .content__heading__actions.button { + background-color: $ui-base-color; border-radius: $queen-radius; padding: .7rem; border-width: 2px; @@ -69,24 +88,37 @@ body { color: $white; box-shadow: inset 0 0 0 0 $queen-highlight-color; - transition: box-shadow .3s; + transition: box-shadow 1s ease-in-out; // transition: background-color .3s; // transition: color .3s; } - .button:hover { - box-shadow: inset 100px 0 5px 0 $queen-highlight-color; + .column-header__button:hover, + .column-header__back-button:hover, + .button:hover, + .content__heading__actions.button:hover { + box-shadow: inset 100px 0 0 0 $queen-highlight-color; // background-color: $queen-highlight-color; // color: $black; } + .drawer__header { + background-color: $ui-base-color; + border-radius: $queen-radius; + i.fa { + color: $white; + } + } + + .drawer__inner { + background-color: transparent; + } .scrollable { - border: 1rem auto $queen-highlight-color; - border-radius: $queen-radius; + background-color: transparent; } .columns-area__panels__main { - background-color: $ui-base-color; + background-color: transparent; border-bottom-left-radius: $queen-radius; border-bottom-right-radius: $queen-radius; padding: 0%; @@ -95,14 +127,44 @@ body { .status__info { padding-bottom: .5rem; } - .account__avatar { + + // .account__avatar{ + // border-radius: $queen-radius-pfp; + // border-style: solid; + // border-color: $queen-highlight-color; + // // border-width: 3px; + // border-top-width: $queen-border-thickness; + // border-left-width: $queen-border-thickness; + // transform: none; + // } + + .status__avatar { + // margin: 2rem; border-radius: $queen-radius-pfp; + background-image: linear-gradient(45deg, $queen-highlight-color, $ui-base-color); + padding: .5rem; + border-width: $queen-border-thickness; border-style: solid; border-color: $queen-highlight-color; - // border-width: 3px; - border-top-width: $queen-border-thickness; - border-left-width: $queen-border-thickness; - transform: none; + } + + .status__display-name { + .display-name { + background-image: linear-gradient(to right, $queen-highlight-color, $ui-base-color); + padding: .5rem; + padding-left: 1rem; + padding-right: 1rem; + border-radius: $queen-radius; + .display-name__account { + color: $white; + } + } + } + + .account__avatar, + .account__avatar-overlay-base, + .account__avatar-overlay-overlay { + border-radius: $queen-radius-pfp; } .tabs-bar__wrapper { @@ -111,7 +173,7 @@ body { .status, .detailed-status { - background-color: darken($ui-base-color, 25%); + background-color: $black; border-radius: $queen-radius; border-style: solid; border-color: desaturate($queen-highlight-color, 25%); @@ -229,7 +291,7 @@ body { transition: background-color 1s; // clear values from the spoi padding: .2rem; - margin: .1rem; + margin: .3rem; border: 2px outset $white; } .hashtag:hover, @@ -279,7 +341,8 @@ body { .status__action-bar, .status__info__icons, - .columns-area__panels__pane__inner { + .columns-area__panels__pane__inner, + .notification__message { i.fa, .text-icon { transform: scale(1); @@ -303,4 +366,16 @@ body { box-shadow: inset 10px 0px 30px 0px $queen-highlight-color; } + .getting-started__wrapper { + border-radius: $queen-radius; + margin: .5rem; + } + + .reply-indicator, + .status__content__text { + p { + line-height: 2rem; + } + } + } diff --git a/app/javascript/skins/glitch/queens-pink-contrast/variables.scss b/app/javascript/skins/glitch/queens-pink-contrast/variables.scss index 83d12946ef1bdc..c1de386ce702a8 100644 --- a/app/javascript/skins/glitch/queens-pink-contrast/variables.scss +++ b/app/javascript/skins/glitch/queens-pink-contrast/variables.scss @@ -1,9 +1,10 @@ // my theme customizations $queen-highlight-color: #b82493; -$queen-bg: #19011b; +$queen-bg: #3a002f; $queen-radius: 16px; -$queen-radius-pfp: 8px; -$queen-border-thickness: 3px; +$queen-radius-pfp: 25%; +$queen-border-thickness: .1rem; + // built-in defaults