css-switch-gallery 1.0.0

package/css/01-style.css

@@ -0,0 +1,728 @@
+/*RESET*/
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+/*BY DEFAULT*/
+html, body {
+    height: 100%;
+}
+body {
+    font-family: 'system-ui', sans-serif;
+    text-wrap: pretty;
+    line-height: 1.5;
+    letter-spacing: 0.25px;
+
+    margin: 20px auto;
+    padding: 0 20px;
+    max-width: 800px;
+}
+
+img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+}
+
+/*VARIABLES*/
+:root {
+    --gap: 1rem;
+
+    --font-size-1: 2.25rem;
+    --font-size-2: 2rem;
+    --font-size-3: 1.75rem;
+    --font-size-4: 1.5rem;
+    --font-size-5: 1.25rem;
+    --font-size-6: 1rem;
+
+    --font-weight-mx: 900;
+    --font-weight-md: 600;
+    --font-weight-sm: 500;
+
+    --text-color-base: #404756;
+    --text-color-secondary: #23272f;
+    --text-color-contrast: #ffffff;
+
+    --background-color: #ffffff;
+    --background-color-secondary: #eff0f3;
+
+    --palette-primary: #04354d;
+    --palette-secondary: #00c3ff;
+    --palette-tertiary: #b6ecff;
+
+    --radius: 0.5rem;
+}
+
+/*DARK MODE*/
+.dark {
+    --text-color-base: #c1c2cf;
+    --text-color-secondary: #ededf1;
+    --text-color-contrast: #0e0e11;
+
+    --background-color: #0e0e11;
+    --background-color-secondary: #1b1b1b;
+
+    --palette-primary: #b6ecff;
+    --palette-secondary: #00c3ff;
+    --palette-tertiary: #04354d;
+}
+
+/*TEMPLATE*/
+
+/*FLEX CLASSES*/
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.nowrap {
+    flex-wrap: nowrap;
+}
+.flex-row-reverse {
+    display: flex;
+    flex-direction: row-reverse;
+}
+.flex-column {
+    display: flex;
+    flex-direction: column;
+}
+.flex-column-reverse {
+    display: flex;
+    flex-direction: column-reverse;
+}
+.justify-center {
+    justify-content: center;
+}
+.justify-between {
+    justify-content: space-between;
+}
+.items-center {
+    align-items: center;
+}
+.items-start {
+    align-items: start;
+}
+.items-end {
+    align-items: end;
+}
+.gap { 
+    gap: var(--gap);
+}
+
+html {
+    scroll-behavior: smooth;
+
+    scrollbar-color: var(--text-color-base) var(--background-color);
+}
+
+body {
+    font-size: var(--font-size-5);
+
+    color: var(--text-color-base);
+    background-color: var(--background-color);
+}
+
+/*TEXT ELEMENTS*/
+.text-sm {
+    font-size: var(--font-size-6);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin-block: 0.5rem;
+
+    color: var(--text-color-secondary);
+}
+
+h1 {
+    font-size: var(--font-size-1);
+}
+h2 {
+    font-size: var(--font-size-2);
+}
+h3 {
+    font-size: var(--font-size-3);
+}
+h4 {
+    font-size: var(--font-size-4);
+}
+h5 {
+    font-size: var(--font-size-5);
+}
+h6 {
+    font-size: var(--font-size-6);
+}
+
+p {
+    margin-block: 0.75rem;
+
+    color: var(--text-color-base);
+}
+
+span {
+    font-weight: var(--font-weight-md);
+
+    color: var(--palette-secondary);
+}
+
+strong {
+    font-weight: var(--font-weight-md);
+
+    color: var(--text-color-secondary);
+}
+
+q, i {
+    font-style: italic;
+}
+
+i {
+    font-weight: var(--font-weight-sm);
+}
+
+time {
+    font-size: var(--font-size-6);
+    font-weight: var(--font-weight-sm);
+
+    color: var(--text-color-base);
+}
+
+b {
+    font-weight: var(--font-weight-mx);
+}
+
+mark {
+    padding: 0 0.25rem;
+
+    border-radius: var(--radius);
+
+    color: var(--palette-primary);
+    background-color: var(--palette-tertiary);
+}
+
+u {
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
+
+    line-height: 1.5;
+}
+
+a {
+    text-underline-offset: 3px;
+    text-decoration: none;
+
+    max-width: fit-content;
+
+    color: var(--palette-secondary);
+}
+a:hover {
+    color: var(--palette-primary);
+}
+
+ul {
+    list-style: disc;
+    list-style-position: outside;
+
+    margin-block: 1rem;
+}
+ol {
+    list-style: decimal;
+    list-style-position: outside;
+
+    margin-block: 1rem;
+}
+li {
+    margin-inline: 1.25rem;
+
+    font-size: var(--font-size-5);
+
+    color: var(--text-color-base);
+}
+li::marker {
+    color: var(--palette-secondary);
+}
+
+blockquote {
+    font-style: italic;
+
+    margin-inline: 0;
+    padding-inline: 1rem;
+
+    font-size: var(--font-size-6);
+    border-left: 4px solid var(--palette-secondary);
+
+    color: var(--palette-primary);
+}
+
+pre {
+    margin: 0.25rem;
+}
+pre, code {
+    overflow-x: auto;
+
+    padding: 0.25rem;
+
+    font-size: var(--font-size-6);
+    border-radius: var(--radius);
+
+    color: var(--palette-secondary);
+    background-color: var(--background-color-secondary);
+}
+pre code {
+    padding: 0;
+
+    background-color: transparent;
+}
+dt {
+    font-weight: var(--font-weight-md);
+
+    color: var(--text-color-secondary);
+}
+dd {
+    margin-block: 0.25rem;
+
+    color: var(--text-color-base);
+}
+
+figure {
+    display: flex;
+    flex-flow: column;
+    
+    margin: auto;
+    padding: 0.5rem;
+
+    border: 1px solid var(--text-color-base);
+    border-radius: var(--radius);
+}
+figcaption {
+    font: italic smaller sans-serif;
+    text-align: center;
+
+    border-bottom-left-radius: var(--radius);
+    border-bottom-right-radius: var(--radius);
+
+    color: var(--palette-primary);
+    background-color: var(--palette-tertiary);
+}
+figure img {
+    border-top-right-radius: var(--radius);
+    border-top-left-radius: var(--radius);
+}
+
+hr {
+    opacity: 0.2;
+
+    margin-block: 1.5rem;
+    height: 1px;
+
+    border: none;
+
+    background-color: var(--text-color-base);
+}
+
+/*MULTIMEDIA*/
+.img-sm {
+    max-width: 220px;
+    max-height: 150px;
+}
+.img-md {
+    max-width: 440px;
+    max-height: 300px;
+}
+.img-lg {
+    max-width: 880px;
+    max-height: 600px;
+}
+@media (max-width: 460px) {
+    .img-sm {
+        max-width: 110px;
+        max-height: 75px;
+    }
+    .img-md {
+        max-width: 220px;
+        max-height: 150px;
+    }
+    .img-lg {
+        max-width: 440px;
+        max-height: 300px;
+    }
+}
+.img-radius {
+    border-radius: var(--radius);
+}
+
+audio, video {
+    width: auto;
+
+    border-radius: var(--radius);
+}
+
+iframe {
+    width: 100%;
+
+    border: none;
+    border-radius: var(--radius);
+}
+
+/*TABLE ELEMENTS*/
+table {
+    padding-block: 1rem;
+    width: 100%;
+    
+    font-size: var(--font-size-6);
+
+    color: var(--text-color-secondary);
+}
+
+td, th {
+    text-align: start;
+
+    padding-inline: 1rem;
+    padding-block: 0.5rem;
+    
+    border-radius: var(--radius);
+}
+
+@media (max-width: 460px) {
+    td, th {
+        padding-inline: 0.5rem;
+        padding-block: 0.25rem;
+    }
+}
+
+th[scope = "col"] {
+    color: var(--palette-primary);
+    background-color: var(--palette-tertiary);
+}
+
+th[scope = "row"] {
+    color: var(--palette-primary);
+    background-color: transparent;
+}
+
+thead > th {
+    color: var(--palette-primary);
+    background-color: var(--palette-tertiary);
+}
+thead > td {
+    color: var(--palette-primary);
+    background-color: var(--palette-tertiary);
+}
+
+tbody tr:nth-child(odd) {
+    background-color: var(--background-color-secondary);
+}
+
+/*FORM ELEMENTS*/
+fieldset {
+    padding: 1rem;
+
+    border: 1px solid var(--text-color-base);
+    border-radius: var(--radius);
+}
+legend {
+    padding: 0 0.5rem;
+
+    font-weight: var(--font-weight-md);
+
+    color: var(--text-color-secondary);
+}
+
+label {
+    margin-left: 0.25rem;
+    margin-bottom: 0.5rem;
+
+    font-size: var(--font-size-6);
+
+    color: var(--text-color-secondary);
+}
+textarea {
+    height: auto;
+    min-height: 5.5rem;
+}
+input, textarea {
+    font-family: inherit;
+
+    margin-inline-end: 0.75rem;
+    margin-block-end: 0.75rem;
+    padding: 0.5rem;
+
+    font-size: var(--font-size-6);
+
+    border-style: none;
+    border-radius: var(--radius);
+    
+    color: var(--text-color-base);
+    background-color: var(--background-color-secondary);
+}
+input:focus, textarea:focus {
+    outline: 1px solid var(--palette-secondary);
+}
+input:disabled {
+    opacity: 0.7;
+}
+input:disabled:hover {
+    cursor: not-allowed;
+}
+
+input[type = "submit"],
+input[type = "reset"] {
+    -webkit-appearance: none;
+    appearance: none;
+
+    outline: none;
+
+    cursor: pointer;
+
+    margin: 0.25rem;
+    padding-block: 0.5rem;
+    padding-inline: 1rem;
+
+    width: fit-content;
+}
+input[type = "submit"] {
+    font-weight: var(--font-weight-md);
+
+    color: var(--palette-primary);
+    background-color: var(--palette-tertiary);
+}
+input[type = "reset"] {
+    background-color: transparent;
+    
+    color: var(--text-color-secondary);
+}
+
+input[type = "color"] {
+    cursor: pointer;
+
+    width: 2.5rem;
+    height: 2.5rem;
+}
+input[type = "color"]::-webkit-color-swatch {
+    border: none;
+}
+input[type = "color"]::-moz-color-swatch {
+    border: none;
+}
+
+input[type = "file"] {
+    padding: 0.25rem;
+    
+    width: 100%;
+
+    border: none;
+}
+input[type = "file"]::file-selector-button {
+    cursor: pointer;
+
+    padding-block: 0.5rem;
+
+    border-style: none;
+    border-radius: var(--radius);
+    
+    color: var(--text-color-contrast);
+    background-color: var(--text-color-secondary);
+}
+input[type = "file"]::-moz-file-upload-button {
+    cursor: pointer;
+
+    padding-block: 0.5rem;
+
+    border-style: none;
+    border-radius: var(--radius);
+    
+    color: var(--text-color-contrast);
+    background-color: var(--text-color-secondary);
+}
+
+input[type = "range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    
+    height: 0.5rem;
+}
+input[type = "range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+
+    cursor: pointer;
+    
+    width: 20px;
+    height: 20px;
+    
+    border-radius: 50%;
+
+    background: var(--palette-secondary);
+}
+input[type = "range"]::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    
+    border-radius: 50%;
+
+    background: var(--palette-secondary);
+}
+input[type = "range"]::-moz-range-track {
+    height: 0.5rem;
+}
+
+input[type = "checkbox"], input[type = "radio"] {
+    cursor: pointer;
+
+    accent-color: var(--palette-secondary);
+
+    width: 1rem;
+    height: 1rem;
+
+    border: none;
+}
+
+/*INTERACTIVE ELEMENTS*/
+meter {
+    -webkit-appearance: none;
+    appearance: none;
+}
+meter::-webkit-meter-bar {
+    border-radius: 3px;
+}
+meter::-moz-meter-bar {
+    border-radius: 3px;
+}
+
+progress {
+    -webkit-appearance: none;
+    appearance: none;
+    
+    border-radius: 10px;
+}
+progress::-webkit-progress-bar {
+    border-radius: 10px;
+
+    background-color: var(--background-color-secondary);
+}
+progress::-webkit-progress-value {
+    border-radius: 10px;
+
+    background-color: var(--palette-secondary);
+}
+progress::-moz-progress-bar {
+    border-radius: 10px;
+
+    background-color: var(--palette-secondary);
+}
+
+select {
+    cursor: pointer;
+    
+    font-family: inherit;
+
+    padding: 0.5rem;
+
+    font-size: var(--font-size-6);
+
+    border: none;
+    border-radius: var(--radius);
+    
+    color: var(--text-color-base);
+    background-color: var(--background-color-secondary);
+}
+select:focus {
+    outline: 1px solid var(--palette-secondary);
+}
+optgroup {
+    font-weight: var(--font-weight-md);
+}
+
+details {
+    padding: 0.25rem 0.75rem;
+
+    border: 1px solid var(--background-color-secondary);
+    border-radius: var(--radius);
+
+    background-color: transparent;
+    color: var(--text-color-base);
+}
+
+summary {
+    cursor: pointer;
+    font-family: inherit;
+
+    font-weight: var(--font-weight-md);
+    color: var(--text-color-secondary);
+}
+
+dialog {
+    padding-block: 1rem;
+
+    border: 1px solid var(--text-color-base);
+    border-radius: var(--radius);
+
+    color: var(--text-color-base);
+    background-color: var(--background-color);
+}
+
+/*BUTTON CLASSES*/
+button {
+    cursor: pointer;
+
+    font-family: inherit;
+    text-wrap: nowrap;
+    letter-spacing: 1px;
+
+    margin: 0.25rem;
+    padding-block: 0.5rem;
+    padding-inline: 1rem;
+
+    font-weight: var(--font-weight-sm);
+    font-size: var(--font-size-6);
+
+    border-style: none;
+    border-radius: var(--radius);
+
+    color: var(--text-color-contrast);
+    background-color: var(--text-color-secondary);
+}
+.button-primary {
+    color: var(--palette-primary);
+    background-color: var(--palette-tertiary);
+}
+.button-secondary {
+    color: var(--text-color-base);
+    background-color: var(--background-color-secondary);
+}
+.button-tertiary {
+    background-color: transparent;
+
+    color: var(--text-color-secondary);
+}
+.button-fit {
+    width: fit-content;
+}
+.button-disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+/*CONTAINER CLASSES*/
+.container-bg-01 {
+    padding: 1rem;
+
+    color: var(--text-color-base);
+    background-color: var(--background-color-secondary);
+}
+.container-bg-02 {
+    padding: 1rem;
+
+    color: var(--text-color-base);
+    background-color: var(--palette-tertiary);
+}
+.container-border-01 {
+    padding: 1rem;
+
+    border: 2px solid var(--background-color-secondary);
+}
+.container-border-02 {
+    padding: 1rem;
+
+    border: 2px solid var(--palette-tertiary);
+}
+.container-radius {
+    border-radius: var(--radius);
+}