CSS Skin - Ctrl Freq Panel

[FreqANDY]

Its a work in progress. Backup your css for easy recovery if you don't like it. Download the included logo.png and logout.png to replace the current until we get the ability to change themes within the program, ehem. 

Edit: Replace all css in the CSS box under ADVANCED tab in the nano menu options.

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #f6ebb0;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: #f6ebb0;
    opacity: 1;
}
.text-muted {
    color: #383838;
    font-weight: 600;
}

.panel-footer {
    padding: 10px 15px;
    background-color: #ffd800;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
.alert-info {
    color: #ffffff;
    background-color: #ff4c4c;
    border-color: #fff;
}
.alert {
    padding: 15px;
    margin-bottom: 2px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.sidebar .active {
    background-color: #1d1d1d;
}
.btn {
    color: #383838;
    background-color: #ffd800;
    border-color: #ccc;
    border:0px;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #f6ebb0;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f6ebb0;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.panel-default>.panel-heading {
    color: #ffd800;
    background-color: #383838;
    border-color: #ddd;
}
.scrollable-pre {
    overflow: auto;
    word-wrap: normal;
    white-space: pre;
}
.navbar-default {
    background-color: #383838;
    border-color: #ffd800;
}
a {
    color: #ffd800;
    text-decoration: none;
}

.sidebar ul li {
    cursor: pointer;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    color: #ffffff;
}





.log-pre {
    max-height: 300px;
}

.btn-fixed-length {
    width: 70px;
}

.padding-left {
    margin-left: 10px;
}

.select-inline {
    font-weight: normal;
}

body {
    background-color: #eee;
}

.logout {
    cursor: pointer;
}

.module-nav li a {
    margin-left: 30px;
}

.module-nav li:hover {
    background-color: #ffd800;
}

.sidebar .sidebar-nav.navbar-collapse {
    padding-right: 0;
    padding-left: 0;
}

.sidebar ul li {
    cursor: pointer;
    border-bottom: 0px solid #ffd800;
}

.sidebar .active {
    background-color: #eee;
}

@media(min-width:768px) {
    .sidebar {
        z-index: 1;
        position: absolute;
        width: 250px;
        margin-top: 51px;
    }

    .module-content {
        position: inherit;
        margin: 0 0 0 250px;
        padding: 15px 30px;
        border-left: 1px solid #e7e7e7;
    }

    .navbar-top-links {
        margin-left: 10px;
    }
}

.navbar-top-links {
    margin-right: 5px;
    margin-left: 10px;
}

.navbar-top-links li {
    display: inline-block;
}

.navbar {
    margin-bottom: 0;
}

.navbar-top-links .dropdown-menu li {
    display: block;
}

.module-content {
    padding: 15px 15px;
    background-color: #eee;
}

.pointer {
    cursor: pointer;
}

.dropdown-menu {
    cursor: pointer;
}

.dropdown-menu-top {
    max-height: 300px !important;
    overflow-y: auto !important;
}

@media(max-width:768px) {
    .dropdown-menu-top {
        margin: auto !important;
        position: absolute !important;
        background-color: #fff !important;
        word-wrap: break-word !important;
        border: 1px solid #ccc !important;
        width: 300px !important;
        max-width: 300px !important;
    }
    .dropdown-menu-top li a {
        white-space: normal !important;
    }

    .dropdown-menu-logout {
        max-width: 50px !important;
    }
}

.login-logo {
    margin: 0 auto;
    padding-bottom: 10px;
    max-width: 150px;
}

.brand-logo {
    content: url('/img/logo.png');
    max-height: 30px;
    padding-bottom: 5px;
}

.brand-text::after {
    content: "ctrl freq panel";
    padding-top: 3px;
    padding-left: 5px;
    float: right;
    color:#ffd800;
}

 

Edited November 24, 2016 by FreqANDY

[b0N3z]

This is really cool and looks great.  I just replaced my css with it.

[FreqANDY]

I am testing skins with graphics laced into the css. I get broken images often... If you have a color scheme in mind, post the idea. I'm making several...

 

 

If something doesn't look right, let me know and I'll try to fix it.

[b0N3z]

I like that one pretty well.  Ive been going through the UI looking for anything that doesnt look right or might be iffy.  So far it looks great!!

 

EDIT:  Auto refresh buttons change colors when clicked on but after the color red or green goes away as soon as you click on something else.

Edited November 24, 2016 by b0N3z

[FreqANDY]

Can you post a screen shot or two ?  Also, which browser you use... I didn't set full link or button perimeters yet. I'll look at this tonight.

Edited November 24, 2016 by FreqANDY

[b0N3z]

I click on auto refresh and it turns green for on as soon as I click options it goes back to yellow. It does the same for start on boot option.  I am using Chrome.  Does the Same in Firefox

 

http://imgur.com/a/mqIDl

Edited November 25, 2016 by b0N3z

[FreqANDY]

Oh yeah, having the button defined as yellow is conflicting. I'll give it a look soon.

[Jsync]

On 25 November 2016 at 4:30 AM, FreqANDY said:

I am testing skins with graphics laced into the css. I get broken images often... If you have a color scheme in mind, post the idea. I'm making several...

 

 

If something doesn't look right, let me know and I'll try to fix it.

If you still want some css skin ideas I reckon a retro-futuristic skin would look amazing using bright-neon colours such as purples,pinks,light blues, white and gold.

[b0N3z]

You could also go old school and go with black and green lol.  Im a big fan of the grey and gold.  All my terminals are grey and gold.

[FreqANDY]

I shall make them and name them after you... (For having the idea)

[Jsync]

This may be a stupid question but how do I change the images  and save the old ones so I can change back if need be.

Edited January 8, 2017 by Jsync