Web   ·   Wiki   ·   Activities   ·   Blog   ·   Lists   ·   Chat   ·   Meeting   ·   Bugs   ·   Git   ·   Translate   ·   Archive   ·   People   ·   Donate
summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorManuel QuiƱones <manuq@laptop.org>2013-05-20 16:41:33 (GMT)
committer Manuel QuiƱones <manuq@laptop.org>2013-05-20 17:23:43 (GMT)
commit39b01403ce6d375a5fe83df6579966d1e1c7d56a (patch)
tree4fc6ac9260d15fd898ae43853cb927a97e1311e9
parent7606b2deaea7e35f1ece0208d35b7e7f655094db (diff)
Add custom images to media player buttons
Using data-urls the small images can be replaced by custom ones. Converted them to data-urls with this online tool: http://dataurl.net/#dataurlmaker I couldn't find selectors for active buttons, 'active' pseudo class doesn't work.
-rw-r--r--data/media-controls.css26
1 files changed, 26 insertions, 0 deletions
diff --git a/data/media-controls.css b/data/media-controls.css
index 9e21f08..e716351 100644
--- a/data/media-controls.css
+++ b/data/media-controls.css
@@ -11,6 +11,7 @@ audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure
}
audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
height: 55px;
+ padding: 5px;
background-color: #282828;
border-radius: 25px;
}
@@ -30,3 +31,28 @@ audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
font-size: 23px;
text-align: center;
}
+
+audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
+ -webkit-appearance: none !important;
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJyBbCgk8IUVOVElUWSBzdHJva2VfY29sb3IgIiMwMTAxMDEiPgoJPCFFTlRJVFkgZmlsbF9jb2xvciAiI0ZGRkZGRiI+Cl0+PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1NSA1NSIgaGVpZ2h0PSI1NXB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1NSA1NSIgd2lkdGg9IjU1cHgiIHg9IjBweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeT0iMHB4Ij48ZyBkaXNwbGF5PSJibG9jayIgaWQ9Im1lZGlhLXBsYXliYWNrLXN0YXJ0Ij4KCTxnIGRpc3BsYXk9ImlubGluZSI+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggZD0iTTI3LjQ5Niw1LjA1MUMxNS4wMzYsNS4wNyw0Ljk1MiwxNS4xNTUsNC45MywyNy42MThDNC45NTIsNDAuMDgsMTUuMDM2LDUwLjE2NCwyNy40OTYsNTAuMTg1ICAgICAgIGMxMi40NjUtMC4wMjEsMjIuNTQ5LTEwLjEwNCwyMi41NjgtMjIuNTY2QzUwLjA0NSwxNS4xNTUsMzkuOTYxLDUuMDcsMjcuNDk2LDUuMDUxeiBNMjEuNTUxLDM3Ljk3N3YtMjAuMzFsMTcuOTYxLDEwLjE1NSAgICAgICBMMjEuNTUxLDM3Ljk3N3oiIGZpbGw9IiZmaWxsX2NvbG9yOyIvPgoJCQkJPC9nPgoJCQk8L2c+CgkJCTxwYXRoIGQ9Ik0yNy40OTgsMEMxMi4zMTEsMCwwLDEyLjMxMywwLDI3LjVDMCw0Mi42ODgsMTIuMzExLDU1LDI3LjQ5OCw1NUM0Mi42ODYsNTUsNTUsNDIuNjg4LDU1LDI3LjUgICAgIEM1NSwxMi4zMTMsNDIuNjg2LDAsMjcuNDk4LDB6IE0yNy40OTYsNTIuNjQ2Yy0xMy44MjYsMC0yNS4wMzMtMTEuMjA5LTI1LjAzNS0yNS4wMzNDMi40NjMsMTMuNzg3LDEzLjY3LDIuNTc3LDI3LjQ5NiwyLjU3NCAgICAgYzEzLjgyNiwwLjAwMywyNS4wMzUsMTEuMjEzLDI1LjAzOSwyNS4wMzhDNTIuNTMxLDQxLjQzNyw0MS4zMjIsNTIuNjQ2LDI3LjQ5Niw1Mi42NDZ6IiBmaWxsPSImZmlsbF9jb2xvcjsiLz4KCQk8L2c+Cgk8L2c+CjwvZz48L3N2Zz4=);
+}
+
+audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
+ -webkit-appearance: none !important;
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJyBbCgk8IUVOVElUWSBzdHJva2VfY29sb3IgIiMwMTAxMDEiPgoJPCFFTlRJVFkgZmlsbF9jb2xvciAiI0ZGRkZGRiI+Cl0+PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1NSA1NSIgaGVpZ2h0PSI1NXB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1NSA1NSIgd2lkdGg9IjU1cHgiIHg9IjBweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeT0iMHB4Ij48ZyBkaXNwbGF5PSJibG9jayIgaWQ9Im1lZGlhLXNlZWstYmFja3dhcmQiPgoJPHBhdGggZD0iTTI3LjUsNUMxNS4wNzQsNSw1LDE1LjA3NSw1LDI3LjVTMTUuMDc0LDUwLDI3LjUsNTBTNTAsMzkuOTI1LDUwLDI3LjVTMzkuOTI2LDUsMjcuNSw1eiAgICBNMzkuMjM4LDM0Ljc3MUwyNi40MywyNy45NThjMCw2LjgwNSwwLDYuODEzLDAsNi44MTNsLTEzLjQxNi03LjEzNmwxMy40MTYtNi4yOGMwLDIuNDA3LDAsNC4zNzUsMCw1Ljk5NmwxMi44MDktNS45OTYgICBDMzkuMjM4LDM0Ljc3MSwzOS4yMzgsMzQuNzcxLDM5LjIzOCwzNC43NzF6IiBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9IiZmaWxsX2NvbG9yOyIvPgo8L2c+PC9zdmc+);
+}
+
+audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
+ -webkit-appearance: none !important;
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJyBbCgk8IUVOVElUWSBzdHJva2VfY29sb3IgIiMwMTAxMDEiPgoJPCFFTlRJVFkgZmlsbF9jb2xvciAiI0ZGRkZGRiI+Cl0+PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1NSA1NSIgaGVpZ2h0PSI1NXB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1NSA1NSIgd2lkdGg9IjU1cHgiIHg9IjBweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeT0iMHB4Ij48ZyBkaXNwbGF5PSJibG9jayIgaWQ9Im1lZGlhLXNlZWstZm9yd2FyZCI+Cgk8cGF0aCBkPSJNMjcuNSw1QzE1LjA3NCw1LDUsMTUuMDc1LDUsMjcuNVMxNS4wNzQsNTAsMjcuNSw1MFM1MCwzOS45MjUsNTAsMjcuNVMzOS45MjYsNSwyNy41LDV6ICAgIE0yOC41NywzNC43NzFjMCwwLDAtMC4wMDgsMC02LjgxM2wtMTIuODA5LDYuODEzYzAsMCwwLDAsMC0xMy40MTZsMTIuODA5LDUuOTk2YzAtMS42MjEsMC0zLjU4OSwwLTUuOTk2bDEzLjQxNiw2LjI4ICAgTDI4LjU3LDM0Ljc3MXoiIGRpc3BsYXk9ImlubGluZSIgZmlsbD0iJmZpbGxfY29sb3I7Ii8+CjwvZz48L3N2Zz4=);
+}
+
+audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
+ -webkit-appearance: none !important;
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJyBbCgk8IUVOVElUWSBzdHJva2VfY29sb3IgIiMwMTAxMDEiPgoJPCFFTlRJVFkgZmlsbF9jb2xvciAiI0ZGRkZGRiI+Cl0+PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1NSA1NSIgaGVpZ2h0PSI1NXB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1NSA1NSIgd2lkdGg9IjU1cHgiIHg9IjBweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeT0iMHB4Ij48ZyBkaXNwbGF5PSJibG9jayIgaWQ9InZpZXctZXhwYW5kIj4KCTxwYXRoIGQ9Ik00Ljg3NSw1djQ1aDQ1VjVINC44NzV6IE0yMy42MzgsNDQuMDUxSDEyLjU3NGMtMC4wNzEsMC0wLjE0MS0wLjAxMy0wLjIxLTAuMDIxICAgYy0wLjA0Mi0wLjAwNS0wLjA4NC0wLjAwNC0wLjEyNi0wLjAxM2MtMC4wMzMtMC4wMDctMC4wNjQtMC4wMi0wLjA5Ny0wLjAyOGMtMC4wNzktMC4wMjEtMC4xNTgtMC4wNC0wLjIzNC0wLjA3MSAgIGMtMC4wMTMtMC4wMDYtMC4wMjUtMC4wMTUtMC4wMzgtMC4wMjFjLTAuMDktMC4wNC0wLjE3OC0wLjA4NC0wLjI2Mi0wLjE0Yy0wLjA5Ni0wLjA2My0wLjE4Ny0wLjEzNy0wLjI2OS0wLjIxOSAgIGMtMC4wODMtMC4wODMtMC4xNTctMC4xNzUtMC4yMjItMC4yNzJjLTAuMDMtMC4wNDYtMC4wNTEtMC4wOTYtMC4wNzYtMC4xNDRjLTAuMDI4LTAuMDUyLTAuMDYtMC4xMDItMC4wODMtMC4xNTcgICBjLTAuMDMyLTAuMDc2LTAuMDUyLTAuMTU2LTAuMDcyLTAuMjM1Yy0wLjAwOC0wLjAzLTAuMDIxLTAuMDYtMC4wMjctMC4wOTFjLTAuMDE5LTAuMDk4LTAuMDI3LTAuMTk2LTAuMDI5LTAuMjk2ICAgYzAtMC4wMTUtMC4wMDQtMC4wMjgtMC4wMDQtMC4wNDNWMzEuMjM2YzAtMC45NjksMC43ODMtMS43NTEsMS43NDktMS43NTFjMC45NjgsMCwxLjc1MSwwLjc4MiwxLjc1MSwxLjc1MXY2LjgzOWw4LjAxMi04LjAxNSAgIGMwLjY4NC0wLjY4MiwxLjc5Mi0wLjY4MiwyLjQ3NiwwYzAuNjgyLDAuNjg0LDAuNjgyLDEuNzkyLDAsMi40NzdMMTYuOCw0MC41NDloNi44Mzh2MC4wMDNjMC45NjYsMCwxLjc1LDAuNzgyLDEuNzUsMS43NDggICBDMjUuMzg5LDQzLjI2NywyNC42MDQsNDQuMDUxLDIzLjYzOCw0NC4wNTF6IE00Mi41NzMsMjUuMTE0Yy0wLjk2OCwwLTEuNzUxLTAuNzgzLTEuNzUxLTEuNzUxdi02Ljg0bC05LjAxMyw5LjAxMyAgIGMtMC4zNDIsMC4zNDItMC43OSwwLjUxMy0xLjIzOCwwLjUxM2MtMC40NDcsMC0wLjg5Ni0wLjE3MS0xLjIzNy0wLjUxM2MtMC42ODMtMC42ODQtMC42ODMtMS43OTEsMC0yLjQ3NWw5LjAxMS05LjAxMmgtNi44MzQgICBjLTAuOTY2LDAtMS43NTEtMC43ODUtMS43NTEtMS43NTFjMC0wLjk2NiwwLjc4NS0xLjc1MSwxLjc1MS0xLjc1MWgxMS4wNjJjMC4xMDQsMCwwLjIwOSwwLjAxMiwwLjMxMiwwLjAzMSAgIGMwLjAwNywwLjAwMSwwLjAxNSwwLjAwMSwwLjAyMSwwLjAwMmMwLjA1NSwwLjAxMSwwLjEwNiwwLjAzMSwwLjE2LDAuMDQ3YzAuMDU4LDAuMDE3LDAuMTE2LDAuMDMsMC4xNzIsMC4wNTMgICBjMC4wMzIsMC4wMTMsMC4wNjIsMC4wMzMsMC4wOTMsMC4wNDljMC4wNzEsMC4wMzQsMC4xNDQsMC4wNjcsMC4yMSwwLjExMmMwLjA1NywwLjAzNywwLjEwNSwwLjA4MywwLjE1NiwwLjEyNyAgIGMwLjAzNywwLjAzMSwwLjA3NywwLjA1NywwLjExMiwwLjA5MWMwLjA0NywwLjA0NywwLjA4MywwLjEwMSwwLjEyNCwwLjE1MmMwLjAzLDAuMDM5LDAuMDY2LDAuMDc0LDAuMDk0LDAuMTE1ICAgYzAuMDYxLDAuMDkxLDAuMTEsMC4xODcsMC4xNTEsMC4yODVjMC4wMDMsMC4wMDYsMC4wMDcsMC4wMTEsMC4wMSwwLjAxN2MwLjAzNCwwLjA4MywwLjA1NywwLjE2OCwwLjA3NywwLjI1NSAgIGMwLjAwNywwLjAyNSwwLjAxOCwwLjA1LDAuMDIyLDAuMDc2YzAuMDEyLDAuMDYxLDAuMDE0LDAuMTI0LDAuMDE5LDAuMTg2YzAuMDA1LDAuMDUxLDAuMDE2LDAuMTAyLDAuMDE2LDAuMTUzbDAuMDAyLDExLjA2NSAgIEM0NC4zMjQsMjQuMzMyLDQzLjU0LDI1LjExNCw0Mi41NzMsMjUuMTE0eiIgZmlsbD0iJmZpbGxfY29sb3I7Ii8+CjwvZz48L3N2Zz4=);
+}
+
+audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
+ -webkit-appearance: none !important;
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJyBbCgk8IUVOVElUWSBzdHJva2VfY29sb3IgIiMwMTAxMDEiPgoJPCFFTlRJVFkgZmlsbF9jb2xvciAiI2ZmZmZmZiI+Cl0+PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1NSA1NSIgaGVpZ2h0PSI1NXB4IiBpZD0iTGF5ZXJfMSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTUgNTUiIHdpZHRoPSI1NXB4IiB4PSIwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHk9IjBweCI+PGcgZGlzcGxheT0iYmxvY2siIGlkPSJzcGVha2VyLTEwMCI+Cgk8Zz4KCQk8Zz4KCQkJPHBvbHlnb24gZmlsbD0iJmZpbGxfY29sb3I7IiBwb2ludHM9IjQxLjA2Miw1MC41MjMgNDEuMDU5LDMuODI3IDE4LjAxNCwxOC42NjggNy4yMjksMTguNjY4IDcuMjI5LDM1LjY4MiAxOC4wOTYsMzUuNjgyICAgICIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBvbHlnb24gZmlsbD0ibm9uZSIgcG9pbnRzPSI0MS4wNjIsNTAuNTIzIDQxLjA1OSwzLjgyNyAgICAgIDE4LjAxNCwxOC42NjggNy4yMjksMTguNjY4IDcuMjI5LDM1LjY4MiAxOC4wOTYsMzUuNjgyICAgICIgc3Ryb2tlPSImc3Ryb2tlX2NvbG9yOyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzLjUiLz4KCQk8L2c+Cgk8L2c+CjwvZz48L3N2Zz4=);
+}