minor style changes to input and button hover effects

This commit is contained in:
spencerwooo
2021-12-17 15:28:11 +08:00
parent 7a77fd884d
commit c6fba24f97
4 changed files with 33 additions and 39 deletions
+6 -13
View File
@@ -28,16 +28,9 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
</div>
<div className="flex flex-wrap justify-center mt-4 space-x-2">
<Toaster
toastOptions={{
style: {
background: '#316C23',
color: '#ffffff',
},
}}
/>
<Toaster />
<a
className="w-36 focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 flex items-center justify-center flex-shrink-0 px-4 py-2 mb-2 space-x-4 text-white bg-blue-500 rounded"
className="w-36 focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-400 flex items-center justify-center flex-shrink-0 px-4 py-2 mb-2 space-x-4 text-white bg-blue-500 rounded"
href={file['@microsoft.graph.downloadUrl']}
target="_blank"
rel="noopener noreferrer"
@@ -47,7 +40,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
</a>
<button
className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 flex items-center justify-center flex-shrink-0 w-48 px-4 py-2 mb-2 space-x-4 text-white bg-yellow-500 rounded"
className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-400 flex items-center justify-center flex-shrink-0 w-48 px-4 py-2 mb-2 space-x-4 text-white bg-yellow-500 rounded"
onClick={() => {
clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
toast.success('Copied direct link to clipboard.')
@@ -58,7 +51,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
</button>
<a
className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-gray-600 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-gray-700 rounded"
className="focus:outline-none focus:ring focus:ring-gray-300 hover:bg-gray-600 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-gray-700 rounded"
href={`iina://weblink?url=${file['@microsoft.graph.downloadUrl']}`}
target="_blank"
rel="noopener noreferrer"
@@ -67,7 +60,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
<span>IINA</span>
</a>
<a
className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-yellow-500 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-600 rounded"
className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-500 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-600 rounded"
href={`vlc://${file['@microsoft.graph.downloadUrl']}`}
target="_blank"
rel="noopener noreferrer"
@@ -76,7 +69,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
<span>VLC</span>
</a>
<a
className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-yellow-300 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-400 rounded"
className="focus:outline-none focus:ring focus:ring-yellow-100 hover:bg-yellow-400 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-400 rounded"
href={`potplayer://${file['@microsoft.graph.downloadUrl']}`}
target="_blank"
rel="noopener noreferrer"