diff --git a/src/style.scss b/src/style.scss index a3b5653..a0b55e3 100644 --- a/src/style.scss +++ b/src/style.scss @@ -29,13 +29,14 @@ @import './roboto.scss'; @import './material-icons.scss'; - + html > body { font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important; font-size: 16px; } -html, body { +html, +body { margin: 0; height: 100%; } @@ -70,7 +71,7 @@ pagination .container { } /* 1515px * 0.95 = 1440px */ -@media screen and (min-width: 1515px){ +@media screen and (min-width: 1515px) { material-card, material-tabs, pagination .container { @@ -80,11 +81,11 @@ pagination .container { material-tabs { display: block; - -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); - -ms-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); - -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); - -o-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); - box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); + -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } material-tabs material-button, @@ -114,7 +115,7 @@ material-spinner { text-decoration: none; font-size: 20px; line-height: 1; - letter-spacing: .02em; + letter-spacing: 0.02em; font-weight: 400; } @@ -153,18 +154,22 @@ h2 { overflow: hidden; } +docker-registry-ui material-button > :first-child .content i.material-icons, +docker-registry-ui material-button > :first-child .content i.material-icons.material-icons { + font-size: 24px; +} + .list > span i.material-icons, .list > li i.material-icons { margin-right: 32px; height: 24px; width: 24px; - font-size: 24px; box-sizing: border-box; color: #757575; } .list > span .right i.material-icons.animated { - transition: all 350ms cubic-bezier(.4,0,.2,1); + transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1); margin-right: 10px; } @@ -221,7 +226,7 @@ material-card table { width: 100%; border: none; position: relative; - border: 1px solid rgba(0, 0, 0, .12); + border: 1px solid rgba(0, 0, 0, 0.12); border-collapse: collapse; white-space: nowrap; font-size: 13px; @@ -234,7 +239,7 @@ material-card table th { vertical-align: bottom; line-height: 24px; height: 48px; - color: rgba(0, 0, 0, .54); + color: rgba(0, 0, 0, 0.54); box-sizing: border-box; padding: 0 18px 12px 18px; text-align: right; @@ -252,8 +257,8 @@ material-card table tbody tr:hover { material-button > :first-child[inverted='true'], material-card table tbody tr { - transition-duration: .28s; - transition-timing-function: cubic-bezier(.4, 0, .2, 1); + transition-duration: 0.28s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: background-color; } @@ -266,8 +271,8 @@ material-card table td { font-size: 16px; position: relative; height: 48px; - border-top: 1px solid rgba(0, 0, 0, .12); - border-bottom: 1px solid rgba(0, 0, 0, .12); + border-top: 1px solid rgba(0, 0, 0, 0.12); + border-bottom: 1px solid rgba(0, 0, 0, 0.12); padding: 12px 18px; box-sizing: border-box; vertical-align: middle; @@ -275,27 +280,30 @@ material-card table td { } tag-history-button button:hover, -material-card table th.material-card-th-sorted-ascending:hover, material-card table th.material-card-th-sorted-descending:hover { +material-card table th.material-card-th-sorted-ascending:hover, +material-card table th.material-card-th-sorted-descending:hover { cursor: pointer; } -material-card table th.material-card-th-sorted-ascending:hover:before, material-card table th.material-card-th-sorted-descending:hover:before { - color: rgba(0, 0, 0, .26); +material-card table th.material-card-th-sorted-ascending:hover:before, +material-card table th.material-card-th-sorted-descending:hover:before { + color: rgba(0, 0, 0, 0.26); } -material-card table th.material-card-th-sorted-ascending:before, material-card table th.material-card-th-sorted-descending:before { +material-card table th.material-card-th-sorted-ascending:before, +material-card table th.material-card-th-sorted-descending:before { font-family: 'Material Icons'; font-weight: 400; font-style: normal; line-height: 1; font-size: 16px; - content: "\e5d8"; + content: '\e5d8'; margin-right: 5px; vertical-align: sub; } material-card table th.material-card-th-sorted-descending:before { - content: "\e5db"; + content: '\e5db'; } material-button .content i.material-icons, @@ -313,7 +321,7 @@ material-snackbar .toast { } material-popup material-button:hover material-waves { - background-color: hsla(0, 0%, 75%, .2); + background-color: hsla(0, 0%, 75%, 0.2); } material-popup .popup > .content { @@ -343,7 +351,8 @@ material-footer { /* 5 + 2 + 3 + 24 + 3 + 2 + 18 */ padding-right: 57px; } -image-tag, .copy-to-clipboard { +image-tag, +.copy-to-clipboard { display: inline-block; } image-content-digest { @@ -396,7 +405,7 @@ catalog-element material-card { } catalog-element catalog-element material-card { - transition: all 350ms cubic-bezier(.4,0,.2,1); + transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; position: relative; } @@ -411,7 +420,7 @@ catalog-element catalog-element > .content { margin-left: 3em; } -@media screen and (min-width: 1515px){ +@media screen and (min-width: 1515px) { catalog-element catalog-element > .content material-card { max-width: calc(1440px - 3em); }