MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Dark UI

    Scheduled Pinned Locked Moved Showcase
    5 Posts 3 Posters 3.2k Views 5 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Piranha1605P Offline
      Piranha1605
      last edited by Piranha1605

      Dark Ui

      Unbenannt.png

      
      html {
        cursor: none;
        overflow: hidden;
        background: #2a313b;
      }
      
      
      body {
        margin: 10px;
        position: absolute;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        background: #2a313b;
        color: #aaa;
        font-weight: 400;
        font-size: 2em;
        line-height: 1.5em;
        margin-bottom: -10px;
        -webkit-font-smoothing: antialiased;
      }
      
      header {
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: bold;
        height: 25px;
        background: #1f242c;
        line-height: 30px;
        border-bottom: none;
        color: #fffff;
        box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7), 1px 1px 1px rgba(255, 255, 255, 0.1)
      }
      
      /**
       * module.width_height
       */
      
      .module.clock {
        width:300px;
        height: 150px;
      }
      
      .module.MMM-NetworkScanner {
        width:300px;
        height: 200px;
      }
      
      .module.weatherforecast {
        width:300px;
        height: 200px;
      }
      
      .module.currentweather {
        height: 150px;
        width:300px;
      }
      
      /**
       * module.color_border_shadow
       */
       
       .module.MMM-NetworkScanner,
       .module.clock,
       .module.MMM-CalendarExt2,
       .module.weatherforecast,
       .module.currentweather,
       .module.MMM-News {
        background-color:#2a313b;
        border-radius:8px;
        padding:8px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
      }
      
      /**
       * clock.
       */
      
      .clock .time {
       font-size: 80px;
       text-align: center;
       margin-top: 25px;
       padding:2px;
       
      }
      .clock .date {
        text-transform: uppercase;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        height: 25px;
        background: #1f242c;
        line-height: 30px;
        padding-bottom: 5px;
        margin-bottom: 10px;
        color: #fffff;
        box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7), 1px 1px 1px rgba(255, 255, 255, 0.1)
      }
      
      /**
       * MMM-News.
       */
      
      #NEWS.vertical {
        width:1200px;
      }
      #NEWS.vertical .content .articleImage {
        max-width:600px;
        max-height:500px;
        margin-left:auto;
        margin-right:auto;
        display:block;
        border-radius: 20px;
        padding:8px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
      }
      #NEWS.vertical #NEWS_CONTENT {
      	color: white;
        font-size: 35px;
        line-height: 40px;
        padding-bottom:40px;
      }
      
      /**
       * MMM-CalendarExt2.
       */
      
      .CX2 .slot .event{
      	background: #1f242c;
      }
      .CX2 .agenda .eventSub {
      	display:none;
      }
      .CX2 .slot .slotHeader{
        background: #1f242c;
        border: 1px solid black;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
      	color: grey;
      }
      .CX2 .today .slotHeader * {
      	color: white;
      }
       .CX2 .event.fullday {
        background: #1f242c;
        border-radius:0px;
      }
      
      .CX2 .event[data-calendar-name="Google"] {
      	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
        color: white;
      }
      .CX2 .event[data-calendar-name="Karate"] {
      	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
        color: white;
      }
      .CX2 .event[data-calendar-name="Abfall"] {
      	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
        color: white;
      }
      .CX2 .event[data-calendar-name="Arbeit"] {
      	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
        color: white;
      }
      .CX2 .event[data-calendar-name="Feiertage"] {
      	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
        color: white;
      }
      
      /**
       * Iconsize.
       */
      
      .CX2 .event .eventIcon {
        min-width: calc(var(--font-size) * 2,5);
        min-height: calc(var(--font-size) * 2,5);
        margin-right:5px;
        float:left;
      }
      .CX2 .period .eventIcon {
        min-width: calc(var(--font-size) * 2,5);
        min-height: calc(var(--font-size) * 2,5);
        margin-right:5px;
        float:left;
      }
      .CX2 .weekSlot .eventIcon {
        min-width: var(--font-size);
        min-height: var(--font-size);
        margin-right:3px;
        display:block;
        padding-bottom:3px;
      }
      
      /**
       * weather.
       */
       
      .currentweather .bright {
        position: absolute;
        left: 140px;
        margin-top: 25px;
      }
      .weathericon {
        position: absolute;
        left: 115px;
        z-index: 1;
        margin-top: -15px;
        height: 35px;
        -webkit-svg-shadow: 0 0 7px #53BE12;
      }
      .currentweather .weathericon {
        position: absolute;
        left: 40px;
        margin-top: 20px;
        font-size: 75px;
      }
      
      S 1 Reply Last reply Reply Quote 5
      • S Offline
        sdetweil @Piranha1605
        last edited by

        @Piranha1605 nice!

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        Piranha1605P 1 Reply Last reply Reply Quote 0
        • Piranha1605P Offline
          Piranha1605 @sdetweil
          last edited by

          @sdetweil THX

          1 Reply Last reply Reply Quote 0
          • R Offline
            robertybob
            last edited by

            @Piranha1605 I’m building a mirror for an old monitor which is going to be setup in a portrait layout, will this CSS work for me or would it need a ton of manipulation?

            Piranha1605P 1 Reply Last reply Reply Quote 0
            • Piranha1605P Offline
              Piranha1605 @robertybob
              last edited by

              @robertybob
              You will need to adjust the size of the modules.

              1 Reply Last reply Reply Quote 0
              • 1 / 1
              • First post
                Last post
              Enjoying MagicMirror? Please consider a donation!
              MagicMirror created by Michael Teeuw.
              Forum managed by Sam, technical setup by Karsten.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy