diff --git a/phpBB/styles/prosilver/theme/buttons.css b/phpBB/styles/prosilver/theme/buttons.css index 3bbcc51ef5..77325f3d32 100644 --- a/phpBB/styles/prosilver/theme/buttons.css +++ b/phpBB/styles/prosilver/theme/buttons.css @@ -16,9 +16,9 @@ padding: 2px 8px; cursor: pointer; touch-action: manipulation; + -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; - -webkit-user-select: none; user-select: none; } diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 11090c0e77..2788295b68 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -97,15 +97,15 @@ th a:hover { .headerbar, .forumbg { background-color: #13a4ec; - background-image: -webkit-linear-gradient(top, #80d5ff 0%, #0077b3 2px, #13a4ec 92px, #13a4ec 100%); - background-image: linear-gradient(to bottom, #80d5ff 0%, #0077b3 2px, #13a4ec 92px, #13a4ec 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#80d5ff), color-stop(0.1%, #0077b3), color-stop(30%, #13a4ec), to(#13a4ec)); + background-image: linear-gradient(to bottom, #80d5ff 0%, #0077b3 0.1%, #13a4ec 30%, #13a4ec 100%); background-repeat: repeat-x; } .forabg { background-color: #0077b3; - background-image: -webkit-linear-gradient(top, #80d5ff 0%, #13a4ec 2px, #0077b3 92px, #0077b3 100%); - background-image: linear-gradient(to bottom, #80d5ff 0%, #13a4ec 2px, #0077b3 92px, #0077b3 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#80d5ff), color-stop(0.1%, #13a4ec), color-stop(30%, #0077b3), to(#0077b3)); + background-image: linear-gradient(to bottom, #80d5ff 0%, #13a4ec 0.1%, #0077b3 30%, #0077b3 100%); background-repeat: repeat-x; } @@ -317,7 +317,7 @@ p.post-notice { /* colours and backgrounds for content.css */ ul.forums { background-color: #edf4f7; - background-image: -webkit-linear-gradient(top, #b8d3e0 0%, #edf4f7 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#b8d3e0), to(#edf4f7)); background-image: linear-gradient(to bottom, #b8d3e0 0%, #edf4f7 100%); } @@ -591,16 +591,17 @@ dd.profile-warnings { /* colours and backgrounds for buttons.css */ .button { background-color: #e0e0e0; - background-image: -webkit-linear-gradient(top, #ffffff 0%, #e0e0e0 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e0e0e0)); background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%); border-color: #bdbdbd; + -webkit-box-shadow: 0 0 0 1px #ffffff inset; box-shadow: 0 0 0 1px #ffffff inset; color: #d41142; } .button:hover, .button:focus { - background-image: -webkit-linear-gradient(top, #e0e0e0 0%, #ffffff 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#ffffff)); background-image: linear-gradient(to bottom, #e0e0e0 0%, #ffffff 100%); border-color: #0077b3; text-shadow: 1px 1px 0 #ffffff, -1px -1px 0 #ffffff, -1px -1px 0 rgba(189, 40, 77, 0.2); @@ -615,6 +616,7 @@ dd.profile-warnings { .button-form, .button-form-bold { border-color: #757575; + -webkit-box-shadow: none; box-shadow: none; color: #212121; } @@ -663,6 +665,7 @@ dd.profile-warnings { -webkit-filter: none; filter: none; border-color: #bdbdbd; + -webkit-box-shadow: none; box-shadow: none; color: #9e9e9e; } @@ -696,6 +699,7 @@ dd.profile-warnings { } .search-header { + -webkit-box-shadow: 0 0 10px #0077b3; box-shadow: 0 0 10px #0077b3; } @@ -822,9 +826,10 @@ ul.cplist { .tabs .activetab > a, .tabs .activetab > a:hover { background-color: #c9dee8; - background-image: -webkit-linear-gradient(top, #e6f7ff 0%, #c9dee8 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#e6f7ff), to(#c9dee8)); background-image: linear-gradient(to bottom, #e6f7ff 0%, #c9dee8 100%); border-color: #c9dee8; + -webkit-box-shadow: 0 1px 1px #e6f7ff inset; box-shadow: 0 1px 1px #e6f7ff inset; color: #212121; } @@ -845,14 +850,14 @@ ul.cplist { /* link styles for the sub-section links */ .navigation a { background: #c0d3dd; - background-image: -webkit-linear-gradient(left, #aab9c0 50%, #c0d3dd 100%); + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #aab9c0), to(#c0d3dd)); background-image: linear-gradient(to right, #aab9c0 50%, #c0d3dd 100%); color: #212121; } .rtl .navigation a { background: #afc5cf; - background-image: -webkit-linear-gradient(left, #c0d3dd 50%, #aab9c0 100%); + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #c0d3dd), to(#aab9c0)); background-image: linear-gradient(to right, #c0d3dd 50%, #aab9c0 100%); } @@ -1020,6 +1025,33 @@ input.disabled { background-color: #000000; } +/* stylelint-disable at-rule-no-vendor-prefix */ + +@-webkit-keyframes colors { + 0% { + stroke: #4285f4; + } + + 25% { + stroke: #de3e35; + } + + 50% { + stroke: #f7c223; + } + + 75% { + stroke: #1b9a59; + } + + 100% { + stroke: #4285f4; + } +} + +/* stylelint-enable at-rule-no-vendor-prefix */ + + @keyframes colors { 0% { stroke: #4285f4; @@ -1068,7 +1100,7 @@ input.disabled { .dropdown-extended .header { background-color: #e6f7ff; - background-image: -webkit-linear-gradient(top, #e6f7ff 0%, #c9dee8 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#e6f7ff), to(#c9dee8)); background-image: linear-gradient(to bottom, #e6f7ff 0%, #c9dee8 100%); } @@ -1087,10 +1119,12 @@ input.disabled { .dropdown .dropdown-contents { background: #ffffff; border-color: #bdbdbd; + -webkit-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2); box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2); } .dropdown-up .dropdown-contents { + -webkit-box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2); box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2); } diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index 0df80d1c9d..f5c6f84809 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -450,6 +450,7 @@ a.header-avatar span:after { width: 0; height: 0; -webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */ + transform: rotate(360deg); } .dropdown-up .pointer, @@ -1046,43 +1047,82 @@ fieldset.fields1 dl.pmlist dd.recipients { } .spinner { + -webkit-animation: rotator 1s linear infinite; animation: rotator 1s linear infinite; } /* stylelint-disable no-unknown-animations */ .spinner-path { + -webkit-transform-origin: center; transform-origin: center; + -webkit-animation: dash 1s ease-in-out infinite, colors 4s ease-in-out infinite; animation: dash 1s ease-in-out infinite, colors 4s ease-in-out infinite; stroke-dasharray: 187; stroke-dashoffset: 0; } /* stylelint-enable no-unknown-animations */ -@keyframes rotator { +/* stylelint-disable at-rule-no-vendor-prefix */ +@-webkit-keyframes rotator { 0% { + -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { + -webkit-transform: rotate(270deg); transform: rotate(270deg); } } +@keyframes rotator { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + } +} + +@-webkit-keyframes dash { + 0% { + stroke-dashoffset: 187; + } + + 50% { + -webkit-transform: rotate(135deg); + transform: rotate(135deg); + stroke-dashoffset: 46.75; + } + + 100% { + -webkit-transform: rotate(450deg); + transform: rotate(450deg); + stroke-dashoffset: 187; + } +} + @keyframes dash { 0% { stroke-dashoffset: 187; } 50% { + -webkit-transform: rotate(135deg); transform: rotate(135deg); stroke-dashoffset: 46.75; } 100% { + -webkit-transform: rotate(450deg); transform: rotate(450deg); stroke-dashoffset: 187; } } +/* stylelint-enable at-rule-no-vendor-prefix */ /* Miscellaneous styles diff --git a/phpBB/styles/prosilver/theme/content.css b/phpBB/styles/prosilver/theme/content.css index f9d80c6f85..89b503eae0 100644 --- a/phpBB/styles/prosilver/theme/content.css +++ b/phpBB/styles/prosilver/theme/content.css @@ -69,6 +69,7 @@ ul.topiclist.two-columns dt .list-inner { ul.topiclist dd { border-left: 1px solid transparent; + -webkit-box-sizing: border-box; box-sizing: border-box; padding: 4px 0; } @@ -135,6 +136,7 @@ li.header dt .list-inner { } li.header dd { + -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 1px; } @@ -308,6 +310,7 @@ dd.option { } .postbody img.postimage { + -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 100%; } @@ -567,6 +570,7 @@ blockquote .codebox { border: 1px dashed transparent; float: left; clear: left; + -webkit-box-sizing: border-box; box-sizing: border-box; width: auto; max-width: 100%; @@ -646,6 +650,7 @@ dl.file dd { dl.thumbnail img { border: 1px solid transparent; + -webkit-box-sizing: border-box; box-sizing: border-box; padding: 3px; } diff --git a/phpBB/styles/prosilver/theme/forms.css b/phpBB/styles/prosilver/theme/forms.css index 6598f7955c..1257c2c56d 100644 --- a/phpBB/styles/prosilver/theme/forms.css +++ b/phpBB/styles/prosilver/theme/forms.css @@ -84,7 +84,6 @@ fieldset dd { margin-left: 41%; } - fieldset.fields1 div { margin-bottom: 3px; } @@ -270,6 +269,7 @@ fieldset.submit-buttons input { max-width: 100%; height: 270px; resize: vertical; + -webkit-transition: all 0.5s ease, height 1ms linear; transition: all 0.5s ease, height 1ms linear; } @@ -326,6 +326,7 @@ input[type="number"] { input[type="search"] { -webkit-box-sizing: content-box; + box-sizing: content-box; -webkit-appearance: textfield; } @@ -361,6 +362,7 @@ input.disabled { border-right-width: 0; border-radius: 4px 0 0 4px; float: left; + -webkit-box-sizing: border-box; box-sizing: border-box; height: 24px; padding: 3px; diff --git a/phpBB/styles/prosilver/theme/links.css b/phpBB/styles/prosilver/theme/links.css index b83f49b0a2..3a8407e2a6 100644 --- a/phpBB/styles/prosilver/theme/links.css +++ b/phpBB/styles/prosilver/theme/links.css @@ -45,6 +45,7 @@ th a:hover { top: 50%; right: 0; display: none; + -webkit-box-sizing: border-box; box-sizing: border-box; margin-top: -20px; } diff --git a/phpBB/styles/prosilver/theme/responsive.css b/phpBB/styles/prosilver/theme/responsive.css index a619b7ebb1..07cdd1cff9 100644 --- a/phpBB/styles/prosilver/theme/responsive.css +++ b/phpBB/styles/prosilver/theme/responsive.css @@ -420,6 +420,7 @@ textarea, dd textarea, .message-box textarea { + -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; }