Giter Club home page Giter Club logo

Comments (4)

nickbe avatar nickbe commented on June 11, 2024 2

Here's our last css theme: A wider viewport, dark transparencies, several smaller changes like button and pill appearance. We set shaark to 3 columns for this:

screenshot_93

<style>
    
    @media (min-width: 992px) {
        .container, .container-lg, .container-md, .container-sm {
            max-width: 99%;
        }
    }
    
    @media (min-width: 1200px) {
        .container, .container-lg, .container-md, .container-sm, .container-xl {
             max-width: 1520px; 
        }
    }  
    
    @media (min-width: 576px) and (max-width: 991px) {
        .container, .container-sm {
            max-width: 99%; 
        }
    }  
    
    footer { 
        padding: 4px 0px !important; 
        position: fixed; 
        bottom: 0; 
        font-size: 12px; 
        margin-right: 20px; 
        color: #ffffff85;
    }
    
    .navbar-light .navbar-nav .nav-link {
        color: rgba(255, 252, 252, 0.62);
    }
    
    .navbar-light .navbar-nav .show > .nav-link {
        color: rgba(255, 252, 252, 0.62); 
    }  
    
    .navbar-light .navbar-nav .nav-link:active {     
        color: rgba(255, 252, 252, 0.86) !important; 
    } 
    
    .navbar-light .navbar-nav .nav-link:hover {     
        color: rgba(255, 252, 252, 1); 
    }  
    
    footer > p >a {     
        visbility: hidden; 
    }  
    
    .badge-pill {     
        margin-left: 4px; 
    } 
    
    .nav-wall {   
        border-radius: 0.6em; 
    } 
    
    .card {     
        box-shadow: 0 10px 20px rgb(0 0 0 30%);     
        border-radius: .8rem; 
    } 
    
    .list-group-item:first-child {
        border-top-left-radius: .8rem;
        border-top-right-radius: .8rem; 
    } 
    
    .list-group-item:last-child {     
        border-bottom-right-radius: .8rem;     
        border-bottom-left-radius: .8rem; 
    } 
    
    #app > footer, #nav {     
        background-color: hsla(0, 0%, 0%, 0.65); 
        box-shadow: 0 10px 20px rgba(18, 18, 18, 0.37);     
        padding: 1.2rem 1rem; 
    }  
    
    #nav {    
        position: fixed;    
        width: 100%;    
        z-index: 999; 
    }  
    
    .pt-4, .py-4 {     
        padding-top: 6.4rem !important; 
    } 
    
    #nav .navbar-brand, #nav > .container {
        color: #ffffffe3 !important; 
    } 
    
    .btn-group-sm > .btn, .btn-sm {    
        padding: .20rem .7rem 0.3rem .7rem;     
        border-radius: 1rem;  
    } 
        
    .card-footer {     
        padding: .7rem 1.5rem; 
    } 
    
    .badge-secondary {     
        color: #fff;     
        background-color: #516f90;     
        border-color: #516f90;     
        padding: 4px 10px 6px 10px;     
        font-size: 14px !important; 
    } 
    
    .card .card-footer {      
        color: #a8b3bd; 
    }  
    
    .multiselect__tag {     
        padding: 4px 25px 6px 12px;     
        border-radius: 12px;     
        margin-right: 10px;     
        color: #fff;     
        line-height: 1.2;     
        background: #169f62;     
        margin-bottom: 5px;     
        font-weight: bold; 
    }  
    
    .multiselect__tag-icon {
        margin-left: 7px; 
        width: 26px; 
        line-height: 25px; 
    }  
    
    .multiselect__tag-icon::after {     
        color: #266d4d;     
        font-size: 16px; 
    } 
    
    .multiselect__tags .multiselect__tag {     
        margin-bottom: 2px; 
    } 
    
    </style>

from shaark.

MarceauKa avatar MarceauKa commented on June 11, 2024

Feel free to put your modifications here, I'll put your update in the wiki.

from shaark.

Ezyweb-uk avatar Ezyweb-uk commented on June 11, 2024

It would be brilliant if there was a theme for bookmarks like the Qlearly in multiple columns.

from shaark.

MarceauKa avatar MarceauKa commented on June 11, 2024

Hi @Ezyweb-uk! You already can create a wall with your own custom layout: 1 to 4 columns and the ability to switch to a compact mode

from shaark.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.