From 424c854f347ee2d2e68b0f1be6d67fcb14fdff69 Mon Sep 17 00:00:00 2001 From: Vivianne Langdon Date: Sat, 30 Apr 2022 22:56:26 -0700 Subject: [PATCH] add custom theme --- .../glitch/solarpunk/solarpunk/common.scss | 3 + .../glitch/solarpunk/solarpunk/diff.scss | 139 ++++++++++++++++++ .../glitch/solarpunk/solarpunk/names.yml | 4 + .../glitch/solarpunk/solarpunk/variables.scss | 75 ++++++++++ 4 files changed, 221 insertions(+) create mode 100644 app/javascript/skins/glitch/solarpunk/solarpunk/common.scss create mode 100644 app/javascript/skins/glitch/solarpunk/solarpunk/diff.scss create mode 100644 app/javascript/skins/glitch/solarpunk/solarpunk/names.yml create mode 100644 app/javascript/skins/glitch/solarpunk/solarpunk/variables.scss diff --git a/app/javascript/skins/glitch/solarpunk/solarpunk/common.scss b/app/javascript/skins/glitch/solarpunk/solarpunk/common.scss new file mode 100644 index 0000000..fbd81b9 --- /dev/null +++ b/app/javascript/skins/glitch/solarpunk/solarpunk/common.scss @@ -0,0 +1,3 @@ +@import 'variables'; +@import 'flavours/glitch/styles/index'; +@import 'diff'; diff --git a/app/javascript/skins/glitch/solarpunk/solarpunk/diff.scss b/app/javascript/skins/glitch/solarpunk/solarpunk/diff.scss new file mode 100644 index 0000000..feb03f2 --- /dev/null +++ b/app/javascript/skins/glitch/solarpunk/solarpunk/diff.scss @@ -0,0 +1,139 @@ +@import 'variables'; + +body { + background-color: $solar-bg; +} + +.media-modal__overlay +.picture-in-picture__footer +button.icon-button { + i.fa-retweet { + background: url("data:image/svg+xml;utf8,") no-repeat; + } + + &.reblogPrivate i.fa-retweet { + background: url("data:image/svg+xml;utf8,"); + } + + i.fa-star { + background: url("data:image/svg+xml;utf8,") no-repeat top; + } +} + +.media-modal__overlay +.picture-in-picture__footer +button.icon-button.active { + &.reblogPrivate.active i.fa-retweet, + i.fa-retweet { + background: url("data:image/svg+xml;utf8,") no-repeat; + background-position: 50% 100%; + } + + i.fa-star { + background-position: 50% 100%; + } +} + +button.icon-button { + &:hover i.fa-retweet, + &.reblogPrivate.active i.fa-retweet, + &:hover.reblogPrivate.active i.fa-retweet, + i.fa-retweet { + background: url("data:image/svg+xml;utf8,") no-repeat; + width: 19px; + height: 18.5px; + transition: background-position .6s steps(4); + } + + &.reblogPrivate:hover i.fa-retweet, + &.reblogPrivate i.fa-retweet { + background: url("data:image/svg+xml;utf8,"); + } + + &.reblogPrivate.active i.fa-retweet, + &:hover.reblogPrivate.active i.fa-retweet { + background-position: bottom; + } + + &:hover i.fa-star, + i.fa-star { + background: url("data:image/svg+xml;utf8,") no-repeat top; + height: 21.4px; + margin: 1px 0; + transition: background-position .6s steps(4); + } + + &.active i.fa-star { + background-position: 50% 100%; + } + + /* Remove the font-awesome icon */ + .fa-star::before { + content: ""; + } + + &.disabled { + i.fa-retweet, + &:hover i.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); + } + } + + &.active i.fa-retweet { + background-position: 50% 100%; + } +} + +.no-reduce-motion .icon-button.star-icon { + &.deactivate > .fa-star, + &.activate > .fa-star { + animation: none; + -webkit-animation: none; + } +} + +.detailed-status__link { + .fa-star { + background: url("data:image/svg+xml;utf8,") no-repeat top; + width: 12px; + height: 13px; + margin-bottom: -1px; + + &::before { + content: ""; + } + } + + .fa-retweet { + background: url("data:image/svg+xml;utf8,") no-repeat; + width: 13px; + height: 14px; + margin-bottom: -1px; + + &::before { + content: ""; + } + } +} + +.drawer .drawer__inner { + background: lighten($ui-base-color, 13%) url("data:image/svg+xml;utf8,") 0 9px; + background-size: 100%; +} + +.drawer__inner__mastodon { + background-color: transparent !important; +} + +.single-column, +.auto-columns { + .column-header { + background: lighten($ui-base-color, 4%) url("data:image/svg+xml;utf8,") 2px 2px; + background-size: 44.25px; + } + + .column-header__button, + .column-header__back-button { + background-color: transparent; + } +} diff --git a/app/javascript/skins/glitch/solarpunk/solarpunk/names.yml b/app/javascript/skins/glitch/solarpunk/solarpunk/names.yml new file mode 100644 index 0000000..7f7332d --- /dev/null +++ b/app/javascript/skins/glitch/solarpunk/solarpunk/names.yml @@ -0,0 +1,4 @@ +en: + skins: + glitch: + solarpunk: Solarpunk diff --git a/app/javascript/skins/glitch/solarpunk/solarpunk/variables.scss b/app/javascript/skins/glitch/solarpunk/solarpunk/variables.scss new file mode 100644 index 0000000..038f6d1 --- /dev/null +++ b/app/javascript/skins/glitch/solarpunk/solarpunk/variables.scss @@ -0,0 +1,75 @@ +$black: #000000; +$white: #ffffff; +$success-green: #79bd9a; +$error-red: #df405a; +$warning-red: #ff5050; +$gold-star: #ca8f04; + +// Values from the classic Mastodon UI +$classic-base-color: #282c37; // Midnight Express +$classic-primary-color: #9baec8; // Echo Blue +$classic-secondary-color: #d9e1e8; // Pattens Blue +$classic-highlight-color: #2b90d9; // Summer Sky + +// our theme customizations +$solar-highlight-color: #378d2a; +$solar-bg: #060e0c; // dark green +$solar-recycling: #009700; +$solar-panel-header: #202c4d; + +// Variables for defaults in UI +$base-shadow-color: $black !default; +$base-overlay-background: $black !default; +$base-border-color: $white !default; +$simple-background-color: $white !default; +$valid-value-color: $success-green !default; +$error-value-color: $error-red !default; + +$ui-base-color: #161c2c; +$ui-base-lighter-color: #5370a2 !default; // Lighter darkest +$ui-primary-color: $classic-primary-color !default; +$ui-secondary-color: $classic-secondary-color !default; +$ui-highlight-color: $classic-highlight-color !default; + +$ui-highlight-color: $solar-highlight-color; + + +// Variables for texts +$primary-text-color: $white !default; +$darker-text-color: $ui-primary-color !default; +$dark-text-color: $ui-base-lighter-color !default; +$secondary-text-color: $ui-secondary-color !default; +$highlight-text-color: $ui-highlight-color !default; +$action-button-color: $ui-base-lighter-color !default; +$action-button-color-lighter: lighten($ui-base-lighter-color, 10%) !default; +$action-button-color-darker: darken($ui-base-lighter-color, 5%) !default; + +$passive-text-color: $gold-star !default; +$active-passive-text-color: $success-green !default; +// For texts on inverted backgrounds +$inverted-text-color: $ui-base-color !default; +$lighter-text-color: $ui-base-lighter-color !default; +$light-text-color: $ui-primary-color !default; + +$solar-disabled: darken($action-button-color, 10%) !default; + +// Language codes that uses CJK fonts +$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; + +// Variables for components +$media-modal-media-max-width: 100%; +// put margins on top and bottom of image to avoid the screen covered by image. +$media-modal-media-max-height: 80%; + +$no-gap-breakpoint: 415px; + +$font-sans-serif: 'mastodon-font-sans-serif' !default; +$font-display: 'mastodon-font-display' !default; +$font-monospace: 'mastodon-font-monospace' !default; + +// Avatar border size (8% default, 100% for rounded avatars) +$ui-avatar-border-size: 8%; + +// More variables +$dismiss-overlay-width: 4rem; +