BetterLivebox - Interface de la Livebox 4, 5 & 6 by ecnivtwelve

Screenshot of BetterLivebox - Interface de la Livebox 4, 5 & 6
Details

Authorecnivtwelve
LicenseMIT
Category192.168.1.1
Created1 year, 8 months ago
Updated1 year, 8 months ago
Code size21 kB
Code checksumfa32816f
Statistics

Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description

Redesign complet de l'interface de la Livebox 4 et + entièrement personnalisable.
Notes

Installation

Téléchargez Stylus
Installez le thème ici : https://userstyles.world/style/11470/betterlivebox-interface-de-la-livebox-4-5-6
(Optionnel) Modifiez les variables dans :root si vous le souhaitez
(Recommandé) Allez dans l'onglet favoris et activez tous les onglets
Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         BetterLivebox - Interface de la Livebox 4, 5 & 6
@version      20230810.18.33
@namespace    userstyles.world/user/ecnivtwelve
@description  Redesign complet de l'interface de la Livebox 4 et + entièrement personnalisable.
@author       ecnivtwelve
@license      MIT
==/UserStyle== */

/* ==UserStyle==
@name         BetterLivebox
@namespace    192.168.1.1
@version      1.0.1
@description  Redesign complet de l'interface de la Livebox 4 et + entièrement personnalisable.
@author       ecnivtwelve
@homepageURL  https://github.com/ecnivtwelve/BetterLivebox
@license      MIT
@preprocessor default
@var color      main-color             "Couleur par défaut"                            #f16e00
@var text       font-family            "Police d'écriture"                             Roboto
@var text       wallpaper-lockscreen   "Fond d'écran de verouillage (inclure url())"   url('https://images.unsplash.com/photo-1548504773-429e84f586d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80')
@var text       wallpaper-desktop      "Fond d'écran de verouillage (inclure url())"   url('https://images.unsplash.com/photo-1517178111751-b10ed2bd1328?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80')
==UserStyle== */

@-moz-document domain("192.168.1.1") {
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

:root {
    /* Couleur principale */
    --main-color: #f16e00;
    /* Police principale */
    --font-family: 'Roboto';
    /* Fond d'écran du login */
    --wallpaper-lockscreen: url('https://images.unsplash.com/photo-1548504773-429e84f586d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80');
    /* Fond d'écran de l'accueil */
    --wallpaper-desktop: url('https://images.unsplash.com/photo-1517178111751-b10ed2bd1328?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80');
}

.animated {
    animation-duration: 0s !important;
}

.sah_dialog {
    border: none;
    border-radius: 5px;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    
    padding: 20px;
    min-width: 400px;
}

.sah_dialog_title {
    padding-left: 0;
    
    font-size: 20px;
    line-height: 20px;
    font-family: var(--font-family);
    font-weight: 500;
    
    visibility: hidden;
	position: relative;
    
    height: fit-content;
    
    margin-bottom: 70px;
}

.sah_dialog_title::before {
	visibility: visible;
	position: absolute;
	top: 0;
	left: 0;
	content: "Se connecter à ma Livebox";
}

.sah_dialog_title::after {
	visibility: visible;
	position: absolute;
	top: 28px;
	left: 0;
	content: "Utilisez vos identifiants Livebox pour vous connecter à l'interface d'administration.";
    
    font-size: 15px;
    font-weight: 400;
    color: #00000088;
}

.sah_dialog_body_login, .sah_dialog_body_password {
    display: flex;
    align-items: center;
    background: #f0f0f0;
    border-bottom: 2px solid #88888855;
    padding: 12px 12px;
    height: auto;
    width: calc(100% - 12px * 2);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    position: relative;
    transition: border-bottom 0.2s;
}

.sah_dialog_body_login:focus-within, .sah_dialog_body_password:focus-within {
    border-bottom: 2px solid var(--main-color);
}

.sah_dialog_body_login_image, .sah_dialog_body_password_image {
    display: none;
}

.sah_dialog_body_login input, .sah_dialog_body_password input {
    padding: 0;
    height: fit-content;
    border: none;
    background: none;
    font-family: var(--font-family);
    font-size: 16px;
    width: 100%;
    margin-top: 2.5px;
}

.sah_dialog_body_login input:focus, .sah_dialog_body_password input:focus {
    outline: none;
}

.sah_dialog_body_login:before, .sah_dialog_body_password:before {
    content: "face";
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    display: inline-block;
    line-height: 1;
    margin-right: 10px;
    color: #00000079;
}

.sah_dialog_body_password:before {
    content: "lock";
}

.sah_dialog_body .font165 {
    display: none;
}

.sah_dialog_login_legal {
    position: absolute;
    bottom: 0;
    left: 0;
    
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sah_dialog_login_legal span {
    text-align: left;
    color: #888;
    font-family: var(--font-family);
}

.sah_dialog_login_legal span:first-child:after {
    content: '-ui-v2';
}

.sah_dialog_login_legal a {
    text-align: left;
    visibility: hidden;
    position: relative;
}

.sah_dialog_login_legal a::before {
	visibility: visible;
	position: absolute;
	top: -10px;
	left: 0;
	content: "Accès anticipé";
    padding: 0px 10px;
    background-color: #00000010;
    font-size: 14px;
    border-radius: 300px;
    font-family: var(--font-family);
    color: var(--main-color);
}

.sah_dialog_body .buttonGroup button {
    outline: none;
    background-color: var(--main-color);
    color: #fff;
    font-family: var(--font-family);
    
    padding: 10px 18px;
    
    min-width: fit-content;
    height: fit-content;
    
    border-radius: 5px;
    
    font-size: 14px !important;
    font-weight: 400;
    
    letter-spacing: 0.1em;
    text-transform: uppercase;
    
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    
    transition: background-color 0.2s;
}

.sah_dialog_body .buttonGroup button:active {
    background-color: #ff8e30;
}

.sah_dialog_body .buttonGroup button[type=button]:disabled {
    color: #959595;
    background-color: #f0f0f0;
    box-shadow: none;
}

.mhsclock_time, .mhsclock_date {
    display: none;
}

.overlay {
    background-image: var(--wallpaper-lockscreen);
    background-size: cover;
    background-position:center;
}

/* accueil */

.sah_ui_page {
    background-color: transparent;
}

.tile .widget-content * {
    font-family: var(--font-family);
    font-size: 15px;
}

.sah_navarrow, .sah_ui_title h2, #sah_footer {
    display: none;
}

.sah_main {
    height: 100vh;
    background-image: var(--wallpaper-desktop);
    background-size: cover;
    background-position: center;
}

.swiper-slide:not(.swiper-slide-active) {
    display: none;
}

.sah_ui_slides {
    all: unset;
}

.swiper-slide-active {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100vw - 20px * 2) !important;
    height: 100vh !important;
    padding: 0px 20px;
}

@media only screen and (max-width: 1300px){
    .swiper-slide-active {
        width: calc(100vw - 0px * 2) !important;
        padding: 0px 0px;
    }
}

.sah_ui_widget_grid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 160px);
    place-items: center;
    justify-content: center;
    gap: 70px;
    
    max-width: 1400px;
}

@media only screen and (max-width: 1500px){
    .sah_ui_widget_grid {
        gap: 50px;
        row-gap: 70px;
    }
}

@media only screen and (max-width: 1400px){
    .sah_ui_widget_grid {
        gap: 40px;
        row-gap: 70px;
    }
}

@media only screen and (max-width: 1300px){
    .sah_ui_widget_grid {
        row-gap: 50px;
    }
}

@media only screen and (max-width: 1200px){
    .sah_ui_widget_grid {
        row-gap: 30px;
    }
}

.tile {
    position: static !important;
    display: inner-block !important;
    margin: 0 !important;
}

.tile {
    min-width: 140px;
    width: fit-content !important;
    height: fit-content !important;
    background: none !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 5px 5px !important;
    margin: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    
    border-radius: 7px;
    
    --image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Gnome-colors-document-open2.svg/48px-Gnome-colors-document-open2.svg.png');
    --text: 'Application'
}

.tile:before {
    content: "";
    display: block;
    background-image: var(--image);
    background-size: contain;
    background-position: center;
    width: 52px !important;
    height: 52px !important;
    filter: drop-shadow(0px 2px 2px #000000e5);
}

.tile:after {
    content: var(--text);
    color: #fff;
    background: none;
    font-size: 16px;
    font-family: var(--font-family);
    margin-bottom: 7px;
    filter: drop-shadow(0px 1px 2px #000000e5);
}

.tile:hover {
    background: #ffffff30 !important;
    border: 1px solid #ffffff30 !important;
}

.widget-title-box, .widget-notification {
    display: none;
}

.sah_header {
    position: absolute;
    top: 0;
    left: 0;
    background: #00000090;
    border-bottom: 1px solid #ffffff20;
    
    padding: 12px 24px;
}

.sah_header_bg {
    background: none;
    width: fit-content;
    height: fit-content;
    margin-top: 3px;
}

.sah_header_bg:before {
    content: "Ma Livebox";
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font-family);
}

.sah_header_bg:after {
    content: "BetterLivebox beta v.1.00";
    color: #ffffff99;
    font-size: 12px;
    font-weight: 400;
    font-family: var(--font-family);
    margin-left: 8px;
}

/* chaque tuile */
.tile.favorites {
    --image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Breezeicons-apps-32-preferences-desktop-default-applications.svg/120px-Breezeicons-apps-32-preferences-desktop-default-applications.svg.png');
    --text: 'Favoris';
}

.tile.devicesList {
    --image:...
Reviews

No reviews yet.