rethemed arachnia

2 files changed, 32 insertions, 349 deletions

diff --git a/app/javascript/flavours/glitch/styles/arachnia/diff.scss b/app/javascript/flavours/glitch/styles/arachnia/diff.scss
index 33225cf27..be6d92d5a 100644
--- a/app/javascript/flavours/glitch/styles/arachnia/diff.scss
+++ b/app/javascript/flavours/glitch/styles/arachnia/diff.scss
@@ -3,95 +3,22 @@
 	body,
 	body.app-body {
 		background: black url(https://monsterpit.net/extras/pit.png) no-repeat center center fixed !important;
-		background-size: cover !important;
-		font-size: 14px !important;
+		background-size: cover;
+		font-size: 14px;
 	}
 
-	// Abouts: - dotted HRs
-	//         - HR fills width of content area
-	//         - HR adds line of blank space before/after
-	hr { border: 1px dotted #600; }
-
 	// Small-caps links
 	a[href], h1, h2, h3, h4,
 	.column-header,
 	.column-back-button {
-		text-decoration: none !important;
-		font-variant: small-caps !important;
-	}
-
-	.mascot-container, .floats { display: none !important; }
-
-	.mascot-container, .floats { display: none !important; }
-
-	.about-short { background: transparent !important; }
-
-	.closed-registrations-message,
-	.simple-form { min-height: inherit !important; }
-
-	.landing-page .heading { padding-bottom: 0 !important; }
-
-	.landing-page h1 { font-size: 32px !important; }
-
-	.landing-page p,
-	.landing-page li,
-	.features-list__row .text { color: #fff !important; }
-
-	.landing-page h1,
-	.landing-page h2,
-	.landing-page h3,
-	.landing-page h6 { color: #906 !important; }
-
-  .landing-page__call-to-action { background: $ui-base-color }
-
-	.about-body h2 { font-size: 28px !important; }
-
-	.name { font-size: 24px !important; }
-
-	// Public user TL: action icons aligned with left edge of status
-	.activity-stream .pre-header .pre-header__icon {
-		position: inherit !important;
-		float: left;
-		margin-right: 0.5em !important;
-		left: 0 !important;
-	}
-
-	// Public user TL: remove intentation from action text; move down
-	.activity-stream .pre-header {
-		padding-left: 0 !important;
-		margin-bottom: 4px !important;
-	}
-
-	// User list: expand card size; one per row
-	.account-grid-card { width: 100% !important; }
-
-	// TL status, user card: - black semi-trans bg with rounded border
-	//                       - space between right edge and scrollbar
-	.status,
-	.detailed-status,
-	.detailed-status__action-bar,
-	.account-grid-card {
-		background: #302 url(/system/custom-images/status-bg.png) repeat-x top center !important;
-		border: 1px solid #604 !important;
-		border-radius: 4px;
-		margin: 0em 0.5em 1em 0em;
-	}
-
-	.status.collapsed .status__content:after {
-		background: linear-gradient(transparentize(#302, 1), #302) !important;
-	}
-
-	// TL status prefix: move origin user text closer to icon
-	.notification__message,
-	.status__prepend {
-		margin-left: 30px !important;
-		padding: 0 !important;
+		text-decoration: none;
+		font-variant: small-caps;
 	}
 
 	// TL status prefix: hide boost/fav action text
 	.notification__message span,
 	.status__prepend span,
-	.activity-stream .pre-header { font-size: 12px !important; }
+	.activity-stream .pre-header { font-size: 12px; }
 
 	// TL status: font size of user's friendly name
 	.notification__message span a,
@@ -102,123 +29,13 @@
 	.detailed-status__display-name strong,
 	.account-grid-card .username,
 	.name .username {
-		font-size: 16px !important;
-		font-weight: bold !important;
-	}
-
-
-	// TL status prefix: move icon closer to left edge
-	.notification__favourite-icon-wrapper,
-	.status__prepend-icon-wrapper { left: -25px !important; }
-
-	// Spoilers
-	.status__content__spoiler-link {
-    background: #000 !important;
-    border: 1px solid $ui-highlight-color;
-  }
-  .media-gallery.full-width { margin-left: 0; margin-right: 0 }
-
-	// UI: remove borders and solid bg colors
-	.ui,
-	.drawer,
-	.scrollable,
-	.drawer__inner,
-	.column-link,
-	.sidebar ul ul,
-	.column-header,
-	.column-header__button,
-	.column-back-button,
-	.column-header__wrapper,
-	.drawer__header,
-	.activity-stream .entry,
-	.accounts-grid,
-	.account-grid-card__header,
-	#mastodon-timeline,
-	.header-wrapper,
-	.about-mastodon,
-	.container,
-	.content,
-	.empty-column-indicator,
-	.learn-more-cta,
-	.sidebar-wrapper,
-	.closed-registrations-message,
-	.simple_form,
-	.information-board,
-	.about-short {
-		background: none !important;
-		-webkit-box-shadow: none !important;
-		box-shadow: none !important;
-		border: none !important;
-	}
-
-	// Column/Drawer headings: solid red bg and border; blank line after
-	.column-back-button,
-	.column-header,
-	.drawer--header,
-	.search,
-	.search-results,
-	.autosuggest-textarea__suggestions {
-		background: #604 !important;
-		margin-bottom: 1em !important;
-		border: 1px solid #c08 !important
-	}
-
-  .drawer--header > * { color: $ui-highlight-color; }
-
-	.search-results, .autosuggest-textarea__suggestions { color: #fff !important; }
-
-	// Fix column back buttons.
-	.column-header__back-button {
-		color: #fff !important;
-		background: none !important;
-	}
-
-	.column-back-button {
-		top: calc(-1.5em - 42px) !important;
-		color: #fff !important;
-	}
-
-  .poll__text input[type="text"], .compose-form__poll-wrapper select {
-    color: $ui-base-color;
-  }
-
-	// Search box: darken
-	.search__input {
-		background: #302 !important;
-		border: 1px solid #201 !important;
-	}
-
-  .drawer--search--popout {
-    background: #160011;
-    h4, em { color: $lighter-text-color; }
-  }
-
-	// Tootbox
-	.autosuggest-textarea__textarea,
-	.compose-form__modifiers,
-	.compose-form__buttons,
-	.spoiler-input__input {
-		background: #302 !important;
-		color: #fff !important;
-	}
-
-	// Reply indicator: theme like status
-	.reply-indicator {
-		background: #302 !important;
-		border: 1px solid #604 !important;
-		border-radius: 4px;
-		margin-bottom: 1em;
+		font-size: 16px;
+		font-weight: bold;
 	}
 
 	// TL status: move timestamp to bottom-right
 	.status__relative-time {
-		color: #906 !important;
-		border-bottom: none !important;
-		font-size: 10px !important;
-		position: absolute;
-		right: 4px;
-		bottom: 0;
-    z-index: -666;
+		font-size: 10px;
 	}
 
 	// TL status: color of user address; push down post content
@@ -230,12 +47,16 @@
 	.name small,
 	.status__display-name,
 	.display-name__account {
-		color: #a39 !important;
-		margin-bottom: 1em;
-		font-size: 12px !important;
-		font-weight: bold !important;
+		font-size: 12px;
+		font-weight: bold;
 	}
 
+  .signature {
+    font-size: 12px;
+    font-weight: bold;
+		font-variant: small-caps;
+  }
+
 	// TL status: color of users' friendly names; on own line
 	.account-grid-card .name a,
 	.account__display-name strong,
@@ -244,163 +65,25 @@
 	.status__display-name strong,
 	.account__header__display-name,
 	.card__bio .name {
-		color: #c06 !important;
-		display: block;
-		font-weight: bold !important;
+		font-weight: bold;
+    color: lighten($ui-primary-color, 15%);
 	}
 
-	.status__display-name strong { display: inherit !important; }
-
-	.status__prepend span { color: white }
-
 	// TL status prefix: color of users' friendly names
 	.status__prepend .status__display-name,
 	.notification__display-name,
 	.status__display-name.muted,
-	.status__display-name.muted strong, { color: #906 !important; font-size: 14px !important; }
-
-	// Opened status: add link icon on posts
-	.detailed-status__datetime:before { content: "\1F517" }
+	.status__display-name.muted strong, { font-size: 14px; }
 
 	// All status: message text
 	.reply-indicator__content,
 	.status__content,
 	.account-grid-card .note {
-		color: #dcd !important;
-		font-size: 14px !important;
-		line-height: inherit !important;
-	}
-
-	// All status: use left space; add padding to top
-	.status { padding-left: 10px !important; }
-
-	.status__info { padding-left: 0 !important; }
-
-	.status__content { padding-top: 10px !important; }
-
-	// All status: move icon to right side
-	.status__avatar {
-		left: inherit !important;
-		top: 8px !important;
-		right: 8px !important;
-	}
-
-	/// Expanded status: make header and padding match TL status
-	.detailed-status { padding: 8px !important; }
-
-	.detailed-status__display-name { margin: 0 !important; }
-
-	.detailed-status__display-avatar {
-		float: right !important;
-		margin: 0 !important;
-	}
-
-	// TL status prefix:  text shouldn't clip icon
-	//.display-name { max-width: calc(100% - 32px) !important; }
-
-	// TL status: muted text
-	.muted .status__content p { color: #a9a !important; }
-
-	// TL status: links in post
-	.reply-indicator__content a,
-	.status__content a { color: #e6c !important; }
-
-	// Expanded status: action bars
-	.account__disclaimer, .account__action-bar { background: #160011 !important; }
-
-  .boost-modal__action-bar,
-  .doodle-modal__action-bar,
-  .favourite-modal__action-bar,
-  .confirmation-modal__action-bar,
-  .mute-modal__action-bar {
-    background: #201;
-    div { color: $light-text-color; }
-  }
-
-	// Default icon button color
-	.icon-button { color: #604; }
-
-	.account__header__display-name,
-	.account__header__username { font-variant: small-caps !important; }
-
-	.account__header__username,
-	.name small {
-		font-size: 12px !important;
-		font-weight: bold !important;
-		margin-bottom: 1em !important;
+		font-size: 14px;
+		line-height: inherit;
 	}
 
-	.account__header__content { color: #fff !important; }
-
-	// Make status Emojos bigger
-	.reply-indicator__content .emojione,
-	.status__content .emojione { width: 32px !important; height: 32px !important; padding: 2px; }
-
   // staff tools
   div.drawer__inner__admin ul li a { color: $lighter-text-color }
   div.drawer__inner__admin ul li a:hover { color: $white }
-
-	// Locked posts animation
-	@-webkit-keyframes blink-off {
-		0%	{ opacity: .75 }
-		50%	{ opacity: 0 }
-		100%	{ opacity: .75 }
-	}
-
-	@keyframes blink-off {
-		0%	{ opacity: .75 }
-		50%	{ opacity: 0 }
-		100%	{ opacity: .75 }
-	}
-
-	.icon-button.disabled {
-		opacity: .75;
-
-		-moz-transition: all 2s ease-in-out;
-		-webkit-transition: all 2s ease-in-out;
-		-o-transition: all 2s ease-in-out;
-		-ms-transition: all 2s ease-in-out;
-		transition: all 2s ease-in-out;
-
-		-moz-animation: blink-off normal 4s 1 ease-in-out;
-		-webkit-animation: blink-off normal 4s 1 ease-in-out;
-		-ms-animation: blink-off normal 4s 1 ease-in-out;
-		animation: blink-off normal 4s 1 ease-in-out;
-	}
-
-	// Active item banimation
-	@-webkit-keyframes blink-on {
-		from	{ transform: scale(1.5) }
-		50%	{ transform: scale(2) }
-		to	{ transform: scale(1.5) }
-	}
-
-	@keyframes blink-on {
-		from	{ transform: scale(1.5) }
-		50%	{ transform: scale(2) }
-		to	{ transform: scale(1.5) }
-	}
-
-	.column-header.active>.column-header__icon,
-	.icon-button.active {
-		color: $inverted-text-color !important;
-		transform: scale(1.5);
-
-		-moz-transition: all 1s ease-in-out;
-		-webkit-transition: all 1s ease-in-out;
-		-o-transition: all 1s ease-in-out;
-		-ms-transition: all 1s ease-in-out;
-		transition: all 1s ease-in-out;
-
-		-moz-animation: blink-on normal 2s 1 ease-in-out;
-		-webkit-animation: blink-on normal 2s 1 ease-in-out;
-		-ms-animation: blink-on normal 2s 1 ease-in-out;
-		animation: blink-on normal 2s 1 ease-in-out;
-	}
-
-	// Scrollbar in Chrome/Webkit browsers
-	::-webkit-scrollbar-thumb {
-		background: #906 !important;
-		border: 1px solid #c09 !important;
-	}
 }
diff --git a/app/javascript/flavours/glitch/styles/arachnia/variables.scss b/app/javascript/flavours/glitch/styles/arachnia/variables.scss
index ad2a75e4a..11c51e657 100644
--- a/app/javascript/flavours/glitch/styles/arachnia/variables.scss
+++ b/app/javascript/flavours/glitch/styles/arachnia/variables.scss
@@ -1,29 +1,29 @@
-$classic-base-color: #201;
-$classic-primary-color: #503;
-$classic-secondary-color: #906;
-$classic-highlight-color: #c08;
+$classic-base-color: #250515;
+$classic-primary-color: #624;
+$classic-secondary-color: #a68;
+$classic-highlight-color: #e69;
 
 $base-shadow-color: $black;
 $base-overlay-background: $black;
 $base-border-color: $white;
 
-$simple-background-color: #c69;
+$simple-background-color: #c58;
 $valid-value-color: $success-green;
 $error-value-color: $error-red;
 
 $ui-base-color: $classic-base-color;                  // Darkest
-$ui-base-lighter-color: lighten($ui-base-color, 26%); // Lighter darkest
+$ui-base-lighter-color: lighten($ui-base-color, 15%); // Lighter darkest
 $ui-primary-color: $classic-primary-color;            // Lighter
 $ui-secondary-color: $classic-secondary-color;        // Lightest
 $ui-highlight-color: $classic-highlight-color;
 
-$primary-text-color: $white;
+$primary-text-color: #c9a;
 $darker-text-color: lighten($ui-primary-color, 20%);
-$dark-text-color: $ui-base-lighter-color;
+$dark-text-color: darken($ui-highlight-color, 40%);
 $secondary-text-color: $ui-secondary-color;
 $highlight-text-color: $ui-highlight-color;
 $action-button-color: $ui-base-lighter-color;
 
-$inverted-text-color: #e9a;
-$lighter-text-color: $ui-base-lighter-color;
-$light-text-color: $ui-primary-color;
+$inverted-text-color: #523;
+$lighter-text-color: #fff;
+$light-text-color: #fff;