mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1204510 - Replace animated SVG spinner with non-SVG equivalent. r=ally
The spinner itself is 60px square, colored like fennec_ui_orange.
The HTML and CSS was hacked out of
https://github.com/lightningtgc/material-refresh, tree
6b1be0046d.
The original code is licensed MIT. I pruned things we don't use,
adjusted the box model for our use, changed the spinner color, and
simplified the CSS.
This commit is contained in:
Nick Alexander
parent
fbf1c50df4
commit
6014e14cac
@ -16,6 +16,7 @@
|
||||
<title>&aboutLogins.title;</title>
|
||||
<meta name="viewport" content="width=device-width; user-scalable=0" />
|
||||
<link rel="icon" type="image/png" sizes="64x64" href="chrome://branding/content/favicon64.png" />
|
||||
<link rel="stylesheet" href="chrome://browser/skin/spinner.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="chrome://browser/skin/aboutBase.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="chrome://browser/skin/aboutLogins.css" type="text/css"/>
|
||||
<script type="application/javascript;version=1.8" src="chrome://browser/content/aboutLogins.js"></script>
|
||||
@ -38,7 +39,22 @@
|
||||
</div>
|
||||
<div id="logins-list-loading-body" class="hidden">
|
||||
<div id="loading-img-container">
|
||||
<object type="image/svg+xml" id="spinner" data="chrome://browser/skin/images/spinning_throbber.svg"/>
|
||||
|
||||
<div id="spinner" class="mui-refresh-main">
|
||||
<div class="mui-refresh-wrapper">
|
||||
<div class="mui-spinner-wrapper">
|
||||
<div class="mui-spinner-main">
|
||||
<div class="mui-spinner-left">
|
||||
<div class="mui-half-circle-left" />
|
||||
</div>
|
||||
<div class="mui-spinner-right">
|
||||
<div class="mui-half-circle-right" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="empty-body" class="hidden">
|
||||
|
||||
@ -200,8 +200,6 @@ body {
|
||||
|
||||
#spinner {
|
||||
margin-top: 60px;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
#empty-body {
|
||||
|
||||
@ -1,61 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
|
||||
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
|
||||
<style type="text/css">
|
||||
.spinner {
|
||||
animation: rotator 1.4s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotator {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
|
||||
.path {
|
||||
stroke-dasharray: 187;
|
||||
stroke-dashoffset: 0;
|
||||
transform-origin: center;
|
||||
animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes colors {
|
||||
0% {
|
||||
stroke: #FF9500;
|
||||
}
|
||||
25% {
|
||||
stroke: #FF9500;
|
||||
}
|
||||
50% {
|
||||
stroke: #FF9500;
|
||||
}
|
||||
75% {
|
||||
stroke: #FF9500;
|
||||
}
|
||||
100% {
|
||||
stroke: #FF9500;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
0% {
|
||||
stroke-dashoffset: 187;
|
||||
}
|
||||
50% {
|
||||
stroke-dashoffset: 46.75;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 187;
|
||||
transform: rotate(450deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -29,6 +29,7 @@ chrome.jar:
|
||||
skin/config.css (config.css)
|
||||
skin/touchcontrols.css (touchcontrols.css)
|
||||
skin/netError.css (netError.css)
|
||||
skin/spinner.css (spinner.css)
|
||||
% override chrome://global/skin/about.css chrome://browser/skin/about.css
|
||||
% override chrome://global/skin/aboutMemory.css chrome://browser/skin/aboutMemory.css
|
||||
% override chrome://global/skin/aboutReader.css chrome://browser/skin/aboutReader.css
|
||||
@ -44,7 +45,6 @@ chrome.jar:
|
||||
#
|
||||
|
||||
* skin/aboutLogins.css (aboutLogins.css)
|
||||
skin/images/spinning_throbber.svg (images/spinning_throbber.svg)
|
||||
|
||||
skin/images/search.png (images/search.png)
|
||||
skin/images/lock.png (images/lock.png)
|
||||
|
||||
124
mobile/android/themes/core/spinner.css
Normal file
124
mobile/android/themes/core/spinner.css
Normal file
@ -0,0 +1,124 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
.mui-refresh-main {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mui-refresh-wrapper {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.mui-spinner-main {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
animation: sporadic-rotate 5.25s cubic-bezier(.35, 0, .25, 1) infinite;
|
||||
}
|
||||
|
||||
.mui-spinner-wrapper {
|
||||
animation: outer-rotate 2.91667s linear infinite;
|
||||
}
|
||||
|
||||
.mui-spinner-left, .mui-spinner-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 60px;
|
||||
width: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mui-spinner-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mui-spinner-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mui-half-circle-left, .mui-half-circle-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
box-sizing: border-box;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #000 #000 transparent;
|
||||
border-radius: 999px;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 1.3125s;
|
||||
animation-timing-function: cubic-bezier(.35, 0, .25, 1);
|
||||
}
|
||||
|
||||
.mui-half-circle-left {
|
||||
left: 0;
|
||||
border-right-color: transparent;
|
||||
border-top-color: #FF9500; /*matched to fennec_ui_orange in java codebase*/
|
||||
border-left-color: #FF9500; /*matched to fennec_ui_orange in java codebase*/
|
||||
animation-name: left-wobble;
|
||||
}
|
||||
|
||||
.mui-half-circle-right {
|
||||
right: 0;
|
||||
border-left-color: transparent;
|
||||
border-top-color: #FF9500; /*matched to fennec_ui_orange in java codebase*/
|
||||
border-right-color: #FF9500; /*matched to fennec_ui_orange in java codebase*/
|
||||
animation-name: right-wobble;
|
||||
}
|
||||
|
||||
@keyframes outer-rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes left-wobble {
|
||||
0%, 100% {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes right-wobble {
|
||||
0%, 100% {
|
||||
transform: rotate(-130deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sporadic-rotate {
|
||||
12.5% {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
37.5% {
|
||||
transform: rotate(405deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(540deg);
|
||||
}
|
||||
62.5% {
|
||||
transform: rotate(675deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(810deg);
|
||||
}
|
||||
87.5% {
|
||||
transform: rotate(945deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(1080deg);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user