Commit b37c8904 authored by Thomas Citharel's avatar Thomas Citharel 🌲

Add and fix themes

Signed-off-by: Thomas Citharel's avatarThomas Citharel <tcit@tcit.fr>
parent d7e48fa0
@import 'contrast/variables';
@import 'application';
@import 'original';
@import 'contrast/diff';
@import 'application';
@import 'original';
/* Allow columns to grow wider as the screen gets
* wider, but don't ever let them get more than
* 400px (some people have a bunch of columns!) */
/* Wider compose area */
@media screen and (min-width: 1300px) {
.column {
flex-grow: 1 !important;
max-width: 400px;
}
.drawer {
width: 17%; /* Not part of the flex fun */
max-width: 400px;
min-width: 330px;
}
}
/* Cap the column height at 100vh (fixed an old
* bug someone encountered in safari, but which
* I've seen resurface from time to time) */
.column {
max-height:100vh;
.layout-multiple-columns .column {
flex-grow: 1 !important;
max-width: 400px;
}
}
/* Don't show outline around statuses if we're in
......@@ -33,6 +23,16 @@
}
}
/* Less emphatic show more */
.status__content__read-more-button {
font-size: 14px;
color: $dark-text-color;
.status__prepend-icon {
padding-right: 4px;
}
}
/* Show a little arrowey thing after the time in a
* status to signal that you can click it to see
* a detailed view */
......@@ -59,6 +59,21 @@
overflow-y:auto;
}
/* Put a reasonable background on the single-column compose form */
.layout-single-column .compose-panel {
background-color: $ui-base-color;
height: auto;
overflow-y: visible;
margin-top: 65px;
}
/* Better distinguish the search bar */
.layout-single-column .compose-panel .search {
position:relative;
top: -55px;
margin-bottom: -55px;
}
/* Use display: none instead of visibility:hidden
* to hide the suggested follows list on non-mobile */
@media screen and (min-width: 630px) {
......@@ -67,6 +82,5 @@
}
}
@import 'fullwidth-media';
This diff is collapsed.
$ui-base-color: #181818; // darkest
$ui-base-color: #1b1b1b; // darkest
$ui-highlight-color: #1ea21e; // vibrant
$ui-secondary-color: #E4F2E4; // lightest
$ui-primary-color: #E4F2E4; // lighter
......@@ -22,6 +22,7 @@ $about-page-text: lighten($ui-base-color, 50%);
body, body.about-body {
background: $ui-base-color url('../images/background-cybre.png');
background-attachment: fixed;
}
body.about-body {
......@@ -270,3 +271,16 @@ body.about-body {
color: $ui-highlight-color;
}
}
.status__content a,
.status__content a.unhandled-link {
color: mix($ui-highlight-color, $ui-secondary-color, 10%);
}
.content-wrapper .content.ombre {
background: #1b1b1b;
}
body.theme-cybrespace, body h1 {
color: $primary-text-color;
}
@import 'mastodon-light/variables';
@import 'application';
@import 'original';
@import 'mastodon-light/diff';
@import 'framapiaf/fixes';
......@@ -8,10 +8,6 @@ body:not(.about-body):not(.app-body):not(.admin) {
body {
font-family: 'mastodon-font-sans-serif', sans-serif;
&.app-body, &.admin {
background: #191b22 !important;
}
div.dropdown-menu {
display: block !important;
}
......@@ -375,10 +371,6 @@ body.admin {
}
}
.ombre {
background: #1f232b !important;
}
.admin-wrapper .sidebar ul ul a.selected,
.admin-wrapper .sidebar ul ul a.selected:hover:hover {
border-left: 5px solid;
......@@ -423,3 +415,17 @@ label.poll__text span {
label.radio-button {
color: #fff;
}
body.theme-original, body.theme-contrast {
&.admin, body h1 {
color: $primary-text-color;
}
.content-wrapper .content.ombre {
background: $base-overlay-background;
}
}
body.app-body {
background: darken($ui-base-color, 7%);
}
......@@ -22,3 +22,12 @@ $base-shadow-color: $color8;
$base-overlay-background: $color8;
@import 'original';
body.admin.theme-paris-mon-amour, body h1 {
color: $primary-text-color;
}
.content-wrapper .content.ombre {
background: $base-overlay-background;
}
// http://design.firefox.com/photon/visuals/color.html
// Firefox Blue is one of our primary colors. We use blue as accent color for highlighting buttons, links, and active states like the current tab in Firefox for desktop.
$photon_blue_40: #45a1ff;
$photon_blue_50: #0a84ff;
$photon_blue_60: #0060df;
$photon_blue_70: #003eaa;
$photon_blue_80: #002275;
$photon_blue_90: #000f40;
// Firefox Teal is one of our primary colors. We use teal as an attention color.
$photon_teal_50: #00feff;
$photon_teal_60: #00c8d7;
$photon_teal_70: #008ea4;
$photon_teal_80: #005a71;
$photon_teal_90: #002d3e;
// Firefox Magenta is one of our primary colors. We currently have no common usage for it.
$photon_magenta_50: #ff1ad9;
$photon_magenta_60: #ed00b5;
$photon_magenta_70: #b5007f;
$photon_magenta_80: #7d004f;
$photon_magenta_90: #440027;
// Firefox Green is commonly used to indicate success.
$photon_green_50: #30e60b;
$photon_green_60: #12bc00;
$photon_green_70: #058b00;
$photon_green_80: #006504;
$photon_green_90: #003706;
// Firefox Yellow is commonly used for warnings.
$photon_yellow_50: #ffe900;
$photon_yellow_60: #d7b600;
$photon_yellow_70: #a47f00;
$photon_yellow_80: #715100;
$photon_yellow_90: #3e2800;
// Firefox Red is commonly used for errors.
$photon_red_50: #ff0039;
$photon_red_60: #d70022;
$photon_red_70: #a4000f;
$photon_red_80: #5a0002;
$photon_red_90: #3e0200;
// Firefox Purple is commonly used to indicate privacy.
$photon_purple_50: #9400ff;
$photon_purple_60: #8000d7;
$photon_purple_70: #6200a4;
$photon_purple_80: #440071;
$photon_purple_90: #25003e;
// Firefox Orange is only used for branding. Do not use it otherwise.
$photon_orange_50: #ff9400;
$photon_orange_60: #d76e00;
$photon_orange_70: #a44900;
$photon_orange_80: #712b00;
$photon_orange_90: #3e1300;
// Firefox Ink is commonly used for interfaces (e.g., the Firefox for desktop dark theme).
$photon_ink_70: #363959;
$photon_ink_80: #202340;
$photon_ink_90: #0f1126;
// Firefox Grey is commonly used for interfaces (e.g., the Firefox for desktop light theme).
$photon_grey_10: #f9f9fa;
$photon_grey_20: #ededf0;
$photon_grey_30: #d7d7db;
$photon_grey_40: #b1b1b3;
$photon_grey_50: #737373;
$photon_grey_60: #4a4a4f;
$photon_grey_70: #38383d;
$photon_grey_80: #2a2a2e;
$photon_grey_90: #0c0c0d;
// We use white for the background of doorhangers or in-content menus.
$photon_white: #ffffff;
@import 'photon.scss';
$color1: $photon_grey_90; // darkest
$color2: lighten($photon_blue_50, 20%); // lightest
$color3: lighten($photon_blue_50, 10%); // lighter
$color4: $photon_blue_50; // vibrant
$color5: $photon_white; // white
$color6: $photon_red_50; // error red
$color7: $photon_green_50; // succ green
$color8: $photon_grey_90; // black
$ui-base-color: $color1;
$ui-secondary-color: $color2;
$ui-primary-color: $color3;
$ui-highlight-color: $color4;
$base-border-color: $color5;
$simple-background-color: $color5;
$primary-text-color: $color5;
$error-value-color: $color6;
$valid-value-color: $color7;
$base-shadow-color: $color8;
$base-overlay-background: $color8;
@import 'original';
body.admin.theme-photon-dark, body h1 {
color: $photon_white;
}
.content-wrapper .content.ombre {
background: $photon_grey_90;
}
@import 'photon.scss';
$color1: $photon_grey_10; // darkest
$color2: lighten($photon_blue_50, 20%); // lightest
$color3: lighten($photon_blue_50, 10%); // lighter
$color4: $photon_blue_50; // vibrant
$color5: $photon_grey_90; // white
$color6: $photon_red_50; // error red
$color7: $photon_green_50; // succ green
$color8: $photon_white; // black
// Avoid making text unreadable
@function lighten ($color, $percentage) {
@return darken($color, $percentage);
}
$ui-base-color: $color1;
$ui-secondary-color: $color2;
$ui-primary-color: $color3;
$ui-highlight-color: $color4;
$base-border-color: $color5;
$simple-background-color: $color5;
$primary-text-color: $color5;
$error-value-color: $color6;
$valid-value-color: $color7;
$base-shadow-color: $color8;
$base-overlay-background: $color8;
@import 'original';
h1.column-header {
color: inherit;
}
......@@ -22,4 +22,12 @@ $valid-value-color: $color7;
$base-shadow-color: $color8;
$base-overlay-background: $color8;
body.admin.theme-toot-cafe {
color: $primary-text-color;
}
.content-wrapper .content.ombre {
background: #2a2833;
}
@import 'original';
This diff is collapsed.
......@@ -6,5 +6,8 @@ original: styles/original.scss # Origin Mastodon theme
original_column_fixed: styles/original_fixed.scss # Original Mastodon theme with nav fixes and fixed columns
"Toot Café": styles/tootcafe.scss # via https://github.com/tootcafe/mastodon/pull/2
"Windows 95": styles/win95.scss # via https://github.com/cybrespace/mastodon
cybrespace: styles/cybre.scss # via https://github.com/cybrespace/mastodon
"Cybrespace": styles/cybre.scss # via https://github.com/cybrespace/mastodon
"Cybrespace Light": styles/cybre-light.scss
"Paris mon Amour": styles/paris.scss # via https://github.com/ashfurrow/mastodon/pull/1
"Photon Dark": styles/photon_dark.scss
"Photon Light": styles/photon_light.scss
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment