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';
......@@ -74,7 +74,7 @@ a.mention {
background: rgba(0, 0, 0, 0.7);
}
.admin-wrapper {
.admin-wrapper {
.sidebar-wrapper, .content-wrapper {
background-color: #eee;
overflow: auto;
......
@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;
}
.layout-multiple-columns .column {
flex-grow: 1 !important;
max-width: 400px;
}
}
/* 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;
}
/* Don't show outline around statuses if we're in
/* Don't show outline around statuses if we're in
* mouse or touch mode (rather than keyboard) */
[data-whatinput="mouse"], [data-whatinput="touch"] {
.status__content:focus, .status:focus,
......@@ -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,14 +59,28 @@
overflow-y:auto;
}
/* Use display: none instead of visibility:hidden
/* 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) {
.search-results .trends {
display:none;
display:none;
}
}
@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 {
......@@ -73,104 +74,104 @@ body.about-body {
}
.actions .button.button-alternative {
background: $ui-highlight-color;
color: $ui-primary-color;
background: $ui-highlight-color;
color: $ui-primary-color;
&:active,
&:focus,
&:hover {
background-color: lighten($ui-highlight-color, 4%);
}
&:active,
&:focus,
&:hover {
background-color: lighten($ui-highlight-color, 4%);
}
}
@media screen and (max-width: 1280px) {
.landing-page .container.links {
top: -15px;
top: -15px;
}
}
.landing-page.alternative .header {
background-image:url('../images/header-cybre-colour.jpg');
background-repeat: repeat-x;
background-size:contain;
height:45vh;
width: 100%;
position:absolute;
z-index: 1;
text-align:center;
display: unset!important;
background-image:url('../images/header-cybre-colour.jpg');
background-repeat: repeat-x;
background-size:contain;
height:45vh;
width: 100%;
position:absolute;
z-index: 1;
text-align:center;
display: unset!important;
}
.landing-page.alternative .header img {
margin: auto;
max-height:45vh;
margin: auto;
max-height:45vh;
}
.landing-page.alternative .grid {
position: relative;
z-index:2;
margin-top:15vh;
position: relative;
z-index:2;
margin-top:15vh;
}
.landing-page.alternative .landing-page__hero img {
visibility: hidden;
max-height:170px;
visibility: hidden;
max-height:170px;
}
.landing-page.alternative .landing-page__forms {
height:auto;
height:auto;
}
.landing-page.alternative .column-1 {
display:flex;
align-items:flex-end;
display:flex;
align-items:flex-end;
}
.landing-page.alternative .column {
max-height:initial;
max-height:initial;
}
.landing-page.alternative .row__mascot {
.floats {
position:absolute;
img {
width:100%;
height:100%;
}
transition: all 0.1s linear;
animation-name: floating;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
.floats {
position:absolute;
img {
width:100%;
height:100%;
}
transition: all 0.1s linear;
animation-name: floating;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.float-1 {
width:50px;
height:50px;
bottom:60px;
left:110px;
animation-duration: 3s;
}
.float-1 {
width:50px;
height:50px;
bottom:60px;
left:110px;
animation-duration: 3s;
}
.float-2 {
width:130px;
height:130px;
left:85px;
bottom: -60px;
animation-duration: 3.5s;
animation-delay: 0.2s;
}
.float-2 {
width:130px;
height:130px;
left:85px;
bottom: -60px;
animation-duration: 3.5s;
animation-delay: 0.2s;
}
.float-3 {
width:100px;
height:100px;
right: 50;
top: -10px;
animation-duration: 4s;
animation-delay: 0.5s;
}
.float-3 {
width:100px;
height:100px;
right: 50;
top: -10px;
animation-duration: 4s;
animation-delay: 0.5s;
}
}
.activity-stream {
......@@ -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.
contrast: styles/contrast.scss
contrast: styles/contrast.scss
mastodon-light: styles/mastodon-light.scss # Contrast theme
default: styles/custom.scss # Framapiaf theme
default_column_fixed: styles/custom_fixed.scss # Framapiaf theme with fixed columns
......@@ -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