ddd-studio-styles.css

/*
* @license
* ddd / module-connexion
* Copyright (c) 2022 Abraham Ukachi
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
* 
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE
* 
* @name: DDD Studio 
* @type: Stylesheets 
* @author: Abraham Ukachi <abraham.ukachi@laplateforme.io>
*/

/* Importing some VIP styles */
@import '../theme/color.css'; /* <- color from theme */

/* Importing some animations */
@import '../animations/slide-from-up-animation.css';
@import '../animations/slide-from-down-animation.css';


/* ====  DDD Studio STYLES === */


/* ROOT / HTML */
:root {
  /* --slide-animation-timing-function: cubic-bezier(0.56, 0.62, 0.52, 1.37); */
}


/* Default Theme */
.theme {}

/* Dark Theme */
.theme.dark {}


/* App Bar */
#appBar {
  --app-bar-color-background: var(--primary-container-color);
  --app-bar-color-on-background: var(--on-primary-container-color);
}


/* Content */
#content {
  /* <- HACK: hides top border line */
  /* top: -1px; */
}

/* Container of Content */
#content > .container {
  padding: 0;
  height: 100%;
}

/* Preview Wrapper */
.preview-wrapper {
  background: var(--primary-container-color);
  flex: 3;
}


/* Buttons Wrapper */
.buttons-wrapper {
  flex: 1;
  padding: 10%;
}

/* Start Button Wrapper */
.start-button-wrapper {
  margin-bottom: -50px;
}

/* Label in Start Button Wrapper */
.start-button-wrapper span.label {
  font-size: 14px;
  font-weight: bold;
  opacity: var(--opacity-text-active);
}

/* Wave - SVG */
svg#wave {
  pointer-events: none;
  fill: var(--wave-color, var(--background-color));
  transform: scale(1.02); /* HACK: Removes annoying bottom border line */
}

/* Make From Pic Button */
#makeFromPicButton { 
  position: relative;
  font-size: 20px;
  padding: 8px 16px;
  margin: 0;
  width: 100%;
  max-width: 300px;
  border-radius: 50px;
  font-weight: bold;
}

/* Icon of Make From Pic Button */
#makeFromPicButton .icon {
  margin: 0 8px;
}

/* HACK: Should be in styles.css */
#makeFromPicButton:hover {
  --material-icon-color: var(--primary-color);
}

/* === Preview Styles === */

/* Preview */
#preview {
  width: 100%;
  height: auto;
  flex: 1;
}

/* === End of Preview Styles === */


/* Start Button */
button#startButton {
  --button-width: 80px;
  --button-height: 80px;
  --button-padding: 8px;
  --button-background-color: var(--background-color);

  --material-icon-color: var(--primary-color);
  --material-icon-size: 32px;

  border-radius: 50%;
  margin: 8px;
}

/* Hovered Start Button */
button#startButton:hover {
  --material-icon-color: var(--on-primary-color);
}

/* Focused Start Button */
button#startButton:focus-visible {
  --material-icon-color: var(--on-tertiary-color);
}

/* 
 * --> Wide - Layout <--
 * Phone: ? (Responsive)
 * Dimension: 460px+ (width)
 *
 * ***************************************
 * when the viewport is bigger than 460px,
 * layout changes to wide-layout.
 * ***************************************
 */
@media (min-width: 460px) {

  /* Make From Pic Button */
  #makeFromPicButton { 
    padding: 12px 24px;
  }

  /* Icon of Make From Pic Button */
  #makeFromPicButton .icon {
    margin: 0 12px;
  }

  /* Label in Start Button Wrapper */
  .start-button-wrapper span.label {
    font-size: 16px;
  }

}



/* 
 * --> Tablet - Device <--
 * Phone: ? (Responsive)
 * Width: 768px <-to-> 1024px
 */
@media (min-width: 768px) and (max-width: 1024px) {}


/* 
 * --> Laptop - Device <--
 * Phone: ? (Responsive)
 * Width: 1024px <-to-> 2560px
 */
@media (min-width: 1024px) and (max-width: 2560px) {
  /* Start Button Wrapper */
  .start-button-wrapper {
    margin-bottom: -80px;
  }
}


/* ====  END of DDD Studio STYLES === */