New: Project Aphrodite

frontend/src/Styles/Mixins/cover.css

@@ -0,0 +1,8 @@
+@define-mixin cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+}

frontend/src/Styles/Mixins/linkOverlay.css

@@ -0,0 +1,11 @@
+@define-mixin linkOverlay {
+  @add-mixin cover;
+
+  pointer-events: none;
+  user-select: none;
+
+  a,
+  button {
+    pointer-events: all;
+  }
+}

frontend/src/Styles/Mixins/scroller.css

@@ -0,0 +1,26 @@
+@define-mixin scrollbar {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+}
+
+@define-mixin scrollbarTrack {
+  &&::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+@define-mixin scrollbarThumb {
+  &::-webkit-scrollbar-thumb {
+    min-height: 50px;
+    border: 1px solid transparent;
+    border-radius: 5px;
+    background-color: $scrollbarBackgroundColor;
+    background-clip: padding-box;
+
+    &:hover {
+      background-color: $scrollbarHoverBackgroundColor;
+    }
+  }
+}

frontend/src/Styles/Mixins/truncate.css

@@ -0,0 +1,18 @@
+/**
+ * From: https://github.com/suitcss/utils-text/blob/master/lib/text.css
+ *
+ * Text truncation
+ *
+ * Prevent text from wrapping onto multiple lines, and truncate with an
+ * ellipsis.
+ *
+ * 1. Ensure that the node has a maximum width after which truncation can
+ *    occur.
+ */
+
+@define-mixin truncate {
+  overflow: hidden !important;
+  max-width: 100%; /* 1 */
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}

frontend/src/Styles/Variables/animations.js

@@ -0,0 +1,8 @@
+// Use CommonJS since this is consumed by PostCSS via webpack (node.js).
+
+module.exports = {
+  // Durations
+  defaultSpeed: '0.2s',
+  slowSpeed: '0.6s',
+  fastSpeed: '0.1s'
+};

frontend/src/Styles/Variables/colors.js

@@ -0,0 +1,180 @@
+const radarrYellow = '#ffc230';
+
+module.exports = {
+  defaultColor: '#333',
+  disabledColor: '#999',
+  dimColor: '#555',
+  black: '#000',
+  white: '#fff',
+  offWhite: '#f5f7fa',
+  primaryColor: '#5d9cec',
+  selectedColor: '#f9be03',
+  successColor: '#27c24c',
+  dangerColor: '#f05050',
+  warningColor: '#ffa500',
+  infoColor: '#5d9cec',
+  purple: '#7a43b6',
+  pink: '#ff69b4',
+  radarrYellow,
+  helpTextColor: '#909293',
+  darkGray: '#888',
+  gray: '#adadad',
+  lightGray: '#ddd',
+  disabledInputColor: '#808080',
+
+  // Theme Colors
+
+  themeBlue: radarrYellow,
+  themeRed: '#c4273c',
+  themeDarkColor: '#595959',
+  themeLightColor: '#707070',
+
+  torrentColor: '#00853d',
+  usenetColor: '#17b1d9',
+
+  // Links
+  defaultLinkHoverColor: '#fff',
+  linkColor: '#5d9cec',
+  linkHoverColor: '#1b72e2',
+
+  // Sidebar
+
+  sidebarColor: '#e1e2e3',
+  sidebarBackgroundColor: '#595959',
+  sidebarActiveBackgroundColor: '#333333',
+
+  // Toolbar
+  toolbarColor: '#e1e2e3',
+  toolbarBackgroundColor: '#707070',
+  toolbarMenuItemBackgroundColor: '#606060',
+  toolbarMenuItemHoverBackgroundColor: '#515151',
+  toolbarLabelColor: '#e1e2e3',
+
+  // Accents
+  borderColor: '#e5e5e5',
+  inputBorderColor: '#dde6e9',
+  inputBoxShadowColor: 'rgba(0, 0, 0, 0.075)',
+  inputFocusBorderColor: '#66afe9',
+  inputFocusBoxShadowColor: 'rgba(102, 175, 233, 0.6)',
+  inputErrorBorderColor: '#f05050',
+  inputErrorBoxShadowColor: 'rgba(240, 80, 80, 0.6)',
+  inputWarningBorderColor: '#ffa500',
+  inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
+  colorImpairedGradient: '#fcfcfc',
+
+  //
+  // Buttons
+
+  defaultBackgroundColor: '#fff',
+  defaultBorderColor: '#eaeaea',
+  defaultHoverBackgroundColor: '#f5f5f5',
+  defaultHoverBorderColor: '#d6d6d6;',
+
+  primaryBackgroundColor: '#5d9cec',
+  primaryBorderColor: '#5899eb',
+  primaryHoverBackgroundColor: '#4b91ea',
+  primaryHoverBorderColor: '#3483e7;',
+
+  successBackgroundColor: '#27c24c',
+  successBorderColor: '#26be4a',
+  successHoverBackgroundColor: '#24b145',
+  successHoverBorderColor: '#1f9c3d;',
+
+  warningBackgroundColor: '#ff902b',
+  warningBorderColor: '#ff8d26',
+  warningHoverBackgroundColor: '#ff8517',
+  warningHoverBorderColor: '#fc7800;',
+
+  dangerBackgroundColor: '#f05050',
+  dangerBorderColor: '#f04b4b',
+  dangerHoverBackgroundColor: '#ee3d3d',
+  dangerHoverBorderColor: '#ec2626;',
+
+  iconButtonDisabledColor: '#7a7a7a',
+  iconButtonHoverColor: '#666',
+  iconButtonHoverLightColor: '#ccc',
+
+  //
+  // Modal
+
+  modalBackdropBackgroundColor: 'rgba(0, 0, 0, 0.6)',
+  modalBackgroundColor: '#fff',
+  modalCloseButtonHoverColor: '#888',
+
+  //
+  // Menu
+  menuItemColor: '#e1e2e3',
+  menuItemHoverColor: '#fbfcfc',
+  menuItemHoverBackgroundColor: '#f5f7fa',
+
+  //
+  // Toolbar
+
+  toobarButtonHoverColor: '#ffc230',
+  toobarButtonSelectedColor: '#ffc230',
+
+  //
+  // Scroller
+
+  scrollbarBackgroundColor: '#9ea4b9',
+  scrollbarHoverBackgroundColor: '#656d8c',
+
+  //
+  // Card
+
+  cardShadowColor: '#e1e1e1',
+  cardAlternateBackgroundColor: '#f5f5f5',
+
+  //
+  // Alert
+
+  alertDangerBorderColor: '#ebccd1',
+  alertDangerBackgroundColor: '#f2dede',
+  alertDangerColor: '#a94442',
+
+  alertInfoBorderColor: '#bce8f1',
+  alertInfoBackgroundColor: '#d9edf7',
+  alertInfoColor: '#31708f',
+
+  alertSuccessBorderColor: '#d6e9c6',
+  alertSuccessBackgroundColor: '#dff0d8',
+  alertSuccessColor: '#3c763d',
+
+  alertWarningBorderColor: '#faebcc',
+  alertWarningBackgroundColor: '#fcf8e3',
+  alertWarningColor: '#8a6d3b',
+
+  //
+  // Slider
+
+  sliderAccentColor: '#5d9cec',
+
+  //
+  // Form
+
+  advancedFormLabelColor: '#ff902b',
+  disabledCheckInputColor: '#ddd',
+
+  //
+  // Popover
+
+  popoverTitleBackgroundColor: '#f7f7f7',
+  popoverTitleBorderColor: '#ebebeb',
+  popoverShadowColor: 'rgba(0, 0, 0, 0.2)',
+  popoverArrowBorderColor: 'rgba(0, 0, 0, 0.25)',
+
+  popoverTitleBackgroundInverseColor: '#3a3f51',
+  popoverTitleBorderInverseColor: '#4f566f',
+  popoverShadowInverseColor: 'rgba(0, 0, 0, 0.2)',
+  popoverArrowBorderInverseColor: 'rgba(58, 63, 81, 0.75)',
+
+  //
+  // Calendar
+
+  calendarTodayBackgroundColor: '#ddd',
+
+  //
+  // Table
+
+  tableRowHoverBackgroundColor: '#fafbfc'
+};

frontend/src/Styles/Variables/dimensions.js

@@ -0,0 +1,53 @@
+module.exports = {
+  // Page
+  pageContentBodyPadding: '20px',
+  pageContentBodyPaddingSmallScreen: '10px',
+
+  // Header
+  headerHeight: '60px',
+
+  // Sidebar
+  sidebarWidth: '210px',
+
+  // Toolbar
+  toolbarHeight: '60px',
+  toolbarButtonWidth: '60px',
+  toolbarSeparatorMargin: '20px',
+
+  // Break Points
+  breakpointExtraSmall: '480px',
+  breakpointSmall: '768px',
+  breakpointMedium: '992px',
+  breakpointLarge: '1200px',
+  breakpointExtraLarge: '1450px',
+
+  // Form
+  formGroupExtraSmallWidth: '550px',
+  formGroupSmallWidth: '650px',
+  formGroupMediumWidth: '800px',
+  formGroupLargeWidth: '1200px',
+  formLabelSmallWidth: '150px',
+  formLabelLargeWidth: '250px',
+  formLabelRightMarginWidth: '20px',
+
+  // Drag
+  dragHandleWidth: '40px',
+  qualityProfileItemHeight: '30px',
+  qualityProfileItemDragSourcePadding: '4px',
+
+  // Progress Bar
+  progressBarSmallHeight: '5px',
+  progressBarMediumHeight: '15px',
+  progressBarLargeHeight: '20px',
+
+  // Jump Bar
+  jumpBarItemHeight: '25px',
+
+  // Modal
+  modalBodyPadding: '30px',
+
+  // Series
+  movieIndexColumnPadding: '20px',
+  movieIndexColumnPaddingSmallScreen: '10px',
+  movieIndexOverviewInfoRowHeight: '21px'
+};

frontend/src/Styles/Variables/fonts.js

@@ -0,0 +1,15 @@
+module.exports = {
+  // Families
+  defaultFontFamily: 'Roboto, "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif',
+  monoSpaceFontFamily: '"Ubuntu Mono", Menlo, Monaco, Consolas, "Courier New", monospace;',
+  passwordFamily: 'text-security-disc',
+
+  // Sizes
+  extraSmallFontSize: '11px',
+  smallFontSize: '12px',
+  defaultFontSize: '14px',
+  intermediateFontSize: '15px',
+  largeFontSize: '16px',
+
+  lineHeight: '1.528571429'
+};

frontend/src/Styles/globals.css

@@ -0,0 +1,7 @@
+/* stylelint-disable */
+
+@import '~normalize.css/normalize.css';
+@import 'scaffolding.css';
+@import '../Content/Fonts/fonts.css';
+
+/* stylelint-enable */

frontend/src/Styles/scaffolding.css

@@ -0,0 +1,54 @@
+/* stylelint-disable */
+* {
+  box-sizing: border-box;
+}
+
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+*:focus {
+  outline: none;
+}
+/* stylelint-enable */
+
+html,
+body {
+  color: #515253;
+  font-family: 'Roboto', 'open sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+}
+
+body {
+  font-size: 14px;
+  line-height: 1.528571429; /* 20/14 */
+}
+
+/* Override normalize */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: 1.528571429; /* 20/14 */
+}
+
+/* Better defaults for unordererd lists */
+
+ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+@media only screen and (min-device-width: 375px) and (max-device-width: 812px) {
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-size: 16px;
+  }
+}