Add win95, cybrespace, and paris mon amour themes
This commit is contained in:
Nolan Lawson
parent
d5621067bd
commit
c050add235
20 changed files with 1785 additions and 1 deletions
278
app/javascript/styles/cybre.scss
Normal file
278
app/javascript/styles/cybre.scss
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
$ui-base-color: #181818; // darkest
|
||||
$ui-highlight-color: #1ea21e; // vibrant
|
||||
$ui-secondary-color: #E4F2E4; // lightest
|
||||
$ui-primary-color: #E4F2E4; // lighter
|
||||
$ui-primary-color-alt: #a0b49c; // darker, for external pages
|
||||
|
||||
$about-page-text: lighten($ui-base-color, 50%);
|
||||
|
||||
@import 'application';
|
||||
|
||||
body, body.about-body {
|
||||
background: $ui-base-color url('../images/background-cybre.png');
|
||||
}
|
||||
|
||||
body.about-body {
|
||||
// basics.scss &.about-body
|
||||
background: darken($ui-base-color, 8%) url('../images/background-cybre.png');
|
||||
|
||||
background-position-y: 60px;
|
||||
background-position-x: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1300px) {
|
||||
.column {
|
||||
flex-grow: 1 !important;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.drawer {
|
||||
width: 17%;
|
||||
max-width: 400px;
|
||||
min-width: 330px;
|
||||
}
|
||||
}
|
||||
|
||||
.muted {
|
||||
.status__content p, .status__content a {
|
||||
color: lighten($ui-base-color, 35%);
|
||||
}
|
||||
|
||||
.status__display-name strong {
|
||||
color: lighten($ui-base-color, 35%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-whatinput="mouse"], [data-whatinput="touch"] {
|
||||
.status__content:focus, .status:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.status time:after,
|
||||
.detailed-status__datetime span:after {
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
content: "\00a0\00a0\f08e";
|
||||
}
|
||||
|
||||
.compose-form__buttons button.active:last-child {
|
||||
color:$ui-secondary-color;
|
||||
background-color: $ui-highlight-color;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
.about-body .mascot {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.screenshot-with-signup {
|
||||
min-height:300px;
|
||||
}
|
||||
|
||||
.container.hero .closed-registrations-message .clock {
|
||||
font-size: 150%;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
.column .static-content.getting-started {
|
||||
background-image: url('../images/logo-cybre.png'), url('../images/background-cybre.png');
|
||||
background-position: 50% 50%;
|
||||
background-size:cover;
|
||||
}
|
||||
|
||||
.columns-area {
|
||||
background: $ui-base-color url('../images/background-cybre.png');
|
||||
}
|
||||
|
||||
.drawer .drawer__inner {
|
||||
overflow: visible;
|
||||
height:inherit;
|
||||
}
|
||||
|
||||
.drawer__pager {
|
||||
overflow-y:auto;
|
||||
}
|
||||
|
||||
.column {
|
||||
max-height:100vh;
|
||||
}
|
||||
|
||||
|
||||
.media-gallery {
|
||||
max-height:30vh;
|
||||
height:30vh !important;
|
||||
position:relative;
|
||||
margin-top:20px;
|
||||
margin-left:-68px;
|
||||
width: calc(100% + 80px);
|
||||
}
|
||||
|
||||
.detailed-status .media-gallery {
|
||||
margin-left:-10px;
|
||||
width: calc(100% + 22px);
|
||||
}
|
||||
|
||||
.media-spoiler-video,
|
||||
.status__video-player,
|
||||
.detailed-status > .media-spoiler,
|
||||
.status > .media-spoiler {
|
||||
max-height:30vh;
|
||||
height:30vh !important;
|
||||
position:relative;
|
||||
margin-top:20px;
|
||||
margin-left:-68px;
|
||||
width: calc(100% + 80px) !important;
|
||||
}
|
||||
|
||||
.status__video-player-video {
|
||||
transform:unset;
|
||||
top:unset;
|
||||
}
|
||||
|
||||
.detailed-status > .media-spoiler,
|
||||
.status > .media-spoiler {
|
||||
height:30vh !important;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
.actions .button.button-alternative {
|
||||
background: $ui-highlight-color;
|
||||
color: $ui-primary-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($ui-highlight-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.landing-page .container.links {
|
||||
top: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.landing-page .header-wrapper,
|
||||
.landing-page .header-wrapper.compact {
|
||||
background-image:url('../images/header-cybre.jpeg');
|
||||
background-size:cover;
|
||||
background-position:50% 50%;
|
||||
}
|
||||
|
||||
.landing-page .header {
|
||||
.heading {
|
||||
visibility:hidden;
|
||||
}
|
||||
|
||||
.hero .floats {
|
||||
.float-1, .float-2, .float-3 {
|
||||
opacity:0.4;
|
||||
background-image:url('../images/floppy-1.svg');
|
||||
}
|
||||
|
||||
.float-1 {
|
||||
background-size:200px 200px;
|
||||
width:200px;
|
||||
height:200px;
|
||||
bottom:60px;
|
||||
}
|
||||
|
||||
.float-2 {
|
||||
background-size:150px 150px;
|
||||
width:150px;
|
||||
height:150px;
|
||||
right:280px;
|
||||
}
|
||||
|
||||
.float-3 {
|
||||
background-size:300px 300px;
|
||||
width:300px;
|
||||
height:300px;
|
||||
right: 200px;
|
||||
top: -80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about-body .brand {
|
||||
visibility:hidden;
|
||||
}
|
||||
|
||||
.activity-stream {
|
||||
.status.light {
|
||||
.status__header .status__meta .status__relative-time {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
|
||||
.display-name span {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
|
||||
.status__content {
|
||||
a.status__content__spoiler-link {
|
||||
background: $ui-primary-color-alt;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-primary-color-alt, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status.light {
|
||||
.detailed-status__display-name .display-name span {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
|
||||
.status__content a.status__content__spoiler-link {
|
||||
background: $ui-primary-color-alt;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-primary-color-alt, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__meta {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.media-spoiler {
|
||||
background: $ui-primary-color-alt;
|
||||
&:hover {
|
||||
background: darken($ui-primary-color-alt, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.pre-header {
|
||||
color: $ui-primary-color-alt;
|
||||
.status__display-name.muted strong {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button {
|
||||
color: $ui-primary-color-alt;
|
||||
svg {
|
||||
path:first-child {
|
||||
fill: $ui-primary-color-alt;
|
||||
}
|
||||
}
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
svg path:first-child {
|
||||
fill: lighten($ui-primary-color-alt, 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account__avatar,
|
||||
.account__avatar-overlay-base,
|
||||
.account__header__avatar,
|
||||
.account__avatar-overlay-overlay {
|
||||
border-radius:0px !important;
|
||||
-webkit-clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
|
||||
clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
|
||||
}
|
||||
24
app/javascript/styles/paris.scss
Normal file
24
app/javascript/styles/paris.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
// via https://github.com/ashfurrow/mastodon/pull/1
|
||||
|
||||
$color1: #0E2333; // darkest
|
||||
$color2: #E4E6DA; // lightest
|
||||
$color3: #EBDC98; // lighter
|
||||
$color4: #398CCC; // vibrant
|
||||
$color5: #ffffff; // white
|
||||
$color6: #FF003C; // error red
|
||||
$color7: #A8BF34; // succ green
|
||||
$color8: #000000; // 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 'application';
|
||||
1413
app/javascript/styles/win95.scss
Normal file
1413
app/javascript/styles/win95.scss
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue