style.css

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
* {
  padding: 0;
  margin: 0;
}

@media (pointer: fine) {
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(85, 85, 85, 0.3333333333);
    border-radius: 10px;
  }
}
body {
  background-color: #1e1e1e;
  padding-left: 50px;
  font-family: sans-serif;
  color: #bbbbbb;
  font-size: 0.8em;
}
body.fullscreen {
  transition-duration: 0.5s;
  padding-left: 0;
}
body.fullscreen #side-bar-small {
  transition-duration: 0.5s;
  transform: translateX(-50px);
}

#side-bar-small {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #333333;
  transition-duration: 0.2s;
}
#side-bar-small > div {
  width: 100%;
  display: flex;
  flex-direction: column;
}
#side-bar-small > div div.icon {
  width: 100%;
  height: 50px;
  margin: 2px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: #646464;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  flex-direction: column;
}
#side-bar-small > div div.icon span {
  font-size: small;
}
#side-bar-small > div div.icon.selected {
  color: white;
}
@media (hover: hover) and (pointer: fine) {
  #side-bar-small > div div.icon:hover {
    color: white;
  }
}
#side-bar-small > div div.icon.selected {
  border-left: 3px solid white;
  border-right: 3px solid transparent;
}

#main {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
}

.px-1em, .folder {
  padding: 0 1em;
}

.uppercase {
  text-transform: uppercase;
}

#side-expandable {
  position: relative;
  min-width: 170px;
  width: 242px;
  background-color: #252526;
  display: none;
  flex-shrink: 0;
  overflow: auto;
}
#side-expandable #side-bar-handler {
  position: absolute;
  right: 0;
  height: 100%;
  width: 7px;
  cursor: e-resize;
  border-right: 3px solid transparent;
}
#side-expandable #side-bar-handler.border-active {
  border-right: 3px solid #007acc;
}
#side-expandable.expanded {
  display: block;
}
#side-expandable > p {
  padding: 1em;
}
#side-expandable > div {
  height: calc(100vh - 50px);
  overflow: auto;
}

#right-side {
  width: 100vw;
  overflow-x: auto;
}
#right-side #tabs {
  display: flex;
  background-color: #252526;
  white-space: nowrap;
  overflow: auto;
}
#right-side #tabs div {
  border-right: 1px solid #1e1e1e;
  background-color: #1e1e1e;
  position: relative;
  padding: 1em 2em;
}
#right-side #tabs div:not(.selected) {
  color: rgb(92, 92, 92);
  background-color: #2d2d2d;
}
#right-side .page {
  overflow: auto;
  height: calc(100vh - 50px);
}
#right-side p {
  color: white;
  font-family: "Roboto Mono", monospace;
  white-space: nowrap;
}
#right-side p .keyword-color {
  color: #2b6da0;
}
#right-side p .key-color {
  color: #7cbfd8;
}
#right-side p .value-color, #right-side p .value-color a {
  color: #c27d6a;
}
#right-side p .number-color {
  color: #aeb9a9;
}
#right-side p .array-color {
  color: #dcdcc2;
}
#right-side p .comment-color {
  color: #507c3c;
}
#right-side p .sign-color {
  color: rgb(92, 92, 92);
}
#right-side p i::before {
  content: "";
  border-left: 1px solid rgb(92, 92, 92);
}
#right-side p:nth-child(1):before {
  content: "1";
  color: rgb(92, 92, 92);
  margin: 0 1em;
  padding-left: 0.6em;
}
#right-side p:nth-child(2):before {
  content: "2";
  color: rgb(92, 92, 92);
  margin: 0 1em;
  padding-left: 0.6em;
}
#right-side p:nth-child(3):before {
  content: "3";
  color: rgb(92, 92, 92);
  margin: 0 1em;
  padding-left: 0.6em;
}
#right-side p:nth-child(4):before {
  content: "4";
  color: rgb(92, 92, 92);
  margin: 0 1em;
  padding-left: 0.6em;
}
#right-side p:nth-child(5):before {
  content: "5";
  color: rgb(92, 92, 92);
  margin: 0 1em;
  padding-left: 0.6em;
}
#right-side p:nth-child(6):before {
  content: "6";
  color: rgb(92, 92, 92);
  margin: 0 1em;
  padding-left: 0.6em;
}
#right-side p:nth-child(7):before {
  content: "7";
  color: rgb(92, 92, 92);
  margin: 0 1em;
  padding-left: 0.6em;
}
#right-side p:nth-child(8):before {
  content: "8";
  color: rgb(92, 92, 92);
  margin: 0 1em;
  padding-left: 0.6em;
}
#right-side p:nth-child(9):before {
  content: "9";
  color: rgb(92, 92, 92);
  margin: 0 1em;
  padding-left: 0.6em;
}
#right-side p:nth-child(10):before {
  content: "10";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(11):before {
  content: "11";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(12):before {
  content: "12";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(13):before {
  content: "13";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(14):before {
  content: "14";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(15):before {
  content: "15";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(16):before {
  content: "16";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(17):before {
  content: "17";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(18):before {
  content: "18";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(19):before {
  content: "19";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(20):before {
  content: "20";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(21):before {
  content: "21";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(22):before {
  content: "22";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(23):before {
  content: "23";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(24):before {
  content: "24";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(25):before {
  content: "25";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(26):before {
  content: "26";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(27):before {
  content: "27";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(28):before {
  content: "28";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(29):before {
  content: "29";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(30):before {
  content: "30";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(31):before {
  content: "31";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(32):before {
  content: "32";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(33):before {
  content: "33";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(34):before {
  content: "34";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(35):before {
  content: "35";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(36):before {
  content: "36";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(37):before {
  content: "37";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(38):before {
  content: "38";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(39):before {
  content: "39";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(40):before {
  content: "40";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(41):before {
  content: "41";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(42):before {
  content: "42";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(43):before {
  content: "43";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(44):before {
  content: "44";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}
#right-side p:nth-child(45):before {
  content: "45";
  color: rgb(92, 92, 92);
  margin: 0 1em;
}

.icon-js {
  position: relative;
}
.icon-js::before {
  content: "";
  position: absolute;
  top: 13.5px;
  left: 10px;
  background-image: url("icons/js.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  width: 13px;
  height: 13px;
}
.icon-js.selected::after, .icon-js:hover::after {
  content: "×";
  position: absolute;
  right: 0.5em;
  top: 25%;
  font-size: 1.5em;
}

.icon-php {
  position: relative;
}
.icon-php::before {
  content: "";
  position: absolute;
  top: 13.5px;
  left: 10px;
  background-image: url("icons/php.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  width: 13px;
  height: 13px;
}
.icon-php.selected::after, .icon-php:hover::after {
  content: "×";
  position: absolute;
  right: 0.5em;
  top: 25%;
  font-size: 1.5em;
}

.icon-codepen {
  position: relative;
}
.icon-codepen::before {
  content: "";
  position: absolute;
  top: 13.5px;
  left: 10px;
  background-image: url("icons/codepen.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  width: 13px;
  height: 13px;
}
.icon-codepen.selected::after, .icon-codepen:hover::after {
  content: "×";
  position: absolute;
  right: 0.5em;
  top: 25%;
  font-size: 1.5em;
}

.icon-html {
  position: relative;
}
.icon-html::before {
  content: "";
  position: absolute;
  top: 13.5px;
  left: 10px;
  background-image: url("icons/html.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  width: 13px;
  height: 13px;
}
.icon-html.selected::after, .icon-html:hover::after {
  content: "×";
  position: absolute;
  right: 0.5em;
  top: 25%;
  font-size: 1.5em;
}

.icon-pdf {
  position: relative;
}
.icon-pdf::before {
  content: "";
  position: absolute;
  top: 13.5px;
  left: 10px;
  background-image: url("icons/pdf.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  width: 13px;
  height: 13px;
}
.icon-pdf.selected::after, .icon-pdf:hover::after {
  content: "×";
  position: absolute;
  right: 0.5em;
  top: 25%;
  font-size: 1.5em;
}

.pointer, #source-control button, .document, .folder {
  cursor: pointer;
}

.noselect, .document, .folder {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
 supported by Chrome, Edge, Opera and Firefox */
}

.hidden {
  display: none;
}

.content > div {
  margin-bottom: 1em;
}

.folder {
  outline: none;
  padding: 0.3em 0;
}
.folder:hover {
  background-color: rgba(46, 46, 46, 0.6588235294);
}
.folder:focus {
  background-color: rgba(0, 122, 204, 0.5058823529);
}
.folder:before {
  display: inline-block;
  content: "";
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-chevron-down' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
  background-repeat: no-repeat;
  background-size: 1em 1em;
  transform: translateY(0.15em);
  height: 1em;
  width: 1em;
}
.folder:not(.open):before {
  transform: translateY(0.15em) rotate(270deg);
}

.sub0 {
  padding-left: 1em;
}
.sub0 + div .document {
  padding-left: 2em;
}

.sub1 {
  padding-left: 2em;
}
.sub1 + div .document {
  padding-left: 3em;
}

.sub2 {
  padding-left: 3em;
}
.sub2 + div .document {
  padding-left: 4em;
}

.document {
  padding: 0.3em 0;
  padding-left: 2em;
  outline: none;
}
.document:hover {
  background-color: rgba(46, 46, 46, 0.6588235294);
}
.document:focus {
  background-color: rgba(0, 122, 204, 0.5058823529);
}
.document[data-github], .document[data-codepen], .document[data-url] {
  position: relative;
}
.document[data-github] i.fa-external-link-alt, .document[data-codepen] i.fa-external-link-alt, .document[data-url] i.fa-external-link-alt {
  right: 0.5em;
  position: absolute;
  top: 25%;
  opacity: 0.2;
}
.document span {
  white-space: nowrap;
  display: inline-block;
  max-width: calc(100% - 50px);
  text-overflow: ellipsis;
  overflow: hidden;
}

#source-control {
  padding: 0 1em;
}
#source-control button {
  width: 100%;
  color: white;
  background-color: rgba(0, 122, 204, 0.5058823529);
  border: none;
  border-radius: 0;
  height: 2.2em;
  max-width: 250px;
  display: block;
  margin-inline: auto;
}
#source-control button:hover {
  background-color: #2b6da0;
}

@media (max-width: 500px) {
  #index-js, #index-php, #contacts-html {
    font-size: 0.8em;
  }
}
@media (min-width: 500px) {
  #index-js, #index-php, #contacts-html {
    font-size: 1em;
  }
}
@media (min-width: 768px) {
  #index-js, #index-php, #contacts-html {
    font-size: 1.5em;
  }
}

/*# sourceMappingURL=style.css.map */