graviton-plugin-sdk/Graviton-App/src/css/pages/settings.css

Gravtion plugin Dev Kit

/*
########################################
              MIT License

Copyright (c) 2019 Marc Espin Sanz

License > https://github.com/Graviton-Code-Editor/Graviton-App/blob/master/LICENSE.md

#########################################
*/

#settings_window_body,
#market_window_body {
  display: flex;
}

#theme_list {
  overflow: auto;
  width: 100%;
  height: auto;
  overflow: auto;
  white-space: nowrap;
}

.theme_div {
  border-radius: 7px;
  padding: 16px;
  margin: 8px 4px;
  display: inline-block;
  min-width: 175px;
  max-width: 175px;
  text-overflow: ellipsis;
  overflow: hidden;
  min-height: 110px;
  max-height: 110px;
  background: var(--secondaryColor);
  color: var(--white-black);
  cursor: pointer;
  border:2px solid var(--primaryColor)
}
.theme_div p {
  text-overflow: ellipsis;
  min-height: auto;
  line-height: auto;
  overflow: hidden;
}

.theme_div:not(.active):hover {
  background: var(--widget-color);
  border:2px solid var(--widget-color);
  cursor: pointer;
}

.theme_div.active:hover {
  background: var(--accentDarkColor);
  border:2px solid var(--accentDarkColor);
  cursor: pointer;
}

.theme_div:active {
  transform: scale(var(--scalation));
}

div.active {
  background: var(--accentColor);
  border:2px solid var(--accentColor);
  color: white;
}

.theme_div .accent {
  height: 14px !important;
  width: 14px !important;
  border: 2px solid var(--primaryColor);
  border-radius: 50px;
}

.theme_div:hover:not(.active) .accent {
  transition: 0.05s;
  border: 2px solid var(--widget-color);
}

#language_list {
  overflow: auto;
  width: 100%;
  height: auto;
  position: relative;
  top: 0;
  left: 0;
}

#language_list.welcome {
  margin: -20px 0px;
  max-height: 55%;
}

#settings_content p {
  font-size: 14px;
  line-height: 20px;
  margin: 16px 0px;
}

.language_div {
  transition: 0.05s;
  border-radius: 7px;
  padding: 10px;
  margin: 5px;
  min-width: 80px;
  width: auto;
  background: var(--primaryColor);
  color: var(--white-black);
  transform: scale(1);
  cursor: pointer;
  font-size: 14px;
}

.language_div:not(.active):hover {
  transition: 0.05s;
  background: var(--widget-color);
}

.language_div:active {
  transition: 0.05s;
  transform: scale(var(--scalation));
}