From 382572c2132b797719555e7591853c045a1ff216 Mon Sep 17 00:00:00 2001 From: Charlotte Fields Date: Mon, 19 Jun 2017 11:10:10 +1000 Subject: [PATCH] adding cybre changes --- app/javascript/packs/custom.js | 1 + app/javascript/styles/custom.scss | 140 ++++++++++++++++++++++++++++++ 2 files changed, 141 insertions(+) create mode 100644 app/javascript/packs/custom.js create mode 100644 app/javascript/styles/custom.scss diff --git a/app/javascript/packs/custom.js b/app/javascript/packs/custom.js new file mode 100644 index 00000000000..4db2964f649 --- /dev/null +++ b/app/javascript/packs/custom.js @@ -0,0 +1 @@ +require('../styles/custom.scss'); diff --git a/app/javascript/styles/custom.scss b/app/javascript/styles/custom.scss new file mode 100644 index 00000000000..8c6c123162e --- /dev/null +++ b/app/javascript/styles/custom.scss @@ -0,0 +1,140 @@ +$ui-base-color: #181818; // darkest +$ui-secondary-color: #dae8da; // lightest +$ui-primary-color: #dae8da; // lighter +$ui-highlight-color: #1ea21e; // vibrant + +@import 'application'; + +body { + background: $ui-base-color url('../images/background-cybre.png'); +} + +@media screen and (min-width: 1300px) { + .column { + flex-grow: 1 !important; + max-width: 400px; + } + + .drawer { + width: 17%; + max-width: 400px; + } +} + +.muted { + .status__content p, .status__content a { + color: lighten($ui-base-color, 35%); + } + + .status__display-name strong { + color: lighten($ui-base-color, 35%); + } +} + +.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; +} + +.screenshot-with-signup .closed-registrations-message, +.screenshot-with-signup form { + background-color: rgba(0,0,0,0.7); + margin:auto; +} + +.screenshot-with-signup .closed-registrations-message .clock { + font-size:150%; +} + +.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 { + // trying to fix @mdhughes safari problem + max-height:100vh; +} + + + +.media-gallery { + height:auto !important; + max-height:30vh; + position:relative; + margin-top:20px; + margin-left:-68px; + width: calc(100% + 80px); +} + +.media-gallery:before{ + content: ""; + display: block; + padding-top: 100%; +} + +.media-gallery__item, +.media-gallery .media-spoiler{ + left: 0; + right: 0; + top: 0; + bottom: 0 !important; + position:absolute; +} + +.media-spoiler-video:before { + content:""; + display:block; + padding-top:100%; +} + +.media-spoiler-video, +.status__video-player, +.detailed-status > .media-spoiler, +.status > .media-spoiler { + height:auto !important; + max-height:30vh; + position:relative; + margin-top:20px; + margin-left:-68px; + width: calc(100% + 80px) !important; +} + +.status__video-player-video { + transform:unset; +} + +.detailed-status > .media-spoiler, +.status > .media-spoiler { + height:30vh !important; + vertical-align:middle; +}