From 13a3c1e29473aa9f563e8db4ad94cb3eee9bdfe6 Mon Sep 17 00:00:00 2001 From: Gareth Coles Date: Tue, 5 Jun 2018 16:07:35 +0100 Subject: Move from CSS to SCSS (#86) * Rewrite existing style.css with sass * Add "uses-rst" class for pages that use rendered RST This replaces the previous method of just listing every page in the sass * Remove old debug print * Mixins and error pages * Newly built CSS * Add SASS cache to .gitignore * New error SASS * Slight changes to error template * Add UIKit SCSS to repo This includes the LICENSE and our customizations, which makes life way easier for contributors * Reorganize sass folder; your watchers can avoid uikit now * Sass folder should be called scss * Change variable names * [SCSS] Linting * Fix scss_lint gem name [ci skip] * [SCSS] Now you can compile with just Python! * Temporary hack to make the wiki editor taller * [SCSS] @jchristgit * [SCSS.py] Require specification of include dir to simplify the SCSS imports * [SCSS] All inline styles have been removed * [SCSS] Update UIKit theme to import from our variables * [SCSS] Remove extra newlines in errors/_common.scss --- scss/pysite/pages/errors/_common.scss | 131 ++++++++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 scss/pysite/pages/errors/_common.scss (limited to 'scss/pysite/pages/errors') diff --git a/scss/pysite/pages/errors/_common.scss b/scss/pysite/pages/errors/_common.scss new file mode 100644 index 00000000..27dac785 --- /dev/null +++ b/scss/pysite/pages/errors/_common.scss @@ -0,0 +1,131 @@ +@import "mixins"; +@import "variables"; + +$close_button_background: #FF5F4F; + +$error_header_color: #E84149; + +$half_opacity_black: rgba(0, 0, 0, .5); + +$maximize_button_background: #19CC32; +$minimize_button_background: #F9C206; + +$muted_background: #E8E8E8; + +$top_bar_background_gradient_1: #F1F1F1; +$top_bar_background_gradient_2: #E9E9E9; +$top_bar_background_gradient_3: #D8D8D8; +$top_bar_bottom_border: #BDBCC1; +$top_bar_shadow_colour: rgba(255, 255, 255, .76); + +$window_border: #C1C2C2; + +$page_classes: ( + blueprint-error, // All error pages +); + +@each $class in $page_classes { + .#{$class} { + .window { + @include border_radius(4px); + @include box_shadow(0, 4px, $half_opacity_black, 12px); + + border: 1px solid $window_border; + height: 500px; + margin: 20px auto auto; + width: 100%; + } + + .inside { + background: $black; + height: 100%; + padding-right: 20px; + } + + .block { + background: $black; + width: 100%; + } + + .top, + .panel { + float: left; + } + + .top { + @include linear_gradient_background($top_bar_background_gradient_1, $top_bar_background_gradient_2, $top_bar_background_gradient_3); + @include inset_box_shadow(0, 1px, $top_bar_shadow_colour, 1px, 0); + + border-bottom: 2px solid $top_bar_bottom_border; + overflow: hidden; + padding: 7px 0; + position: relative; + width: 100%; + } + + .panel { + padding-left: 9px; + padding-top: 2px; + } + + // Window buttons + + #terminal-close, + #second-button, + #third-button { + @include border_radius(6px); + + cursor: pointer; + display: inline-block; + float: left; + height: 12px; + margin-right: 7px; + width: 12px; + } + + #terminal-close { + background: $close_button_background; + } + + #second-button { + background: $minimize_button_background; + } + + #third-button { + background: $maximize_button_background; + } + + #terminal { + background-color: $black; + color: $white; + height: 100%; + width: 100%; + + code { + white-space: pre-wrap; + } + } + + pre { + border: 0; + border-radius: 3px; + } + + .uk-background-muted, + .error-header { + background-color: $muted_background !important; + } + + .error-header { + color: $error_header_color; + font-family: monospace; + } + + code, + pre { + overflow-wrap: break-word; + width: 100%; + word-wrap: break-word; + } + } +} -- cgit v1.2.3