[SOLVED] Vimperator 2.0 CSS file to colorize the status bar

Procyon · 2009-04-04 21:54:01

With Vimperator's new stable release of 2.0, the old CSS file that controls the status line doesn't work anymore.

I had a lot of trouble fixing it. I looked up the names of a lot of items and converted the old scheme. That wasn't enough, so I copied the default css into my css file (at the top) and changed everything in there too.

Now I have a css file that is huge and has lots of duplicate data. It also has a white line between status bar and command line that I can't get rid of, and when you enter a : command the : is black on white, instead of red on gray like the rest of the line (there must be more items, I think I used an old CSS scheme (there wasn't one in the trunk)).

Anyway, I wonder if this can be made simpler and it'd be awesome if the missing stuff above can be added too. And hopefully someone can benefit of the below CSS anyway.

What it does: make the background light gray, give the status (top) line a dark gray top border, give status bar regular weight black text, and the command bar bold red text.

#liberator-completions {
    -moz-user-focus: ignore;
    overflow: -moz-scrollbars-none !important; /* does not seem to work fully */
    border-width: 0px !important;
    /*-moz-appearance: none !important; /* prevent an ugly 3D border */
    margin: 0px !important;
    padding: 0px !important;
}

/* the selected item in listboxes is hardly readable without this */
#liberator-completion    > listitem[selected="true"] > listcell,
#liberator-bufferwindow  > listitem[selected="true"] > listcell,
#liberator-previewwindow > listitem[selected="true"] > listcell {
   color: black !important;
   background-color: rgb(230,230,230) !important;
    margin: 0px !important;
    padding: 0px !important;
}

/* fixes the min-height: 22px from firefox */
#status-bar, statusbarpanel {
    -moz-appearance: none !important;
    min-height: 18px !important;
    border: none !important;
    font-weight: bold;
    font-family: monospace;
    margin: 0px !important;
    padding: 0px !important;
    background-color: rgb(230,230,230) !important;
    color: black !important;
}
#status-bar
{
  border-top: thin solid rgb(100,100,100) !important;
}
#liberator-statusline {
    font-family: monospace;
    margin: 0px !important;
    padding: 0px !important;
    background-color: rgb(230,230,230) !important;
}
#liberator-statusline > label {
    margin: 0px 5px 0px 5px !important;
    padding: 0px !important;
    background-color: rgb(230,230,230) !important;
}
#liberator-statusline > label:first-child {
    margin: 0px 5px 0px 5px !important;
    padding: 0px !important;
    background-color: rgb(230,230,230) !important;
}
#liberator-statusline-field-url {
    color: black;
    background-color: rgb(230,230,230) !important;
    margin: 0px !important;
    padding: 0px !important;
}

/* no longer at the window's bottom right corner */
.statusbar-resizerpanel {
    display: none;
    margin: 0px !important;
    padding: 0px !important;
    background-color: rgb(230,230,230) !important;
}
#statusbar-display, #statusbar-progresspanel {
    display: none;
    margin: 0px !important;
    padding: 0px !important;
    background-color: rgb(230,230,230) !important;
}

#liberator-commandline {
    margin: 0px !important;
    padding: 0px !important;
    font-family: monospace;
    background-color: rgb(230,230,230) !important;
    color: red !important;
}
#liberator-commandline-prompt {
    margin: 0px !important;
    padding: 0px !important;
    background-color: rgb(230,230,230) !important;
    color: red !important;
}
#liberator-commandline-command {
    background-color: rgb(230,230,230) !important;
    color: red !important;
    margin: 0px !important;
    padding: 0px !important;
}

#liberator-visualbell {
    border: none;
    margin: 0px !important;
    padding: 0px !important;
   background-color: rgb(230,230,230) !important;
   color: red !important;
}

#sidebar {
    max-width: 90% !important;
    min-width: 10% !important;
    margin: 0px !important;
    padding: 0px !important;
   background-color: rgb(230,230,230) !important;
}

/* highlight groups */

.hl-Normal {
    background-color: rgb(230,230,230) !important;
    color: black;
    margin: 0px !important;
    padding: 0px !important;
}
.hl-ErrorMsg {
    background-color: red;
    color: black;
    font-weight: bold;
    margin: 0px !important;
    padding: 0px !important;
}
.hl-InfoMsg {
    background-color: rgb(230,230,230) !important;
    color: magenta;
    margin: 0px !important;
    padding: 0px !important;
}
.hl-ModeMsg {
    background-color: rgb(230,230,230) !important;
    color: black;
    margin: 0px !important;
    padding: 0px !important;
}
.hl-MoreMsg {
    background-color: rgb(230,230,230) !important;
    color: green;
    margin: 0px !important;
    padding: 0px !important;
}
.hl-Question {
    background-color: rgb(230,230,230) !important;
    color: green;
    margin: 0px !important;
    padding: 0px !important;
}
.hl-Title {
    background-color: rgb(230,230,230) !important;
    color: magenta;
    margin: 0px !important;
    padding: 0px !important;
    font-weight: bold;
}
.hl-Warning {
    background-color: rgb(230,230,230) !important;
    color: red;
    margin: 0px !important;
    padding: 0px !important;
}
.hl-StatusLine {
    background: none !important;
    background-color: rgb(230,230,230) !important;
    color: white !important;
    margin: 0px !important;
    padding: 0px !important;
}
.hl-StatusLineSecure {
    background: none !important;
    background-color: #B0FF00 !important; /* light green */
    color: black !important;
    margin: 0px !important;
    padding: 0px !important;
}
.hl-StatusLineBroken {
    background: none !important;
    background-color: #FF6060 !important; /* light red */
    color: black !important;
    margin: 0px !important;
    padding: 0px !important;
}
.hl-URL {
    background-color: rgb(230,230,230) !important;
    color: green;
    text-decoration: none;
    margin: 0px !important;
    padding: 0px !important;
}
/* NOTE: .aClass:hover not supported in quirks mode: http://developer.mozilla.org/en/docs/Mozilla_Quirks_Mode_Behavior */
a.hl-URL:hover {
    text-decoration: underline;
    cursor: pointer;
    margin: 0px !important;
    padding: 0px !important;
}

#liberator-completions, #liberator-multiline-output {
    overflow: hidden;
    background-color: rgb(230,230,230) !important;
    color: black;
    margin: 0px !important;
    padding: 0px !important;
}

#liberator-completions-content, #liberator-multiline-output-content {
    white-space: pre;
    font-family: -moz-fixed;
    margin: 0px !important;
    padding: 0px !important;
    background-color: rgb(230,230,230) !important;
}

#liberator-completions-content *, #liberator-multiline-output-content * {
    font: inherit;
    margin: 0px !important;
    padding: 0px !important;
    background-color: rgb(230,230,230) !important;
}



/*#liberator-commandline-prompt,#liberator-commandline,#liberator-commandline-command,#liberator-message */
/*, #liberator-message,#liberator-container,#liberator-bufferwindow, #liberator-completion, #liberator-previewwindow */
/**/
#liberator-container
{
  background: none !important;
  background-color: rgb(230,230,230) !important;
  -moz-appearance: none !important;
    margin: 0px !important;
    padding: 0px !important;
}

#liberator-commandline, #liberator-commandline-prompt, #liberator-commandline-command, #liberator-message,
#liberator-commandline *, #liberator-commandline-prompt *, #liberator-commandline-command *, #liberator-message *
{
  background: None !important;
  background-color: rgb(230,230,230) !important;
  color: rgb(255,44,44) !important;
  padding: 0px !important;
  margin: 0px !important;
  font-weight: bold !important;
  border: none !important;
}

#liberator-statusline-field-inputbuffer,#liberator-statusline-field-progress,#liberator-statusline-field-tabcount,#liberator-statusline-field-bufferposition,#liberator-statusline,
#liberator-statusline-field-inputbuffer *,#liberator-statusline-field-progress *,#liberator-statusline-field-tabcount *,#liberator-statusline-field-bufferposition *,#liberator-statusline *
{
  background: none !important;
  background-color: rgb(230,230,230) !important;
  color: black !important;
  font-weight: normal !important;
    margin: 0px !important;
    padding: 0px !important;
}
#liberator-statusline
{
  background: none !important;
  background-color: rgb(230,230,230) !important;
  color: black !important;
  font-weight: normal !important;
    margin: 0px !important;
    padding: 0px !important;
}

.hl-StatusLine
{
  background-color: rgb(230,230,230) !important;
    margin: 0px !important;
    padding: 0px !important;
}

Last edited by Procyon (2009-04-04 22:45:25)

anrxc · 2009-04-04 22:02:17

Vimperator 2 uses colorschemes, here is the default which you can then modify http://github.com/VoQn/vimperator-color … fault.vimp Store it as ~/.vimperator/colors/theme-name.vimp and load with :colorscheme theme-name

NME · 2009-04-04 22:14:21

slightly offtopic: is this version of vimperator not as unbearably slow as the 1.2 version?
i really love browsing with vim-keys but everything just became so sluggish...

anrxc · 2009-04-04 22:21:40

For me it was much slower, completion would bring my system to a crawl, and 1.2 works just fine here.

Procyon · 2009-04-04 22:44:59

@anrxc: I see, thanks!

I didn't notice any speed difference between 2.0 and 1.2.

Here is the colorscheme I used to get the same effect as above, everything works now:

I changed some unrelated things and it gave some warning so I commented those out.

" ==Vimperator_Color_Scheme==
" name: my
" ==Defult_Colorscheme_Settings==
hi Bell                    border: 0 none; background-color: black;
hi Boolean                color: red;
hi CmdLine                font-family: monospace; padding: 0px;
hi CmdOutput                white-space: pre;
hi CompDesc                color: black; width: 50%;
"hi CompGroup    
"hi CompGroup:not(:first-of-type)    margin-top: 0px; "margin-top: .5em;
hi CompIcon                width: 16px; min-width: 16px; display: inline-block; margin-right: .5ex;
hi CompIcon>img                max-width: 16px; max-height: 16px; vertical-align: middle;
"hi CompItem                
"hi CompItem>*                padding: 0 0; ".5ex;
"hi CompItem[selected]            background: yellow;
hi CompLess                text-align: center; height: 0; line-height: .5ex; padding-top: 1ex;
hi CompLess::after            content: "3" /* Unicode up arrowhead */
hi CompMore                text-align: center; height: .5ex; line-height: .5ex; margin-bottom: -.5ex;
hi CompMore::after            content: "4" /* Unicode down arrowhead */
hi CompMsg                font-style: italic; margin-left: 16px;
hi CompResult                width: 45%; overfloaw: hidden;
hi CompTitle                color: magenta; background: white; font-weight: bold;
hi CompTitle>*                padding: 0 .5ex;
hi ErrorMsg                color: white; background: red; font-weight: bold;
hi Filter                font-weight: bold;
hi FrameIndicator            background-color: red; opacity: 0.5; z-index: 999; position: fixed; top: 0; bottom: 0; left: 0; right: 0;
hi Function                color: navy;
hi Gradient                height: 1px; margin-bottom: -1px; margin-top: -1px;
hi GradientLeft                background-color: magenta;
hi GradientRight            background-color: white;
hi Hint                    font-family: monospace; font-size: 10px; font-weight: bold; color: white; background-color: red; border-color: ButtonShadow; border-width: 0px; border-style: solid; padding 0px 1px 0px 1px;
hi Hint::after                content: attr(number);
hi HintActive                background: #88FF00; color: black;
hi HintElem                background-color: yellow; color: black;
hi HintImage                opacity: .5;
hi Indicator                color: blue;
hi InfoMsg                color: rgb(255,44,44); background: rgb(230,230,230); font-weight: bold;
hi LineNr                color: orange; background: rgb(230,230,230);
hi Message                white-space: normal; min-width: 100%; padding-left: 2em; text-indent: -2em; display: block;
hi ModeMsg                color: rgb(255,44,44); background: rgb(230,230,230); font-weight: bold;
hi MoreMsg                color: green; background: rgb(230,230,230);
hi NonText                color: blue; min-height: 16px; padding-left: 2px;
hi Normal                color: rgb(255,44,44); background: rgb(230,230,230); font-weight: bold;
hi Null                    color: blue;
hi Number                color: blue;
hi Object                color: maroon;
hi Preview                color: gray;
hi Question                color: green; background: rgb(230,230,230); font-weight: bold;
hi Search                font-size: inherit; padding: 0; color: blue; background-color: rgb(230,230,230); padding: 0;
hi StatusLine                color: black; background: rgb(230,230,230); border-top: thin solid rgb(100,100,100); border-width: 1px; font-weight: normal;
hi StatusLineBroken            color: black; background: #FF6060; /* light-red */
hi StatusLineSecure            color: black; background: #B0FF00; /* light-green */
hi String                color: green;
"hi TabClose                
"hi TabIcon                
"hi TabIconNumber            font-weight: normal; color: black; text-align: center; text-shadow: black -1px 0 1px, black 0 1px 1px, black 1px 0 1px, black 0 -1px 1px;
hi TabNumber                font-weight: bold; margin: 0; padding-right: .3ex;
"hi TabText                
hi Tag                    color: blue;
hi Title                color: magenta; background: white; font-weight: bold;
hi URL                    text-decoration: none; color: green; background: inherit;
hi URL:hover                text-decoration: underline; cursor: pointer;
hi WarningMsg                color: red; background: white;

Arch Linux

#1 2009-04-04 21:54:01

[SOLVED] Vimperator 2.0 CSS file to colorize the status bar

#2 2009-04-04 22:02:17

Re: [SOLVED] Vimperator 2.0 CSS file to colorize the status bar

#3 2009-04-04 22:14:21

Re: [SOLVED] Vimperator 2.0 CSS file to colorize the status bar

#4 2009-04-04 22:21:40

Re: [SOLVED] Vimperator 2.0 CSS file to colorize the status bar

#5 2009-04-04 22:44:59

Re: [SOLVED] Vimperator 2.0 CSS file to colorize the status bar

Board footer