Jump to content

CSS Skin - Ctrl Freq Panel


FreqANDY

Recommended Posts

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;
}

 

logout.png

logo.png

SkinSample.jpg

Edited by FreqANDY
  • Upvote 1
Link to comment
Share on other sites

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 by b0N3z
Link to comment
Share on other sites

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 by b0N3z
Link to comment
Share on other sites

  • 4 weeks later...
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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...