Learning with Texts (LWT) Night Mode

All about language programs, courses, websites and other learning resources
Ingaræð
Orange Belt
Posts: 170
Joined: Sat Nov 26, 2016 9:34 pm
Languages: English (N), German (heritage)
Learning: Russian, French, German, Mandarin, Arabic, Spanish.
Mostly forgotten: Italian, Welsh.
x 377

Learning with Texts (LWT) Night Mode

Postby Ingaræð » Thu Oct 08, 2020 5:26 pm

[Cross-posting this in its own topic, as it'll probably just end up getting lost in the other thread.]

I've just realised I have a copy of something for LWT which otherwise seems to have been lost...

On the now-defunct LWT forum, some awesome person created a 'Night Mode' by modifying the styles.css file:

LWT Night Mode.png


The bottom-right frame is also black until you do a dictionary look-up, as external sites can't be altered with the modification (though you might be able to do it via your browser settings). I only ever use Night Mode in LWT now, as I find it much easier on the eyes and screen flicker seems less 'affecting'.

As the creator of this Stylesheet publicly and freely posted it on the LWT forums, I'm going to assume that s/he would be cool with me resurrecting it for others to use. I haven't made any modifications to it myself.

Rough Installation Instructions
(These are for Linux. They may also work for Windows/Mac, I don't know.)

1) Copy the text in the code box below and save it in a text file as 'night mode.css'.

Code: Select all

/**************************************************************
"Learning with Texts" (LWT) is free and unencumbered software
released into the PUBLIC DOMAIN.

Anyone is free to copy, modify, publish, use, compile, sell, or
distribute this software, either in source code form or as a
compiled binary, for any purpose, commercial or non-commercial,
and by any means.

In jurisdictions that recognize copyright laws, the author or
authors of this software dedicate any and all copyright
interest in the software to the public domain. We make this
dedication for the benefit of the public at large and to the
detriment of our heirs and successors. We intend this
dedication to be an overt act of relinquishment in perpetuity
of all present and future rights to this software under
copyright law.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE
AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS BE LIABLE
FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

For more information, please refer to [http://unlicense.org/].
***************************************************************/

/**************************************************************
Stylesheet Night mode v.2012-12-24 (modified from LWT original one)
***************************************************************/

body {
    /*background-color: #FFFFFF;*/
    background-color: #000000;
    /*color: #000000;*/
    color: #FFFFFF;
    font: 100%/1.25 "Lucida Grande",Arial,sans-serif,STHeiti,"Arial Unicode MS",MingLiu;
    margin: 20px;
    padding: 0px;
}
input[type=text] {
    font: 85% "Lucida Grande",Arial,sans-serif,STHeiti,"Arial Unicode MS",MingLiu;
    border: 1px solid #C6C6C6;
    padding: 3px;
}
p {
    margin: 5px 0 5px 0;
    padding: 0;
}
h3 {
    margin: 0px 0 0px 0;
    padding: 0;
}
h4 {
    margin: 5px 0 10px 0;
    padding: 0;
}
span.status0 {
    background-color: #ADDFFF;
    color: #000000;
}
span.status1 {
    background-color: #F5B8A9;
    color: #000000;
}
span.status2 {
    background-color: #F5CCA9;
    color: #000000;
}
span.status3 {
    background-color: #F5E1A9;
    color: #000000;
}
span.status4 {
    background-color: #F5F3A9;
    color: #000000;
}
span.status5 {
    background-color: #DDFFDD;
    color: #000000;
}
span.status99 {
    /*background-color: #F8F8F8;
    border-bottom: solid 2px #CCFFCC;
    color: #000000;*/
    color: #FFFFFF;
}
span.status98 {
    /*background-color: #F8F8F8;*/
    border-bottom: dashed 1px #FFFFFF;
    /*color: #000000;*/
    color: #FFFFFF;
}
span.mwsty {
    margin-right: 2px;
    font-size: 60%;
    font-weight: bold;
    color: #000000;
    vertical-align: top;
}
span.wsty {
    margin-right: 2px;
    /*color: #000000;*/
    /*color: #FFFFFF;*/
}
span.todosty {
    background-color: #F5E1A9;
}
span.doneoksty {
    background-color: #A9F5A9;
}
span.donewrongsty {
    background-color: #F5B8A9;
}
span.status5stat {
    background-color: #BBFFBB;
    /*color: #000000;*/
    color: #000000;
}
textarea {
    font: 85% "Lucida Grande",Arial,sans-serif,STHeiti,"Arial Unicode MS",MingLiu;
    border: 1px solid #C6C6C6;
    padding: 3px;
}
table.tab1 {
    /*background-color: #f8f8f8;*/
    background-color: #080808;
    margin-bottom: 10px;
    margin-top: 10px;
    /*border-top: 1px solid #808080;*/
    /*border-left: 1px solid #808080;*/
    border-top: 1px solid #8f8f8f;
    border-left: 1px solid #8f8f8f;
    width: 850px;
}
table.tab2 {
    /*background-color: #f8f8f8;*/
    background-color: #080808;
    margin-bottom: 10px;
    margin-top: 10px;
    /*border-top: 1px solid #808080;
    border-left: 1px solid #808080;*/
    border-top: 1px solid #8f8f8f;
    border-left: 1px solid #8f8f8f;
    width: 100%;
}
table.tab3 {
    /*background-color: #f8f8f8;*/
    background-color: #080808;
    margin-bottom: 10px;
    margin-top: 10px;
    /*border-top: 1px solid #808080;
    border-left: 1px solid #808080;*/
    border-top: 1px solid #8f8f8f;
    border-left: 1px solid #8f8f8f;
    width: auto;
}
td.td1 {
    /*border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;*/
    border-bottom: 1px solid #8f8f8f;
    border-right: 1px solid #8f8f8f;
    vertical-align: top;
}
td.td1bot {
    /*border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;*/
    border-bottom: 1px solid #8f8f8f;
    border-right: 1px solid #8f8f8f;
    vertical-align: bottom;
}
th.th1 {
    /*border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;*/
    border-bottom: 1px solid #8f8f8f;
    border-right: 1px solid #8f8f8f;
    /*background-color: #DDDDDD;*/
    background-color: #222222;
    vertical-align: top;
}
th.clickable {
    cursor: pointer;
}
.click {
    cursor: pointer;
    color: #C00000;
}
.clickedit {
    cursor: pointer;
}
.hide {
    display: none;
}
a {
    text-decoration: none;
}
a:link {
    /*color: #C00000;*/
    color: #E00000;
}
a:visited {
    /*color: #C00000;*/
    color: #E00000;
}
a:active {
    /*color: #C00000;*/
    color: #E00000;
}
a:focus {
    /*color: #C00000;*/
    color: #E00000;
}
a:hover {
    /*color: #C00000;*/
    color: #E00000;
}
img {
    border: 0pt none;
}
.red {
    color: #FF0000;
    font-weight: bold;
    background-color: #FFFFD0;
    text-align: center;
    font-size: 120%;
}
.msgblue {
    color: #0000FF;
    font-weight: bold;
    background-color: #FFFFE0;
    text-align: center;
    font-size: 120%;
}
.red2 {
    color: #FF0000;
    font-weight: bold;
}
.scorered {
    font-weight: bold;
    color: #FF0000;
}
.scoregreen {
    color: #006400;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}
.center {
    text-align: center;
}
.bigger {
    font-size: 130%;
}
.smaller {
    font-size: 80%;
}
.backgray {
    /*background-color: #DDDDDD;*/
    background-color: #222222;
}
.backlightyellow {
    background-color: #FFFACD;
}
.smallgray {
    color: gray;
    font-size:60%;
}
.smallgray2 {
    color: gray;
    font-size:80%;
}
.smallgray3 {
    color: gray;
    font-size:70%;
    width: 850px;
    margin-bottom: 20px;
}
#learnstatus {
    /*color: #000000;*/
    color: #FFFFFF;
    font-size: 120%;
    font-weight: bold;
}
#iknowall {
    background-color: #ADDFFF;
    cursor: pointer;
    color: #C00000;
    padding: 5px;
    /*border: 1px solid #000000;*/
    border: 1px solid #FFFFFF;
    text-align: center;
}
img.lwtlogo {
    margin-right: 15px;
    float: left;
}
img.lwtlogoright {
    margin-left: 30px;
    float: right;
}
.inline {
    display: inline;
}
.grayborder {
    /*border: 1pt solid #808080;*/
    border: 1pt solid #8f8f8f;
}
.graydotted {
    margin-top: 30px;
    padding-top: 5px;
    /*border-top: 1px dotted #808080;*/
    border-top: 1px dotted #8f8f8f;
}
#printoptions {
    margin-bottom: 15px;
    padding-bottom: 15px;
    /*border-bottom: 1px dotted #808080;*/
    border-bottom: 1px dotted #8f8f8f;
    line-height: 1.8;
    margin-top: 20px;
}
.width50px {
    width: 50px;
}
.width99pc {
    width: 99%;
}
.width45pc {
    width: 45%;
}
dd {
    margin-top: 10pt;
}
dt {
    margin-top: 10pt;
}
.annterm {
    font-weight: bold;
    /*border-bottom: 2px solid #CCCCCC;*/
    border-bottom: 2px solid #222222;
}
.anntermruby {
    font-weight: normal;
    /*border-bottom: 2px solid #FFFFFF;*/
    border-bottom: 2px solid #000000;
}
.annrom {
    color: #999999;
    font-size: 60%;
    font-style: italic;
}
.annromruby {
    /*color: #000000;*/
    color: #FFFFFF;
    font-size: 100%;
    font-style: italic;
}
.annromrubysolo {
    /*color: #000000;*/
    color: #FFFFFF;
    font-size: 100%;
    font-style: normal;
}
.anntrans {
    color: #0099CC;
    font-size: 60%;
    font-style: normal;
}
.anntransruby {
    color: #0099CC;
    font-size: 100%;
    font-style: normal;
}
.anntransruby2 {
    color: #006699;
    font-size: 125%;
    font-style: normal;
}
#footer {
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 45px;
    line-height:30px;
    /*background: #DDDDDD;*/
    background: #222222;
    font-size: 14px;
    text-align: center;
    /*border-top: 1px solid #000000;*/
    border-top: 1px solid #FFFFFF;
}
.borderl {
    /*border-left: 1px solid #000000;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;*/
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
.borderr {
    /*border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;*/
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
}
.uwordmarked {
    font-weight: bold;
    border-top: 3px solid red;
    border-bottom: 3px solid red;
    border-right: 3px solid red;
    border-left: 3px solid red;
}
.kwordmarked {
    font-weight: bold;
    /*border-top: 3px solid black;
    border-bottom: 3px solid black;
    border-left: 3px solid black;
    border-right: 3px solid black;*/
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    border-left: 3px solid white;
    border-right: 3px solid white;
}
#termtags {
    width: 340px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 2px;
}
#texttags {
    width: 340px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 2px;
}
.editable_textarea {
    display: inline;
}
.nowrap {
    white-space: nowrap;
    margin-left: 20pt;
}
.borderleft {
    /*border-left: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;*/
    border-left: 1px solid white;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    /*background-color: #EEEEEE;*/
    background-color: #111111;
}
.bordermiddle {
    /*border-top: 1px solid black;
    border-bottom: 1px solid black;*/
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    /*background-color: #EEEEEE;*/
    background-color: #111111;
}
.borderright {
    /*border-right: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;*/
    border-right: 1px solid white;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    /*background-color: #EEEEEE;*/
    background-color: #111111;
}
.wizard {
    margin: 20px 0 5px 0;
}

/**************************************************************
Additional styles for printing
***************************************************************/

@media print
{
    .noprint {
        display: none;
    }
    #print {
        font-size: 75%;
    }
}


2) Copy this file to /var/www/html/lwt/css (leave the original in your home folder!) - this will require root permissions. (As per the installation instructions, on Windows 10 the folder location should be either C:\Program Files (x86)\EasyPHP-Devserver-17\eds-www\lwt\css or C:\xampp\htdocs\lwt\css, and on macOS 10.10+ it should be /Applications/MAMP/htdocs/lwt/css.)

3) In the same folder, rename the 'styles.css' file 'original styles.css', and rename the 'night mode.css' file 'styles.css'. (Note: you can name the .css files whatever you want, but the file that LWT actively uses can only be named 'styles.css'.)

4) Start LWT in your web browser - Night Mode colours should now appear! If you already had LWT open, refresh the page or navigate to a new page via the menu. If Night Mode still does not appear, try clearing the web cache.

5) If you want to switch between the original colours and 'Night Mode', you will have to do this manually by renaming the files and refreshing/restarting LWT.

Note: You will probably have to re-install Night Mode each time you reinstall or upgrade LWT. I recommend always keeping a copy of Night Mode.css in your home folder or somewhere else safe. If you lose the original 'styles.css' file, you can just copy the one in the LWT installation archive into the css folder.
You do not have the required permissions to view the files attached to this post.
5 x

Return to “Language Programs and Resources”

Who is online

Users browsing this forum: No registered users and 2 guests