From 3af9423871976cb54f5bb902279b9404d9b3fe54 Mon Sep 17 00:00:00 2001 From: mappu Date: Sun, 12 Nov 2017 10:57:55 +1300 Subject: [PATCH] css: simplify nesting by employing some LESS features --- client/dcwebui.less | 202 ++++++++++++++++++++++++-------------------- 1 file changed, 111 insertions(+), 91 deletions(-) diff --git a/client/dcwebui.less b/client/dcwebui.less index 3164314..de6eacd 100644 --- a/client/dcwebui.less +++ b/client/dcwebui.less @@ -51,14 +51,16 @@ html,body { } /* WiiU placements */ -.navigator-wiiu .placement-mid { - bottom:120px; -} -.navigator-wiiu .placement-bottom { - height:120px; -} -.navigator-wiiu .placement-panel { - bottom:120px; +.navigator-wiiu { + .placement-mid { + bottom:120px; + } + .placement-bottom { + height:120px; + } + .placement-panel { + bottom:120px; + } } /* Menu button */ @@ -75,14 +77,17 @@ html,body { height:18px; width:18px; text-align:center; + + svg { + width: 18px; + height: 18px; + } + + &:hover { + background:white; + } } -.menubutton svg { - width: 18px; - height: 18px; -} -.menubutton:hover { - background:white; -} + /* Menu list */ .menu { background:#DDD; @@ -97,20 +102,24 @@ html,body { z-index:10; /* above placement-panel */ overflow-y:auto; + + ul { + margin:0; + padding:0; + } + + li { + list-style-type:none; + padding:6px; + cursor:pointer; + + &:hover { + background:#333; + color:white; + } + } } -.menu ul { - margin:0; - padding:0; -} -.menu li { - list-style-type:none; - padding:6px; - cursor:pointer; -} -.menu li:hover { - background:#333; - color:white; -} + /* Tabs */ .tabbar { position:relative; @@ -132,16 +141,20 @@ html,body { border-right:1px solid lightgrey; margin-top:2px; padding:0 8px; + + &:hover { + border-top:2px solid #EEE; + } + + &.selected { + border-top:2px solid darkgreen; + } + + &.unread { + background:lightyellow; + } } -.tabitem:hover { - border-top:2px solid #EEE; -} -.tabitem.selected { - border-top:2px solid darkgreen; -} -.tabitem.unread { - background:lightyellow; -} + .tab-label { cursor:pointer; } @@ -170,12 +183,14 @@ html,body { -webkit-transition:0.1s linear all; -moz-transition:0.1s linear all; transition:0.1s linear all; + + &:hover { + background:#FFDDDD; + border:1px solid red; + color:black; + } } -.tab-closer:hover { - background:#FFDDDD; - border:1px solid red; - color:black; -} + /* */ .content { display:block; @@ -241,7 +256,10 @@ html,body { } #submit-container { position:absolute; - top:0;bottom:0;right:0;width:32px; + top:0; + bottom:0; + right:0; + width:32px; } #btsubmit { width:100%; @@ -265,42 +283,42 @@ html,body { -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -} -.ul-large li { - color: #333; - font: bold 15px Geneva, Arial, Helvetica, sans-serif; - vertical-align: middle; - border-bottom: 1px solid #ccc; - list-style-type: none; - text-align: left; - white-space: nowrap; - overflow: hidden; - height: 30px; - list-style-type: none; - display: block; - padding: 15px 5px 5px 10px; -} -.ul-large li:first-child { - border-top: 0; - -webkit-border-top-left-radius: 12px; - -webkit-border-top-right-radius: 12px; - -moz-border-top-left-radius: 12px; - -moz-border-top-right-radius: 12px; - border-top-left-radius: 12px; - border-top-right-radius: 12px; -} -.ul-large li:last-child { - border-bottom: 0; - -webkit-border-bottom-left-radius: 12px; - -webkit-border-bottom-right-radius: 12px; - -moz-border-bottom-left-radius: 12px; - -moz-border-bottom-right-radius: 12px; - border-bottom-left-radius: 12px; - border-bottom-right-radius: 12px; -} - -.ul-large li { - cursor:pointer; + + li { + color: #333; + font: bold 15px Geneva, Arial, Helvetica, sans-serif; + vertical-align: middle; + border-bottom: 1px solid #ccc; + list-style-type: none; + text-align: left; + white-space: nowrap; + overflow: hidden; + height: 30px; + list-style-type: none; + display: block; + padding: 15px 5px 5px 10px; + cursor:pointer; + + &:first-child { + border-top: 0; + -webkit-border-top-left-radius: 12px; + -webkit-border-top-right-radius: 12px; + -moz-border-top-left-radius: 12px; + -moz-border-top-right-radius: 12px; + border-top-left-radius: 12px; + border-top-right-radius: 12px; + } + + &:last-child { + border-bottom: 0; + -webkit-border-bottom-left-radius: 12px; + -webkit-border-bottom-right-radius: 12px; + -moz-border-bottom-left-radius: 12px; + -moz-border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; + } + } } /* Text */ @@ -368,19 +386,21 @@ html,body { .ul-mini { padding-left: 4px; margin-top:4px; -} -.ul-mini li { - list-style-type:none; - min-height:13px; - line-height:13px; - padding-left:14px; - margin-bottom:5px; - cursor:pointer; - background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzT7MfTgAAAZJJREFUKJFtz71rE2EAgPHnrknbXBKkLWhx0DhoWsEOxk0taMGlQ7cimElK5uroH5DFSUQ3KQpV2qlQEDJ4mKFQ0MVS6kfN1dQP2ss1ydW79y6Xu3udBG36zL/lUaSUVKtVqes6hmGgaRqlUulUoVAw+ScV4P2bFfrEPhnF4+v2NuVy+QFHSjiNXWV2cgzh+dRqX1hsNflcr5/tgcJ14larSdDxCYIOuWEV0c3+7oEAxk4NANu2GUnFFIt3FnvgydxFZb9hSRmFCCGwmjb3i3OVo1AFyF2bZm/PxDRN4rDDo4WHt4+F77RfmKNZ1MQA9ukTPPeXXt14OvXita5f+guVJ+uPZ1brlZUJI08qG/F26AP9chDXO8RpeyzNvMyMnc+7fembmU9WYJFXL7M1YtBNhqRIEYURh1Gb/u+DH69fubqRaLQOcAccHDy++TW0pEaATzcOkFHMxs/NCQD13oV50laaH/EuQdhBhAIRClzF/W9GkVIC8Gx54dZafa3SDmxc1SEdZxgfHmdu+m7y3Jlc+AextbuG6q1RSQAAAABJRU5ErkJggg==') no-repeat 0 0; -} -.ul-mini li:hover { - background-color:#EEE; + li { + list-style-type:none; + min-height:13px; + line-height:13px; + padding-left:14px; + margin-bottom:5px; + cursor:pointer; + + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzT7MfTgAAAZJJREFUKJFtz71rE2EAgPHnrknbXBKkLWhx0DhoWsEOxk0taMGlQ7cimElK5uroH5DFSUQ3KQpV2qlQEDJ4mKFQ0MVS6kfN1dQP2ss1ydW79y6Xu3udBG36zL/lUaSUVKtVqes6hmGgaRqlUulUoVAw+ScV4P2bFfrEPhnF4+v2NuVy+QFHSjiNXWV2cgzh+dRqX1hsNflcr5/tgcJ14larSdDxCYIOuWEV0c3+7oEAxk4NANu2GUnFFIt3FnvgydxFZb9hSRmFCCGwmjb3i3OVo1AFyF2bZm/PxDRN4rDDo4WHt4+F77RfmKNZ1MQA9ukTPPeXXt14OvXita5f+guVJ+uPZ1brlZUJI08qG/F26AP9chDXO8RpeyzNvMyMnc+7fembmU9WYJFXL7M1YtBNhqRIEYURh1Gb/u+DH69fubqRaLQOcAccHDy++TW0pEaATzcOkFHMxs/NCQD13oV50laaH/EuQdhBhAIRClzF/W9GkVIC8Gx54dZafa3SDmxc1SEdZxgfHmdu+m7y3Jlc+AextbuG6q1RSQAAAABJRU5ErkJggg==') no-repeat 0 0; + + &:hover { + background-color:#EEE; + } + } } /* Display userlist alongside main chat for wide screens */