Skip to content

Commit

Permalink
Merge pull request #14 from QueenOfSquiggles/queens-pink-contrast-theme
Browse files Browse the repository at this point in the history 
Improved readability; Added support for advanced "deck" layout
  • Loading branch information
@Ember-ruby
Ember-ruby authored Oct 28, 2023
2 parents 9d417a6 + add077a commit dd0e9a1
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 27 deletions.
123 changes: 99 additions & 24 deletions app/javascript/skins/glitch/queens-pink-contrast/diff.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -18,18 +18,29 @@ 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;
}

.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;
}
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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%;
Expand All @@ -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 {
Expand All @@ -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%);
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand All @@ -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;
}
}

}
7 changes: 4 additions & 3 deletions app/javascript/skins/glitch/queens-pink-contrast/variables.scss
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down

0 comments on commit dd0e9a1

Please sign in to comment.