diff --git a/components.js b/components.js new file mode 100644 index 0000000..62b535b --- /dev/null +++ b/components.js @@ -0,0 +1,3640 @@ +/*jshint esversion: 6 */ +//Button +const smButton = document.createElement('template') +smButton.innerHTML = ` + +`; +customElements.define('sm-button', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smButton.content.cloneNode(true)) + } + + get disabled() { + return this.isDisabled + } + + set disabled(value) { + if (value && !this.isDisabled) { + this.isDisabled = true + this.setAttribute('disabled', '') + this.button.removeAttribute('tabindex') + } else if (!value && this.isDisabled) { + this.isDisabled = false + this.removeAttribute('disabled') + } + } + + dispatch() { + if (this.isDisabled) { + this.dispatchEvent(new CustomEvent('disabled', { + bubbles: true, + composed: true + })) + } else { + this.dispatchEvent(new CustomEvent('clicked', { + bubbles: true, + composed: true + })) + } + } + + connectedCallback() { + this.isDisabled = false + this.button = this.shadowRoot.querySelector('.button') + if (this.hasAttribute('disabled') && !this.isDisabled) + this.isDisabled = true + this.addEventListener('click', (e) => { + this.dispatch() + }) + } + }) + +//Input +const smInput = document.createElement('template') +smInput.innerHTML = ` + +
+ +
+
+`; +customElements.define('sm-input', + class extends HTMLElement { + + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smInput.content.cloneNode(true)) + } + + static get observedAttributes() { + return ['placeholder'] + } + + get value() { + return this.shadowRoot.querySelector('input').value + } + + set value(val) { + this.shadowRoot.querySelector('input').value = val; + this.checkInput() + this.fireEvent() + } + + get placeholder() { + return this.getAttribute('placeholder') + } + + set placeholder(val) { + this.setAttribute('placeholder', val) + } + + get type() { + return this.getAttribute('type') + } + + get isValid() { + return this.shadowRoot.querySelector('input').checkValidity() + } + + get validity() { + return this.shadowRoot.querySelector('input').validity + } + + set disabled(value) { + if (value) + this.shadowRoot.querySelector('.input').classList.add('disabled') + else + this.shadowRoot.querySelector('.input').classList.remove('disabled') + } + set readOnly(value) { + if (value) { + this.shadowRoot.querySelector('input').setAttribute('readonly', '') + this.shadowRoot.querySelector('.input').classList.add('readonly') + } else { + this.shadowRoot.querySelector('input').removeAttribute('readonly') + this.shadowRoot.querySelector('.input').classList.remove('readonly') + } + } + + setValidity = (message) => { + this.feedbackText.textContent = message + } + + showValidity = () => { + this.feedbackText.classList.remove('hide-completely') + } + + hideValidity = () => { + this.feedbackText.classList.add('hide-completely') + } + + focusIn = () => { + this.input.focus() + } + + focusOut = () => { + this.input.blur() + } + + fireEvent = () => { + let event = new Event('input', { + bubbles: true, + cancelable: true, + composed: true + }); + this.dispatchEvent(event); + } + + checkInput = (e) => { + if (!this.readonly) { + if (this.input.value !== '') { + this.clearBtn.classList.remove('hide') + } else { + this.clearBtn.classList.add('hide') + } + } + if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return; + if (this.input.value !== '') { + if (this.animate) + this.inputParent.classList.add('animate-label') + else + this.label.classList.add('hide') + } else { + if (this.animate) + this.inputParent.classList.remove('animate-label') + else + this.label.classList.remove('hide') + } + } + + + connectedCallback() { + this.inputParent = this.shadowRoot.querySelector('.input') + this.clearBtn = this.shadowRoot.querySelector('.clear') + this.label = this.shadowRoot.querySelector('.label') + this.feedbackText = this.shadowRoot.querySelector('.feedback-text') + this.valueChanged = false; + this.readonly = false + this.isNumeric = false + this.min + this.max + this.animate = this.hasAttribute('animate') + this.input = this.shadowRoot.querySelector('input') + this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') + if (this.hasAttribute('value')) { + this.input.value = this.getAttribute('value') + this.checkInput() + } + if (this.hasAttribute('required')) { + this.input.setAttribute('required', '') + } + if (this.hasAttribute('min')) { + let minValue = this.getAttribute('min') + this.input.setAttribute('min', minValue) + this.min = parseInt(minValue) + } + if (this.hasAttribute('max')) { + let maxValue = this.getAttribute('max') + this.input.setAttribute('max', maxValue) + this.max = parseInt(maxValue) + } + if (this.hasAttribute('minlength')) { + const minValue = this.getAttribute('minlength') + this.input.setAttribute('minlength', minValue) + } + if (this.hasAttribute('maxlength')) { + const maxValue = this.getAttribute('maxlength') + this.input.setAttribute('maxlength', maxValue) + } + if (this.hasAttribute('step')) { + const steps = this.getAttribute('step') + this.input.setAttribute('step', steps) + } + if (this.hasAttribute('pattern')) { + this.input.setAttribute('pattern', this.getAttribute('pattern')) + } + if (this.hasAttribute('readonly')) { + this.input.setAttribute('readonly', '') + this.readonly = true + } + if (this.hasAttribute('disabled')) { + this.inputParent.classList.add('disabled') + } + if (this.hasAttribute('error-text')) { + this.feedbackText.textContent = this.getAttribute('error-text') + } + if (this.hasAttribute('type')) { + if (this.getAttribute('type') === 'number') { + this.input.setAttribute('inputmode', 'numeric') + this.input.setAttribute('type', 'number') + this.isNumeric = true + } else + this.input.setAttribute('type', this.getAttribute('type')) + } else + this.input.setAttribute('type', 'text') + this.input.addEventListener('input', e => { + this.checkInput(e) + }) + this.clearBtn.addEventListener('click', e => { + this.value = '' + }) + } + + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'placeholder') { + this.shadowRoot.querySelector('.label').textContent = newValue; + this.setAttribute('aria-label', newValue); + } + } + } + }) + +//textarea +const smTextarea = document.createElement('template') +smTextarea.innerHTML = ` + + +`; +customElements.define('sm-textarea', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTextarea.content.cloneNode(true)) + this.textarea = this.shadowRoot.querySelector('textarea') + } + get value() { + return this.textarea.value + } + set value(val) { + this.textarea.value = val; + this.textareaBox.dataset.value = val + this.checkInput() + this.fireEvent() + } + focusIn = () => { + this.textarea.focus() + } + fireEvent() { + let event = new Event('input', { + bubbles: true, + cancelable: true, + composed: true + }); + this.dispatchEvent(event); + } + checkInput = () => { + if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') + return; + if (this.textarea.value !== '') { + this.placeholder.classList.add('hide') + } else { + this.placeholder.classList.remove('hide') + } + } + connectedCallback() { + this.textareaBox = this.shadowRoot.querySelector('.textarea') + this.placeholder = this.shadowRoot.querySelector('.placeholder') + + if(this.hasAttribute('placeholder')) + this.placeholder.textContent = this.getAttribute('placeholder') + + if (this.hasAttribute('value')) { + this.textarea.value = this.getAttribute('value') + this.checkInput() + } + if (this.hasAttribute('required')) { + this.textarea.setAttribute('required', '') + } + if (this.hasAttribute('readonly')) { + this.textarea.setAttribute('readonly', '') + } + if (this.hasAttribute('rows')) { + this.textarea.setAttribute('rows', this.getAttribute('rows')) + } + this.textarea.addEventListener('input', e => { + this.textareaBox.dataset.value = this.textarea.value + this.checkInput() + }) + } + }) + +// tab +const smTab = document.createElement('template') +smTab.innerHTML = ` + +
+ +
+`; + +customElements.define('sm-tab', class extends HTMLElement { + constructor() { + super() + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smTab.content.cloneNode(true)) + } +}) + +//chcekbox + +const smCheckbox = document.createElement('template') +smCheckbox.innerHTML = ` + +` +customElements.define('sm-checkbox', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smCheckbox.content.cloneNode(true)) + + this.checkbox = this.shadowRoot.querySelector('.checkbox'); + this.input = this.shadowRoot.querySelector('input') + + this.isChecked = false + this.isDisabled = false + } + + static get observedAttributes() { + return ['disabled', 'checked'] + } + + get disabled() { + return this.isDisabled + } + + set disabled(val) { + if (val) { + this.setAttribute('disabled', '') + } else { + this.removeAttribute('disabled') + } + } + + get checked() { + return this.isChecked + } + + set checked(value) { + if (value) { + this.setAttribute('checked', '') + } + else { + this.removeAttribute('checked') + } + } + + set value(val) { + this.val = val + this.setAttribute('value', value) + } + + get value() { + return getAttribute('value') + } + + dispatch = () => { + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true + })) + } + handleKeyup = e => { + if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) { + if (this.hasAttribute('checked')) { + this.input.checked = false + this.removeAttribute('checked') + } + else { + this.input.checked = true + this.setAttribute('checked', '') + } + } + } + handleChange = e => { + if (this.input.checked) { + this.setAttribute('checked', '') + } + else { + this.removeAttribute('checked') + } + } + + connectedCallback() { + this.val = '' + this.addEventListener('keyup', this.handleKeyup) + this.input.addEventListener('change', this.handleChange) + } + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'disabled') { + if (newValue === 'true') { + this.isDisabled = true + } else { + this.isDisabled = false + } + } + else if (name === 'checked') { + if (this.hasAttribute('checked')) { + this.isChecked = true + this.input.checked = true + } + else { + this.input.checked = false + this.isChecked = false + } + this.dispatch() + } + } + } + disconnectedCallback() { + this.removeEventListener('keyup', this.handleKeyup) + this.removeEventListener('change', this.handleChange) + } +}) + +//switch + +const smSwitch = document.createElement('template') +smSwitch.innerHTML = ` + +` + +customElements.define('sm-switch', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smSwitch.content.cloneNode(true)) + this.switch = this.shadowRoot.querySelector('.switch'); + this.input = this.shadowRoot.querySelector('input') + this.isChecked = false + this.isDisabled = false + } + + static get observedAttributes() { + return ['disabled', 'checked'] + } + + get disabled() { + return this.isDisabled + } + + set disabled(val) { + if (val) { + this.setAttribute('disabled', '') + } else { + this.removeAttribute('disabled') + } + } + + get checked() { + return this.isChecked + } + + set checked(value) { + if (value) { + this.setAttribute('checked', '') + } else { + this.removeAttribute('checked') + } + } + + dispatch = () => { + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true, + detail: { + value: this.isChecked + } + })) + } + + connectedCallback() { + this.addEventListener('keyup', e => { + if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) { + this.input.click() + } + }) + this.input.addEventListener('click', e => { + if (this.input.checked) + this.checked = true + else + this.checked = false + this.dispatch() + }) + } + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'disabled') { + if (this.hasAttribute('disabled')) { + this.disabled = true + } + else { + this.disabled = false + } + } + else if (name === 'checked') { + if (this.hasAttribute('checked')) { + this.isChecked = true + this.input.checked = true + } + else { + this.isChecked = false + this.input.checked = false + } + } + } + } + +}) + +// select +const smSelect = document.createElement('template') +smSelect.innerHTML = ` + +
+
+
+ + + +
+
+ +
+
`; +customElements.define('sm-select', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smSelect.content.cloneNode(true)) + } + static get observedAttributes() { + return ['value'] + } + get value() { + return this.getAttribute('value') + } + set value(val) { + this.setAttribute('value', val) + } + + collapse() { + this.chevron.classList.remove('rotate') + this.optionList.animate(this.slideUp, this.animationOptions) + .onfinish = () => { + this.optionList.classList.add('hide') + this.open = false + } + } + connectedCallback() { + this.availableOptions + this.optionList = this.shadowRoot.querySelector('.options') + this.chevron = this.shadowRoot.querySelector('.toggle') + let slot = this.shadowRoot.querySelector('.options slot'), + selection = this.shadowRoot.querySelector('.selection'), + previousOption + this.open = false; + this.slideDown = [{ + transform: `translateY(-0.5rem)`, + opacity: 0 + }, + { + transform: `translateY(0)`, + opacity: 1 + } + ] + this.slideUp = [{ + transform: `translateY(0)`, + opacity: 1 + }, + { + transform: `translateY(-0.5rem)`, + opacity: 0 + } + ] + this.animationOptions = { + duration: 300, + fill: "forwards", + easing: 'ease' + } + selection.addEventListener('click', e => { + if (!this.open) { + this.optionList.classList.remove('hide') + this.optionList.animate(this.slideDown, this.animationOptions) + this.chevron.classList.add('rotate') + this.open = true + } else { + this.collapse() + } + }) + selection.addEventListener('keydown', e => { + if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { + e.preventDefault() + this.availableOptions[0].focus() + } + if (e.code === 'Enter' || e.code === 'Space') + if (!this.open) { + this.optionList.classList.remove('hide') + this.optionList.animate(this.slideDown, this.animationOptions) + this.chevron.classList.add('rotate') + this.open = true + } else { + this.collapse() + } + }) + this.optionList.addEventListener('keydown', e => { + if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { + e.preventDefault() + if (document.activeElement.previousElementSibling) { + document.activeElement.previousElementSibling.focus() + } + } + if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { + e.preventDefault() + if (document.activeElement.nextElementSibling) + document.activeElement.nextElementSibling.focus() + } + }) + this.addEventListener('optionSelected', e => { + if (previousOption !== e.target) { + this.setAttribute('value', e.detail.value) + this.shadowRoot.querySelector('.option-text').textContent = e.detail.text; + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true, + detail: { + value: e.detail.value + } + })) + if (previousOption) { + previousOption.classList.remove('check-selected') + } + previousOption = e.target; + } + if (!e.detail.switching) + this.collapse() + + e.target.classList.add('check-selected') + }) + slot.addEventListener('slotchange', e => { + this.availableOptions = slot.assignedElements() + if (this.availableOptions[0]) { + let firstElement = this.availableOptions[0]; + previousOption = firstElement; + firstElement.classList.add('check-selected') + this.setAttribute('value', firstElement.getAttribute('value')) + this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent + this.availableOptions.forEach((element, index) => { + element.setAttribute('data-rank', index + 1); + element.setAttribute('tabindex', "0"); + }) + } + }); + document.addEventListener('mousedown', e => { + if (!this.contains(e.target) && this.open) { + this.collapse() + } + }) + } +}) + +// option +const smOption = document.createElement('template') +smOption.innerHTML = ` + +
+ + + + +
`; +customElements.define('sm-option', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smOption.content.cloneNode(true)) + } + + sendDetails(switching) { + let optionSelected = new CustomEvent('optionSelected', { + bubbles: true, + composed: true, + detail: { + text: this.textContent, + value: this.getAttribute('value'), + switching: switching + } + }) + this.dispatchEvent(optionSelected) + } + + connectedCallback() { + let validKey = [ + 'ArrowUp', + 'ArrowDown', + 'ArrowLeft', + 'ArrowRight' + ] + this.addEventListener('click', e => { + this.sendDetails() + }) + this.addEventListener('keyup', e => { + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.sendDetails(false) + } + if (validKey.includes(e.code)) { + e.preventDefault() + this.sendDetails(true) + } + }) + if (this.hasAttribute('default')) { + setTimeout(() => { + this.sendDetails() + }, 0); + } + } +}) + +// strip select +const stripSelect = document.createElement('template') +stripSelect.innerHTML = ` + +
+
+ +
+ +
+ +
+
+ +` +customElements.define('strip-select', class extends HTMLElement{ + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(stripSelect.content.cloneNode(true)) + this.stripSelect = this.shadowRoot.querySelector('.strip-select') + this.slottedOptions + this._value + this.scrollDistance + } + get value() { + return this._value + } + scrollLeft = () => { + this.stripSelect.scrollBy({ + left: -this.scrollDistance, + behavior: 'smooth' + }) + } + + scrollRight = () => { + this.stripSelect.scrollBy({ + left: this.scrollDistance, + behavior: 'smooth' + }) + } + fireEvent = () => { + this.dispatchEvent( + new CustomEvent("change", { + bubbles: true, + composed: true, + detail: { + value: this._value + } + }) + ) + } + connectedCallback() { + const slot = this.shadowRoot.querySelector('slot') + const coverLeft = this.shadowRoot.querySelector('.cover--left') + const coverRight = this.shadowRoot.querySelector('.cover--right') + const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left') + const navButtonRight = this.shadowRoot.querySelector('.nav-button--right') + slot.addEventListener('slotchange', e => { + const assignedElements = slot.assignedElements() + assignedElements.forEach(elem => { + if (elem.hasAttribute('selected')) { + elem.setAttribute('active', '') + this._value = elem.value + } + }) + if (assignedElements.length > 0) { + firstOptionObserver.observe(slot.assignedElements()[0]) + lastOptionObserver.observe(slot.assignedElements()[slot.assignedElements().length - 1]) + } + else { + navButtonLeft.classList.add('hide') + navButtonRight.classList.add('hide') + coverLeft.classList.add('hide') + coverRight.classList.add('hide') + firstOptionObserver.disconnect() + lastOptionObserver.disconnect() + } + }) + const resObs = new ResizeObserver(entries => { + entries.forEach(entry => { + if(entry.contentBoxSize) { + // Firefox implements `contentBoxSize` as a single content rect, rather than an array + const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize; + + this.scrollDistance = contentBoxSize.inlineSize * 0.6 + } else { + this.scrollDistance = entry.contentRect.width * 0.6 + } + }) + }) + resObs.observe(this) + this.stripSelect.addEventListener('option-clicked', e => { + if (this._value !== e.target.value) { + this._value = e.target.value + slot.assignedElements().forEach(elem => elem.removeAttribute('active')) + e.target.setAttribute('active', '') + e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }) + this.fireEvent() + } + }) + const firstOptionObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + navButtonLeft.classList.add('hide') + coverLeft.classList.add('hide') + } + else { + navButtonLeft.classList.remove('hide') + coverLeft.classList.remove('hide') + } + }) + }, + { + threshold: 0.9, + root: this + }) + const lastOptionObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + navButtonRight.classList.add('hide') + coverRight.classList.add('hide') + } + else { + navButtonRight.classList.remove('hide') + coverRight.classList.remove('hide') + } + }) + }, + { + threshold: 0.9, + root: this + }) + navButtonLeft.addEventListener('click', this.scrollLeft) + navButtonRight.addEventListener('click', this.scrollRight) + } +}) + +const stripOption = document.createElement('template') +stripOption.innerHTML = ` + + +` + +//Strip option +customElements.define('strip-option', class extends HTMLElement{ + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(stripOption.content.cloneNode(true)) + this._value + this.radioButton = this.shadowRoot.querySelector('input') + } + get value() { + return this._value + } + fireEvent = () => { + this.dispatchEvent( + new CustomEvent("option-clicked", { + bubbles: true, + composed: true, + detail: { + value: this._value + } + }) + ) + } + handleKeyDown = (e) => { + if (e.key === 'Enter' || e.key === 'Space') { + this.fireEvent() + } + } + connectedCallback() { + this._value = this.getAttribute('value') + this.addEventListener('click', this.fireEvent) + this.addEventListener('keydown', this.handleKeyDown) + } + disconnectedCallback() { + this.removeEventListener('click', this.fireEvent) + this.removeEventListener('keydown', this.handleKeyDown) + } +}) + + +//popup +const smPopup = document.createElement('template') +smPopup.innerHTML = ` + + +`; +customElements.define('sm-popup', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smPopup.content.cloneNode(true)) + + this.allowClosing = false + this.isOpen = false + } + + get open() { + return this.isOpen + } + + resumeScrolling = () => { + const scrollY = document.body.style.top; + window.scrollTo(0, parseInt(scrollY || '0') * -1); + setTimeout(() => { + document.body.style.overflow = 'auto'; + document.body.style.top= 'initial' + }, 300); + } + + show = (pinned, popupStack) => { + if (popupStack) + this.popupStack = popupStack + if (this.popupStack && !this.hasAttribute('open')) { + this.popupStack.push({ + popup: this, + permission: pinned + }) + if (this.popupStack.items.length > 1) { + this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked') + } + this.dispatchEvent( + new CustomEvent("popupopened", { + bubbles: true, + detail: { + popup: this, + popupStack: this.popupStack + } + }) + ) + this.setAttribute('open', '') + this.pinned = pinned + this.isOpen = true + } + this.popupContainer.classList.remove('hide') + this.popup.style.transform = 'none'; + document.body.style.overflow = 'hidden'; + document.body.style.top= `-${window.scrollY}px` + return this.popupStack + } + hide = () => { + if (window.innerWidth < 640) + this.popup.style.transform = 'translateY(100%)'; + else + this.popup.style.transform = 'translateY(3rem)'; + this.popupContainer.classList.add('hide') + this.removeAttribute('open') + if (typeof this.popupStack !== 'undefined') { + this.popupStack.pop() + if (this.popupStack.items.length) { + this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked') + } else { + this.resumeScrolling() + } + } else { + this.resumeScrolling() + } + + if (this.inputFields.length) { + setTimeout(() => { + this.inputFields.forEach(field => { + if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX') + field.checked = false + if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA'|| field.tagName === 'SM-TEXTAREA') + field.value = '' + }) + }, 300); + } + setTimeout(() => { + this.dispatchEvent( + new CustomEvent("popupclosed", { + bubbles: true, + detail: { + popup: this, + popupStack: this.popupStack + } + }) + ) + this.isOpen = false + }, 300); + } + + handleTouchStart = (e) => { + this.touchStartY = e.changedTouches[0].clientY + this.popup.style.transition = 'transform 0.1s' + this.touchStartTime = e.timeStamp + } + + handleTouchMove = (e) => { + if (this.touchStartY < e.changedTouches[0].clientY) { + this.offset = e.changedTouches[0].clientY - this.touchStartY; + this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup()) + } + /*else { + this.offset = this.touchStartY - e.changedTouches[0].clientY; + this.popup.style.transform = `translateY(-${this.offset}px)` + }*/ + } + + handleTouchEnd = (e) => { + this.touchEndTime = e.timeStamp + cancelAnimationFrame(this.touchEndAnimataion) + this.touchEndY = e.changedTouches[0].clientY + this.popup.style.transition = 'transform 0.3s' + this.threshold = this.popup.getBoundingClientRect().height * 0.3 + if (this.touchEndTime - this.touchStartTime > 200) { + if (this.touchEndY - this.touchStartY > this.threshold) { + if (this.pinned) { + this.show() + return + } else + this.hide() + } else { + this.show() + } + } else { + if (this.touchEndY > this.touchStartY) + if (this.pinned) { + this.show() + return + } + else + this.hide() + } + } + + movePopup = () => { + this.popup.style.transform = `translateY(${this.offset}px)` + } + + connectedCallback() { + this.pinned = false + this.popupStack + this.popupContainer = this.shadowRoot.querySelector('.popup-container') + this.popup = this.shadowRoot.querySelector('.popup') + this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot') + this.offset + this.popupHeader = this.shadowRoot.querySelector('.popup-top') + this.touchStartY = 0 + this.touchEndY = 0 + this.touchStartTime = 0 + this.touchEndTime = 0 + this.touchEndAnimataion; + this.threshold = this.popup.getBoundingClientRect().height * 0.3 + + if (this.hasAttribute('open')) + this.show() + this.popupContainer.addEventListener('mousedown', e => { + if (e.target === this.popupContainer && !this.pinned) { + if (this.pinned) { + this.show() + return + } else + this.hide() + } + }) + + this.popupBodySlot.addEventListener('slotchange', () => { + setTimeout(() => { + this.threshold = this.popup.getBoundingClientRect().height * 0.3 + }, 200); + this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'sm-textarea', 'radio') + }) + + this.popupHeader.addEventListener('touchstart', (e) => { this.handleTouchStart(e) }, {passive: true}) + this.popupHeader.addEventListener('touchmove', (e) => {this.handleTouchMove(e)}, {passive: true}) + this.popupHeader.addEventListener('touchend', (e) => {this.handleTouchEnd(e)}, {passive: true}) + } + disconnectedCallback() { + this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, {passive: true}) + this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, {passive: true}) + this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, {passive: true}) + } +}) + +//carousel + +const smCarousel = document.createElement('template') +smCarousel.innerHTML = ` + +
+ +
+ +
+ +
+
+`; + +customElements.define('sm-carousel', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smCarousel.content.cloneNode(true)) + + this.isAutoPlaying = false + this.autoPlayInterval = 5000 + this.autoPlayTimeout + this.initialTimeout + this.activeSlideNum = 0 + this.carouselItems + this.indicators + this.showIndicator = false + this.carousel = this.shadowRoot.querySelector('.carousel') + this.carouselContainer = this.shadowRoot.querySelector('.carousel-container') + this.carouselSlot = this.shadowRoot.querySelector('slot') + this.nextArrow = this.shadowRoot.querySelector('.carousel__button--right') + this.previousArrow = this.shadowRoot.querySelector('.carousel__button--left') + this.indicatorsContainer = this.shadowRoot.querySelector('.indicators') + } + + static get observedAttributes() { + return ['indicator', 'autoplay', 'interval'] + } + + scrollLeft = () => { + this.carousel.scrollBy({ + left: -this.scrollDistance, + behavior: 'smooth' + }) + } + + scrollRight = () => { + this.carousel.scrollBy({ + left: this.scrollDistance, + behavior: 'smooth' + }) + } + + handleIndicatorClick = (e) => { + if (e.target.closest('.dot')) { + const slideNum = parseInt(e.target.closest('.dot').dataset.rank) + if (this.activeSlideNum !== slideNum) { + this.showSlide(slideNum) + } + } + } + + showSlide = (slideNum) => { + this.carousel.scrollTo({ + left: (this.carouselItems[slideNum].getBoundingClientRect().left - this.carousel.getBoundingClientRect().left + this.carousel.scrollLeft), + behavior: 'smooth' + }) + } + + nextSlide = () => { + if (!this.carouselItems) return + let showSlideNo = (this.activeSlideNum + 1) < this.carouselItems.length ? this.activeSlideNum + 1 : 0 + this.showSlide(showSlideNo) + } + + autoPlay = () => { + this.nextSlide() + if (this.isAutoPlaying) { + this.autoPlayTimeout = setTimeout(() => { + this.autoPlay() + }, this.autoPlayInterval); + } + } + + startAutoPlay = () => { + this.setAttribute('autoplay', '') + } + + stopAutoPlay = () => { + this.removeAttribute('autoplay') + } + + connectedCallback() { + this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 + let frag = document.createDocumentFragment(); + if (this.hasAttribute('indicator')) + this.showIndicator = true + + + let firstVisible = false, + lastVisible = false + const allElementsObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (this.showIndicator) { + const activeRank = parseInt(entry.target.dataset.rank) + if (entry.isIntersecting) { + this.indicators[activeRank].classList.add('active') + this.activeSlideNum = activeRank + } + else + this.indicators[activeRank].classList.remove('active') + } + if (!entry.target.previousElementSibling) + if (entry.isIntersecting) { + this.previousArrow.classList.remove('expand') + firstVisible = true + } + else { + this.previousArrow.classList.add('expand') + firstVisible = false + } + if (!entry.target.nextElementSibling) + if (entry.isIntersecting) { + this.nextArrow.classList.remove('expand') + lastVisible = true + } + else { + this.nextArrow.classList.add('expand') + lastVisible = false + } + if (firstVisible && lastVisible) + this.indicatorsContainer.classList.add('hide') + else + this.indicatorsContainer.classList.remove('hide') + }) + }, { + root: this.carouselContainer, + threshold: 0.9 + }) + + const carouselObserver = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 + } + }) + + carouselObserver.observe(this.carouselContainer) + + this.carouselSlot.addEventListener('slotchange', e => { + this.carouselItems = this.carouselSlot.assignedElements() + this.carouselItems.forEach(item => allElementsObserver.observe(item)) + if (this.showIndicator) { + this.indicatorsContainer.innerHTML = `` + this.carouselItems.forEach((item, index) => { + let dot = document.createElement('div') + dot.classList.add('dot') + dot.dataset.rank = index + frag.append(dot) + item.dataset.rank = index + }) + this.indicatorsContainer.append(frag) + this.indicators = this.indicatorsContainer.children + } + }) + + this.addEventListener('keyup', e => { + if (e.code === 'ArrowLeft') + this.scrollRight() + else if (e.code === 'ArrowRight') + this.scrollRight() + }) + + this.nextArrow.addEventListener('click', this.scrollRight) + this.previousArrow.addEventListener('click', this.scrollLeft) + this.indicatorsContainer.addEventListener('click', this.handleIndicatorClick) + } + + async attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'indicator') { + if (this.hasAttribute('indicator')) + this.showIndicator = true + else + this.showIndicator = false + } + if (name === 'autoplay') { + if (this.hasAttribute('autoplay')) { + this.initialTimeout = setTimeout(() => { + this.isAutoPlaying = true + this.autoPlay() + }, this.autoPlayInterval); + } + else { + this.isAutoPlaying = false + clearTimeout(this.autoPlayTimeout) + clearTimeout(this.initialTimeout) + } + + } + if (name === 'interval') { + if (this.hasAttribute('interval') && this.getAttribute('interval').trim() !== '') { + this.autoPlayInterval = Math.abs(parseInt(this.getAttribute('interval').trim())) + } + else { + this.autoPlayInterval = 5000 + } + } + } + } + + disconnectedCallback() { + this.nextArrow.removeEventListener('click', this.scrollRight) + this.previousArrow.removeEventListener('click', this.scrollLeft) + this.indicatorsContainer.removeEventListener('click', this.handleIndicatorClick) + } +}) + +//notifications + +const smNotifications = document.createElement('template') +smNotifications.innerHTML = ` + +
+` + +customElements.define('sm-notifications', class extends HTMLElement { + constructor() { + super() + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smNotifications.content.cloneNode(true)) + } + + handleTouchStart = (e) => { + this.notification = e.target.closest('.notification') + this.touchStartX = e.changedTouches[0].clientX + this.notification.style.transition = 'initial' + this.touchStartTime = e.timeStamp + } + + handleTouchMove = (e) => { + e.preventDefault() + if (this.touchStartX < e.changedTouches[0].clientX) { + this.offset = e.changedTouches[0].clientX - this.touchStartX; + this.touchEndAnimataion = requestAnimationFrame(this.movePopup) + } else { + this.offset = -(this.touchStartX - e.changedTouches[0].clientX); + this.touchEndAnimataion = requestAnimationFrame(this.movePopup) + } + } + + handleTouchEnd = (e) => { + this.notification.style.transition = 'transform 0.3s, opacity 0.3s' + this.touchEndTime = e.timeStamp + cancelAnimationFrame(this.touchEndAnimataion) + this.touchEndX = e.changedTouches[0].clientX + if (this.touchEndTime - this.touchStartTime > 200) { + if (this.touchEndX - this.touchStartX > this.threshold) { + this.removeNotification(this.notification) + } else if (this.touchStartX - this.touchEndX > this.threshold) { + this.removeNotification(this.notification, true) + } else { + this.resetPosition() + } + } else { + if (this.touchEndX > this.touchStartX) { + this.removeNotification(this.notification) + } else { + this.removeNotification(this.notification, true) + } + } + } + + movePopup = () => { + this.notification.style.transform = `translateX(${this.offset}px)` + } + + resetPosition = () => { + this.notification.style.transform = `translateX(0)` + } + + push = (messageBody, type, pinned) => { + let notification = document.createElement('div'), + composition = `` + notification.classList.add('notification') + if (pinned) + notification.classList.add('pinned') + if (type === 'error') { + composition += ` + + + + + ` + } else if (type === 'success') { + composition += ` + + + ` + } + composition += ` +

${messageBody}

+ + Close + + + ` + notification.innerHTML = composition + this.notificationPanel.prepend(notification) + if (window.innerWidth > 640) { + notification.animate([{ + transform: `translateX(1rem)`, + opacity: '0' + }, + { + transform: 'translateX(0)', + opacity: '1' + } + ], this.animationOptions).onfinish = () => { + notification.setAttribute('style', `transform: none;`); + } + } else { + notification.setAttribute('style', `transform: translateY(0); opacity: 1`) + } + notification.addEventListener('touchstart', this.handleTouchStart) + notification.addEventListener('touchmove', this.handleTouchMove) + notification.addEventListener('touchend', this.handleTouchEnd) + } + + removeNotification = (notification, toLeft) => { + if (!this.offset) + this.offset = 0; + + if (toLeft) + notification.animate([{ + transform: `translateX(${this.offset}px)`, + opacity: '1' + }, + { + transform: `translateX(-100%)`, + opacity: '0' + } + ], this.animationOptions).onfinish = () => { + notification.remove() + } + else { + notification.animate([{ + transform: `translateX(${this.offset}px)`, + opacity: '1' + }, + { + transform: `translateX(100%)`, + opacity: '0' + } + ], this.animationOptions).onfinish = () => { + notification.remove() + } + } + } + + clearAll = () => { + Array.from(this.notificationPanel.children).forEach(child => { + this.removeNotification(child) + }) + } + + connectedCallback() { + this.notificationPanel = this.shadowRoot.querySelector('.notification-panel') + this.animationOptions = { + duration: 300, + fill: "forwards", + easing: "ease" + } + this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0]) + this.notification + this.offset + this.touchStartX = 0 + this.touchEndX = 0 + this.touchStartTime = 0 + this.touchEndTime = 0 + this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3 + this.touchEndAnimataion; + + this.notificationPanel.addEventListener('click', e => { + if (e.target.closest('.close'))( + this.removeNotification(e.target.closest('.notification')) + ) + }) + + const observer = new MutationObserver(mutationList => { + mutationList.forEach(mutation => { + if (mutation.type === 'childList') { + if (mutation.addedNodes.length) { + if (!mutation.addedNodes[0].classList.contains('pinned')) + setTimeout(() => { + this.removeNotification(mutation.addedNodes[0]) + }, 5000); + if (window.innerWidth > 640) + this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem'; + else + this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem'; + } else if (mutation.removedNodes.length && !this.notificationPanel.children.length) { + this.notificationPanel.style.padding = 0; + } + } + }) + }) + observer.observe(this.notificationPanel, { + attributes: true, + childList: true, + subtree: true + }) + } +}) + + + +// sm-menu +const smMenu = document.createElement('template') +smMenu.innerHTML = ` + +
+
+ + options + + + + +
+
+ +
+
`; +customElements.define('sm-menu', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smMenu.content.cloneNode(true)) + } + static get observedAttributes() { + return ['value'] + } + get value() { + return this.getAttribute('value') + } + set value(val) { + this.setAttribute('value', val) + } + expand = () => { + if (!this.open) { + this.optionList.classList.remove('hide') + this.optionList.classList.add('no-transformations') + this.open = true + this.icon.classList.add('focused') + this.availableOptions.forEach(option => { + option.setAttribute('tabindex', '0') + }) + } + } + collapse() { + if (this.open) { + this.open = false + this.icon.classList.remove('focused') + this.optionList.classList.add('hide') + this.optionList.classList.remove('no-transformations') + this.availableOptions.forEach(option => { + option.removeAttribute('tabindex') + }) + } + } + connectedCallback() { + this.availableOptions + this.containerDimensions + this.optionList = this.shadowRoot.querySelector('.options') + let slot = this.shadowRoot.querySelector('.options slot'), + menu = this.shadowRoot.querySelector('.menu') + this.icon = this.shadowRoot.querySelector('.icon') + this.open = false; + menu.addEventListener('click', e => { + if (!this.open) { + this.expand() + } else { + this.collapse() + } + }) + menu.addEventListener('keydown', e => { + if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { + e.preventDefault() + this.availableOptions[0].focus() + } + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + if (!this.open) { + this.expand() + } else { + this.collapse() + } + } + }) + this.optionList.addEventListener('keydown', e => { + if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { + e.preventDefault() + if (document.activeElement.previousElementSibling) { + document.activeElement.previousElementSibling.focus() + } + } + if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { + e.preventDefault() + if (document.activeElement.nextElementSibling) + document.activeElement.nextElementSibling.focus() + } + }) + this.optionList.addEventListener('click', e => { + this.collapse() + }) + slot.addEventListener('slotchange', e => { + this.availableOptions = slot.assignedElements() + this.containerDimensions = this.optionList.getBoundingClientRect() + }); + window.addEventListener('mousedown', e => { + if (!this.contains(e.target) && e.button !== 2) { + this.collapse() + } + }) + } +}) + +// option +const smMenuOption = document.createElement('template') +smMenuOption.innerHTML = ` + +
+ +
`; +customElements.define('sm-menu-option', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smMenuOption.content.cloneNode(true)) + } + + connectedCallback() { + this.addEventListener('keyup', e => { + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.click() + } + }) + } +}) + +// tab-header + +const smTabHeader = document.createElement('template') +smTabHeader.innerHTML = ` + +
+
+ +
+
+
+`; + +customElements.define('sm-tab-header', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTabHeader.content.cloneNode(true)) + + this.indicator = this.shadowRoot.querySelector('.indicator'); + this.tabSlot = this.shadowRoot.querySelector('slot'); + this.tabHeader = this.shadowRoot.querySelector('.tab-header'); + } + + sendDetails(element) { + this.dispatchEvent( + new CustomEvent("switchtab", { + bubbles: true, + detail: { + target: this.target, + rank: parseInt(element.getAttribute('rank')) + } + }) + ) + } + + moveIndiactor(tabDimensions) { + //if(this.isTab) + this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) + //else + //this.indicator.setAttribute('style', `width: calc(${tabDimensions.width}px - 1.6rem); transform: translateX(calc(${ tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px + 0.8rem)`) + } + + connectedCallback() { + if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return; + this.prevTab + this.allTabs + this.activeTab + this.isTab = false + this.target = this.getAttribute('target') + + if (this.hasAttribute('variant') && this.getAttribute('variant') === 'tab') { + this.isTab = true + } + + this.tabSlot.addEventListener('slotchange', () => { + this.tabSlot.assignedElements().forEach((tab, index) => { + tab.setAttribute('rank', index) + }) + }) + this.allTabs = this.tabSlot.assignedElements(); + + this.tabSlot.addEventListener('click', e => { + if (e.target === this.prevTab || !e.target.closest('sm-tab')) + return + if (this.prevTab) + this.prevTab.classList.remove('active') + e.target.classList.add('active') + + e.target.scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + inline: 'center' + }) + this.moveIndiactor(e.target.getBoundingClientRect()) + this.sendDetails(e.target) + this.prevTab = e.target; + this.activeTab = e.target; + }) + let resizeObserver = new ResizeObserver(entries => { + entries.forEach((entry) => { + if (this.prevTab) { + let tabDimensions = this.activeTab.getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + } + }) + }) + resizeObserver.observe(this) + let observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + this.indicator.style.transition = 'none' + if (this.activeTab) { + let tabDimensions = this.activeTab.getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + } else { + this.allTabs[0].classList.add('active') + let tabDimensions = this.allTabs[0].getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + this.sendDetails(this.allTabs[0]) + this.prevTab = this.tabSlot.assignedElements()[0]; + this.activeTab = this.prevTab; + } + } + }) + }, { + threshold: 1.0 + }) + observer.observe(this) + } +}) + +// tab-panels + +const smTabPanels = document.createElement('template') +smTabPanels.innerHTML = ` + +
+ Nothing to see here. +
+`; + +customElements.define('sm-tab-panels', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTabPanels.content.cloneNode(true)) + this.panelSlot = this.shadowRoot.querySelector('slot'); + } + connectedCallback() { + + //animations + let flyInLeft = [{ + opacity: 0, + transform: 'translateX(-1rem)' + }, + { + opacity: 1, + transform: 'none' + } + ], + flyInRight = [{ + opacity: 0, + transform: 'translateX(1rem)' + }, + { + opacity: 1, + transform: 'none' + } + ], + flyOutLeft = [{ + opacity: 1, + transform: 'none' + }, + { + opacity: 0, + transform: 'translateX(-1rem)' + } + ], + flyOutRight = [{ + opacity: 1, + transform: 'none' + }, + { + opacity: 0, + transform: 'translateX(1rem)' + } + ], + animationOptions = { + duration: 300, + fill: 'forwards', + easing: 'ease' + } + this.prevPanel + this.allPanels + this.previousRank + + this.panelSlot.addEventListener('slotchange', () => { + this.panelSlot.assignedElements().forEach((panel) => { + panel.classList.add('hide-completely') + }) + }) + this.allPanels = this.panelSlot.assignedElements() + this._targetBodyFlyRight = (targetBody) => { + targetBody.classList.remove('hide-completely') + targetBody.animate(flyInRight, animationOptions) + } + this._targetBodyFlyLeft = (targetBody) => { + targetBody.classList.remove('hide-completely') + targetBody.animate(flyInLeft, animationOptions) + } + document.addEventListener('switchtab', e => { + if (e.detail.target !== this.id) + return + + if (this.prevPanel) { + let targetBody = this.allPanels[e.detail.rank], + currentBody = this.prevPanel; + if (this.previousRank < e.detail.rank) { + if (currentBody && !targetBody) + currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + } + else if (targetBody && !currentBody) { + this._targetBodyFlyRight(targetBody) + } else if (currentBody && targetBody) { + currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + this._targetBodyFlyRight(targetBody) + } + } + } else { + if (currentBody && !targetBody) + currentBody.animate(flyOutRight, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + } + else if (targetBody && !currentBody) { + this._targetBodyFlyLeft(targetBody) + } else if (currentBody && targetBody) { + currentBody.animate(flyOutRight, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + this._targetBodyFlyLeft(targetBody) + } + } + } + } else { + this.allPanels[e.detail.rank].classList.remove('hide-completely') + } + this.previousRank = e.detail.rank + this.prevPanel = this.allPanels[e.detail.rank]; + }) + } +}) diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..8829112 --- /dev/null +++ b/css/main.css @@ -0,0 +1,2067 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Roboto", sans-serif; +} + +:root { + font-size: clamp(1rem, 1.2vmax, 3rem); +} + +html, body { + height: 100%; + scroll-behavior: smooth; +} + +body { + --accent-color: #1976D2; + --light-shade: rgba(var(--text-color), 0.06); + --text-color: 17, 17, 17; + --text-color-light: 100, 100, 100; + --foreground-color: 255, 255, 255; + --background-color: #F6f6f6; + --error-color: red; + color: rgba(var(--text-color), 1); + background: var(--background-color); + display: flex; + flex-direction: column; +} + +body[data-theme=dark] { + --accent-color: #42A5F5; + --text-color: 240, 240, 240; + --text-color-light: 170, 170, 170; + --foreground-color: 20, 20, 20; + --background-color: #0a0a0a; + --error-color: rgb(255, 106, 106); +} + +/* h1,h2,h3,h4,h5,h6{ + font-family: 'Montserrat', sans-serif; +} */ +.full-bleed { + grid-column: 1/4; +} + +.h1 { + font-size: 2.5rem; +} + +.h2 { + font-size: 2rem; +} + +.h3 { + font-size: 1.4rem; +} + +.h4 { + font-size: 1rem; +} + +.h5 { + font-size: 0.8rem; +} + +.uppercase { + text-transform: uppercase; +} + +.capitalize { + text-transform: capitalize; +} + +p { + font-size: 0.8; + max-width: 60ch; + line-height: 1.7; + color: rgba(var(--text-color), 0.8); +} +p:not(:last-of-type) { + margin-bottom: 1rem; +} + +img { + object-fit: cover; +} + +a { + color: inherit; + text-decoration: none; +} +a:focus-visible { + box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; +} + +button { + position: relative; + display: inline-flex; + overflow: hidden; + align-items: center; + background: none; + cursor: pointer; + outline: none; + color: inherit; + font-size: 0.9rem; + font-weight: 500; + border-radius: 0.2rem; + padding: 0.5rem 0.6rem; + -webkit-tap-highlight-color: transparent; + border: none; +} + +button:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +a.button:any-link { + position: relative; + display: inline-flex; + align-items: center; + background: none; + cursor: pointer; + outline: none; + font-weight: 500; + font-size: 0.8rem; + border-radius: 0.3rem; + padding: 0.5rem 0.6rem; + align-self: flex-start; + text-decoration: none; + color: rgba(var(--text-color), 0.7); + -webkit-tap-highlight-color: transparent; + background-color: rgba(var(--text-color), 0.06); +} +a.button:any-link .icon { + margin-right: 0.3rem; + height: 1.2rem; +} + +a:any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +.button { + background-color: rgba(var(--text-color), 0.06); +} + +sm-button { + --border-radius: 0.3rem; +} + +ul { + list-style: none; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.hide { + opacity: 0; + pointer-events: none; +} + +.hide-completely { + display: none !important; +} + +.no-transformations { + transform: none !important; +} + +.overflow-ellipsis { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.breakable { + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.flow-column { + grid-auto-flow: column; +} + +.gap-0-5 { + gap: 0.5rem; +} + +.gap-1 { + gap: 1rem; +} + +.gap-1-5 { + gap: 1.5rem; +} + +.gap-2 { + gap: 2rem; +} + +.gap-3 { + gap: 3rem; +} + +.text-align-right { + text-align: right; +} + +.align-start { + align-items: flex-start; +} + +.align-center { + align-items: center; +} + +.text-center { + text-align: center; +} + +.justify-start { + justify-content: start; +} + +.justify-center { + justify-content: center; +} + +.justify-right { + margin-left: auto; +} + +.align-self-center { + align-self: center; +} + +.justify-self-center { + justify-self: center; +} + +.justify-self-start { + justify-self: start; +} + +.direction-column { + flex-direction: column; +} + +.space-between { + justify-content: space-between; +} + +.w-100 { + width: 100%; +} + +.ripple { + position: absolute; + border-radius: 50%; + transform: scale(0); + background: rgba(var(--text-color), 0.16); + pointer-events: none; +} + +.interact { + position: relative; + overflow: hidden; + cursor: pointer; + -webkit-tap-highlight-color: transparent; +} + +.observe-empty-state:empty { + display: none; +} + +.observe-empty-state:not(:empty) ~ .empty-state { + display: none; +} + +.icon { + width: 1.5rem; + height: 1.5rem; + fill: rgba(var(--text-color), 0.9); +} + +.button__icon { + height: 1.2rem; + width: 1.2rem; +} +.button__icon--left { + margin-right: 0.5rem; +} +.button__icon--right { + margin-left: 0.5rem; +} + +.popup__header { + display: grid; + gap: 0.5rem; + width: 100%; + padding: 0 1.5rem 0 0.5rem; + align-items: center; + grid-template-columns: auto 1fr; +} + +.popup__header__close { + padding: 0.5rem; + cursor: pointer; +} + +#confirmation_popup, +#prompt_popup { + flex-direction: column; +} +#confirmation_popup h4, +#prompt_popup h4 { + font-weight: 500; + margin-bottom: 0.5rem; +} +#confirmation_popup sm-button, +#prompt_popup sm-button { + margin: 0; +} +#confirmation_popup .flex, +#prompt_popup .flex { + padding: 0; + margin-top: 1rem; +} +#confirmation_popup .flex sm-button:first-of-type, +#prompt_popup .flex sm-button:first-of-type { + margin-right: 0.6rem; + margin-left: auto; +} + +input[type=checkbox] { + display: none; +} + +.checkbox svg { + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + height: 1.6rem; + width: 1.6rem; +} + +.checkbox svg .check { + stroke-dashoffset: 70; + stroke-dasharray: 70; + -webkit-transition: stroke-dashoffset 0.3s ease; + transition: stroke-dashoffset 0.3s ease; +} + +.checkbox input:checked + svg { + stroke: #00C853; +} + +.checkbox input:checked + svg .check { + stroke-dashoffset: 0; +} + +#settings_page { + padding: 1rem; +} + +#settings_page section { + width: 100%; + border-bottom: 1px solid rgba(var(--text-color), 0.1); + display: -ms-grid; + display: grid; + padding-bottom: 1rem; +} + +#settings_page section:last-of-type { + border: none; +} + +#settings_page h3, +#settings_page h4 { + display: flexbox; + width: 100%; + -ms-flex-item-align: center; + align-self: center; +} + +#settings_page h5 { + margin: 0; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + font-weight: normal; + opacity: 0.9; +} + +#settings_page button { + background: transparent; + border: 1px solid var(--accent-color); + color: var(--accent-color); + margin: 1rem 0; + width: -webkit-min-content; + width: -moz-min-content; + width: min-content; + white-space: nowrap; +} +#settings_page button .icon { + fill: var(--accent-color); +} + +#settings_page > div { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + padding: 1rem 0; + -ms-flex-line-pack: center; + align-content: center; +} + +#settings_page .row { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +#settings_page .row span { + font-size: 0.8rem; +} + +#settings_page .border-card { + color: inherit; + text-decoration: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 0.5rem 0; + width: auto; +} + +#settings_page .border-card svg { + fill: var(--accent-color); + display: flexbox; + height: 2rem; + -ms-flex-item-align: center; + align-self: center; + margin: 0.5rem; +} + +.container-card { + position: relative; + background: rgba(var(--foreground-color), 1); + border-radius: 0.4rem; +} + +.solid-background { + transition: background-color 2s; + background: rgba(var(--foreground-color), 1); +} + +a { + color: var(--accent-color); + text-decoration: none; +} + +.medium-top-bottom-margin { + margin: 0.5rem 0; +} + +#sign_in_page { + display: grid; + position: fixed; + z-index: 5; + top: 0; + bottom: 0; + left: 0; + right: 0; + place-content: center; + background-color: rgba(var(--foreground-color), 1); +} + +.task { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto 1fr; + grid-template-columns: auto 1fr; + margin: 0 1rem; +} + +.task:last-of-type .left .line { + -webkit-transform: scaleY(0); + transform: scaleY(0); +} + +.task .left { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + padding-top: 0.5rem; +} + +.task .left .circle { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + position: relative; + -ms-flex-item-align: start; + align-self: flex-start; + height: 1rem; + width: 1rem; + border-radius: 50%; + background: rgba(var(--foreground-color), 1); + border: solid 2px rgba(var(--text-color), 0.4); + z-index: 1; +} + +.task .left .line { + position: absolute; + left: 50%; + height: 100%; + width: 2px; + -webkit-transform: translateX(-50%) scaleY(1); + transform: translateX(-50%) scaleY(1); + background-color: rgba(var(--text-color), 0.4); +} + +.task .right { + margin-left: 1rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; +} + +.task .right .apply-cont { + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} + +.task .right .apply-cont h4 { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.task h4 { + margin-top: 0.4rem; + margin-bottom: 1rem; +} + +.task p { + white-space: pre-line; + padding-bottom: 2rem; +} + +.task .assigned-interns .assigned-intern { + padding: 0.4rem; +} + +.completed-task .left .circle { + border: solid 2px #00C853 !important; + background: #00C853 !important; +} + +.completed-task .left .line { + background-color: #00C853 !important; +} + +.page { + gap: 1rem; + display: grid; + position: relative; + margin: 1rem; + animation: fadein 0.4s ease; +} + +.fade-in { + -webkit-animation: fadein 0.4s ease; + animation: fadein 0.4s ease; +} + +@-webkit-keyframes fadein { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fadein { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +.title { + font-weight: 500; +} + +.padding { + padding: 1rem; +} + +#dashboard { + padding-bottom: 5rem; + -ms-grid-columns: auto; + grid-template-columns: auto; +} + +.input { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + margin: 1rem 0; + background: rgba(var(--text-color), 0.06); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 0.2rem; + overflow: hidden; +} + +.input input, +.input textarea { + color: var(--light-text); + padding: 1rem 0.5rem; + width: 100%; + font-size: 1rem; + background: transparent; + margin-left: 0; +} + +.input input:focus, +.input textarea:focus { + outline: none; +} + +.input svg { + height: 1.2rem; + width: 1.2rem; + margin: 0 0.5rem 0 1rem; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; +} + +.input:focus-within { + background: rgba(0, 0, 0, 0.1); +} + +input, +button, +textarea { + position: relative; + border: none; + font-size: 1rem; + border-radius: 0.2rem; +} + +button[disabled] { + opacity: 0.5 !important; + cursor: default; +} + +.show { + display: block; +} + +.hide-on-mobile, +.hide-page-on-mobile { + display: none; +} + +.hide-on-desktop { + display: initial; +} + +.no-transformations { + -webkit-transform: none !important; + transform: none !important; +} + +.no-bottom-margin { + margin-bottom: 0; +} + +.top-margin { + margin-top: 0.3rem; +} + +.chatInput { + overflow: hidden; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0; +} + +.chatInput textarea { + resize: none; + line-height: 1.6; +} + +.chatInput button { + -webkit-transition: -webkit-transform 0.3s ease; + transition: -webkit-transform 0.3s ease; + transition: transform 0.3s ease; + transition: transform 0.3s ease, -webkit-transform 0.3s ease; + -webkit-transform: scale(0); + transform: scale(0); + -ms-flex-item-align: end; + align-self: flex-end; + padding: 1rem; +} + +.chatInput button svg { + margin: 0; + fill: rgba(var(--text-color), 1); +} + +#top_nav { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0.5rem; + z-index: 4; +} + +#top_nav .spacer { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +#top_nav .logo { + margin-right: 0.5rem; +} + +.logo { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: 1.2rem; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; +} + +.logo .cls-2, +.logo .cls-3 { + fill: rgba(var(--text-color), 1); + font-size: 146.9px; + font-family: ArialMT, Arial; +} + +.logo svg { + height: 2.5rem; +} + +.logo h4 { + margin: 0; +} + +.active { + opacity: 1 !important; + color: var(--accent-color); +} + +.active svg { + fill: var(--accent-color); +} + +.svg-margin-right svg { + margin-right: 0.5rem; +} + +.project-card { + text-transform: capitalize; +} + +.intern-card { + user-select: none; +} + +.intern-card span:first-of-type { + display: flex; + justify-content: center; + align-items: center; + flex-shrink: 0; + padding: 0.8rem; + border-radius: 50%; + background: #673AB7; + margin-right: 1rem; + color: white; + font-weight: 500; + font-size: 1.2rem; + line-height: 0; +} + +.intern-card span:first-of-type::after { + content: ""; + display: block; + padding-bottom: 100%; +} + +.intern-card span:nth-of-type(2) { + flex: 1; + text-transform: capitalize; + flex-shrink: 0; +} + +.intern-card span:nth-of-type(3) { + display: inline-flex; + align-items: center; + align-content: center; + font-weight: 500; + font-size: 1.2rem; + color: var(--light-text); +} + +.intern-card span:nth-of-type(3) svg { + fill: #FF5722 !important; + height: 1rem !important; + width: 1rem !important; + margin-right: 0.2rem; +} + +.card { + display: flex; + flex-direction: row; + position: relative; + align-items: center; + margin-bottom: 0.5rem; + padding: 1rem; +} + +.request-card { + display: flex; + position: relative; + margin-bottom: 0.5rem; + -webkit-box-align: left; + -ms-flex-align: left; + align-items: left; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding: 1rem; + border-bottom: 1px solid rgba(var(--text-color), 0.1); +} + +.request-card p { + margin-top: 0; + width: 100%; + font-size: 1rem; +} + +.request-card b { + font-weight: 500; +} + +.request-card button { + padding: 0.2rem 0.6rem 0.2rem 0; +} + +.request-card button:first-of-type { + margin-left: auto; +} + +.request-card:last-of-type { + border-bottom: none; +} + +.dropdown { + position: relative; +} + +.dropdown-content { + overflow: hidden; + position: absolute; + z-index: 2; + margin: 1rem; + right: 2rem; + min-width: 24rem; + background: rgba(var(--foreground-color), 1); + box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.24); + border-radius: 0.5rem; +} + +#intern_updates .container-header { + padding-right: 0; + border-bottom: 1px solid rgba(var(--text-color), 0.1); +} + +#intern_updates .container-header button { + padding: 1rem 0; + border-bottom: 0.2rem solid transparent; + border-radius: 0; + opacity: 0.7; +} + +#intern_updates .container-header button:first-of-type { + margin-right: 1rem; +} + +#intern_updates .container-header button:last-of-type { + margin-right: 1rem; +} + +#intern_updates .container-header .active { + color: rgba(var(--text-color), 1); + border-bottom: 0.2rem solid var(--accent-color); +} + +#update_container, +#requests_container { + display: flex; + max-height: 80vh; + overflow-y: auto; + flex-direction: column; +} + +#updates { + transition: opacity 0.3s ease; +} + +.update { + display: flex; + flex-direction: column; + padding: 1rem; +} + +.update__project-name { + font-size: 1.2rem; + max-width: 60ch; + margin: 0.3rem 0 0.5rem 0; + font-weight: bold; + text-transform: capitalize; +} + +.update__sender { + color: var(--accent-color); + font-size: 0.9rem; + font-weight: 500; +} + +.update__message { + white-space: pre-line; +} + +.container-header { + display: flex; + align-items: center; + flex-direction: row; + width: 100%; + padding: 0 1rem; +} + +.container-header h3 { + flex: 1; + font-weight: 500; +} + +.container-header span { + color: var(--accent-color); + border-radius: 0.2rem; + margin-right: 0.2rem; + padding: 0.5rem 1rem; + font-weight: 500; +} + +.back-arrow { + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + width: 2rem; + height: 2rem; + padding: 0.5rem 0.5rem 0.5rem 0; + cursor: pointer; +} + +.close-svg, +.tick-mark { + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + height: 2rem; + width: 2rem; +} + +.close-svg { + padding: 0.6rem; +} + +#textCopied { + padding: 1rem; + border-radius: 2rem; + background: var(--sec-color); + position: fixed; + bottom: 0; + pointer-events: none; + margin: 2rem 0; + left: 50%; + transform: translateX(-50%); + transition: 0.3s opacity ease; + z-index: 10; +} + +#intern_info { + flex-direction: column; +} + +#intern_info div { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + margin-bottom: 1rem; +} + +#intern_info div span { + flex: 1; + word-break: break-all; + font-size: 0.9rem; +} + +#intern_info div svg { + fill: rgba(var(--text-color), 1); + height: 2.5rem; + padding: 0.6rem; + overflow: visible; +} + +#intern_info .gold-fill { + fill: #FF5722; +} + +#intern_info #update_intern_score h4 { + margin: 0; + font-size: 2rem; +} + +#intern_info #update_intern_score button { + border: 1px solid rgba(var(--text-color), 0.1); +} + +#intern_info #update_intern_score button svg { + stroke-width: 10; + fill: none; + stroke: var(--accent-color); +} + +#intern_info #update_intern_score rect { + stroke: transparent; +} + +#intern_info h3 { + text-transform: capitalize; +} + +#intern_info h4, +#intern_info h5 { + margin-top: 0.5rem; +} + +#project_info { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.branch-btn { + border-radius: 0; + padding: 0.5rem; + border-radius: 0.2rem; + margin: 0.5rem 0.5rem 0.5rem 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.active-branch { + opacity: 1; + color: var(--accent-color); + background: rgba(var(--text-color), 0.04); +} + +.active-project { + background: rgba(var(--text-color), 0.06); +} + +.opac { + opacity: 1 !important; +} + +.task-list-item { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto auto 1fr auto; + grid-template-columns: auto auto 1fr auto; + grid-template-areas: "status . title options" "status . interns interns" "status . description description"; + padding: 1rem; + gap: 0.5rem; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: rgba(var(--text-color), 0.02); +} + +.task-list-item .checkbox { + -ms-grid-row-span: 3; + grid-area: status; + padding: 0.5rem 0.5rem 0.5rem 0; + -ms-flex-item-align: start !important; + align-self: flex-start !important; +} + +.task-list-item:first-of-type { + margin-top: 1rem; + border-radius: 0.2rem 0.2rem 0 0; +} + +.task-list-item:last-of-type { + border-radius: 0 0 0.2rem 0.2rem; + border-bottom: none; + margin-bottom: 1rem; +} + +.task-list-item h4 { + font-weight: 500; + margin: 0; +} + +.task-list-item .title { + grid-area: title; +} + +.task-list-item .assigned-interns { + -ms-grid-column-span: 2; + grid-area: interns; +} + +.task-list-item .task-option { + grid-area: options; + cursor: pointer; + opacity: 1; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; +} + +.task-list-item .task-option svg { + width: 2rem; + height: 2rem; + padding: 0.5rem; + overflow: visible; + fill: rgba(var(--text-color), 0.8); +} + +.task-list-item p { + -ms-grid-column-span: 2; + grid-area: description; + margin: 0; + text-overflow: ellipsis; + overflow: hidden; + max-width: 100%; +} + +.assigned-interns { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.assigned-interns .assigned-intern { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + font-size: 0.8rem; + margin: 0.2rem 0.5rem 0.2rem 0; + padding: 0.2rem 0 0.2rem 0.4rem; + border-radius: 0.2rem; + border: 1px solid rgba(var(--text-color), 0.24); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + white-space: nowrap; + text-transform: capitalize; +} + +.assigned-interns .assigned-intern button { + padding: 0.2rem; +} + +.assigned-interns .assigned-intern button svg { + padding: 0.2rem; + height: 1rem; + width: 1rem; +} + +.commit { + color: var(--accent-color); + border: 1px solid var(--accent-color); + padding: 0.6rem; +} + +#task_context { + -webkit-transition: 0.3s opacity ease; + transition: 0.3s opacity ease; + top: 0; + right: 0; + margin: 0 2rem; + list-style: none; + padding: 0.5rem 0; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 0.2rem; + position: absolute; + background: rgba(var(--foreground-color), 1); + -webkit-box-shadow: 0.2rem 0.4rem 1rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); + box-shadow: 0.2rem 0.4rem 1rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); +} + +#task_context li { + padding: 0.8rem 1rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +#task_context li svg { + margin-right: 1rem; + width: 1.2rem; + height: 1.2rem; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; +} + +.temp-task { + padding: 1rem; + background: rgba(var(--text-color), 0.02); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.temp-task .input { + margin: 0.4rem 0; +} + +#branch_container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + margin: 1rem 0; +} + +#notification { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +#bottom_nav { + position: fixed; + bottom: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + width: 100vw; + background: rgba(var(--foreground-color), 1); + z-index: 4; + border-top: 1px solid rgba(var(--text-color), 0.1); +} + +#bottom_nav button { + padding: 0.2rem; + width: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + font-size: 0.7rem; + font-weight: normal; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +#bottom_nav button svg { + margin: 0.4rem; +} + +#show_message { + -webkit-transform: translate(0, 0.4rem); + transform: translate(0, 0.4rem); + -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; + transition: opacity 0.3s ease, -webkit-transform 0.3s ease; + transition: transform 0.3s ease, opacity 0.3s ease; + transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease; + -webkit-box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16); + box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + color: white; + position: fixed; + bottom: 0; + right: 0; + width: 100%; + z-index: 11; +} + +#show_message span { + font-weight: 500; + padding: 1rem; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +#show_message button { + padding: 0.5rem 1rem; + margin: 0; +} + +#show_message button svg { + stroke: white; +} + +#interns_list { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + min-width: 20rem; +} + +#interns_list #interns_list_container { + min-height: 50vh; + max-height: 50vh; + overflow-y: auto; +} + +#best_interns_container, +#project_list_container { + margin-bottom: 1rem; +} + +#best_interns_container .container-header, +#project_list_container .container-header { + padding-right: 0; +} + +#best_interns_container .container-header .icon, +#project_list_container .container-header .icon { + margin-right: 0.5rem; +} + +#edit_data_fig { + fill: rgba(var(--text-color), 0.6); + width: 60vw; + margin: 2rem 0; +} + +.header { + position: -webkit-sticky; + position: sticky; + top: 0; + background: rgba(var(--foreground-color), 1); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row; + flex-flow: row; + border-bottom: 1px solid rgba(var(--text-color), 0.1); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + z-index: 2; +} + +.header svg { + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + height: 2rem; + width: 2rem; + cursor: pointer; + padding: 0.4rem; + margin-left: 1rem; +} + +.header h3 { + padding: 0 0.5rem; + display: inline-flexbox; +} + +.appear-on-scroll-up { + position: fixed !important; + top: 0; + width: 100%; + height: 4rem !important; +} + +#loading_page { + display: grid; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 5; + text-align: center; + place-content: center; + justify-items: center; + background-color: rgba(var(--foreground-color), 1); +} + +.loading-message { + font-size: 1.3rem; + margin: 1.5rem 0 0.5rem 0; +} + +#loading_page__footer { + position: absolute; + bottom: 0; + width: 100%; + padding: 1.5rem; +} +#loading_page__footer .icon { + height: 4rem; + width: 4rem; +} + +.loader { + height: 2rem; + width: 2rem; + stroke-width: 8; + overflow: visible; + stroke: var(--accent-color); + fill: none; + stroke-dashoffset: 180; + stroke-dasharray: 180; + animation: load 3.6s linear infinite, spin 1s linear infinite; +} + +@keyframes load { + 50% { + stroke-dashoffset: 0; + } + 100% { + stroke-dashoffset: -180; + } +} +@keyframes spin { + 100% { + transform: rotate(360deg); + } +} +#status_map_container { + position: relative; + overflow: hidden; + background: #B9F6CA; +} + +#status_map_container .branch-btn { + color: rgba(0, 0, 0, 0.8); +} + +#status_map_container p { + color: rgba(0, 0, 0, 0.9); +} + +#status_map_container .active-branch { + color: white; + background: rgba(0, 200, 83, 0.6); +} + +#status_map_container #status_map { + position: relative; + z-index: 1; + padding: 1rem; + color: #000; +} + +#status_map_container #status_map h2 { + margin: 0.4rem 0; + text-transform: capitalize; +} + +#status_map_container #status_map .circle { + background: #B9F6CA; + border: 2px solid rgba(0, 0, 0, 0.4); +} + +#status_map_container #status_map .line { + background: rgba(0, 0, 0, 0.4); +} + +#status_map_container #status_map .assigned-intern { + border: rgba(0, 0, 0, 0.4) 1px solid; +} + +#status_map_container #status_map .apply-btn { + color: #1B5E20; + background: rgba(0, 200, 83, 0.2); +} + +.apply-btn { + padding: 0.3rem 0.6rem; +} + +.watching { + position: relative; + padding-left: 1rem; + padding-top: 1rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #000; + z-index: 1; +} + +.watching h4 { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + font-weight: 500; +} + +.watching button { + padding: 1rem; +} + +.watching button svg { + fill: none !important; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + stroke: #000; +} + +#right { + padding: 0 1rem; +} + +#right div:first-of-type h2 { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + margin: 0.4rem 0; +} + +#right div:first-of-type button { + border: 1px solid rgba(var(--text-color), 0.06); +} + +.center { + position: relative; + display: -ms-grid; + display: grid; + place-content: center; + height: 100%; + text-align: center; +} + +.slide-left { + -webkit-animation: slide-left 0.4s ease; + animation: slide-left 0.4s ease; +} + +@-webkit-keyframes slide-left { + 100% { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + opacity: 0; + } +} +@keyframes slide-left { + 100% { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + opacity: 0; + } +} +.update-mi svg { + -webkit-animation: shake 0.6s ease; + animation: shake 0.6s ease; + -webkit-transform-origin: top; + transform-origin: top; +} + +@-webkit-keyframes shake { + 0% { + -webkit-transform: rotate(30deg); + transform: rotate(30deg); + } + 20% { + -webkit-transform: rotate(-30deg); + transform: rotate(-30deg); + } + 40% { + -webkit-transform: rotate(20deg); + transform: rotate(20deg); + } + 60% { + -webkit-transform: rotate(-20deg); + transform: rotate(-20deg); + } + 80% { + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } +} +@keyframes shake { + 0% { + -webkit-transform: rotate(30deg); + transform: rotate(30deg); + } + 20% { + -webkit-transform: rotate(-30deg); + transform: rotate(-30deg); + } + 40% { + -webkit-transform: rotate(20deg); + transform: rotate(20deg); + } + 60% { + -webkit-transform: rotate(-20deg); + transform: rotate(-20deg); + } + 80% { + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } +} +.settings-mi svg { + -webkit-animation: rot 0.6s ease; + animation: rot 0.6s ease; + -webkit-transform-origin: center; + transform-origin: center; +} + +@-webkit-keyframes rot { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(60deg); + transform: rotate(60deg); + } +} +@keyframes rot { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(60deg); + transform: rotate(60deg); + } +} +.capitalise { + text-transform: capitalize; +} + +#show_all, +#project_explorer { + margin: 0; +} + +#admin_panel { + padding: 0 1.5rem; + display: grid; + gap: 1.5rem; +} + +#admin_panel__header { + display: grid; + gap: 0 1rem; + padding: 0.5rem 0; + grid-template-columns: 1fr auto; + align-items: center; +} + +#project_editing_panel { + padding: 1rem; +} + +@media only screen and (min-width: 640px) { + .hide-on-desktop { + display: none !important; + } + + .hide-on-mobile { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } + + .hide-page-on-mobile { + display: -ms-grid; + display: grid; + } + + sm-popup { + --width: 24rem; + } + + .popup__header { + padding: 1.5rem 1.5rem 0 0.5rem; + } + + .page, +#show_all, +#project_explorer { + margin: 1rem 4vw; + } + + #top_nav { + padding: 1rem 2vw; + } + + #settings_page { + padding: 1rem 2rem; + } + + .logo { + -webkit-box-pack: left; + -ms-flex-pack: left; + justify-content: left; + width: auto; + } + + #show_message { + -webkit-transform: translate(0.4rem, 0); + transform: translate(0.4rem, 0); + margin: 1rem; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 0.2rem; + } + + #sign_in { + width: 24rem; + height: auto; + border-radius: 0.4rem; + } + + #floating_btn { + margin: 1rem; + } + + #dashboard { + -ms-grid-columns: 3fr 1fr; + grid-template-columns: 3fr 1fr; + } + + #dashboard #status_map_container { + -ms-flex-item-align: start; + align-self: flex-start; + } + + #dashboard #status_map_container .watching { + padding-left: 2rem; + } + + #dashboard #status_map_container #status_map { + padding: 1rem 2rem; + } + + .task .apply-btn { + opacity: 0; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; + } + + .task:hover .apply-btn { + opacity: 1; + } + + #intern_info { + width: 24rem; + } + + .hover { + -webkit-transition: background 0.3s ease; + transition: background 0.3s ease; + cursor: pointer; + } + + .hover:hover { + background: rgba(var(--text-color), 0.06); + } + + #admin_panel { + grid-template-columns: 16rem 1fr; + grid-template-rows: auto 1fr; + grid-template-areas: "admin-header admin-header" ". ."; + } + + #admin_panel__header { + grid-area: admin-header; + } + + #edit_data_fig { + width: 16rem; + -ms-grid-column-align: center; + justify-self: center; + } + + #interns, +#projects { + display: flex; + flex-direction: column; + max-height: calc(100vh - 16rem); + overflow-y: auto; + } + + .task-list-item .task-option { + opacity: 0; + } + + .task-list-item:hover .task-option { + opacity: 1; + } + + #project_explorer { + display: -ms-grid; + display: grid; + align-items: flex-start; + -ms-grid-columns: 1fr 3fr; + grid-template-columns: 1fr 3fr; + grid-template-areas: "header header" "left right"; + } + + #project_explorer .header { + border-radius: 0.4rem 0.4rem 0 0; + -ms-grid-column-span: 2; + grid-area: header; + } + + #project_explorer #left { + position: -webkit-sticky; + position: sticky; + top: 4.8rem; + grid-area: left; + -ms-flex-item-align: start; + align-self: flex-start; + border-right: 1px solid rgba(var(--text-color), 0.06); + } + + #project_explorer #left h4 { + margin-top: 0; + margin-bottom: 0.5rem; + color: #29B6F6; + font-size: 0.9rem; + } + + #project_explorer #right { + grid-area: right; + } +} +#update_of_project { + color: rgba(var(--text-color), 0.8); +} + +#update_of_task { + font-size: 1.3rem; + margin: 0.4rem 0 1.8rem 0; +} + +ul { + padding: 0; + list-style: none; +} + +#assigned_task_list { + display: grid; + align-content: flex-start; + gap: 1.5rem; +} + +.task-card { + display: grid; + padding: 1rem; +} + +.task__header { + display: grid; + gap: 0 0.5rem; + align-items: flex-start; + grid-template-columns: 1fr auto; + grid-template-areas: ". send-button" ". send-button"; +} + +.task__project-title { + font-size: 0.9rem; + font-weight: 500; + border-radius: 0.3rem; + padding: 0.3rem 0.5rem; + justify-self: flex-start; + margin-bottom: 0.5rem !important; + color: rgba(var(--text-color), 0.8); + background-color: rgba(var(--text-color), 0.06); +} + +.task__title { + font-size: 1.5rem; + margin-bottom: 1rem !important; +} + +.task__description { + white-space: pre-line; + color: rgba(var(--text-color), 0.8); +} + +.send-update-button { + grid-area: send-button; + border: solid 1px; + color: var(--accent-color); +} +.send-update-button .icon { + height: 1.2rem; + width: 1.2rem; + fill: var(--accent-color); +} + +@media only screen and (min-width: 1280px) { + .page, +#show_all, +#project_explorer { + margin: 1rem 8vw; + } +} +@media (any-hover: hover) { + ::-webkit-scrollbar { + width: 0.5rem; + height: 0.5rem; + } + + ::-webkit-scrollbar-thumb { + background: rgba(var(--text-color), 0.3); + border-radius: 1rem; + } + ::-webkit-scrollbar-thumb:hover { + background: rgba(var(--text-color), 0.5); + } + + .send-update-button { + opacity: 0; + transition: opacity 0.3s; + } + + .task-card:hover .send-update-button { + opacity: 1; + } +} +@media (any-hover: none) { + .task-option, +.apply-btn { + opacity: 1; + } +} \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css new file mode 100644 index 0000000..48329cb --- /dev/null +++ b/css/main.min.css @@ -0,0 +1 @@ +a,button{color:inherit}.input,.interact,.overflow-ellipsis,button{overflow:hidden}#textCopied,.hide,.ripple{pointer-events:none}.card,.request-card{margin-bottom:.5rem;padding:1rem}.popup__header,.task{grid-template-columns:auto 1fr}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{--accent-color:#1976D2;--light-shade:rgba(var(--text-color), 0.06);--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#F6f6f6;--error-color:red;color:rgba(var(--text-color),1);background:var(--background-color);display:flex;flex-direction:column}a.button:any-link,button{display:inline-flex;padding:.5rem .6rem;-webkit-tap-highlight-color:transparent;background:0 0;font-weight:500;cursor:pointer}body[data-theme=dark]{--accent-color:#42A5F5;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20;--background-color:#0a0a0a;--error-color:rgb(255, 106, 106)}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}#intern_info h3,#status_map_container #status_map h2,.assigned-interns .assigned-intern,.capitalise,.capitalize,.project-card,.update__project-name{text-transform:capitalize}p{font-size:.8;max-width:60ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1rem}img{object-fit:cover}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{align-items:center;outline:0}button:focus-visible{outline:solid rgba(var(--text-color),1)}a.button:any-link{position:relative;align-items:center;outline:0;font-size:.8rem;border-radius:.3rem;align-self:flex-start;text-decoration:none;color:rgba(var(--text-color),.7);background-color:rgba(var(--text-color),.06)}.button,.task__project-title{background-color:rgba(var(--text-color),.06)}a.button:any-link .icon{margin-right:.3rem;height:1.2rem}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}.hide{opacity:0}.hide-completely{display:none!important}.overflow-ellipsis{width:100%;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.flex{display:flex}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1,.page{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}#loading_page,.center,.text-center{text-align:center}.align-start{align-items:flex-start}.align-center{align-items:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#loading_page,#sign_in_page{right:0;background-color:rgba(var(--foreground-color),1);place-content:center}.interact{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center}.popup__header__close{padding:.5rem;cursor:pointer}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}input[type=checkbox]{display:none}.checkbox svg{fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;height:1.6rem;width:1.6rem}.checkbox svg .check{stroke-dashoffset:70;stroke-dasharray:70;-webkit-transition:stroke-dashoffset .3s ease;transition:stroke-dashoffset .3s ease}.checkbox input:checked+svg{stroke:#00C853}.checkbox input:checked+svg .check{stroke-dashoffset:0}#settings_page{padding:1rem}#settings_page section{width:100%;border-bottom:1px solid rgba(var(--text-color),.1);display:-ms-grid;display:grid;padding-bottom:1rem}#settings_page section:last-of-type{border:none}#settings_page h3,#settings_page h4{display:flexbox;width:100%;-ms-flex-item-align:center;align-self:center}#settings_page h5{margin:0;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;font-weight:400;opacity:.9}#settings_page button{background:0 0;border:1px solid var(--accent-color);color:var(--accent-color);margin:1rem 0;width:-webkit-min-content;width:-moz-min-content;width:min-content;white-space:nowrap}#settings_page button .icon{fill:var(--accent-color)}#settings_page>div{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;padding:1rem 0;-ms-flex-line-pack:center;align-content:center}#settings_page .row{-webkit-box-flex:1;-ms-flex:1;flex:1}#settings_page .row span{font-size:.8rem}#settings_page .border-card{color:inherit;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;padding:.5rem 0;width:auto}#settings_page .border-card svg{fill:var(--accent-color);display:flexbox;height:2rem;-ms-flex-item-align:center;align-self:center;margin:.5rem}.container-card{position:relative;background:rgba(var(--foreground-color),1);border-radius:.4rem}.solid-background{transition:background-color 2s;background:rgba(var(--foreground-color),1)}a{color:var(--accent-color);text-decoration:none}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;position:fixed;z-index:5;top:0;bottom:0;left:0}.task{display:-ms-grid;display:grid;-ms-grid-columns:auto 1fr;margin:0 1rem}.task:last-of-type .left .line{-webkit-transform:scaleY(0);transform:scaleY(0)}.task .left{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-top:.5rem}.task .left .circle{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-item-align:start;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:rgba(var(--foreground-color),1);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}#top_nav,.card,.dropdown,.page,.request-card,button,input,textarea{position:relative}.task .right{margin-left:1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}#bottom_nav,#branch_container,#show_message,#top_nav,.task .right .apply-cont{-webkit-box-orient:horizontal}.task .right .apply-cont{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.task p{white-space:pre-line;padding-bottom:2rem}.task .assigned-interns .assigned-intern{padding:.4rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{display:grid;margin:1rem;animation:fadein .4s ease}#top_nav,.input{display:-ms-flexbox}.fade-in{-webkit-animation:fadein .4s ease;animation:fadein .4s ease}@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}.padding{padding:1rem}#dashboard{padding-bottom:5rem;-ms-grid-columns:auto;grid-template-columns:auto}.input{display:-webkit-box;display:flex;width:100%;margin:1rem 0;background:rgba(var(--text-color),.06);-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:.2rem}.input input,.input textarea{color:var(--light-text);padding:1rem .5rem;width:100%;font-size:1rem;background:0 0;margin-left:0}.input input:focus,.input textarea:focus{outline:0}.input svg{height:1.2rem;width:1.2rem;margin:0 .5rem 0 1rem;fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible}.input:focus-within{background:rgba(0,0,0,.1)}button,input,textarea{border:none;font-size:1rem;border-radius:.2rem}button[disabled]{opacity:.5!important;cursor:default}.show{display:block}.hide-on-mobile,.hide-page-on-mobile{display:none}.hide-on-desktop{display:initial}.no-transformations{-webkit-transform:none!important;transform:none!important}.no-bottom-margin{margin-bottom:0}.top-margin{margin-top:.3rem}.chatInput{overflow:hidden;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0}.chatInput textarea{resize:none;line-height:1.6}.chatInput button{-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;-webkit-transform:scale(0);transform:scale(0);-ms-flex-item-align:end;align-self:flex-end;padding:1rem}.chatInput button svg{margin:0;fill:rgba(var(--text-color),1)}#top_nav{display:-webkit-box;display:flex;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem;z-index:4}#top_nav .spacer{-webkit-box-flex:1;-ms-flex:1;flex:1}#top_nav .logo{margin-right:.5rem}.logo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.2rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.active{opacity:1!important;color:var(--accent-color)}.active svg{fill:var(--accent-color)}.svg-margin-right svg{margin-right:.5rem}.intern-card{user-select:none}.intern-card span:first-of-type{display:flex;justify-content:center;align-items:center;flex-shrink:0;padding:.8rem;border-radius:50%;background:#673AB7;margin-right:1rem;color:#fff;font-weight:500;font-size:1.2rem;line-height:0}.intern-card span:first-of-type::after{content:"";display:block;padding-bottom:100%}.intern-card span:nth-of-type(2){flex:1;text-transform:capitalize;flex-shrink:0}.intern-card span:nth-of-type(3){display:inline-flex;align-items:center;align-content:center;font-weight:500;font-size:1.2rem;color:var(--light-text)}.intern-card span:nth-of-type(3) svg{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-right:.2rem}.card{display:flex;flex-direction:row;align-items:center}.request-card{display:flex;-webkit-box-align:left;-ms-flex-align:left;align-items:left;-ms-flex-wrap:wrap;flex-wrap:wrap;border-bottom:1px solid rgba(var(--text-color),.1)}.request-card p{margin-top:0;width:100%;font-size:1rem}.request-card b{font-weight:500}.request-card button{padding:.2rem .6rem .2rem 0}.request-card button:first-of-type{margin-left:auto}.request-card:last-of-type{border-bottom:none}.dropdown-content{overflow:hidden;position:absolute;z-index:2;margin:1rem;right:2rem;min-width:24rem;background:rgba(var(--foreground-color),1);box-shadow:0 .5rem 1rem -.5rem rgba(0,0,0,.24);border-radius:.5rem}#bottom_nav,#show_message,#textCopied{position:fixed;bottom:0}#intern_updates .container-header{padding-right:0;border-bottom:1px solid rgba(var(--text-color),.1)}#intern_updates .container-header button{padding:1rem 0;border-bottom:.2rem solid transparent;border-radius:0;opacity:.7}#intern_updates .container-header button:first-of-type{margin-right:1rem}#intern_updates .container-header button:last-of-type{margin-right:1rem}#intern_updates .container-header .active{color:rgba(var(--text-color),1);border-bottom:.2rem solid var(--accent-color)}.active-branch,.commit,.container-header span,.update__sender{color:var(--accent-color)}#requests_container,#update_container{display:flex;max-height:80vh;overflow-y:auto;flex-direction:column}#updates{transition:opacity .3s ease}.update{display:flex;flex-direction:column;padding:1rem}.update__project-name{font-size:1.2rem;max-width:60ch;margin:.3rem 0 .5rem;font-weight:700}.update__sender{font-size:.9rem;font-weight:500}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;flex-direction:row;width:100%;padding:0 1rem}.container-header h3{flex:1;font-weight:500}.container-header span{border-radius:.2rem;margin-right:.2rem;padding:.5rem 1rem;font-weight:500}.back-arrow{fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;width:2rem;height:2rem;padding:.5rem .5rem .5rem 0;cursor:pointer}#task_context li svg,.close-svg,.tick-mark{stroke:rgba(var(--text-color),.8);overflow:visible}.close-svg,.tick-mark{fill:none;stroke-width:6;height:2rem;width:2rem}.close-svg{padding:.6rem}#textCopied{padding:1rem;border-radius:2rem;background:var(--sec-color);margin:2rem 0;left:50%;transform:translateX(-50%);transition:.3s opacity ease;z-index:10}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info div svg{fill:rgba(var(--text-color),1);height:2.5rem;padding:.6rem;overflow:visible}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#intern_info #update_intern_score button{border:1px solid}#intern_info #update_intern_score button svg{stroke-width:10;fill:none;stroke:var(--accent-color)}#intern_info #update_intern_score rect{stroke:transparent}#intern_info h4,#intern_info h5{margin-top:.5rem}#project_info{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.branch-btn{padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.active-branch{opacity:1;background:rgba(var(--text-color),.04)}.active-project{background:rgba(var(--text-color),.06)}.opac{opacity:1!important}.task-list-item{display:-ms-grid;display:grid;-ms-grid-columns:auto auto 1fr auto;grid-template-columns:auto auto 1fr auto;grid-template-areas:"status . title options" "status . interns interns" "status . description description";padding:1rem;gap:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:rgba(var(--text-color),.02)}.task-list-item .checkbox{-ms-grid-row-span:3;grid-area:status;padding:.5rem .5rem .5rem 0;-ms-flex-item-align:start!important;align-self:flex-start!important}.task-list-item:first-of-type{margin-top:1rem;border-radius:.2rem .2rem 0 0}.task-list-item:last-of-type{border-radius:0 0 .2rem .2rem;border-bottom:none;margin-bottom:1rem}.task-list-item h4{font-weight:500;margin:0}.task-list-item .title{grid-area:title}.task-list-item .assigned-interns{-ms-grid-column-span:2;grid-area:interns}.task-list-item .task-option{grid-area:options;cursor:pointer;opacity:1;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.task-list-item .task-option svg{width:2rem;height:2rem;padding:.5rem;overflow:visible;fill:rgba(var(--text-color),.8)}.task-list-item p{-ms-grid-column-span:2;grid-area:description;margin:0;text-overflow:ellipsis;overflow:hidden;max-width:100%}.assigned-interns{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}#task_context li,.temp-task{display:-webkit-box;display:-ms-flexbox}.assigned-interns .assigned-intern{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;white-space:nowrap}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button svg{padding:.2rem;height:1rem;width:1rem}#bottom_nav button,#show_message{-webkit-box-direction:normal;width:100%}.commit{border:1px solid var(--accent-color);padding:.6rem}#task_context{-webkit-transition:.3s opacity ease;transition:.3s opacity ease;top:0;right:0;margin:0 2rem;list-style:none;padding:.5rem 0;width:-webkit-max-content;width:-moz-max-content;width:max-content;border-radius:.2rem;position:absolute;background:rgba(var(--foreground-color),1);-webkit-box-shadow:.2rem .4rem 1rem rgba(0,0,0,.24),-.1rem -.2rem .4rem rgba(0,0,0,.16);box-shadow:.2rem .4rem 1rem rgba(0,0,0,.24),-.1rem -.2rem .4rem rgba(0,0,0,.16)}#task_context li{padding:.8rem 1rem;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#task_context li svg{margin-right:1rem;width:1.2rem;height:1.2rem;fill:none;stroke-width:6}.temp-task{padding:1rem;background:rgba(var(--text-color),.02);display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}#bottom_nav,.header{background:rgba(var(--foreground-color),1)}#bottom_nav,#branch_container,#notification,#show_message{display:-webkit-box;display:-ms-flexbox}.temp-task .input{margin:.4rem 0}#branch_container{display:flex;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;margin:1rem 0}#notification{display:flex}#bottom_nav{display:flex;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;width:100vw;z-index:4;border-top:1px solid rgba(var(--text-color),.1)}#bottom_nav button{padding:.2rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:.7rem;font-weight:400;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}#bottom_nav button svg{margin:.4rem}#show_message{-webkit-transform:translate(0,.4rem);transform:translate(0,.4rem);-webkit-transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease,-webkit-transform .3s ease;-webkit-box-shadow:.2rem .4rem .8rem rgba(0,0,0,.16);box-shadow:.2rem .4rem .8rem rgba(0,0,0,.16);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;display:flex;color:#fff;right:0;z-index:11}#show_message span,.watching h4{-webkit-box-flex:1;font-weight:500}#show_message span{padding:1rem;-ms-flex:1;flex:1}#show_message button{padding:.5rem 1rem;margin:0}#show_message button svg{stroke:#fff}#interns_list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-width:20rem}.header,.watching{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-direction:normal}#interns_list #interns_list_container{min-height:50vh;max-height:50vh;overflow-y:auto}#best_interns_container,#project_list_container{margin-bottom:1rem}#best_interns_container .container-header,#project_list_container .container-header{padding-right:0}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{fill:rgba(var(--text-color),.6);width:60vw;margin:2rem 0}.header svg,.loader{overflow:visible;fill:none}.header{position:-webkit-sticky;position:sticky;top:0;display:-ms-flexbox;display:flex;-ms-flex-flow:row;flex-flow:row;border-bottom:1px solid rgba(var(--text-color),.1);-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:2}.header svg{stroke:rgba(var(--text-color),.8);stroke-width:6;height:2rem;width:2rem;cursor:pointer;padding:.4rem;margin-left:1rem}.header h3{padding:0 .5rem;display:inline-flexbox}.appear-on-scroll-up{position:fixed!important;top:0;width:100%;height:4rem!important}#loading_page{display:grid;position:fixed;top:0;bottom:0;left:0;z-index:5;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}.loader{height:2rem;width:2rem;stroke-width:8;stroke:var(--accent-color);stroke-dashoffset:180;stroke-dasharray:180;animation:load 3.6s linear infinite,spin 1s linear infinite}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-180}}@keyframes spin{100%{transform:rotate(360deg)}}#status_map_container{position:relative;overflow:hidden;background:#B9F6CA}#status_map_container .branch-btn{color:rgba(0,0,0,.8)}#status_map_container p{color:rgba(0,0,0,.9)}#status_map_container .active-branch{color:#fff;background:rgba(0,200,83,.6)}#status_map_container #status_map{position:relative;z-index:1;padding:1rem;color:#000}#status_map_container #status_map h2{margin:.4rem 0}#status_map_container #status_map .circle{background:#B9F6CA;border:2px solid rgba(0,0,0,.4)}#status_map_container #status_map .line{background:rgba(0,0,0,.4)}#status_map_container #status_map .assigned-intern{border:1px solid rgba(0,0,0,.4)}#status_map_container #status_map .apply-btn{color:#1B5E20;background:rgba(0,200,83,.2)}.apply-btn{padding:.3rem .6rem}#project_editing_panel,.watching button{padding:1rem}.watching{position:relative;padding-left:1rem;padding-top:1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#000;z-index:1}.watching h4{-ms-flex:1;flex:1}.watching button svg{fill:none!important;fill:none;stroke-width:6;overflow:visible;stroke:#000}#right{padding:0 1rem}#right div:first-of-type h2{-webkit-box-flex:1;-ms-flex:1;flex:1;margin:.4rem 0}#right div:first-of-type button{border:1px solid}.center{position:relative;display:-ms-grid;display:grid;place-content:center;height:100%}.slide-left{-webkit-animation:slide-left .4s ease;animation:slide-left .4s ease}@-webkit-keyframes slide-left{100%{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}}@keyframes slide-left{100%{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}}.update-mi svg{-webkit-animation:shake .6s ease;animation:shake .6s ease;-webkit-transform-origin:top;transform-origin:top}@-webkit-keyframes shake{0%{-webkit-transform:rotate(30deg);transform:rotate(30deg)}20%{-webkit-transform:rotate(-30deg);transform:rotate(-30deg)}40%{-webkit-transform:rotate(20deg);transform:rotate(20deg)}60%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes shake{0%{-webkit-transform:rotate(30deg);transform:rotate(30deg)}20%{-webkit-transform:rotate(-30deg);transform:rotate(-30deg)}40%{-webkit-transform:rotate(20deg);transform:rotate(20deg)}60%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}.settings-mi svg{-webkit-animation:rot .6s ease;animation:rot .6s ease;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rot{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(60deg);transform:rotate(60deg)}}@keyframes rot{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(60deg);transform:rotate(60deg)}}#project_explorer,#show_all{margin:0}#admin_panel{padding:0 1.5rem;display:grid;gap:1.5rem}#admin_panel__header{display:grid;gap:0 1rem;padding:.5rem 0;grid-template-columns:1fr auto;align-items:center}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}.hide-on-mobile{display:-webkit-box;display:-ms-flexbox;display:flex}.hide-page-on-mobile{display:-ms-grid;display:grid}sm-popup{--width:24rem}.popup__header{padding:1.5rem 1.5rem 0 .5rem}#project_explorer,#show_all,.page{margin:1rem 4vw}#top_nav{padding:1rem 2vw}#settings_page{padding:1rem 2rem}.logo{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;width:auto}#intern_info,#sign_in{width:24rem}#show_message{-webkit-transform:translate(.4rem,0);transform:translate(.4rem,0);margin:1rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;border-radius:.2rem}#sign_in{height:auto;border-radius:.4rem}#floating_btn{margin:1rem}#dashboard{-ms-grid-columns:3fr 1fr;grid-template-columns:3fr 1fr}#dashboard #status_map_container{-ms-flex-item-align:start;align-self:flex-start}#dashboard #status_map_container .watching{padding-left:2rem}#dashboard #status_map_container #status_map{padding:1rem 2rem}.task .apply-btn{opacity:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.task:hover .apply-btn{opacity:1}.hover{-webkit-transition:background .3s ease;transition:background .3s ease;cursor:pointer}.hover:hover{background:rgba(var(--text-color),.06)}#admin_panel{grid-template-columns:16rem 1fr;grid-template-rows:auto 1fr;grid-template-areas:"admin-header admin-header" ". ."}#admin_panel__header{grid-area:admin-header}#edit_data_fig{width:16rem;-ms-grid-column-align:center;justify-self:center}#interns,#projects{display:flex;flex-direction:column;max-height:calc(100vh - 16rem);overflow-y:auto}.task-list-item .task-option{opacity:0}.task-list-item:hover .task-option{opacity:1}#project_explorer{display:-ms-grid;display:grid;align-items:flex-start;-ms-grid-columns:1fr 3fr;grid-template-columns:1fr 3fr;grid-template-areas:"header header" "left right"}#project_explorer .header{border-radius:.4rem .4rem 0 0;-ms-grid-column-span:2;grid-area:header}#project_explorer #left{position:-webkit-sticky;position:sticky;top:4.8rem;grid-area:left;-ms-flex-item-align:start;align-self:flex-start;border-right:1px solid rgba(var(--text-color),.06)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:#29B6F6;font-size:.9rem}#project_explorer #right{grid-area:right}}#update_of_project,.task__description,.task__project-title{color:rgba(var(--text-color),.8)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;align-content:flex-start;gap:1.5rem}.task-card{display:grid;padding:1rem}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;font-weight:500;border-radius:.3rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important}.task__title{font-size:1.5rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;border:1px solid;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}@media only screen and (min-width:1280px){#project_explorer,#show_all,.page{margin:1rem 8vw}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.send-update-button{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button{opacity:1}}@media (any-hover:none){.apply-btn,.task-option{opacity:1}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..aab1cf3 --- /dev/null +++ b/css/main.scss @@ -0,0 +1,2026 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; +} +:root{ + font-size: clamp(1rem, 1.2vmax, 3rem); +} +html, body{ + height: 100%; + scroll-behavior: smooth; +} +body { + --accent-color: #1976D2; + --light-shade: rgba(var(--text-color), 0.06); + --text-color: 17, 17, 17; + --text-color-light: 100, 100, 100; + --foreground-color: 255, 255, 255; + --background-color: #F6f6f6; + --error-color: red; + color: rgba(var(--text-color), 1); + background: var(--background-color); + display: flex; + flex-direction: column; +} +body[data-theme='dark']{ + --accent-color: #42A5F5; + --text-color: 240, 240, 240; + --text-color-light: 170, 170, 170; + --foreground-color: 20, 20, 20; + --background-color: #0a0a0a; + --error-color: rgb(255, 106, 106); +} +/* h1,h2,h3,h4,h5,h6{ + font-family: 'Montserrat', sans-serif; +} */ +.full-bleed{ + grid-column: 1/4; +} +.h1{ + font-size: 2.5rem; +} +.h2{ + font-size: 2rem; +} +.h3{ + font-size: 1.4rem; +} +.h4{ + font-size: 1rem; +} +.h5{ + font-size: 0.8rem; +} + +.uppercase{ + text-transform: uppercase; +} +.capitalize{ + text-transform: capitalize; +} + +p { + font-size: 0.8; + max-width: 60ch; + line-height: 1.7; + color: rgba(var(--text-color), 0.8); + &:not(:last-of-type){ + margin-bottom: 1rem; + } +} +img{ + object-fit: cover; +} + +a{ + color: inherit; + text-decoration: none; + &:focus-visible{ + box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; + } +} +button{ + position: relative; + display: inline-flex; + overflow: hidden; + align-items: center; + background: none; + cursor: pointer; + outline: none; + color: inherit; + font-size: 0.9rem; + font-weight: 500; + border-radius: 0.2rem; + padding: 0.5rem 0.6rem; + -webkit-tap-highlight-color: transparent; + border: none; +} +button:focus-visible{ + outline: rgba(var(--text-color), 1) 0.1rem solid; +} +a.button:any-link{ + position: relative; + display: inline-flex; + align-items: center; + background: none; + cursor: pointer; + outline: none; + font-weight: 500; + font-size: 0.8rem; + border-radius: 0.3rem; + padding: 0.5rem 0.6rem; + align-self: flex-start; + text-decoration: none; + color: rgba(var(--text-color), 0.7); + -webkit-tap-highlight-color: transparent; + background-color: rgba(var(--text-color), 0.06); + .icon{ + margin-right: 0.3rem; + height: 1.2rem; + } +} +a:any-link:focus-visible{ + outline: rgba(var(--text-color), 1) 0.1rem solid; +} +.button{ + background-color: rgba(var(--text-color), 0.06); +} +sm-button{ + --border-radius: 0.3rem; +} +ul{ + list-style: none; +} +.flex{ + display: flex; +} +.grid{ + display: grid; +} +.hide{ + opacity: 0; + pointer-events: none; +} +.hide-completely{ + display: none !important; +} +.no-transformations{ + transform: none !important; +} +.overflow-ellipsis{ + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.breakable{ + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; +} +.flex{ + display: flex; +} +.grid{ + display: grid; +} +.flow-column{ + grid-auto-flow: column; +} +.gap-0-5{ + gap: 0.5rem; +} +.gap-1{ + gap: 1rem; +} +.gap-1-5{ + gap: 1.5rem; +} +.gap-2{ + gap: 2rem; +} +.gap-3{ + gap: 3rem; +} +.text-align-right{ + text-align: right; +} +.align-start{ + align-items: flex-start; +} +.align-center{ + align-items: center; +} +.text-center{ + text-align: center; +} +.justify-start{ + justify-content: start; +} +.justify-center{ + justify-content: center; +} +.justify-right{ + margin-left: auto; +} +.align-self-center{ + align-self: center; +} +.justify-self-center{ + justify-self: center; +} +.justify-self-start{ + justify-self: start; +} +.direction-column{ + flex-direction: column; +} +.space-between{ + justify-content: space-between; +} +.w-100{ + width: 100%; +} +.ripple{ + position: absolute; + border-radius: 50%; + transform: scale(0); + background: rgba(var(--text-color), 0.16); + pointer-events: none; +} +.interact{ + position: relative; + overflow: hidden; + cursor: pointer; + -webkit-tap-highlight-color: transparent; +} +.observe-empty-state:empty{ + display: none; +} +.observe-empty-state:not(:empty) ~ .empty-state{ + display: none; +} + + +.icon{ + width: 1.5rem; + height: 1.5rem; + fill: rgba(var(--text-color), 0.9); +} +.button__icon{ + height: 1.2rem; + width: 1.2rem; + &--left{ + margin-right: 0.5rem; + } + &--right{ + margin-left: 0.5rem; + } +} +.popup__header{ + display: grid; + gap: 0.5rem; + width: 100%; + padding: 0 1.5rem 0 0.5rem; + align-items: center; + grid-template-columns: auto 1fr; +} +.popup__header__close{ + padding: 0.5rem; + cursor: pointer; +} +#confirmation_popup, +#prompt_popup { + flex-direction: column; + h4 { + font-weight: 500; + margin-bottom: 0.5rem; + } + sm-button{ + margin: 0; + } + .flex { + padding: 0; + margin-top: 1rem; + sm-button:first-of-type { + margin-right: 0.6rem; + margin-left: auto; + } + } +} + +input[type="checkbox"] { + display: none; +} + +.checkbox svg { + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + height: 1.6rem; + width: 1.6rem; +} + +.checkbox svg .check { + stroke-dashoffset: 70; + stroke-dasharray: 70; + -webkit-transition: stroke-dashoffset 0.3s ease; + transition: stroke-dashoffset 0.3s ease; +} + +.checkbox input:checked+svg { + stroke: #00C853; +} + +.checkbox input:checked+svg .check { + stroke-dashoffset: 0; +} +#settings_page { + padding: 1rem; +} + +#settings_page section { + width: 100%; + border-bottom: 1px solid rgba(var(--text-color), 0.1); + display: -ms-grid; + display: grid; + padding-bottom: 1rem; +} + +#settings_page section:last-of-type { + border: none; +} + +#settings_page h3, +#settings_page h4 { + display: flexbox; + width: 100%; + -ms-flex-item-align: center; + align-self: center; +} + +#settings_page h5 { + margin: 0; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + font-weight: normal; + opacity: 0.9; +} + +#settings_page button { + background: transparent; + border: 1px solid var(--accent-color); + color: var(--accent-color); + margin: 1rem 0; + width: -webkit-min-content; + width: -moz-min-content; + width: min-content; + white-space: nowrap; + .icon{ + fill: var(--accent-color); + } +} +#settings_page > div { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + padding: 1rem 0; + -ms-flex-line-pack: center; + align-content: center; +} + +#settings_page .row { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +#settings_page .row span { + font-size: 0.8rem; +} + +#settings_page .border-card { + color: inherit; + text-decoration: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 0.5rem 0; + width: auto; +} + +#settings_page .border-card svg { + fill: var(--accent-color); + display: flexbox; + height: 2rem; + -ms-flex-item-align: center; + align-self: center; + margin: 0.5rem; +} + +.container-card { + position: relative; + background: rgba(var(--foreground-color), 1); + border-radius: 0.4rem; +} + +.solid-background { + transition: background-color 2s; + background: rgba(var(--foreground-color), 1); +} + +a { + color: var(--accent-color); + text-decoration: none; +} + +.medium-top-bottom-margin { + margin: 0.5rem 0; +} + +#sign_in_page{ + display: grid; + position: fixed; + z-index: 5; + top: 0; + bottom: 0; + left: 0; + right: 0; + place-content: center; + background-color: rgba(var(--foreground-color), 1); +} + + +.task { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto 1fr; + grid-template-columns: auto 1fr; + margin: 0 1rem; +} + +.task:last-of-type .left .line { + -webkit-transform: scaleY(0); + transform: scaleY(0); +} + +.task .left { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + padding-top: 0.5rem; +} + +.task .left .circle { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + position: relative; + -ms-flex-item-align: start; + align-self: flex-start; + height: 1rem; + width: 1rem; + border-radius: 50%; + background: rgba(var(--foreground-color), 1); + border: solid 2px rgba(var(--text-color), 0.4); + z-index: 1; +} + +.task .left .line { + position: absolute; + left: 50%; + height: 100%; + width: 2px; + -webkit-transform: translateX(-50%) scaleY(1); + transform: translateX(-50%) scaleY(1); + background-color: rgba(var(--text-color), 0.4); +} + +.task .right { + margin-left: 1rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; +} + +.task .right .apply-cont { + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} + +.task .right .apply-cont h4 { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.task h4 { + margin-top: 0.4rem; + margin-bottom: 1rem; +} + +.task p { + white-space: pre-line; + padding-bottom: 2rem; +} + +.task .assigned-interns .assigned-intern { + padding: 0.4rem; +} + +.completed-task .left .circle { + border: solid 2px #00C853 !important; + background: #00C853 !important; +} + +.completed-task .left .line { + background-color: #00C853 !important; +} + +.page { + gap: 1rem; + display: grid; + position: relative; + margin: 1rem; + animation: fadein 0.4s ease; +} + +.fade-in { + -webkit-animation: fadein 0.4s ease; + animation: fadein 0.4s ease; +} + +@-webkit-keyframes fadein { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes fadein { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +.title { + font-weight: 500; +} + +.padding { + padding: 1rem; +} + +#dashboard { + padding-bottom: 5rem; + -ms-grid-columns: auto; + grid-template-columns: auto; +} + +.input { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + margin: 1rem 0; + background: rgba(var(--text-color), 0.06); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 0.2rem; + overflow: hidden; +} + +.input input, +.input textarea { + color: var(--light-text); + padding: 1rem 0.5rem; + width: 100%; + font-size: 1rem; + background: transparent; + margin-left: 0; +} + +.input input:focus, +.input textarea:focus { + outline: none; +} + +.input svg { + height: 1.2rem; + width: 1.2rem; + margin: 0 0.5rem 0 1rem; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; +} + +.input:focus-within { + background: rgba(0, 0, 0, 0.1); +} + +input, +button, +textarea { + position: relative; + border: none; + font-size: 1rem; + border-radius: 0.2rem; +} + +button[disabled] { + opacity: 0.5 !important; + cursor: default; +} + +.show { + display: block; +} + +.hide-on-mobile, +.hide-page-on-mobile { + display: none; +} + +.hide-on-desktop { + display: initial; +} + +.no-transformations { + -webkit-transform: none !important; + transform: none !important; +} + +.no-bottom-margin { + margin-bottom: 0; +} + +.top-margin { + margin-top: 0.3rem; +} + +.chatInput { + overflow: hidden; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0; +} + +.chatInput textarea { + resize: none; + line-height: 1.6; +} + +.chatInput button { + -webkit-transition: -webkit-transform 0.3s ease; + transition: -webkit-transform 0.3s ease; + transition: transform 0.3s ease; + transition: transform 0.3s ease, -webkit-transform 0.3s ease; + -webkit-transform: scale(0); + transform: scale(0); + -ms-flex-item-align: end; + align-self: flex-end; + padding: 1rem; +} + +.chatInput button svg { + margin: 0; + fill: rgba(var(--text-color), 1); +} + +#top_nav { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0.5rem; + z-index: 4; +} + +#top_nav .spacer { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +#top_nav .logo { + margin-right: 0.5rem; +} + +.logo { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: 1.2rem; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; +} + +.logo .cls-2, +.logo .cls-3 { + fill: rgba(var(--text-color), 1); + font-size: 146.9px; + font-family: ArialMT, Arial; +} + +.logo svg { + height: 2.5rem; +} + +.logo h4 { + margin: 0; +} + +.active { + opacity: 1 !important; + color: var(--accent-color); +} + +.active svg { + fill: var(--accent-color); +} + +.svg-margin-right svg { + margin-right: 0.5rem; +} + +.project-card { + text-transform: capitalize; +} + +.intern-card { + user-select: none; +} + +.intern-card span:first-of-type { + display: flex; + justify-content: center; + align-items: center; + flex-shrink: 0; + padding: 0.8rem; + border-radius: 50%; + background: #673AB7; + margin-right: 1rem; + color: white; + font-weight: 500; + font-size: 1.2rem; + line-height: 0; +} + +.intern-card span:first-of-type::after { + content: ""; + display: block; + padding-bottom: 100%; +} + +.intern-card span:nth-of-type(2) { + flex: 1; + text-transform: capitalize; + flex-shrink: 0; +} + +.intern-card span:nth-of-type(3) { + display: inline-flex; + align-items: center; + align-content: center; + font-weight: 500; + font-size: 1.2rem; + color: var(--light-text); +} + +.intern-card span:nth-of-type(3) svg { + fill: #FF5722 !important; + height: 1rem !important; + width: 1rem !important; + margin-right: 0.2rem; +} + +.card { + display: flex; + flex-direction: row; + position: relative; + align-items: center; + margin-bottom: 0.5rem; + padding: 1rem; +} + +.request-card { + display: flex; + position: relative; + margin-bottom: 0.5rem; + -webkit-box-align: left; + -ms-flex-align: left; + align-items: left; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding: 1rem; + border-bottom: 1px solid rgba(var(--text-color), 0.1); +} + +.request-card p { + margin-top: 0; + width: 100%; + font-size: 1rem; +} + +.request-card b { + font-weight: 500; +} + +.request-card button { + padding: 0.2rem 0.6rem 0.2rem 0; +} + +.request-card button:first-of-type { + margin-left: auto; +} + +.request-card:last-of-type { + border-bottom: none; +} + +.dropdown { + position: relative; +} + +.dropdown-content { + overflow: hidden; + position: absolute; + z-index: 2; + margin: 1rem; + right: 2rem; + min-width: 24rem; + background: rgba(var(--foreground-color), 1); + box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.24); + border-radius: 0.5rem; +} + +#intern_updates .container-header { + padding-right: 0; + border-bottom: 1px solid rgba(var(--text-color), 0.1); +} + +#intern_updates .container-header button { + padding: 1rem 0; + border-bottom: 0.2rem solid transparent; + border-radius: 0; + opacity: 0.7; +} + +#intern_updates .container-header button:first-of-type { + margin-right: 1rem; +} + +#intern_updates .container-header button:last-of-type { + margin-right: 1rem; +} + +#intern_updates .container-header .active { + color: rgba(var(--text-color), 1); + border-bottom: 0.2rem solid var(--accent-color); +} + +#update_container, +#requests_container { + display: flex; + max-height: 80vh; + overflow-y: auto; + flex-direction: column; +} + +#updates { + transition: opacity 0.3s ease; +} + +.update { + display: flex; + flex-direction: column; + padding: 1rem; +} +.update__project-name{ + font-size: 1.2rem; + max-width: 60ch; + margin: 0.3rem 0 0.5rem 0; + font-weight: bold; + text-transform: capitalize; +} + +.update__sender{ + color: var(--accent-color); + font-size: 0.9rem; + font-weight: 500; +} +.update__message{ + white-space: pre-line; +} + +.container-header { + display: flex; + align-items: center; + flex-direction: row; + width: 100%; + padding: 0 1rem; +} + +.container-header h3 { + flex: 1; + font-weight: 500; +} + +.container-header span { + color: var(--accent-color); + border-radius: 0.2rem; + margin-right: 0.2rem; + padding: 0.5rem 1rem; + font-weight: 500; +} + +.back-arrow { + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + width: 2rem; + height: 2rem; + padding: 0.5rem 0.5rem 0.5rem 0; + cursor: pointer; +} + +.close-svg, +.tick-mark { + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + height: 2rem; + width: 2rem; +} + +.close-svg { + padding: 0.6rem; +} + +#textCopied { + padding: 1rem; + border-radius: 2rem; + background: var(--sec-color); + position: fixed; + bottom: 0; + pointer-events: none; + margin: 2rem 0; + left: 50%; + transform: translateX(-50%); + transition: 0.3s opacity ease; + z-index: 10; +} + +#intern_info { + flex-direction: column; +} + +#intern_info div { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + margin-bottom: 1rem; +} + +#intern_info div span { + flex: 1; + word-break: break-all; + font-size: 0.9rem; +} + +#intern_info div svg { + fill: rgba(var(--text-color), 1); + height: 2.5rem; + padding: 0.6rem; + overflow: visible; +} + +#intern_info .gold-fill { + fill: #FF5722; +} + +#intern_info #update_intern_score h4 { + margin: 0; + font-size: 2rem; +} + +#intern_info #update_intern_score button { + border: 1px solid rgba(var(--text-color), 0.1); +} + +#intern_info #update_intern_score button svg { + stroke-width: 10; + fill: none; + stroke: var(--accent-color); +} + +#intern_info #update_intern_score rect { + stroke: transparent; +} + +#intern_info h3 { + text-transform: capitalize; +} + +#intern_info h4, +#intern_info h5 { + margin-top: 0.5rem; +} + +#project_info { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.branch-btn { + border-radius: 0; + padding: 0.5rem; + border-radius: 0.2rem; + margin: 0.5rem 0.5rem 0.5rem 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.active-branch { + opacity: 1; + color: var(--accent-color); + background: rgba(var(--text-color), 0.04); +} + +.active-project { + background: rgba(var(--text-color), 0.06); +} + +.opac { + opacity: 1 !important; +} + +.task-list-item { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto auto 1fr auto; + grid-template-columns: auto auto 1fr auto; + grid-template-areas: 'status . title options' + 'status . interns interns' + 'status . description description'; + padding: 1rem; + gap: 0.5rem; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: rgba(var(--text-color), 0.02); +} + +.task-list-item .checkbox { + -ms-grid-row-span: 3; + grid-area: status; + padding: 0.5rem 0.5rem 0.5rem 0; + -ms-flex-item-align: start !important; + align-self: flex-start !important; +} + +.task-list-item:first-of-type { + margin-top: 1rem; + border-radius: 0.2rem 0.2rem 0 0; +} + +.task-list-item:last-of-type { + border-radius: 0 0 0.2rem 0.2rem; + border-bottom: none; + margin-bottom: 1rem; +} + +.task-list-item h4 { + font-weight: 500; + margin: 0; +} + +.task-list-item .title { + grid-area: title; +} + +.task-list-item .assigned-interns { + -ms-grid-column-span: 2; + grid-area: interns; +} + +.task-list-item .task-option { + grid-area: options; + cursor: pointer; + opacity: 1; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; +} + +.task-list-item .task-option svg { + width: 2rem; + height: 2rem; + padding: 0.5rem; + overflow: visible; + fill: rgba(var(--text-color), 0.8); +} + +.task-list-item p { + -ms-grid-column-span: 2; + grid-area: description; + margin: 0; + text-overflow: ellipsis; + overflow: hidden; + max-width: 100%; +} + +.assigned-interns { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.assigned-interns .assigned-intern { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + font-size: 0.8rem; + margin: 0.2rem 0.5rem 0.2rem 0; + padding: 0.2rem 0 0.2rem 0.4rem; + border-radius: 0.2rem; + border: 1px solid rgba(var(--text-color), 0.24); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + white-space: nowrap; + text-transform: capitalize; +} + +.assigned-interns .assigned-intern button { + padding: 0.2rem; +} + +.assigned-interns .assigned-intern button svg { + padding: 0.2rem; + height: 1rem; + width: 1rem; +} + +.commit { + color: var(--accent-color); + border: 1px solid var(--accent-color); + padding: 0.6rem; +} + +#task_context { + -webkit-transition: 0.3s opacity ease; + transition: 0.3s opacity ease; + top: 0; + right: 0; + margin: 0 2rem; + list-style: none; + padding: 0.5rem 0; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 0.2rem; + position: absolute; + background: rgba(var(--foreground-color), 1); + -webkit-box-shadow: 0.2rem 0.4rem 1rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); + box-shadow: 0.2rem 0.4rem 1rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); +} + +#task_context li { + padding: 0.8rem 1rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +#task_context li svg { + margin-right: 1rem; + width: 1.2rem; + height: 1.2rem; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; +} + +.temp-task { + padding: 1rem; + background: rgba(var(--text-color), 0.02); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.temp-task .input { + margin: 0.4rem 0; +} + +#branch_container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + margin: 1rem 0; +} + +#notification { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +#bottom_nav { + position: fixed; + bottom: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + width: 100vw; + background: rgba(var(--foreground-color), 1); + z-index: 4; + border-top: 1px solid rgba(var(--text-color), 0.1); +} + +#bottom_nav button { + padding: 0.2rem; + width: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + font-size: 0.7rem; + font-weight: normal; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +#bottom_nav button svg { + margin: 0.4rem; +} + +#show_message { + -webkit-transform: translate(0, 0.4rem); + transform: translate(0, 0.4rem); + -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; + transition: opacity 0.3s ease, -webkit-transform 0.3s ease; + transition: transform 0.3s ease, opacity 0.3s ease; + transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease; + -webkit-box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16); + box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + color: white; + position: fixed; + bottom: 0; + right: 0; + width: 100%; + z-index: 11; +} + +#show_message span { + font-weight: 500; + padding: 1rem; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +#show_message button { + padding: 0.5rem 1rem; + margin: 0; +} + +#show_message button svg { + stroke: white; +} + +#interns_list { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + min-width: 20rem; +} + +#interns_list #interns_list_container { + min-height: 50vh; + max-height: 50vh; + overflow-y: auto; +} + +#best_interns_container, +#project_list_container { + margin-bottom: 1rem; +} + +#best_interns_container .container-header, +#project_list_container .container-header { + padding-right: 0; +} +#best_interns_container .container-header .icon, +#project_list_container .container-header .icon{ + margin-right: 0.5rem; +} + +#edit_data_fig { + fill: rgba(var(--text-color), 0.6); + width: 60vw; + margin: 2rem 0; +} + +.header { + position: -webkit-sticky; + position: sticky; + top: 0; + background: rgba(var(--foreground-color), 1); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row; + flex-flow: row; + border-bottom: 1px solid rgba(var(--text-color), 0.1); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + z-index: 2; +} + +.header svg { + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + height: 2rem; + width: 2rem; + cursor: pointer; + padding: 0.4rem; + margin-left: 1rem; +} + +.header h3 { + padding: 0 0.5rem; + display: inline-flexbox; +} + +.appear-on-scroll-up { + position: fixed !important; + top: 0; + width: 100%; + height: 4rem !important; +} + +#loading_page{ + display: grid; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 5; + text-align: center; + place-content: center; + justify-items: center; + background-color: rgba(var(--foreground-color), 1); +} +.loading-message{ + font-size: 1.3rem; + margin: 1.5rem 0 0.5rem 0; +} +#loading_page__footer{ + position: absolute; + bottom: 0; + width: 100%; + padding: 1.5rem; + .icon{ + height: 4rem; + width: 4rem; + } +} + +.loader { + height: 2rem; + width: 2rem; + stroke-width: 8; + overflow: visible; + stroke: var(--accent-color); + fill: none; + stroke-dashoffset: 180; + stroke-dasharray: 180; + animation: load 3.6s linear infinite, spin 1s linear infinite; +} +@keyframes load { + 50% { + stroke-dashoffset: 0; + } + 100%{ + stroke-dashoffset: -180; + } +} + +@keyframes spin { + 100% { + transform: rotate(360deg); + } +} + +#status_map_container { + position: relative; + overflow: hidden; + background: #B9F6CA; +} + +#status_map_container .branch-btn { + color: rgba(0, 0, 0, 0.8); +} + +#status_map_container p { + color: rgba(0, 0, 0, 0.9); +} + +#status_map_container .active-branch { + color: white; + background: rgba(0, 200, 83, 0.6); +} + +#status_map_container #status_map { + position: relative; + z-index: 1; + padding: 1rem; + color: #000; +} + +#status_map_container #status_map h2 { + margin: 0.4rem 0; + text-transform: capitalize; +} + +#status_map_container #status_map .circle { + background: #B9F6CA; + border: 2px solid rgba(0, 0, 0, 0.4); +} + +#status_map_container #status_map .line { + background: rgba(0, 0, 0, 0.4); +} + +#status_map_container #status_map .assigned-intern { + border: rgba(0, 0, 0, 0.4) 1px solid; +} + +#status_map_container #status_map .apply-btn { + color: #1B5E20; + background: rgba(0, 200, 83, 0.2); +} + +.apply-btn { + padding: 0.3rem 0.6rem; +} +.watching { + position: relative; + padding-left: 1rem; + padding-top: 1rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #000; + z-index: 1; +} + +.watching h4 { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + font-weight: 500; +} + +.watching button { + padding: 1rem; +} + +.watching button svg { + fill: none !important; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + stroke: #000; +} + +#right { + padding: 0 1rem; +} + +#right div:first-of-type h2 { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + margin: 0.4rem 0; +} + +#right div:first-of-type button { + border: 1px solid rgba(var(--text-color), 0.06); +} + +.center { + position: relative; + display: -ms-grid; + display: grid; + place-content: center; + height: 100%; + text-align: center; +} + +.slide-left { + -webkit-animation: slide-left 0.4s ease; + animation: slide-left 0.4s ease; +} + +@-webkit-keyframes slide-left { + 100% { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + opacity: 0; + } +} + +@keyframes slide-left { + 100% { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + opacity: 0; + } +} + +.update-mi svg { + -webkit-animation: shake 0.6s ease; + animation: shake 0.6s ease; + -webkit-transform-origin: top; + transform-origin: top; +} + +@-webkit-keyframes shake { + 0% { + -webkit-transform: rotate(30deg); + transform: rotate(30deg); + } + + 20% { + -webkit-transform: rotate(-30deg); + transform: rotate(-30deg); + } + + 40% { + -webkit-transform: rotate(20deg); + transform: rotate(20deg); + } + + 60% { + -webkit-transform: rotate(-20deg); + transform: rotate(-20deg); + } + + 80% { + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } +} + +@keyframes shake { + 0% { + -webkit-transform: rotate(30deg); + transform: rotate(30deg); + } + + 20% { + -webkit-transform: rotate(-30deg); + transform: rotate(-30deg); + } + + 40% { + -webkit-transform: rotate(20deg); + transform: rotate(20deg); + } + + 60% { + -webkit-transform: rotate(-20deg); + transform: rotate(-20deg); + } + + 80% { + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } +} + +.settings-mi svg { + -webkit-animation: rot 0.6s ease; + animation: rot 0.6s ease; + -webkit-transform-origin: center; + transform-origin: center; +} + +@-webkit-keyframes rot { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + + 100% { + -webkit-transform: rotate(60deg); + transform: rotate(60deg); + } +} + +@keyframes rot { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + + 100% { + -webkit-transform: rotate(60deg); + transform: rotate(60deg); + } +} + +.capitalise { + text-transform: capitalize; +} + +#show_all, +#project_explorer { + margin: 0; +} + +#admin_panel { + padding: 0 1.5rem; + display: grid; + gap: 1.5rem; +} +#admin_panel__header{ + display: grid; + gap: 0 1rem; + padding: 0.5rem 0; + grid-template-columns: 1fr auto; + align-items: center; +} +#project_editing_panel{ + padding: 1rem; +} + +@media only screen and (min-width: 640px) { + .hide-on-desktop { + display: none !important; + } + + .hide-on-mobile { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } + + .hide-page-on-mobile { + display: -ms-grid; + display: grid; + } + sm-popup{ + --width: 24rem; + } + .popup__header{ + padding: 1.5rem 1.5rem 0 0.5rem; + } + + .page, + #show_all, + #project_explorer { + margin: 1rem 4vw; + } + + #top_nav { + padding: 1rem 2vw; + } + + #settings_page { + padding: 1rem 2rem; + } + + .logo { + -webkit-box-pack: left; + -ms-flex-pack: left; + justify-content: left; + width: auto; + } + + #show_message { + -webkit-transform: translate(0.4rem, 0); + transform: translate(0.4rem, 0); + margin: 1rem; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 0.2rem; + } + + #sign_in { + width: 24rem; + height: auto; + border-radius: 0.4rem; + } + + #floating_btn { + margin: 1rem; + } + + #dashboard { + -ms-grid-columns: 3fr 1fr; + grid-template-columns: 3fr 1fr; + } + + #dashboard #status_map_container { + -ms-flex-item-align: start; + align-self: flex-start; + } + + #dashboard #status_map_container .watching { + padding-left: 2rem; + } + + #dashboard #status_map_container #status_map { + padding: 1rem 2rem; + } + + .task .apply-btn { + opacity: 0; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; + } + + .task:hover .apply-btn { + opacity: 1; + } + + #intern_info { + width: 24rem; + } + + .hover { + -webkit-transition: background 0.3s ease; + transition: background 0.3s ease; + cursor: pointer; + } + + .hover:hover { + background: rgba(var(--text-color), 0.06); + } + + #admin_panel { + grid-template-columns: 16rem 1fr; + grid-template-rows: auto 1fr; + grid-template-areas: 'admin-header admin-header' '. .'; + } + #admin_panel__header{ + grid-area: admin-header; + } + + #edit_data_fig { + width: 16rem; + -ms-grid-column-align: center; + justify-self: center; + } + + #interns, + #projects { + display: flex; + flex-direction: column; + max-height: calc(100vh - 16rem); + overflow-y: auto; + } + + .task-list-item .task-option { + opacity: 0; + } + + .task-list-item:hover .task-option { + opacity: 1; + } + + #project_explorer { + display: -ms-grid; + display: grid; + align-items: flex-start; + -ms-grid-columns: 1fr 3fr; + grid-template-columns: 1fr 3fr; + grid-template-areas: 'header header' + 'left right'; + } + + #project_explorer .header { + border-radius: 0.4rem 0.4rem 0 0; + -ms-grid-column-span: 2; + grid-area: header; + } + + #project_explorer #left { + position: -webkit-sticky; + position: sticky; + top: 4.8rem; + grid-area: left; + -ms-flex-item-align: start; + align-self: flex-start; + border-right: 1px solid rgba(var(--text-color), 0.06); + } + + #project_explorer #left h4 { + margin-top: 0; + margin-bottom: 0.5rem; + color: #29B6F6; + font-size: 0.9rem; + } + + #project_explorer #right { + grid-area: right; + } +} + + +// Newer styles + +#update_of_project{ + color: rgba(var(--text-color), 0.8); +} +#update_of_task{ + font-size: 1.3rem; + margin: 0.4rem 0 1.8rem 0; +} + +ul{ + padding: 0; + list-style: none; +} +#assigned_task_list{ + display: grid; + align-content: flex-start; + gap: 1.5rem; +} +.task-card{ + display: grid; + padding: 1rem; +} +.task__header{ + display: grid; + gap: 0 0.5rem; + align-items: flex-start; + grid-template-columns: 1fr auto; + grid-template-areas: '. send-button' '. send-button'; +} +.task__project-title{ + font-size: 0.9rem; + font-weight: 500; + border-radius: 0.3rem; + padding: 0.3rem 0.5rem; + justify-self: flex-start; + margin-bottom: 0.5rem !important; + color: rgba(var(--text-color), 0.8); + background-color: rgba(var(--text-color), 0.06); +} +.task__title{ + font-size: 1.5rem; + margin-bottom: 1rem !important; +} +.task__description{ + white-space: pre-line; + color: rgba(var(--text-color), 0.8); +} +.send-update-button{ + grid-area: send-button; + border: solid 1px; + color: var(--accent-color); + .icon{ + height: 1.2rem; + width: 1.2rem; + fill: var(--accent-color); + } +} + + +// + + + + +@media only screen and (min-width: 1280px) { + + .page, + #show_all, + #project_explorer { + margin: 1rem 8vw; + } +} +@media (any-hover: hover){ + ::-webkit-scrollbar{ + width: 0.5rem; + height: 0.5rem; + } + + ::-webkit-scrollbar-thumb{ + background: rgba(var(--text-color), 0.3); + border-radius: 1rem; + &:hover{ + background: rgba(var(--text-color), 0.5); + } + } + .send-update-button{ + opacity: 0; + transition: opacity 0.3s; + } + .task-card:hover{ + .send-update-button{ + opacity: 1; + } + } +} +@media (any-hover: none){ + .task-option, + .apply-btn { + opacity: 1; + } +} \ No newline at end of file diff --git a/new.html b/new.html new file mode 100644 index 0000000..f743068 --- /dev/null +++ b/new.html @@ -0,0 +1,11618 @@ + + + + + + RIBC + + + + + + + + + + + + + + + +

+

+
+ Cancel + OK +
+ +
+

Sign In

+

Welcome to RIBC.

+
+ + Sign in +
+

+ Don't have a private key? get it here +
or you can sign as guest. +

+ + as guest + +
+ + +
+
+
+

Projects you are watching

+ + +
+
+
+
+

My tasks

+ +
+
+
+
+ + + + +

Leaderboard

+ +
+
+
+
+
+ + + + +

Projects

+ +
+
+
+
+
+
+

Settings

+
+

Account

+

+ +
+
+ +
+

Dark mode

+

Turn dark mode on/off

+
+ +
+
+

About

+
Version 8.2.5
+ +
Powered by
+ + + + + + + + + + + + + + +
+
+
+
+ + Go back to previous page + + +

+
+
+
+
+
+ + Go back to previous page + + +

Projects

+
+
+

My projects

+
+

Other projects

+
+
+
+
+

+ +
+

+
+
+

+
+
+
+
+
+
+

Manage projects and intern assignments

+

Don't forget to commit changes

+
+ Commit +
+
+ + Projects + Interns + + +
+
+

Add project

+ +
+
+
+
+
+

Add Intern

+ +
+
+
+ +
+
+
+

Project Name

+
+

+ +

+
+
+

Tasks

+
+ +
+ + +
+
+
+ Copied +
+ +

Intern name

+
+ FlO ID + + Copy FLO address + + +
+

Update Rating

+
+ + + +

Points

+ + +
+ + + +
+ + Close this popup + + +

Choose an intern

+
+ + + +
+ + + +
+
+

Information

+
+ Project name + Points + Description +
+
+
+

Tasks

+
+
+
+
+ + + +
+ + close this popup + + +

Add new project

+ +
+ + + + + + + close this popup + + +

Add new intern

+ + + + + + +
+ + close this popup + + +

Create a new branch

+ +
+ + + + +
+ +

Post an update

+
+
+

+
Update
+ + +
+ +

Loading RIBC

+

+ A FLO Blockchain App by RanchiMall +

+ +
+ + + + + + + + + + + + + + + \ No newline at end of file