feat(riot-mui): set material-icon size to 24px globally

This commit is contained in:
Joxit 2022-12-31 10:13:30 +01:00
parent 228762c641
commit 1e08561b3a
No known key found for this signature in database
GPG key ID: F526592B8E012263

View file

@ -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);
}