Feat: Second Batch of Fixes / Changes (#14)

* fix: subtitles section label now has rounded corners

* fix: select font family is now applied properly

There has to be a better solution than using !important, but I can't figure out what's overriding it without !important

* fix: added right side padding to the play button on the media details page

* chore: tweaked centering of play button

* fix: added jellyseer color gradient to info banner

The infoBanner class is used on the file path selection modal

* fix: changed the size of the slider tooltips to not be comically large

* chore: added text-shadow I forgot

* fix: checkbox icon no longer overlays borders

* fix: adjusted checkbox background and borders

* fix: networking section outlines now match the rest of the theme

* fix: added appearance of padding to section title buttons that are left-aligned

* fix: section title buttons now match Jellyseer

* feat: added styling for activity table

* feat: added styles for mui modals

* chore: first batch of pr adjustments

* fix: scoped checkboxes to not include library multi select

* chore: addressed playBtn feedback

* chore: removed long font def from select options

* chore: fixed infoBanner

* chore: switched margin-top to place-content

Theme/ElegantFin-theme-nightly.css

@@ -28,6 +28,7 @@
     --smallRadius: .5em;
     --smallerRadius: .375em;
     --borderWidth: 0.075em;
+    --tableBodyColor: rgb(31 41 55 / 1);
 }
 
 html {
@@ -472,7 +473,8 @@ html {
 
 .btnPlay>.detailButton-content::after {
     padding-left: .25em;
-    margin-top: .1em;
+    padding-right: 1em;
+    place-content: center;
     content: "Play";
 }
 
@@ -1099,3 +1101,68 @@ div[data-role=controlgroup] a.ui-btn-active {
     border-color: var(--dimTextColor);
     border-style: inset;
 }
+
+.subtitleappearance-preview {
+    border-radius: var(--smallRadius);
+}
+
+.infoBanner {
+    display: flex;
+    place-content: center;
+    background-color: var(--headerColor) !important;
+    border-radius: var(--largeRadius) !important;
+    border: solid var(--borderColor) var(--borderWidth) !important;
+}
+
+.sliderBubbleText {
+    font-size: 1.5em;
+}
+
+.checkboxOutline:not(.multiSelectCheckboxOutline) .checkboxIcon {
+    font-size: 1em;
+}
+
+.checkboxOutline:not(.multiSelectCheckboxOutline) {
+    border-width: var(--borderWidth);
+}
+
+.emby-checkbox:checked + span + .checkboxOutline:not(.multiSelectCheckboxOutline) {
+    box-shadow: none;
+    background: var(--selectorBackgroundColor);
+    border: var(--lighterBorderColor) solid var(--borderWidth);
+}
+
+fieldset {
+    border-radius: var(--smallRadius);
+    border-color: var(--borderColor) solid var(--borderWidth);
+}
+
+.sectionTitleTextButton > .material-icons::before {
+    font-size: 1em;
+}
+
+.sectionTitleTextButton:hover {
+    background: transparent !important;
+    color: white !important;
+}
+
+#serverActivityPage .MuiPaper-elevation2 {
+    border: solid var(--borderColor) var(--borderWidth) !important;
+    box-shadow: unset !important;
+    background-color: var(--tableBodyColor);
+}
+
+#serverActivityPage .MuiPaper-elevation2 > .MuiBox-root,
+#serverActivityPage .MuiTableRow-root.MuiTableRow-head,
+#serverActivityPage .MuiTableRow-root {
+    background-color: var(--tableBodyColor) !important;
+}
+
+.MuiList-root.MuiMenu-list {
+    background-color: var(--drawerColor);
+}
+
+ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
+    /* ! Don't change these units. They are rem because that is standard for MUI */
+    gap: 0.5rem;
+}