diff --git a/README.md b/README.md new file mode 100644 index 0000000..5ac75d9 --- /dev/null +++ b/README.md @@ -0,0 +1,44 @@ +# Artemis Bootstrap template + +## Libraries used + * Bootstrap: 5.0.0-beta2 + * Animate.css: 4.1.1 + * highlight.js: 10.5.0 + * fontawesome: 5.10.0 + +## CSS class available + +### Declinaison of color +Once you know which class you want to use you can add the following ending work to change the color + +Here are the color + +Term | color | value +--- | --- | --- +`-primary` | | #F3D250 +`-secondary` | | #90CCF4 +`-secondary-dark` | | #5DA2D5 +`-danger` | | #F78888 +`-warning` | | #ffb347 +`-success` | | #77dd77 +`-white` | | #ECECEC +`-black` | | #000000 + +### Buttons + +* gamer +* flat +* reverse-flat +* neon + +### Inputs + +* artemis-input + +### Highlight + +* highlight +* important +* show + + diff --git a/artemis.css b/artemis.css new file mode 100644 index 0000000..c7d7fc0 --- /dev/null +++ b/artemis.css @@ -0,0 +1,1105 @@ +.link, .link-primary, a { + text-decoration: none; + color: #F3D250; +} +.link:hover, .link-primary:hover, a:hover { + color: #f0c620; + text-decoration: underline; +} + +.link-secondary { + text-decoration: none; + color: #90CCF4; +} +.link-secondary:hover { + color: #62b7ef; + text-decoration: underline; +} + +.link-secondary-dark { + text-decoration: none; + color: #5DA2D5; +} +.link-secondary-dark:hover { + color: #358bcb; + text-decoration: underline; +} + +.link-success { + text-decoration: none; + color: #77dd77; +} +.link-success:hover { + color: #4ed34e; + text-decoration: underline; +} + +.link-warning { + text-decoration: none; + color: #ffb347; +} +.link-warning:hover { + color: #ff9e14; + text-decoration: underline; +} + +.link-danger { + text-decoration: none; + color: #F78888; +} +.link-danger:hover { + color: #f45858; + text-decoration: underline; +} + +.link-white { + text-decoration: none; + color: #ECECEC; +} +.link-white:hover { + color: lightgray; + text-decoration: underline; +} + +.link-black { + text-decoration: none; + color: #000000; +} +.link-black:hover { + color: black; + text-decoration: underline; +} + +.neon, .neon-primary { + border: 0 solid; + box-shadow: inset 0 0 20px rgba(243, 210, 80, 0); + outline: 1px solid; + outline-color: rgba(243, 210, 80, 0.5); + outline-offset: 0px; + text-shadow: none; + color: #F3D250; + cursor: pointer; + font-size: 16px; + font-weight: 400; + line-height: 45px; + margin: 0 8px; + max-width: 160px; + position: relative; + text-decoration: none; + text-transform: uppercase; + width: 100%; + background-color: transparent; +} +.neon:hover, .neon-primary:hover { + text-decoration: none; + border: 1px solid; + box-shadow: inset 0 0 20px rgba(243, 210, 80, 0.5), 0 0 20px rgba(243, 210, 80, 0.2); + outline-color: rgba(243, 210, 80, 0); + outline-offset: 15px; + text-shadow: 1px 1px 2px #427388; +} + +.neon-secondary { + border: 0 solid; + box-shadow: inset 0 0 20px rgba(144, 204, 244, 0); + outline: 1px solid; + outline-color: rgba(144, 204, 244, 0.5); + outline-offset: 0px; + text-shadow: none; + color: #90CCF4; + cursor: pointer; + font-size: 16px; + font-weight: 400; + line-height: 45px; + margin: 0 8px; + max-width: 160px; + position: relative; + text-decoration: none; + text-transform: uppercase; + width: 100%; + background-color: transparent; +} +.neon-secondary:hover { + text-decoration: none; + border: 1px solid; + box-shadow: inset 0 0 20px rgba(144, 204, 244, 0.5), 0 0 20px rgba(144, 204, 244, 0.2); + outline-color: rgba(144, 204, 244, 0); + outline-offset: 15px; + text-shadow: 1px 1px 2px #427388; +} + +.neon-secondary-dark { + border: 0 solid; + box-shadow: inset 0 0 20px rgba(93, 162, 213, 0); + outline: 1px solid; + outline-color: rgba(93, 162, 213, 0.5); + outline-offset: 0px; + text-shadow: none; + color: #5DA2D5; + cursor: pointer; + font-size: 16px; + font-weight: 400; + line-height: 45px; + margin: 0 8px; + max-width: 160px; + position: relative; + text-decoration: none; + text-transform: uppercase; + width: 100%; + background-color: transparent; +} +.neon-secondary-dark:hover { + text-decoration: none; + border: 1px solid; + box-shadow: inset 0 0 20px rgba(93, 162, 213, 0.5), 0 0 20px rgba(93, 162, 213, 0.2); + outline-color: rgba(93, 162, 213, 0); + outline-offset: 15px; + text-shadow: 1px 1px 2px #427388; +} + +.neon-danger { + border: 0 solid; + box-shadow: inset 0 0 20px rgba(247, 136, 136, 0); + outline: 1px solid; + outline-color: rgba(247, 136, 136, 0.5); + outline-offset: 0px; + text-shadow: none; + color: #F78888; + cursor: pointer; + font-size: 16px; + font-weight: 400; + line-height: 45px; + margin: 0 8px; + max-width: 160px; + position: relative; + text-decoration: none; + text-transform: uppercase; + width: 100%; + background-color: transparent; +} +.neon-danger:hover { + text-decoration: none; + border: 1px solid; + box-shadow: inset 0 0 20px rgba(247, 136, 136, 0.5), 0 0 20px rgba(247, 136, 136, 0.2); + outline-color: rgba(247, 136, 136, 0); + outline-offset: 15px; + text-shadow: 1px 1px 2px #427388; +} + +.neon-warning { + border: 0 solid; + box-shadow: inset 0 0 20px rgba(255, 179, 71, 0); + outline: 1px solid; + outline-color: rgba(255, 179, 71, 0.5); + outline-offset: 0px; + text-shadow: none; + color: #ffb347; + cursor: pointer; + font-size: 16px; + font-weight: 400; + line-height: 45px; + margin: 0 8px; + max-width: 160px; + position: relative; + text-decoration: none; + text-transform: uppercase; + width: 100%; + background-color: transparent; +} +.neon-warning:hover { + text-decoration: none; + border: 1px solid; + box-shadow: inset 0 0 20px rgba(255, 179, 71, 0.5), 0 0 20px rgba(255, 179, 71, 0.2); + outline-color: rgba(255, 179, 71, 0); + outline-offset: 15px; + text-shadow: 1px 1px 2px #427388; +} + +.neon-success { + border: 0 solid; + box-shadow: inset 0 0 20px rgba(119, 221, 119, 0); + outline: 1px solid; + outline-color: rgba(119, 221, 119, 0.5); + outline-offset: 0px; + text-shadow: none; + color: #77dd77; + cursor: pointer; + font-size: 16px; + font-weight: 400; + line-height: 45px; + margin: 0 8px; + max-width: 160px; + position: relative; + text-decoration: none; + text-transform: uppercase; + width: 100%; + background-color: transparent; +} +.neon-success:hover { + text-decoration: none; + border: 1px solid; + box-shadow: inset 0 0 20px rgba(119, 221, 119, 0.5), 0 0 20px rgba(119, 221, 119, 0.2); + outline-color: rgba(119, 221, 119, 0); + outline-offset: 15px; + text-shadow: 1px 1px 2px #427388; +} + +.neon-white { + border: 0 solid; + box-shadow: inset 0 0 20px rgba(236, 236, 236, 0); + outline: 1px solid; + outline-color: rgba(236, 236, 236, 0.5); + outline-offset: 0px; + text-shadow: none; + color: #ECECEC; + cursor: pointer; + font-size: 16px; + font-weight: 400; + line-height: 45px; + margin: 0 8px; + max-width: 160px; + position: relative; + text-decoration: none; + text-transform: uppercase; + width: 100%; + background-color: transparent; +} +.neon-white:hover { + text-decoration: none; + border: 1px solid; + box-shadow: inset 0 0 20px rgba(236, 236, 236, 0.5), 0 0 20px rgba(236, 236, 236, 0.2); + outline-color: rgba(236, 236, 236, 0); + outline-offset: 15px; + text-shadow: 1px 1px 2px #427388; +} + +.neon-black { + border: 0 solid; + box-shadow: inset 0 0 20px rgba(0, 0, 0, 0); + outline: 1px solid; + outline-color: rgba(0, 0, 0, 0.5); + outline-offset: 0px; + text-shadow: none; + color: #000000; + cursor: pointer; + font-size: 16px; + font-weight: 400; + line-height: 45px; + margin: 0 8px; + max-width: 160px; + position: relative; + text-decoration: none; + text-transform: uppercase; + width: 100%; + background-color: transparent; +} +.neon-black:hover { + text-decoration: none; + border: 1px solid; + box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.2); + outline-color: rgba(0, 0, 0, 0); + outline-offset: 15px; + text-shadow: 1px 1px 2px #427388; +} + +.gamer, .gamer-primary { + font-weight: 700; + border-radius: 8px; + background-color: #F3D250; + box-shadow: 0 2px #999; + margin: 0 8px; + padding: 8px 16px; + cursor: pointer; +} +.gamer:active, .gamer-primary:active { + transform: translateY(1px); + box-shadow: 0 1px #666; +} +.gamer:hover, .gamer-primary:hover { + background-color: #f0c620; +} +.gamer:focus, .gamer-primary:focus { + outline: none; +} + +.gamer-secondary { + font-weight: 700; + border-radius: 8px; + background-color: #90CCF4; + box-shadow: 0 2px #999; + margin: 0 8px; + padding: 8px 16px; + cursor: pointer; +} +.gamer-secondary:active { + transform: translateY(1px); + box-shadow: 0 1px #666; +} +.gamer-secondary:hover { + background-color: #62b7ef; +} +.gamer-secondary:focus { + outline: none; +} + +.gamer-secondary-dark { + font-weight: 700; + border-radius: 8px; + background-color: #5DA2D5; + box-shadow: 0 2px #999; + margin: 0 8px; + padding: 8px 16px; + cursor: pointer; +} +.gamer-secondary-dark:active { + transform: translateY(1px); + box-shadow: 0 1px #666; +} +.gamer-secondary-dark:hover { + background-color: #358bcb; +} +.gamer-secondary-dark:focus { + outline: none; +} + +.gamer-success { + font-weight: 700; + border-radius: 8px; + background-color: #77dd77; + box-shadow: 0 2px #999; + margin: 0 8px; + padding: 8px 16px; + cursor: pointer; +} +.gamer-success:active { + transform: translateY(1px); + box-shadow: 0 1px #666; +} +.gamer-success:hover { + background-color: #4ed34e; +} +.gamer-success:focus { + outline: none; +} + +.gamer-warning { + font-weight: 700; + border-radius: 8px; + background-color: #ffb347; + box-shadow: 0 2px #999; + margin: 0 8px; + padding: 8px 16px; + cursor: pointer; +} +.gamer-warning:active { + transform: translateY(1px); + box-shadow: 0 1px #666; +} +.gamer-warning:hover { + background-color: #ff9e14; +} +.gamer-warning:focus { + outline: none; +} + +.gamer-danger { + font-weight: 700; + border-radius: 8px; + background-color: #F78888; + box-shadow: 0 2px #999; + margin: 0 8px; + padding: 8px 16px; + cursor: pointer; +} +.gamer-danger:active { + transform: translateY(1px); + box-shadow: 0 1px #666; +} +.gamer-danger:hover { + background-color: #f45858; +} +.gamer-danger:focus { + outline: none; +} + +.gamer-white { + font-weight: 700; + border-radius: 8px; + background-color: #ECECEC; + box-shadow: 0 2px #999; + margin: 0 8px; + padding: 8px 16px; + cursor: pointer; +} +.gamer-white:active { + transform: translateY(1px); + box-shadow: 0 1px #666; +} +.gamer-white:hover { + background-color: lightgray; +} +.gamer-white:focus { + outline: none; +} + +.gamer-black { + font-weight: 700; + border-radius: 8px; + background-color: #000000; + box-shadow: 0 2px #999; + margin: 0 8px; + padding: 8px 16px; + cursor: pointer; + color: #ECECEC; +} +.gamer-black:active { + transform: translateY(1px); + box-shadow: 0 1px #666; +} +.gamer-black:hover { + background-color: black; +} +.gamer-black:focus { + outline: none; +} + +.flat, .flat-primary { + font-weight: 700; + background-color: transparent; + border: 2px solid #F3D250; + color: #F3D250; + border-radius: 8px; + margin: 0 8px; + padding: 8px 20px; + cursor: pointer; +} +.flat:focus, .flat-primary:focus { + outline: none; +} +.flat:active, .flat-primary:active { + transform: translateY(2px); +} +.flat:hover, .flat-primary:hover { + background-color: #F3D250; + border: 2px solid #9f810b; + color: #000000; +} + +.flat-secondary { + font-weight: 700; + background-color: transparent; + border: 2px solid #90CCF4; + color: #90CCF4; + border-radius: 8px; + margin: 0 8px; + padding: 8px 20px; + cursor: pointer; +} +.flat-secondary:focus { + outline: none; +} +.flat-secondary:active { + transform: translateY(2px); +} +.flat-secondary:hover { + background-color: #90CCF4; + border: 2px solid #1589d6; + color: #000000; +} + +.flat-secondary-dark { + font-weight: 700; + background-color: transparent; + border: 2px solid #5DA2D5; + color: #5DA2D5; + border-radius: 8px; + margin: 0 8px; + padding: 8px 20px; + cursor: pointer; +} +.flat-secondary-dark:focus { + outline: none; +} +.flat-secondary-dark:active { + transform: translateY(2px); +} +.flat-secondary-dark:hover { + background-color: #5DA2D5; + border: 2px solid #20537a; + color: #000000; +} + +.flat-success { + font-weight: 700; + background-color: transparent; + border: 2px solid #77dd77; + color: #77dd77; + border-radius: 8px; + margin: 0 8px; + padding: 8px 20px; + cursor: pointer; +} +.flat-success:focus { + outline: none; +} +.flat-success:active { + transform: translateY(2px); +} +.flat-success:hover { + background-color: #77dd77; + border: 2px solid #259625; + color: #000000; +} + +.flat-warning { + font-weight: 700; + background-color: transparent; + border: 2px solid #ffb347; + color: #ffb347; + border-radius: 8px; + margin: 0 8px; + padding: 8px 20px; + cursor: pointer; +} +.flat-warning:focus { + outline: none; +} +.flat-warning:active { + transform: translateY(2px); +} +.flat-warning:hover { + background-color: #ffb347; + border: 2px solid #ad6600; + color: #000000; +} + +.flat-danger { + font-weight: 700; + background-color: transparent; + border: 2px solid #F78888; + color: #F78888; + border-radius: 8px; + margin: 0 8px; + padding: 8px 20px; + cursor: pointer; +} +.flat-danger:focus { + outline: none; +} +.flat-danger:active { + transform: translateY(2px); +} +.flat-danger:hover { + background-color: #F78888; + border: 2px solid #d80e0e; + color: #000000; +} + +.flat-white { + font-weight: 700; + background-color: transparent; + border: 2px solid #ECECEC; + color: #ECECEC; + border-radius: 8px; + margin: 0 8px; + padding: 8px 20px; + cursor: pointer; +} +.flat-white:focus { + outline: none; +} +.flat-white:active { + transform: translateY(2px); +} +.flat-white:hover { + background-color: #ECECEC; + border: 2px solid #a0a0a0; + color: #000000; +} + +.flat-black { + font-weight: 700; + background-color: transparent; + border: 2px solid #000000; + color: #000000; + border-radius: 8px; + margin: 0 8px; + padding: 8px 20px; + cursor: pointer; +} +.flat-black:focus { + outline: none; +} +.flat-black:active { + transform: translateY(2px); +} +.flat-black:hover { + background-color: #000000; + border: 2px solid black; + color: #000000; +} + +.flat-reverse, .flat-reverse-primary { + font-weight: 700; + cursor: pointer; + border-radius: 8px; + background-color: #F3D250; + border: 2px solid #9f810b; + color: #000000; + margin: 0 8px; + padding: 8px 20px; +} +.flat-reverse:focus, .flat-reverse-primary:focus { + outline: none; +} +.flat-reverse:active, .flat-reverse-primary:active { + transform: translateY(2px); +} +.flat-reverse:hover, .flat-reverse-primary:hover { + background-color: transparent; + border: 2px solid #F3D250; + color: #F3D250; +} + +.flat-reverse-secondary { + font-weight: 700; + cursor: pointer; + border-radius: 8px; + background-color: #90CCF4; + border: 2px solid #1589d6; + color: #000000; + margin: 0 8px; + padding: 8px 20px; +} +.flat-reverse-secondary:focus { + outline: none; +} +.flat-reverse-secondary:active { + transform: translateY(2px); +} +.flat-reverse-secondary:hover { + background-color: transparent; + border: 2px solid #90CCF4; + color: #90CCF4; +} + +.flat-reverse-secondary-dark { + font-weight: 700; + cursor: pointer; + border-radius: 8px; + background-color: #5DA2D5; + border: 2px solid #20537a; + color: #000000; + margin: 0 8px; + padding: 8px 20px; +} +.flat-reverse-secondary-dark:focus { + outline: none; +} +.flat-reverse-secondary-dark:active { + transform: translateY(2px); +} +.flat-reverse-secondary-dark:hover { + background-color: transparent; + border: 2px solid #5DA2D5; + color: #5DA2D5; +} + +.flat-reverse-success { + font-weight: 700; + cursor: pointer; + border-radius: 8px; + background-color: #77dd77; + border: 2px solid #259625; + color: #000000; + margin: 0 8px; + padding: 8px 20px; +} +.flat-reverse-success:focus { + outline: none; +} +.flat-reverse-success:active { + transform: translateY(2px); +} +.flat-reverse-success:hover { + background-color: transparent; + border: 2px solid #77dd77; + color: #77dd77; +} + +.flat-reverse-warning { + font-weight: 700; + cursor: pointer; + border-radius: 8px; + background-color: #ffb347; + border: 2px solid #ad6600; + color: #000000; + margin: 0 8px; + padding: 8px 20px; +} +.flat-reverse-warning:focus { + outline: none; +} +.flat-reverse-warning:active { + transform: translateY(2px); +} +.flat-reverse-warning:hover { + background-color: transparent; + border: 2px solid #ffb347; + color: #ffb347; +} + +.flat-reverse-danger { + font-weight: 700; + cursor: pointer; + border-radius: 8px; + background-color: #F78888; + border: 2px solid #d80e0e; + color: #000000; + margin: 0 8px; + padding: 8px 20px; +} +.flat-reverse-danger:focus { + outline: none; +} +.flat-reverse-danger:active { + transform: translateY(2px); +} +.flat-reverse-danger:hover { + background-color: transparent; + border: 2px solid #F78888; + color: #F78888; +} + +.flat-reverse-white { + font-weight: 700; + cursor: pointer; + border-radius: 8px; + background-color: #ECECEC; + border: 2px solid #a0a0a0; + color: #000000; + margin: 0 8px; + padding: 8px 20px; +} +.flat-reverse-white:focus { + outline: none; +} +.flat-reverse-white:active { + transform: translateY(2px); +} +.flat-reverse-white:hover { + background-color: transparent; + border: 2px solid #ECECEC; + color: #ECECEC; +} + +.flat-reverse-black { + font-weight: 700; + cursor: pointer; + border-radius: 8px; + background-color: #000000; + border: 2px solid black; + color: #000000; + margin: 0 8px; + padding: 8px 20px; + color: #ECECEC; +} +.flat-reverse-black:focus { + outline: none; +} +.flat-reverse-black:active { + transform: translateY(2px); +} +.flat-reverse-black:hover { + background-color: transparent; + border: 2px solid #000000; + color: #000000; +} + +.artemis-input { + border: inherit; + border-bottom: 2px solid #F3D250; + background-color: transparent; + color: #b9b9b9; +} +.artemis-input:focus { + border-bottom: 2px solid #F3D250; + background-color: transparent; + outline: none; + color: #ECECEC; +} +.artemis-input:active { + outline: none; +} + +.artemis-input-secondary { + border: inherit; + border-bottom: 2px solid #90CCF4; + background-color: transparent; + color: #b9b9b9; +} +.artemis-input-secondary:focus { + border-bottom: 2px solid #90CCF4; + background-color: transparent; + outline: none; + color: #ECECEC; +} +.artemis-input-secondary:active { + outline: none; +} + +.artemis-input-secondary-dark { + border: inherit; + border-bottom: 2px solid #5DA2D5; + background-color: transparent; + color: #b9b9b9; +} +.artemis-input-secondary-dark:focus { + border-bottom: 2px solid #5DA2D5; + background-color: transparent; + outline: none; + color: #ECECEC; +} +.artemis-input-secondary-dark:active { + outline: none; +} + +.artemis-input-success { + border: inherit; + border-bottom: 2px solid #77dd77; + background-color: transparent; + color: #b9b9b9; +} +.artemis-input-success:focus { + border-bottom: 2px solid #77dd77; + background-color: transparent; + outline: none; + color: #ECECEC; +} +.artemis-input-success:active { + outline: none; +} + +.artemis-input-warning { + border: inherit; + border-bottom: 2px solid #ffb347; + background-color: transparent; + color: #b9b9b9; +} +.artemis-input-warning:focus { + border-bottom: 2px solid #ffb347; + background-color: transparent; + outline: none; + color: #ECECEC; +} +.artemis-input-warning:active { + outline: none; +} + +.artemis-input-danger { + border: inherit; + border-bottom: 2px solid #F78888; + background-color: transparent; + color: #b9b9b9; +} +.artemis-input-danger:focus { + border-bottom: 2px solid #F78888; + background-color: transparent; + outline: none; + color: #ECECEC; +} +.artemis-input-danger:active { + outline: none; +} + +.artemis-input-white { + border: inherit; + border-bottom: 2px solid #ECECEC; + background-color: transparent; + color: #b9b9b9; +} +.artemis-input-white:focus { + border-bottom: 2px solid #ECECEC; + background-color: transparent; + outline: none; + color: #ECECEC; +} +.artemis-input-white:active { + outline: none; +} + +.artemis-input-black { + border: inherit; + border-bottom: 2px solid #000000; + background-color: transparent; + color: #b9b9b9; + color: #000000; +} +.artemis-input-black:focus { + border-bottom: 2px solid #000000; + background-color: transparent; + outline: none; + color: #ECECEC; +} +.artemis-input-black:active { + outline: none; +} +.artemis-input-black:focus { + color: gray; +} + +.highlight, .highlight-primary { + padding-right: 4px; + padding-left: 4px; + margin-right: 2px; + margin-left: 2px; + background-color: #F3D250; + color: #000000; + font-style: italic; +} + +.highlight-secondary { + padding-right: 4px; + padding-left: 4px; + margin-right: 2px; + margin-left: 2px; + background-color: #90CCF4; + color: #000000; + font-style: italic; +} + +.highlight-secondary-dark { + padding-right: 4px; + padding-left: 4px; + margin-right: 2px; + margin-left: 2px; + background-color: #5DA2D5; + color: #000000; + font-style: italic; +} + +.highlight-success { + padding-right: 4px; + padding-left: 4px; + margin-right: 2px; + margin-left: 2px; + background-color: #77dd77; + color: #000000; + font-style: italic; +} + +.highlight-warning { + padding-right: 4px; + padding-left: 4px; + margin-right: 2px; + margin-left: 2px; + background-color: #ffb347; + color: #000000; + font-style: italic; +} + +.highlight-danger { + padding-right: 4px; + padding-left: 4px; + margin-right: 2px; + margin-left: 2px; + background-color: #F78888; + color: #000000; + font-style: italic; +} + +.highlight-white { + padding-right: 4px; + padding-left: 4px; + margin-right: 2px; + margin-left: 2px; + background-color: #ECECEC; + color: #000000; + font-style: italic; +} + +.highlight-black { + padding-right: 4px; + padding-left: 4px; + margin-right: 2px; + margin-left: 2px; + background-color: #000000; + color: #000000; + font-style: italic; + color: #ECECEC; +} + +.important, .important-primary { + border-bottom: 3px solid #F3D250; +} + +.important-secondary { + border-bottom: 3px solid #90CCF4; +} + +.important-secondary-dark { + border-bottom: 3px solid #5DA2D5; +} + +.important-success { + border-bottom: 3px solid #77dd77; +} + +.important-warning { + border-bottom: 3px solid #ffb347; +} + +.important-danger { + border-bottom: 3px solid #F78888; +} + +.important-white { + border-bottom: 3px solid #ECECEC; +} + +.important-black { + border-bottom: 3px solid #000000; +} + +.show, .show-primary { + color: #F3D250; +} + +.show-secondary { + color: #90CCF4; +} + +.show-secondary-dark { + color: #5DA2D5; +} + +.show-success { + color: #77dd77; +} + +.show-warning { + color: #ffb347; +} + +.show-danger { + color: #F78888; +} + +.show-white { + color: #ECECEC; +} + +.show-black { + color: #000000; +} + +blockquote, quote { + background-color: #b9b9b9; + font-style: italic; + font-weight: 400; + border-left: 10px solid #868686; + padding: 2vh 1vw; + color: #000000; +} + +/*# sourceMappingURL=artemis.css.map */ diff --git a/artemis.css.map b/artemis.css.map new file mode 100644 index 0000000..e60a78a --- /dev/null +++ b/artemis.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["source/_components/link.scss","source/artemis.scss","source/_components/button.scss","source/_components/form.scss","source/_components/highlight.scss","source/_components/quote.scss"],"names":[],"mappings":"AAWA;EAVE;EACA,OCFQ;;ADIR;EACE;EACA;;;AASJ;EAdE;EACA,OCDU;;ADGV;EACE;EACA;;;AAaJ;EAlBE;EACA;;AAEA;EACE;EACA;;;AAiBJ;EAtBE;EACA,OCGQ;;ADDR;EACE;EACA;;;AAqBJ;EA1BE;EACA,OCEQ;;ADAR;EACE;EACA;;;AAyBJ;EA9BE;EACA,OCCO;;ADCP;EACE;EACA;;;AA6BJ;EAlCE;EACA,OCIM;;ADFN;EACE;EACA;;;AAiCJ;EAtCE;EACA,OCKM;;ADHN;EACE;EACA;;;AEwBJ;EA7BE;EACA;EACA;EACA;EACA;EACA;EACA,ODPQ;ECQR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQJ;EAjCE;EACA;EACA;EACA;EACA;EACA;EACA,ODNU;ECOV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAYJ;EArCE;EACA;EACA;EACA;EACA;EACA;EACA,ODLe;ECMf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAgBJ;EAzCE;EACA;EACA;EACA;EACA;EACA;EACA,ODJO;ECKP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAoBJ;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA,ODHQ;ECIR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAwBJ;EAjDE;EACA;EACA;EACA;EACA;EACA;EACA,ODFQ;ECGR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AA4BJ;EArDE;EACA;EACA;EACA;EACA;EACA;EACA,ODDM;ECEN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAgCJ;EAzDE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AA2DJ;EAtBE;EACA;EACA,kBDjEQ;ECkER;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;;AAQJ;EA1BE;EACA;EACA,kBDhEU;ECiEV;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;;AAYJ;EA9BE;EACA;EACA,kBD/De;ECgEf;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;;AAgBJ;EAlCE;EACA;EACA,kBD5DQ;EC6DR;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;;AAoBJ;EAtCE;EACA;EACA,kBD7DQ;EC8DR;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;;AAwBJ;EA1CE;EACA;EACA,kBD9DO;EC+DP;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;;AA4BJ;EA9CE;EACA;EACA,kBD3DM;EC4DN;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;;AAgCJ;EAlDE;EACA;EACA,kBD1DM;EC2DN;EACA;EACA;EACA;EA8CA,OD7GM;;ACiEN;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;;AA8DJ;EAxBE;EACA;EACA;EACA,OD1HQ;EC2HR;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE,kBDzIM;EC0IN;EACA;;;AAQJ;EA5BE;EACA;EACA;EACA,ODzHU;EC0HV;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE,kBDxIQ;ECyIR;EACA;;;AAYJ;EAhCE;EACA;EACA;EACA,ODxHe;E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","file":"artemis.css"} \ No newline at end of file diff --git a/demo/button.html b/demo/button.html new file mode 100644 index 0000000..dd41e2e --- /dev/null +++ b/demo/button.html @@ -0,0 +1,71 @@ + + + + + + + + + + + + + Artemis CSS Library + + + +
+ +
+
+

Artemis CSS Library

+
+ +

Buttons

+ + + + + + + + +


+ + + + + + + + +


+ + + + + + + + +


+ + + + + + + + +
+ +
+ +
+ + + + diff --git a/demo/css/style.css b/demo/css/style.css new file mode 100644 index 0000000..a97cd57 --- /dev/null +++ b/demo/css/style.css @@ -0,0 +1,52 @@ +body { + font-family: 'Roboto', sans-serif; + font-weight: 700; + font-size: 18px; + color: #ECECEC; + background-color: #171D1C; + text-align: center; +} + +h1 { + font-size:3em; + color: #F3D250; + animation: bounceInDown; + animation-duration: 2s; +} + +h2 { + animation: bounceInUp; + animation-duration: 1s; + color: #90CCF4; +} + +h3 { + color: #90CCF4; + animation: bounceInLeft; + animation-duration: 2s; +} + +.container { + margin-top: 20vh; + margin-bottom: 15vh; +} + +.title { + margin-bottom: 10vh; +} + +.input { + margin-bottom: 2vh; +} + +.info { + width: 50vw; + margin-left: 25vw; +} + +.footer { + font-size: 14px; + color: grey; + text-align: center; + margin-bottom: 5vh; +} diff --git a/demo/form.html b/demo/form.html new file mode 100644 index 0000000..83549e4 --- /dev/null +++ b/demo/form.html @@ -0,0 +1,71 @@ + + + + + + + + + + + + + Artemis CSS Library + + + +
+ +
+
+

Artemis CSS Library

+
+ +

Input

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+ +
+ + + + diff --git a/demo/highlight.html b/demo/highlight.html new file mode 100644 index 0000000..1c09309 --- /dev/null +++ b/demo/highlight.html @@ -0,0 +1,84 @@ + + + + + + + + + + + + + Artemis CSS Library + + + +
+ +
+
+

Artemis CSS Library

+
+ +

Highlight

+

+ A paragraph of highlighted text. + A paragraph of underlined text to show important text. + A paragraph of colored text to show important text in a different way. +

+ +

+ A paragraph of highlighted text. + A paragraph of underlined text to show important text. + A paragraph of colored text to show important text in a different way. +

+ +

+ A paragraph of highlighted text. + A paragraph of underlined text to show important text. + A paragraph of colored text to show important text in a different way. +

+ +

+ A paragraph of highlighted text. + A paragraph of underlined text to show important text. + A paragraph of colored text to show important text in a different way. +

+ +

+ A paragraph of highlighted text. + A paragraph of underlined text to show important text. + A paragraph of colored text to show important text in a different way. +

+ +

+ A paragraph of highlighted text. + A paragraph of underlined text to show important text. + A paragraph of colored text to show important text in a different way. +

+ + +

+ A paragraph of highlighted text. + A paragraph of underlined text to show important text. + A paragraph of colored text to show important text in a different way. +

+ +

+ A paragraph of highlighted text. + A paragraph of underlined text to show important text. + A paragraph of colored text to show important text in a different way. +

+
+ +
+ +
+ + + + diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..05854ab --- /dev/null +++ b/demo/index.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + + Artemis CSS Library + + + +
+ +
+
+

Artemis CSS Library

+
+ + + + + + +
+

How to use and install it

+

You can find all the information in the Github page

+
+ + +
+ +
+ +
+ + + + diff --git a/demo/link.html b/demo/link.html new file mode 100644 index 0000000..14ed23e --- /dev/null +++ b/demo/link.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + + Artemis CSS Library + + + +
+ +
+
+

Artemis CSS Library

+
+ +

Link

+

+ Fatalement      + Fatalement     + Fatalement     + Fatalement     + Fatalement     + Fatalement     + Fatalement     + Fatalement     +

+
+ +
+ +
+ + + + diff --git a/package.json b/package.json index e7c3eb2..edafbc2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "artemis", - "version": "0.0.1", + "version": "0.1.0", "description": "A nice css library for bootstrap 5", "main": "README.md", "scripts": { diff --git a/source/_components/button.scss b/source/_components/button.scss new file mode 100644 index 0000000..fd97143 --- /dev/null +++ b/source/_components/button.scss @@ -0,0 +1,232 @@ +@mixin mixin-neon($back-color: $primary) { + border: 0 solid; + box-shadow: inset 0 0 20px rgba($back-color, 0); + outline: 1px solid; + outline-color: rgba($back-color, .5); + outline-offset: 0px; + text-shadow: none; + color: $back-color; + cursor: pointer; + font-size: 16px; + font-weight: 400; + line-height: 45px; + margin: 0 2 * $padding; + max-width: 160px; + position: relative; + text-decoration: none; + text-transform: uppercase; + width: 100%; + background-color: transparent; + + &:hover { + text-decoration: none; + border: 1px solid; + box-shadow: inset 0 0 20px rgba($back-color, .5), 0 0 20px rgba($back-color, .2); + outline-color: rgba($back-color, 0); + outline-offset: 15px; + text-shadow: 1px 1px 2px #427388; + } +} + +.neon, .neon-primary { + @include mixin-neon() +} + +.neon-secondary { + @include mixin-neon($secondary) +} + +.neon-secondary-dark { + @include mixin-neon($secondary-dark) +} + +.neon-danger { + @include mixin-neon($danger) +} + +.neon-warning { + @include mixin-neon($warning) +} + +.neon-success { + @include mixin-neon($success) +} + +.neon-white { + @include mixin-neon($white) +} + +.neon-black { + @include mixin-neon($black) +} + +@mixin gamer-button($back-color: $primary) { + font-weight: 700; + border-radius: 2 * $padding; + background-color: $back-color; + box-shadow: 0 2px #999; + margin: 0 2 * $padding; + padding: 2*$padding 4*$padding; + cursor: pointer; + + &:active { + transform: translateY(1px); + box-shadow: 0 1px #666; + } + + &:hover { + background-color: darken($back-color, 10); + } + + &:focus { + outline: none; + } +} + +.gamer, .gamer-primary { + @include gamer-button(); +} + +.gamer-secondary { + @include gamer-button($secondary); +} + +.gamer-secondary-dark { + @include gamer-button($secondary-dark); +} + +.gamer-success { + @include gamer-button($success); +} + +.gamer-warning { + @include gamer-button($warning); +} + +.gamer-danger { + @include gamer-button($danger); +} + +.gamer-white { + @include gamer-button($white); +} + +.gamer-black { + @include gamer-button($black); + color: $white; +} + +@mixin flat-button($back-color: $primary) { + font-weight: 700; + background-color: transparent; + border: 2px solid $back-color; + color: $back-color; + border-radius: 2 * $padding; + margin: 0 2 * $padding; + padding: 2*$padding 5*$padding; + cursor: pointer; + + &:focus { + outline: none; + } + + &:active { + transform: translateY(2px); + } + + &:hover { + background-color: $back-color; + border: 2px solid darken($back-color, 30); + color: #000000; + } +} + +.flat, .flat-primary { + @include flat-button(); +} + +.flat-secondary { + @include flat-button($secondary); +} + +.flat-secondary-dark { + @include flat-button($secondary-dark); +} + +.flat-success { + @include flat-button($success); +} + +.flat-warning { + @include flat-button($warning); +} + +.flat-danger { + @include flat-button($danger); +} + +.flat-white { + @include flat-button($white); +} + +.flat-black { + @include flat-button($black); +} + +@mixin flat-reverse-button($back-color: $primary) { + font-weight: 700; + cursor: pointer; + border-radius: 2 * $padding; + background-color: $back-color; + border: 2px solid darken($back-color, 30); + color: #000000; + margin: 0 2 * $padding; + padding: 2*$padding 5*$padding; + + &:focus { + outline: none; + } + + &:active { + transform: translateY(2px); + } + + &:hover { + background-color: transparent; + border: 2px solid $back-color; + color: $back-color; + } +} + +.flat-reverse, .flat-reverse-primary { + @include flat-reverse-button(); +} + +.flat-reverse-secondary { + @include flat-reverse-button($secondary); +} + +.flat-reverse-secondary-dark { + @include flat-reverse-button($secondary-dark); +} + +.flat-reverse-success { + @include flat-reverse-button($success); +} + +.flat-reverse-warning { + @include flat-reverse-button($warning); +} + +.flat-reverse-danger { + @include flat-reverse-button($danger); +} + +.flat-reverse-white { + @include flat-reverse-button($white); +} + +.flat-reverse-black { + @include flat-reverse-button($black); + color: $white; +} diff --git a/source/_components/form.scss b/source/_components/form.scss new file mode 100644 index 0000000..cdab508 --- /dev/null +++ b/source/_components/form.scss @@ -0,0 +1,54 @@ +@mixin mixin-input($back-color: $primary) { + border: inherit; + border-bottom: 2px solid $back-color; + background-color: transparent; + color: darken($white, 20); + + &:focus { + border-bottom: 2px solid $back-color; + background-color: transparent; + outline: none; + color: $white; + } + + &:active { + outline: none; + } +} + +.artemis-input { + @include mixin-input(); +} + +.artemis-input-secondary { + @include mixin-input($secondary); +} + +.artemis-input-secondary-dark { + @include mixin-input($secondary-dark); +} + +.artemis-input-success { + @include mixin-input($success); +} + +.artemis-input-warning { + @include mixin-input($warning); +} + +.artemis-input-danger { + @include mixin-input($danger); +} + +.artemis-input-white { + @include mixin-input($white); +} + +.artemis-input-black { + @include mixin-input($black); + color: $black; + + &:focus { + color: lighten($black, 50); + } +} diff --git a/source/_components/highlight.scss b/source/_components/highlight.scss new file mode 100644 index 0000000..5e5f15f --- /dev/null +++ b/source/_components/highlight.scss @@ -0,0 +1,118 @@ +@mixin mixin-highlight($back-color: $primary) { + padding: { + right: $padding; + left: $padding; + }; + margin: { + right: 2px; + left: 2px; + }; + background-color: $back-color; + color: #000000; + font-style: italic; +} + +.highlight, .highlight-primary { + @include mixin-highlight(); +} + +.highlight-secondary { + @include mixin-highlight($secondary); +} + +.highlight-secondary-dark { + @include mixin-highlight($secondary-dark); +} + +.highlight-success { + @include mixin-highlight($success); +} + +.highlight-warning { + @include mixin-highlight($warning); +} + +.highlight-danger { + @include mixin-highlight($danger); +} + +.highlight-white { + @include mixin-highlight($white); +} + +.highlight-black { + @include mixin-highlight($black); + color: $white; +} + +@mixin mixin-important($back-color: $primary) { + border-bottom: 3px solid $back-color; +} + +.important, .important-primary { + @include mixin-important(); +} + +.important-secondary { + @include mixin-important($secondary); +} + +.important-secondary-dark { + @include mixin-important($secondary-dark); +} + +.important-success { + @include mixin-important($success); +} + +.important-warning { + @include mixin-important($warning); +} + +.important-danger { + @include mixin-important($danger); +} + +.important-white { + @include mixin-important($white); +} + +.important-black { + @include mixin-important($black); +} + +@mixin mixin-show($back-color: $primary) { + color: $back-color; +} + +.show, .show-primary { + @include mixin-show(); +} + +.show-secondary { + @include mixin-show($secondary); +} + +.show-secondary-dark { + @include mixin-show($secondary-dark); +} + +.show-success { + @include mixin-show($success); +} + +.show-warning { + @include mixin-show($warning); +} + +.show-danger { + @include mixin-show($danger); +} + +.show-white { + @include mixin-show($white); +} + +.show-black { + @include mixin-show($black); +} diff --git a/source/_components/link.scss b/source/_components/link.scss new file mode 100644 index 0000000..875521a --- /dev/null +++ b/source/_components/link.scss @@ -0,0 +1,42 @@ +@mixin link($back-color: $primary) { + text-decoration: none; + color: $back-color; + + &:hover { + color: darken($back-color, 10); + text-decoration: underline; + } +} + + +.link, .link-primary, a{ + @include link(); +} + +.link-secondary { + @include link($secondary); +} + +.link-secondary-dark { + @include link($secondary-dark); +} + +.link-success { + @include link($success); +} + +.link-warning { + @include link($warning); +} + +.link-danger { + @include link($danger); +} + +.link-white { + @include link($white); +} + +.link-black { + @include link($black); +} diff --git a/source/_components/main.scss b/source/_components/main.scss new file mode 100644 index 0000000..65f2b59 --- /dev/null +++ b/source/_components/main.scss @@ -0,0 +1,8 @@ +@import "link"; +@import "button"; +@import "form"; +@import "highlight"; +@import "quote"; + + + diff --git a/source/_components/quote.scss b/source/_components/quote.scss new file mode 100644 index 0000000..b503609 --- /dev/null +++ b/source/_components/quote.scss @@ -0,0 +1,8 @@ +blockquote, quote { + background-color: darken($white, 20); + font-style: italic; + font-weight: 400; + border-left: 10px solid darken($white, 40); + padding: 2vh 1vw; + color: $black; +} diff --git a/source/artemis.scss b/source/artemis.scss new file mode 100644 index 0000000..8567ace --- /dev/null +++ b/source/artemis.scss @@ -0,0 +1,12 @@ +$primary: #F3D250; +$secondary: #90CCF4; +$secondary-dark: #5DA2D5; +$danger: #F78888; +$warning: #ffb347; +$success: #77dd77; +$white: #ECECEC; +$black: #000000; + +$padding: 4px; + +@import "_components/main";