Webconfig: Let theme match help and fishshell.com

More consistency is nice.
This commit is contained in:
Fabian Homborg 2020-10-04 17:30:01 +02:00
parent aaf5bfc25f
commit 6418e8ea68
7 changed files with 37 additions and 54 deletions

View file

@ -1,7 +1,8 @@
body {
background-color: #292929;
background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%);
font-family: "Source Code Pro", "DejaVu Sans Mono", Menlo, "Ubuntu Mono", Consolas, Monaco, "Lucida Console", monospace, fixed;
color: white;
color: #222;
min-height: 100vh; /* at least 1 screen high - to prevent the gradient from running out on a short tab */
}
code {
@ -9,10 +10,11 @@ code {
}
#ancestor {
width: 80%;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
/* HACK: Instead of allowing tabs to overflow, hide them */
overflow: hidden;
}
#parent {
@ -29,16 +31,15 @@ code {
.tab {
display: table-cell;
border: 1px solid #111;
border: 1px solid #CCC;
border-right: none;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 8px;
padding-right: 8px;
font-size: 17pt;
padding-left: 3px;
padding-right: 3px;
font-size: 14pt;
text-align: center;
width: 15%;
background-color: #292929;
background-color: white;
cursor: pointer;
}
@ -47,7 +48,6 @@ code {
}
#tab_parent :last-child {
border-right: 1px solid #111;
border-top-right-radius: 8px;
}
@ -62,14 +62,15 @@ code {
}
.selected_tab {
background-color: black;
border-color: black;
background-color: #eeeefa;
border-bottom: none;
}
#tab_contents {
padding-top: 35px;
padding-top: 20px;
padding-bottom: 20px;
width: 100%;
background-color: black;
background-color: #eeeefa;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
margin-bottom: 20px;
@ -100,7 +101,7 @@ code {
.detail {
display: table-cell;
border: 1px solid #555;
background-color: #181818;
background-color: #ffffff;
padding-top: 30px;
padding-bottom: 20px;
padding-left: 30px;
@ -113,7 +114,6 @@ code {
white-space: pre-wrap !important;
width: 100%;
font-size: 11pt;
color: #BBB;
}
/* The colours used for function highlighting are taken from the fish
@ -149,7 +149,7 @@ code {
.selected_master_elem {
border: 1px solid #555;
border-right: none;
background-color: #181818;
background-color: #FFFFFF;
border-top-left-radius: 5;
border-bottom-left-radius: 5;
@ -199,7 +199,7 @@ code {
display:inline-block;
margin-left: auto;
margin-right: auto;
color: #AAA;
color: #000;
font-size: smaller;
}
@ -215,14 +215,12 @@ code {
}
.modifier_cell_selected {
color: #CCC;
border-color: #AAA;
border-color: #000;
background-color: #444;
}
.data_table {
table-layout:fixed;
color: #CCC;
width: 100%;
padding-left: 10px;
padding-right: 10px;
@ -266,10 +264,7 @@ code {
}
.abbreviation_input {
background-color: #111;
border: solid 1px #777;
height: 1.5em;
color: white;
font: inherit;
padding: 3px;
margin: 0;
@ -399,14 +394,12 @@ code {
cursor: pointer;
font-size: 12pt;
white-space: normal;
color: #AAA;
}
.color_scheme_choices_scrollview, .prompt_choices_scrollview {
border-top: 1px solid #333;
padding-top: 5px;
overflow: scroll;
max-height: 30em; /* about two and a half boxes */
overflow-y: scroll;
max-height: 70vh; /* fill out roughly the rest of the screen once scrolled to the preview */
}
.color_scheme_choices_list, .prompt_choices_list {
@ -451,21 +444,15 @@ img.delete_icon {
.filter_text_box {
width: 250px;
padding: 5 10 5 10;
background-color: #888;
border: #222 solid 3px;
border-radius: 15px;
font-size: 12pt;
color: white;
font-weight: bold;
}
.text_box_transient {
color: #C8C8C8;
}
.prompt_demo, .current_prompt {
background-color: #000;
font-size: 12pt;
padding: 10px;
padding: 25px;
margin: 5px 5px 25px 5px; /* top right bottom left */
cursor: pointer;
line-height: 1.8em;
@ -478,6 +465,7 @@ img.delete_icon {
}
.prompt_demo {
color: #AAA;
white-space: pre;
}
@ -494,7 +482,7 @@ img.delete_icon {
font-size: 13pt;
display: inline-block;
margin-top: 12px;
background-color: rgba(128,128,128,0.2);
background-color: rgba(128,128,128,0.4);
color: #FFF;
cursor: pointer;
}
@ -575,12 +563,7 @@ img.delete_icon {
}
.paginator .disabled a {
color: #999999;
color: #BBB;
background-color: transparent;
cursor: default;
}
.paginator .desc {
background: #222;
color: #BBB;
}

View file

@ -18,7 +18,7 @@
<body>
<div id="ancestor">
<span style="font-size: 16pt; color: #CCC">fish</span><p id="global_error" class="error_msg" error-message></p>
<!-- TODO: Add logo -->
<div id="parent">
<div id="tab_parent" ng-controller="main">
<div ng-class="{'tab': true, 'selected_tab': currentTab =='colors'}" id="tab_colors" ng-click="changeView('colors')">colors</div>

View file

@ -117,7 +117,7 @@ function border_color_for_color(color_str) {
/* Use this function to make a color that contrasts well with the given color */
function text_color_for_color(color_str) {
var adjust = .5
var adjust = .7
function compute_constrast(lightness){
var new_lightness = lightness + adjust
if (new_lightness > 1.0 || new_lightness < 0.0) {

View file

@ -86,7 +86,7 @@ controllers.controller("colorsController", function($scope, $http) {
$scope.getCurrentTheme = function() {
$http.get("colors/").then(function(arg) {
var currentScheme = { "name": "Current", "colors":[], "preferred_background": "" };
var currentScheme = { "name": "Current", "colors":[], "preferred_background": "black" };
var data = arg.data
for (var i in data) {
currentScheme[data[i].name] = data[i].color;

View file

@ -3,9 +3,9 @@
fish cannot change the background color of your terminal and it will not be saved. Refer to your terminal documentation to set its background color.">
<!-- ko with: color_picker -->
<div class="colorpicker_text_sample" ng-style="{'background-color': terminalBackgroundColor}">
<span style="position: absolute; left: 10px; top: 3px;" data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'white')}">{{ selectedColorScheme.name }}</span><br>
<span style="position: absolute; left: 10px; top: 3px;" data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'black')}">{{ selectedColorScheme.name }}</span><br>
<div class="color_picker_background_cells">
<span style="display: block; text-align: right; line-height: 110%" data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'white')}">Background Color:<br />(demo only)&nbsp;</span>
<span style="display: block; text-align: right; line-height: 110%" data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'black')}">Background Color:<br />(demo only)&nbsp;</span>
<div ng-style="{'background-color': color}" ng-repeat="color in sampleTerminalBackgroundColors" ng-click="changeTerminalBackgroundColor(color)" title="Preview with this background color.
fish cannot change the background color of your terminal. Refer to your terminal settings to set its background color."></div>
@ -94,11 +94,11 @@ fish cannot change the background color of your terminal. Refer to your terminal
<span class="customize_theme_button"
ng-class="{button_highlight: customizationActive}"
data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'white')}"
data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'black')}"
ng-click="toggleCustomizationActive();">Customize</span>
<span class="save_button"
data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'white')}"
data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'black')}"
ng-show="showSaveButton"
ng-click="setTheme()">{{saveThemeButtonTitle}}</span>
</div>

View file

@ -2,7 +2,7 @@
<div class="master">
<div ng-repeat="func in functions">
<div id="master_{{func}}" ng-class="{'master_element': true, 'selected_master_elem': func == selectedFunction }" ng-style="'color: #aaaaaa'" ng-click="selectFunction(func)">
<span class="master_element_text" style="font-size: 11pt;">{{ func }}</span>
<span class="master_element_text" style="font-size: 11pt; color: #222;">{{ func }}</span>
</div>
</div>
</div>

View file

@ -1,6 +1,6 @@
<!-- The first 'sample' prompt is the current one; the remainders are samples. This ought to be cleaned up. -->
<div class="current_prompt" style="min-height: 7.5em">
<div class="prompt_demo_choice_label">{{ selectedPrompt.name }}</div>
<div class="current_prompt" ng-style="min-height: 7.5em; {'background-color': terminalBackgroundColor}">
<div class="prompt_demo_choice_label" style="color: #FFF;">{{ selectedPrompt.name }}</div>
<div ng-bind-html='selectedPrompt.demo | to_trusted' class="prompt_demo unbordered"></div>
<div style="position: absolute; right: 5px; bottom: 5px; color:">
<span class="save_button"