diff options
Diffstat (limited to 'vnext/src/style')
-rw-r--r-- | vnext/src/style/main.css | 52 |
1 files changed, 43 insertions, 9 deletions
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css index 726c2cba..964890c2 100644 --- a/vnext/src/style/main.css +++ b/vnext/src/style/main.css @@ -58,12 +58,14 @@ img, hr { transition: margin-left 0.4s; overflow-x: hidden; } + #header_wrapper, .footer_container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } + #sidebar { color: #222; transition: width 0.4s; @@ -90,7 +92,7 @@ img, hr { width: 100%; margin-top: 12px; overflow-x: hidden; - transition: margin-left 0.4s; + transition: margin-left 0.4s; } #footer { @@ -144,8 +146,7 @@ img, hr { display: flex; } -#global a, -#ctitle a { +#global a, #ctitle a { display: flex; align-items: center; border-bottom: 2px solid transparent; @@ -156,7 +157,7 @@ img, hr { padding: 14px 16px; } -#sidebar > a { +#sidebar>a { color: #88958d; border-right: 2px solid transparent; display: flex; @@ -164,7 +165,8 @@ img, hr { align-items: center; vertical-align: middle; } -#sidebar > a:hover { + +#sidebar>a:hover { background-color: #f8f8f8; border-right: 2px solid #ff339a; cursor: pointer; @@ -174,10 +176,7 @@ img, hr { padding: 2px 20px; } -#global a:hover, -#ctitle a:hover, -.l a:hover -.msg-button:hover { +#global a:hover, #ctitle a:hover, .l a:hover .msg-button:hover { background-color: #f8f8f8; border-bottom: 2px solid #ff339a; cursor: pointer; @@ -196,6 +195,41 @@ img, hr { border-radius: 0; } +.lds-ripple { + display: inline-block; + position: relative; + width: 64px; + height: 64px; +} + +.lds-ripple div { + position: absolute; + border: 4px solid #ff339a; + opacity: 1; + border-radius: 50%; + animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; +} + +.lds-ripple div:nth-child(2) { + animation-delay: -0.5s; +} + +@keyframes lds-ripple { + 0% { + top: 28px; + left: 28px; + width: 0; + height: 0; + opacity: 1; + } + 100% { + top: -1px; + left: -1px; + width: 58px; + height: 58px; + opacity: 0; + } +} @media (--viewport-desktop) { #app { |