tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First round of CSS fixes

Browse Source
This commit is contained in:
Tamius Han 2019-05-22 01:03:15 +02:00
parent 4c5569f039
commit add72e8398
11 changed files with 204 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/common/components/ActionAlt.vue
View File

@ -6,11 +6,12 @@
</div> </div>
<div class="flex action-name"> <div class="flex action-name">
<span class="icon" @click="removeAction()">🗙</span> <span class="icon red" @click="removeAction()">🗙</span> &nbsp; &nbsp;
<span class="icon" @click="editAction()">🖉</span> {{action.name}} <span class="icon" @click="editAction()">🖉</span> &nbsp; &nbsp;
{{action.name}}
</div> </div>
</div> </div>
<div class="flex flex-row"> <div class="flex flex-row command-details">
<div class="flex flex-column cmd-container"> <div class="flex flex-column cmd-container">
<div class="flex bold"> <div class="flex bold">
Command: Command:
@ -152,6 +153,20 @@ export default {
cursor: pointer; cursor: pointer;
} }
.action .command-details {
height: 0px;
max-height: 0px;
transition: max-height 0.5s ease;
overflow: hidden;
transition: height 0.5s ease;
}
.action:hover .command-details {
height: auto;
max-height: 200px;
transition: max-height 0.5s ease;
}
.action-name-cmd-container { .action-name-cmd-container {
padding: 1rem; padding: 1rem;
} }
@ -159,7 +174,14 @@ export default {
.action-name { .action-name {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 300; font-weight: 300;
color: $primary-color; color: $text-normal;
}
.action-name:hover {
color: lighten($primary-color, 20%);
}
.red {
color: $primary-color !important;
} }
.cmd-container { .cmd-container {

2
src/options/App.vue
View File

@ -168,6 +168,8 @@ export default {
this.selectedTabTitle = 'Advanced autodetection settings'; this.selectedTabTitle = 'Advanced autodetection settings';
} else if (newTab === 'controls') { } else if (newTab === 'controls') {
this.selectedTabTitle = 'Actions'; this.selectedTabTitle = 'Actions';
} else if (newTab === 'txtconf') {
this.selectedTabTitle = 'Super advanced settings';
} else if (newTab === 'about') { } else if (newTab === 'about') {
this.selectedTabTitle = 'About'; this.selectedTabTitle = 'About';
} else if (newTab === 'donate') { } else if (newTab === 'donate') {

86
src/options/AutodetectionSettings.vue
View File

@ -17,7 +17,7 @@
<div class="indent"> <div class="indent">
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Frequency while playing: Frequency while playing:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -27,7 +27,7 @@
</div> </div>
</div> </div>
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Frequency while paused: Frequency while paused:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -37,7 +37,7 @@
</div> </div>
</div> </div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding"> <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Error timeout: Error timeout:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -48,15 +48,9 @@
</div> </div>
</div> </div>
<div class="info">Setting values under 100 milliseconds will have no effect unless you also reduce the tickrate.
<a href="#"
@click="showAdvancedOptions = true"
>Show advanced options</a>
</div>
<div class="indent"> <div class="indent">
<div class="flex flex-row row-padding" v-if="showAdvancedOptions"> <div class="flex flex-row row-padding" v-if="showAdvancedOptions">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Tick rate: Tick rate:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -67,6 +61,12 @@
</div> </div>
</div> </div>
<div class="info">Setting values under 100 milliseconds will have no effect unless you also reduce the tickrate.
<a href="#"
@click="showAdvancedOptions = true"
>Show advanced options</a>
</div>
<div class="label">Fallback mode</div> <div class="label">Fallback mode</div>
<div class="description"> <div class="description">
Some streaming sites implement stuff (DRM) that prevents us from detecting aspect ratio using our favourite way. Some streaming sites implement stuff (DRM) that prevents us from detecting aspect ratio using our favourite way.
@ -91,7 +91,7 @@
</div> </div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding"> <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Safety border thickness (in px) Safety border thickness (in px)
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -101,7 +101,7 @@
</div> </div>
</div> </div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding"> <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Don't react if detected edge is less than this many pixels thick: Don't react if detected edge is less than this many pixels thick:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -118,7 +118,7 @@
</div> </div>
<div class="indent"> <div class="indent">
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Letterbox misalignment threshold Letterbox misalignment threshold
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -140,7 +140,7 @@
</div> </div>
<div class="indent"> <div class="indent">
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Static sample columns: Static sample columns:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -150,7 +150,7 @@
</div> </div>
</div> </div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding"> <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Random sample columns: Random sample columns:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -160,7 +160,7 @@
</div> </div>
</div> </div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding"> <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Static rows: Static rows:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -170,7 +170,7 @@
</div> </div>
</div> </div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding"> <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Sample width: Sample width:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -180,7 +180,7 @@
</div> </div>
</div> </div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding"> <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Static rows: Static rows:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -212,7 +212,7 @@
</div> </div>
<div class="indent"> <div class="indent">
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Black level: Black level:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -222,7 +222,7 @@
</div> </div>
</div> </div>
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Threshold: Threshold:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -232,7 +232,7 @@
</div> </div>
</div> </div>
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Gradient detection: Gradient detection:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -240,7 +240,7 @@
</div> </div>
</div> </div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding"> <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Image threshold Image threshold
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -250,7 +250,7 @@
</div> </div>
</div> </div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding"> <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Gradient threshold: Gradient threshold:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -260,7 +260,7 @@
</div> </div>
</div> </div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding"> <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Gradient sample size: Gradient sample size:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -282,7 +282,7 @@
</div> </div>
<div class="indent"> <div class="indent">
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Blackframe sample width: Blackframe sample width:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -292,7 +292,7 @@
</div> </div>
</div> </div>
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Blackframe sample height: Blackframe sample height:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -302,7 +302,7 @@
</div> </div>
</div> </div>
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Cumulative threshold: Cumulative threshold:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -312,7 +312,7 @@
</div> </div>
</div> </div>
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Black pixel threshold: Black pixel threshold:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -337,7 +337,7 @@
</div> </div>
<div class="indent"> <div class="indent">
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Sample width: Sample width:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -347,7 +347,7 @@
</div> </div>
</div> </div>
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Detection threshold (px): Detection threshold (px):
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -357,7 +357,7 @@
</div> </div>
</div> </div>
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Single side confirmation threshold: Single side confirmation threshold:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -367,7 +367,7 @@
</div> </div>
</div> </div>
<div class="flex flex-row row-padding" v-if="showAdvancedOptions"> <div class="flex flex-row row-padding" v-if="showAdvancedOptions">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Logo threshold: Logo threshold:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -377,7 +377,7 @@
</div> </div>
</div> </div>
<div class="flex flex-row row-padding" v-if="showAdvancedOptions"> <div class="flex flex-row row-padding" v-if="showAdvancedOptions">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Ignore middle area: Ignore middle area:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -387,7 +387,7 @@
</div> </div>
</div> </div>
<div class="flex flex-row row-padding" v-if="showAdvancedOptions"> <div class="flex flex-row row-padding" v-if="showAdvancedOptions">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Detect limit: Detect limit:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -408,7 +408,7 @@
</div> </div>
<div class="indent"> <div class="indent">
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary ">
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -418,7 +418,7 @@
</div> </div>
</div> </div>
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Ignore edge margin: Ignore edge margin:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -428,7 +428,7 @@
</div> </div>
</div> </div>
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Image threshold: Image threshold:
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -438,7 +438,7 @@
</div> </div>
</div> </div>
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Edge tolerance (px): Edge tolerance (px):
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -456,7 +456,7 @@
</div> </div>
<div class="indent"> <div class="indent">
<div class="flex flex-row row-padding"> <div class="flex flex-row row-padding">
<div class="flex label-secondary"> <div class="flex label-secondary form-label">
Aspect ratio change threshold. Aspect ratio change threshold.
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
@ -497,3 +497,11 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped>
.form-label {
width: 20rem;
text-align: right;
vertical-align: baseline;
}
</style>

64
src/options/controls-settings/AddEditActionPopup.vue
View File

@ -7,22 +7,24 @@
{{actionIndex < 0 ? 'Add new action' : 'Edit action'}} {{actionIndex < 0 ? 'Add new action' : 'Edit action'}}
</div> </div>
<CommandChain class="w100" <div class="command-chain-border">
:command="action.cmd" <CommandChain class="w100"
@new-command="addNewCommand()" :command="action.cmd"
@edit="editCommand" @new-command="addNewCommand()"
@delete="deleteCommand" @edit="editCommand"
> @delete="deleteCommand"
</CommandChain> >
<CommandAddEdit class="w100" </CommandChain>
v-if="addEditCommand" <CommandAddEdit class="w100 cae-margin"
:action="currentCmd" v-if="addEditCommand"
@set-command="updateCommand" :action="currentCmd"
@close-popup="addEditCommand=false" @set-command="updateCommand"
> @close-popup="addEditCommand=false"
</CommandAddEdit> >
</CommandAddEdit>
</div>
<div class="flex flex-column"> <div class="flex flex-column section-pad">
<div class="flex flex-row"> <div class="flex flex-row">
<div class="flex label-secondary form-label"> <div class="flex label-secondary form-label">
<span class="w100"> <span class="w100">
@ -54,12 +56,12 @@
</div> </div>
<div class="flex flex-row"> <div class="flex flex-row section-pad">
<b>Show this action in the following tabs:</b> <b>Show this action in the following tabs:</b>
</div> </div>
<template v-if="action && action.cmd[0] && action.cmd[0].action !== 'set-ar'"> <template v-if="action && action.cmd[0] && action.cmd[0].action !== 'set-ar'">
<div>Extension settings (global)</div> <div class="tab-title">Extension settings (global)</div>
<ScopeSettings :scopeOptions="globalScopeOptions" <ScopeSettings :scopeOptions="globalScopeOptions"
@show="updateScopes('global', 'show', $event)" @show="updateScopes('global', 'show', $event)"
@set-label="updateScopes('global', 'label', $event)" @set-label="updateScopes('global', 'label', $event)"
@ -68,7 +70,7 @@
</template> </template>
<template v-if="action && action.cmd[0] && action.cmd[0].action !== 'set-ar'"> <template v-if="action && action.cmd[0] && action.cmd[0].action !== 'set-ar'">
<div>Site settings (site)</div> <div class="tab-title">Site settings (site)</div>
<ScopeSettings :scopeOptions="siteScopeOptions" <ScopeSettings :scopeOptions="siteScopeOptions"
@show="updateScopes('site', 'show', $event)" @show="updateScopes('site', 'show', $event)"
@set-label="updateScopes('site', 'label', $event)" @set-label="updateScopes('site', 'label', $event)"
@ -76,7 +78,7 @@
/> />
</template> </template>
<div>Video settings (page)</div> <div class="tab-title">Video settings (page)</div>
<ScopeSettings :scopeOptions="pageScopeOptions" <ScopeSettings :scopeOptions="pageScopeOptions"
@show="updateScopes('page', 'show', $event)" @show="updateScopes('page', 'show', $event)"
@set-label="updateScopes('page', 'label', $event)" @set-label="updateScopes('page', 'label', $event)"
@ -246,6 +248,11 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../res/css/colors';
.cae-margin {
margin-top: 20px;
}
.full-screen { .full-screen {
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
@ -276,10 +283,17 @@ export default {
.form-label { .form-label {
width: 16rem; width: 16rem;
text-align: right; text-align: left;
// text-align: right;
vertical-align: baseline; vertical-align: baseline;
} }
.tab-title {
font-size: 1.2em;
color: lighten($primary-color, 25%);
padding-top: 20px;
padding-bottom: 10px;
}
.hint { .hint {
opacity: 50% !important; opacity: 50% !important;
@ -303,5 +317,15 @@ export default {
height: 1.7em; height: 1.7em;
} }
.command-chain-border {
border: 1px dotted lighten($selected-color, 10%);
padding: 10px;
padding-top: 20px;
padding-bottom: 20px;
}
.section-pad {
padding-top: 35px;
}
</style> </style>

2
src/options/controls-settings/ControlsSettings.vue
View File

@ -37,8 +37,6 @@
> >
</ActionAlt> </ActionAlt>
</template> </template>
<div class="action-item-category-header"> <div class="action-item-category-header">
Stretch actions Stretch actions
</div> </div>

18
src/options/controls-settings/command-builder/CommandAddEdit.vue
View File

@ -66,7 +66,7 @@
</div> </div>
<div class="window-footer"> <div class="flex flex-row flex-end close-save-button-margin">
<div class="button" <div class="button"
@click="$emit('close-popup')" @click="$emit('close-popup')"
> >
@ -140,4 +140,18 @@ export default {
} }
} }
} }
</script> </script>
<style>
.form-label {
width: 15rem;
text-align: left;
/* text-align: right; */
vertical-align: baseline;
}
.close-save-button-margin {
padding-top: 25px;
}
</style>

6
src/popup/panels/DefaultSettingsPanel.vue
View File

@ -172,10 +172,4 @@ export default {
</script> </script>
<style> <style>
.button-selected {
background-color: "#fff"
}
.setting-selected {
background-color: #ffa;
}
</style> </style>

2
src/popup/panels/VideoPanel.vue
View File

@ -16,7 +16,7 @@
</div> </div>
<div v-if="true" class="w100"> <div v-if="true" class="w100">
<div class="label">Zooming and panning</div> <div class="label experimental">Zooming and panning</div>
<div class="row w100" <div class="row w100"
> >
<!-- <!--

1
src/popup/popup.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Title</title> <title>Title</title>
<link rel="stylesheet" href="popup.css"> <link rel="stylesheet" href="popup.css">
<% if (NODE_ENV === 'development') { %> <% if (NODE_ENV === 'development') { %>
<!-- Load some resources only in development environment --> <!-- Load some resources only in development environment -->
<% } %> <% } %>

6
src/res/css/colors.scss
View File

@ -9,6 +9,8 @@ $input-border: #4e3527;
$page-background: #101010; $page-background: #101010;
$background-primary: #101010; $background-primary: #101010;
$background-selected: #944918; $selected-color: #f5cbaf;
$background-selected: #412d20;
$info-color: #e9bea3;
$info-color: #bda9f3;

95
src/res/css/common.scss
View File

@ -1,6 +1,8 @@
@import "colors.scss"; @import "colors.scss";
@import "/res/css/font/overpass.css"; @import "/res/css/font/overpass.css";
@import "/res/css/font/overpass-mono.css"; @import "/res/css/font/overpass-mono.css";
@import "/res/css/flex.css";
// @import "form.scss";
body { body {
background-color: $background-primary; background-color: $background-primary;
@ -83,6 +85,13 @@ body {
padding-bottom: 0.69rem; padding-bottom: 0.69rem;
} }
a, a:visited {
color: $primary-color;
}
a:hover {
color: lighten($primary-color, 10%);
}
/* INPUT FORMATTING */ /* INPUT FORMATTING */
input[type="number"], input[type="text"], input { input[type="number"], input[type="text"], input {
@ -164,13 +173,45 @@ small {
.invalid-input {
border: 1px solid #720 !important;
background-color: #410 !important;
}
/* COLORS */ .button {
/*display: inline-block;*/
// padding-top: 8px;
// padding-bottom: 3px;
//padding-left: 5px;
//padding-right: 5px;
border: 1px solid rgb(39, 39, 39);
margin-top: 3px;
margin-bottom: 3px;
color: $text-dim;
text-align: center;
}
.selected { .selected, .setting-selected {
color: #ffddaa !important; color: $selected-color;
background-color: #433221 !important; background-color: $background-selected;
}
.selected-tab {
color: $selected-color;
}
.setting-selected {
border: 1px solid shade($selected-color, 25%);
}
.button:hover {
color: lighten($selected-color, 10%);
background-color: lighten($background-selected, 10%);
}
.button {
cursor: pointer !important;
} }
.disabled { .disabled {
@ -207,31 +248,6 @@ small {
} }
/* BUTTONS AND INPUTS */
.invalid-input {
border: 1px solid #720 !important;
background-color: #410 !important;
}
.button {
/*display: inline-block;*/
// padding-top: 8px;
// padding-bottom: 3px;
//padding-left: 5px;
//padding-right: 5px;
border: 1px solid #444;
margin-top: 3px;
margin-bottom: 3px;
color: #dbb;
text-align: center;
}
.button:hover {
color: #fff;
background-color: $primary-color;
}
/** misc **/ /** misc **/
@ -266,13 +282,28 @@ small {
} }
.experimental::after { .experimental::after {
content: "Experimental"; // content: "Experimental";
background-color: #ffde12; content: "Ⓔ";
color: #1f1f1f; color: #ffde12;
// background-color: #1f1f1f;
display: inline-block; display: inline-block;
font-size: .75em; font-size: .75em;
font-variant: small-caps; font-variant: small-caps;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
margin-left: 10px; margin-left: 10px;
margin-top: -4px;
}
.experimental:hover::after {
content: "Ⓔ Experimental";
// content: "";
color: #ffde12;
// background-color: #1f1f1f;
display: inline-block;
font-size: .75em;
font-variant: small-caps;
padding-left: 5px;
padding-right: 5px;
margin-left: 10px;
margin-top: -4px;
} }