diff --git a/Homepage/Frontend/css/r11addons.css b/Homepage/Frontend/css/r11addons.css new file mode 100644 index 0000000..afb4425 --- /dev/null +++ b/Homepage/Frontend/css/r11addons.css @@ -0,0 +1,59 @@ +.modification-button.btn-tile:hover { + color: #ca1111; +} + +.modification-button.btn-tile { + width: 10%; + margin: 20% 0 0 0; + font-size: 14px; + color: #00000020 +} + +.modification-button.btn-addtile { + font-size: 38px; + color: #00000030; +} + +.modification-button.btn-addtile:hover { + color: #58ac43; +} + +.tile { + width: 100%; + padding-top: 40%; + border: 1px solid gray; + border-radius: 3px; + position: relative; + background: #f0f0f095; + margin-bottom: 10px; + cursor: default; +} + +.tile:hover { + filter: brightness(110%); +} + +.tile.active { + background: #00000070; + color: white; + filter: none; +} + +.tile.active .btn-tile { + opacity: 0; +} + +.tile .content { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + padding: 0 2% 0 7%; + display: flex; +} + +.content p { + margin: 0; + padding: 0; +} diff --git a/Homepage/Frontend/css/r11modal.css b/Homepage/Frontend/css/r11modal.css new file mode 100644 index 0000000..7848a43 --- /dev/null +++ b/Homepage/Frontend/css/r11modal.css @@ -0,0 +1,104 @@ +#overlay { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + opacity: 0; + background: rgba(0, 0 , 0, 0.5); + pointer-events: none; +} + +#overlay.active { + pointer-events: all; + opacity: 1; +} + +.modal { + display: none; + width: 390px; + min-height: 71px; + max-height: 700px; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: white; + padding: 5px; + border: 1px solid #f0f0f0; +} + +.modal.active { + display: block; +} + +.modal div.header { + width: 384px; + height: 24px; + background: #2e3133; + color: white; + font-size: 24px; + font-weight: 700; + padding: 3px; + margin-bottom: 5px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.modal div.header button { + font-size: 100%; + font-family: inherit; + border: 0; + padding: 0; + background: 0; + color: inherit; + cursor: pointer; +} + +.modal div.header button:hover { + color: white; + font-weight: 700; +} + +.modal div.body { + width: 370px; + padding: 10px; + background: #f0f0f0; + color: #2e3133; + min-height: 16px; + text-align: justify; + font-size: 16px; +} + +.modal div.function { + width: 385px; + min-height: 30px; + padding-top: 5px; + display: flex; + justify-content: space-evenly; + background: inherit; +} + +.modal div.function button { + min-height: 22px; + min-width: 34px; + max-width: 74px; + padding: 3px 20px; + outline: none; + border: 1px solid #f0f0f0; + background: rgba(205,205,205,1); + font-size: 16px; + text-align: center; + cursor: pointer; +} + +.modal div.function button:hover { + filter: brightness(110%); +} + +.r-exclamation:before { + content: '!'; + color: #3bc4f1; + font-style: normal; +} diff --git a/Homepage/Frontend/css/r11tables.css b/Homepage/Frontend/css/r11tables.css new file mode 100644 index 0000000..0a680ab --- /dev/null +++ b/Homepage/Frontend/css/r11tables.css @@ -0,0 +1,71 @@ +.table-map { + width: 60%; +} + +.table-map input{ + font-size: 16px; + padding: 7px; + border: 1px solid rgba(145, 146, 146, 0.849); + border-radius: 5px; +} + +.table-map input.key { + background: #f0f0f0; +} + +.modification-button.btn-add { + font-size: 16px; + color: #00000030; + margin: auto 0 auto 0; +} + +.modification-button.btn-add:hover { + color:#58ac43; +} + +.modification-button.btn-hashmap { + font-size: 16px; + color: #00000030; + margin: auto 0 auto 0; +} + +.modification-button.btn-hashmap:hover { + color: #ca1111; +} + +.table-default { + width: 80%; + border-collapse: collapse; + border-spacing: 0; +} + +.table-default tr { + background: #f0f0f02d; +} + +.table-default tr.bottom-border { + border-bottom: 1px solid black; +} + +.table-default th { + background: #ffffff; +} + +.table-default tr.even { + background: #f0f0f0; +} + +.table-doc td, .table-doc th{ + border-spacing: 0px; + padding: 0px 10px; +} + +.table-doc td { + background-color: rgba(155, 165, 160, 0.342); +} + +.table-doc th { + background-color: #3bc4f1; + text-align: left; + color: white; +} \ No newline at end of file diff --git a/Homepage/Frontend/css/r11tool.css b/Homepage/Frontend/css/r11tool.css new file mode 100644 index 0000000..2243166 --- /dev/null +++ b/Homepage/Frontend/css/r11tool.css @@ -0,0 +1,300 @@ +@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap'); +.hyperlink, .hyperlink:visited, .hyperlink:active { + color: rgb(47, 125, 146); + cursor: pointer; +} + +.hyperlink:hover { + filter: brightness(120%); +} + +.bordered-field { + border: 2px solid rgba(93, 99, 96, 0.705); + border-radius: 5px; + padding: 8px; + +} + +.bordered-field:focus { + outline: none; + box-shadow: 0 0 5px rgba(81, 203, 238); + border: 2px solid #00000070; +} + +.bordered-field:disabled { + background: #eeeeeed2; +} + +.vertically-resizeable { + resize: vertical; +} + +body { + font-family: 'Nunito', sans-serif; +} + +.container { + display: flex; + justify-content: left; + width: 100%; +} + +.tool { + width: 55%; + display: flex; + justify-content: space-evenly; +} + +.tool.extended { + width: 65%; +} + +.tool .tool-context { + width: 90%; +} + +.tool.extended .tool-context { + width: 75%; +} + +.tool.extended .tool-extention { + width: 20%; + padding-top: 2%; + display: block; +} + +.tool .tool-extention { + display: none; +} + +.tool-extention { + opacity: 0; + pointer-events: none; +} + +.tool-extention.active { + opacity: 100%; + pointer-events: all; +} + +.clickable-text { + padding: 0; + outline: none; + background: none; + border: none; + font-weight: 300; + cursor: pointer; +} + +.clickable-text.highlight:hover { + color: #3bc4f1; +} + +.clickable-text.switch { + font-size: 18px; + font-weight: 700; +} + +.clickable-text.switch span.toggleIndicator:before { + content: '>'; +} + +.clickable-text.switch span.toggleIndicator.active:before { + content: 'v'; +} + +.modification-button { + padding: 0; + outline: none; + background: none; + border: none; + font-weight: 300; +} + +.text-aligned-to-right { + text-align: right; +} + +.centered-vertically { + margin-top: auto; + margin-bottom: auto; +} + +.display-space-between { + width: 100%; + display: flex; + justify-content: space-between; +} + +.display-space-evenly { + display: flex; + justify-content: space-evenly; +} + +.float-left { + display: flex; + justify-content: left; + width: 100%; +} + +.version-span { + font-size: 13px; + font-weight: 400; + color: rgba(85,85,85,0.555); +} + +.block-display { + display: block; +} + +.block-label { + display: block; + margin: 0 0 0 5px; +} + +.tabmenu { + display: flex; + flex-direction: row; + text-align: center; + border-bottom: 1px solid rgba(185, 185, 185, 0.5); +} + +.tabitem { + flex-grow: 1; + cursor: pointer; + padding: 5px 0; +} + +.tabitem:hover { + font-weight: 700; +} + +.tabitem.active { + background: rgba(33, 34, 34, 0.705); + color: white; + font-weight: 700; + cursor:default; + flex-grow: 1; +} + +.big-font { + font-size: 20px; +} + +.action-button.active { + background: #3bc4f1; + border: 1px solid #7ed0eb; + cursor: pointer; +} + +.action-button.active:hover { + filter: brightness(110%); +} + +.action-button { + background: rgba(155, 165, 160, 0.507); + border:1px solid rgba(186, 197, 191, 0.507); + color: white; + padding: 10px 20px; + font-weight: 700; + margin: 3px 0; +} + +.quater-width { + width: 25%; +} + +.half-width { + width: 50%; +} + +.tree-fourth-width { + width: 75%; +} + +.half-width.with-padding { + width: 45%; +} + +.max-width { + width: 100%; +} + +.max-width.with-padding { + width: 94%; +} + +.max-height { + height: 100%; +} + +.height-300 { + height: 300px; +} + +.max-height.with-padding { + height: 90%; +} + +.small-margins { + margin: 3%; +} + +.small-vertical-margin { + margin-top: 10px; + margin-bottom: 10px; +} + +.medium-vertical-margin { + margin-top: 30px; + margin-bottom: 30px; +} + +.large-vertical-margin { + margin-top: 50px; + margin-bottom: 50px; +} + +.textarea-300 { + height: 300px; +} + +.centered-content { + display: flex; + justify-content: center; +} + + +.tabcontent { + display: none; +} + +.tabcontent.active { + display: flex; + justify-content: center; +} + +.hiddable { + display: none; +} + +.hiddable.active { + display: inherit; +} + +/* In case of collision with classes that use 'active' */ +.hidden { + display: none; +} + +/* TODO: Add proper class */ +/* textarea { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} */ + +/* TODO: Add proper class */ +/* code{ + line-height: 150%; +} */ \ No newline at end of file diff --git a/Homepage/Frontend/css/r11tooltip.css b/Homepage/Frontend/css/r11tooltip.css new file mode 100644 index 0000000..34fcbfb --- /dev/null +++ b/Homepage/Frontend/css/r11tooltip.css @@ -0,0 +1,77 @@ +.tooltip-window { + position: fixed; + right: 0; + filter: drop-shadow(-2px 0px 2px darkgray); + background: #e8f3f7; + padding: 15px 30px; + font-family: 'Nunito', sans-serif; + width: 40%; + height: 100%; + overflow: scroll; +} + +.tooltip-window.lite { + width: 30%; +} + +.tip { + display: none; +} + +.tip.active { + display: block; +} + +/* TODO: Remove !important. It's bad practice and it can cause errors in future */ +.section-button { + width: 100%; + padding: 15px 0; + font-size: 18px; + background: #b4b4b4c5; + cursor: pointer; + border-bottom: darkgray 2px solid !important; +} + +.section-button:hover { + backdrop-filter: brightness(110%); +} + +.section-button .active { + background: #00000030; +} + +.List .collapsibleContent { + border-left: #bdc5c9 2px solid; + overflow: hidden; + background: #ffffff50; +} + +/* TODO: .section class is to generic. It should be renamed */ +.section{ + padding: 10px 0px 20px 0px ; +} + +/* TODO: content subclass already in use. Creating content class overrides the subclass. +Make .content a subclass of .content */ +/* .content { + padding: 0px 15px 0px 15px ; + text-align: justify; + overflow: hidden; + transition: max-height .2s ease-out; + max-height: 0px; + border-left: #c0c2c3 2px solid; + +} */ + +.collapsibleMini::before{ + content: "►"; +} + +.collapsibleMini.active::before{ + content: "▼"; +} + +/* TODO: Add proper class */ +/* button:hover{ + filter: brightness(110%); +} */ \ No newline at end of file diff --git a/Homepage/common.css b/Homepage/common.css index b5c1801..492ef0f 100644 --- a/Homepage/common.css +++ b/Homepage/common.css @@ -1,101 +1,6 @@ -/* TODO Ogarnac czcionke!! */ -@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap'); - -body { - font-family: 'Nunito', sans-serif; - color: #2e3133; - font-weight: normal; - margin: 0px; -} - -textarea:focus { - box-shadow: 0 0 5px rgba(81, 203, 238); - outline: none; -} - -.tooltip{ - border: 2px solid rgba(155, 165, 160, 0.507); - border-radius: 15px; - padding: 20px; -} - -a, a:visited, a:active { - color: rgb(47, 125, 146); -} - -a:hover{ - filter: brightness(120%); -} - -.field { - border: 2px solid rgba(56, 59, 58, 0.507); - border-radius: 5px; -} - -button { - font-size: 20px; - text-align: center; - cursor: pointer; - border: none; - text-decoration: none; -} - -input { - border-radius: 5px; - border: 1px solid rgba(155, 165, 160, 0.507); -} - -button:hover{ - filter: brightness(110%); - /* TODO Insert animation here! */ -} - -.tooltip h1{ - margin: 0px; - font-size: 24px; - font-weight: bold; -} - -.tooltip button{ - background-color: rgba(155, 165, 160, 0.507); - color: rgb(44, 44, 44); - border-bottom: 2px solid rgba(99, 99, 99, 0.507); - padding: 14px; -} - -.btn-action { - background-color: #3bc4f1; - color: white; - padding: 15px 32px; - display: inline-block; -} - -.versionInfo { - color: rgba(85, 85, 85, 0.555); - font-size: 13px; -} - -.resizeVertical { - resize: vertical; -} - -.resizeNone { - resize: none; -} - -table{ - border: none; -} - -.collapsibleData { - padding: 0 18px; - /* max-height: 0; */ - overflow: hidden; - /* transition: height 0.2s ease-out; */ - /* transition: max-height 0.2s ease-out; */ - background-color: #f1f1f1; -} - -.textField-key{ - background-color: #e6e6e6; -} \ No newline at end of file +@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css'); +@import url('Frontend/css/r11addons.css'); +@import url('Frontend/css/r11tables.css'); +@import url('Frontend/css/r11tool.css'); +@import url('Frontend/css/r11tooltip.css'); +@import url('Frontend/css/r11modal.css'); diff --git a/Homepage/index.html b/Homepage/index.html index 7c39399..0b20021 100644 --- a/Homepage/index.html +++ b/Homepage/index.html @@ -16,14 +16,14 @@