mirror of
https://github.com/fish-shell/fish-shell
synced 2024-12-27 21:33:09 +00:00
Webconfig: Let theme match help and fishshell.com
More consistency is nice.
This commit is contained in:
Fabian Homborg
parent
aaf5bfc25f
commit
6418e8ea68
7 changed files with 37 additions and 54 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) </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) </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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue