Mirrors/fish-shell
2
0
Fork 0
mirror of https://github.com/fish-shell/fish-shell synced 2024-12-29 06:13:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

Webconfig: Let theme match help and fishshell.com

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

71
share/tools/web_config/fishconfig.css
View file

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

2
share/tools/web_config/index.html
View file

@ -18,7 +18,7 @@
<body> <body>
<div id="ancestor"> <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="parent">
<div id="tab_parent" ng-controller="main"> <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> <div ng-class="{'tab': true, 'selected_tab': currentTab =='colors'}" id="tab_colors" ng-click="changeView('colors')">colors</div>

2
share/tools/web_config/js/colorutils.js
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 */ /* Use this function to make a color that contrasts well with the given color */
function text_color_for_color(color_str) { function text_color_for_color(color_str) {
var adjust = .5 var adjust = .7
function compute_constrast(lightness){ function compute_constrast(lightness){
var new_lightness = lightness + adjust var new_lightness = lightness + adjust
if (new_lightness > 1.0 || new_lightness < 0.0) { if (new_lightness > 1.0 || new_lightness < 0.0) {

2
share/tools/web_config/js/controllers.js
View file

@ -86,7 +86,7 @@ controllers.controller("colorsController", function($scope, $http) {
$scope.getCurrentTheme = function() { $scope.getCurrentTheme = function() {
$http.get("colors/").then(function(arg) { $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 var data = arg.data
for (var i in data) { for (var i in data) {
currentScheme[data[i].name] = data[i].color; currentScheme[data[i].name] = data[i].color;

8
share/tools/web_config/partials/colors.html
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."> 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 --> <!-- ko with: color_picker -->
<div class="colorpicker_text_sample" ng-style="{'background-color': terminalBackgroundColor}"> <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"> <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. <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> 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" <span class="customize_theme_button"
ng-class="{button_highlight: customizationActive}" 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> ng-click="toggleCustomizationActive();">Customize</span>
<span class="save_button" <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-show="showSaveButton"
ng-click="setTheme()">{{saveThemeButtonTitle}}</span> ng-click="setTheme()">{{saveThemeButtonTitle}}</span>
</div> </div>

2
share/tools/web_config/partials/functions.html
View file

@ -2,7 +2,7 @@
<div class="master"> <div class="master">
<div ng-repeat="func in functions"> <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)"> <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> </div>
</div> </div>

4
share/tools/web_config/partials/prompt.html
View file

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